{"version":3,"names":["NAVIGATION_MAIN_ICON_LINK_TARGET_SELF","navigationMainIconLinkCss","EonUiNavigationMainIconLinkStyle0","NavigationMainIconLink","removeActiveState","this","active","onWindowresize","isTabletOrSmaller","componentWillLoad","computeAriaLabel","getRelatedComponents","initContextMenu","componentDidLoad","navigationMainIconLinkLoad","emit","ariaLabel","currentAriaLabel","navigation","document","getElementById","handleClick","_event","navigationMainIconLinkClick","href","subNavRel","preventDefault","closeMobileNav","openMobileSubImmediately","closeMainSub","openMainSub","contextMenu","visible","hostElement","shadowRoot","querySelector","ariaExpanded","handleKeyDown","key","KeyIds","ENTER","SPACE","render","h","Host","title","getAttribute","target","class","pfx","current","onClick","event","tabindex","onKeyDown","getContextMenuProps","role","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/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",":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  &:focus-visible {\n    .#{$prefix}icon-wrapper {\n      border: $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-icon-link-font-color-current;\n    background-color: $navigation-main-icon-link-bg-color-current;\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      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      eon-ui-icon {\n        color: $navigation-main-icon-link-font-color-current-focus;\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-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    &: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    &: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\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 { NAVIGATION_MAIN_ICON_LINK_TARGET_SELF } from \"./constants/navigation-main-icon-link-constants\";\nimport { NavigationMainIconLinkTarget } from \"./constants/navigation-main-icon-link-types\";\nimport { KeyIds } from \"../../../../../../constants/keys\";\nimport { isTabletOrSmaller } from \"../../../../../../utils/screen-helper\";\nimport { getContextMenuProps } from \"../../../../../../utils/context-menu-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 {\n  // @InitLogging() sentryTransaction;\n  private currentAriaLabel: string;\n\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.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) {\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.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      this.hostElement.shadowRoot.querySelector(\"a\").ariaExpanded = \"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          {...(this.currentAriaLabel ? { \"aria-label\": this.currentAriaLabel } : {})}\n          onClick={(event: MouseEvent) => this.handleClick(event)}\n          tabindex=\"0\"\n          onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n          {...(this.contextMenu\n            ? getContextMenuProps(this.hostElement, this.contextMenu.visible, this.currentAriaLabel)\n            : { role: \"menuitem\", \"aria-label\": this.currentAriaLabel })}\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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"}