{"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":"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","file":"tiles-variant-selector-v2.js","sourcesContent":["import { html, nothing } from 'lit-html';\r\nimport { repeat } from 'lit-html/directives/repeat';\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\nimport { TilesVariantSelectorBase } from \"./tiles-variant-selector-base.js\";\r\nimport { IVariant } from './variant-selector-base.js';\r\nimport { IVariantShortInfo } from '../../../api/archive/product/interfaces/i-variant-short-info.js';\r\nimport { createElementFromHTML } from '../../../utils/dom_tools.js';\r\n\r\nexport class TilesVariantSelectorV2Outlet extends TilesVariantSelectorBase {\r\n    private _productApi: ProductApi = new ProductApi();\r\n    private _variantsShortInfo: IVariantShortInfoResponse;\r\n    private _regularCaptionDivElement: HTMLDivElement;\r\n    private _regularSelectorDivElement: HTMLDivElement;\r\n    private _outletCaptionDivElement: HTMLDivElement;\r\n    private _outletSelectorDivElement: HTMLDivElement;\r\n\r\n    protected template = () => html`\r\n        <div class=\"c-tilesvariant2-term-definition ts-regular-caption\">\r\n            <label class=\"js-select-variant-label\">${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : '' } ${this.variantSelectorData.variantTypeName}</label>\r\n        </div>\r\n        <div class=\"c-tilesvariant2-list ts-regular-selector\">\r\n        ${repeat(this.variantSelectorData.variants, (variant: IVariant) => html`\r\n            <button type=\"button\" class=\"c-tilesvariant2-option js-variant\" data-variantid=\"${variant.id}\">\r\n                <span class=\"c-tilesvariant2-name\">${variant.name}</span>\r\n                <div class=\"c-tilesvariant2-unavailable-text js-unavailable-text-container\" style=\"display:none;\">\r\n                    <span class=\"c-tilesvariant2-unavailable-text-label js-unavailable-text\"></span>\r\n                </div>\r\n            </button>\r\n        `)}\r\n        </div>\r\n        <div class=\"c-tilesvariant2-term-definition ts-outlet-caption\">\r\n            <label>Outlet / <span class=\"js-select-variant-label\">${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : '' } ${this.variantSelectorData.variantTypeName}</span></label>\r\n        </div>\r\n        <div class=\"c-tilesvariant2-list ts-outlet-selector\">\r\n        </div>\r\n    `;\r\n\r\n    protected getDataBeforeRender() {\r\n        return {\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(): void {\r\n        super.processAfterRender();\r\n        const self = this;\r\n\r\n        this._regularCaptionDivElement = this.selectorContainerElement.querySelector('.ts-regular-caption') as HTMLDivElement;\r\n        this._regularCaptionDivElement.style.display = 'none';\r\n        this._regularSelectorDivElement = this.selectorContainerElement.querySelector('.ts-regular-selector') as HTMLDivElement;\r\n        this._regularSelectorDivElement.style.display = 'none';\r\n        this._outletCaptionDivElement = this.selectorContainerElement.querySelector('.ts-outlet-caption') as HTMLDivElement;\r\n        this._outletCaptionDivElement.style.display = 'none';\r\n        this._outletSelectorDivElement = this.selectorContainerElement.querySelector('.ts-outlet-selector') as HTMLDivElement;\r\n        this._outletSelectorDivElement.style.display = 'none';\r\n\r\n        if(this.loadAdditionalInfo){\r\n            this._productApi.getVariantsShortInfo(this.product.productId).then((variantsShortInfo) => {\r\n                self._variantsShortInfo = variantsShortInfo;\r\n                self._processOutletVariants();\r\n            });\r\n        } else {\r\n            self._processOutletVariants();\r\n        }\r\n    }\r\n\r\n    private _isOutlet(variantId: number): boolean {\r\n        if(!this._variantsShortInfo || this._variantsShortInfo.variantShortInfoList.length === 0){\r\n            return false;\r\n        }\r\n\r\n        return this._variantsShortInfo.variantShortInfoList.some((v: IVariantShortInfo) => v.variantValues.some(value => value === variantId) && v.isOutlet);\r\n    }\r\n\r\n    private _isOutletVariantsExists(): boolean {\r\n        if(!this._variantsShortInfo || this._variantsShortInfo.variantShortInfoList.length === 0){\r\n            return false;\r\n        }\r\n\r\n        return this._variantsShortInfo.variantShortInfoList.some((v: IVariantShortInfo) => v.isOutlet);\r\n    }\r\n\r\n    private _processOutletVariants() {\r\n        this._regularCaptionDivElement.style.removeProperty('display');\r\n        this._regularSelectorDivElement.style.removeProperty('display');\r\n\r\n        if(!this._isOutletVariantsExists()){\r\n            this.selectorContainerElement.removeChild(this._outletCaptionDivElement);\r\n            this.selectorContainerElement.removeChild(this._outletSelectorDivElement);\r\n        }\r\n\r\n        this._regularSelectorDivElement.querySelectorAll('button').forEach((variantButton: HTMLButtonElement) => {\r\n            const variantId = parseInt(variantButton.getAttribute('data-variantid'));\r\n            if(this._isOutlet(variantId)){\r\n                const outletVariantButton = this._regularSelectorDivElement.removeChild(variantButton);\r\n                this._outletSelectorDivElement.appendChild(outletVariantButton);\r\n            }\r\n            const variantShortInfo = this._variantsShortInfo?.variantShortInfoList.find(variantShortInfo => variantShortInfo.variantValues.includes(variantId));\r\n            if(variantShortInfo && variantShortInfo.discountPercent > 0){\r\n                const percentSpan = createElementFromHTML('<span class=\"c-tilesvariant2-discount\">%</span>');\r\n                variantButton.appendChild(percentSpan);\r\n            }\r\n        });\r\n\r\n        this._outletCaptionDivElement.style.removeProperty('display');\r\n        this._outletSelectorDivElement.style.removeProperty('display');\r\n    }\r\n}\r\n"]}