https://creedfragrance.jp/cdn/shop/t/2/assets/component-custom-select.js?v=67313553912639206241747664439

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},nav:{type:Boolean}};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){this.nav||(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="${this.nav?`${option.value}`:"#"}"
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 var(--hh-border-color, 'currentColor');
53      color: var(--hh-button-text-color, 'currentColor');
54      justify-content: space-between;
55      padding: var(--hh-button-padding, 2em);
56      cursor: pointer;
57      width: 100%;
58    }
59
60    ::slotted([slot='button']),
61    ::slotted([slot='icon']) {
62      display: flex;
63      height: 100%;
64      align-items: center;
65      font-family: var(--hh-font-family-body);
66    }
67
68    ::slotted([slot='icon']) {
69      width: 10px;
70      margin-left: 30px;
71      color: var(--hh-icon-color, 'currentColor');
72    }
73
74    .list {
75      width: max-content;
76      min-height: var(--hh-options-min-height, 8.2rem);
77      max-height: var(--hh-options-max-height, 19rem);
78      min-width: var(--hh-options-min-width, 12rem);
79      width: 100%;
80      display: block;
81      overflow-y: auto;
82      position: absolute;
83      top: calc(100% - 5px);
84      background-color: var(--hh-background, white);
85      border: var(--hh-border-width, 1px) solid currentColor;
86      padding-left: 0;
87      margin: 0;
88      z-index: 1;
89      visibility: hidden;
90      opacity: 0;
91      transform: translateY(0);
92      transition: visibility var(--hh-duration-default, 300ms)
93          var(--hh-duration-default, 300ms),
94        opacity var(--hh-duration-default, 300ms),
95        transform var(--hh-duration-default, 300ms);
96    }
97
98    .list.is-active {
99      transition: transform var(--hh-duration-default, 300ms) 1ms,
100        opacity var(--hh-duration-default, 300ms) 1ms, visibility 1ms;
101      visibility: visible;
102      opacity: 1;
103      transform: translateY(5px);
104    }
105
106    .option {
107      list-style: none;
108    }
109
110    .option.is-active {
111      opacity: 0.5;
112    }
113
114    .link {
115      display: block;
116      text-decoration: none;
117      padding: var(--hh-link-padding, 1em);
118      color: inherit;
119    }
120  `}customElements.define("hh-custom-select",HHCustomSelect);
121//# sourceMappingURL=/cdn/shop/t/2/assets/component-custom-select.js.map?v=67313553912639206241747664439