{"version":3,"names":["NAVIGATION_MAIN_LINK_TARGET_SELF","NAVIGATION_MAIN_LINK_LOCALIZATION","en","ariaLabel","default","de","sv","nl","it","hu","da","fr","es","pl","ro","hr","cs","sl","navigationMainLinkCss","EonUiNavigationMainLinkStyle0","NavigationMainLink","this","localization","removeActiveState","active","componentWillLoad","setCurrentLocalization","computeAriaLabel","getRelatedComponents","componentDidLoad","navigationMainLinkLoad","emit","currentLocalization","currentAriaLabel","computeLinkAriaLabel","href","navigation","document","getElementById","setCurrentLocalizationDelegate","handleClick","_event","navigationMainLinkClick","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/constants/navigation-main-link-i18n.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","import { Localization } from \"../../../../../../../common/localizable-component\";\nimport { NavigationMainLinkLocalization } from \"./navigation-main-link-types\";\n\nexport const NAVIGATION_MAIN_LINK_LOCALIZATION: Localization<NavigationMainLinkLocalization> = {\n  en: {\n    ariaLabel: {\n      default: \"Navigate to {0}\"\n    }\n  },\n  de: {\n    ariaLabel: {\n      default: \"Navigiere zu {0}\"\n    }\n  },\n  sv: {\n    ariaLabel: {\n      default: \"Gå till {0}\"\n    }\n  },\n  nl: {\n    ariaLabel: {\n      default: \"Navigeer naar {0}\"\n    }\n  },\n  it: {\n    ariaLabel: {\n      default: \"Naviga su {0}\"\n    }\n  },\n  hu: {\n    ariaLabel: {\n      default: \"Tovább a {0}\"\n    }\n  },\n  da: {\n    ariaLabel: {\n      default: \"Gå til {0}\"\n    }\n  },\n  fr: {\n    ariaLabel: {\n      default: \"Naviguer à {0}\"\n    }\n  },\n  es: {\n    ariaLabel: {\n      default: \"Navega a {0}\"\n    }\n  },\n  pl: {\n    ariaLabel: {\n      default: \"Przejdź do {0}\"\n    }\n  },\n  ro: {\n    ariaLabel: {\n      default: \"Navigați la {0}\"\n    }\n  },\n  hr: {\n    ariaLabel: {\n      default: \"Idite do {0}\"\n    }\n  },\n  cs: {\n    ariaLabel: {\n      default: \"Přejděte na {0}\"\n    }\n  },\n  sl: {\n    ariaLabel: {\n      default: \"Pojdite v {0}\"\n    }\n  }\n};\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  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 {\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  &.#{$prefix}current {\n    color: $navigation-main-link-font-color-current;\n    background-color: $navigation-main-link-bg-color-current;\n\n    // &::after {\n    //   background-color: $navigation-main-link-border-color-current;\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    &:focus {\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\n  &.#{$prefix}active {\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-border-color-active;\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    &:focus {\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\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 {\n  LocalizableComponent,\n  setCurrentLocalizationDelegate,\n  Localization\n} from \"../../../../../../common/localizable-component\";\nimport { computeLinkAriaLabel } from \"../../../../../../utils/link-helper\";\nimport { NAVIGATION_MAIN_LINK_TARGET_SELF } from \"./constants/navigation-main-link-constants\";\nimport { NAVIGATION_MAIN_LINK_LOCALIZATION } from \"./constants/navigation-main-link-i18n\";\nimport { NavigationMainLinkTarget, NavigationMainLinkLocalization } 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 implements LocalizableComponent<NavigationMainLinkLocalization> {\n  // @InitLogging() sentryTransaction;\n  private currentAriaLabel: string;\n\n  localization: Localization<NavigationMainLinkLocalization> = NAVIGATION_MAIN_LINK_LOCALIZATION;\n  currentLocalization: NavigationMainLinkLocalization;\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.setCurrentLocalization();\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 || !this.currentLocalization) {\n      this.currentAriaLabel = this.ariaLabel;\n      return;\n    }\n    this.currentAriaLabel = computeLinkAriaLabel(this.currentLocalization, this.href, false);\n  }\n\n  getRelatedComponents() {\n    this.navigation = document.getElementById(\"eonui-navigation\") as HTMLEonUiNavigationElement;\n  }\n\n  setCurrentLocalization() {\n    setCurrentLocalizationDelegate(this);\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          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":"wOACO,MAAMA,EAAmC,QCEzC,MAAMC,EAAkF,CAC7FC,GAAI,CACFC,UAAW,CACTC,QAAS,oBAGbC,GAAI,CACFF,UAAW,CACTC,QAAS,qBAGbE,GAAI,CACFH,UAAW,CACTC,QAAS,gBAGbG,GAAI,CACFJ,UAAW,CACTC,QAAS,sBAGbI,GAAI,CACFL,UAAW,CACTC,QAAS,kBAGbK,GAAI,CACFN,UAAW,CACTC,QAAS,iBAGbM,GAAI,CACFP,UAAW,CACTC,QAAS,eAGbO,GAAI,CACFR,UAAW,CACTC,QAAS,mBAGbQ,GAAI,CACFT,UAAW,CACTC,QAAS,iBAGbS,GAAI,CACFV,UAAW,CACTC,QAAS,mBAGbU,GAAI,CACFX,UAAW,CACTC,QAAS,oBAGbW,GAAI,CACFZ,UAAW,CACTC,QAAS,iBAGbY,GAAI,CACFb,UAAW,CACTC,QAAS,oBAGba,GAAI,CACFd,UAAW,CACTC,QAAS,mBCvEf,MAAMc,EAAwB,+m/CAC9B,MAAAC,EAAeD,E,MCqBFE,EAAkB,M,yJAI7BC,KAAAC,aAA6DrB,E,YAMlC,M,oDA8BgBD,E,+FA2B3C,uBAAMuB,GACJF,KAAKG,OAAS,K,CAGhB,iBAAAC,GACEJ,KAAKK,yBACLL,KAAKM,mBACLN,KAAKO,sB,CAGP,gBAAAC,GACER,KAAKS,uBAAuBC,M,CAItB,gBAAAJ,GACN,GAAIN,KAAKlB,YAAckB,KAAKW,oBAAqB,CAC/CX,KAAKY,iBAAmBZ,KAAKlB,UAC7B,M,CAEFkB,KAAKY,iBAAmBC,EAAqBb,KAAKW,oBAAqBX,KAAKc,KAAM,M,CAGpF,oBAAAP,GACEP,KAAKe,WAAaC,SAASC,eAAe,mB,CAG5C,sBAAAZ,GACEa,EAA+BlB,K,CAGjC,iBAAMmB,CAAYC,GAChBpB,KAAKqB,wBAAwBX,KAAKV,KAAKc,MAEvC,KAAMd,KAAKsB,UAAW,CACpBF,EAAOG,iBAEP,KAAMvB,KAAKwB,OAAQ,OACXxB,KAAKe,WAAWU,cAAczB,KAAKsB,U,KACpC,CACL,GAAItB,KAAKG,OAAQ,CACfH,KAAKe,WAAWW,eAChB1B,KAAKG,OAAS,K,KACT,OACCH,KAAKe,WAAWY,YAAY3B,KAAKsB,WACvCtB,KAAKG,OAAS,I,IAMtB,mBAAMyB,CAAcR,GAClBpB,KAAKqB,wBAAwBX,OAE7B,KAAMV,KAAKsB,UAAW,CACpB,GAAIF,EAAOS,MAAQC,EAAOC,OAASX,EAAOS,MAAQC,EAAOE,MAAO,CAC9DZ,EAAOG,iBAEP,GAAIvB,KAAKG,OAAQ,CACfH,KAAKe,WAAWW,eAChB1B,KAAKG,OAAS,K,KACT,OACCH,KAAKe,WAAWY,YAAY3B,KAAKsB,UAAW,MAClDtB,KAAKG,OAAS,I,IAMtB,MAAA8B,GACE,OACEC,EAACC,EAAI,CAAAN,IAAA,4CACHK,EAAA,KAAAL,IAAA,2CACEO,MAAOpC,KAAKqC,YAAYC,aAAa,SACrCxB,KAAMd,KAAKc,KACXyB,OAAQvC,KAAKuC,OACbC,MAAOC,EAAI,CAAEC,UAAW1C,KAAK0C,QAASvC,SAAUH,KAAKG,OAAQqB,SAAUxB,KAAKwB,SAAS,aACzExB,KAAKY,iBACjB+B,QAAUC,GAAsB5C,KAAKmB,YAAYyB,GACjDC,KAAK,WACLC,SAAS,IACTC,UAAYH,GAAyB5C,KAAK4B,cAAcgB,IAEvD5C,KAAKgD,MACJd,EAAA,QAAMM,MAAOC,EAAI,iBACfP,EAAA,QAAMM,MAAOC,EAAI,QAASQ,UAAWjD,KAAKgD,QAG7ChD,KAAKwB,UAAYxB,KAAKsB,WACrBY,EAAA,eAAagB,KAAK,sBAAsBL,KAAK,MAAK,aAAY,yB"}