https://www.rumpetroll.no/components/archive/product/variant-selector-provider/tiles-variant-selector-v2.js

1import{html}from"lit-html";import{repeat}from"lit-html/directives/repeat";import{ProductApi}from"../../../api/archive/product/product-api.js";import{TilesVariantSelectorBase}from"./tiles-variant-selector-base.js";import{createElementFromHTML}from"../../../utils/dom_tools.js";class TilesVariantSelectorV2 extends TilesVariantSelectorBase{constructor(){super(...arguments),this._productApi=new ProductApi,this.template=()=>html`
2        <div class="c-tilesvariant2-term-definition">
3            <label>${this.variantSelectorData.variantTypeName}:</label> <span class="js-selected-variant-name"></span>
4        </div>
5        <div class="c-tilesvariant2-list ts-regular-selector">
6        ${repeat(this.variantSelectorData.variants,t=>html`
7            <button type="button" class="c-tilesvariant2-option js-variant" data-variantid="${t.id}">
8                <span class="c-tilesvariant2-name">${t.name}</span>
9                <div class="c-tilesvariant2-unavailable-text js-unavailable-text-container" style="display:none;">
10                    <span class="c-tilesvariant2-unavailable-text-label js-unavailable-text"></span>
11                </div>
12            </button>
13        `)}
14        </div>
15    `}getDataBeforeRender(){return{variantTypeName:this.variantType.name,variants:this.sortVariants(this.selectorContainerElement,this.variantType.variants,this.product)}}processAfterRender(){super.processAfterRender();let e=this;this._regularSelectorDivElement=this.selectorContainerElement.querySelector(".ts-regular-selector"),this._regularSelectorDivElement.style.display="none",this.loadAdditionalInfo?this._productApi.getVariantsShortInfo(this.product.productId).then(t=>{e._variantsShortInfo=t,e._processOutletVariants()}):e._processOutletVariants()}_processOutletVariants(){this._regularSelectorDivElement.style.removeProperty("display"),this._regularSelectorDivElement.querySelectorAll("button").forEach(t=>{let e=parseInt(t.getAttribute("data-variantid"));var a=this._variantsShortInfo?.variantShortInfoList.find(t=>t.variantValues.includes(e));a&&0<a.discountPercent&&(a=createElementFromHTML('<span class="c-tilesvariant2-discount">%</span>'),t.appendChild(a))})}}export{TilesVariantSelectorV2};
16//# sourceMappingURL=tiles-variant-selector-v2.js.map