{"version":3,"file":"SwatchesGrouped.js","names":["SwatchesGrouped","a","setters","Swatches","default","on","off","trigger","deepMerge","execute","constructor","element","options","arguments","length","templateName","reloadOnProductUpdate","changeImageOnHover","changeImageOnSelectSwatch","dataModelId","viewAllSwatchesThreshold","showViewAll","classNames","selected","hidden","initCache","selectors","swatchesGroup","querySelectorAll","swatchesToggler","initState","state","selectedTabID","selectedTab","isSwatchesVisible","bindEvents","onTabChanged","bind","onSwatchTogglerClick","event","targetElement","currentTarget","swatches","closest","classList","remove","setAttribute","hideSwatches","add","showSwatches","bubbles","forEach","swatch","index","classes","e","detail","tabID","getVariationModel","data","getDataForRendering","contains","showToggle","dataOptions","Object","keys","groupedSwatches","isSelected","destroy"],"sources":["components/product/SwatchesGrouped.js"],"sourcesContent":["import Swatches from './Swatches';\nimport { on, off, trigger } from 'toolbox/event';\nimport { deepMerge } from 'toolbox/deepMerge';\n\n/**\n * This is a description of the SwatchesGrouped constructor function.\n * @class\n * @classdesc This is a description of the SwatchesGrouped class.\n * @extends Component\n */\nexport default class SwatchesGrouped extends Swatches {\n    /**\n     * @typedef {Object} optionsObject\n     * @property {String} dataModelId - the data model name needed to render the component on client side.\n     * @property {Boolean} reloadOnProductUpdate - if true, this component will be reloaded on \"product.updated\" event.\n     *                                             Please refer product/Product component for more info.\n     * @property {Boolean} changeImageOnHover - if true, then trigger an event on hover on swatch to switch product image\n     * @property {Object} classNames\n     */\n\n    /**\n     * @constructor\n     * @param {HTMLElement} element Component DOM node\n     * @param {optionsObject} options - Component Options\n     */\n    constructor(element, options = {}) {\n        super(element, deepMerge({\n            templateName: 'product/swatchesgrouped',\n            reloadOnProductUpdate: true,\n            changeImageOnHover: true,\n            changeImageOnSelectSwatch: true,\n            dataModelId: 'swatchesgrouped',\n            viewAllSwatchesThreshold: 24, // count of swatches that will be shown in case if option showViewAll is true\n            showViewAll: false, // add `View all` button to show/hide swatches based on viewAllSwatchesThreshold option\n            classNames: {\n                selected: 'm-selected',\n                hidden: 'h-hidden',\n            },\n        }, options));\n    }\n\n    /**\n     * All selectors must be cached. Never cache elements that are out of the component scope\n     */\n    initCache() {\n        super.initCache();\n        this.selectors.swatchesGroup = this.element.querySelectorAll('[data-js-swatches-grouped-panel]');\n        this.selectors.swatchesToggler = this.element.querySelectorAll('[data-js-swatches-grouped-view-all]');\n    }\n\n    /**\n     * Init the different state of the component\n     * It helps to avoid heavy DOM manipulation\n     */\n    initState() {\n        super.initState();\n        this.state.selectedTabID = this.options.selectedTab;\n        this.state.isSwatchesVisible = false;\n    }\n\n    /**\n     * Should contain only event listeners and nothing else\n     * All the event handlers should be into a separated function. No usage of anonymous function\n     */\n    bindEvents() {\n        super.bindEvents();\n        on('tab.opened', this.element, this.onTabChanged.bind(this));\n        if (this.options.showViewAll && this.selectors.swatchesToggler) {\n            on('click', this.selectors.swatchesToggler, this.onSwatchTogglerClick.bind(this));\n        }\n    }\n\n    /**\n     * Click event handler\n     * @param {Object} event - Event object\n     */\n    onSwatchTogglerClick(event) {\n        const targetElement = event.currentTarget;\n        const swatches = targetElement.closest('[data-js-swatches-grouped-panel]').querySelectorAll('[data-js-swatch]');\n        if (swatches) {\n            if (this.state.isSwatchesVisible) {\n                targetElement.classList.remove('m-active');\n                targetElement.setAttribute('aria-expanded', 'false');\n                this.hideSwatches(swatches);\n            } else {\n                targetElement.classList.add('m-active');\n                targetElement.setAttribute('aria-expanded', 'true');\n                this.showSwatches(swatches);\n            }\n            trigger('accordion.update', this.element, { bubbles: true });\n        }\n    }\n\n    /**\n     * Hide swatches\n     * @param {Array} swatches - Swatches list to hide\n     */\n    hideSwatches(swatches) {\n        if (!swatches) {\n            return;\n        }\n        this.state.isSwatchesVisible = false;\n        swatches.forEach((swatch, index) => {\n            if (index >= this.options.viewAllSwatchesThreshold) {\n                swatch.classList.add(this.classes.hidden);\n            }\n        });\n    }\n\n    /**\n     * Show swatches\n     * @param {Array} swatches - Swatches list to hide\n     */\n    showSwatches(swatches) {\n        if (!swatches) {\n            return;\n        }\n        this.state.isSwatchesVisible = true;\n        swatches.forEach((swatch, index) => {\n            if (index >= this.options.viewAllSwatchesThreshold) {\n                swatch.classList.remove(this.classes.hidden);\n            }\n        });\n    }\n\n    /**\n     * Updates state on tab opened event.\n     *\n     * @param {Object} e - Event object\n     */\n    onTabChanged(e) {\n        this.state.selectedTabID = e.detail.tabID;\n    }\n\n    /**\n     * Get varaition data model\n     * @param {Object} data - data\n     * @returns {Object} data\n     */\n    getVariationModel(data) {\n        return this.getDataForRendering(data);\n    }\n\n    /**\n     * Returns modified data model to reload component with saved state.\n     *\n     * @param {Object} data original data model for template rendering\n     * @returns {Promise} data\n     */\n    getDataForRendering(data) {\n        data.hidden = this.element.classList.contains(this.options.classNames.hidden);\n        data.showToggle = false;\n        data.dataOptions.selectedTab = this.state.selectedTabID;\n        Object.keys(data.groupedSwatches).forEach((tabID) => {\n            data.groupedSwatches[tabID].isSelected = tabID === this.state.selectedTabID;\n        });\n        return data;\n    }\n\n    /**\n     * Destroy is called automatically after the component is being removed from the DOM\n     * You must always destroy the listeners attached to an element to avoid any memory leaks\n     */\n    destroy() {\n        super.destroy();\n        off('tab.opened', this.element);\n    }\n}\n"],"mappings":"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","ignoreList":[]}