1import{AlgoliaProductCardRenderer}from"@lyle/algolia-product-card";import{algoliaProductAttributes,AlgoliaProductFetcher}from"@lyle/algolia-product-fetcher";import{buildAlgoliaFilters,clamp,escapeAlgoliaFilterValue,isPriceAttribute,rangeBounds,rangePercent,rangeStyle,rangeTicks,resolveFilterOptions}from"@lyle/algolia-filter-utils";import{algoliaUserToken,createMoneyFormatter,escapeHtml,formatMoney,imageUrl,parseJson,trackAlgoliaProductClick,trackAlgoliaProductConversion}from"@lyle/algolia-product-utils";import{getLocalisedRoute}from"@lyle/weglot";const ALGOLIA_QUERY_ENDPOINT=appId=>`https://${appId}-dsn.algolia.net/1/indexes/*/queries`,SELECTED_PRODUCT_KEY="selected_product_id",SELECTED_QUERY_KEY="queryId",HIDDEN_SALE_COOKIE="ls-can-view-hidden-sale",CATEGORY_FILTER_ATTRIBUTE="metafields.custom.product_categories",CATEGORY_PARENT_FILTER_ATTRIBUTE="metafields.custom.product_category",DRAWER_ANIMATION_MS=300,PANEL_ANIMATION_MS=180;class LyleMainCollection extends HTMLElement{#abortController=null;#cardRenderer=null;#closingPanel=null;#config=null;#drawerAnimationTimer=null;#fetcher=null;#hydratedSwatches=new WeakSet;#iconMarkup={};#moneyFormatter=null;#openingPanel=null;#panelAnimationTimer=null;#panelOpenAnimationTimer=null;#quickView=null;#quickViewPromise=null;#searchAbortController=null;#searchSequence=0;#state={facets:{},openPanel:null,page:0,pageSize:16,ranges:{},sortIndex:""};#lastResponse=null;#lastFacetResponse=null;#swatchObserver=null;connectedCallback(){this.#abortController=new AbortController,this.#config=this.#parseConfig(),this.#config&&(this.#state.pageSize=Number(this.#config.pagination.defaultPageSize)||16,this.#state.sortIndex=this.#config.algolia.indexName,this.#iconMarkup=window.icons||{},this.#moneyFormatter=this.#createMoneyFormatter(),this.#fetcher=new AlgoliaProductFetcher({config:this.#config,signal:this.#abortController.signal}),this.#cardRenderer=new AlgoliaProductCardRenderer({config:this.#config,hiddenSaleCookie:HIDDEN_SALE_COOKIE,icons:this.#iconMarkup,isMobile:()=>this.#isMobile()}),this.#state={...this.#state,...this.#stateFromUrl()},this.#bindEvents(),this.#handleHiddenSale(),this.#syncRelatedLinksActiveState(),this.#search())}disconnectedCallback(){this.#abortController?.abort(),this.#searchAbortController?.abort(),this.#swatchObserver?.disconnect(),window.clearTimeout(this.#drawerAnimationTimer),window.clearTimeout(this.#panelAnimationTimer),window.clearTimeout(this.#panelOpenAnimationTimer)}#parseConfig(){const script=this.querySelector("[data-main-collection-config]");if(!script?.textContent)return null;try{return JSON.parse(script.textContent)}catch{return null}}#bindEvents(){this.addEventListener("click",this.#handleClick,{signal:this.#abortController.signal}),document.addEventListener("pointerdown",this.#handleDocumentPointerDown,{signal:this.#abortController.signal}),this.addEventListener("change",this.#handleChange,{signal:this.#abortController.signal}),this.addEventListener("input",this.#handleInput,{signal:this.#abortController.signal}),this.addEventListener("toggle",this.#handleToggle,{signal:this.#abortController.signal}),window.addEventListener("popstate",this.#handlePopState,{signal:this.#abortController.signal}),window.addEventListener("resize",this.#handleResize,{signal:this.#abortController.signal})}#handleClick=event=>{const relatedLink=event.target.closest("a.related-links__button"),panelToggle=event.target.closest("[data-panel-toggle]"),facetOption=event.target.closest("[data-facet-value]"),rangeApply=event.target.closest("[data-range-apply]"),rangeReset=event.target.closest("[data-range-reset]"),sortOption=event.target.closest("[data-sort-value]"),pageSizeOption=event.target.closest("[data-page-size-value]"),activeFilter=event.target.closest("[data-active-filter]"),clearAll=event.target.closest("[data-clear-all], .main-collection__drawer-clear"),pagination=event.target.closest("[data-page]"),mobileFilters=event.target.closest("[data-main-collection-mobile-filters]"),drawerClose=event.target.closest("[data-main-collection-drawer-close], .main-collection__drawer-view-results"),productLink=event.target.closest("[data-product-link]"),quickView=event.target.closest("[data-quick-view]"),quickViewClose=event.target.closest("[data-quick-view-close]"),quickViewAdd=event.target.closest("[data-quick-view-add]"),quickViewArrow=event.target.closest("[data-quick-view-arrow]"),quickViewSize=event.target.closest("[data-quick-view-size]"),quickViewSwatch=event.target.closest("[data-quick-view-swatch]"),swatch=event.target.closest("[data-card-swatch]");
1if(relatedLink&&this.#applyRelatedLink(relatedLink)){event.preventDefault();return}if(panelToggle){event.preventDefault(),this.#togglePanel(panelToggle.dataset.panelToggle);return}if(facetOption){event.preventDefault(),this.#toggleFacet(facetOption.dataset.facetAttribute,facetOption.dataset.facetValue);return}if(rangeApply){event.preventDefault(),this.#applyRange(rangeApply.dataset.rangeAttribute);return}if(rangeReset){event.preventDefault(),this.#clearRange(rangeReset.dataset.rangeReset);return}if(sortOption){event.preventDefault(),this.#state.sortIndex=sortOption.dataset.sortValue,this.#state.page=0,this.#closePanels(),this.#search({updateUrl:!0});return}if(pageSizeOption){event.preventDefault(),this.#state.pageSize=Number(pageSizeOption.dataset.pageSizeValue)||this.#state.pageSize,this.#state.page=0,this.#closePanels(),this.#search({updateUrl:!0});return}if(activeFilter){event.preventDefault(),this.#removeActiveFilter(activeFilter);return}if(clearAll){event.preventDefault(),this.#state.facets={},this.#state.ranges={},this.#state.page=0,this.#search({updateUrl:!0});return}if(pagination){event.preventDefault(),this.#state.page=Number(pagination.dataset.page)||0,this.#search({updateUrl:!0,scroll:!0});return}if(mobileFilters){event.preventDefault(),this.#openDrawer();return}if(drawerClose){event.preventDefault(),this.#closeDrawer();return}if(quickView){event.preventDefault(),this.#openQuickView(quickView);return}if(quickViewClose){event.preventDefault(),this.#closeQuickView();return}if(quickViewAdd){event.preventDefault(),this.#addQuickViewProduct(quickViewAdd);return}if(quickViewArrow){event.preventDefault(),this.#scrollQuickViewGallery();return}if(quickViewSize){event.preventDefault(),this.#selectQuickViewVariant(quickViewSize);return}if(quickViewSwatch){event.preventDefault(),this.#selectQuickViewSwatch(quickViewSwatch);return}if(swatch){event.preventDefault(),this.#selectSwatch(swatch);return}productLink&&this.#selectProduct(productLink)};#handleDocumentPointerDown=event=>{if(!this.#state.openPanel)return;const toggle=this.#panelToggle(this.#state.openPanel),panel=this.#panelForToggle(toggle);event.target.closest("[data-main-collection-drawer]")||toggle?.contains(event.target)||panel?.contains(event.target)||this.#closePanels()};#handleResize=()=>{this.#positionOpenPanels()};#handleToggle=event=>{if(event.target.matches("[data-main-collection-drawer]")){event.newState==="closed"&&(event.target.classList.remove("is-open","is-closing"),document.body.style.overflow="");return}event.target.matches("[data-quick-view-overlay]")&&this.#quickView?.handleToggle(event)};#handleInput=event=>{const input=event.target.closest("[data-range-input], [data-range-text]");input&&this.#syncRangeControls(input)};#handleChange=event=>{const input=event.target.closest("[data-range-input], [data-range-text]");input&&this.#syncRangeControls(input,{commit:!0})};#handlePopState=()=>{this.#state={...this.#state,...this.#stateFromUrl()},this.#syncRelatedLinksActiveState(),this.#search({updateUrl:!1})};async#search(options={}){const{updateUrl=!1,scroll=!1}=options;if(!this.#config.algolia.appId||!this.#config.algolia.apiKey||!this.#state.sortIndex){this.#renderMissingAlgolia();return}this.#setLoading(!0),this.#searchAbortController?.abort();const searchAbortController=new AbortController,searchSequence=this.#searchSequence+1;this.#searchAbortController=searchAbortController,this.#searchSequence=searchSequence;try{const requests=[{indexName:this.#state.sortIndex,params:this.#buildAlgoliaParams().toString()},{indexName:this.#state.sortIndex,params:this.#buildFacetAlgoliaParams().toString()}],shouldRequestSubcategoryFacet=this.#hasCategorySelection()&&this.#resolvedFilterOptions().some(filter=>filter.value===CATEGORY_FILTER_ATTRIBUTE);shouldRequestSubcategoryFacet&&requests.push({indexName:this.#state.sortIndex,params:this.#buildFacetAlgoliaParams({attributes:[CATEGORY_FILTER_ATTRIBUTE],excludeFacetAttributes:[CATEGORY_FILTER_ATTRIBUTE],includeRefinements:!0}).toString()});const response=await fetch(ALGOLIA_QUERY_ENDPOINT(this.#config.algolia.appId),{method:"POST",headers:{"Content-Type":"application/json","X-Algolia-API-Key":this.#config.algolia.apiKey,"X-Algolia-Application-Id":this.#config.algolia.appId},body:JSON.stringify({requests}),signal:searchAbortController.signal});if(!response.ok)throw new Error("Algolia request failed");const payload=await response.json();if(searchAbortController.signal.aborted||searchSequence!==this.#searchSequence)return;this.#lastResponse=payload.results?.[0]||payload;const facetResponse=payload.results?.[1]||this.#lastResponse;shouldRequestSubcategoryFacet?this.#lastFacetResponse={...facetResponse,facets:{...facetResponse.facets||{},[CATEGORY_FILTER_ATTRIBUTE]:payload.results?.[2]?.facets?.[CATEGORY_FILTER_ATTRIBUTE]||{}}}:this.#lastFacetResponse=facetResponse,this.#render(),updateUrl&&this.#writeUrl(),scroll&&this.scrollIntoView({behavior:"smooth",block:"start"})}catch(error){error.name!=="AbortError"&&this.#renderError()}finally{searchSequence===this.#searchSequence&&this.#setLoading(!1)}}#buildAlgoliaParams(){const facets=this.#resolvedFilterOptions().map(filter=>filter.value),params=new URLSearchParams;return params.set("query",""),params.set("hitsPerPage",String(this.#state.pageSize)),params.set("page",String(this.#state.page)),params.set("filters",this.#buildFilters()),params.set("facets",JSON.stringify(facets)),params.set("maxValuesPerFacet","70"),params.set("clickAnalytics","true"),params.set("distinct","true"),params.set("facetingAfterDistinct","true"),params.set("ruleContexts",JSON.stringify([this.#config.collection.handle])),params.set("userToken",algoliaUserToken()),params.set("attributesToRetrieve",JSON.stringify(algoliaProductAttributes(this.#config.market.handle))),params.set("attributesToHighlight","[]"),params}#buildFacetAlgoliaParams(options={}){const{attributes=this.#resolvedFilterOptions().map(filter=>filter.value),excludeFacetAttributes=[],includeRefinements=!1}=options,params=new URLSearchParams;return params.set("query",""),params.set("hitsPerPage","0"),params.set("page","0"),params.set("filters",this.#buildFilters({excludeFacetAttributes,includeRefinements})),params.set("facets",JSON.stringify(attributes)),params.set("maxValuesPerFacet","70"),params.set("clickAnalytics","fal
1se"),params.set("distinct","true"),params.set("facetingAfterDistinct","true"),params.set("ruleContexts",JSON.stringify([this.#config.collection.handle])),params.set("userToken",algoliaUserToken()),params}#buildFilters(options={}){const{excludeFacetAttributes=[],...buildOptions}=options,excludedAttributes=new Set(excludeFacetAttributes),facets=Object.fromEntries(Object.entries(this.#state.facets).filter(([attribute])=>!excludedAttributes.has(attribute)));return buildAlgoliaFilters({baseFilters:[`collections.handle:"${escapeAlgoliaFilterValue(this.#config.collection.handle)}"`,this.#config.algolia.defaultFilters],facets,ranges:this.#state.ranges,...buildOptions})}#render(){const response=this.#lastResponse,facetResponse=this.#lastFacetResponse||response,hits=Array.isArray(response?.hits)?response.hits:[];this.#renderTitle(response?.nbHits||0),this.#renderSubtitle(),this.#renderToolbar(facetResponse),this.#renderActiveFilters(),this.#renderProducts(hits,response),this.#renderPagination(response),this.#renderDescription(),this.#isDrawerOpen()&&this.#renderDrawer(facetResponse)}#renderTitle(total){const totalElement=this.querySelector("[data-main-collection-total]");if(totalElement){if(total>0){totalElement.hidden=!1,totalElement.textContent=`/ ${total} ${this.#config.strings.items}`;return}totalElement.hidden=!0}}#renderSubtitle(){const subtitle=this.querySelector("[data-main-collection-subtitle]"),content=this.#dynamicDescription();subtitle.hidden=!content,subtitle.innerHTML=content}#renderToolbar(response){const toolbar=this.querySelector("[data-main-collection-toolbar]");if(!toolbar)return;const facetsMarkup=this.#resolvedFilterOptions().map(filter=>this.#renderFacet(filter,response)).join("");toolbar.innerHTML=` 2 <div class="algolia-filter"> 3 <div class="algolia-filter__inner"> 4 <div class="algolia-filter__facets-wrap"> 5 ${facetsMarkup} 6 </div> 7 8 <div class="algolia-filter__controls"> 9 ${this.#renderPageSizeControl()} 10 ${this.#renderSortControl()} 11 </div> 12 </div> 13 </div> 14 `,this.#positionOpenPanels()}#positionOpenPanels(){const toolbar=this.querySelector("[data-main-collection-toolbar]");if(!toolbar)return;const panels=toolbar.querySelectorAll(".main-collection__facet-panel, .main-collection__sort-panel, .main-collection__page-size-panel"),viewportWidth=document.documentElement.clientWidth,gutter=16;panels.forEach(panel=>{if(panel.classList.remove("is-flipped"),panel.hidden)return;panel.getBoundingClientRect().right>viewportWidth-gutter&&panel.classList.add("is-flipped")})}#renderDrawer(response){const drawerContent=this.querySelector("[data-main-collection-drawer-content]");drawerContent&&(drawerContent.innerHTML=this.#resolvedFilterOptions().map(filter=>this.#renderFacet(filter,response,{mobile:!0})).join(""),this.#syncMobileAccordions())}#renderFacet(filter,response,options={}){const{mobile=!1}=options,attribute=filter.value,panelId=`${mobile?"mobile-":""}facet-${this.#handleize(attribute)}`,isOpen=this.#state.openPanel===panelId,panelState=this.#panelState(panelId,{isOpen,mobile});if(isPriceAttribute(attribute))return this.#renderRangeFacet(filter,response,panelId,panelState);const facetValues=Object.entries(response?.facets?.[attribute]||{}).map(([value,count])=>({value,count})).sort((a,b)=>attribute==="sizesAvailable"?this.#sizeSort(a.value,b.value):b.count-a.count);if(!facetValues.length)return"";const isColour=this.#isColourAttribute(attribute),hasLongLabels=facetValues.some(facet=>this.#formatFacetLabel(attribute,facet.value).length>12),panelClasses=["main-collection__facet-panel","main-collection__facet-panel--options",isColour?"main-collection__facet-panel--colour":"",hasLongLabels||attribute==="sizesAvailable"?"main-collection__facet-panel--wide":"",panelState.className].filter(Boolean).join(" "),selectedCount=this.#facetSelectedCount(attribute),wrapperClasses=["main-collection__facet",mobile&&panelState.isOpen?"is-active":""].filter(Boolean).join(" ");return` 15 <div class="${this.#escapeHtml(wrapperClasses)}" data-facet="${this.#escapeHtml(attribute)}"> 16 <button 17 class="main-collection__facet-button text-eyebrow-2xs" 18 type="button" 19 data-panel-toggle="${this.#escapeHtml(panelId)}" 20 aria-expanded="${isOpen?"true":"false"}" 21 >
22 <span>${this.#escapeHtml(filter.label)}</span> 23 ${this.#icon("chevron-down")} 24 </button> 25 26 <div class="${this.#escapeHtml(panelClasses)}" ${panelState.isVisible?"":"hidden"}> 27 <ul class="main-collection__facet-list ${isColour?"main-collection__facet-list--colour":""}" role="list"> 28 ${facetValues.map(facet=>this.#renderFacetValue(attribute,facet)).join("")} 29 </ul> 30 31 ${this.#renderFacetFooter(attribute,selectedCount)} 32 </div> 33 </div> 34 `}#renderFacetValue(attribute,facet){const selected=this.#state.facets[attribute]?.includes(facet.value)||!1,isColour=this.#isColourAttribute(attribute),label=this.#formatFacetLabel(attribute,facet.value);return` 35 <li> 36 <button 37 class="main-collection__facet-option ${isColour?"main-collection__facet-option--colour":""} text-body-sm ${selected?"is-refined":""}" 38 type="button" 39 data-facet-attribute="${this.#escapeHtml(attribute)}" 40 data-facet-value="${this.#escapeHtml(facet.value)}" 41 aria-label="${this.#escapeHtml(`${label} (${String(facet.count).padStart(2,"0")})`)}" 42 > 43 ${isColour?this.#renderFacetSwatch(facet.value):'<span class="main-collection__facet-checkbox"></span>'} 44 <span class="${isColour?"main-collection__visually-hidden":""}">${this.#escapeHtml(label)}</span> 45 <span class="main-collection__facet-count text-body-sm">
45(${String(facet.count).padStart(2,"0")})</span> 46 </button> 47 </li> 48 `}#renderFacetFooter(attribute,selectedCount){return` 49 <div class="main-collection__facet-footer"> 50 <span class="main-collection__facet-selected text-eyebrow-2xs"> 51 ${this.#escapeHtml(this.#config.strings.selected.replace("__count__",selectedCount))} 52 </span> 53 54 <button class="main-collection__facet-reset text-eyebrow-2xs" type="button" data-active-filter data-filter-attribute="${this.#escapeHtml(attribute)}"> 55 ${this.#escapeHtml(this.#config.strings.reset)} 56 </button> 57 </div> 58 `}#facetSelectedCount(attribute){return this.#state.facets[attribute]?.length||0}#renderRangeFacet(filter,response,panelId,panelState){const attribute=filter.value,stats=response?.facets_stats?.[attribute];if(!stats||stats.min===stats.max)return"";const selected=this.#state.ranges[attribute]||{},bounds=rangeBounds(stats),min=selected.min??Math.floor(stats.min),max=selected.max??Math.ceil(stats.max),ticks=rangeTicks(bounds.min,bounds.max),wrapperClasses=["main-collection__facet",panelId.startsWith("mobile-")&&panelState.isOpen?"is-active":""].filter(Boolean).join(" ");return` 59 <div class="${this.#escapeHtml(wrapperClasses)}" data-facet="${this.#escapeHtml(attribute)}"> 60 <button 61 class="main-collection__facet-button text-eyebrow-2xs" 62 type="button" 63 data-panel-toggle="${this.#escapeHtml(panelId)}" 64 aria-expanded="${panelState.isOpen?"true":"false"}" 65 > 66 <span>${this.#escapeHtml(filter.label)}</span> 67 ${this.#icon("chevron-down")} 68 </button> 69 70 <div class="main-collection__facet-panel main-collection__facet-panel--range ${this.#escapeHtml(panelState.className)}" ${panelState.isVisible?"":"hidden"}> 71 <div 72 class="algolia-range-slider" 73 data-range-slider 74 data-range-attribute="${this.#escapeHtml(attribute)}" 75 data-range-min="${this.#escapeHtml(bounds.min)}" 76 data-range-max="${this.#escapeHtml(bounds.max)}" 77 style="${rangeStyle(min,max,bounds)}" 78 > 79 <div class="algolia-range-slider__inputs"> 80 ${this.#rangeTextInput(attribute,"min",min,bounds.min,max)} 81 <div class="algolia-range-slider__inputs-divider" aria-hidden="true"></div> 82 ${this.#rangeTextInput(attribute,"max",max,min,bounds.max)} 83 </div> 84 85 <div class="algolia-range-slider__wrap" role="group" aria-label="${this.#escapeHtml(filter.label)}"> 86 <label class="main-collection__visually-hidden" for="${this.#escapeHtml(panelId)}-min">${this.#escapeHtml(this.#config.strings.priceMin)}</label> 87 88 <input 89 id="${this.#escapeHtml(panelId)}-min" 90 aria-label="${this.#escapeHtml(this.#config.strings.priceMin)}" 91 data-range-input 92 data-range-attribute="${this.#escapeHtml(attribute)}" 93 data-range-side="min" 94 type="range" 95 min="${this.#escapeHtml(bounds.min)}" 96 max="${this.#escapeHtml(bounds.max)}" 97 step="1" 98 value="${this.#escapeHtml(min)}" 99 > 100 101 <label class="main-collection__visually-hidden" for="${this.#escapeHtml(panelId)}-max">${this.#escapeHtml(this.#config.strings.priceMax)}</label> 102 103 <input 104 id="${this.#escapeHtml(panelId)}-max" 105 aria-label="${this.#escapeHtml(this.#config.strings.priceMax)}" 106 data-range-input 107 data-range-attribute="${this.#escapeHtml(attribute)}" 108 data-range-side="max" 109 type="range" 110 min="${this.#escapeHtml(bounds.min)}" 111 max="${this.#escapeHtml(bounds.max)}" 112 step="1" 113 value="${this.#escapeHtml(max)}" 114 > 115 </div> 116 117 <div class="algolia-range-slider__indicators"> 118 ${ticks.map(tick=>` 119 <div class="algolia-range-slider__indicators-notch"> 120 <div class="algolia-range-slider__indicators-line"></div> 121 <p class="algolia-range-slider__indicators-value text-body-sm">${this.#escapeHtml(tick)}</p> 122 </div> 123 `).join("")} 124 </div> 125 </div> 126 127 <div class="main-collection__range-footer"> 128 <button class="main-collection__range-reset text-eyebrow-2xs" type="button" data-range-reset="${this.#escapeHtml(attribute)}"> 129 ${this.#escapeHtml(this.#config.strings.reset)} 130 </button> 131 </div> 132 </div> 133 </div> 134 `}#rangeTextInput(attribute,side,value,min,max){const label=side==="min"?this.#config.strings.priceMin:this.#config.strings.priceMax;return` 135 <div class="algolia-range-slider__inputs-wrapper">
136 <span class="algolia-range-slider__inputs-currency text-eyebrow-2xs">${this.#escapeHtml(this.#config.market.currencySymbol||"")}</span> 137 <input 138 aria-label="${label}" 139 class="algolia-range-slider__inputs-input text-body-sm" 140 data-range-text 141 data-range-attribute="${this.#escapeHtml(attribute)}" 142 data-range-side="${side}" 143 inputmode="numeric" 144 min="${this.#escapeHtml(min)}" 145 max="${this.#escapeHtml(max)}" 146 type="text" 147 value="${this.#escapeHtml(value)}" 148 > 149 </div> 150 `}#renderPageSizeControl(){const panelId="page-size",isOpen=this.#state.openPanel===panelId,panelState=this.#panelState(panelId,{isOpen});return` 151 <div class="main-collection__facet main-collection__page-size"> 152 <button class="main-collection__page-size-button text-eyebrow-2xs" type="button" data-panel-toggle="${panelId}" aria-expanded="${isOpen?"true":"false"}"> 153 <span>${this.#escapeHtml(this.#config.strings.pageSize.replace("__size__",this.#state.pageSize))}</span> 154 ${this.#icon("chevron-down")} 155 </button> 156 157 <div class="main-collection__page-size-panel ${this.#escapeHtml(panelState.className)}" ${panelState.isVisible?"":"hidden"}> 158 ${this.#config.pagination.pageSizes.map(pageSize=>` 159 <button class="main-collection__facet-option text-body-sm ${Number(pageSize)===this.#state.pageSize?"is-refined":""}" type="button" data-page-size-value="${this.#escapeHtml(pageSize)}"> 160 ${this.#escapeHtml(pageSize)} 161 </button> 162 `).join("")} 163 </div> 164 </div> 165 `}#renderSortControl(){const panelId="sort",isOpen=this.#state.openPanel===panelId,panelState=this.#panelState(panelId,{isOpen}),active=this.#config.algolia.sortByOptions.find(sort=>sort.value===this.#state.sortIndex)||this.#config.algolia.sortByOptions[0];return` 166 <div class="main-collection__facet"> 167 <button class="main-collection__sort-button text-eyebrow-2xs" type="button" data-panel-toggle="${panelId}" aria-expanded="${isOpen?"true":"false"}"> 168 <span>${this.#escapeHtml(active?.label||this.#config.strings.sortBy)}</span> 169 ${this.#icon("chevron-down")} 170 </button> 171 172 <div class="main-collection__sort-panel ${this.#escapeHtml(panelState.className)}" role="radiogroup" ${panelState.isVisible?"":"hidden"}> 173 ${this.#config.algolia.sortByOptions.map(sort=>` 174 <button class="main-collection__sort-option text-body-sm ${sort.value===this.#state.sortIndex?"is-refined":""}" type="button" data-sort-value="${this.#escapeHtml(sort.value)}" role="radio" aria-checked="${sort.value===this.#state.sortIndex?"true":"false"}"> 175 <span class="main-collection__facet-radio"></span> 176 <span>${this.#escapeHtml(sort.label)}</span> 177 </button> 178 `).join("")} 179 </div> 180 </div> 181 `}#renderActiveFilters(){const container=this.querySelector("[data-main-collection-active-filters]"),drawerContainer=this.querySelector("[data-main-collection-drawer-active-filters]"),drawerClear=this.querySelector(".main-collection__drawer-clear"),activeFilters=this.#activeFilters();if(!(!container&&!drawerContainer)){if(!activeFilters.length){container&&(container.hidden=!0,container.innerHTML=""),drawerContainer&&(drawerContainer.hidden=!0,drawerContainer.innerHTML=""),drawerClear&&(drawerClear.hidden=!0);return}container&&(container.hidden=!1,container.innerHTML=` 182 ${this.#activeFilterButtons(activeFilters,"main-collection__active-filter text-body-sm")} 183 184 <button class="main-collection__active-clear text-body-sm" type="button" data-clear-all> 185 ${this.#escapeHtml(this.#config.strings.clearAll)} 186 </button> 187 `),drawerContainer&&(drawerContainer.hidden=!1,drawerContainer.innerHTML=this.#activeFilterButtons(activeFilters,"main-collection__drawer-active-filter text-eyebrow-2xs")),drawerClear&&(drawerClear.hidden=!1)}}#activeFilters(){const activeFilters=[];
187return Object.entries(this.#state.facets).forEach(([attribute,values])=>{values.forEach(value=>{activeFilters.push({attribute,value,label:this.#formatFacetLabel(attribute,value)})})}),Object.entries(this.#state.ranges).forEach(([attribute,range])=>{range.min!==null&&range.min!==void 0&&range.min!==""&&activeFilters.push({attribute,label:`\u2265 ${this.#formatFacetLabel(attribute,range.min)}`,rangeSide:"min"}),range.max!==null&&range.max!==void 0&&range.max!==""&&activeFilters.push({attribute,label:`\u2264 ${this.#formatFacetLabel(attribute,range.max)}`,rangeSide:"max"})}),activeFilters}#activeFilterButtons(activeFilters,className){return activeFilters.map(filter=>` 188 <button 189 class="${this.#escapeHtml(className)}" 190 type="button" 191 data-active-filter 192 data-filter-attribute="${this.#escapeHtml(filter.attribute)}" 193 ${filter.value?`data-filter-value="${this.#escapeHtml(filter.value)}"`:""} 194 ${filter.rangeSide?`data-filter-range-side="${this.#escapeHtml(filter.rangeSide)}"`:""} 195 > 196 <span>${this.#escapeHtml(filter.label)}</span> 197 ${this.#icon("close")} 198 </button> 199 `).join("")}#renderProducts(hits,response){const grid=this.querySelector("[data-main-collection-grid]"),count=this.querySelector("[data-main-collection-product-count]");if(!grid)return;if(!hits.length){grid.innerHTML=`<p class="main-collection__empty text-body-md">${this.#escapeHtml(this.#config.strings.noProducts)}</p>`,count&&(count.hidden=!0);return}const banners=this.#mapContentBanners(response?.userData||[]),cards=[];hits.forEach((hit,index)=>{const position=(response.page||0)*(response.hitsPerPage||this.#state.pageSize)+index+1,product=this.#formatProduct(hit,{indexName:this.#state.sortIndex,position,queryID:response.queryID});cards.push(this.#cardRenderer.render(product,index));const banner=banners.get(position);banner&&cards.push(this.#renderContentBanner(banner))}),grid.innerHTML=cards.join(""),this.#hydrateCards(grid),count&&(count.hidden=!1,count.textContent=this.#config.strings.productCount.replace("__products__",String(hits.length)).replace("__total__",String(response.nbHits||hits.length)))}#renderContentBanner(banner){const layout=banner[`${this.#columnCount()}-grid-layout`]||banner["4-grid-layout"]||{},columnSpan=Math.min(Number(layout.column_span||1),this.#columnCount()===2?2:this.#columnCount()-1),rowSpan=Number(layout.row_span||1),imageSource=value=>typeof value=="string"?value:value?.src||"",desktopImage=imageSource(banner.imageDesktop)||imageSource(banner.image),mobileImage=imageSource(banner.imageMobile)||desktopImage,imageSrcset=source=>[400,800,1200].map(width=>`${imageUrl({src:source},width)} ${width}w`).join(","),mobileImageSizes=columnSpan>1?"100vw":"50vw",desktopImageSizes=`${columnSpan/this.#columnCount()*100}vw`,imageAlt=banner.imageDesktop?.alt||banner.imageMobile?.alt||banner.image?.alt||banner.bannerTitle||"",isLarge=columnSpan>1||rowSpan>1||banner.textSize==="large",eyebrow=banner.bannerEyebrow||banner.eyebrow||"",body=banner.bannerBody||banner.body||banner.description||"",countdown=banner.countdownText||banner.countdownLabel||banner.countdown||"",titleClass=isLarge?"text-title-serif-lg":"text-body-md",bannerClasses=["content-banner",isLarge?"content-banner--large":"content-banner--simple",rowSpan>1?"content-banner--tall":""].filter(Boolean).join(" "),horizontalAlignment=banner.horizontalAlignment||(isLarge?"center":"left"),verticalAlignment=banner.verticalAlignment||(isLarge?"center":"bottom"),defaultOverlayOpacity=isLarge?.4:.2,configuredOverlayOpacity=Number(banner.overlayOpacity),overlayOpacity=banner.overlayOpacity!==void 0&&banner.overlayOpacity!==null&&Number.isFinite(configuredOverlayOpacity)?clamp(configuredOverlayOpacity/100,0,1):defaultOverlayOpacity,styles=[`--column-span: ${columnSpan}`,`--row-span: ${rowSpan}`,banner.textColor?`--text-color: ${banner.textColor}`:"",`--overlay-opacity: ${overlayOpacity}`,`--horizontal-alignment: ${this.#alignmentValue(horizontalAlignment)}`,`--text-align: ${horizontalAlignment}`,`--vertical-alignment: ${this.#alignmentValue(verticalAlignment)}
199`].filter(Boolean).join(";"),imageHref=this.#safeHref(banner.imageLink||banner.bannerLink),buttonHref=this.#safeHref(banner.bannerLink),imageLinkLabel=imageAlt||banner.bannerLinkText||this.#config.strings.quickViewViewProduct,imageMarkup=` 200 <picture> 201 ${mobileImage?`<source media="(width < 1024px)" srcset="${this.#escapeHtml(imageSrcset(mobileImage))}" sizes="${mobileImageSizes}">`:""} 202 <img src="${this.#escapeHtml(imageUrl({src:desktopImage||mobileImage},1200))}" srcset="${this.#escapeHtml(imageSrcset(desktopImage||mobileImage))}" sizes="${desktopImageSizes}" alt="${this.#escapeHtml(imageAlt)}" loading="lazy"> 203 </picture> 204 `,buttonMarkup=buttonHref&&banner.bannerLinkText?` 205 <a class="button button--underlined ${isLarge?"":"button--no-icon"} content-banner__button" href="${this.#escapeHtml(buttonHref)}"> 206 <span class="button__label">${this.#escapeHtml(banner.bannerLinkText)}</span> 207 ${isLarge?`<span class="button__icon">${this.#icon("arrow-right")}</span>`:""} 208 </a> 209 `:"";return` 210 <div class="${this.#escapeHtml(bannerClasses)}" style="${this.#escapeHtml(styles)}"> 211 ${desktopImage||mobileImage?` 212 ${imageHref?`<a class="content-banner__image" href="${this.#escapeHtml(imageHref)}" aria-label="${this.#escapeHtml(imageLinkLabel)}">${imageMarkup}</a>`:`<div class="content-banner__image">${imageMarkup}</div>`} 213 `:""} 214 215 <div class="content-banner__content"> 216 <div class="content-banner__copy"> 217 ${isLarge&&eyebrow?`<p class="content-banner__eyebrow text-eyebrow-2xs">${this.#escapeHtml(eyebrow)}</p>`:""} 218 ${banner.bannerTitle?`<p class="content-banner__title ${titleClass}">${this.#escapeHtml(banner.bannerTitle)}</p>`:""} 219 ${isLarge&&body?`<p class="content-banner__body text-body-xs">${this.#escapeHtml(body)}</p>`:""} 220 ${isLarge&&countdown?`<p class="content-banner__countdown text-title-sans-md">${this.#escapeHtml(countdown)}</p>`:""} 221 </div> 222 223 ${buttonMarkup} 224 </div> 225 </div> 226 `}#safeHref(value){const href=String(value||"").trim();if(!href||/[\u0000-\u001F\u007F]/.test(href))return"";try{const url=new URL(href,window.location.origin);return url.protocol!=="http:"&&url.protocol!=="https:"?"":getLocalisedRoute(href)}catch{return""}}#renderPagination(response){const pagination=this.querySelector("[data-main-collection-pagination]"),totalPages=response?.nbPages||0;if(!pagination||totalPages<=1){pagination&&(pagination.hidden=!0,pagination.innerHTML="");return}pagination.hidden=!1,pagination.innerHTML=` 227 <button class="main-collection__pagination-button" type="button" aria-label="${this.#escapeHtml(this.#config.strings.previousPage)}" data-page="${Math.max(this.#state.page-1,0)}" ${this.#state.page===0?"disabled":""}>${this.#icon("chevron-left")}</button> 228 ${this.#visiblePages(this.#state.page,totalPages).map(page=>page===null?'<span class="main-collection__pagination-ellipsis text-body-sm">...</span>':`<button class="main-collection__pagination-button text-body-sm ${page===this.#state.page?"is-active":""}" type="button" data-page="${page}">${page+1}</button>`).join("")} 229 <button class="main-collection__pagination-button" type="button" aria-label="${this.#escapeHtml(this.#config.strings.nextPage)}" data-page="${Math.min(this.#state.page+1,totalPages-1)}" ${this.#state.page>=totalPages-1?"disabled":""}>${this.#icon("chevron-right")}</button> 230 `}#renderDescription(){const description=this.querySelector("[data-main-collection-description]");if(!description)return;const content=this.#config.collection.description||"";description.hidden=!content,description.innerHTML=content}#renderMissingAlgolia(){this.querySelector("[data-main-collection-grid]")&&this.#setLoading(!1)}#renderError(){const grid=this.querySelector("[data-main-collection-grid]");grid&&(grid.innerHTML=`<p class="main-collection__empty text-body-md">${this.#escapeHtml(this.#config.strings.noProducts)}</p>`)}#hydrateCards(scope){const cards=scope.matches?.("[data-product-card]")?[scope]:[...scope.querySelectorAll("[data-product-card]")],productsByCard=new Map,familyTags=[];cards.forEach(card=>{const product=this.#cardProduct(card);if(!product)return;const familyTag=this.#fetcher.familyTag(product);productsByCard.set(card,product),familyTag&&familyTags.push(familyTag)}),this.#prefetchCardSwatches(familyTags),productsByCard.forEach((product,card)=>{this.#observeCardSwatches(card,product)})}#prefetchCardSwatches(familyTags){familyTags.length&&this.#fetcher.fetchRelatedProductsBatch(familyTags)}#observeCardSwatches(card,product){if(!(this.#hydratedSwatches.has(card)||!this.#fetcher.familyTag(product))){if
230(!("IntersectionObserver"in window)){this.#hydrateCardSwatches(card);return}this.#swatchObserver||(this.#swatchObserver=new IntersectionObserver(entries=>{entries.forEach(entry=>{entry.isIntersecting&&(this.#swatchObserver?.unobserve(entry.target),this.#hydrateCardSwatches(entry.target))})},{rootMargin:"600px 0px"})),this.#swatchObserver.observe(card)}}async#hydrateCardSwatches(card){if(this.#hydratedSwatches.has(card))return;this.#hydratedSwatches.add(card);const product=this.#cardProduct(card);if(!product)return;const familyTag=this.#fetcher.familyTag(product);if(!familyTag)return;const relatedProducts=(await this.#fetcher.fetchRelatedProductsBatch([familyTag])).get(familyTag)||[];card.isConnected&&this.#cardRenderer.renderSwatches(card,product,this.#fetcher.filterColourProducts(product,relatedProducts))}#selectSwatch(swatch){const card=swatch.closest("[data-product-card]"),product=this.#parseJson(swatch.dataset.product);if(!card||!product)return;const currentProduct=this.#cardProduct(card),selectedProduct={...product,__indexName:currentProduct?.__indexName||product.__indexName,__position:currentProduct?.__position||product.__position,__queryID:currentProduct?.__queryID||product.__queryID},index=Number(card.dataset.productIndex)||0,rendered=this.#cardRenderer.render(selectedProduct,index),template=document.createElement("template");template.innerHTML=rendered.trim();const newCard=template.content.firstElementChild;newCard&&(card.replaceWith(newCard),this.#hydrateCards(newCard),this.#hydrateCardSwatches(newCard))}async#openQuickView(button){this.#quickViewPromise||(this.#quickViewPromise=import("@lyle/algolia-product-card-quick-view"));const{AlgoliaProductCardQuickView}=await this.#quickViewPromise;this.isConnected&&(this.#quickView||(this.#quickView=new AlgoliaProductCardQuickView({callbacks:{cardProduct:card=>this.#cardProduct(card),familyTag:product=>this.#fetcher.familyTag(product),fetchProductJson:handle=>this.#fetcher.fetchProductJson(handle),fetchRelatedProductsBatch:tags=>this.#fetcher.fetchRelatedProductsBatch(tags),filterColourProducts:(product,relatedProducts)=>this.#fetcher.filterColourProducts(product,relatedProducts),formatMoney:value=>this.#formatMoney(value),sendConversionEvent:quickViewButton=>this.#sendConversionEvent(quickViewButton)},config:this.#config,icons:this.#iconMarkup,root:this})),await this.#quickView.open(button))}#closeQuickView(){this.#quickView?.close()}#selectQuickViewVariant(button){this.#quickView?.selectVariant(button)}#selectQuickViewSwatch(button){this.#quickView?.selectSwatch(button)}#addQuickViewProduct(button){this.#quickView?.add(button)}#scrollQuickViewGallery(){this.#quickView?.scrollGallery()}#selectProduct(link){this.#rememberSelectedProduct(link),this.#sendClickEvent(link)}#rememberSelectedProduct(element){const productId=element.closest("[data-product-card]")?.dataset.productId;try{productId&&sessionStorage.setItem(SELECTED_PRODUCT_KEY,productId),element.dataset.queryId?sessionStorage.setItem(SELECTED_QUERY_KEY,element.dataset.queryId):sessionStorage.removeItem(SELECTED_QUERY_KEY)}catch{}}#formatProduct(hit,options={}){return this.#fetcher.formatProduct(hit,options)}#dynamicDescription(){const descriptions=this.#config.collection.descriptions||[],threshold=this.#config.market.giftThreshold||0;if(!descriptions.length)return this.#replaceDescriptionPlaceholders(this.#config.collection.bannerSubtitle||"",threshold);const activeValues=Object.values(this.#state.facets).flat(),filterMatch=descriptions.filter(description=>{const required=Array.isArray(description.requiredFilters)?description.requiredFilters:[];return required.length&&required.every(filter=>activeValues.includes(filter))}).sort((a,b)=>(b.requiredFilters?.length||0)-(a.requiredFilters?.length||0))[0];return this.#replaceDescriptionPlaceholders(filterMatch?.description||this.#config.collection.bannerSubtitle||"",threshold)}#replaceDescriptionPlaceholders(text,threshold=0){return text?String(text).replace(/\{currency_symbol\}/gi,this.#config.market.currencySymbol||"").replace(/\{currency_code\}/gi,this.#config.market.currencyCode||"").replace(/\{market_handle\}/gi,this.#config.market.handle||"").replace(/\{(?:fgwp_)?threshold\}/gi,()=>threshold):""}#stateFromUrl(search=window.location.search){const params=new URLSearchParams(search),state={facets:{},page:0,ranges:{}};if(params.get("page")&&(state.page=this.#pageIndexFromParam(params.get("page"))),params.get("page_size")&&(state.pageSize=Number(params.get("page_size"))||this.#state.pageSize),params.get("sort")){const sort=this.#config.algolia.sortByOptions.find(option=>option.id===params.get("sort"));state.sortIndex=sort?.value||this.#state.sortIndex}
230return this.#resolvedFilterOptions(!0).forEach(filter=>{const key=this.#urlKey(filter),value=params.get(key);if(value){if(isPriceAttribute(filter.value)&&value.includes(":")){const[min,max]=value.split(":");state.ranges[filter.value]={min,max};return}state.facets[filter.value]=value.split(",").map(item=>this.#unCleanValue(item,filter.value)).filter(Boolean)}}),state}#pageIndexFromParam(value){const page=Number(value);return!Number.isInteger(page)||page<1?0:page-1}#writeUrl(){const params=new URLSearchParams;this.#state.page>0&¶ms.set("page",String(this.#state.page+1)),this.#state.pageSize!==Number(this.#config.pagination.defaultPageSize)&¶ms.set("page_size",String(this.#state.pageSize));const sort=this.#config.algolia.sortByOptions.find(option=>option.value===this.#state.sortIndex);sort&&sort.id!=="relevance"&¶ms.set("sort",sort.id),this.#resolvedFilterOptions().forEach(filter=>{const key=this.#urlKey(filter);if(this.#state.facets[filter.value]?.length&¶ms.set(key,this.#state.facets[filter.value].map(value=>this.#cleanValue(value,filter.value)).join(",")),this.#state.ranges[filter.value]){const range=this.#state.ranges[filter.value];params.set(key,`${range.min||""}:${range.max||""}`)}});const query=params.toString(),url=query?`${window.location.pathname}?${query}`:window.location.pathname;window.history.pushState({},"",url),this.#syncRelatedLinksActiveState()}#applyRelatedLink(link){let url;try{url=new URL(link.href,window.location.href)}catch{return!1}return url.pathname!==window.location.pathname?!1:(this.#state={...this.#state,...this.#stateFromUrl(url.search)},this.#search({updateUrl:!0}),!0)}#syncRelatedLinksActiveState(){const current=new URL(window.location.href),ignoreKeys=new Set(["page","page_size","sort"]);this.querySelectorAll(".main-collection__quick-links").forEach(group=>{const links=[...group.querySelectorAll("a.related-links__button")];let bestScore=-1;const bestLinks=[];for(const link of links){const score=this.#relatedLinkMatchScore(link.getAttribute("href"),current,ignoreKeys);if(!(score<0)){if(score>bestScore){bestScore=score,bestLinks.length=0,bestLinks.push(link);continue}score===bestScore&&bestLinks.push(link)}}for(const link of links){const active=bestLinks.includes(link);link.classList.toggle("is-active",active),active?link.setAttribute("aria-current","page"):link.removeAttribute("aria-current")}})}#relatedLinkMatchScore(href,current,ignoreKeys){let linkUrl;try{linkUrl=new URL(href,current.href)}catch{return-1}if(linkUrl.pathname!==current.pathname)return-1;const linkParams=[...linkUrl.searchParams.entries()].map(([key,value])=>[key.toLowerCase(),value]).filter(([key])=>!ignoreKeys.has(key)),currentValues=this.#paramValuesByKey(current.searchParams,ignoreKeys);if(linkParams.length===0)return[...currentValues.keys()].length===0?0:-1;for(const[key,value]of linkParams){const values=currentValues.get(key);if(!values||!value.split(",").map(item=>this.#normalizeRelatedLinkParamValue(item)).filter(Boolean).every(item=>values.has(item)))return-1}return linkParams.length}#paramValuesByKey(searchParams,ignoreKeys){const valuesByKey=new Map;for(const[rawKey,value]of searchParams.entries()){const key=rawKey.toLowerCase();if(!ignoreKeys.has(key)){valuesByKey.has(key)||valuesByKey.set(key,new Set);for(const item of value.split(",")){const normalized=this.#normalizeRelatedLinkParamValue(item);normalized&&valuesByKey.get(key).add(normalized)}}}return valuesByKey}#normalizeRelatedLinkParamValue(value){try{return decodeURIComponent(String(value)).trim().replace(/ /g,"-")}catch{return String(value).trim().replace(/ /g,"-")}}#panelState(panelId,options={}){const{isOpen=!1,mobile=!1}=options,isClosing=!mobile&&this.#closingPanel===panelId,isOpening=!mobile&&this.#openingPanel===panelId;return{className:mobile?isOpen?"is-open":"":isClosing?"is-closing":isOpening?"is-opening":isOpen?"is-open":"",isClosing,isOpen,isVisible:mobile||isOpen||isClosing}}#togglePanel(panelId){if(panelId.startsWith("mobile-")){this.#state.openPanel=this.#state.openPanel===panelId?null:panelId,this.#syncMobileAccordions();return}const previousPanel=this.#state.openPanel;if(window.clearTimeout(this.#panelAnimationTimer),window.clearTimeout(this.#panelOpenAnimationTimer),previousPanel===panelId){this.#closingPanel=panelId,this.#openingPanel=null,this.#state.openPanel=null,this.#syncDesktopPanels([panelId]),this.#schedulePanelCloseCleanup(panelId);return}this.#closingPanel=previousPanel,this.#openingPanel=panelId,this.#state.openPanel=panelId,this.#syncDesktopPanels([previousPanel,panelId]),this.#schedulePanelOpenCleanup(panelId),previousPanel&&this.#schedulePanelCloseCleanup(previousPanel)}#closePanels(){const panelId=this.#state.openPanel;if(this.#state.openPanel&&(this.#closingPanel=this.#state.openPanel,this.#schedulePanelCloseCleanup(this.#closingPanel)),this.#openingPanel=null,this.#state.openPanel=null,panelId?.startsWith("mobile-")){this.#syncMobileAccordions();return}this.#syncDesktopPanels([panelId])}#syncMobileAccordions(){const drawer=this.querySelector("[data-main-collection-drawer]");drawer&&drawer.querySelectorAll('[data-panel-toggle^="mobile-"]').forEach(toggle=>{const isOpen=toggle.dataset.panelToggle===this.#state.openPanel,facet=toggle.closest(".main-collection__facet"),panel=facet?.querySelector(".main-collection__facet-panel");toggle.setAttribute("aria-expanded",isOpen?"true":"false"),panel?.style.setProperty("--mobile-panel-height",`${panel.scrollHeight}px`),facet?.classList.toggle("is-active",isOpen),panel?.classList.toggle("is-open",isOpen)})}#schedulePanelCloseCleanup(panelId){this.#panelAnimationTimer=window.setTimeout(()=>{this.#closingPanel===panelId&&(this.#closingPanel=null,this.#syncDesktopPanels([panelId]))}
230,PANEL_ANIMATION_MS)}#schedulePanelOpenCleanup(panelId){this.#panelOpenAnimationTimer=window.setTimeout(()=>{this.#openingPanel===panelId&&(this.#openingPanel=null,this.#syncDesktopPanels([panelId]))},PANEL_ANIMATION_MS)}#syncDesktopPanels(panelIds){[...new Set(panelIds.filter(Boolean))].forEach(panelId=>{const toggle=this.#panelToggle(panelId),panel=this.#panelForToggle(toggle),panelState=this.#panelState(panelId,{isOpen:this.#state.openPanel===panelId});!toggle||!panel||(toggle.setAttribute("aria-expanded",panelState.isOpen?"true":"false"),panel.hidden=!panelState.isVisible,panel.classList.remove("is-open","is-opening","is-closing"),panelState.className&&panel.classList.add(panelState.className))}),this.#positionOpenPanels()}#panelToggle(panelId){return[...this.querySelectorAll("[data-main-collection-toolbar] [data-panel-toggle]")].find(toggle=>toggle.dataset.panelToggle===panelId)}#panelForToggle(toggle){return toggle?.closest(".main-collection__facet")?.querySelector(".main-collection__facet-panel, .main-collection__sort-panel, .main-collection__page-size-panel")}#toggleFacet(attribute,value){this.#openingPanel=null;const values=this.#state.facets[attribute]||[];values.includes(value)?this.#state.facets[attribute]=values.filter(item=>item!==value):this.#state.facets[attribute]=[...values,value],this.#state.facets[attribute].length||delete this.#state.facets[attribute],this.#state.page=0,this.#search({updateUrl:!0})}#syncRangeControls(input,options={}){const{commit=!1}=options,slider=input.closest("[data-range-slider]");if(!slider?.dataset.rangeAttribute)return;const attribute=slider.dataset.rangeAttribute,minAllowed=Number(slider.dataset.rangeMin||0),maxAllowed=Number(slider.dataset.rangeMax||0),minRange=slider.querySelector('[data-range-input][data-range-side="min"]'),maxRange=slider.querySelector('[data-range-input][data-range-side="max"]'),minText=slider.querySelector('[data-range-text][data-range-side="min"]'),maxText=slider.querySelector('[data-range-text][data-range-side="max"]'),side=input.dataset.rangeSide;let min=Number(minRange?.value||minAllowed),max=Number(maxRange?.value||maxAllowed);const rawValue=input.value.trim();if(!commit&&input.matches("[data-range-text]")&&rawValue==="")return;const inputValue=Number(rawValue);Number.isFinite(inputValue)&&(side==="min"?min=clamp(inputValue,minAllowed,max):max=clamp(inputValue,min,maxAllowed)),min=Math.round(clamp(min,minAllowed,maxAllowed)),max=Math.round(clamp(max,minAllowed,maxAllowed)),min>max&&(side==="min"?min=max:max=min);const bounds={min:minAllowed,max:maxAllowed};minRange&&(minRange.value=String(min)),maxRange&&(maxRange.value=String(max)),minText&&(minText.value=String(min),minText.max=String(max)),maxText&&(maxText.value=String(max),maxText.min=String(min)),slider.style.setProperty("--range-start",`${rangePercent(min,bounds)}%`),slider.style.setProperty("--range-end",`${rangePercent(max,bounds)}%`),commit&&(this.#openingPanel=null,this.#state.ranges[attribute]={min:String(min),max:String(max)},this.#state.page=0,this.#search({updateUrl:!0}))}#applyRange(attribute){this.#openingPanel=null;const minInput=this.querySelector(`[data-range-input][data-range-attribute="${attribute}"][data-range-side="min"]`),maxInput=this.querySelector(`[data-range-input][data-range-attribute="${attribute}"][data-range-side="max"]`);this.#state.ranges[attribute]={min:minInput?.value||"",max:maxInput?.value||""},this.#state.page=0,this.#search({updateUrl:!0})}#clearRange(attribute){this.#openingPanel=null,delete this.#state.ranges[attribute],this.#state.page=0,this.#search({updateUrl:!0})}#removeActiveFilter(button){const attribute=button.dataset.filterAttribute,value=button.dataset.filterValue,rangeSide=button.dataset.filterRangeSide;attribute&&(rangeSide&&this.#state.ranges[attribute]?(delete this.#state.ranges[attribute][rangeSide],!this.#state.ranges[attribute].min&&!this.#state.ranges[attribute].max&&delete this.#state.ranges[attribute]):value&&this.#state.facets[attribute]?(this.#state.facets[attribute]=this.#state.facets[attribute].filter(item=>item!==value),this.#state.facets[attribute].length||delete this.#state.facets[attribute]):(delete this.#state.facets[attribute],delete this.#state.ranges[attribute]),this.#state.page=0,this.#search({updateUrl:!0}))}#openDrawer(){const drawer=this.querySelector("[data-main-collection-drawer]");drawer&&(window.clearTimeout(this.#drawerAnimationTimer),this.#state.openPanel=null,this.#renderDrawer(this.#lastFacetResponse||this.#lastResponse),drawer.classList.remove("is-closing"),document.body.style.overflow="hidden",typeof drawer.showPopover=="function"?drawer.matches(":popover-open")||drawer.showPopover():drawer.classList.add("is-open"))}#isDrawerOpen(){const drawer=this.querySelector("[data-main-collection-drawer]");return!!(drawer?.matches(":popover-open")||drawer?.classList.contains("is-open")||drawer?.classList.contains("is-closing"))}#closeDrawer(){const drawer=this.querySelector("[data-main-collection-drawer]");if(drawer){if(window.clearTimeout(this.#drawerAnimationTimer),typeof drawer.hidePopover=="function"){drawer.matches(":popover-open")&&drawer.hidePopover(),document.body.style.overflow="";return}drawer.classList.remove("is-open"),drawer.classList.add("is-closing"),this.#drawerAnimationTimer=window.setTimeout(()=>{drawer.classList.remove("is-closing"),document.body.style.overflow=""},DRAWER_ANIMATION_MS)}}
230#setLoading(isLoading){this.toggleAttribute("aria-busy",isLoading)}#resolvedFilterOptions(includeConditional=!1){return resolveFilterOptions({filterOptions:this.#config.algolia.filterOptions||[],includeFilter:filter=>filter.value===CATEGORY_FILTER_ATTRIBUTE?includeConditional||this.#hasCategorySelection():!!filter.value,marketHandle:this.#config.market.handle})}#hasCategorySelection(){return!!this.#state.facets[CATEGORY_PARENT_FILTER_ATTRIBUTE]?.length}#urlKey(filter){return filter.label.toLowerCase()}#cleanValue(value,attribute){return this.#isColourAttribute(attribute)?String(value):String(value).replace(/ /g,"-")}#unCleanValue(value,attribute){let decodedValue=String(value);try{decodedValue=decodeURIComponent(decodedValue.replace(/\+/g," "))}catch{decodedValue=String(value)}if(this.#isColourAttribute(attribute))return decodedValue;const parts=decodedValue.split("-");if(parts.length<=1)return decodedValue;const trimmedParts=parts.map(part=>part.trim());if(!trimmedParts.every(part=>part.length>0&&!part.includes(" ")&&/^[a-zA-Z0-9'&/]+$/.test(part)))return decodedValue;let result=trimmedParts[0];for(let index=1;index<trimmedParts.length;index+=1){const previous=trimmedParts[index-1],current=trimmedParts[index],separator=/^[A-Za-z]$/.test(previous)&&/^[A-Za-z]/.test(current)?"-":" ";result+=`${separator}${current}`}return result}#formatFacetLabel(attribute,value){if(this.#isColourAttribute(attribute)){const parts=String(value).split("-");return parts.length>2?`${parts[0]}/${parts[2]}`:parts[0]||value}return isPriceAttribute(attribute)?this.#formatMoneyWithoutDecimals(value):value}#isColourAttribute(attribute){const normalized=attribute.toLowerCase();return normalized.includes("colour")||normalized==="color"}#renderFacetSwatch(value){const parts=String(value).split("-"),color=parts[1]||"#ffffff",colorTwo=parts[3]||"";return`<span class="main-collection__swatch" style="--swatch-color: ${this.#escapeHtml(color)}; ${colorTwo?`background: linear-gradient(90deg, ${this.#escapeHtml(color)} 50%, ${this.#escapeHtml(colorTwo)} 50%)`:""}"></span>`}#mapContentBanners(userData){const banners=new Map;return(Array.isArray(userData)?userData:[]).forEach(banner=>{const layout=banner[`${this.#columnCount()}-grid-layout`]||banner["4-grid-layout"]||{},position=Number(layout.position||banner.position||0);position>0&&banners.set(position,banner)}),banners}#visiblePages(currentPage,totalPages){return totalPages<=6?Array.from({length:totalPages},(_,index)=>index):currentPage<3?[0,1,2,3,null,totalPages-1]:currentPage>totalPages-4?[0,null,totalPages-4,totalPages-3,totalPages-2,totalPages-1]:[0,null,currentPage-1,currentPage,currentPage+1,null,totalPages-1]}#sendClickEvent(link){trackAlgoliaProductClick(this.#config,this.#state.sortIndex,link)}#sendConversionEvent(button){trackAlgoliaProductConversion(this.#config,this.#state.sortIndex,button)}#handleHiddenSale(){if(!location.search.includes("hidden-sale=true"))return;const expires=new Date;expires.setTime(expires.getTime()+5760*60*1e3),document.cookie=`${HIDDEN_SALE_COOKIE}=true;expires=${expires.toUTCString()};path=/`}#cardProduct(card){const script=card.querySelector("[data-card-product], [data-product-card-json]");return this.#parseJson(script?.textContent)}#parseJson(value){return parseJson(value)}#formatMoney(value){return formatMoney(value,{currencySymbol:this.#config.market.currencySymbol,formatter:this.#moneyFormatter})}#formatMoneyWithoutDecimals(value){const amount=Math.round(Number(value||0));try{return new Intl.NumberFormat(this.#config.market.language||void 0,{style:"currency",currency:this.#config.market.currencyCode,maximumFractionDigits:0,minimumFractionDigits:0}).format(amount)}catch{return`${this.#config.market.currencySymbol}${amount}`}}#createMoneyFormatter(){return createMoneyFormatter(this.#config.market)}#sizeSort(a,b){const order=["XS","S","M","L","XL","XXL","1XL","2XL","3XL","4XL","5XL","1SZ","M/L","L/XL","3","4","5","6","7","7.5","8","8.5","9","9.5","10","10.5","11","12","13","14","28","29","30","31","32","33","34","36","38","40","28 / 30","28 / 32","30 / 30","30 / 32","30 / 34","32 / 30","32 / 32","32 / 34","34 / 30","34 / 32","34 / 34","36 / 30","36 / 32","36 / 34","38 / 32","0-3 M","3-6 M","6-9 M","9-12 M","3/4 Y","5/6 Y","7/8 Y","8/9 Y","9/10 Y","10/11 Y","12/13 Y","14/15 Y","15/16 Y"],aIndex=order.indexOf(a),bIndex=order.indexOf(b);return aIndex!==-1&&bIndex!==-1?aIndex-bIndex:aIndex!==-1?-1:bIndex!==-1?1:String(a).localeCompare(String(b),void 0,{numeric:!0})}#columnCount(){return this.#isMobile()?2:Number(localStorage.getItem("--column-count"))||4}#isMobile(){return window.matchMedia("(width < 1024px)").matches}#alignmentValue(value){return{bottom:"flex-end",center:"center",left:"flex-start",right:"flex-end",top:"flex-start"}[value]||value}#imageUrl(image,width){return imageUrl(image,width)}#handleize(value){return String(value).toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/(^-|-$)/g,"")}#escapeHtml(value){return escapeHtml(value)}#icon(name){return this.#iconMarkup[name]||""}}customElements.get("lyle-main-collection")||customElements.define("lyle-main-collection",LyleMainCollection); 231//# sourceMappingURL=/cdn/shop/t/458/assets/lyle-main-collection.js.map?v=28379820328686920321788364385
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.