{"version":3,"sources":["archive/product/variant-selector-provider/tiles-variant-selector-v2.ts"],"names":["html","repeat","ProductApi","TilesVariantSelectorBase","createElementFromHTML","TilesVariantSelectorV2Outlet","constructor","this","_productApi","template","variantSelectorData","variants","length","labels","select","variantTypeName","variant","id","name","getDataBeforeRender","variantType","toLowerCase","sortVariants","selectorContainerElement","product","translations","get","changeSelection","processAfterRender","super","self","_regularCaptionDivElement","querySelector","style","display","_regularSelectorDivElement","_outletCaptionDivElement","_outletSelectorDivElement","loadAdditionalInfo","getVariantsShortInfo","productId","then","_variantsShortInfo","variantsShortInfo","_processOutletVariants","_isOutlet","variantId","variantShortInfoList","some","v","variantValues","value","isOutlet","_isOutletVariantsExists","removeProperty","removeChild","querySelectorAll","forEach","parseInt","variantButton","getAttribute","outletVariantButton","appendChild","variantShortInfo","find","includes","discountPercent","percentSpan"],"mappings":"OAASA,SAAqB,kBACrBC,WAAc,oCACdC,eAAkB,qDAElBC,6BAAgC,0CAGhCC,0BAA6B,oCAEzBC,qCAAqCF,yBAAlDG,c,oBACYC,KAAAC,YAA0B,IAAIN,WAO5BK,KAAAE,SAAW,IAAMT;;qDAEiE,EAA3CO,KAAKG,oBAAoBC,SAASC,OAAaL,KAAKG,oBAAoBG,OAAOC,OAAS,MAAOP,KAAKG,oBAAoBK;;;UAGnKd,OAAOM,KAAKG,oBAAoBC,SAAU,GAAuBX;8FACmBgB,EAAQC;qDACjDD,EAAQE;;;;;;;;oEAQkD,EAA3CX,KAAKG,oBAAoBC,SAASC,OAAaL,KAAKG,oBAAoBG,OAAOC,OAAS,MAAOP,KAAKG,oBAAoBK;;;;MAM9KI,sBACN,MAAO,CACHJ,gBAAiBR,KAAKa,YAAYF,KAAKG,cACvCV,SAAUJ,KAAKe,aAAaf,KAAKgB,yBAA0BhB,KAAKa,YAAYT,SAAUJ,KAAKiB,SAC3FX,OAAQ,CAAEC,OAAQP,KAAKkB,aAAaC,IAAI,uBAAwBC,gBAAiBpB,KAAKkB,aAAaC,IAAI,kCAIrGE,qBACNC,MAAMD,qBACN,MAAME,EAAOvB,KAEbA,KAAKwB,0BAA4BxB,KAAKgB,yBAAyBS,cAAc,uBAC7EzB,KAAKwB,0BAA0BE,MAAMC,QAAU,OAC/C3B,KAAK4B,2BAA6B5B,KAAKgB,yBAAyBS,cAAc,wBAC9EzB,KAAK4B,2BAA2BF,MAAMC,QAAU,OAChD3B,KAAK6B,yBAA2B7B,KAAKgB,yBAAyBS,cAAc,sBAC5EzB,KAAK6B,yBAAyBH,MAAMC,QAAU,OAC9C3B,KAAK8B,0BAA4B9B,KAAKgB,yBAAyBS,cAAc,uBAC7EzB,KAAK8B,0BAA0BJ,MAAMC,QAAU,OAE5C3B,KAAK+B,mBACJ/B,KAAKC,YAAY+B,qBAAqBhC,KAAKiB,QAAQgB,WAAWC,KAAK,IAC/DX,EAAKY,mBAAqBC,EAC1Bb,EAAKc,2BAGTd,EAAKc,yBAILC,UAAUC,GACd,SAAIvC,KAAKmC,oBAA8E,IAAxDnC,KAAKmC,mBAAmBK,qBAAqBnC,SAIrEL,KAAKmC,mBAAmBK,qBAAqBC,KAAK,GAA0BC,EAAEC,cAAcF,KAAKG,GAASA,IAAUL,IAAcG,EAAEG,UAGvIC,0BACJ,SAAI9C,KAAKmC,oBAA8E,IAAxDnC,KAAKmC,mBAAmBK,qBAAqBnC,SAIrEL,KAAKmC,mBAAmBK,qBAAqBC,KAAK,GAA0BC,EAAEG,UAGjFR,yBACJrC,KAAKwB,0BAA0BE,MAAMqB,eAAe,WACpD/C,KAAK4B,2BAA2BF,MAAMqB,eAAe,WAEjD/C,KAAK8C,4BACL9C,KAAKgB,yBAAyBgC,YAAYhD,KAAK6B,0BAC/C7B,KAAKgB,yBAAyBgC,YAAYhD,KAAK8B,4BAGnD9B,KAAK4B,2BAA2BqB,iBAAiB,UAAUC,QAAQ,IAC/D,MAAMX,EAAYY,SAASC,EAAcC,aAAa,mBACnDrD,KAAKsC,UAAUC,KACRe,EAAsBtD,KAAK4B,2BAA2BoB,YAAYI,GACxEpD,KAAK8B,0BAA0ByB,YAAYD,IAF/C,IAIME,EAAmBxD,KAAKmC,oBAAoBK,qBAAqBiB,KAAKD,GAAoBA,EAAiBb,cAAce,SAASnB,IACrIiB,GAAuD,EAAnCA,EAAiBG,kBAC9BC,EAAc/D,sBAAsB,mDAC1CuD,EAAcG,YAAYK,MAIlC5D,KAAK6B,yBAAyBH,MAAMqB,eAAe,WACnD/C,KAAK8B,0BAA0BJ,MAAMqB,eAAe,mBAnG/CjD","file":"tiles-variant-selector-v2.js","sourcesContent":["import { html, nothing } from 'lit-html';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { ProductApi } from \"../../../api/archive/product/product-api.js\"\nimport { IVariantShortInfoResponse } from '../../../api/archive/product/interfaces/i-variant-short-info-response.js';\nimport { TilesVariantSelectorBase } from \"./tiles-variant-selector-base.js\";\nimport { IVariant } from './variant-selector-base.js';\nimport { IVariantShortInfo } from '../../../api/archive/product/interfaces/i-variant-short-info.js';\nimport { createElementFromHTML } from '../../../utils/dom_tools.js';\n\nexport class TilesVariantSelectorV2Outlet extends TilesVariantSelectorBase {\n    private _productApi: ProductApi = new ProductApi();\n    private _variantsShortInfo: IVariantShortInfoResponse;\n    private _regularCaptionDivElement: HTMLDivElement;\n    private _regularSelectorDivElement: HTMLDivElement;\n    private _outletCaptionDivElement: HTMLDivElement;\n    private _outletSelectorDivElement: HTMLDivElement;\n\n    protected template = () => html`\n        <div class=\"c-tilesvariant2-term-definition ts-regular-caption\">\n            <label class=\"js-select-variant-label\">${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : '' } ${this.variantSelectorData.variantTypeName}</label>\n        </div>\n        <div class=\"c-tilesvariant2-list ts-regular-selector\">\n        ${repeat(this.variantSelectorData.variants, (variant: IVariant) => html`\n            <button type=\"button\" class=\"c-tilesvariant2-option js-variant\" data-variantid=\"${variant.id}\">\n                <span class=\"c-tilesvariant2-name\">${variant.name}</span>\n                <div class=\"c-tilesvariant2-unavailable-text js-unavailable-text-container\" style=\"display:none;\">\n                    <span class=\"c-tilesvariant2-unavailable-text-label js-unavailable-text\"></span>\n                </div>\n            </button>\n        `)}\n        </div>\n        <div class=\"c-tilesvariant2-term-definition ts-outlet-caption\">\n            <label>Outlet / <span class=\"js-select-variant-label\">${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : '' } ${this.variantSelectorData.variantTypeName}</span></label>\n        </div>\n        <div class=\"c-tilesvariant2-list ts-outlet-selector\">\n        </div>\n    `;\n\n    protected getDataBeforeRender() {\n        return {\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(): void {\n        super.processAfterRender();\n        const self = this;\n\n        this._regularCaptionDivElement = this.selectorContainerElement.querySelector('.ts-regular-caption') as HTMLDivElement;\n        this._regularCaptionDivElement.style.display = 'none';\n        this._regularSelectorDivElement = this.selectorContainerElement.querySelector('.ts-regular-selector') as HTMLDivElement;\n        this._regularSelectorDivElement.style.display = 'none';\n        this._outletCaptionDivElement = this.selectorContainerElement.querySelector('.ts-outlet-caption') as HTMLDivElement;\n        this._outletCaptionDivElement.style.display = 'none';\n        this._outletSelectorDivElement = this.selectorContainerElement.querySelector('.ts-outlet-selector') as HTMLDivElement;\n        this._outletSelectorDivElement.style.display = 'none';\n\n        if(this.loadAdditionalInfo){\n            this._productApi.getVariantsShortInfo(this.product.productId).then((variantsShortInfo) => {\n                self._variantsShortInfo = variantsShortInfo;\n                self._processOutletVariants();\n            });\n        } else {\n            self._processOutletVariants();\n        }\n    }\n\n    private _isOutlet(variantId: number): boolean {\n        if(!this._variantsShortInfo || this._variantsShortInfo.variantShortInfoList.length === 0){\n            return false;\n        }\n\n        return this._variantsShortInfo.variantShortInfoList.some((v: IVariantShortInfo) => v.variantValues.some(value => value === variantId) && v.isOutlet);\n    }\n\n    private _isOutletVariantsExists(): boolean {\n        if(!this._variantsShortInfo || this._variantsShortInfo.variantShortInfoList.length === 0){\n            return false;\n        }\n\n        return this._variantsShortInfo.variantShortInfoList.some((v: IVariantShortInfo) => v.isOutlet);\n    }\n\n    private _processOutletVariants() {\n        this._regularCaptionDivElement.style.removeProperty('display');\n        this._regularSelectorDivElement.style.removeProperty('display');\n\n        if(!this._isOutletVariantsExists()){\n            this.selectorContainerElement.removeChild(this._outletCaptionDivElement);\n            this.selectorContainerElement.removeChild(this._outletSelectorDivElement);\n        }\n\n        this._regularSelectorDivElement.querySelectorAll('button').forEach((variantButton: HTMLButtonElement) => {\n            const variantId = parseInt(variantButton.getAttribute('data-variantid'));\n            if(this._isOutlet(variantId)){\n                const outletVariantButton = this._regularSelectorDivElement.removeChild(variantButton);\n                this._outletSelectorDivElement.appendChild(outletVariantButton);\n            }\n            const variantShortInfo = this._variantsShortInfo?.variantShortInfoList.find(variantShortInfo => variantShortInfo.variantValues.includes(variantId));\n            if(variantShortInfo && variantShortInfo.discountPercent > 0){\n                const percentSpan = createElementFromHTML('<span class=\"c-tilesvariant2-discount\">%</span>');\n                variantButton.appendChild(percentSpan);\n            }\n        });\n\n        this._outletCaptionDivElement.style.removeProperty('display');\n        this._outletSelectorDivElement.style.removeProperty('display');\n    }\n}\n"]}