{"version":3,"names":["zdsNavigationPanelLinkCss","ZdsNavigationPanelLinkStyle0","ZdsNavigationPanelLink","renderIcon","hasSlotted","this","hostElement","h","class","name","render","cssClasses","generateCssClasses","level","key","href","link","target","linkTarget","role"],"sources":["../src/components/zds-navigation/zds-navigation-panel-link/zds-navigation-panel-link.scss?tag=zds-navigation-panel-link&encapsulation=shadow","../src/components/zds-navigation/zds-navigation-panel-link/zds-navigation-panel-link.tsx"],"sourcesContent":["@import '../../../../../style/lib/scss';\n@import '../../../../../style/src/typography/mixins';\n@import '../../../mixins/outline';\n\n:host {\n\t@include zds-typography('body');\n\n\tdisplay: block;\n}\n\n.zds-navigation-panel-link {\n\t@include outline;\n\n\tcolor: var(--zds-navigation-color);\n\tdisplay: flex;\n\tpadding: var(--zds-space-3) 0;\n\ttext-decoration: none;\n\ttext-transform: var(--zds-navigation-link-text-transform);\n\n\t@include zds-media-breakpoint-up('md') {\n\t\tpadding: var(--zds-space-2) 0;\n\t}\n\n\t&[href]:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\t&__icon {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t\theight: calc(\n\t\t\tvar(--zds-typography-headline-md-line-height) * var(--zds-navigation-panel-link-size)\n\t\t); // Match the height of a single line of text\n\n\t\tmargin-right: var(--zds-space-2);\n\t}\n}\n\n:host([level='1']) {\n\t@include zds-typography('headline-md');\n\n\tfont-size: var(--zds-navigation-panel-link-size);\n\n\t.zds-navigation-panel-link {\n\t\tcolor: var(--zds-navigation-panel-link-color);\n\n\t\t&[href]:hover {\n\t\t\tcolor: var(--zds-navigation-panel-link-color-hover);\n\t\t}\n\n\t\t::slotted(zds-icon) {\n\t\t\tfont-size: var(--zds-navigation-panel-link-size);\n\t\t}\n\t}\n}\n\n:host([level='2']) {\n\t.zds-navigation-panel-link {\n\t\tcolor: var(--zds-navigation-panel-link-level-2-color);\n\n\t\t&[href]:hover {\n\t\t\tcolor: var(--zds-navigation-panel-link-level-2-color-hover);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { LinkTarget } from '../../../types';\nimport { generateCssClasses } from '../../../utils/generate-css-classes';\nimport { hasSlotted } from '../../../utils/slotted';\n\n@Component({\n\tshadow: true,\n\tstyleUrl: 'zds-navigation-panel-link.scss',\n\ttag: 'zds-navigation-panel-link',\n})\nexport class ZdsNavigationPanelLink {\n\t@Element() hostElement: HTMLDivElement;\n\n\t@Prop({ reflect: true }) level: number = 1;\n\t@Prop() link: string;\n\t@Prop() linkTarget: LinkTarget = '_self';\n\n\trenderIcon() {\n\t\tif (!hasSlotted(this.hostElement, 'icon')) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<div class=\"zds-navigation-panel-link__icon\">\n\t\t\t\t<slot name=\"icon\"></slot>\n\t\t\t</div>\n\t\t);\n\t}\n\n\trender() {\n\t\tconst cssClasses = generateCssClasses('zds-navigation-panel-link', {\n\t\t\t[`level-${this.level}`]: true,\n\t\t});\n\n\t\treturn (\n\t\t\t<a class={cssClasses} href={this.link} target={this.linkTarget} aria-level={this.level} role=\"link\">\n\t\t\t\t{this.renderIcon()}\n\t\t\t\t<slot />\n\t\t\t</a>\n\t\t);\n\t}\n}\n"],"mappings":"0HAAA,MAAMA,EAA4B,olFAClC,MAAAC,EAAeD,E,MCSFE,EAAsB,M,oCAGO,E,oCAER,O,CAEjC,UAAAC,GACC,IAAKC,EAAWC,KAAKC,YAAa,QAAS,CAC1C,OAAO,I,CAGR,OACCC,EAAA,OAAKC,MAAM,mCACVD,EAAA,QAAME,KAAK,S,CAKd,MAAAC,GACC,MAAMC,EAAaC,EAAmB,4BAA6B,CAClE,CAAC,SAASP,KAAKQ,SAAU,OAG1B,OACCN,EAAA,KAAAO,IAAA,2CAAGN,MAAOG,EAAYI,KAAMV,KAAKW,KAAMC,OAAQZ,KAAKa,WAAU,aAAcb,KAAKQ,MAAOM,KAAK,QAC3Fd,KAAKF,aACNI,EAAA,QAAAO,IAAA,6C","ignoreList":[]}