{"version":3,"file":"./modules/CalculationSlider-CalculationSlider.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/CalculationSlider/CalculationSlider.ts"],"sourcesContent":["import { getChildren } from \"../../helpers/DOMHelpers\";\r\nimport { parseJSONSafe } from \"../../helpers/helperFunctions\";\r\n\r\nconst moduleSelector = '[data-module=\"CalculationSlider\"]';\r\n\r\nexport default class CalculationSlider {\r\n    protected rangeInput: HTMLElement;\r\n    protected itemsWrapper: HTMLElement;\r\n    protected contentArray: NodeListOf<HTMLElement>;\r\n    protected productTeasersWithMarks: [TeaserLink];\r\n    protected teaserRepository: HTMLElement[];\r\n    protected connectedSlider: HTMLElement;\r\n    protected connectedSliderContainer: HTMLElement;\r\n    protected isSmallTeaser: boolean = false;\r\n    protected smallTeaserDataOptions: 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 CalculationSlider(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    constructor(public element: HTMLElement) {\r\n        this.rangeInput = this.element.querySelector(`.nx-range-slider-input`);\r\n        this.contentArray = this.element.querySelectorAll('.nx-range-slider-item');\r\n        this.itemsWrapper = this.element.querySelector('.nx-range-slider-items');\r\n        this.productTeasersWithMarks = parseJSONSafe(this.element.dataset.connectedTeaserSliderJson);\r\n        this.connectedSlider = document.querySelector(`section[data-item-id=\"${this.element.dataset.connectedTeaserSliderId}\"]`);\r\n\r\n        if (this.connectedSlider) {\r\n            const slider = <HTMLElement>this.connectedSlider.querySelector('.nx-slider');\r\n            this.createTeaserRepo(slider);\r\n            this.connectedSliderContainer = this.connectedSlider.querySelector('.nx-u-container');\r\n            this.isSmallTeaser = this.connectedSlider.querySelector('.nx-teasers-slider--small') ? true : false;\r\n            this.smallTeaserDataOptions = this.isSmallTeaser ? slider.getAttribute('data-options') : '';\r\n        }\r\n\r\n        this.init();\r\n    }\r\n\r\n    init() {\r\n        this.rangeInput.addEventListener('niveax:RangeInput', (event: CustomEvent) => this.showActiveContent(event));\r\n        this.itemWrapperWidth();\r\n        this.filterProductsTeasers();\r\n    }\r\n\r\n    private createTeaserRepo(node: HTMLElement): HTMLElement[] {\r\n        return this.teaserRepository = getChildren(node);\r\n    }\r\n\r\n    private filterProductsTeasers() {\r\n        let selectedProductTeasers: HTMLElement[] = [],\r\n            teaserLinks = [];\r\n\r\n        teaserLinks = this.getFilteredLInksWithMarks().map(x => x.Link);\r\n        selectedProductTeasers = this.getSelectedProductTeaser(teaserLinks);\r\n\r\n        if (selectedProductTeasers) {\r\n            this.updateSlider(selectedProductTeasers)\r\n        }\r\n    }\r\n\r\n    private getFilteredLInksWithMarks() {\r\n        const markIds = this.getActiveIds();\r\n        let getDetails: TeaserLink[] = [];\r\n\r\n        if (markIds && this.productTeasersWithMarks && this.productTeasersWithMarks.length) {\r\n            markIds.forEach((id: string, i: number) => {\r\n                const newId = id.toLowerCase().substring(1, id.length - 1),\r\n                    matchedResults = this.productTeasersWithMarks.filter(item => item.Tags.some(tag => tag == newId));\r\n                getDetails = [...getDetails, ...matchedResults];\r\n            })\r\n        }\r\n\r\n        return getDetails;\r\n    }\r\n\r\n    private getSelectedProductTeaser(links) {\r\n        let teasers: HTMLElement[] = [];\r\n\r\n        links.forEach(href => {\r\n            const productTeaser = this.teaserRepository.find(item => item.querySelector(`a[href='${href}']`));\r\n            teasers.push(productTeaser);\r\n        });\r\n\r\n        return teasers;\r\n    }\r\n\r\n    private sliderWrapper(isSmallTeaser: boolean, dataOptions: string): string {\r\n        return `<div class=\"nx-teasers-slider ${isSmallTeaser ? `nx-teasers-slider--small` : ``}\" data-module=\"NivTTeasers\">\r\n                <div class=\"nx-slider\" data-module=\"SliderPagination\" ${isSmallTeaser ? `data-options=${dataOptions}` : ``}>\r\n                </div></div>`;\r\n    }\r\n\r\n    private removeExistingSlider() {\r\n        if (!this.connectedSlider) return\r\n        this.connectedSlider.querySelector('.nx-teasers-slider').remove();\r\n    }\r\n\r\n    private updateSlider(teaser: HTMLElement[]) {\r\n        this.removeExistingSlider();\r\n        this.rebuildSlider(teaser)\r\n        window.NiveaX.initModules();\r\n    }\r\n\r\n    private rebuildSlider(selectedTeasers: HTMLElement[]) {\r\n        if (!this.connectedSlider && !this.connectedSliderContainer) return\r\n\r\n        let slider: HTMLElement;\r\n        this.connectedSliderContainer.insertAdjacentHTML('beforeend', this.sliderWrapper(this.isSmallTeaser, this.smallTeaserDataOptions));\r\n        slider = this.connectedSliderContainer.querySelector('.nx-slider');\r\n\r\n        selectedTeasers ?\r\n            selectedTeasers.forEach(teaser => slider.append(teaser)) : '';\r\n    }\r\n\r\n    private showActiveContent({ detail: { inputValue } }: CustomEvent) {\r\n        this.element.querySelector('.nx-range-slider-item--active').classList.remove('nx-range-slider-item--active');\r\n        this.contentArray[inputValue - 1].classList.add('nx-range-slider-item--active');\r\n\r\n        this.filterProductsTeasers();\r\n    }\r\n\r\n    private getSelectedRangeItem(): HTMLElement {\r\n        return this.element.querySelector('.nx-range-slider-item.nx-range-slider-item--active');\r\n    }\r\n\r\n    private getActiveIds(): [] {\r\n        const getActiveRangeMarkIds: [] = parseJSONSafe(this.getSelectedRangeItem().dataset.markTags);\r\n        return getActiveRangeMarkIds;\r\n    }\r\n\r\n    private itemWrapperWidth(): CalculationSlider {\r\n        this.itemsWrapper.style.width = (this.contentArray.length * 100) + '%';\r\n        return this;\r\n    }\r\n}\r\n\r\ninterface TeaserLink {\r\n    Link: string,\r\n    Tags: [string]\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    new CalculationSlider.setup(moduleSelector);\r\n\r\n    module.hot.accept(() => {\r\n        new CalculationSlider.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    CalculationSlider.setup(moduleSelector)\r\n};"],"names":["moduleSelector","CalculationSlider","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","isSmallTeaser","this","rangeInput","querySelector","contentArray","itemsWrapper","productTeasersWithMarks","connectedTeaserSliderJson","connectedSlider","connectedTeaserSliderId","slider","createTeaserRepo","connectedSliderContainer","smallTeaserDataOptions","getAttribute","init","addEventListener","event","showActiveContent","itemWrapperWidth","filterProductsTeasers","teaserRepository","selectedProductTeasers","teaserLinks","getFilteredLInksWithMarks","map","x","Link","getSelectedProductTeaser","updateSlider","markIds","getActiveIds","getDetails","length","id","i","newId","toLowerCase","substring","matchedResults","item","Tags","some","tag","links","teasers","href","productTeaser","find","push","sliderWrapper","dataOptions","removeExistingSlider","remove","teaser","rebuildSlider","window","NiveaX","initModules","selectedTeasers","insertAdjacentHTML","append","detail","inputValue","classList","add","getSelectedRangeItem","markTags","style","width"],"sourceRoot":""}