https://junglueck.de/cdn/shop/t/676/assets/theme-select-component.js?v=26024179433538282681736938663

1class ThemeSelect extends HTMLElement{static formAssociated=!0;static OPEN_ATTRIBUTE="open";#options=[];#shadow;constructor(){super()}connectedCallback(){this.#options=this.querySelectorAll("option"),this.updateSelectedOption(),this.value=this.selectedOption?.value??"",this.#shadow=this.attachShadow({mode:"open"}),this.internals=this.attachInternals(),this.render(),document.body.addEventListener("click",e=>{this.isOpen()&&(this.contains(e.target)||this.close())})}updateSelectedOption(){const selectedOption=Array.from(this.#options).find(o=>o.hasAttribute("selected")),optionFromValue=Array.from(this.#options).find(o=>o.value==this.value),firstOption=this.#options.length>0?this.#options[0]:null;this.selectedOption=selectedOption||optionFromValue||null,!this.placeholder&&!selectedOption&&!optionFromValue&&(this.selectedOption=firstOption)}render(){if(!this.#shadow)return;this.#shadow.innerHTML=`
2    <div part="selected-value">
3        <span>${this.selectedOption?this.selectedOption.innerHTML:`<span part="placeholder">${this.placeholder}</span>`}</span>
4      </div>
5      <div part="dropdown">
6        ${Array.from(this.#options).map(o=>`<div shadow-option part="option ${this.selectedOption==o?"selected":""} ${this.placeholder===o.value?"placeholder":""} ${o.disabled?"disabled":""}" value="${o.value}" ${this.selectedOption==o?"selected":""} ${o.disabled?"disabled":""}>${o.innerHTML}</div>`).join("")}
7      </div>
8    `,this.#shadow.querySelectorAll("[shadow-option]").forEach(option=>{option.addEventListener("click",()=>{this.value=option.getAttribute("value"),this.selectOptionByValue(this.value),this.updateSelectedOption(),this.update(),this.close()})}),this.#shadow.querySelector('[part="selected-value"]').addEventListener("click",()=>{this.toggle()})}selectOptionByValue(value){this.#options.forEach(o=>o.value==value?o.setAttribute("selected",!0):o.removeAttribute("selected"))}update(){this.dispatchEvent(new Event("change")),this.render()}close(){this.removeAttribute(ThemeSelect.OPEN_ATTRIBUTE)}open(){this.setAttribute(ThemeSelect.OPEN_ATTRIBUTE,!0)}isOpen(){return this.hasAttribute(ThemeSelect.OPEN_ATTRIBUTE)}toggle(){this.isOpen()?this.close():this.open()}set value(v){this.setAttribute("value",v),this.internals?.setFormValue(v)}get placeholder(){return this.getAttribute("placeholder")}get value(){return this.selectedOption?.value??""}get form(){return this.internals?.form}get type(){return this.localName}static get observedAttributes(){return["name","value","id","open"]}attributeChangedCallback(property,oldValue,newValue){if(oldValue!==newValue){if(property===ThemeSelect.OPEN_ATTRIBUTE){this.hasAttribute(ThemeSelect.OPEN_ATTRIBUTE)?this.open():this.close();return}this[property]=newValue,property==="value"&&(this.selectOptionByValue(newValue),this.updateSelectedOption(),this.render())}}}customElements.define("theme-select",ThemeSelect);class SortBySelect extends ThemeSelect{constructor(){super()}updateDeepLinking(){const newUrl=new URL(location.href);newUrl.searchParams.set("sort_by",this.sort_by),history.replaceState(null,"",newUrl.href)}updateDOM(){this.sort_by=this.getAttribute("value");const newUrl=new URL(location.href);newUrl.searchParams.set("sort_by",this.sort_by),this.updateDeepLinking();const section=this.closest("[data-section-id]");if(section){const section_id=section.dataset.sectionId;section_id&&(section.classList.add("loading"),newUrl.searchParams.set("section_id",section_id),fetch(newUrl.href,{credentials:"same-origin",headers:{"X-Requested-With":"XMLHttpRequest"},method:"GET"}).then(response=>response.text()).then(data=>{const template=document.createElement("template");template.innerHTML=data.trim();const old_collection_grid=section.querySelector("#collection-grid"),new_collection_grid=template.content.querySelector("#collection-grid");old_collection_grid&&new_collection_grid&&old_collection_grid.replaceWith(new_collection_grid);const old_collection_filter=section.querySelector("#collection-filter"),new_collection_filter=template.content.querySelector("#collection-filter");old_collection_filter&&new_collection_filter&&(old_collection_filter.innerHTML=new_collection_filter.innerHTML);const old_collection_pagination=section.querySelector("#collection-

8pagination"),new_collection_pagination=template.content.querySelector("#collection-pagination");old_collection_pagination&&new_collection_pagination&&old_collection_pagination.replaceWith(new_collection_pagination),window.dispatchEvent(new CustomEvent("collection::updated")),section&&section.classList.remove("loading")}).catch(function(err){section&&section.classList.remove("loading"),console.error(err)}))}}connectedCallback(){super.connectedCallback();const that=this;that.sort_by=that.getAttribute("value"),super.addEventListener("change",that.updateDOM.bind(that))}}customElements.define("sort-by-select",SortBySelect);
9//# sourceMappingURL=/cdn/shop/t/676/assets/theme-select-component.js.map?v=26024179433538282681736938663