{"version":3,"sources":["archive/product/variant-selector-provider/dropdown-variant-selector-v4.ts"],"names":["arraysAreEqual","html","repeat","UnlistedListVariantSelectorBase","ProductApi","$","window","jQuery","DropDownVariantSelectorV4","constructor","name","selectorContainerElement","product","variantTypeId","translations","showPricesInclVat","loadAdditionalInfo","super","this","IMAGE_WIDTH","IMAGE_MODE","_isOneTypeVariant","_productApi","_valuesToFill","Array","template","variantSelectorData","id","variants","length","labels","select","variantTypeName","variant","_variantTypeToCurrentValueMap","Map","variantTypes","map","variantType","document","on","VARIANT_CHANGED_EVENT","_onVariantChanged","bind","getDataBeforeRender","Date","valueOf","toLowerCase","sortVariants","get","changeSelection","processAfterRender","self","getVariantsShortInfo","productId","then","response","_variantsShortInfo","_fillVariantsInfo","_checkValuesToFill","Promise","setTimeout","r","ms","evt","newVariantValue","isSelectedOptionAvailable","otherVariantTypeToValueMap","has","set","entries","filter","x","values","every","variantValue","otherSelectedValues","push","option","querySelector","querySelectorAll","selectedVariantValue","parseInt","dataset","value","selectedVariantValues","variantProduct","variantProducts","find","let","imageUrl","includes","variantName","variantShortInfo","variantShortInfoList","variantValues","getAttribute","innerHTML","discountPercent","classList","add","priceString","stockCssClass","stockText","isOutlet","setAttribute","remove","forEach","valuesToFill"],"mappings":"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","file":"dropdown-variant-selector-v4.js","sourcesContent":["import { arraysAreEqual } from \"../../../../components-shared/utils/array-utils.js\";\r\nimport { html } from 'lit-html';\r\nimport { repeat } from 'lit-html/directives/repeat';\r\nimport { IProductWithVariants, IVariant, IVariantType } from './variant-selector-base.js';\r\nimport { UnlistedListVariantSelectorBase } from \"./unlisted-list-variant-selector-base.js\";\r\nimport { ProductApi } from \"../../../api/archive/product/product-api.js\"\r\nimport { IVariantShortInfoResponse } from '../../../api/archive/product/interfaces/i-variant-short-info-response.js';\r\n\r\nconst $ = window.jQuery;\r\n\r\nexport class DropDownVariantSelectorV4 extends UnlistedListVariantSelectorBase {\r\n    private IMAGE_WIDTH = 56;\r\n    private IMAGE_MODE = \"crop=none\";\r\n    private _variantTypeToCurrentValueMap: Map<number, number>;\r\n    private _isOneTypeVariant: boolean = false;\r\n    private _productApi: ProductApi = new ProductApi();\r\n    private _variantsShortInfo: IVariantShortInfoResponse;\r\n    private _valuesToFill: Array<Array<number>> = new Array<Array<number>>();\r\n\r\n    constructor(name: string, selectorContainerElement: HTMLElement, product: IProductWithVariants, variantTypeId: number, translations: Map<string, string>, showPricesInclVat: boolean, loadAdditionalInfo: boolean) {\r\n        super(name, 1, selectorContainerElement, product, variantTypeId, translations, showPricesInclVat, loadAdditionalInfo);\r\n\r\n        this._variantTypeToCurrentValueMap = new Map(this.product.variantTypes.map((variantType) => [variantType.id, 0]));\r\n        this._isOneTypeVariant = this.product.variantTypes.length <= 1;\r\n\r\n        $(document).on(this.VARIANT_CHANGED_EVENT, this._onVariantChanged.bind(this));\r\n    }\r\n\r\n    protected template = () => html`\r\n        <label class=\"c-variant-selector__label\" for=\"${this.variantSelectorData.id}\">${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : '' } ${this.variantSelectorData.variantTypeName}</label>\r\n        <div class=\"dropdown\">\r\n            <button class=\"dropdown-toggle\" type=\"button\" id=\"dropdown-${this.variantSelectorData.id}\" data-bs-offset=\"0,0\" data-bs-display=\"static\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-toggle=\"dropdown\"  aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                ${this.variantSelectorData.labels.select}...\r\n            </button>\r\n            <ul id=\"${this.variantSelectorData.id}\" class=\"dropdown-menu\" aria-labelledby=\"dropdown-${this.variantSelectorData.id}\">\r\n                ${repeat(this.variantSelectorData.variants, (variant:IVariant) => html`\r\n                    <li>\r\n                        <button class=\"dropdown-item\" data-value=\"${variant.id}\" data-name=\"${variant.name}\" type=\"button\">\r\n                        ${variant.name}\r\n                        </button>\r\n                    </li>`\r\n                )}\r\n            </ul>\r\n        </div>`;\r\n\r\n     protected getDataBeforeRender() {\r\n        return {\r\n            id: new Date().valueOf() + '_vt' + this.variantType.id,\r\n            variantTypeName: this.variantType.name.toLowerCase(),\r\n            variants: this.sortVariants(this.selectorContainerElement, this.variantType.variants, this.product),\r\n            labels: { select: this.translations.get('selectVariantPrefix'), changeSelection: this.translations.get('changeSelectionVariantPrefix') }\r\n        };\r\n    }\r\n\r\n    protected processAfterRender() {\r\n        super.processAfterRender();\r\n        const self = this;\r\n\r\n        if(this.loadAdditionalInfo){\r\n            this._productApi.getVariantsShortInfo(this.product.productId).then(response => {\r\n                self._variantsShortInfo = response;\r\n                if(self._isOneTypeVariant){\r\n                    self._fillVariantsInfo();\r\n                } else {\r\n                    self._checkValuesToFill();\r\n                }\r\n            });\r\n        } else {\r\n            // wait until render\r\n            const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\r\n            sleep(500).then(() => {\r\n                if(self._isOneTypeVariant){\r\n                    self._fillVariantsInfo();\r\n                } else {\r\n                    self._checkValuesToFill();\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    private _onVariantChanged(evt: CustomEvent, variantType: IVariantType, newVariantValue: number, isSelectedOptionAvailable: boolean, productId: number){\r\n        if(this.product.productId !== productId || this._isOneTypeVariant || !this._variantTypeToCurrentValueMap.has(variantType.id)){\r\n            return;\r\n        }\r\n\r\n        this._variantTypeToCurrentValueMap.set(variantType.id, newVariantValue);\r\n        const otherVariantTypeToValueMap = new Map([...this._variantTypeToCurrentValueMap.entries()].filter(x => x[0] !== this.variantType.id));\r\n        const allOtherValuesSelected = [...otherVariantTypeToValueMap.values()].every(variantValue => variantValue > 0);\r\n\r\n        if(allOtherValuesSelected){\r\n            this._fillVariantsInfo([...otherVariantTypeToValueMap.values()]);\r\n        }\r\n    }\r\n\r\n    private _fillVariantsInfo(otherSelectedValues: Array<number> = null): void {\r\n        if(this.loadAdditionalInfo && !this._variantsShortInfo){\r\n            this._valuesToFill.push(otherSelectedValues);\r\n            return;\r\n        }\r\n\r\n        const select = this.selectorContainerElement.querySelector('ul') as unknown as HTMLSelectElement;\r\n\r\n        for (const option of select.querySelectorAll('button')) {\r\n            const selectedVariantValue = parseInt(option.dataset.value);\r\n            if(!selectedVariantValue){\r\n                continue;\r\n            }\r\n\r\n            const selectedVariantValues = [selectedVariantValue];\r\n\r\n            if(otherSelectedValues !== null) {\r\n                selectedVariantValues.push(...otherSelectedValues);\r\n            }\r\n\r\n            const variantProduct = this.product.variantProducts.find(variantProduct => arraysAreEqual(variantProduct.variants, selectedVariantValues))\r\n\r\n            if(!variantProduct){\r\n                continue;\r\n            }\r\n\r\n            let imageUrl:string = null;\r\n            if(variantProduct.imageUrl){\r\n                if(variantProduct.imageUrl.includes('?')){\r\n                    imageUrl = `${variantProduct.imageUrl}&width=${this.IMAGE_WIDTH}&${this.IMAGE_MODE}`;\r\n                } else {\r\n                    imageUrl = `${variantProduct.imageUrl}?width=${this.IMAGE_WIDTH}&${this.IMAGE_MODE}`;\r\n                }\r\n            }\r\n\r\n            const variantShortInfo = this._variantsShortInfo?.variantShortInfoList.find(variantShortInfo => arraysAreEqual(variantShortInfo.variantValues, selectedVariantValues));\r\n            if(variantShortInfo){\r\n                const variantName = option.getAttribute('data-name');\r\n                if(imageUrl){\r\n                    option.innerHTML = `<div><img src=\" ${imageUrl}\"/><span class=\"title\">${variantName}</span></div>`;\r\n                }\r\n\r\n                if(variantShortInfo.discountPercent > 0) {\r\n                    option.classList.add(\"dropdown-item-discount\");\r\n                    option.innerHTML += `<div><div class=\"info\"><span class=\"discount\">-${variantShortInfo.discountPercent}%</span><strong class=\"price\">${variantShortInfo.priceString}</strong></div><span class=\"c-product-status ${variantProduct.stockCssClass}\">${variantProduct.stockText}</span></div>`;\r\n                } else {\r\n                    option.innerHTML += `<div><div class=\"info\"><strong class=\"price\">${variantShortInfo.priceString}</strong></div><span class=\"c-product-status ${variantProduct.stockCssClass}\">${variantProduct.stockText}</span></div>`;\r\n                }\r\n\r\n                if(variantShortInfo.isOutlet){\r\n                    option.querySelector(\".info\").setAttribute(\"data-outlet\",  this.translations.get('outlet'));\r\n                    option.classList.add(\"dropdown-item-is-outlet\");\r\n                }\r\n                if(variantProduct.stockCssClass === \"sold-out\") {\r\n                    option.classList.add(\"dropdown-item-sold-out\");\r\n                } else {\r\n                    option.classList.remove(\"dropdown-item-sold-out\");\r\n                }\r\n            } else {\r\n                const variantName = option.getAttribute('data-name');\r\n                if(imageUrl){\r\n                    option.innerHTML = `<div><img src=\" ${imageUrl}\"/><span class=\"title\">${variantName}</span></div>`;\r\n                }\r\n\r\n                option.innerHTML += `<div><div class=\"info\"></div><span class=\"c-product-status ${variantProduct.stockCssClass}\">${variantProduct.stockText}</span></div>`;\r\n\r\n                if(variantProduct.stockCssClass === \"sold-out\") {\r\n                    option.classList.add(\"dropdown-item-sold-out\");\r\n                } else {\r\n                    option.classList.remove(\"dropdown-item-sold-out\");\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private _checkValuesToFill(){\r\n        const self = this;\r\n        self._valuesToFill.forEach((valuesToFill: Array<number>) => {\r\n            self._fillVariantsInfo(valuesToFill);\r\n        })\r\n        this._valuesToFill = null;\r\n    }\r\n}\r\n"]}