1(function(){"use strict";class ProductPromoComponent extends HTMLElement{constructor(){super()}static get observedAttributes(){return["product"]}get product(){return this._product}set product(value){this._product=value,this.render()}connectedCallback(){this._product&&this.render()}async render(){if(!this._product||!this._product.metafields){this.innerHTML="";return}const promotionsMetafield=this._product.metafields.find(field=>field&&field.type==="list.mixed_reference"&&field.references&&field.references.nodes);if(!promotionsMetafield||!promotionsMetafield.references.nodes.length){this.innerHTML="";return}const promotions=promotionsMetafield.references.nodes.filter(node=>node.type==="promotions");if(!promotions.length){this.innerHTML="";return}const indexItem=this._product.productId||Math.floor(Math.random()*1e3)+1,promotionItems=promotions.map((promotion,index)=>{const promotionProduct=this.getFieldValue(promotion.fields,"product_in_promotion");return promotionProduct&&promotionProduct.reference&&promotionProduct.reference.totalInventory<=1?null:this.renderPromotionItem(promotion,index+1,indexItem)}).filter(Boolean).join("");this.innerHTML=` 2 <div class="promotion-wrapper promotion-mini ${promotionItems?"":"hidden"}"> 3 ${promotionItems} 4 </div> 5 `}getFieldValue(fields,key){return fields.find(f=>f.key===key)||null}renderPromotionItem(promotion,index,promotionId){const background=this.getFieldValue(promotion.fields,"background"),image=this.getFieldValue(promotion.fields,"image"),icon=this.getFieldValue(promotion.fields,"icon"),shortTitle=this.getFieldValue(promotion.fields,"short_title"),value=this.getFieldValue(promotion.fields,"the_value_of_the_product_"),linkLabel=this.getFieldValue(promotion.fields,"link_label"),modalTitle=this.getFieldValue(promotion.fields,"modal_title"),modalContent=this.getFieldValue(promotion.fields,"modal_content"),modalImages=this.getFieldValue(promotion.fields,"modal_images"),bannerContent=this.getFieldValue(promotion.fields,"banner_content"),link=this.getFieldValue(promotion.fields,"link");let imageHtml="";if(image&&image.reference&&image.reference.image){const img=image.reference.image;imageHtml=` 6 <div class="promotion-image"> 7 <img src="${img.url}" loading="lazy" class="metafield-file_reference" alt="${img.altText||""}"> 8 </div> 9 `}else icon&&icon.value&&(imageHtml=` 10 <div class="promotion-icon"> 11 <!-- Icon would be rendered here: ${icon.value} --> 12 </div> 13 `);let linkHtml="";return link&&link.value?linkHtml=`<a href="${link.value}" class="link">${linkLabel?linkLabel.value:"Learn More"}</a>`:linkLabel&&linkLabel.value&&modalTitle&&modalTitle.value&&(linkHtml=` 14 <modal-opener class="product-popup-modal__opener" data-modal="#PopupModal-${index}-${promotionId}"> 15 <button id="ProductPopup-${promotionId}" class="link" type="button" aria-haspopup="dialog"> 16 ${linkLabel.value} 17 </button> 18 </modal-opener> 19 ${this.renderModal(promotion,index,promotionId)} 20 `),` 21 <div class="promotion-item" ${background&&background.value?`style="background: ${background.value}"`:""}> 22 ${imageHtml} 23 <div class="promotion-content"> 24 <strong> 25 ${shortTitle?shortTitle.value:""} 26 ${value&&value.value?` - Worth ${value.value}`:""} 27 </strong> 28 ${bannerContent?bannerContent.value:""} 29 ${linkHtml} 30 </div> 31 </div> 32 `}renderModal(promotion,index,promotionId){const modalTitle=this.getFieldValue(promotion.fields,"modal_title"),modalContent=this.getFieldValue(promotion.fields,"modal_content"),modalImages=this.getFieldValue(promotion.fields,"modal_images");if(!modalTitle||!modalTitle.value)return"";let imagesHtml="",imageCounter=0;modalImages&&modalImages.references&&modalImages.references.nodes&&(imageCounter=modalImages.references.nodes.length,imagesHtml=modalImages.references.nodes.map((imageNode,idx
32)=>{if(imageNode.image){const aspectRatio=imageNode.image.width&&imageNode.image.height?imageNode.image.height/imageNode.image.width*100:100;return` 33 <li id="Slide-${idx+1}" class="collection-list__item grid__item slider__slide scroll-trigger animate--slide-in"> 34 <div class="promotion-gallery__item"> 35 <div class="media ratio" style="--ratio-percent: ${aspectRatio}%"> 36 <img src="${imageNode.image.url}" alt="${imageNode.image.altText||""}" 37 loading="lazy" width="${imageNode.image.width}" height="${imageNode.image.height}"> 38 </div> 39 </div> 40 </li> 41 `}return""}).join(""));let sliderControls="";imageCounter>1&&(sliderControls=` 42 <div class="slider-buttons"> 43 <button type="button" class="slider-button slider-button--prev" name="previous" 44 aria-label="Previous slide" aria-controls="Slider-${promotionId}"> 45 <!-- Icon would be here --> 46 </button> 47 <div class="slider-counter caption"> 48 <span class="slider-counter--current">1</span> 49 <span aria-hidden="true"> / </span> 50 <span class="visually-hidden">of</span> 51 <span class="slider-counter--total">${imageCounter}</span> 52 </div> 53 <button type="button" class="slider-button slider-button--next" name="next" 54 aria-label="Next slide" aria-controls="Slider-${promotionId}"> 55 <!-- Icon would be here --> 56 </button> 57 </div> 58 `);let contentHtml="";if(modalContent&&modalContent.value)try{const content=JSON.parse(modalContent.value);contentHtml=this.renderRichTextContent(content)}catch{contentHtml=modalContent.value}return` 59 <modal-dialog id="PopupModal-${index}-${promotionId}" class="product-popup-modal"> 60 <div role="dialog" aria-label="${modalTitle.value}" aria-modal="true" 61 class="product-popup-modal__content" tabindex="-1"> 62 <button id="ModalClose-${promotionId}" type="button" 63 class="product-popup-modal__toggle" aria-label="Close"> 64 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-close" fill="none" viewBox="0 0 18 17"> 65 <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor"> 66 </path></svg> 67 </button> 68 <div class="product-popup-modal__content-info"> 69 <div class="h2 center">${modalTitle.value}</div> 70 <div class="product-popup-modal__wrapper"> 71 <div class="grid grid--1-col grid--2-col-tablet grid--2-col-desktop"> 72 <div class="grid__item"> 73 <div class="promotion-gallery"> 74 <slider-component class="slider-mobile-gutter slider-component-full-width slider-component-desktop scroll-trigger animate--slide-in"> 75 <ul id="Slider-${promotionId}" data-id="${promotionId}" 76 class="grid grid--1-col-desktop grid--1-col-tablet-down slider slider--desktop slider--tablet" 77 role="list" aria-label="Gallery"> 78 ${imagesHtml} 79 </ul> 80 ${sliderControls} 81 </slider-component> 82 </div> 83 </div> 84 <div class="grid__item"> 85 ${contentHtml} 86 </div> 87 </div> 88 </div> 89 </div> 90 </div> 91 </modal-dialog> 92 `}renderRichTextContent(content){return!content||!content.children?"":content.children.map(child=>child.type==="paragraph"?`<p>${child.children.map(textNode=>{if(textNode.type==="text"){let text=textNode.value;return textNode.bold&&(text=`<strong>${text}</strong>`),text}return""}).join("")}</p>`:"").join("")}}customElements.define("rcc-product-promo",ProductPromoComponent)})(); 93//# sourceMappingURL=/cdn/shop/t/49/assets/rcc-product-promo.js.map?v=34309426236509224721786458256
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.