{"version":3,"sources":["archive/product/variant-selector-provider/rel-images-tiles-variant-selector-v3.ts"],"names":["html","repeat","ProductApi","TilesVariantSelectorBase","createElementFromHTML","$","window","jQuery","RelImagesTilesVariantSelectorV3Outlet","constructor","name","selectorContainerElement","product","variantTypeId","translations","showPricesInclVat","loadAdditionalInfo","super","this","_productApi","template","variantSelectorData","variants","length","labels","select","variantTypeName","id","variant","image","thumbnailUrl","title","thumbnailDisplayWidth","thumbnailDisplayHeight","defaultArchiveImage","thumbnailImage","width","height","document","on","VARIANT_CHANGED_EVENT","_onVariantChanged","bind","getDataBeforeRender","self","result","Date","valueOf","variantType","toLowerCase","sortVariants","get","changeSelection","thumbnailImageWidth","thumbnailImageMode","relatedImages","forEach","variantName","normalize","variantNameRegex","RegExp","variantRelImageMatchRegExp","replace","relatedImage","find","relImg","imageName","test","processAfterRender","_dropdownMenuDivElement","querySelector","_regularCaptionDivElement","style","display","_regularSelectorDivElement","_outletCaptionDivElement","_outletSelectorDivElement","_variantNameButtonElement","getVariantsShortInfo","productId","then","_variantsShortInfo","variantsShortInfo","_processOutletVariants","_isOutlet","variantId","variantShortInfoList","some","v","variantValues","value","isOutlet","_isOutletVariantsExists","removeProperty","removeChild","querySelectorAll","parseInt","variantButton","getAttribute","outletVariantButton","appendChild","variantShortInfo","includes","discountPercent","figure","percentSpan","evt","newVariantValue","isSelectedOptionAvailable","selectedVariant","x","innerHTML"],"mappings":"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","file":"rel-images-tiles-variant-selector-v3.js","sourcesContent":["import { html } from 'lit-html';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { ProductApi } from '../../../api/archive/product/product-api.js';\nimport { IVariantShortInfo } from '../../../api/archive/product/interfaces/i-variant-short-info.js';\nimport { IVariantShortInfoResponse } from '../../../api/archive/product/interfaces/i-variant-short-info-response.js';\nimport { TilesVariantSelectorBase } from \"./tiles-variant-selector-base.js\";\nimport { IProductWithVariants, IVariant, IVariantType } from './variant-selector-base.js';\nimport { createElementFromHTML } from '../../../utils/dom_tools.js';\n\nconst $ = window.jQuery;\n\nexport class RelImagesTilesVariantSelectorV3Outlet extends TilesVariantSelectorBase {\n    private _productApi: ProductApi = new ProductApi();\n    private _variantsShortInfo: IVariantShortInfoResponse;\n    private _dropdownMenuDivElement: HTMLDivElement;\n    private _regularCaptionDivElement: HTMLDivElement;\n    private _regularSelectorDivElement: HTMLDivElement;\n    private _outletCaptionDivElement: HTMLDivElement;\n    private _outletSelectorDivElement: HTMLDivElement;\n    private _variantNameButtonElement: HTMLButtonElement;\n\n    constructor(name: string, selectorContainerElement: HTMLElement, product: IProductWithVariants, variantTypeId: number, translations: Map<string, string>, showPricesInclVat: boolean, loadAdditionalInfo: boolean) {\n        super(name, selectorContainerElement, product, variantTypeId, translations, showPricesInclVat, loadAdditionalInfo);\n\n        $(document).on(this.VARIANT_CHANGED_EVENT, this._onVariantChanged.bind(this));\n    }\n\n    protected template = () => html`\n        <label class=\"js-select-variant-label ts-regular-caption\">${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : ''} ${this.variantSelectorData.variantTypeName}</label>\n        <div class=\"dropdown\">\n            <button class=\"dropdown-toggle ts-variant-name\" 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\">\n                ${this.variantSelectorData.labels.select}...\n            </button>\n            <div id=\"${this.variantSelectorData.id}\" class=\"dropdown-menu ts-dropdown-menu\" aria-labelledby=\"dropdown-${this.variantSelectorData.id}\">\n                 <div class=\"c-relimgtilesvariant3-list ts-regular-selector\">\n                     ${repeat(this.variantSelectorData.variants, (variant: IVariant) => html`\n                        <button type=\"button\" class=\"c-relimgtilesvariant3-option js-variant\" data-variantid=\"${variant.id}\">\n                            <figure class=\"c-relimgtilesvariant3-image-container\">\n                                ${variant.image\n                                    ? html`<img src=\"${variant.image.thumbnailUrl}\" alt=\"${variant.image.title}\" title=\"${variant.id}\" class=\"c-relimgtilesvariant3-image\" width=\"${variant.image.thumbnailDisplayWidth}\" height=\"${variant.image.thumbnailDisplayHeight}\"/>`\n                                    : html`<img src=\"${this.variantSelectorData.defaultArchiveImage}\" class=\"c-relimgtilesvariant3-image\" width=\"${this.variantSelectorData.thumbnailImage.width}\" height=\"${this.variantSelectorData.thumbnailImage.height}\"/>`\n                                }\n                                <div class=\"c-relimgtilesvariant3-unavailable-text js-unavailable-text-container\" style=\"display:none;\">\n                                    <span class=\"c-relimgtilesvariant3-unavailable-text-label js-unavailable-text\"></span>\n                                </div>\n                            </figure>\n                            <div class=\"c-relimgtilesvariant3-name\"><span>${variant.name}</span></div>\n                        </button>\n                    `)}\n                </div>\n                <label class=\"c-relimgtilesvariant3-outlet-label ts-outlet-caption\">Outlet</span></label>\n                <div class=\"c-relimgtilesvariant3-outlet-list ts-outlet-selector\"></div>\n            </div>\n        </div>\n    `;\n\n    protected getDataBeforeRender() {\n        const self = this;\n\n        const result = {\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            defaultArchiveImage: '\\\\viewimage.aspx?imageid=0&width=' + this.product.thumbnailImageWidth + '&' + this.product.thumbnailImageMode,\n            thumbnailImage: {\n                width: this.product.thumbnailImageWidth,\n                height: this.product.thumbnailImageWidth\n            }\n        };\n\n        if (this.product.relatedImages && this.product.relatedImages.length > 0) {\n            result.variants.forEach(function (variant: any) {\n                const variantName = typeof (variant.name.normalize) === 'function' ? variant.name.normalize() : variant.name;\n                const variantNameRegex = RegExp(self.product.variantRelImageMatchRegExp.replace('VARIANTNAME', variantName), 'gi');\n\n                var relatedImage = self.product.relatedImages.find(function (relImg) {\n                    var imageName = typeof (relImg.title.normalize) === 'function' ? relImg.title.normalize() : relImg.title;\n                    return variantNameRegex.test(imageName);\n                });\n\n                if (relatedImage) {\n                    variant.image = relatedImage;\n                }\n            });\n        }\n\n        return result;\n    }\n\n    protected processAfterRender(): void {\n        super.processAfterRender();\n        const self = this;\n\n        this._dropdownMenuDivElement = this.selectorContainerElement.querySelector('.ts-dropdown-menu') as HTMLDivElement;\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        this._variantNameButtonElement = this.selectorContainerElement.querySelector('.ts-variant-name') as HTMLButtonElement;\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._dropdownMenuDivElement.removeChild(this._outletCaptionDivElement);\n            this._dropdownMenuDivElement.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 figure = variantButton.querySelector(\"figure\");\n                if (figure) {\n                    const percentSpan = createElementFromHTML(`<span class=\"c-relimgtilesvariant3-discount\">-${variantShortInfo.discountPercent}%</span>`);\n                    figure.appendChild(percentSpan)\n                };\n            }\n        });\n\n        this._outletCaptionDivElement.style.removeProperty('display');\n        this._outletSelectorDivElement.style.removeProperty('display');\n    }\n\n    private _onVariantChanged(evt: CustomEvent, variantType: IVariantType, newVariantValue: number, isSelectedOptionAvailable: boolean, productId: number) {\n        if (this.product.productId !== productId || this.variantType.id !== variantType.id) {\n            return;\n        }\n\n        const selectedVariant = variantType.variants.find(x => x.id === newVariantValue);\n        this._variantNameButtonElement.innerHTML = selectedVariant.name;\n    }\n}\n"]}