https://timex.co.uk/cdn/shop/t/463/assets/component-header-search.js?v=84861424640062081790831581

1import{LitElement,css,html,unsafeCSS}from"@hh/global.js";class HeaderSearchDetails extends LitElement{static properties={open:{type:Boolean,reflect:!0},headerHeight:{state:!0}};constructor(){super(),this.open=!1,this.headerHeight=0}connectedCallback(){super.connectedCallback(),this.setHeaderHeight(),this.handleCloseTrigger(),this.handleEscKey(),this.handleInputChange()}updated(){const inputEl=this.querySelector(".js-header-search-details-input");this.open?(setTimeout(()=>{inputEl?.focus()},200),this.closest(".header")?.classList.add("header--search-details-open"),document.body.classList.add("overflow-hidden"),this.setHeaderHeight()):(inputEl.value="",this.closest(".header")?.classList.remove("header--search-details-open"),document.body.classList.remove("overflow-hidden"))}toggle(e=!1){e&&(e.preventDefault(),e.type==="keydown"&&e.key!=="Enter"&&e.key!==" ")||(this.open=!this.open)}setHeaderHeight(){const headerEl=document.querySelector(".js-section-header");this.headerHeight=headerEl.getBoundingClientRect()?.height||0}handleCloseTrigger(){this.querySelectorAll(".js-header-search-details-close")?.forEach(el=>{el.addEventListener("click",()=>{this.open=!1})})}handleEscKey(){this.addEventListener("keydown",e=>{e.key==="Escape"&&(this.open=!1)})}handleInputChange(){const inputEl=this.querySelector(".js-header-search-details-input"),submitEl=this.querySelector(".js-header-search-details-submit"),handleChange=e=>{e.currentTarget.value?submitEl.removeAttribute("disabled"):submitEl.setAttribute("disabled",!0)};inputEl.addEventListener("change",handleChange),inputEl.addEventListener("keyup",handleChange)}render(){return html`
2      <style>
3        :host {
4          --header-height: ${unsafeCSS(this.headerHeight)}px;
5        }
6      </style>
7      <div ?open="${this.open}">
8        <summary @click="${this.toggle}">
9          <slot name="summary"></slot>
10        </summary>
11        <div class="header-search-detail__content">
12          <hh-focus-trap active="${this.open}">
13            <slot name="details">
14          </hh-focus-trap>
15        </div>
16      </div>
17      `}static get styles(){return css`
18      summary {
19        list-style-type: none;
20        cursor: pointer;
21      }
22      summary::-webkit-details-marker {
23        display: none
24      }
25    `}}customElements.define("header-search-details",HeaderSearchDetails);
26//# sourceMappingURL=/cdn/shop/t/463/assets/component-header-search.js.map?v=84861424640062081790831581