{"version":3,"names":["zdsNavigationPanelCss","ZdsNavigationPanelStyle0","ZdsNavigationPanel","generateUniqueUuid","onStateChange","newValue","this","capitalize","emit","identifier","toggle","state","clearTimeout","timeout","setTimeout","finishStateChange","panelElement","style","display","requestAnimationFrame","handlePanelAnimationsOpen","hostElement","componentDidLoad","handlePanelAnimationsClosed","onBackClick","event","preventDefault","zdsNavigationActivatePanel","onCloseClick","zdsNavigationActivateBody","render","panelClasses","generateCssClasses","h","key","class","name","ref","element","href","onClick","library","header","renderTitle","renderSubText","hasSlotted","__decorate","Bind","MouseEvent"],"sources":["../src/components/zds-navigation/zds-navigation-panel/zds-navigation-panel.scss?tag=zds-navigation-panel&encapsulation=shadow","../src/components/zds-navigation/zds-navigation-panel/zds-navigation-panel.tsx"],"sourcesContent":["@import '../../../../../style/lib/scss';\n@import '../../../../../style/src/typography/mixins';\n@import '../mixins';\n\n:host {\n\t@include zds-typography('body');\n\n\tdisplay: block;\n}\n\n.zds-navigation-panel {\n\tdisplay: flex;\n\tgap: var(--zds-space-16);\n\n\t&__body-link {\n\t\tflex-grow: 1;\n\n\t\t@include zds-media-breakpoint-up('md') {\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t\tmax-width: 330px;\n\t\t\twidth: 28%;\n\t\t}\n\t}\n\n\t&__panel {\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\twidth: 100%;\n\n\t\t@include zds-media-breakpoint-down('sm') {\n\t\t\tbackground: var(--zds-navigation-background);\n\t\t\tinset: 0;\n\t\t\toverflow: hidden auto;\n\t\t\toverscroll-behavior: contain;\n\t\t\toverscroll-behavior-block: contain;\n\t\t\ttransform: translateX(\n\t\t\t\tcalc(\n\t\t\t\t\t100% - var(--zds-elevate-box-shadow-offset-x) + var(--zds-elevate-box-shadow-blur-radius) +\n\t\t\t\t\t\tvar(--zds-elevate-box-shadow-spread-radius)\n\t\t\t\t)\n\t\t\t);\n\t\t\ttransition:\n\t\t\t\ttransform 300ms var(--zds-transition-type-ease-in),\n\t\t\t\topacity 300ms var(--zds-transition-type-ease-in);\n\t\t\tz-index: 1;\n\n\t\t\t&--open,\n\t\t\t&--opened {\n\t\t\t\ttransform: none;\n\t\t\t}\n\t\t}\n\n\t\t@include zds-media-breakpoint-up('md') {\n\t\t\topacity: 0;\n\t\t\tposition: static;\n\t\t\ttransition:\n\t\t\t\ttransform 200ms linear,\n\t\t\t\topacity 200ms linear;\n\n\t\t\t&--open,\n\t\t\t&--opened {\n\t\t\t\topacity: 1;\n\t\t\t\ttransition-duration: 300ms;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__body {\n\t\tpadding: var(--zds-space-3) var(--zds-space-4);\n\n\t\t@include zds-media-breakpoint-up('md') {\n\t\t\tinset: var(--zds-space-8) 0 0 calc(min(28%, 330px) + var(--zds-space-16)); // Left is same as navigation-body 'left' column width + gap\n\t\t\tpadding-block: 0;\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t@include navigation-body-title;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport Bind from 'bind-decorator';\nimport { capitalize } from '../../../utils/capitalize';\nimport { generateCssClasses } from '../../../utils/generate-css-classes';\nimport { generateUniqueUuid } from '../../../utils/generate-unique-uuid';\nimport { hasSlotted } from '../../../utils/slotted';\nimport { handlePanelAnimationsOpen, handlePanelAnimationsClosed } from '../animations-util';\nimport { NavigationEventDetail } from '../zds-navigation';\n\ntype NavigationPanelState = 'open' | 'opened' | 'close' | 'closed';\n\n@Component({\n\tshadow: true,\n\tstyleUrl: 'zds-navigation-panel.scss',\n\ttag: 'zds-navigation-panel',\n})\nexport class ZdsNavigationPanel {\n\ttimeout: ReturnType<typeof setTimeout>;\n\tpanelElement: HTMLDivElement;\n\n\t@Element() hostElement: HTMLDivElement;\n\n\t@Event({ bubbles: true }) zdsNavigationActivateBody: EventEmitter<NavigationEventDetail>;\n\t@Event({ bubbles: true }) zdsNavigationActivatePanel: EventEmitter<NavigationEventDetail>;\n\n\t@Event({ bubbles: true }) zdsNavigationPanelClose: EventEmitter<NavigationEventDetail>;\n\t@Event({ bubbles: true }) zdsNavigationPanelClosed: EventEmitter<NavigationEventDetail>;\n\t@Event({ bubbles: true }) zdsNavigationPanelOpen: EventEmitter<NavigationEventDetail>;\n\t@Event({ bubbles: true }) zdsNavigationPanelOpened: EventEmitter<NavigationEventDetail>;\n\n\t@Prop() header: string;\n\t@Prop() identifier: string = generateUniqueUuid('zds-navigation-panel');\n\n\t@State() state: NavigationPanelState = 'closed';\n\n\t@Watch('state')\n\tonStateChange(newValue: string) {\n\t\tthis[`zdsNavigationPanel${capitalize(newValue)}`].emit({ identifier: this.identifier });\n\t}\n\n\t@Method()\n\tasync toggle(toggle: boolean = this.state === 'close' || this.state === 'closed') {\n\t\tclearTimeout(this.timeout);\n\n\t\tthis.state = toggle ? 'open' : 'close';\n\t\tthis.timeout = setTimeout(this.finishStateChange, 400, this.state);\n\n\t\t// Make sure the element is visible, otherwise animations will not be executed\n\t\tif (toggle) {\n\t\t\tthis.panelElement.style.display = 'block';\n\t\t}\n\n\t\tif (this.state === 'open') {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\thandlePanelAnimationsOpen(this.hostElement);\n\t\t\t});\n\t\t}\n\t}\n\n\tcomponentDidLoad() {\n\t\thandlePanelAnimationsClosed(this.hostElement);\n\t}\n\n\t@Bind\n\tfinishStateChange(state: NavigationPanelState) {\n\t\tif (state === 'open') {\n\t\t\tthis.state = 'opened';\n\t\t} else if (state === 'close') {\n\t\t\tthis.state = 'closed';\n\t\t\tthis.panelElement.style.display = 'none';\n\t\t\thandlePanelAnimationsClosed(this.hostElement);\n\t\t}\n\t}\n\n\t@Bind\n\tasync onBackClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.toggle(false);\n\n\t\t// Update zds-navigation and empty the activePanel property by not passing any event details\n\t\tthis.zdsNavigationActivatePanel.emit({ identifier: null });\n\t}\n\n\t@Bind\n\tonCloseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\n\t\t// Update zds-navigation and empty the activePanel property by not passing an identifier\n\t\tthis.zdsNavigationActivateBody.emit({ identifier: null });\n\t}\n\n\trender() {\n\t\tconst panelClasses = generateCssClasses('zds-navigation-panel__panel', {\n\t\t\t[this.state]: true,\n\t\t});\n\n\t\treturn (\n\t\t\t<div class=\"zds-navigation-panel\">\n\t\t\t\t<div class=\"zds-navigation-panel__body-link\">\n\t\t\t\t\t<slot name=\"body-link\" />\n\t\t\t\t</div>\n\t\t\t\t<div class={panelClasses} ref={(element) => (this.panelElement = element)}>\n\t\t\t\t\t<div class=\"zds-navigation-panel__body\">\n\t\t\t\t\t\t<span class=\"zds-navigation-panel__header\">\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\tclass=\"zds-navigation-panel__header__button\"\n\t\t\t\t\t\t\t\tonClick={(event) => void this.onBackClick(event)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<zds-icon\n\t\t\t\t\t\t\t\t\tclass=\"zds-navigation-panel__header__button-icon\"\n\t\t\t\t\t\t\t\t\tname=\"chevron-left\"\n\t\t\t\t\t\t\t\t\tlibrary=\"fa-solid\"\n\t\t\t\t\t\t\t\t></zds-icon>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t{this.header}\n\t\t\t\t\t\t\t<a href=\"#\" class=\"zds-navigation-panel__header__button\" onClick={this.onCloseClick}>\n\t\t\t\t\t\t\t\t<zds-icon\n\t\t\t\t\t\t\t\t\tclass=\"zds-navigation-panel__header__button-icon\"\n\t\t\t\t\t\t\t\t\tname=\"xmark\"\n\t\t\t\t\t\t\t\t\tlibrary=\"fa-solid\"\n\t\t\t\t\t\t\t\t></zds-icon>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.renderTitle()}\n\t\t\t\t\t\t{this.renderSubText()}\n\t\t\t\t\t\t<div class=\"zds-navigation-panel__panel-content\">\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\trenderSubText() {\n\t\tif (!hasSlotted(this.hostElement, 'subtext')) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<div class=\"zds-navigation-panel__subtext\">\n\t\t\t\t<slot name=\"subtext\"></slot>\n\t\t\t</div>\n\t\t);\n\t}\n\n\trenderTitle() {\n\t\tif (!hasSlotted(this.hostElement, 'title')) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<div class=\"zds-navigation-panel__title\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"mappings":"yTAAA,MAAMA,EAAwB,uuHAC9B,MAAAC,EAAeD,E,MCeFE,EAAkB,M,idAeDC,EAAmB,wB,WAET,Q,CAGvC,aAAAC,CAAcC,GACbC,KAAK,qBAAqBC,EAAWF,MAAaG,KAAK,CAAEC,WAAYH,KAAKG,Y,CAI3E,YAAMC,CAAOA,EAAkBJ,KAAKK,QAAU,SAAWL,KAAKK,QAAU,UACvEC,aAAaN,KAAKO,SAElBP,KAAKK,MAAQD,EAAS,OAAS,QAC/BJ,KAAKO,QAAUC,WAAWR,KAAKS,kBAAmB,IAAKT,KAAKK,OAG5D,GAAID,EAAQ,CACXJ,KAAKU,aAAaC,MAAMC,QAAU,O,CAGnC,GAAIZ,KAAKK,QAAU,OAAQ,CAC1BQ,uBAAsB,KACrBC,EAA0Bd,KAAKe,YAAY,G,EAK9C,gBAAAC,GACCC,EAA4BjB,KAAKe,Y,CAIlC,iBAAAN,CAAkBJ,GACjB,GAAIA,IAAU,OAAQ,CACrBL,KAAKK,MAAQ,Q,MACP,GAAIA,IAAU,QAAS,CAC7BL,KAAKK,MAAQ,SACbL,KAAKU,aAAaC,MAAMC,QAAU,OAClCK,EAA4BjB,KAAKe,Y,EAKnC,iBAAMG,CAAYC,GACjBA,EAAMC,uBACApB,KAAKI,OAAO,OAGlBJ,KAAKqB,2BAA2BnB,KAAK,CAAEC,WAAY,M,CAIpD,YAAAmB,CAAaH,GACZA,EAAMC,iBAGNpB,KAAKuB,0BAA0BrB,KAAK,CAAEC,WAAY,M,CAGnD,MAAAqB,GACC,MAAMC,EAAeC,EAAmB,8BAA+B,CACtE,CAAC1B,KAAKK,OAAQ,OAGf,OACCsB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBACVF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mCACVF,EAAA,QAAAC,IAAA,2CAAME,KAAK,eAEZH,EAAA,OAAAC,IAAA,2CAAKC,MAAOJ,EAAcM,IAAMC,GAAahC,KAAKU,aAAesB,GAChEL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,8BACVF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,gCACXF,EAAA,KAAAC,IAAA,2CACCK,KAAK,IACLJ,MAAM,uCACNK,QAAUf,QAAenB,KAAKkB,YAAYC,IAE1CQ,EAAA,YAAAC,IAAA,2CACCC,MAAM,4CACNC,KAAK,eACLK,QAAQ,cAGTnC,KAAKoC,OACNT,EAAA,KAAAC,IAAA,2CAAGK,KAAK,IAAIJ,MAAM,uCAAuCK,QAASlC,KAAKsB,cACtEK,EAAA,YAAAC,IAAA,2CACCC,MAAM,4CACNC,KAAK,QACLK,QAAQ,eAIVnC,KAAKqC,cACLrC,KAAKsC,gBACNX,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACVF,EAAA,QAAAC,IAAA,gD,CAQN,aAAAU,GACC,IAAKC,EAAWvC,KAAKe,YAAa,WAAY,CAC7C,OAAO,I,CAGR,OACCY,EAAA,OAAKE,MAAM,iCACVF,EAAA,QAAMG,KAAK,Y,CAKd,WAAAO,GACC,IAAKE,EAAWvC,KAAKe,YAAa,SAAU,CAC3C,OAAO,I,CAGR,OACCY,EAAA,OAAKE,MAAM,+BACVF,EAAA,QAAMG,KAAK,U,0FA1FdU,EAAA,CADCC,E,+HAYKD,EAAA,CADLC,E,iDACwBC,a,gEASzBF,EAAA,CADCC,E,iDACmBC,a"}