{"version":3,"sources":["archive/product/variant-selector-provider/fancybox-tiles-variant-selector-v1.ts"],"names":["html","repeat","TilesVariantSelectorBase","$","window","jQuery","pubsub","PubSub","FancyBoxTilesVariantSelectorV1","constructor","name","selectorContainerElement","product","variantTypeId","translations","showPricesInclVat","loadAdditionalInfo","super","this","template","variantSelectorData","variantUniqueId","variants","length","labels","select","variantTypeName","variant","id","image","thumbnailUrl","$mainContainer","getDataBeforeRender","self","result","variantType","sortVariants","get","changeSelection","uniqueId","relatedImages","forEach","variantName","normalize","variantNameRegex","RegExp","variantRelImageMatchRegExp","replace","relatedImage","find","relImg","imageName","title","test","processAfterRender","$variants","$previewImage","$previewName","$selectedVariantImage","$selectVariantBtn","on","evt","preventDefault","$variantToSelect","_setPreview","filter","removeClass","setSelectedInternal","fancybox","close","publish","container","isVariantAlreadySelected","hasClass","currentVariantValue","removeAttr","hide","isSelectedOptionAvailable","data","css","attr","show","isSelectedAvailable","trigger","VARIANT_CHANGED_EVENT","productId","setVariantSelectorLabelPrefix","getSelected","empty","addClass","append","text"],"mappings":"OAASA,IAAsB,KAAV,kBACZC,MAA0C,KAA5B,oCACdC,wBAAkE,KAAlC,mCAGzC,MAAMC,EAAIC,OAAOC,OACXC,OAASF,OAAOG,aAETC,uCAAuCN,yBAOhDO,YAAYC,EAAcC,EAAuCC,EAA+BC,EAAuBC,EAAmCC,EAA4BC,GAClLC,MAAMP,EAAMC,EAA0BC,EAASC,EAAeC,EAAcC,EAAmBC,CAAkB,EAG3GE,KAAAC,SAAW,IAAMnB;;+GAEgFkB,KAAKE,oBAAoBC;;;sBAGvE,EAA3CH,KAAKE,oBAAoBE,SAASC,OAAaL,KAAKE,oBAAoBI,OAAOC,OAAS,MAAOP,KAAKE,oBAAoBM;;;;oFAI1DR,KAAKE,oBAAoBC;;;kBAG3FpB,OAAOiB,KAAKE,oBAAoBE,SAAU,GAAsBtB;oHACkC2B,EAAQC;+FAC7BD,EAAQE,qCAAuCF,EAAQE,MAAMC,iBAAmB;;;;;0FAKrFH,EAAQjB;8BACpE;;;;;;uIAOyGQ,KAAKE,oBAAoBI,OAAOC;;;;gBA7B/JP,KAAKa,eAAiB5B,EAAEQ,CAAwB,CACpD,CAkCUqB,sBACN,MAAMC,EAAOf,KAEb,IAAMgB,EAAS,CACXR,gBAAiBR,KAAKiB,YAAYzB,KAClCY,SAAUJ,KAAKkB,aAAalB,KAAKP,yBAA0BO,KAAKiB,YAAYb,SAAUJ,KAAKN,OAAO,EAClGY,OAAQ,CAAEC,OAAQP,KAAKJ,aAAauB,IAAI,qBAAqB,EAAGC,gBAAiBpB,KAAKJ,aAAauB,IAAI,8BAA8B,CAAC,EACtIhB,gBAAiBH,KAAKN,QAAQ2B,SAAW,IAAMrB,KAAKiB,YAAYP,E,EAmBpE,OAhBIK,EAAKrB,QAAQ4B,eAAqD,EAApCP,EAAKrB,QAAQ4B,cAAcjB,QACzDW,EAAOZ,SAASmB,QAAQ,SAAUd,GAC9B,IAAMe,EAAkD,YAApC,OAAQf,EAAQjB,KAAc,UAAmBiB,EAAQjB,KAAKiC,UAAS,EAAKhB,EAAQjB,KACxG,MAAMkC,EAAmBC,OAAOZ,EAAKrB,QAAQkC,2BAA2BC,QAAQ,cAAeL,CAAW,EAAG,IAAI,EAE7GM,EAAef,EAAKrB,QAAQ4B,cAAcS,KAAK,SAAUC,GACzD,IAAIC,EAAgD,YAApC,OAAQD,EAAOE,MAAe,UAAmBF,EAAOE,MAAMT,UAAS,EAAKO,EAAOE,MACnG,OAAOR,EAAiBS,KAAKF,CAAS,CAC1C,CAAC,EAEGH,IACArB,EAAQE,MAAQmB,EAExB,CAAC,EAGEd,CACX,CAEUoB,qBACN,MAAMrB,EAAOf,KAEbe,EAAKsB,UAAYtB,EAAKF,eAAekB,KAAK,aAAa,EACvDhB,EAAKuB,cAAgBvB,EAAKF,eAAekB,KAAK,2BAA2B,EACzEhB,EAAKwB,aAAexB,EAAKF,eAAekB,KAAK,0BAA0B,EACvEhB,EAAKyB,sBAAwBzB,EAAKF,eAAekB,KAAK,4BAA4B,EAClFhB,EAAK0B,kBAAoB1B,EAAKF,eAAekB,KAAK,wBAAwB,EAE1EhB,EAAKsB,UAAUK,GAAG,QAAS,SAAUC,GACjCA,EAAIC,eAAc,EAElB,IAAIC,EAAmB5D,EAAEe,IAAI,EAC7Be,EAAK+B,YAAYD,CAAgB,CACrC,CAAC,EAED9B,EAAK0B,kBAAkBC,GAAG,QAAS,SAAUC,GACzCA,EAAIC,eAAc,EAElB,IAAIC,EAAmB9B,EAAKsB,UAAUU,OAAO,WAAW,EAAEC,YAAY,UAAU,EAChFjC,EAAKkC,oBAAoBJ,CAAgB,EAEzC5D,EAAEiE,SAASC,MAAK,CACpB,CAAC,EAED/D,OAAOgE,QAAQ,kCAAmC,CAAE3C,QAASM,EAAKb,oBAAqBmD,UAAWtC,EAAKF,cAAc,CAAE,CAC3H,CAEUoC,oBAAoBJ,GAC1B,IAAIS,EAA2BT,EAAiBU,SAAS,UAAU,EAG/DC,GAFJxD,KAAKwC,sBAAsBiB,WAAW,OAAO,EAAEC,KAAI,EAEzB,MAUtBC,GATCL,GAEyB,GAD1BE,EAAsBX,EAAiBe,KAAK,WAAW,IAC+C,SAAvEf,EAAiBd,KAAK,mBAAmB,EAAE8B,IAAI,kBAAkB,GAC5F7D,KAAKwC,sBAAsBsB,KAAK,QAASjB,EAAiBd,KAAK,mBAAmB,EAAE+B,KAAK,OAAO,CAAC,EAAEC,KAAI,EAI/G/D,KAAK8C,YAAYD,CAAgB,EAED7C,KAAKgE,oBAAmB,GACxDhE,KAAKa,eAAeoD,QAAQjE,KAAKkE,sBAAuB,CAAClE,KAAKiB,YAAauC,GAAuB,EAAGG,EAA2B3D,KAAKN,QAAQyE,UAAU,EAEvJnE,KAAKoE,8BAAmD,EAArBpE,KAAKqE,YAAW,EAC7CrE,KAAKE,oBAAoBI,OAAOc,gBAChCpB,KAAKE,oBAAoBI,OAAOC,MAAM,CAChD,CAEQuC,YAAYD,GAChB,IAAIS,EAA2BT,EAAiBU,SAAS,UAAU,EAEnEvD,KAAKqC,UAAUW,YAAY,UAAU,EACrChD,KAAKsC,cAAcmB,WAAW,OAAO,EACrCzD,KAAKuC,aAAa+B,MAAK,EAElBhB,IACDT,EAAiB0B,SAAS,UAAU,EACpCvE,KAAKsC,cAAcwB,KAAK,QAASjB,EAAiBd,KAAK,mBAAmB,EAAE+B,KAAK,OAAO,CAAC,EACzF9D,KAAKuC,aAAaiC,OAAO3B,EAAiBd,KAAK,kBAAkB,EAAE0C,KAAI,CAAE,EAEjF,C,QAvISnF,8B","file":"fancybox-tiles-variant-selector-v1.js","sourcesContent":["import { html } from 'lit-html';\r\nimport { repeat } from 'lit-html/directives/repeat';\r\nimport { TilesVariantSelectorBase } from \"./tiles-variant-selector-base.js\";\r\nimport { IProductWithVariants, IVariant } from './variant-selector-base.js';\r\n\r\nconst $ = window.jQuery;\r\nconst pubsub = window.PubSub;\r\n\r\nexport class FancyBoxTilesVariantSelectorV1 extends TilesVariantSelectorBase {\r\n    private $mainContainer: any;\r\n    private $previewImage: any;\r\n    private $previewName: any;\r\n    private $selectedVariantImage: any;\r\n    private $selectVariantBtn: any;\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        this.$mainContainer = $(selectorContainerElement);\r\n    }\r\n    protected template = () => html`\r\n        <div class=\"c-fancyboxrelimgtilesvariant\">\r\n            <button type=\"button\" class=\"c-fancyboxrelimgtilesvariant__preview-btn\" data-fancybox data-src=\"#${this.variantSelectorData.variantUniqueId}\">\r\n                <figure class=\"c-fancyboxrelimgtilesvariant__image js-selected-variant-image\"></figure>\r\n                <div class=\"js-select-variant-label\">\r\n                    ${this.variantSelectorData.variants.length > 1 ? this.variantSelectorData.labels.select : '' } ${this.variantSelectorData.variantTypeName}\r\n                </div>\r\n            </button>\r\n        </div>\r\n        <div class=\"c-fancyboxrelimgtilesvariant__popup\" style=\"display:none\" id=\"${this.variantSelectorData.variantUniqueId}\">\r\n            <div class=\"c-fancyboxrelimgtilesvariant__popup-content\">\r\n                <div class=\"c-fancyboxrelimgtilesvariant__popup-list\">\r\n                ${repeat(this.variantSelectorData.variants, (variant:IVariant) => html`\r\n                    <button type=\"button\" class=\"c-fancyboxrelimgtilesvariant__option js-variant\" data-variantid=\"${variant.id}\">\r\n                        <figure class=\"c-fancyboxrelimgtilesvariant__image js-variant-image\" ${variant.image ? `style=\"background-image:url(${variant.image.thumbnailUrl})\"` : ''}>\r\n                            <div class=\"c-fancyboxrelimgtilesvariant__unavailable-text js-unavailable-text-container\" style=\"display:none;\">\r\n                                <span class=\"c-fancyboxrelimgtilesvariant__unavailable-text-label js-unavailable-text\"></span>\r\n                            </div>\r\n                        </figure>\r\n                        <div class=\"c-fancyboxrelimgtilesvariant__name js-variant-name\">${variant.name}</div>\r\n                    </button>`\r\n                )}\r\n                </div>\r\n                <div class=\"c-fancyboxrelimgtilesvariant__preview\">\r\n                    <figure class=\"c-fancyboxrelimgtilesvariant__image js-variant-preview-image\"></figure>\r\n                    <div class=\"c-fancyboxrelimgtilesvariant__preview-properties\">\r\n                        <div class=\"c-fancyboxrelimgtilesvariant__name js-variant-preview-name\"></div>\r\n                        <button type=\"button\" class=\"c-fancyboxrelimgtilesvariant__select-btn js-select-variant-btn btn btn-primary\">${this.variantSelectorData.labels.select}</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>`;\r\n\r\n    protected getDataBeforeRender(): any {\r\n        const self = this;\r\n \r\n        const result = {\r\n            variantTypeName: this.variantType.name,\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            variantUniqueId: this.product.uniqueId + '_' + this.variantType.id\r\n        };\r\n\r\n        if (self.product.relatedImages && self.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        const self = this;\r\n\r\n        self.$variants = self.$mainContainer.find('.js-variant');\r\n        self.$previewImage = self.$mainContainer.find('.js-variant-preview-image');\r\n        self.$previewName = self.$mainContainer.find('.js-variant-preview-name');\r\n        self.$selectedVariantImage = self.$mainContainer.find('.js-selected-variant-image');\r\n        self.$selectVariantBtn = self.$mainContainer.find('.js-select-variant-btn');\r\n\r\n        self.$variants.on('click', function (evt) {\r\n            evt.preventDefault();\r\n\r\n            var $variantToSelect = $(this);\r\n            self._setPreview($variantToSelect);\r\n        });\r\n\r\n        self.$selectVariantBtn.on('click', function (evt) {\r\n            evt.preventDefault();\r\n\r\n            var $variantToSelect = self.$variants.filter('.selected').removeClass('selected');\r\n            self.setSelectedInternal($variantToSelect);\r\n\r\n            $.fancybox.close();\r\n        });\r\n\r\n        pubsub.publish('variantprocessor.variant.render', { variant: self.variantSelectorData, container: self.$mainContainer });\r\n    }\r\n\r\n    protected setSelectedInternal($variantToSelect: any) {\r\n        var isVariantAlreadySelected = $variantToSelect.hasClass('selected');\r\n        this.$selectedVariantImage.removeAttr('style').hide();\r\n\r\n        var currentVariantValue = null;\r\n        if (!isVariantAlreadySelected) {\r\n            currentVariantValue = $variantToSelect.data('variantid');\r\n            if (currentVariantValue > 0 && $variantToSelect.find('.js-variant-image').css('background-image') !== 'none') {\r\n                this.$selectedVariantImage.attr('style', $variantToSelect.find('.js-variant-image').attr('style')).show();\r\n            }\r\n        }\r\n\r\n        this._setPreview($variantToSelect);\r\n\r\n        var isSelectedOptionAvailable = this.isSelectedAvailable();\r\n        this.$mainContainer.trigger(this.VARIANT_CHANGED_EVENT, [this.variantType, currentVariantValue || 0, isSelectedOptionAvailable, this.product.productId]);\r\n\r\n        this.setVariantSelectorLabelPrefix(this.getSelected() > 0\r\n            ? this.variantSelectorData.labels.changeSelection\r\n            : this.variantSelectorData.labels.select);\r\n    }\r\n\r\n    private _setPreview($variantToSelect) {\r\n        var isVariantAlreadySelected = $variantToSelect.hasClass('selected');\r\n\r\n        this.$variants.removeClass('selected');\r\n        this.$previewImage.removeAttr('style');\r\n        this.$previewName.empty();\r\n\r\n        if (!isVariantAlreadySelected) {\r\n            $variantToSelect.addClass('selected');\r\n            this.$previewImage.attr('style', $variantToSelect.find('.js-variant-image').attr('style'));\r\n            this.$previewName.append($variantToSelect.find('.js-variant-name').text());\r\n        }\r\n    }\r\n}\r\n"]}