{"version":3,"names":["NAVIGATION_MAIN_LINK_TARGET_SELF","navigationMainLinkCss","EonUiNavigationMainLinkStyle0","NavigationMainLink","removeActiveState","this","active","componentWillLoad","computeAriaLabel","getRelatedComponents","componentDidLoad","navigationMainLinkLoad","emit","ariaLabel","currentAriaLabel","navigation","document","getElementById","handleClick","_event","navigationMainLinkClick","href","subNavRel","preventDefault","mobile","openMobileSub","closeMainSub","openMainSub","handleKeyDown","key","KeyIds","ENTER","SPACE","render","h","Host","title","hostElement","getAttribute","target","class","pfx","current","onClick","event","role","tabindex","onKeyDown","text","innerHTML","name"],"sources":["src/components/navigation/navigation-components/navigation-main/navigation-main-components/navigation-main-link/constants/navigation-main-link-constants.ts","src/components/navigation/navigation-components/navigation-main/navigation-main-components/navigation-main-link/navigation-main-link.scss?tag=eon-ui-navigation-main-link&encapsulation=shadow","src/components/navigation/navigation-components/navigation-main/navigation-main-components/navigation-main-link/navigation-main-link.tsx"],"sourcesContent":["export const NAVIGATION_MAIN_LINK_TARGET_BLANK = \"_blank\";\nexport const NAVIGATION_MAIN_LINK_TARGET_SELF = \"_self\";\nexport const NAVIGATION_MAIN_LINK_TARGET_PARENT = \"_parent\";\nexport const NAVIGATION_MAIN_LINK_TARGET_TOP = \"_top\";\nexport const NAVIGATION_MAIN_LINK_TARGETS = [\n  NAVIGATION_MAIN_LINK_TARGET_BLANK,\n  NAVIGATION_MAIN_LINK_TARGET_SELF,\n  NAVIGATION_MAIN_LINK_TARGET_PARENT,\n  NAVIGATION_MAIN_LINK_TARGET_TOP\n] as const;\n",":host {\n  display: block;\n}\n\na {\n  position: relative;\n  height: 100%;\n  font-family: $font-family-base;\n  font-size: 18px;\n  line-height: 24px;\n  text-align: center;\n  padding: 24px 16px 24px 16px;\n  color: $navigation-main-link-font-color;\n  background-color: $navigation-main-link-bg-color;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  .#{$prefix}text-wrapper {\n    padding: 2px 4px;\n  }\n\n  eon-ui-icon {\n    display: none;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: -4px;\n    width: 100%;\n    height: 4px;\n    background-color: $navigation-main-link-border-color;\n  }\n\n  &:hover {\n    color: $navigation-main-link-font-color-hover;\n    background-color: $navigation-main-link-bg-color-hover;\n\n    &::after {\n      background-color: $navigation-main-link-border-color-hover;\n    }\n  }\n\n  &:focus-visible {\n    color: $navigation-main-link-font-color-focus;\n    background-color: $navigation-main-link-bg-color-focus;\n    outline: none;\n\n    &::after {\n      background-color: $navigation-main-link-border-color-focus;\n    }\n  }\n\n  &:focus-visible {\n    .#{$prefix}text-wrapper {\n      outline: $navigation-main-focus-border-width $navigation-main-border-style $navigation-focus-border-color;\n      border-radius: 4px;\n    }\n\n    &::after {\n      background-color: $navigation-main-border-color-focus-visible;\n    }\n  }\n\n  &.#{$prefix}current {\n    color: $navigation-main-link-font-color-current;\n    background-color: $navigation-main-link-bg-color-current;\n\n    &:focus-visible {\n      .#{$prefix}text-wrapper {\n        outline: $navigation-main-focus-border-width $navigation-main-border-style\n          $navigation-main-link-border-color-current-focus;\n        border-radius: 4px;\n      }\n    }\n\n    &::after {\n      background-color: $navigation-main-link-border-color-current;\n    }\n\n    &:focus-visible {\n      color: $navigation-main-link-font-color-current-focus;\n      background-color: $navigation-main-link-bg-color-current-focus;\n      outline: none;\n\n      // &::after {\n      //   background-color: $navigation-main-link-border-color-current-focus;\n      // }\n    }\n\n    &:hover {\n      color: $navigation-main-link-font-color-current-hover;\n      background-color: $navigation-main-link-bg-color-current-hover;\n\n      &::after {\n        background-color: $navigation-main-link-border-color-current-hover;\n      }\n    }\n\n    &.#{$prefix}active {\n      background-color: $navigation-main-link-bg-color-active;\n    }\n  }\n\n  &.#{$prefix}active:not(.#{$prefix}current) {\n    color: $navigation-main-link-font-color-active;\n    background-color: $navigation-main-link-bg-color-active;\n\n    &::after {\n      background-color: $navigation-main-link-bg-color-active;\n    }\n\n    &:focus-visible {\n      color: $navigation-main-link-font-color-active-focus;\n      background-color: $navigation-main-link-bg-color-active-focus;\n      outline: none;\n\n      &::after {\n        background-color: $navigation-main-link-border-color-active-focus;\n      }\n    }\n\n    &:hover {\n      color: $navigation-main-link-font-color-active-hover;\n      background-color: $navigation-main-link-bg-color-active-hover;\n\n      &::after {\n        background-color: $navigation-main-link-border-color-active-hover;\n      }\n    }\n  }\n\n  &.#{$prefix}mobile {\n    display: flex;\n    padding: 12px 48px 12px 32px;\n    text-align: left;\n\n    &.#{$prefix}current {\n      box-shadow: inset 4px 0 0 $navigation-mobile-link-highlight-border-color;\n    }\n\n    eon-ui-icon {\n      display: block;\n      position: absolute;\n      right: 26px;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      left: 32px;\n      bottom: 0;\n      width: 100%;\n      height: 1px;\n      background-color: $navigation-mobile-link-border-color;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &.#{$prefix}mobile {\n    color: $navigation-mobile-link-font-color !important;\n    background-color: transparent !important;\n\n    eon-ui-icon {\n      color: $navigation-mobile-link-font-color !important;\n    }\n  }\n}\n","import { h, Component, Host, Element, Prop, Event, EventEmitter, Watch, State, Method } from \"@stencil/core\";\nimport pfx from \"../../../../../../utils/style-class-prefix-helper\";\nimport { NAVIGATION_MAIN_LINK_TARGET_SELF } from \"./constants/navigation-main-link-constants\";\nimport { NavigationMainLinkTarget } from \"./constants/navigation-main-link-types\";\nimport { KeyIds } from \"../../../../../../constants/keys\";\n// import { InitLogging } from \"../../../../../../decorators/init-logging\";\n\n/**\n * @slot [unnamed] - holds any number of HTML elements.\n */\n@Component({\n  tag: \"eon-ui-navigation-main-link\",\n  styleUrl: \"navigation-main-link.scss\",\n  shadow: true\n})\nexport class NavigationMainLink {\n  // @InitLogging() sentryTransaction;\n  private currentAriaLabel: string;\n\n  navigation: HTMLEonUiNavigationElement;\n\n  @Element() hostElement: HTMLEonUiNavigationMainLinkElement;\n\n  @State() active: boolean = false;\n\n  /**\n   * Raised when the link has been clicked.\n   */\n  @Event() navigationMainLinkClick: EventEmitter;\n\n  /**\n   * Raised when the link has been loaded.\n   */\n  @Event() navigationMainLinkLoad: EventEmitter;\n\n  /**\n   * Defines the text shown as label for the link.\n   */\n  @Prop() text: string;\n\n  /**\n   * Defines the target url of a Link.\n   * Make sure to prefix this with a protocol if the link should display an icon automatically.\n   * Valid protocols are \"http://\", \"https://\", \"mailto:\" and \"tel:\".\n   * @example http://www.google.de, tel:0123456789\n   */\n  @Prop({ mutable: true }) href: string;\n\n  /**\n   * Specifies how the link is opened in the browser, e.g. in new window/tab.\n   * @example \"_blank\", \"_self\", \"_parent\", \"_top\"\n   * @default \"_self\"\n   */\n  @Prop() target: NavigationMainLinkTarget = NAVIGATION_MAIN_LINK_TARGET_SELF;\n\n  /**\n   * Specifies the label to use for accessibility.\n   * Always provide this for pure icon buttons!\n   */\n  @Prop() ariaLabel: string;\n\n  /**\n   * Set link to current if it matches the current url.\n   */\n  @Prop() current: boolean;\n\n  /**\n   * Enter ID of main sub navigation to be opened.\n   */\n  @Prop() subNavRel: string;\n\n  /**\n   * Controls the viewmode of the link\n   */\n  @Prop() mobile: boolean;\n\n  /**\n   * Removes active state\n   */\n  @Method()\n  async removeActiveState() {\n    this.active = false;\n  }\n\n  componentWillLoad() {\n    this.computeAriaLabel();\n    this.getRelatedComponents();\n  }\n\n  componentDidLoad() {\n    this.navigationMainLinkLoad.emit();\n  }\n\n  @Watch(\"href\")\n  private computeAriaLabel() {\n    if (this.ariaLabel) {\n      this.currentAriaLabel = this.ariaLabel;\n      return;\n    }\n  }\n\n  getRelatedComponents() {\n    this.navigation = document.getElementById(\"eonui-navigation\") as HTMLEonUiNavigationElement;\n  }\n\n  async handleClick(_event: Event) {\n    this.navigationMainLinkClick.emit(this.href);\n\n    if (!!this.subNavRel) {\n      _event.preventDefault();\n\n      if (!!this.mobile) {\n        await this.navigation.openMobileSub(this.subNavRel);\n      } else {\n        if (this.active) {\n          this.navigation.closeMainSub();\n          this.active = false;\n        } else {\n          await this.navigation.openMainSub(this.subNavRel);\n          this.active = true;\n        }\n      }\n    }\n  }\n\n  async handleKeyDown(_event: KeyboardEvent) {\n    this.navigationMainLinkClick.emit();\n\n    if (!!this.subNavRel) {\n      if (_event.key === KeyIds.ENTER || _event.key === KeyIds.SPACE) {\n        _event.preventDefault();\n\n        if (this.active) {\n          this.navigation.closeMainSub();\n          this.active = false;\n        } else {\n          await this.navigation.openMainSub(this.subNavRel, true);\n          this.active = true;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.hostElement.getAttribute(\"title\")}\n          href={this.href}\n          target={this.target}\n          class={pfx({ current: !!this.current, active: !!this.active, mobile: !!this.mobile })}\n          {...(this.currentAriaLabel ? { \"aria-label\": this.currentAriaLabel } : {})}\n          onClick={(event: MouseEvent) => this.handleClick(event)}\n          role=\"menuitem\"\n          tabindex=\"0\"\n          onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n        >\n          {this.text && (\n            <span class={pfx(\"text-wrapper\")}>\n              <span class={pfx(\"text\")} innerHTML={this.text} />\n            </span>\n          )}\n          {this.mobile && !!this.subNavRel && (\n            <eon-ui-icon name=\"chevron_small_right\" role=\"img\" aria-label=\"chevron_small_right\"></eon-ui-icon>\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIACO,MAAMA,EAAmC,QCDhD,MAAMC,EAAwB,4s3CAC9B,MAAAC,EAAeD,E,MCcFE,EAAkB,M,qKAQF,M,oDA8BgBH,E,+FA2B3C,uBAAMI,GACJC,KAAKC,OAAS,K,CAGhB,iBAAAC,GACEF,KAAKG,mBACLH,KAAKI,sB,CAGP,gBAAAC,GACEL,KAAKM,uBAAuBC,M,CAItB,gBAAAJ,GACN,GAAIH,KAAKQ,UAAW,CAClBR,KAAKS,iBAAmBT,KAAKQ,UAC7B,M,EAIJ,oBAAAJ,GACEJ,KAAKU,WAAaC,SAASC,eAAe,mB,CAG5C,iBAAMC,CAAYC,GAChBd,KAAKe,wBAAwBR,KAAKP,KAAKgB,MAEvC,KAAMhB,KAAKiB,UAAW,CACpBH,EAAOI,iBAEP,KAAMlB,KAAKmB,OAAQ,OACXnB,KAAKU,WAAWU,cAAcpB,KAAKiB,U,KACpC,CACL,GAAIjB,KAAKC,OAAQ,CACfD,KAAKU,WAAWW,eAChBrB,KAAKC,OAAS,K,KACT,OACCD,KAAKU,WAAWY,YAAYtB,KAAKiB,WACvCjB,KAAKC,OAAS,I,IAMtB,mBAAMsB,CAAcT,GAClBd,KAAKe,wBAAwBR,OAE7B,KAAMP,KAAKiB,UAAW,CACpB,GAAIH,EAAOU,MAAQC,EAAOC,OAASZ,EAAOU,MAAQC,EAAOE,MAAO,CAC9Db,EAAOI,iBAEP,GAAIlB,KAAKC,OAAQ,CACfD,KAAKU,WAAWW,eAChBrB,KAAKC,OAAS,K,KACT,OACCD,KAAKU,WAAWY,YAAYtB,KAAKiB,UAAW,MAClDjB,KAAKC,OAAS,I,IAMtB,MAAA2B,GACE,OACEC,EAACC,EAAI,CAAAN,IAAA,4CACHK,EAAA,KAAAL,IAAA,2CACEO,MAAO/B,KAAKgC,YAAYC,aAAa,SACrCjB,KAAMhB,KAAKgB,KACXkB,OAAQlC,KAAKkC,OACbC,MAAOC,EAAI,CAAEC,UAAWrC,KAAKqC,QAASpC,SAAUD,KAAKC,OAAQkB,SAAUnB,KAAKmB,YACvEnB,KAAKS,iBAAmB,CAAE,aAAcT,KAAKS,kBAAqB,GACvE6B,QAAUC,GAAsBvC,KAAKa,YAAY0B,GACjDC,KAAK,WACLC,SAAS,IACTC,UAAYH,GAAyBvC,KAAKuB,cAAcgB,IAEvDvC,KAAK2C,MACJd,EAAA,QAAAL,IAAA,2CAAMW,MAAOC,EAAI,iBACfP,EAAA,QAAAL,IAAA,2CAAMW,MAAOC,EAAI,QAASQ,UAAW5C,KAAK2C,QAG7C3C,KAAKmB,UAAYnB,KAAKiB,WACrBY,EAAA,eAAAL,IAAA,2CAAaqB,KAAK,sBAAsBL,KAAK,MAAK,aAAY,yB"}