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