{"version":3,"file":"./modules/ProductAttributeSelector.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/ProductAttributeSelector.ts"],"sourcesContent":["import { addClass, removeClass } from \"../helpers/DOMHelpers\";\r\nimport { debounce, horizontalScrolling } from \"../helpers/helperFunctions\";\r\n\r\nconst moduleSelector = '[data-module=\"ProductAttributeSelector\"]';\r\n\r\nexport default class ProductAttributeSelector {\r\n    static setup(selector: string = moduleSelector): void {\r\n        Array.from(document.querySelectorAll(selector))\r\n            .filter((node: HTMLElement) => !node.dataset.moduleInitialized)\r\n            .forEach((element: HTMLElement) => {\r\n                new ProductAttributeSelector(element);\r\n                element.dataset.moduleInitialized = \"true\";\r\n            });\r\n    }\r\n\r\n    constructor(public element: HTMLElement) {\r\n        this.init();\r\n    }\r\n\r\n    private init(): void {\r\n        const productVariants = this.element.querySelectorAll(\".nx-pas__button, .product-variation__with-expander, .product-variation__with-slide\");\r\n\r\n        productVariants?.forEach((variant: HTMLElement) => {\r\n            if (isDropDownVariant(variant)) {\r\n                this.initProductVariantWithDropdown(variant);\r\n            } else if (isExpanderVariant(variant)) {\r\n                this.initProductVariantWithExpander(variant);\r\n            } else if (isSlideVariant(variant)) {\r\n                this.initProductVariantWithSlide(variant);\r\n            }\r\n        });\r\n\r\n        function isSlideVariant(variant: HTMLElement) {\r\n            return variant.classList.contains(\"product-variation__with-slide\");\r\n        }\r\n\r\n        function isExpanderVariant(variant: HTMLElement) {\r\n            return variant.classList.contains(\"product-variation__with-expander\");\r\n        }\r\n\r\n        function isDropDownVariant(variant: HTMLElement) {\r\n            return variant.classList.contains(\"nx-pas__button\");\r\n        }\r\n    }\r\n\r\n    private initProductVariantWithDropdown(variantElement: HTMLElement): void {\r\n        const dropDownCheckBox: HTMLInputElement = variantElement\r\n            .closest(\".nx-pas__navigation\")\r\n            ?.querySelector(\".nx-pas__button--checkbox\");\r\n\r\n\r\n        if(this.dropDownHasOnlyOneElement(variantElement)) {\r\n            this.displayAsSingleElement(variantElement);\r\n        } else {\r\n            this.closeDropDownOnOutsideClick(dropDownCheckBox, variantElement);\r\n        }\r\n    }\r\n\r\n    private closeDropDownOnOutsideClick(dropDownCheckBox: HTMLInputElement, variantElement: HTMLElement) {\r\n        document.body.addEventListener(\"click\", (event) => {\r\n            this.setClickOutside(event, dropDownCheckBox, variantElement);\r\n        });\r\n    }\r\n\r\n\r\n    private dropDownHasOnlyOneElement(variantElement: HTMLElement) {\r\n        return variantElement.closest('.nx-pas__navigation')?.querySelector('.nx-pas__list')?.childElementCount < 2;\r\n    }\r\n\r\n    private displayAsSingleElement(variantElement: HTMLElement) {\r\n        variantElement.classList.add(\"nx-pas__button--one-element\");\r\n    }\r\n\r\n    private setClickOutside(event, dropDownCheckBoxButton: HTMLInputElement, dropDownElement): void {\r\n        const target = <any>event.target;\r\n        if (!(target == dropDownCheckBoxButton || target == dropDownElement) && dropDownCheckBoxButton.checked) {\r\n            dropDownCheckBoxButton.checked = false;\r\n        }\r\n    }\r\n\r\n    private initProductVariantWithExpander(variantElement: HTMLElement): void {\r\n        const productVariantExpanderToggleButtons = variantElement.querySelectorAll(\r\n                \".product-variation__expand-button, .product-variation__collapse-button\"\r\n            ),\r\n            productVariationItems = Array.from(\r\n                variantElement.querySelectorAll(\".product-variation__item\")\r\n            );\r\n\r\n        const getMaxHeight = () => {\r\n            const tallestVariantItem = Math.max(\r\n                ...productVariationItems.map(\r\n                    (item: HTMLElement) => item.getBoundingClientRect().height\r\n                )\r\n            );\r\n            return tallestVariantItem + 2;\r\n        };\r\n\r\n        const setMaxHeight = () => { variantElement.style.maxHeight = getMaxHeight() + \"px\"; };\r\n\r\n        setMaxHeight();\r\n        NiveaX.addToEventStore(\"resize\", () => debounce(setMaxHeight(), 300), window);\r\n\r\n        this.addClickListenersToExpanderBtns(productVariantExpanderToggleButtons, variantElement);\r\n        this.addExpanderTransitionedListener(variantElement);\r\n        this.handleSelectedOnLoad(variantElement);\r\n    }\r\n\r\n    private handleSelectedOnLoad(variantElement: HTMLElement) {\r\n        const items = variantElement.querySelectorAll('.product-variation__item');\r\n        items.forEach((item, index) => {\r\n            if(!item.classList.contains('product-variation__item--selected')) return;\r\n            if(index <= 2 || variantElement.classList.contains('product-variations--expanded')) return;\r\n        \r\n            const button = variantElement.querySelector('.product-variation__expand-button') as HTMLElement;\r\n            button.click();\r\n        })\r\n    }\r\n\r\n    private addExpanderTransitionedListener(variantElement: HTMLElement) {\r\n        variantElement?.addEventListener(\"transitionend\", (e: Event) => {\r\n            this.handleExpanderButtonOnTransition(e);\r\n        });\r\n    }\r\n\r\n    private addClickListenersToExpanderBtns(productVariantExpanderToggleButtons: NodeListOf<Element>, variant: HTMLElement) {\r\n        productVariantExpanderToggleButtons?.forEach((btn) => {\r\n            btn.addEventListener(\"click\", (e) => {\r\n                e.preventDefault();\r\n                variant.classList.toggle(\"product-variations--expanded\");\r\n            });\r\n        });\r\n    }\r\n\r\n    private handleExpanderButtonOnTransition(e: Event) {\r\n        const target = e.target as HTMLElement, expanderBtn = <HTMLElement>(\r\n            target.querySelector(\".product-variation__expand-button\")\r\n        ), isVariantExpanded = target.classList.contains(\"product-variations--expanded\");\r\n        if (target.classList.contains(\"product-variations\") && expanderBtn) {\r\n            isVariantExpanded\r\n                ? (expanderBtn.style.display = \"none\")\r\n                : (expanderBtn.style.display = \"\");\r\n        }\r\n    }\r\n\r\n    private initProductVariantWithSlide(variantElement: HTMLElement): void {\r\n        const productVariantWithSlide = <HTMLElement>(variantElement.querySelector(\".product-variations__inner-scroll\"));\r\n        const productVariantWithSlideScrollbar = <HTMLElement>(variantElement.querySelector(\".product-variations__inner-scroll\"));\r\n        const nextBtn = <HTMLElement>variantElement.querySelector(\".product-variation__next-btn\");\r\n        const prevBtn = <HTMLElement>variantElement.querySelector(\".product-variation__prev-btn\");\r\n\r\n        if (productVariantWithSlide) {\r\n            nextBtn?.addEventListener(\"click\", () =>\r\n                this.scrollElement(productVariantWithSlideScrollbar, 100)\r\n            );\r\n            prevBtn?.addEventListener(\"click\", () =>\r\n                this.scrollElement(productVariantWithSlideScrollbar, -100)\r\n            );\r\n            productVariantWithSlideScrollbar?.addEventListener(\"scroll\", () =>\r\n                this.checkProductVariantsArrows(productVariantWithSlideScrollbar, nextBtn, prevBtn)\r\n            );\r\n\r\n            horizontalScrolling(productVariantWithSlide);\r\n            this.checkProductVariantsArrows(productVariantWithSlideScrollbar, nextBtn, prevBtn);\r\n            this.scrollToSelectedOnLoad(productVariantWithSlideScrollbar);\r\n        }\r\n    }\r\n\r\n    private scrollToSelectedOnLoad(scrollElement: HTMLElement) {\r\n        if(scrollElement.querySelectorAll('.product-variation__item')?.length < 3) return;\r\n        const selectedItem = scrollElement.querySelector('.product-variation__item--selected') as HTMLElement;\r\n        if(!selectedItem) return;\r\n\r\n        const scrollDistance = selectedItem.offsetLeft - (scrollElement.offsetLeft + selectedItem.offsetWidth);\r\n        this.scrollElement(scrollElement, scrollDistance);\r\n    }\r\n\r\n    private checkProductVariantsArrows(productVariant: HTMLElement, nextBtn: HTMLElement, prevBtn: HTMLElement): void {\r\n        const isEndScrollReached =\r\n            productVariant.scrollLeft + productVariant.offsetWidth >= productVariant.scrollWidth;\r\n\r\n        productVariant.scrollLeft == 0\r\n            ? addClass(prevBtn, \"nx-arrow--hidden\")\r\n            : removeClass(prevBtn, \"nx-arrow--hidden\");\r\n\r\n        isEndScrollReached\r\n            ? addClass(nextBtn, \"nx-arrow--hidden\")\r\n            : removeClass(nextBtn, \"nx-arrow--hidden\");\r\n    }\r\n\r\n    private scrollElement(element: HTMLElement, valueToScroll: number): void {\r\n        element.scrollBy({\r\n            top: 0,\r\n            left: valueToScroll,\r\n            behavior: \"smooth\",\r\n        });\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(\r\n        (element: Node) => ({ nodeToReplace: element, nodeOrigin: element.cloneNode(true) })\r\n    );\r\n\r\n    ProductAttributeSelector.setup(moduleSelector);\r\n\r\n    module.hot.accept(() => {\r\n        ProductAttributeSelector.setup(moduleSelector);\r\n    });\r\n    module.hot.dispose(() => {\r\n        nodesCache.forEach(({ nodeToReplace, nodeOrigin }) => {\r\n            nodeToReplace = nodeToReplace.parentElement.replaceChild(\r\n                nodeOrigin.cloneNode(true),\r\n                nodeToReplace\r\n            );\r\n        });\r\n    });\r\n} else {\r\n    ProductAttributeSelector.setup(moduleSelector);\r\n}\r\n"],"names":["moduleSelector","ProductAttributeSelector","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","this","init","productVariants","variant","classList","contains","isDropDownVariant","isExpanderVariant","isSlideVariant","initProductVariantWithSlide","initProductVariantWithExpander","initProductVariantWithDropdown","variantElement","dropDownCheckBox","closest","querySelector","dropDownHasOnlyOneElement","displayAsSingleElement","closeDropDownOnOutsideClick","body","addEventListener","event","setClickOutside","childElementCount","add","dropDownCheckBoxButton","dropDownElement","target","checked","productVariantExpanderToggleButtons","productVariationItems","setMaxHeight","style","maxHeight","Math","max","map","item","getBoundingClientRect","height","NiveaX","addToEventStore","window","addClickListenersToExpanderBtns","addExpanderTransitionedListener","handleSelectedOnLoad","index","click","e","handleExpanderButtonOnTransition","btn","preventDefault","toggle","expanderBtn","isVariantExpanded","display","productVariantWithSlide","productVariantWithSlideScrollbar","nextBtn","prevBtn","scrollElement","checkProductVariantsArrows","scrollToSelectedOnLoad","length","selectedItem","scrollDistance","offsetLeft","offsetWidth","productVariant","isEndScrollReached","scrollLeft","scrollWidth","valueToScroll","scrollBy","top","left","behavior"],"sourceRoot":""}