https://www.ohpolly.com/cdn/shop/t/1735/assets/template-facet-accordion.js?v=114854313367302324381782908375

1const ICON_PLUS='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 9"><path fill="currentColor" d="M4 0h1v9H4z"/><path fill="currentColor" d="M0 4h9v1H0z"/></svg>';function FacetAccordion(params,index){if(!params)return"";const props={field:params.field||"",name:params.name||"",type:params.type||"",values:params.data||[],id:params.id||"",index:index||0,min:params.min,max:params.max};if(props.activeCount=props.values.filter(data=>data.selected)?.length||0,props.field==="price"){const urlParams=new URLSearchParams(window.location.search);props.activeCount=urlParams.has("price")?1:0}let innerTemplate="";if(window.theme.nosto.priceFacets.includes(props.field)||window.theme.nosto.priceFacets.includes(props.type))innerTemplate=renderPriceFacet(props);else if(window.theme.nosto.colourFacets.includes(props.field))innerTemplate=renderColourFacet(props);else{const sizeFacet=window.theme.nosto.sizeFacets.includes(props.field);innerTemplate=renderDefaultFacet(props,sizeFacet)}const id=`facet-${props.field}`,propName=props.name;return`
2    <div class="drw-ProductGridFacets_Item">
3      <button
4        class="drw-ProductGridFacets_Trigger fz-14_140"
5        type="button"
6        aria-controls="${id}"
7        data-accordion-group-el="trigger"
8        aria-expanded="${props.activeCount?"true":"false"}"
9        data-results-filters-el="facet"
10        data-index="${id}"
11      >
12        ${propName}
13        ${props.activeCount?`(${props.activeCount})`:""}
14
15        <span class="drw-ProductGridFacets_TriggerIcon">
16          ${ICON_PLUS}
17        </span>
18      </button>
19
20      <div
21        id="${id}"
22        class="drw-ProductGridFacets_Accordion"
23        aria-hidden="${props.activeCount?"false":"true"}"
24        data-accordion-group-el="content"
25        data-results-filters-el="facet"
26        data-index="results-${props.index}-content"
27      >
28        <div class="drw-ProductGridFacets_AccordionContent">
29          ${innerTemplate}
30        </div>
31      </div>
32    </div>
33  `}function renderPriceFacet(params){const priceParam=new URLSearchParams(window.location.search).get("price");let activeMin=null,activeMax=null;if(priceParam){const parts=priceParam.split("~");if(parts.length===2){const parsedMin=parseFloat(parts[0]),parsedMax=parseFloat(parts[1]);Number.isFinite(parsedMin)&&Number.isFinite(parsedMax)&&(activeMin=parsedMin,activeMax=parsedMax)}}let boundsMin=Math.floor(params.min??0);const boundsMax=Math.ceil(params.max??0);if((!Number.isFinite(boundsMin)||boundsMin<0)&&(boundsMin=0),boundsMax<boundsMin&&(boundsMin=boundsMax),activeMin!==null&&(activeMin=Math.min(Math.max(activeMin,boundsMin),boundsMax)),activeMax!==null&&(activeMax=Math.min(Math.max(activeMax,boundsMin),boundsMax)),activeMin!==null&&activeMax!==null&&activeMin>activeMax){const t=activeMin;activeMin=activeMax,activeMax=t}const props={max:boundsMax,maxValue:activeMax||"",min:boundsMin,minValue:activeMin||"",name:params.name||""},format=window.theme.moneyFormat.replace("amount","amount_no_decimals");return props.maxFormatted=props.maxValue?window.BAO.Utils.formatMoney(props.maxValue*100,format):window.BAO.Utils.formatMoney(props.max*100,format),props.minFormatted=window.BAO.Utils.formatMoney(props.minValue*100,format),`
34    <range-slider
35      class="clc-PriceRange"
36      min="0"
37      max="${props.max}"
38      ${props.minValue?`min-value="${props.minValue}`:""}
39      ${props.maxValue?`max-value="${props.maxValue}`:""}
40    >
41      <div class="clc-PriceRange_Slider">
42        <button
43          class="clc-PriceRange_Dot clc-PriceRange_Dot-left"
44          type="button"
45          tabindex="-1"
46          aria-hidden="true"
47          aria-label="${props.minFormatted}"
48          data-range-slider-el="touchLeft"
49        >
50          <span class="clc-PriceRange_Arrow">
51            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 8">
52              <path fill="currentColor" d="M0 8V0l5.38 3.584a.5.5 0 0 1 0 .832z"/>
53            </svg>
54          </span>
55        </button>
56
57        <button
58          class="clc-PriceRange_Dot clc-PriceRange_Dot-right"
59          type="button"
60          tabindex="-1"
61          aria-hidden="true"
62          aria-label="${props.maxFormatted}"
63          data-range-slider-el="touchRight"
64          style="right: 0%;"
65        >

66          <span class="clc-PriceRange_Arrow">
67            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 8">
68              <path fill="currentColor" d="M5.602 8V0L.222 3.584a.5.5 0 0 0 0 .832z"/>
69            </svg>
70          </span>
71        </button>
72
73        <div class="clc-PriceRange_Line" data-range-slider-el="line">
74          <span class="clc-PriceRange_LineInner"></span>
75          <span class="clc-PriceRange_LineHighlighter" data-range-slider-el="highlighter"></span>
76        </div>
77      </div>
78
79      <div class="clc-PriceRange_Fields">
80        <div class="clc-PriceRange_Field">
81          <label class="clc-PriceRange_Label fz-14_140 util-ScreenReaderOnly" for="price-min">
82            ${window.theme.strings.sections.collectionTemplate.priceRange.minimum}
83          </label>
84
85          <input
86            class="clc-PriceRange_Input clc-PriceRange_Input-min fz-14_140"
87            id="price-min"
88            type="text"
89            value="${props.minFormatted}"
90            placeholder="${props.minFormatted}"
91            aria-label="${window.theme.strings.accessibility.priceRange.minimum.replace("[value]",props.minFormatted)}"
92            data-range-slider-el="minFormatted"
93          >
94        </div>
95
96        <div class="clc-PriceRange_Field">
97          <label class="clc-PriceRange_Label fz-14_140 util-ScreenReaderOnly" for="price-max">
98            ${window.theme.strings.sections.collectionTemplate.priceRange.maximum}
99          </label>
100
101          <input
102            class="clc-PriceRange_Input clc-PriceRange_Input-max fz-14_140"
103            id="price-max"
104            type="text"
105            value="${props.maxFormatted}"
106            placeholder="${props.maxFormatted}"
107            aria-label="${window.theme.strings.accessibility.priceRange.maximum.replace("[value]",props.maxFormatted)}"
108            data-range-slider-el="maxFormatted"
109          >
110        </div>
111      </div>
112
113      <input
114        id="results-price-GTE"
115        class="clc-PriceRange_Input"
116        name="results-price-min"
117        value="${props.minValue||props.min}"
118        type="hidden"
119        placeholder="0"
120        min="0"
121        max="${props.maxValue}"
122        data-range-slider-el="min"
123        data-results-filters-el="min"
124      >
125
126      <input
127        id="results-price-LTE"
128        class="clc-PriceRange_Input"
129        name="results-price-max"
130        value="${props.maxValue||props.max}"
131        type="hidden"
132        min="${props.minValue?props.minValue:0}"
133        placeholder="${props.max}"
134        max="${props.max}"
135        data-range-slider-el="max"
136        data-results-filters-el="max"
137      >
138    </range-slider>
139  `}function renderColourFacet(props){return`
140    <ul class="clc-ProductGridFacet_Items">
141      ${props.values.map((value,index)=>{const id=`results-${props.field}-${index}`,handle=value.value.toLowerCase().trim().replaceAll(" ","-");return`
142        <li class="clc-ProductGridFacet_Item">
143          <label
144            class="clc-ProductGridFacet_Label clc-ProductGridFacet_Label-swatch fz-13_140"
145            for="${id}"
146            aria-disabled="${value.count===0&&!value.selected?"true":"false"}"
147          >
148            <input
149              id="${id}"
150              class="clc-ProductGridFacet_Checkbox util-ScreenReaderOnly"
151              type="checkbox"
152              name="${props.field}"
153              value="${value.value}"
154              ${value.selected?"checked":""}
155              ${value.count===0&&!value.selected?"disabled":""}
156            >
157
158            ${value.value}
159            (${value.count})
160
161            <span class="clc-ProductGridFacet_Swatch col-Color-${handle}"></span>
162          </label>
163        </li>
164      `}).join("")}
165    </ul>
166  `}function renderDefaultFacet(props,sizeFacet){const valuesTemplate=props.values.map((value,index)=>{const id=`results-${props.field}-${index}`;return`
167        <li class="clc-ProductGridFacet_Item">
168          <label
169            class="clc-ProductGridFacet_Label fz-13_140"
170            for="${id}"
171            aria-disabled="${value.count===0&&!value.selected?"true":"false"}"
172          >
173            <input
174              id="${id}"
175              class="clc-ProductGridFacet_Checkbox util-ScreenReaderOnly"
176              type="checkbox"
177              name="${props.field}"
178              value="${value.value}"
179              ${value.selected?"checked":""}
180              ${value.count===0&&!value.selected?"disabled":""}
181            >
182
183            ${value.value}
184          </label>
185        </li>
186      `}).join("");return`
187    <ul class="clc-ProductGridFacet_Items${sizeFacet?" clc-ProductGridFacet_Items-fourCol":""}">
188      ${valuesTemplate}
189    </ul>
190  `}window.templates.FacetAccordion=FacetAccordion;
191//# sourceMappingURL=/cdn/shop/t/1735/assets/template-facet-accordion.js.map?v=114854313367302324381782908375