{"version":3,"file":"./modules/Tabs.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/Tabs.ts"],"sourcesContent":["import { addClass, hasClass, removeClass } from \"../helpers/DOMHelpers\";\r\nimport { debounce, requestAnimationFrameTimer } from \"../helpers/helperFunctions\";\r\nimport { getOptions } from '../helpers/helperFunctions';\r\n\r\nconst moduleSelector = '[data-module=\"Tabs\"]';\r\n\r\nexport default class Tabs {\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 Tabs(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    protected state: any;\r\n    protected options: TabOptions;\r\n\r\n    constructor(public element: HTMLElement, options = {}) {\r\n        this.options = getOptions(this.element, Object.assign(this.getDefaultOptions(), options));\r\n\r\n        this.init();\r\n    }\r\n\r\n    init() {\r\n        this.state = {\r\n            accordionVersion: window.innerWidth < 1024\r\n        };\r\n\r\n        this.bindEventHandlers();\r\n        this.isTabVersion() ? this.openFirstTabItem() : this.closeAllOpenedTabs();\r\n    }\r\n\r\n    private onResize(): void {\r\n        let isAccordion = window.innerWidth < 1024;\r\n\r\n        if (isAccordion != this.state.accordionVersion) {\r\n            this.closeAllOpenedTabs();\r\n\r\n            if (!isAccordion) {\r\n                this.closeAllOpenedAccordions()\r\n                    .openFirstTabItem();\r\n            }\r\n\r\n            this.state.accordionVersion = !this.state.accordionVersion;\r\n        }\r\n    }\r\n\r\n    private closeAllOpenedTabs(): void {\r\n        const activeTabsTitles = this.element.querySelectorAll(`.${this.options.tabTitleActiveClass}`),\r\n            activeTabsContainers = this.element.querySelectorAll(`.${this.options.tabContentActiveClass}`);\r\n\r\n        activeTabsTitles.forEach(element => {\r\n            element.classList.remove(this.options.tabTitleActiveClass);\r\n        });\r\n\r\n        activeTabsContainers.forEach(element => {\r\n            element.classList.remove(this.options.tabContentActiveClass);\r\n        });\r\n\r\n    }\r\n\r\n    private closeAllOpenedAccordions(): Tabs {\r\n        const getAccordions = this.element.querySelectorAll<HTMLElement>(`.${this.options.accordionContentSelector}`);\r\n\r\n        getAccordions.forEach((element) => {\r\n            element.style.height = 0 + 'px';\r\n        });\r\n\r\n        return this;\r\n    }\r\n\r\n    private openFirstTabItem(): Tabs {\r\n        const firstTabTitle = this.element.querySelector('.nx-tab'),\r\n            firstTabContent = this.element.querySelector(`.${this.options.tabContentSelector}`);\r\n\r\n        this.showTab(firstTabTitle, firstTabContent);\r\n\r\n        return this\r\n    }\r\n\r\n    private bindEventHandlers() {\r\n        Array.from(this.element.querySelectorAll(`.${this.options.tabTitleSelector}`)).forEach((element: HTMLElement) => {\r\n            element.addEventListener('click', (event) => this.onTabTitleClick(event))\r\n        });\r\n\r\n        window.addEventListener('resize', debounce(() => this.onResize(), 350));\r\n    }\r\n\r\n    onTabTitleClick(event) {\r\n        let target = <HTMLElement>event.currentTarget,\r\n            tabTitle = target.parentElement,\r\n            tabId = tabTitle.getAttribute('data-id'),\r\n            tabContainer = this.element.querySelector(`#${tabId}`);\r\n\r\n        if (hasClass(tabTitle, this.options.tabTitleActiveClass) && this.isTabVersion())\r\n            return;\r\n\r\n        if (this.isTabVersion()) {\r\n            this.hidePreviousTab();\r\n            this.showTab(tabTitle, tabContainer);\r\n            this.animateBackground();\r\n        } else {\r\n            this.triggerAccordion(tabTitle);\r\n        }\r\n    }\r\n\r\n    private isTabVersion(): boolean {\r\n        return this.state.accordionVersion === false;\r\n    }\r\n\r\n    private triggerAccordion(target) {\r\n        if (!hasClass(target, this.options.tabTitleActiveClass)) {\r\n            this.openAccordionItem(target)\r\n        }\r\n        else {\r\n            this.closeAccordionItem(target)\r\n        }\r\n    }\r\n\r\n    private openAccordionItem(target) {\r\n        const accordionContent = <HTMLElement>target.querySelector(`.${this.options.accordionContentSelector}`),\r\n            children = accordionContent.children.length ? <HTMLCollection>accordionContent.children : null,\r\n            accordionHeight = (children == null) ? 0 : this.calculateHeight(children);\r\n\r\n        addClass(target, this.options.tabTitleActiveClass);\r\n        accordionContent.style.height = accordionHeight + 'px';\r\n    }\r\n\r\n    private calculateHeight(children: HTMLCollection): number {\r\n        let height = 0;\r\n\r\n        Array.from(children).forEach(element => {\r\n            height += element.clientHeight;\r\n        });\r\n\r\n        return height;\r\n    }\r\n\r\n\r\n    private closeAccordionItem(target): void {\r\n        const accordionContent = <HTMLElement>target.querySelector(`.${this.options.accordionContentSelector}`);\r\n\r\n        removeClass(target, this.options.tabTitleActiveClass);\r\n        accordionContent.style.height = 0 + 'px';\r\n    }\r\n\r\n    private showTab(tabTitle, tabContainer) {\r\n        addClass(tabTitle, this.options.tabTitleActiveClass);\r\n        addClass(tabContainer, this.options.tabContentActiveClass);\r\n    }\r\n\r\n    private hidePreviousTab() {\r\n        const activeTabContainer = <HTMLElement>this.element.querySelector(`.nx-tab-content.${this.options.tabContentActiveClass}`),\r\n            activeTabTitle = <HTMLElement>this.element.querySelector(`.nx-tab.${this.options.tabTitleActiveClass}`);\r\n\r\n        if (activeTabTitle && activeTabContainer) {\r\n            removeClass(activeTabTitle, this.options.tabTitleActiveClass);\r\n            removeClass(activeTabContainer, this.options.tabContentActiveClass);\r\n        }\r\n    }\r\n\r\n    private animateBackground(): void {\r\n        let img = <HTMLElement>this.element.querySelector('.nx-image');\r\n        addClass(img, 'nx-scaled');\r\n\r\n        requestAnimationFrameTimer(() => {\r\n            removeClass(img, 'nx-scaled');\r\n        }, 500);\r\n    }\r\n\r\n    protected getDefaultOptions(): TabOptions {\r\n        return {\r\n            elementSelector: 'nx-tab-module',\r\n            tabTitleSelector: 'nx-tab__title',\r\n            tabTitleActiveClass: 'nx-tab--active',\r\n            tabContentSelector: 'nx-tab-content',\r\n            tabContentActiveClass: 'nx-open',\r\n            accordionContentSelector: 'nx-accordion-content',\r\n        };\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((element: Node) => ({ nodeToReplace: element, nodeOrigin: element.cloneNode(true) }));\r\n\r\n    Tabs.setup(moduleSelector);\r\n\r\n    module.hot.accept(() => {\r\n        Tabs.setup(moduleSelector);\r\n    });\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\r\n} else {\r\n    Tabs.setup(moduleSelector);\r\n}\r\n"],"names":["moduleSelector","Tabs","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","options","this","Object","assign","getDefaultOptions","init","state","accordionVersion","window","innerWidth","bindEventHandlers","isTabVersion","openFirstTabItem","closeAllOpenedTabs","onResize","isAccordion","closeAllOpenedAccordions","activeTabsTitles","tabTitleActiveClass","activeTabsContainers","tabContentActiveClass","classList","remove","accordionContentSelector","style","height","firstTabTitle","querySelector","firstTabContent","tabContentSelector","showTab","tabTitleSelector","addEventListener","event","onTabTitleClick","tabTitle","currentTarget","parentElement","tabId","getAttribute","tabContainer","hidePreviousTab","animateBackground","triggerAccordion","target","closeAccordionItem","openAccordionItem","accordionContent","children","length","accordionHeight","calculateHeight","clientHeight","activeTabContainer","activeTabTitle","img","elementSelector"],"sourceRoot":""}