{"version":3,"sources":["archive/product/variant-selector-provider/rel-images-tiles-variant-selector-v2.ts"],"names":["html","repeat","ProductApi","TilesVariantSelectorBase","createElementFromHTML","RelImagesTilesVariantSelectorV2Outlet","constructor","this","_productApi","template","variantSelectorData","variants","length","labels","select","variantTypeName","variant","id","image","thumbnailUrl","title","thumbnailDisplayWidth","thumbnailDisplayHeight","defaultArchiveImage","thumbnailImage","width","height","name","getDataBeforeRender","self","result","variantType","toLowerCase","sortVariants","selectorContainerElement","product","translations","get","changeSelection","thumbnailImageWidth","thumbnailImageMode","relatedImages","forEach","variantName","normalize","variantNameRegex","RegExp","variantRelImageMatchRegExp","replace","relatedImage","find","relImg","imageName","test","processAfterRender","super","_regularCaptionDivElement","querySelector","style","display","_regularSelectorDivElement","_outletCaptionDivElement","_outletSelectorDivElement","loadAdditionalInfo","getVariantsShortInfo","productId","then","_variantsShortInfo","variantsShortInfo","_proccessOutletVariants","_isOutlet","variantId","variantShortInfoList","some","v","variantValues","value","isOutlet","_isOutletVariantsExists","removeProperty","removeChild","querySelectorAll","parseInt","variantButton","getAttribute","outletVariantButton","appendChild","figure","variantShortInfo","includes","discountPercent","percentSpan"],"mappings":"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","file":"rel-images-tiles-variant-selector-v2.js","sourcesContent":["import { html } from 'lit-html';\r\nimport { repeat } from 'lit-html/directives/repeat';\r\nimport { ProductApi } from '../../../api/archive/product/product-api.js';\r\nimport { IVariantShortInfo } from '../../../api/archive/product/interfaces/i-variant-short-info.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 { createElementFromHTML } from '../../../utils/dom_tools.js';\r\n\r\nexport class RelImagesTilesVariantSelectorV2Outlet 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-relimgtilesvariant2-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-relimgtilesvariant2-list ts-regular-selector\">\r\n        ${repeat(this.variantSelectorData.variants, (variant: IVariant) => html`\r\n            <button type=\"button\" class=\"c-relimgtilesvariant2-option js-variant\" data-variantid=\"${variant.id}\">\r\n                <figure class=\"c-relimgtilesvariant2-image-container\">\r\n                ${variant.image\r\n                    ? html`<img src=\"${variant.image.thumbnailUrl}\" alt=\"${variant.image.title}\" title=\"${variant.id}\" class=\"c-relimgtilesvariant2-image\" width=\"${variant.image.thumbnailDisplayWidth}\" height=\"${variant.image.thumbnailDisplayHeight}\"/>`\r\n                    : html`<img src=\"${this.variantSelectorData.defaultArchiveImage}\" class=\"c-relimgtilesvariant2-image\" width=\"${this.variantSelectorData.thumbnailImage.width}\" height=\"${this.variantSelectorData.thumbnailImage.height}\"/>`\r\n                }\r\n                    <div class=\"c-relimgtilesvariant2-unavailable-text js-unavailable-text-container\" style=\"display:none;\">\r\n                        <span class=\"c-relimgtilesvariant2-unavailable-text-label js-unavailable-text\"></span>\r\n                    </div>\r\n                </figure>\r\n                <div class=\"c-relimgtilesvariant2-name\"><span>${variant.name}</span></div>\r\n            </button>\r\n        `)}\r\n        </div>\r\n        <div class=\"c-relimgtilesvariant2-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-relimgtilesvariant2-list ts-outlet-selector\">\r\n        </div>\r\n    `;\r\n\r\n    protected getDataBeforeRender() {\r\n        const self = this;\r\n\r\n        const result = {\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            defaultArchiveImage: '\\\\viewimage.aspx?imageid=0&width=' + this.product.thumbnailImageWidth + '&' + this.product.thumbnailImageMode,\r\n            thumbnailImage: {\r\n                width: this.product.thumbnailImageWidth,\r\n                height: this.product.thumbnailImageWidth\r\n            }\r\n        };\r\n\r\n        if (this.product.relatedImages && this.product.relatedImages.length > 0) {\r\n            result.variants.forEach(function (variant: any) {\r\n                const variantName = typeof (variant.name.normalize) === 'function' ? variant.name.normalize() : variant.name;\r\n                const variantNameRegex = RegExp(self.product.variantRelImageMatchRegExp.replace('VARIANTNAME', variantName), 'gi');\r\n\r\n                var relatedImage = self.product.relatedImages.find(function (relImg) {\r\n                    var imageName = typeof (relImg.title.normalize) === 'function' ? relImg.title.normalize() : relImg.title;\r\n                    return variantNameRegex.test(imageName);\r\n                });\r\n\r\n                if (relatedImage) {\r\n                    variant.image = relatedImage;\r\n                }\r\n            });\r\n        }\r\n\r\n        return result;\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._proccessOutletVariants();\r\n            });\r\n        } else {\r\n            self._proccessOutletVariants();\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 _proccessOutletVariants() {\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 figure = variantButton.querySelector(\"figure\");\r\n                if(figure){\r\n                    const percentSpan = createElementFromHTML(`<span class=\"c-relimgtilesvariant2-discount\">-${variantShortInfo.discountPercent}%</span>`);\r\n                    figure.appendChild(percentSpan)\r\n                };\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"]}