{"version":3,"file":"./modules/ExpandableSection.xxxxxxxx.js","mappings":"iKAEe,MAAMA,EAIjB,WAAAC,CAAoBC,EAAgCC,EAA6B,CAAC,GAA9D,KAAAD,UAAAA,EAAgC,KAAAC,QAAAA,EAChDC,KAAKC,OAASD,KAAKF,UAAUI,UAAUC,SAAS,UAChDH,KAAKD,SAAU,QAAWC,KAAKF,UAAWM,OAAOC,OAAOL,KAAKM,oBAAqBN,KAAKD,UACvFC,KAAKO,MACT,CAEQ,IAAAA,GAGJ,OAFAP,KAAKQ,iBAAiBR,KAAKF,UAAWE,KAAKS,qBAC3CT,KAAKU,qBACEV,IACX,CAEQ,iBAAAW,GAEJ,OADAX,KAAKY,OAASZ,KAAKa,iBAAiBb,KAAKF,WAClCE,IACX,CAEQ,gBAAAa,CAAiBC,GACrB,OAAOA,EAAQC,YACnB,CAEQ,iBAAAN,GACJ,OAAOT,KAAKC,OAAS,GAAKD,KAAKD,QAAQiB,gBAAkB,IAC7D,CAEQ,gBAAAR,CAAiBM,EAAsBF,GAG3C,OAFAE,EAAQG,MAAMC,UAAsB,MAAVN,EAAiBA,EAAS,GAE7CZ,IACX,CAEQ,WAAAmB,GAEJ,OADAnB,KAAKC,QAAUD,KAAKC,OACbD,IACX,CAEQ,iBAAAM,GACJ,MAAO,CACHU,gBAAiB,IAEzB,CAEQ,kBAAAN,GAGJ,OAFAU,OAAOC,gBAAgB,UAAU,KAAM,SAA2B,IAAMrB,KAAKsB,YAAY,MAAMC,QAExFvB,IACX,CAEQ,QAAAsB,GACJ,MAAMV,EAASZ,KAAKS,oBACpBT,KAAKQ,iBAAiBR,KAAKF,UAAWc,EAC1C,CAEA,kBAAAY,CAAmBC,GAEf,OADAzB,KAAKD,QAAQiB,gBAAkBS,EACxBzB,IACX,CAEA,MAAA0B,GAGI,OAFA1B,KAAKmB,cACAX,iBAAiBR,KAAKF,UAAWE,KAAKS,qBACpCT,IACX,CAEA,QAAA2B,GACI,OAAO3B,KAAKC,MAChB,CAEA,aAAA2B,GACI,OAAO5B,KAAKY,OAAwC,KAA/BZ,KAAKD,QAAQiB,eACtC,CAGA,KAAAa,GAGI,OAFA7B,KAAKQ,iBAAiBR,KAAKF,WACtBa,oBACEX,IACX,CAEA,MAAA8B,GACI,MAAMlB,EAAUZ,KAAKS,oBAGrB,OAFAT,KAAKQ,iBAAiBR,KAAKF,UAAWc,GAE/BZ,IACX,CAEA,YAAA+B,GACI,OAAO/B,KAAKF,SAChB,E,qFC3FJ,MAAMkC,EAAiB,oCASR,MAAMC,EAOjB,YAAOC,CAAMC,EAAmBH,GAC5BI,MAAMC,KAAKC,SAASC,iBAAiBJ,IAAWK,QAAQC,IAAuBA,EAAKC,QAAQC,oBAAmBC,SAAS9B,IACpH,IAAImB,EAAkBnB,GACtBA,EAAQ4B,QAAQC,kBAAoB,MAAM,GAElD,CAEA,WAAA9C,CAAmBiB,EAA8Bf,EAAoC,CAAC,GAAnE,KAAAe,QAAAA,EAA8B,KAAAf,QAAAA,EAC7CC,KAAKD,SAAU,QAAWC,KAAKc,QAASV,OAAOC,OAAOL,KAAKM,oBAAqBN,KAAKD,UACrFC,KAAKF,UAAYE,KAAK+B,eACtB/B,KAAK6C,QAAS,QAAa,uBAAuB7C,KAAKD,QAAQ+C,gBAAgBC,2BAC/E/C,KAAK6C,OAAOG,aAAa,OAAQ,UACjChD,KAAKiD,YAAcjD,KAAKkD,2BAExBlD,KAAKO,MACT,CAEQ,wBAAA2C,GACJ,MAAM,YAAED,GAAgBjD,KAAKD,QAAQ+C,gBACjCK,EAAiB/C,OAAOgD,QAAQpD,KAAKqD,+BAA+Bb,QAAO,EAAEc,EAAK7B,KAAWA,GAASwB,IAE1G,OAAO7C,OAAOmD,YAAYJ,EAC9B,CAEQ,IAAA5C,G,QAKA,GAJJP,KAAKwD,cACAC,0BACAC,yBAEkB,QAAhB,EAAA1D,KAAKiD,mBAAW,eAAEU,eAA0B,QAAZ,EAAA3D,KAAKD,eAAO,eAAE6D,gBAUrD,OANI5D,KAAK6D,eACAC,sBACAC,aACAC,iBACAC,oBAEFjE,IACX,CAEQ,uBAAAyD,GAaJ,OAZIzD,KAAKiD,YAAYiB,kBACjBlE,KAAKc,QAAQqD,UAAUC,IAAI,yCAG3BpE,KAAKiD,YAAYoB,eACjBrE,KAAKc,QAAQqD,UAAUC,IAAI,0CAG3BpE,KAAKiD,YAAYU,YACjB3D,KAAKc,QAAQqD,UAAUC,IAAI,kCAGxBpE,IACX,CAEQ,UAAA+D,GAEJ,OADA/D,KAAKsE,SAASC,YAAYvE,KAAK6C,QACxB7C,IACX,CAEQ,WAAAwD,GAGJ,OAFAxD,KAAKc,QAAQqD,UAAUC,IAAIpE,KAAKD,QAAQ+C,gBAAgBC,iBACxD/C,KAAKF,UAAUqE,UAAUC,IAAIpE,KAAKD,QAAQ+C,gBAAgB0B,mBACnDxE,IACX,CAEQ,YAAA6D,GAGJ,OAFA7D,KAAKsE,SAAWtE,KAAKyE,cACrBzE,KAAK0E,2BACE1E,IACX,CAEQ,wBAAA0E,GACJ1E,KAAKsE,SAASH,UAAUC,IAAI,GAAGpE,KAAKD,QAAQ+C,gBAAgBC,4BAChE,CAEQ,YAAAhB,GACJ,OAAoB/B,KAAKc,QAAQ6D,cAAc,IAAI3E,KAAKD,QAAQD,cAAgBE,KAAKc,OACzF,CAEQ,WAAA2D,GAEJ,OAD8BzE,KAAKc,QAAQ6D,cAAc,IAAI3E,KAAKD,QAAQuE,aAAetE,KAAK4E,gBAElG,CAEQ,oBAAAlB,G,MACJ,MAAMmB,EAAiB7E,KAAKD,QAAQ8E,eAChCC,EAAyC,QAA5B,EAAA9E,KAAKD,QAAQ+C,uBAAe,eAAEiC,gBAC3CT,EAAwBtE,KAAKc,QAAQ6D,cAAc,IAAI3E,KAAKD,QAAQuE,YAEnEQ,EAKDA,GAAgC,IAAlBD,EACdP,SAAAA,EAAUH,UAAUC,IAAI,iBAAkB,8BAI1CU,GAAcD,IACdP,SAAAA,EAAUH,UAAUC,IAAI,aAAgC,aAAnBS,EAAgC,SAAWA,MAVhFP,SAAAA,EAAUH,UAAUC,IAAI,iBAahC,CAEQ,cAAAQ,GACJ,MAAMN,GAAW,QAAwBtE,KAAKD,QAAQuE,UAEtD,OADAtE,KAAKc,QAAQkE,aAAaV,EAAUtE,KAAKc,QAAQmE,YAC1CX,CACX,CAEQ,mBAAAR,GAEJ,OADA9D,KAAKD,QAAQ+C,gBAAgBoC,kBAAkBlE,gBAAkBhB,KAAKsE,SAASvD,aACxEf,IACX,CAEQ,cAAAgE,GAIJ,OAHAhE,KAAKmF,SAAW,IAAI,UAASnF,KAAKc,QAASd,KAAKD,QAAQ+C,iBACxD9C,KAAKmF,SAASC,YAAW,GAElBpF,IACX,CAEQ,iBAAAM,GACJ,MAAO,CACHR,UAAW,iBACXwE,SAAU,yBACVxB,gBAAiB,CACbiC,iBAAiB,EACjBhC,gBAAiB,oBACjByB,kBAAmB,+BACnBa,eAAgB,8BAChB1D,UAAU,EACVuD,kBAAmB,CAAC,GAGhC,CAEQ,2BAAA7B,GACJ,OAAOjD,OAAOkF,OAAO,CACjBpB,iBAAkB,eAClBG,cAAe,cACfkB,sBAAuB,qBACvB5B,WAAY,gBAEpB,CAEQ,iBAAAM,GAEJ,OADAjE,KAAKmF,SAASK,kBAAiB,IAAMxF,KAAKmF,SAAS3D,mBAAmBxB,KAAKsE,SAASvD,gBAC7Ef,IACX,EAgBAiC,EAAkBC,MAAMF,E,yEC1L5B,MAAMA,EAAiB,2BAER,MAAMyD,EAMjB,YAAOvD,CAAMC,EAAmBH,GAC5BI,MAAMC,KAAKC,SAASC,iBAAiBJ,IAAWK,QAAQC,IAAuBA,EAAKC,QAAQC,oBAAmBC,SAAS9B,IACpH,IAAI2E,EAAS3E,GACbA,EAAQ4B,QAAQC,kBAAoB,MAAM,GAElD,CAEA,WAAA9C,CAAmBiB,EAA8Bf,EAA2B,CAAC,GAA1D,KAAAe,QAAAA,EAA8B,KAAAf,QAAAA,EAC7CC,KAAKD,SAAU,QAAWC,KAAKc,QAASV,OAAOC,OAAOL,KAAKM,oBAAqBN,KAAKD,UACrFC,KAAKF,UAAyBE,KAAKc,QAAQ6D,cAAc,IAAI3E,KAAKD,QAAQyE,sBAAwBxE,KAAKc,QACvGd,KAAK6C,OAAsB7C,KAAKc,QAAQ6D,cAAc,IAAI3E,KAAKD,QAAQsF,kBACvErF,KAAK0F,WAAa,IAAI,UAAW1F,KAAKF,UAAWE,KAAKD,QAAQmF,mBAE9DlF,KAAKO,MACT,CAEU,IAAAA,GAQN,OAPAP,KAAK2F,qBACAC,wBACAlF,qBACAmF,mBACAC,yBACAC,mCAEE/F,IACX,CAEU,kBAAA2F,GAEN,OADA3F,KAAK6C,OAAOmD,QAAS,EACdhG,IACX,CAEU,qBAAA4F,GAEN,OADA5F,KAAK6C,OAAOoD,iBAAiB,QAASjG,KAAKkG,eAAeC,KAAKnG,OACxDA,IACX,CAEU,oBAAAoG,CAAqBC,GAK3B,OAJA,EACMrG,KAAKc,QAAQqD,UAAUC,IAAI,GAAGpE,KAAKD,QAAQgD,2BAC3C/C,KAAKc,QAAQqD,UAAUmC,OAAO,GAAGtG,KAAKD,QAAQgD,2BAE7C/C,IACX,CAEU,QAAAuG,CAASF,GAKf,OAJA,EACMrG,KAAKD,QAAQyG,SAAWxG,KAAKF,UAAUqE,UAAUC,IAAI,GAAGpE,KAAKD,QAAQyE,gCACrExE,KAAKD,QAAQyG,SAAWxG,KAAKF,UAAUqE,UAAUmC,OAAO,GAAGtG,KAAKD,QAAQyE,gCAEvExE,IACX,CAEU,cAAAkG,CAAeO,GAAuB,GAC5CzG,KAAK0F,WAAWhE,SAChB1B,KAAKoG,qBAAqBpG,KAAK0F,WAAW/D,YAC1C3B,KAAK0G,cAAgB1G,KAAK0F,WAAW/D,WAAa,WAAa,WACnE,CAEU,QAAAL,GACNtB,KAAKD,QAAQ4G,eAET3G,KAAKD,QAAQ4B,UACb3B,KAAK6F,kBAEb,CAEU,sBAAAC,GAIN,OAHI9F,KAAKD,QAAQ4B,UACb3B,KAAKkG,gBAAe,GAEjBlG,IACX,CAEU,gCAAA+F,GAIN,OAHG/F,KAAKD,QAAQ6G,kBACZ5G,KAAKF,UAAUqE,UAAUC,IAAI,GAAGpE,KAAKD,QAAQyE,4BAA8BxE,KAAKD,QAAQ6G,kBAErF5G,IACX,CAEU,kBAAAU,GAEN,OADAU,OAAOC,gBAAgB,UAAU,KAAM,SAA2B,IAAMrB,KAAKsB,YAAY,MAAMC,QACxFvB,IACX,CAEU,aAAA6G,GAMN,OALA7G,KAAK0F,WAAW5D,SAEhB9B,KAAKuG,UAAS,GACTnB,YAAW,GAETpF,IACX,CAEU,eAAA8G,GAMN,OALA9G,KAAK0F,WAAW7D,QAEhB7B,KAAKuG,UAAS,GACTnB,YAAW,GAETpF,IACX,CAEO,UAAAoF,CAAW3D,GAEd,OADAzB,KAAK6C,OAAOmD,OAASvE,EACdzB,IACX,CAEU,iBAAAM,GACN,MAAO,CACHyC,gBAAiB,cACjByB,kBAAmB,uBACnBa,eAAgB,sBAChBmB,SAAS,EACTG,aAAc,OAEtB,CAEA,gBAAAd,GAOI,OANA7F,KAAK0F,WAAW7D,QAEhB7B,KAAK0F,WAAW9D,gBACV5B,KAAK6G,gBACL7G,KAAK8G,kBAEJ9G,IACX,CAEA,kBAAAwB,CAAmBC,GAEf,OADAzB,KAAK0F,WAAWlE,mBAAmBC,GAC5BzB,IACX,CAEA,gBAAAwF,CAAiBuB,GAEb,OADA/G,KAAKD,QAAQ4G,aAAeI,EACrB/G,IACX,CAEA,QAAA2B,GACI,OAAO3B,KAAK0F,WAAW/D,UAC3B,CAEA,MAAAD,GAEI,OADA1B,KAAKkG,iBACElG,IACX,EAgBAyF,EAASvD,MAAMF,E,qFCzKJ,MAAMgF,WAAsB,OAAkB,YACzD,aAAAC,CAAcC,EAA6BC,GACvC,GAAI5F,OAAOH,OAAOgG,WAAWC,UACzB,OAGJ,IAAKF,GAAeD,EAAeI,QAAQ,oBACvC,OAGJ,IACI3F,GAAoB,EACpB4F,EAAuB,GAc3B,OAZIL,EAAehH,UAAUsH,OAAO,UAAY,IAC5C7F,GAAW,GAGf4F,EAAevH,KAAKyH,SAASP,GAEzB5E,SAASoF,KAAKvD,UAAUwD,SAAS,uBACjC3H,KAAK4H,gBAAgBV,EAXA,YAW4BK,GAEjDvH,KAAK6H,sBAAsBlG,EAAU4F,GAGlCvH,IACX,CAEQ,QAAAyH,CAASP,GACb,IAAIY,EAA6BZ,EAAevC,cAAc,MAC1DoD,EAA6Bb,EAAevC,cAAc,MAE9D,OAAImD,EACOA,EAAcE,UACdD,EACAA,EAAcC,eADlB,CAGX,CAEQ,eAAAJ,CAAgBV,EAA6Be,EAAoBV,GACjEL,EAAehH,UAAUsH,OAAO,UAAY,IAC5CS,EAAa,YAEjBjI,KAAKkI,iBAAiB,sBAAuBD,EAAYV,EAC7D,CAEQ,qBAAAM,CAAsBlG,EAAU4F,GAChC5F,IACK3B,KAAKc,QAAQqD,UAAUwD,SAAS,qBACjC3H,KAAKmI,kBAAkBZ,GACvBvH,KAAKc,QAAQqD,UAAUC,IAAI,oBAG/BgE,YAAW,KACPpI,KAAKc,QAAQqD,UAAUmC,OAAO,kBAAkB,GACjD,KAEX,CAEQ,iBAAA6B,CAAkBE,GAClB9G,OAAOH,OAAOkH,aACdtI,KAAKuI,UAAUC,KAAK,CAChBC,MAAO,WACPC,cAAe,iBACfC,YAAa,aACbN,WAAYA,EACZO,qBAAqB,GAGjC,CAEQ,gBAAAV,CAAiBQ,EAAuBC,EAAqBN,GAC7D9G,OAAOH,OAAOkH,aACdtI,KAAKuI,UAAUC,KAAK,CAChBC,MAAO,WACPC,cAAeA,EACfC,YAAaA,EACbN,WAAYA,EACZO,qBAAqB,GAGjC,CAEU,cAAA1C,CAAeO,GAAwB,GAC7CoC,MAAM3C,eAAeO,GACrBzG,KAAKiH,cAAcjH,KAAKc,QAAS2F,GACjCqC,EAAQC,IAAI/I,KAAK0G,cAErB,E,gDC5FJ,Q,SAA4B,O","sources":["webpack:///./modules/Expandable.ts","webpack:///./modules/ExpandableSection.ts","webpack:///./modules/Expander/Expander.ts","webpack:///./modules/Expander/ExpanderWithT.ts","webpack:///./modules/Expander/index.ts"],"sourcesContent":["import { getOptions, requestAnimationFrameTimer } from '../helpers/helperFunctions';\r\n\r\nexport default class Expandable {\r\n private height: number;\r\n private active: boolean;\r\n\r\n constructor(private container: HTMLElement, private options: ExpandableOptions = {}) {\r\n this.active = this.container.className.includes('active');\r\n this.options = getOptions(this.container, Object.assign(this.getDefaultOptions(), this.options));\r\n this.init();\r\n }\r\n\r\n private init(): Expandable {\r\n this.setElementHeight(this.container, this.getSuitableHeight());\r\n this.setOnResizeHandler();\r\n return this;\r\n }\r\n\r\n private saveInitialHeight(): Expandable {\r\n this.height = this.getElementHeight(this.container);\r\n return this;\r\n }\r\n\r\n private getElementHeight(element: HTMLElement): number {\r\n return element.offsetHeight;\r\n }\r\n\r\n private getSuitableHeight(): string {\r\n return this.active ? '' : this.options.collapsedHeight + 'px';\r\n }\r\n\r\n private setElementHeight(element: HTMLElement, height?: string): Expandable {\r\n element.style.maxHeight = height != null ? height : ''; \r\n\r\n return this;\r\n }\r\n\r\n private toggleState(): Expandable {\r\n this.active = !this.active;\r\n return this;\r\n }\r\n\r\n private getDefaultOptions(): ExpandableOptions {\r\n return {\r\n collapsedHeight: 115\r\n };\r\n }\r\n\r\n private setOnResizeHandler(): Expandable {\r\n NiveaX.addToEventStore('resize', () => requestAnimationFrameTimer(() => this.onResize(), 300), window)\r\n\r\n return this;\r\n }\r\n\r\n private onResize() {\r\n const height = this.getSuitableHeight();\r\n this.setElementHeight(this.container, height);\r\n }\r\n\r\n setCollapsedHeight(value: number): Expandable {\r\n this.options.collapsedHeight = value;\r\n return this;\r\n }\r\n\r\n toggle(): Expandable {\r\n this.toggleState()\r\n .setElementHeight(this.container, this.getSuitableHeight());\r\n return this;\r\n }\r\n\r\n isActive(): boolean {\r\n return this.active;\r\n }\r\n \r\n needToBeShown(): boolean {\r\n return this.height > this.options.collapsedHeight * 1.25;\r\n }\r\n\r\n\r\n clear(): Expandable {\r\n this.setElementHeight(this.container)\r\n .saveInitialHeight();\r\n return this;\r\n }\r\n\r\n render(): Expandable {\r\n const height = this.getSuitableHeight();\r\n this.setElementHeight(this.container, height);\r\n\r\n return this;\r\n }\r\n\r\n getContainer(): HTMLElement {\r\n return this.container;\r\n }\r\n}","import Expander from './Expander';\r\nimport { createButton, createElementFromString } from '../helpers/DOMHelpers';\r\nimport { getOptions } from '../helpers/helperFunctions';\r\nconst moduleSelector = '[data-module=\"ExpandableSection\"]';\r\n\r\ninterface ExpandableDisplayOptions {\r\n ExpOnlyOnDesktop?: string,\r\n ExpOnlyMobile?: string,\r\n ExpOnDesktopAndMobile?: string,\r\n NoExpander?: string\r\n}\r\n\r\nexport default class ExpandableSection {\r\n private container: HTMLElement;\r\n private button: HTMLElement;\r\n private headline: HTMLElement;\r\n private expander: Expander;\r\n private displayType: ExpandableDisplayOptions;\r\n\r\n static setup(selector: string = moduleSelector): void {\r\n Array.from(document.querySelectorAll(selector)).filter((node: HTMLElement) => !node.dataset.moduleInitialized).forEach((element: HTMLElement) => {\r\n new ExpandableSection(element);\r\n element.dataset.moduleInitialized = 'true';\r\n });\r\n }\r\n\r\n constructor(public element: HTMLElement, private options: ExpandableSectionOptions = {}) {\r\n this.options = getOptions(this.element, Object.assign(this.getDefaultOptions(), this.options));\r\n this.container = this.getContainer();\r\n this.button = createButton(`nx-u-plus-minus-btn ${this.options.expanderOptions.elementSelector}__button`);\r\n this.button.setAttribute('type', 'button'); //type button prevent button to submit form\r\n this.displayType = this.getExpanderDisplayOption();\r\n \r\n this.init();\r\n }\r\n\r\n private getExpanderDisplayOption(): ExpandableDisplayOptions {\r\n const { displayType } = this.options.expanderOptions,\r\n getDisplayType = Object.entries(this.getExpandableDisplayOptions()).filter(([key, value]) => value == displayType);\r\n\r\n return Object.fromEntries(getDisplayType);\r\n }\r\n\r\n private init(): ExpandableSection {\r\n this.initClasses()\r\n .updateExpandableBgColor()\r\n .setHeadlineAlignment();\r\n \r\n if(this.displayType?.NoExpander || this.options?.hideExpandable){\r\n return;\r\n }\r\n \r\n this.initHeadline()\r\n .initCollapsedHeight()\r\n .initButton()\r\n .initExpandable()\r\n .setBeforeResizeCB();\r\n \r\n return this;\r\n }\r\n\r\n private updateExpandableBgColor() {\r\n if (this.displayType.ExpOnlyOnDesktop) {\r\n this.element.classList.add('nx-expand-section__background--mobile');\r\n }\r\n\r\n if (this.displayType.ExpOnlyMobile) {\r\n this.element.classList.add('nx-expand-section__background--desktop');\r\n }\r\n\r\n if (this.displayType.NoExpander) {\r\n this.element.classList.add('nx-expand-section__no-expander');\r\n }\r\n\r\n return this;\r\n }\r\n\r\n private initButton(): ExpandableSection {\r\n this.headline.appendChild(this.button);\r\n return this;\r\n }\r\n\r\n private initClasses(): ExpandableSection {\r\n this.element.classList.add(this.options.expanderOptions.elementSelector);\r\n this.container.classList.add(this.options.expanderOptions.containerSelector);\r\n return this;\r\n }\r\n\r\n private initHeadline(): ExpandableSection {\r\n this.headline = this.getHeadline();\r\n this.setHeadlineSelectorClass();\r\n return this;\r\n }\r\n\r\n private setHeadlineSelectorClass() {\r\n this.headline.classList.add(`${this.options.expanderOptions.elementSelector}__headline`);\r\n }\r\n\r\n private getContainer(): HTMLElement {\r\n return this.element.querySelector(`.${this.options.container}`) || this.element;\r\n }\r\n\r\n private getHeadline(): HTMLElement {\r\n const headline = this.element.querySelector(`.${this.options.headline}`) || this.createHeadline();\r\n return headline;\r\n }\r\n\r\n private setHeadlineAlignment() {\r\n const titleAlignment = this.options.titleAlignment,\r\n isExpOnPdp = this.options.expanderOptions?.isExpanderOnPdp,\r\n headline = this.element.querySelector(`.${this.options.headline}`);\r\n\r\n if (!isExpOnPdp) {\r\n headline?.classList.add('nx-u-txt--left');\r\n return;\r\n }\r\n\r\n if (isExpOnPdp && titleAlignment == \"\") {\r\n headline?.classList.add('nx-u-txt--left', 'nx-u-txt--centered-desktop');\r\n return;\r\n }\r\n\r\n if (isExpOnPdp && titleAlignment) {\r\n headline?.classList.add(`nx-u-txt--${titleAlignment === \"centered\" ? \"center\" : titleAlignment}`);\r\n return;\r\n }\r\n }\r\n\r\n private createHeadline(): HTMLElement {\r\n const headline = createElementFromString(this.options.headline);\r\n this.element.insertBefore(headline, this.element.firstChild);\r\n return headline;\r\n }\r\n\r\n private initCollapsedHeight(): ExpandableSection {\r\n this.options.expanderOptions.expandableOptions.collapsedHeight = this.headline.offsetHeight;\r\n return this;\r\n }\r\n\r\n private initExpandable(): ExpandableSection {\r\n this.expander = new Expander(this.element, this.options.expanderOptions);\r\n this.expander.hideButton(false);\r\n\r\n return this;\r\n }\r\n\r\n private getDefaultOptions(): ExpandableSectionOptions {\r\n return {\r\n container: 'nx-u-container',\r\n headline: 'nx-u-section__headline',\r\n expanderOptions: {\r\n isExpanderOnPdp: false,\r\n elementSelector: 'nx-expand-section',\r\n containerSelector: 'nx-expand-section__container',\r\n buttonSelector: `nx-expand-section__headline`,\r\n isActive: false,\r\n expandableOptions: {}\r\n }\r\n };\r\n }\r\n\r\n private getExpandableDisplayOptions(): ExpandableDisplayOptions {\r\n return Object.freeze({\r\n ExpOnlyOnDesktop: \"desktop only\",\r\n ExpOnlyMobile: \"mobile only\",\r\n ExpOnDesktopAndMobile: \"desktop and mobile\",\r\n NoExpander: \"no accordion\",\r\n });\r\n }\r\n\r\n private setBeforeResizeCB(): ExpandableSection {\r\n this.expander.setBeforResizeCB(() => this.expander.setCollapsedHeight(this.headline.offsetHeight));\r\n return this;\r\n }\r\n}\r\n\r\n// Hot Module Replacement\r\nif (module.hot) {\r\n let nodesCache: HMRNodes[] = Array.from(document.querySelectorAll(moduleSelector)).map((element: Node) => ({ nodeToReplace: element, nodeOrigin: element.cloneNode(true) }));\r\n\r\n ExpandableSection.setup(moduleSelector);\r\n\r\n module.hot.accept(() => {\r\n ExpandableSection.setup(moduleSelector);\r\n });\r\n module.hot.dispose(() => {\r\n nodesCache.forEach(({ nodeToReplace, nodeOrigin }) => { nodeToReplace = nodeToReplace.parentElement.replaceChild(nodeOrigin.cloneNode(true), nodeToReplace) });\r\n });\r\n} else {\r\n ExpandableSection.setup(moduleSelector);\r\n}","import Expandable from '../Expandable';\r\nimport { getOptions, requestAnimationFrameTimer } from '../../helpers/helperFunctions';\r\n\r\nconst moduleSelector = '[data-module=\"Expander\"]';\r\n\r\nexport default class Expander {\r\n private container: HTMLElement;\r\n private button: HTMLElement;\r\n private expandable: Expandable;\r\n public expanderState: string;\r\n \r\n static setup(selector: string = moduleSelector): void {\r\n Array.from(document.querySelectorAll(selector)).filter((node: HTMLElement) => !node.dataset.moduleInitialized).forEach((element: HTMLElement) => {\r\n new Expander(element);\r\n element.dataset.moduleInitialized = 'true';\r\n });\r\n }\r\n\r\n constructor(public element: HTMLElement, private options: ExpanderOptions = {}) {\r\n this.options = getOptions(this.element, Object.assign(this.getDefaultOptions(), this.options));\r\n this.container = this.element.querySelector(`.${this.options.containerSelector}`) || this.element;\r\n this.button = this.element.querySelector(`.${this.options.buttonSelector}`);\r\n this.expandable = new Expandable(this.container, this.options.expandableOptions);\r\n \r\n this.init();\r\n }\r\n\r\n protected init(): Expander {\r\n this.showExpanderButton()\r\n .setButtonEventHandler()\r\n .setOnResizeHandler()\r\n .adjustAppearance()\r\n .applyActiveFromOptions()\r\n .applyContentAlignmentFromOptions();\r\n\r\n return this;\r\n }\r\n\r\n protected showExpanderButton(): Expander {\r\n this.button.hidden = false;\r\n return this;\r\n }\r\n\r\n protected setButtonEventHandler(): Expander {\r\n this.button.addEventListener('click', this.toggleExpander.bind(this));\r\n return this;\r\n }\r\n\r\n protected toggleActiveModifier(force?: boolean): Expander {\r\n (force)\r\n ? this.element.classList.add(`${this.options.elementSelector}--active`)\r\n : this.element.classList.remove(`${this.options.elementSelector}--active`);\r\n \r\n return this;\r\n }\r\n \r\n protected showFade(force?: boolean): Expander {\r\n (force)\r\n ? this.options.hasFade && this.container.classList.add(`${this.options.containerSelector}--with-fade`)\r\n : this.options.hasFade && this.container.classList.remove(`${this.options.containerSelector}--with-fade`);\r\n\r\n return this;\r\n }\r\n\r\n protected toggleExpander(clickedEvent:boolean = true): void {\r\n this.expandable.toggle();\r\n this.toggleActiveModifier(this.expandable.isActive());\r\n this.expanderState = this.expandable.isActive() ? 'Expanded' : 'Collapsed';\r\n }\r\n\r\n protected onResize(): void {\r\n this.options.beforeResize();\r\n \r\n if( this.options.isActive ) {\r\n this.adjustAppearance();\r\n }\r\n }\r\n\r\n protected applyActiveFromOptions() {\r\n if( this.options.isActive ) {\r\n this.toggleExpander(false);\r\n }\r\n return this;\r\n }\r\n\r\n protected applyContentAlignmentFromOptions() {\r\n if(this.options.contentAlignment) {\r\n this.container.classList.add(`${this.options.containerSelector}--align-` + this.options.contentAlignment);\r\n }\r\n return this;\r\n }\r\n\r\n protected setOnResizeHandler(): Expander {\r\n NiveaX.addToEventStore('resize', () => requestAnimationFrameTimer(() => this.onResize(), 300), window);\r\n return this;\r\n }\r\n\r\n protected setupExpander(): Expander {\r\n this.expandable.render();\r\n\r\n this.showFade(true)\r\n .hideButton(false);\r\n\r\n return this;\r\n }\r\n\r\n protected destroyExpander(): Expander {\r\n this.expandable.clear();\r\n\r\n this.showFade(false)\r\n .hideButton(true);\r\n\r\n return this;\r\n }\r\n\r\n public hideButton(value: boolean): Expander {\r\n this.button.hidden = value;\r\n return this;\r\n }\r\n\r\n protected getDefaultOptions(): ExpanderOptions {\r\n return {\r\n elementSelector: 'nx-expander',\r\n containerSelector: 'nx-expander__content',\r\n buttonSelector: 'nx-expander__button',\r\n hasFade: true,\r\n beforeResize: () => {}\r\n };\r\n }\r\n\r\n adjustAppearance(): Expander {\r\n this.expandable.clear();\r\n \r\n this.expandable.needToBeShown()\r\n ? this.setupExpander()\r\n : this.destroyExpander();\r\n\r\n return this;\r\n }\r\n\r\n setCollapsedHeight(value: number): Expander {\r\n this.expandable.setCollapsedHeight(value);\r\n return this;\r\n }\r\n\r\n setBeforResizeCB(cb: Callback): Expander {\r\n this.options.beforeResize = cb;\r\n return this;\r\n }\r\n\r\n isActive(): boolean {\r\n return this.expandable.isActive();\r\n }\r\n\r\n toggle(): Expander {\r\n this.toggleExpander();\r\n return this;\r\n }\r\n}\r\n\r\n// Hot Module Replacement\r\nif (module.hot) {\r\n let nodesCache: HMRNodes[] = Array.from(document.querySelectorAll(moduleSelector)).map((element: Node) => ({ nodeToReplace: element, nodeOrigin: element.cloneNode(true) }));\r\n\r\n Expander.setup(moduleSelector);\r\n\r\n module.hot.accept(() => {\r\n Expander.setup(moduleSelector);\r\n });\r\n module.hot.dispose(() => {\r\n nodesCache.forEach(({nodeToReplace, nodeOrigin}) => { nodeToReplace = nodeToReplace.parentElement.replaceChild(nodeOrigin.cloneNode(true), nodeToReplace)});\r\n });\r\n} else {\r\n Expander.setup(moduleSelector);\r\n}","/// \r\nimport Expander from \"./Expander\";\r\nimport ClassWithTracking from \"../../ClassWithTracking\";\r\n\r\nexport default class ExpanderWithT extends ClassWithTracking(Expander) {\r\n trackingEvent(trackedElement: HTMLElement, isClicked: boolean) {\r\n if (window.NiveaX.deviceType.isDesktop) { \r\n return;\r\n }\r\n\r\n if (!isClicked || !!trackedElement.closest(\".nx-filter-layer\")) {\r\n return;\r\n }\r\n\r\n let buttonType: string = \"Tap minus\",\r\n isActive: boolean = false,\r\n titleContent: string = \"\";\r\n\r\n if (trackedElement.className.search(\"active\") > 0) {\r\n isActive = true;\r\n }\r\n\r\n titleContent = this.setLabel(trackedElement);\r\n\r\n if (document.body.classList.contains(\"nx-pagetype-product\")) {\r\n this.trackPDPSection(trackedElement, buttonType, titleContent);\r\n } else {\r\n this.preventMultipleClicks(isActive, titleContent);\r\n }\r\n\r\n return this;\r\n }\r\n\r\n private setLabel(trackedElement: HTMLElement): string {\r\n let toggleTitleH2: HTMLElement = trackedElement.querySelector(\"h2\"),\r\n toggleTitleH3: HTMLElement = trackedElement.querySelector(\"h3\");\r\n\r\n if (toggleTitleH2) {\r\n return toggleTitleH2.innerText;\r\n } else if (toggleTitleH3) {\r\n return toggleTitleH3.innerText;\r\n }\r\n }\r\n\r\n private trackPDPSection(trackedElement: HTMLElement, buttonType: string, titleContent: string): void {\r\n if (trackedElement.className.search(\"active\") > 0) {\r\n buttonType = \"Tap plus\";\r\n }\r\n this.trackPDPSections(\"Product Detail Page\", buttonType, titleContent);\r\n }\r\n\r\n private preventMultipleClicks(isActive, titleContent): void {\r\n if (isActive) {\r\n if (!this.element.classList.contains(\"nx-trigger-once\")) {\r\n this.trackElementClick(titleContent);\r\n this.element.classList.add(\"nx-trigger-once\");\r\n }\r\n\r\n setTimeout(() => {\r\n this.element.classList.remove(\"nx-trigger-once\");\r\n }, 100);\r\n }\r\n }\r\n\r\n private trackElementClick(eventLabel: string) {\r\n if (window.NiveaX.IsUAEnabled) {\r\n this.dataLayer.push({\r\n event: \"ga_event\",\r\n eventCategory: \"Expand Content\",\r\n eventAction: \"Tap Button\",\r\n eventLabel: eventLabel,\r\n eventNonInteraction: false\r\n });\r\n }\r\n }\r\n\r\n private trackPDPSections(eventCategory: string, eventAction: string, eventLabel: string) {\r\n if (window.NiveaX.IsUAEnabled) {\r\n this.dataLayer.push({\r\n event: \"ga_event\",\r\n eventCategory: eventCategory,\r\n eventAction: eventAction,\r\n eventLabel: eventLabel,\r\n eventNonInteraction: false\r\n });\r\n }\r\n }\r\n\r\n protected toggleExpander(clickedEvent: boolean = true): void {\r\n super.toggleExpander(clickedEvent);\r\n this.trackingEvent(this.element, clickedEvent);\r\n console.log(this.expanderState);\r\n // console.log(this.element, clickedEvent);\r\n }\r\n}\r\n","import ExpanderWithT from './ExpanderWithT';\r\nexport default ExpanderWithT;"],"names":["Expandable","constructor","container","options","this","active","className","includes","Object","assign","getDefaultOptions","init","setElementHeight","getSuitableHeight","setOnResizeHandler","saveInitialHeight","height","getElementHeight","element","offsetHeight","collapsedHeight","style","maxHeight","toggleState","NiveaX","addToEventStore","onResize","window","setCollapsedHeight","value","toggle","isActive","needToBeShown","clear","render","getContainer","moduleSelector","ExpandableSection","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","button","expanderOptions","elementSelector","setAttribute","displayType","getExpanderDisplayOption","getDisplayType","entries","getExpandableDisplayOptions","key","fromEntries","initClasses","updateExpandableBgColor","setHeadlineAlignment","NoExpander","hideExpandable","initHeadline","initCollapsedHeight","initButton","initExpandable","setBeforeResizeCB","ExpOnlyOnDesktop","classList","add","ExpOnlyMobile","headline","appendChild","containerSelector","getHeadline","setHeadlineSelectorClass","querySelector","createHeadline","titleAlignment","isExpOnPdp","isExpanderOnPdp","insertBefore","firstChild","expandableOptions","expander","hideButton","buttonSelector","freeze","ExpOnDesktopAndMobile","setBeforResizeCB","Expander","expandable","showExpanderButton","setButtonEventHandler","adjustAppearance","applyActiveFromOptions","applyContentAlignmentFromOptions","hidden","addEventListener","toggleExpander","bind","toggleActiveModifier","force","remove","showFade","hasFade","clickedEvent","expanderState","beforeResize","contentAlignment","setupExpander","destroyExpander","cb","ExpanderWithT","trackingEvent","trackedElement","isClicked","deviceType","isDesktop","closest","titleContent","search","setLabel","body","contains","trackPDPSection","preventMultipleClicks","toggleTitleH2","toggleTitleH3","innerText","buttonType","trackPDPSections","trackElementClick","setTimeout","eventLabel","IsUAEnabled","dataLayer","push","event","eventCategory","eventAction","eventNonInteraction","super","console","log"],"sourceRoot":""}