{"version":3,"names":["navigationFlyoutLinkCss","EonUiNavigationFlyoutLinkStyle0","NavigationFlyoutLink","this","localization","NAVIGATION_FLYOUT_LINK_LOCALIZATION","NAVIGATION_FLYOUT_LINK_TARGET_SELF","componentWillLoad","setCurrentLocalization","computeAriaLabel","componentDidLoad","navigationFlyoutLinkLoad","emit","ariaLabel","currentLocalization","currentAriaLabel","computeLinkAriaLabel","href","setCurrentLocalizationDelegate","handleClick","_event","navigationFlyoutLinkClick","render","h","Host","key","title","hostElement","getAttribute","target","class","pfx","current","large","mobile","onClick","event","role","tabindex","text"],"sources":["src/components/navigation/navigation-components/navigation-flyout/navigation-flyout-link/navigation-flyout-link.scss?tag=eon-ui-navigation-flyout-link&encapsulation=shadow","src/components/navigation/navigation-components/navigation-flyout/navigation-flyout-link/navigation-flyout-link.tsx"],"sourcesContent":["@mixin mobileStyles {\n &.#{$prefix}mobile {\n position: relative;\n width: 100%;\n min-height: 49px;\n line-height: 24px;\n padding: 12px 48px 12px 32px;\n font-size: 18px;\n font-weight: 400;\n display: block;\n text-decoration: none;\n margin-bottom: 0px !important;\n outline: none !important;\n\n &.#{$prefix}large {\n position: relative;\n width: 100%;\n min-height: 49px;\n line-height: 24px;\n font-size: 18px;\n font-weight: 700;\n }\n\n &::before {\n content: \"\";\n position: absolute;\n left: 32px;\n top: 0;\n width: 100%;\n height: 1px;\n background-color: $navigation-mobile-link-border-color;\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\n:host {\n display: block;\n margin-bottom: 12px !important;\n}\n\n:host([mobile]) {\n margin-bottom: 0px !important;\n}\n\na {\n position: relative;\n height: 100%;\n font-family: $font-family-base;\n font-size: 18px;\n line-height: 24px;\n color: $navigation-flyout-link-font-color;\n text-decoration: none;\n display: inline-block;\n box-sizing: border-box;\n cursor: pointer;\n\n &.#{$prefix}large {\n color: $navigation-flyout-link-large-font-color;\n font-size: 22px;\n font-weight: bold;\n opacity: 1;\n }\n\n &:hover {\n color: $navigation-flyout-link-font-color-hover;\n text-decoration: underline;\n\n &.#{$prefix}large {\n color: $navigation-flyout-link-large-font-color-hover;\n }\n }\n\n &:focus {\n color: $navigation-flyout-link-font-color-focus;\n outline: 1px solid;\n outline-offset: 4px;\n outline-color: $navigation-flyout-link-font-color-focus;\n\n &.#{$prefix}large {\n color: $navigation-flyout-link-large-font-color-focus;\n outline-color: $navigation-flyout-link-large-font-color-focus;\n }\n }\n\n &.#{$prefix}current {\n color: $navigation-flyout-link-font-color-current;\n\n &::after {\n content: \"\";\n position: absolute;\n left: -16px;\n top: 0;\n width: 4px;\n height: 24px;\n background-color: $navigation-flyout-link-border-color-current;\n }\n\n @include for-size(tablet-or-smaller) {\n &::after {\n left: 0;\n height: 100%;\n }\n }\n\n &.#{$prefix}large {\n color: $navigation-flyout-link-large-font-color-current;\n\n &::after {\n background-color: $navigation-flyout-link-large-border-color-current;\n }\n }\n }\n\n @include mobileStyles;\n}\n\nspan {\n position: relative;\n height: 100%;\n font-family: $font-family-base;\n font-size: 18px;\n line-height: 24px;\n color: $navigation-flyout-link-font-color;\n display: inline-block;\n box-sizing: border-box;\n\n &.#{$prefix}large {\n font-size: 22px;\n font-weight: bold;\n }\n\n @include mobileStyles;\n}\n","import { h, Component, Host, Element, Prop, Event, EventEmitter, Watch } 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_FLYOUT_LINK_TARGET_SELF } from \"./constants/navigation-flyout-link-constants\";\nimport { NAVIGATION_FLYOUT_LINK_LOCALIZATION } from \"./constants/navigation-flyout-link-i18n\";\nimport { NavigationFlyoutLinkTarget, NavigationFlyoutLinkLocalization } from \"./constants/navigation-flyout-link-types\";\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-flyout-link\",\n styleUrl: \"navigation-flyout-link.scss\",\n shadow: true\n})\nexport class NavigationFlyoutLink implements LocalizableComponent {\n // @InitLogging() sentryTransaction;\n private currentAriaLabel: string;\n\n localization: Localization = NAVIGATION_FLYOUT_LINK_LOCALIZATION;\n currentLocalization: NavigationFlyoutLinkLocalization;\n\n @Element() hostElement: HTMLEonUiNavigationFlyoutLinkElement;\n\n /**\n * Raised when the link has been clicked.\n */\n @Event() navigationFlyoutLinkClick: EventEmitter;\n\n /**\n * Raised when the link has been loaded.\n */\n @Event() navigationFlyoutLinkLoad: 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: NavigationFlyoutLinkTarget = NAVIGATION_FLYOUT_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 * Set this to have a headline appearance for the link.\n */\n @Prop() large: boolean;\n\n /**\n * Controls the viewmode of the link\n */\n @Prop() mobile: boolean;\n\n componentWillLoad() {\n this.setCurrentLocalization();\n this.computeAriaLabel();\n }\n\n componentDidLoad() {\n this.navigationFlyoutLinkLoad.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 setCurrentLocalization() {\n setCurrentLocalizationDelegate(this);\n }\n\n handleClick(_event: Event) {\n this.navigationFlyoutLinkClick.emit(this.href);\n }\n\n render() {\n return (\n \n {this.href ? (\n this.handleClick(event)}\n role=\"menuitem\"\n tabindex=\"0\"\n >\n {this.text}\n \n ) : (\n {this.text}\n )}\n \n );\n }\n}\n"],"mappings":"+OAAA,MAAMA,EAA0B,ghhDAChC,MAAAC,EAAeD,E,MCoBFE,EAAoB,M,iKAI/BC,KAAAC,aAA+DC,E,oDAiClBC,E,2FAuB7C,iBAAAC,GACEJ,KAAKK,yBACLL,KAAKM,kB,CAGP,gBAAAC,GACEP,KAAKQ,yBAAyBC,M,CAIxB,gBAAAH,GACN,GAAIN,KAAKU,YAAcV,KAAKW,oBAAqB,CAC/CX,KAAKY,iBAAmBZ,KAAKU,UAC7B,M,CAEFV,KAAKY,iBAAmBC,EAAqBb,KAAKW,oBAAqBX,KAAKc,KAAM,M,CAGpF,sBAAAT,GACEU,EAA+Bf,K,CAGjC,WAAAgB,CAAYC,GACVjB,KAAKkB,0BAA0BT,KAAKT,KAAKc,K,CAG3C,MAAAK,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFtB,KAAKc,KACJM,EAAA,KACEG,MAAOvB,KAAKwB,YAAYC,aAAa,SACrCX,KAAMd,KAAKc,KACXY,OAAQ1B,KAAK0B,OACbC,MAAOC,EAAI,CAAEC,UAAW7B,KAAK6B,QAASC,QAAS9B,KAAK8B,MAAOC,OAAQ/B,KAAK+B,SAAS,aACrE/B,KAAKY,iBACjBoB,QAAUC,GAAsBjC,KAAKgB,YAAYiB,GACjDC,KAAK,WACLC,SAAS,KAERnC,KAAKoC,MAGRhB,EAAA,QAAMO,MAAOC,EAAI,CAAEC,UAAW7B,KAAK6B,QAASC,QAAS9B,KAAK8B,MAAOC,OAAQ/B,KAAK+B,UAAY/B,KAAKoC,M"}