{"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","figure","variantShortInfo","includes","discountPercent","percentSpan","evt","newVariantValue","isSelectedOptionAvailable","selectedVariant","x","innerHTML"],"mappings":"OAASA,IAAsB,KAAV,kBACZC,MAA0C,KAA5B,oCACdC,UAA+D,KAA7C,qDAGlBC,wBAAkE,KAAlC,0CAEhCC,qBAA0D,KAA7B,8BAEtC,MAAMC,EAAIC,OAAOC,aAEJC,8CAA8CL,yBAUvDM,YAAYC,EAAcC,EAAuCC,EAA+BC,EAAuBC,EAAmCC,EAA4BC,GAClLC,MAAMP,EAAMC,EAA0BC,EAASC,EAAeC,EAAcC,EAAmBC,CAAkB,EAV7GE,KAAAC,YAA0B,IAAIjB,WAe5BgB,KAAAE,SAAW,IAAMpB;oEACgF,EAA3CkB,KAAKG,oBAAoBC,SAASC,OAAaL,KAAKG,oBAAoBG,OAAOC,OAAS,MAAMP,KAAKG,oBAAoBK;;yFAElGR,KAAKG,oBAAoBM;kBAChGT,KAAKG,oBAAoBG,OAAOC;;uBAE3BP,KAAKG,oBAAoBM,wEAAwET,KAAKG,oBAAoBM;;uBAE1H1B,OAAOiB,KAAKG,oBAAoBC,SAAU,GAAuBtB;gHACwB4B,EAAQD;;kCAEtFC,EAAQC,MACJ7B,iBAAiB4B,EAAQC,MAAMC,sBAAsBF,EAAQC,MAAME,iBAAiBH,EAAQD,kDAAkDC,EAAQC,MAAMG,kCAAkCJ,EAAQC,MAAMI,4BAC5MjC,iBAAiBkB,KAAKG,oBAAoBa,mEAAmEhB,KAAKG,oBAAoBc,eAAeC,kBAAkBlB,KAAKG,oBAAoBc,eAAeE;;;;;4EAMzKT,EAAQlB;;qBAE/D;;;;;;MAxBbL,EAAEiC,QAAQ,EAAEC,GAAGrB,KAAKsB,sBAAuBtB,KAAKuB,kBAAkBC,KAAKxB,IAAI,CAAC,CAChF,CA+BUyB,sBACN,MAAMC,EAAO1B,KAEb,IAAM2B,EAAS,CACXlB,IAAI,IAAImB,MAAOC,QAAO,EAAK,MAAQ7B,KAAK8B,YAAYrB,GACpDD,gBAAiBR,KAAK8B,YAAYtC,KAAKuC,YAAW,EAClD3B,SAAUJ,KAAKgC,aAAahC,KAAKP,yBAA0BO,KAAK8B,YAAY1B,SAAUJ,KAAKN,OAAO,EAClGY,OAAQ,CAAEC,OAAQP,KAAKJ,aAAaqC,IAAI,qBAAqB,EAAGC,gBAAiBlC,KAAKJ,aAAaqC,IAAI,8BAA8B,CAAC,EACtIjB,oBAAqB,oCAAsChB,KAAKN,QAAQyC,oBAAsB,IAAMnC,KAAKN,QAAQ0C,mBACjHnB,eAAgB,CACZC,MAAOlB,KAAKN,QAAQyC,oBACpBhB,OAAQnB,KAAKN,QAAQyC,mB,GAoB7B,OAhBInC,KAAKN,QAAQ2C,eAAqD,EAApCrC,KAAKN,QAAQ2C,cAAchC,QACzDsB,EAAOvB,SAASkC,QAAQ,SAAU5B,GAC9B,IAAM6B,EAAkD,YAApC,OAAQ7B,EAAQlB,KAAc,UAAmBkB,EAAQlB,KAAKgD,UAAS,EAAK9B,EAAQlB,KACxG,MAAMiD,EAAmBC,OAAOhB,EAAKhC,QAAQiD,2BAA2BC,QAAQ,cAAeL,CAAW,EAAG,IAAI,EAE7GM,EAAenB,EAAKhC,QAAQ2C,cAAcS,KAAK,SAAUC,GACzD,IAAIC,EAAgD,YAApC,OAAQD,EAAOlC,MAAe,UAAmBkC,EAAOlC,MAAM2B,UAAS,EAAKO,EAAOlC,MACnG,OAAO4B,EAAiBQ,KAAKD,CAAS,CAC1C,CAAC,EAEGH,IACAnC,EAAQC,MAAQkC,EAExB,CAAC,EAGElB,CACX,CAEUuB,qBACNnD,MAAMmD,mBAAkB,EACxB,MAAMxB,EAAO1B,KAEbA,KAAKmD,wBAA0BnD,KAAKP,yBAAyB2D,cAAc,mBAAmB,EAC9FpD,KAAKqD,0BAA4BrD,KAAKP,yBAAyB2D,cAAc,qBAAqB,EAClGpD,KAAKqD,0BAA0BC,MAAMC,QAAU,OAC/CvD,KAAKwD,2BAA6BxD,KAAKP,yBAAyB2D,cAAc,sBAAsB,EACpGpD,KAAKwD,2BAA2BF,MAAMC,QAAU,OAChDvD,KAAKyD,yBAA2BzD,KAAKP,yBAAyB2D,cAAc,oBAAoB,EAChGpD,KAAKyD,yBAAyBH,MAAMC,QAAU,OAC9CvD,KAAK0D,0BAA4B1D,KAAKP,yBAAyB2D,cAAc,qBAAqB,EAClGpD,KAAK0D,0BAA0BJ,MAAMC,QAAU,OAC/CvD,KAAK2D,0BAA4B3D,KAAKP,yBAAyB2D,cAAc,kBAAkB,EAE5FpD,KAAKF,mBACJE,KAAKC,YAAY2D,qBAAqB5D,KAAKN,QAAQmE,SAAS,EAAEC,KAAK,IAC/DpC,EAAKqC,mBAAqBC,EAC1BtC,EAAKuC,uBAAsB,CAC/B,CAAC,EAEDvC,EAAKuC,uBAAsB,CAEnC,CAEQC,UAAUC,GACd,MAAI,EAACnE,CAAAA,KAAK+D,oBAA8E,IAAxD/D,KAAK+D,mBAAmBK,qBAAqB/D,SAItEL,KAAK+D,mBAAmBK,qBAAqBC,KAAK,GAA0BC,EAAEC,cAAcF,KAAKG,GAASA,IAAUL,CAAS,GAAKG,EAAEG,QAAQ,CACvJ,CAEQC,0BACJ,MAAI,EAAC1E,CAAAA,KAAK+D,oBAA8E,IAAxD/D,KAAK+D,mBAAmBK,qBAAqB/D,SAItEL,KAAK+D,mBAAmBK,qBAAqBC,KAAK,GAA0BC,EAAEG,QAAQ,CACjG,CAEQR,yBACJjE,KAAKqD,0BAA0BC,MAAMqB,eAAe,SAAS,EAC7D3E,KAAKwD,2BAA2BF,MAAMqB,eAAe,SAAS,EAEzD3E,KAAK0E,wBAAuB,IAC7B1E,KAAKmD,wBAAwByB,YAAY5E,KAAKyD,wBAAwB,EACtEzD,KAAKmD,wBAAwByB,YAAY5E,KAAK0D,yBAAyB,GAG3E1D,KAAKwD,2BAA2BqB,iBAAiB,QAAQ,EAAEvC,QAAQ,IAC/D,MAAM6B,EAAYW,SAASC,EAAcC,aAAa,gBAAgB,CAAC,EACnEhF,KAAKkE,UAAUC,CAAS,IAClBc,EAAsBjF,KAAKwD,2BAA2BoB,YAAYG,CAAa,EACrF/E,KAAK0D,0BAA0BwB,YAAYD,CAAmB,GAFlE,IAMUE,EAFJC,EAAmBpF,KAAK+D,oBAAoBK,qBAAqBtB,KAAKsC,GAAoBA,EAAiBb,cAAcc,SAASlB,CAAS,CAAC,EAC9IiB,GAAuD,EAAnCA,EAAiBE,kBAC/BH,EAASJ,EAAc3B,cAAc,QAAQ,KAEzCmC,EAAcrG,uEAAuEkG,EAAiBE,yBAAyB,EACrIH,EAAOD,YAAYK,CAAW,EAG1C,CAAC,EAEDvF,KAAKyD,yBAAyBH,MAAMqB,eAAe,SAAS,EAC5D3E,KAAK0D,0BAA0BJ,MAAMqB,eAAe,SAAS,CACjE,CAEQpD,kBAAkBiE,EAAkB1D,EAA2B2D,EAAyBC,EAAoC7B,GAChI,IAIM8B,EAJF3F,KAAKN,QAAQmE,YAAcA,GAAa7D,KAAK8B,YAAYrB,KAAOqB,EAAYrB,KAI1EkF,EAAkB7D,EAAY1B,SAAS0C,KAAK8C,GAAKA,EAAEnF,KAAOgF,CAAe,EAC/EzF,KAAK2D,0BAA0BkC,UAAYF,EAAgBnG,KAC/D,C,QA5JSF,qC","file":"rel-images-tiles-variant-selector-v3.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 { IProductWithVariants, IVariant, IVariantType } from './variant-selector-base.js';\r\nimport { createElementFromHTML } from '../../../utils/dom_tools.js';\r\n\r\nconst $ = window.jQuery;\r\n\r\nexport class RelImagesTilesVariantSelectorV3Outlet extends TilesVariantSelectorBase {\r\n    private _productApi: ProductApi = new ProductApi();\r\n    private _variantsShortInfo: IVariantShortInfoResponse;\r\n    private _dropdownMenuDivElement: HTMLDivElement;\r\n    private _regularCaptionDivElement: HTMLDivElement;\r\n    private _regularSelectorDivElement: HTMLDivElement;\r\n    private _outletCaptionDivElement: HTMLDivElement;\r\n    private _outletSelectorDivElement: HTMLDivElement;\r\n    private _variantNameButtonElement: HTMLButtonElement;\r\n\r\n    constructor(name: string, selectorContainerElement: HTMLElement, product: IProductWithVariants, variantTypeId: number, translations: Map<string, string>, showPricesInclVat: boolean, loadAdditionalInfo: boolean) {\r\n        super(name, selectorContainerElement, product, variantTypeId, translations, showPricesInclVat, loadAdditionalInfo);\r\n\r\n        $(document).on(this.VARIANT_CHANGED_EVENT, this._onVariantChanged.bind(this));\r\n    }\r\n\r\n    protected template = () => html`\r\n        <label class=\"js-select-variant-label ts-regular-caption\">${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : ''} ${this.variantSelectorData.variantTypeName}</label>\r\n        <div class=\"dropdown\">\r\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\">\r\n                ${this.variantSelectorData.labels.select}...\r\n            </button>\r\n            <div id=\"${this.variantSelectorData.id}\" class=\"dropdown-menu ts-dropdown-menu\" aria-labelledby=\"dropdown-${this.variantSelectorData.id}\">\r\n                 <div class=\"c-relimgtilesvariant3-list ts-regular-selector\">\r\n                     ${repeat(this.variantSelectorData.variants, (variant: IVariant) => html`\r\n                        <button type=\"button\" class=\"c-relimgtilesvariant3-option js-variant\" data-variantid=\"${variant.id}\">\r\n                            <figure class=\"c-relimgtilesvariant3-image-container\">\r\n                                ${variant.image\r\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}\"/>`\r\n                                    : html`<img src=\"${this.variantSelectorData.defaultArchiveImage}\" class=\"c-relimgtilesvariant3-image\" width=\"${this.variantSelectorData.thumbnailImage.width}\" height=\"${this.variantSelectorData.thumbnailImage.height}\"/>`\r\n                                }\r\n                                <div class=\"c-relimgtilesvariant3-unavailable-text js-unavailable-text-container\" style=\"display:none;\">\r\n                                    <span class=\"c-relimgtilesvariant3-unavailable-text-label js-unavailable-text\"></span>\r\n                                </div>\r\n                            </figure>\r\n                            <div class=\"c-relimgtilesvariant3-name\"><span>${variant.name}</span></div>\r\n                        </button>\r\n                    `)}\r\n                </div>\r\n                <label class=\"c-relimgtilesvariant3-outlet-label ts-outlet-caption\">Outlet</span></label>\r\n                <div class=\"c-relimgtilesvariant3-outlet-list ts-outlet-selector\"></div>\r\n            </div>\r\n        </div>\r\n    `;\r\n\r\n    protected getDataBeforeRender() {\r\n        const self = this;\r\n\r\n        const result = {\r\n            id: new Date().valueOf() + '_vt' + this.variantType.id,\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._dropdownMenuDivElement = this.selectorContainerElement.querySelector('.ts-dropdown-menu') as HTMLDivElement;\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        this._variantNameButtonElement = this.selectorContainerElement.querySelector('.ts-variant-name') as HTMLButtonElement;\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._dropdownMenuDivElement.removeChild(this._outletCaptionDivElement);\r\n            this._dropdownMenuDivElement.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-relimgtilesvariant3-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    private _onVariantChanged(evt: CustomEvent, variantType: IVariantType, newVariantValue: number, isSelectedOptionAvailable: boolean, productId: number) {\r\n        if (this.product.productId !== productId || this.variantType.id !== variantType.id) {\r\n            return;\r\n        }\r\n\r\n        const selectedVariant = variantType.variants.find(x => x.id === newVariantValue);\r\n        this._variantNameButtonElement.innerHTML = selectedVariant.name;\r\n    }\r\n}\r\n"]}