https://www.moinkbox.com/cdn/shop/t/146/assets/component-custom-select.js?v=49930567741576835211778351659

1import{LitElement,classMap,css,html,ifDefined}from"@lit";class NovaCustomSelect extends LitElement{static properties={options:{type:Object},name:{type:String},active:{type:String},lang:{type:Boolean},position:{type:String},_selected:{state:!0},_active:{state:!0}};constructor(){super(),this.uuid=Math.random()*999999+1,this.position="bottom"}connectedCallback(){super.connectedCallback(),this._selected=this.active,document.body.addEventListener("click",this._handleBodyClick)}disconnectedCallback(){super.disconnectedCallback(),document.body.addEventListener("click",this._handleBodyClick)}_handleBodyClick=event=>{if(event.composedPath().some(node=>node===this))return!0;this._active&&this.toggle()};toggle(event=!1){if(event&&event.type==="keyup"&&!~["ESCAPE"].indexOf(event.code.toUpperCase()))return!0;this._active=!this._active}selectValue(event,value){event.preventDefault(),this._selected=value;const $input=this.querySelector('[slot="input"]')||{};$input.value=value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value}})),this.toggle()}get selectedLabel(){const option=this.options.find(option2=>option2.value===this._selected);return option?option.label:"Invalid selected option"}sanitize(value){return value.replace("&amp;","&")}render(){return html`<div>
2      <div class="container">
3        <div id=${`${this.uuid}-label`}>
4          <slot name="title"></slot>
5        </div>
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          <span class="button__label">${this.selectedLabel}</span>
15          <slot name="icon"></slot>
16        </button>
17        <slot name="input"></slot>
18        <nova-focus-trap active=${this._active}>
19          <ul
20            id=${`${this.uuid}-list`}
21            class=${classMap({list:!0,"is-active":this._active,"position-top":this.position==="top"})}
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`
27              <li
28                class=${classMap({option:!0,"is-active":option.value===this._selected})}
29              >
30                <a
31                  @click=${event=>this.selectValue(event,option.value)}
32                  class="link"
33                  href="#"
34                  hreflang=${ifDefined(option.lang)}
35                  lang=${ifDefined(option.lang)}
36                >
37                  ${this.sanitize(option.label)}
38                </a>
39              </li>
40            `))}
41          </ul>
42        </nova-focus-trap>
43      </div>
44    </div>`}static styles=css`
45    :host {
46      width: 100%;
47    }
48
49    .container {
50      position: relative;
51    }
52
53    .button {
54      align-items: center;
55      background: transparent;
56      border: var(--nova-border-width, 1px) solid currentColor;
57      cursor: pointer;
58      display: flex;
59      font: var(--nova-body-font);
60      height: var(--nova-height, 35px);
61      justify-content: space-between;
62      padding: 0 15px;
63      width: 100%;
64    }
65
66    .button__label {
67      position: relative;
68      top: 8px;
69    }
70
71    ::slotted([slot='button']),
72    ::slotted([slot='icon']) {
73      align-items: center;
74      display: flex;
75      height: 100%;
76    }
77
78    ::slotted([slot='icon']) {
79      margin-left: 30px;
80      width: 10px;
81    }
82
83    ::slotted([slot='title']) {
84      color: var(--nova-color-subdued);
85      left: 15px;
86      margin: 0;
87      position: absolute;
88      top: 8px;
89    }
90
91    .list {
92      background-color: var(--nova-background, white);
93      border: var(--nova-border-width, 1px) solid currentColor;
94      display: block;
95      margin: 0;
96      max-height: var(--nova-options-max-height, 19rem);
97      max-width: var(--nova-options-max-width, 22rem);
98      min-height: var(--nova-options-min-height, 8.2rem);
99      min-width: var(--nova-options-min-width, 12rem);
100      opacity: 0;
101      overflow-y: auto;
102      padding-left: 0;
103      position: absolute;
104      transform: translateY(0);
105      transition: visibility var(--nova-duration-default, 300ms)
106          var(--nova-duration-default, 300ms),
107        opacity var(--nova-duration-default, 300ms),
108        transform var(--nova-duration-default, 300ms);
109      visibility: hidden;
110      width: 100%;
111      z-index: 1;
112    }
113
114    .list.position-top {
115      bottom: 100%;
116    }
117
118    .list.is-active {
119      opacity: 1;
120      transform: translateY(5px);
121      transition: transform var(--nova-duration-default, 300ms) 1ms,
122        opacity var(--nova-duration-default, 300ms) 1ms, visibility 1ms;
123      visibility: visible;
124    }
125
126    .option {
127      list-style: none;
128    }
129
130    .option.is-active {
131      opacity: 0.5;
132    }
133
134    .link {
135      color: inherit;
136      display: block;
137      padding: var(--nova-link-padding, 1em);
138      text-decoration: none;
139    }
140  `}customElements.define("nova-custom-select",NovaCustomSelect);
141//# sourceMappingURL=/cdn/shop/t/146/assets/component-custom-select.js.map?v=49930567741576835211778351659