{"version":3,"names":["zdsNavigationBodyCss","ZdsNavigationBodyStyle0","ZdsNavigationBody","generateUniqueUuid","onStateChange","newValue","this","zdsNavigationBodyClose","emit","identifier","shouldAnimate","capitalize","toggle","state","clearTimeout","timeout","timeoutDuration","setTimeout","finishStateChange","bodyElement","style","display","handleBodyAnimationsOpen","hostElement","Promise","resolve","setBodyHeight","newHeight","bodyHeight","componentDidLoad","handleBodyAnimationsClosed","disconnectedCallback","disableKeyboardScrollHandler","keyboardScrollInterval","clearInterval","enableKeyboardScrollHandler","setInterval","handleKeyboardScroll","document","documentElement","scrollTop","render","bodyClasses","generateCssClasses","bodyStyle","height","h","key","class","name","ref","element","renderTitle","renderSubText","hasSlotted","__decorate","Bind"],"sources":["../src/components/zds-navigation/zds-navigation-body/zds-navigation-body.scss?tag=zds-navigation-body&encapsulation=shadow","../src/components/zds-navigation/zds-navigation-body/zds-navigation-body.tsx"],"sourcesContent":["@import '../../../../../style/lib/scss';\n@import '../../../../../style/src/grid-system/mixins';\n@import '../../../../../style/src/grid-system/variables';\n@import '../mixins';\n\n:host {\n\tdisplay: block;\n}\n\n::slotted(zds-navigation-panel) {\n\tgrid-column-start: 1;\n\tgrid-row-start: 1;\n}\n\n::slotted(zds-navigation-body-link) {\n\t@include zds-media-breakpoint-up('md') {\n\t\tmax-width: 330px;\n\t\twidth: 28%;\n\t}\n}\n\n.zds-navigation-body {\n\t&__body {\n\t\theight: 0;\n\t\tleft: 0;\n\t\topacity: 1;\n\t\toverflow: auto;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 100%;\n\t\ttransition:\n\t\t\topacity 200ms var(--zds-transition-type-ease-in),\n\t\t\theight 200ms var(--zds-transition-type-ease-in);\n\t\tz-index: 1;\n\n\t\t&--close,\n\t\t&--closed {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&--closed {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t@include zds-media-breakpoint-up('md') {\n\t\t\ttransition-duration: 400ms;\n\t\t}\n\n\t\t&--opened {\n\t\t\ttransition:\n\t\t\t\topacity 300ms var(--zds-transition-type-ease-out),\n\t\t\t\theight 300ms var(--zds-transition-type-ease-out);\n\n\t\t\t@include zds-media-breakpoint-up('md') {\n\t\t\t\ttransition-duration: 500ms;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\tpadding-top: var(--zds-space-8);\n\t\tposition: relative;\n\n\t\t@include make-container;\n\n\t\t@each $breakpoint, $width in $zds-breakpoints {\n\t\t\t@include make-container-breakpoint($breakpoint, $width);\n\t\t}\n\n\t\t// Remove the max width for LG viewports\n\t\t@include zds-media-breakpoint-down('lg') {\n\t\t\tmax-width: 100%;\n\t\t}\n\t}\n\n\t@include navigation-body-title;\n}\n","import { Component, Element, Event, EventEmitter, Prop, Method, Watch, h, State } from '@stencil/core';\nimport Bind from 'bind-decorator';\nimport { StyleCollection } from '../../../types';\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 { handleBodyAnimationsClosed, handleBodyAnimationsOpen } from '../animations-util';\nimport { NavigationAnimateEventDetail, NavigationEventDetail } from '../zds-navigation';\n\ntype NavigationBodyState = 'open' | 'opened' | 'close' | 'closed';\n\n@Component({\n\tshadow: true,\n\tstyleUrl: 'zds-navigation-body.scss',\n\ttag: 'zds-navigation-body',\n})\nexport class ZdsNavigationBody {\n\tbodyElement: HTMLDivElement;\n\tkeyboardScrollInterval?: NodeJS.Timeout;\n\ttimeout: ReturnType<typeof setTimeout>;\n\n\t@Element() hostElement: HTMLElement;\n\n\t@Event({ bubbles: true }) zdsNavigationBodyClose: EventEmitter<NavigationAnimateEventDetail>;\n\t@Event({ bubbles: true }) zdsNavigationBodyClosed: EventEmitter<NavigationEventDetail>;\n\t@Event({ bubbles: true }) zdsNavigationBodyOpen: EventEmitter<NavigationEventDetail>;\n\t@Event({ bubbles: true }) zdsNavigationBodyOpened: EventEmitter<NavigationEventDetail>;\n\n\t@Prop() identifier: string = generateUniqueUuid('zds-navigation-body');\n\n\t@State() bodyHeight: number = null;\n\t@State() shouldAnimate: boolean = null;\n\t@State() state: NavigationBodyState = 'closed';\n\n\t@Watch('state')\n\tonStateChange(newValue: string) {\n\t\t// The 'close' state has additional details\n\t\tif (newValue === 'close') {\n\t\t\tthis.zdsNavigationBodyClose.emit({\n\t\t\t\tidentifier: this.identifier,\n\t\t\t\tshouldAnimate: this.shouldAnimate,\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle any other state\n\t\tthis[`zdsNavigationBody${capitalize(newValue)}`].emit({ identifier: this.identifier });\n\t}\n\n\t@Method()\n\tasync toggle(\n\t\ttoggle: boolean = this.state === 'close' || this.state === 'closed',\n\t\tshouldAnimate: boolean = true,\n\t): Promise<void> {\n\t\tclearTimeout(this.timeout);\n\n\t\tthis.shouldAnimate = shouldAnimate;\n\t\tconst timeoutDuration = shouldAnimate ? 400 : 0;\n\n\t\tthis.state = toggle ? 'open' : 'close';\n\t\tthis.timeout = setTimeout(this.finishStateChange, timeoutDuration, this.state);\n\n\t\t// Make sure the element is visible, otherwise animations will not be executed\n\t\tthis.bodyElement.style.display = toggle ? 'block' : null;\n\n\t\tif (toggle && shouldAnimate) {\n\t\t\thandleBodyAnimationsOpen(this.hostElement);\n\t\t}\n\n\t\t// Allow caller to wait for completion\n\t\tif (shouldAnimate) {\n\t\t\treturn new Promise((resolve) => setTimeout(resolve, 400));\n\t\t}\n\n\t\tthis.shouldAnimate = null;\n\t}\n\n\t@Method()\n\tasync setBodyHeight(newHeight: number) {\n\t\tthis.bodyHeight = newHeight;\n\t}\n\n\tcomponentDidLoad() {\n\t\thandleBodyAnimationsClosed(this.hostElement);\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.disableKeyboardScrollHandler();\n\t}\n\n\tdisableKeyboardScrollHandler() {\n\t\tif (!this.keyboardScrollInterval) return;\n\t\tclearInterval(this.keyboardScrollInterval);\n\t}\n\n\tenableKeyboardScrollHandler() {\n\t\tthis.keyboardScrollInterval = setInterval(this.handleKeyboardScroll, 500);\n\t}\n\n\t@Bind\n\tfinishStateChange(state: NavigationBodyState) {\n\t\tif (state === 'open') {\n\t\t\tthis.state = 'opened';\n\t\t\tthis.enableKeyboardScrollHandler();\n\t\t} else if (state === 'close') {\n\t\t\tthis.state = 'closed';\n\t\t\tthis.disableKeyboardScrollHandler();\n\t\t\thandleBodyAnimationsClosed(this.hostElement);\n\t\t}\n\t}\n\n\t@Bind\n\thandleKeyboardScroll() {\n\t\tif (document.documentElement.scrollTop === 0) return;\n\n\t\tthis.bodyElement.scrollTop += document.documentElement.scrollTop;\n\t\tdocument.documentElement.scrollTop = 0;\n\t}\n\n\trender() {\n\t\tconst bodyClasses = generateCssClasses('zds-navigation-body__body', {\n\t\t\t[this.state]: true,\n\t\t});\n\n\t\tconst bodyStyle: StyleCollection = {\n\t\t\theight: this.bodyHeight + 'px',\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"zds-navigation-body\">\n\t\t\t\t<slot name=\"navigation-link\" />\n\t\t\t\t<div class={bodyClasses} style={bodyStyle} ref={(element) => (this.bodyElement = element)}>\n\t\t\t\t\t<div class=\"zds-navigation-body__wrapper\">\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<slot />\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-body__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-body__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,EAAuB,0iHAC7B,MAAAC,EAAeD,E,MCgBFE,EAAiB,M,uSAYAC,EAAmB,uB,gBAElB,K,mBACI,K,WACI,Q,CAGtC,aAAAC,CAAcC,GAEb,GAAIA,IAAa,QAAS,CACzBC,KAAKC,uBAAuBC,KAAK,CAChCC,WAAYH,KAAKG,WACjBC,cAAeJ,KAAKI,gBAErB,M,CAIDJ,KAAK,oBAAoBK,EAAWN,MAAaG,KAAK,CAAEC,WAAYH,KAAKG,Y,CAI1E,YAAMG,CACLA,EAAkBN,KAAKO,QAAU,SAAWP,KAAKO,QAAU,SAC3DH,EAAyB,MAEzBI,aAAaR,KAAKS,SAElBT,KAAKI,cAAgBA,EACrB,MAAMM,EAAkBN,EAAgB,IAAM,EAE9CJ,KAAKO,MAAQD,EAAS,OAAS,QAC/BN,KAAKS,QAAUE,WAAWX,KAAKY,kBAAmBF,EAAiBV,KAAKO,OAGxEP,KAAKa,YAAYC,MAAMC,QAAUT,EAAS,QAAU,KAEpD,GAAIA,GAAUF,EAAe,CAC5BY,EAAyBhB,KAAKiB,Y,CAI/B,GAAIb,EAAe,CAClB,OAAO,IAAIc,SAASC,GAAYR,WAAWQ,EAAS,M,CAGrDnB,KAAKI,cAAgB,I,CAItB,mBAAMgB,CAAcC,GACnBrB,KAAKsB,WAAaD,C,CAGnB,gBAAAE,GACCC,EAA2BxB,KAAKiB,Y,CAGjC,oBAAAQ,GACCzB,KAAK0B,8B,CAGN,4BAAAA,GACC,IAAK1B,KAAK2B,uBAAwB,OAClCC,cAAc5B,KAAK2B,uB,CAGpB,2BAAAE,GACC7B,KAAK2B,uBAAyBG,YAAY9B,KAAK+B,qBAAsB,I,CAItE,iBAAAnB,CAAkBL,GACjB,GAAIA,IAAU,OAAQ,CACrBP,KAAKO,MAAQ,SACbP,KAAK6B,6B,MACC,GAAItB,IAAU,QAAS,CAC7BP,KAAKO,MAAQ,SACbP,KAAK0B,+BACLF,EAA2BxB,KAAKiB,Y,EAKlC,oBAAAc,GACC,GAAIC,SAASC,gBAAgBC,YAAc,EAAG,OAE9ClC,KAAKa,YAAYqB,WAAaF,SAASC,gBAAgBC,UACvDF,SAASC,gBAAgBC,UAAY,C,CAGtC,MAAAC,GACC,MAAMC,EAAcC,EAAmB,4BAA6B,CACnE,CAACrC,KAAKO,OAAQ,OAGf,MAAM+B,EAA6B,CAClCC,OAAQvC,KAAKsB,WAAa,MAG3B,OACCkB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACVF,EAAA,QAAAC,IAAA,2CAAME,KAAK,oBACXH,EAAA,OAAAC,IAAA,2CAAKC,MAAON,EAAatB,MAAOwB,EAAWM,IAAMC,GAAa7C,KAAKa,YAAcgC,GAChFL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gCACT1C,KAAK8C,cACL9C,KAAK+C,gBACNP,EAAA,QAAAC,IAAA,+C,CAOL,aAAAM,GACC,IAAKC,EAAWhD,KAAKiB,YAAa,WAAY,CAC7C,OAAO,I,CAGR,OACCuB,EAAA,OAAKE,MAAM,gCACVF,EAAA,QAAMG,KAAK,Y,CAKd,WAAAG,GACC,IAAKE,EAAWhD,KAAKiB,YAAa,SAAU,CAC3C,OAAO,I,CAGR,OACCuB,EAAA,OAAKE,MAAM,8BACVF,EAAA,QAAMG,KAAK,U,0FA7DdM,EAAA,CADCC,E,+HAaDD,EAAA,CADCC,E","ignoreList":[]}