{"version":3,"names":["NAVIGATION_MAIN_ICON_LINK_TARGET_SELF","NAVIGATION_MAIN_ICON_LINK_LOCALIZATION","en","ariaLabel","default","de","sv","nl","it","hu","da","fr","es","pl","ro","hr","cs","sl","navigationMainIconLinkCss","EonUiNavigationMainIconLinkStyle0","NavigationMainIconLink","this","localization","removeActiveState","active","onWindowresize","isTabletOrSmaller","componentWillLoad","setCurrentLocalization","computeAriaLabel","getRelatedComponents","initContextMenu","componentDidLoad","navigationMainIconLinkLoad","emit","currentLocalization","currentAriaLabel","computeLinkAriaLabel","href","navigation","document","getElementById","setCurrentLocalizationDelegate","handleClick","_event","navigationMainIconLinkClick","subNavRel","preventDefault","closeMobileNav","openMobileSubImmediately","closeMainSub","openMainSub","contextMenu","visible","handleKeyDown","key","KeyIds","ENTER","SPACE","hostElement","querySelector","render","h","Host","title","getAttribute","target","class","pfx","current","onClick","event","role","tabindex","onKeyDown","icon","name","text","innerHTML"],"sources":["src/components/navigation/navigation-components/navigation-main/navigation-main-components/navigation-main-icon-link/constants/navigation-main-icon-link-constants.ts","src/components/navigation/navigation-components/navigation-main/navigation-main-components/navigation-main-icon-link/constants/navigation-main-icon-link-i18n.ts","src/components/navigation/navigation-components/navigation-main/navigation-main-components/navigation-main-icon-link/navigation-main-icon-link.scss?tag=eon-ui-navigation-main-icon-link&encapsulation=shadow","src/components/navigation/navigation-components/navigation-main/navigation-main-components/navigation-main-icon-link/navigation-main-icon-link.tsx"],"sourcesContent":["export const NAVIGATION_MAIN_ICON_LINK_TARGET_BLANK = \"_blank\";\nexport const NAVIGATION_MAIN_ICON_LINK_TARGET_SELF = \"_self\";\nexport const NAVIGATION_MAIN_ICON_LINK_TARGET_PARENT = \"_parent\";\nexport const NAVIGATION_MAIN_ICON_LINK_TARGET_TOP = \"_top\";\nexport const NAVIGATION_MAIN_ICON_LINK_TARGETS = [\n  NAVIGATION_MAIN_ICON_LINK_TARGET_BLANK,\n  NAVIGATION_MAIN_ICON_LINK_TARGET_SELF,\n  NAVIGATION_MAIN_ICON_LINK_TARGET_PARENT,\n  NAVIGATION_MAIN_ICON_LINK_TARGET_TOP\n] as const;\n","import { Localization } from \"../../../../../../../common/localizable-component\";\nimport { NavigationMainIconLinkLocalization } from \"./navigation-main-icon-link-types\";\n\nexport const NAVIGATION_MAIN_ICON_LINK_LOCALIZATION: Localization<NavigationMainIconLinkLocalization> = {\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  position: relative;\n  display: block;\n}\n\na {\n  position: relative;\n  width: 48px;\n  height: 100%;\n  font-family: $font-family-base;\n  font-size: 18px;\n  line-height: 24px;\n  text-align: center;\n  padding: 24px 0px 24px 0px;\n  margin: 0px 4px 0px 4px;\n  color: $navigation-main-icon-link-font-color;\n  background-color: $navigation-main-icon-link-bg-color;\n  text-decoration: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  eon-ui-icon {\n    color: $navigation-main-icon-link-font-color;\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-icon-link-border-color;\n  // }\n\n  &:hover {\n    color: $navigation-main-icon-link-font-color-hover;\n    background-color: $navigation-main-icon-link-bg-color-hover;\n\n    // &::after {\n    //   background-color: $navigation-main-icon-link-border-color-hover;\n    // }\n\n    eon-ui-icon {\n      color: $navigation-main-icon-link-font-color-hover;\n    }\n  }\n\n  &:focus {\n    color: $navigation-main-icon-link-font-color-focus;\n    background-color: $navigation-main-icon-link-bg-color-focus;\n    outline: none;\n\n    // &::after {\n    //   background-color: $navigation-main-icon-link-border-color-focus;\n    // }\n\n    eon-ui-icon {\n      color: $navigation-main-icon-link-font-color-focus;\n    }\n  }\n\n  &.#{$prefix}current {\n    color: $navigation-main-icon-link-font-color-current;\n    background-color: $navigation-main-icon-link-bg-color-current;\n\n    // &::after {\n    //   background-color: $navigation-main-icon-link-border-color-current;\n    // }\n\n    eon-ui-icon {\n      color: $navigation-main-icon-link-font-color-current;\n    }\n\n    &:hover {\n      color: $navigation-main-icon-link-font-color-current-hover;\n      background-color: $navigation-main-icon-link-bg-color-current-hover;\n\n      // &::after {\n      //   background-color: $navigation-main-icon-link-border-color-current-hover;\n      // }\n\n      eon-ui-icon {\n        color: $navigation-main-icon-link-font-color-current-hover;\n      }\n    }\n\n    &:focus {\n      color: $navigation-main-icon-link-font-color-current-focus;\n      background-color: $navigation-main-icon-link-bg-color-current-focus;\n      outline: none;\n\n      // &::after {\n      //   background-color: $navigation-main-icon-link-border-color-current-focus;\n      // }\n\n      eon-ui-icon {\n        color: $navigation-main-icon-link-font-color-current-focus;\n      }\n    }\n  }\n\n  &.#{$prefix}active {\n    color: $navigation-main-icon-link-font-color-active;\n    background-color: $navigation-main-icon-link-bg-color-active;\n\n    // &::after {\n    //   background-color: $navigation-main-icon-link-border-color-active;\n    // }\n\n    eon-ui-icon {\n      color: $navigation-main-icon-link-font-color-active;\n    }\n\n    &:hover {\n      color: $navigation-main-icon-link-font-color-active-hover;\n      background-color: $navigation-main-icon-link-bg-color-active-hover;\n\n      // &::after {\n      //   background-color: $navigation-main-icon-link-border-color-active-hover;\n      // }\n\n      eon-ui-icon {\n        color: $navigation-main-icon-link-font-color-active-hover;\n      }\n    }\n\n    &:focus {\n      color: $navigation-main-icon-link-font-color-active-focus;\n      background-color: $navigation-main-icon-link-bg-color-active-focus;\n      outline: none;\n\n      // &::after {\n      //   background-color: $navigation-main-icon-link-border-color-active-focus;\n      // }\n\n      eon-ui-icon {\n        color: $navigation-main-icon-link-font-color-active-focus;\n      }\n    }\n  }\n\n  .#{$prefix}icon-wrapper {\n    + .#{$prefix}text-wrapper {\n      margin-left: 4px;\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, Listen } 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_ICON_LINK_TARGET_SELF } from \"./constants/navigation-main-icon-link-constants\";\nimport { NAVIGATION_MAIN_ICON_LINK_LOCALIZATION } from \"./constants/navigation-main-icon-link-i18n\";\nimport {\n  NavigationMainIconLinkTarget,\n  NavigationMainIconLinkLocalization\n} from \"./constants/navigation-main-icon-link-types\";\nimport { KeyIds } from \"../../../../../../constants/keys\";\nimport { isTabletOrSmaller } from \"../../../../../../utils/screen-helper\";\n// import { InitLogging } from \"../../../../../../decorators/init-logging\";\n\n/**\n * @slot context-menu - holds eon-ui-context-menu component\n */\n@Component({\n  tag: \"eon-ui-navigation-main-icon-link\",\n  styleUrl: \"navigation-main-icon-link.scss\",\n  shadow: true\n})\nexport class NavigationMainIconLink implements LocalizableComponent<NavigationMainIconLinkLocalization> {\n  // @InitLogging() sentryTransaction;\n  private currentAriaLabel: string;\n\n  localization: Localization<NavigationMainIconLinkLocalization> = NAVIGATION_MAIN_ICON_LINK_LOCALIZATION;\n  currentLocalization: NavigationMainIconLinkLocalization;\n  navigation: HTMLEonUiNavigationElement;\n  contextMenu: HTMLEonUiContextMenuElement;\n\n  @Element() hostElement: HTMLEonUiNavigationMainIconLinkElement;\n\n  @State() active: boolean = false;\n  @State() isTabletOrSmaller: boolean;\n\n  /**\n   * Raised when the link has been clicked.\n   */\n  @Event() navigationMainIconLinkClick: EventEmitter;\n\n  /**\n   * Raised when the link has been loaded.\n   */\n  @Event() navigationMainIconLinkLoad: EventEmitter;\n\n  /**\n   * Defines the text shown as label for the link.\n   */\n  @Prop() text: string;\n\n  /**\n   * Set icon for the link\n   * @example \"phone\".\n   */\n  @Prop() icon: 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: NavigationMainIconLinkTarget = NAVIGATION_MAIN_ICON_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   * Removes active state\n   */\n  @Method()\n  async removeActiveState() {\n    this.active = false;\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowresize() {\n    this.isTabletOrSmaller = isTabletOrSmaller();\n  }\n\n  componentWillLoad() {\n    this.setCurrentLocalization();\n    this.computeAriaLabel();\n    this.onWindowresize();\n    this.getRelatedComponents();\n    this.initContextMenu();\n  }\n\n  componentDidLoad() {\n    this.navigationMainIconLinkLoad.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.navigationMainIconLinkClick.emit(this.href);\n\n    if (!!this.subNavRel) {\n      _event.preventDefault();\n\n      if (!!this.isTabletOrSmaller) {\n        if (this.active) {\n          this.navigation.closeMobileNav();\n          this.active = false;\n        } else {\n          await this.navigation.openMobileSubImmediately(this.subNavRel);\n          this.active = true;\n        }\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    if (this.contextMenu) {\n      _event.preventDefault();\n      this.contextMenu.visible = true;\n    }\n  }\n\n  async handleKeyDown(_event: KeyboardEvent) {\n    this.navigationMainIconLinkClick.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    if (this.contextMenu) {\n      if (_event.key === KeyIds.ENTER || _event.key === KeyIds.SPACE) {\n        this.contextMenu.visible = true;\n      }\n    }\n  }\n\n  /**\n   * Context Menu Setup including getter, click events, keyboard events and properties\n   */\n  private initContextMenu() {\n    this.contextMenu = this.hostElement.querySelector('[slot=\"context-menu\"]');\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 })}\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.icon && (\n            <span class={pfx(\"icon-wrapper\")}>\n              <eon-ui-icon class={pfx(\"icon\")} name={this.icon} no-space=\"false\" aria-hidden=\"true\"></eon-ui-icon>\n            </span>\n          )}\n          {this.text && (\n            <span class={pfx(\"text-wrapper\")}>\n              <span class={pfx(\"text\")} innerHTML={this.text} />\n            </span>\n          )}\n        </a>\n        <slot name=\"context-menu\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}