https://timex.co.uk/cdn/shop/t/463/assets/component-custom-select.js?v=124944280048814880871790831568

1import{LitElement,html,css,ifDefined,classMap}from"@hh/global.js";class HHCustomSelect extends LitElement{static properties={options:{type:Object},name:{type:String},active:{type:String},lang:{type:Boolean},_selected:{state:!0},_active:{state:!0}};constructor(){super(),this.handleBodyClick=this.handleBodyClick.bind(this),this.uuid=Math.random()*999999+1}connectedCallback(){super.connectedCallback(),this._selected=this.active,document.body.addEventListener("click",this.handleBodyClick)}disconnectedCallback(){super.disconnectedCallback(),document.body.addEventListener("click",this.handleBodyClick)}handleBodyClick(e){if(e.composedPath().some(node=>node===this))return!0;this._active&&this.toggle()}toggle(e=!1){if(e&&e.type==="keyup"&&!~["ESCAPE"].indexOf(e.code.toUpperCase()))return!0;this._active=!this._active}selectValue(e,value){e.preventDefault(),this._selected=value,(this.querySelector('[slot="input"]')||{}).value=value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value}})),this.toggle()}sanitize(value){return value.replace("&amp;","&")}render(){return html`<div>
2      <div id="${this.uuid}-label">
3        <slot name="title"></slot>
4      </div>
5      <div class="container">
6        <button
7          @click=${this.toggle}
8          type="button"
9          class="button"
10          aria-expanded="${this._active}"
11          aria-controls="${this.uuid}-list"
12          aria-describedby="${this.uuid}-label"
13        >
14          <slot name="button"></slot>
15          <slot name="icon"></slot>
16        </button>
17        <slot name="input"></slot>
18        <hh-focus-trap active="${this._active}">
19          <ul
20            id="${this.uuid}-list"
21            class="${classMap({list:!0,"is-active":this._active})}"
22            @keyup="${this.toggle}"
23            aria-hidden="${!this._active}"
24            role="list"
25          >
26            ${this.options.map(option=>(this.lang&&(option.lang=option.value),html`<li
27                class="${classMap({option:!0,"is-active":option.value===this._selected})}"
28              >
29                <a
30                  @click="${e=>this.selectValue(e,option.value)}"
31                  class="link"
32                  href="#"
33                  hreflang="${ifDefined(option.lang)}"
34                  lang="${ifDefined(option.lang)}"
35                >
36                  ${this.sanitize(option.label)}
37                </a>
38              </li>`))}
39          </ul>
40        </hh-focus-trap>
41      </div>
42    </div>`}static styles=css`
43    .container {
44      position: relative;
45    }
46
47    .button {
48      display: flex;
49      height: var(--hh-height, 35px);
50      background: transparent;
51      padding: 0;
52      border: var(--hh-border-width, 1px) solid currentColor;
53      padding: var(--hh-button-padding, 2em);
54      cursor: pointer;
55    }
56
57    ::slotted([slot='button']),
58    ::slotted([slot='icon']) {
59      display: flex;
60      height: 100%;
61      align-items: center;
62    }
63
64    ::slotted([slot='icon']) {
65      width: 10px;
66      margin-left: 30px;
67    }
68
69    .list {
70      width: max-content;
71      min-height: var(--hh-options-min-height, 8.2rem);
72      max-height: var(--hh-options-max-height, 19rem);
73      min-width: var(--hh-options-min-width, 12rem);
74      max-width: var(--hh-options-max-width, 22rem);
75      display: block;
76      overflow-y: auto;
77      position: absolute;
78      bottom: 100%;
79      background-color: var(--hh-background, white);
80      border: var(--hh-border-width, 1px) solid currentColor;
81      padding-left: 0;
82      z-index: 1;
83      visibility: hidden;
84      opacity: 0;
85      transform: translateY(0);
86      transition: visibility var(--hh-duration, 300ms) var(--hh-duration, 300ms),
87        opacity var(--hh-duration, 300ms), transform var(--hh-duration, 300ms);
88    }
89
90    .list.is-active {
91      transition: transform var(--hh-duration, 300ms) 1ms,
92        opacity var(--hh-duration, 300ms) 1ms, visibility 1ms;
93      visibility: visible;
94      opacity: 1;
95      transform: translateY(5px);
96    }
97
98    .option {
99      list-style: none;
100    }
101
102    .option.is-active {
103      opacity: 0.5;
104    }
105
106    .link {
107      display: block;
108      text-decoration: none;
109      padding: var(--hh-link-padding, 1em);
110      color: inherit;
111    }
112  `}customElements.define("hh-custom-select",HHCustomSelect);
113//# sourceMappingURL=/cdn/shop/t/463/assets/component-custom-select.js.map?v=124944280048814880871790831568