@operato/input 8.0.0 → 9.0.0-beta.10

package/dist/src/ox-select-floor.js

@@ -0,0 +1,237 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field.js';
+let OxSelectFloor = class OxSelectFloor extends OxFormField {
+    static styles = [
+        css `
+      :host {
+        display: block;
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+
+        --ox-select-floor-rotate-x: 60deg;
+        --ox-select-floor-rotate-x-active: 40deg;
+        --ox-select-floor-perspective: 1200px;
+      }
+
+      .carousel-container {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        user-select: none;
+      }
+
+      .card {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: white;
+        transition:
+          transform 0.3s ease,
+          opacity 0.3s ease,
+          box-shadow 0.3s ease,
+          border 0.3s ease;
+        transform-origin: bottom;
+        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));
+        opacity: 0.5;
+        border: 2px solid transparent;
+        border-radius: 12px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      .card img {
+        width: 100%;
+        height: auto;
+        display: block;
+        pointer-events: none;
+        border-radius: 12px;
+      }
+
+      .selected {
+        opacity: 0.8;
+        z-index: 1;
+        border: 4px solid #3b82f6;
+        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
+      }
+
+      .selected.active {
+        opacity: 1;
+        z-index: 2;
+        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));
+        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
+      }
+
+      [template-container] {
+        position: absolute;
+        right: 10px;
+        z-index: 1;
+      }
+    `
+    ];
+    cards = [];
+    value = undefined;
+    bottomLimit = 70;
+    interval = 0;
+    selectedIndex = -1;
+    activeIndex = null;
+    carouselContainer;
+    isDragging = false;
+    lastMouseY = 0;
+    render() {
+        const length = this.cards.length;
+        const cards = this.cards;
+        const interval = this.interval;
+        return html `
+      <div
+        class="carousel-container"
+        @wheel=${interval ? () => { } : this.handleWheel}
+        @pointerdown=${this.handlePointerDown}
+        @pointermove=${this.handlePointerMove}
+        @pointerup=${this.handlePointerUp}
+        @pointerleave=${this.handlePointerLeave}
+        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}
+      >
+        ${cards.map(({ image, name }, index) => {
+            return html `
+            <div
+              class="card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}"
+              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
+              @click=${() => {
+                this.selectCard(index);
+                this.toggleActiveCard(index);
+            }}
+            >
+              <img src="${image}" @load=${(e) => this.adjustCardHeight(e, index)} />
+            </div>
+          `;
+        })}
+        ${cards.map(({ image, name }, index) => {
+            return html `
+            <div
+              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
+              @click=${() => this.selectCard(index)}
+              template-container
+            >
+              <slot name="template-${index}"></slot>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            if (this.value) {
+                this.selectedIndex = this.cards.findIndex(card => card.name == this.value);
+            }
+            else {
+                this.selectedIndex = -1;
+            }
+        }
+    }
+    firstUpdated() {
+        this.scrollToSelectedCard();
+    }
+    getClassForCard(index) {
+        return index === this.selectedIndex ? 'selected' : 'compressed';
+    }
+    isActive(index) {
+        return this.activeIndex === index;
+    }
+    handleWheel(event) {
+        event.preventDefault();
+        const delta = Math.sign(event.deltaY);
+        this.updateSelectedIndex(this.selectedIndex + delta);
+    }
+    handlePointerDown(event) {
+        event.preventDefault();
+        this.isDragging = true;
+        this.lastMouseY = event.clientY;
+    }
+    handlePointerMove(event) {
+        if (!this.isDragging) {
+            return;
+        }
+        event.preventDefault();
+        const deltaY = event.clientY - this.lastMouseY;
+        if (!this.lastMouseY) {
+            this.lastMouseY = event.clientY;
+        }
+        if (Math.abs(deltaY) > 30) {
+            this.lastMouseY = event.clientY;
+            const direction = deltaY > 0 ? -1 : 1;
+            this.updateSelectedIndex(this.selectedIndex + direction);
+        }
+    }
+    handlePointerUp(event) {
+        event.preventDefault();
+        this.isDragging = false;
+    }
+    handlePointerLeave(event) {
+        event.preventDefault();
+        this.isDragging = false;
+    }
+    toggleActiveCard(index) {
+        if (this.activeIndex === index) {
+            this.activeIndex = null;
+        }
+        else {
+            this.activeIndex = index;
+        }
+    }
+    updateSelectedIndex(newIndex) {
+        this.activeIndex = null;
+        this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1));
+        this.scrollToSelectedCard();
+    }
+    scrollToSelectedCard() {
+        const cardHeight = 320;
+        const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2);
+        this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+    }
+    selectCard(index) {
+        this.selectedIndex = index;
+        this.notifySelection();
+        this.scrollToSelectedCard();
+    }
+    notifySelection() {
+        this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.value
+        }));
+    }
+    adjustCardHeight(e, index) {
+        const imgElement = e.target;
+        const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight;
+        const newHeight = imgElement.offsetWidth / aspectRatio;
+        imgElement.style.height = `${newHeight}px`;
+    }
+};
+__decorate([
+    property({ type: Array })
+], OxSelectFloor.prototype, "cards", void 0);
+__decorate([
+    property({ type: String })
+], OxSelectFloor.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], OxSelectFloor.prototype, "bottomLimit", void 0);
+__decorate([
+    property({ type: Number })
+], OxSelectFloor.prototype, "interval", void 0);
+__decorate([
+    state()
+], OxSelectFloor.prototype, "selectedIndex", void 0);
+__decorate([
+    state()
+], OxSelectFloor.prototype, "activeIndex", void 0);
+__decorate([
+    query('.carousel-container')
+], OxSelectFloor.prototype, "carouselContainer", void 0);
+OxSelectFloor = __decorate([
+    customElement('ox-select-floor')
+], OxSelectFloor);
+export { OxSelectFloor };
+//# sourceMappingURL=ox-select-floor.js.map

package/dist/src/ox-select-floor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-select-floor.js","sourceRoot":"","sources":["../../src/ox-select-floor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field.js'\n\ntype Card = {\n  name: string\n  image: string\n}\n\n@customElement('ox-select-floor')\nexport class OxSelectFloor extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        overflow: hidden;\n        height: 100%;\n\n        --ox-select-floor-rotate-x: 60deg;\n        --ox-select-floor-rotate-x-active: 40deg;\n        --ox-select-floor-perspective: 1200px;\n      }\n\n      .carousel-container {\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n        user-select: none;\n      }\n\n      .card {\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        background-color: white;\n        transition:\n          transform 0.3s ease,\n          opacity 0.3s ease,\n          box-shadow 0.3s ease,\n          border 0.3s ease;\n        transform-origin: bottom;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));\n        opacity: 0.5;\n        border: 2px solid transparent;\n        border-radius: 12px;\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      }\n\n      .card img {\n        width: 100%;\n        height: auto;\n        display: block;\n        pointer-events: none;\n        border-radius: 12px;\n      }\n\n      .selected {\n        opacity: 0.8;\n        z-index: 1;\n        border: 4px solid #3b82f6;\n        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);\n      }\n\n      .selected.active {\n        opacity: 1;\n        z-index: 2;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));\n        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);\n      }\n\n      [template-container] {\n        position: absolute;\n        right: 10px;\n        z-index: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) cards: Card[] = []\n  @property({ type: String }) value?: string = undefined\n  @property({ type: Number }) bottomLimit = 70\n  @property({ type: Number }) interval = 0\n\n  @state() private selectedIndex = -1\n  @state() private activeIndex: number | null = null\n  @query('.carousel-container') private carouselContainer!: HTMLDivElement\n\n  private isDragging = false\n  private lastMouseY = 0\n\n  render() {\n    const length = this.cards.length\n    const cards = this.cards\n    const interval = this.interval\n\n    return html`\n      <div\n        class=\"carousel-container\"\n        @wheel=${interval ? () => {} : this.handleWheel}\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n        @pointerleave=${this.handlePointerLeave}\n        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}\n      >\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              class=\"card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}\"\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => {\n                this.selectCard(index)\n                this.toggleActiveCard(index)\n              }}\n            >\n              <img src=\"${image}\" @load=${(e: Event) => this.adjustCardHeight(e, index)} />\n            </div>\n          `\n        })}\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => this.selectCard(index)}\n              template-container\n            >\n              <slot name=\"template-${index}\"></slot>\n            </div>\n          `\n        })}\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      if (this.value) {\n        this.selectedIndex = this.cards.findIndex(card => card.name == this.value)\n      } else {\n        this.selectedIndex = -1\n      }\n    }\n  }\n\n  firstUpdated() {\n    this.scrollToSelectedCard()\n  }\n\n  getClassForCard(index: number) {\n    return index === this.selectedIndex ? 'selected' : 'compressed'\n  }\n\n  isActive(index: number): boolean {\n    return this.activeIndex === index\n  }\n\n  handleWheel(event: WheelEvent) {\n    event.preventDefault()\n    const delta = Math.sign(event.deltaY)\n    this.updateSelectedIndex(this.selectedIndex + delta)\n  }\n\n  handlePointerDown(event: PointerEvent) {\n    event.preventDefault()\n\n    this.isDragging = true\n    this.lastMouseY = event.clientY\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    if (!this.isDragging) {\n      return\n    }\n\n    event.preventDefault()\n\n    const deltaY = event.clientY - this.lastMouseY\n\n    if (!this.lastMouseY) {\n      this.lastMouseY = event.clientY\n    }\n\n    if (Math.abs(deltaY) > 30) {\n      this.lastMouseY = event.clientY\n      const direction = deltaY > 0 ? -1 : 1\n      this.updateSelectedIndex(this.selectedIndex + direction)\n    }\n  }\n\n  handlePointerUp(event: PointerEvent) {\n    event.preventDefault()\n    this.isDragging = false\n  }\n\n  handlePointerLeave(event: PointerEvent) {\n    event.preventDefault()\n\n    this.isDragging = false\n  }\n\n  private toggleActiveCard(index: number) {\n    if (this.activeIndex === index) {\n      this.activeIndex = null\n    } else {\n      this.activeIndex = index\n    }\n  }\n\n  private updateSelectedIndex(newIndex: number) {\n    this.activeIndex = null\n\n    this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1))\n    this.scrollToSelectedCard()\n  }\n\n  private scrollToSelectedCard() {\n    const cardHeight = 320\n    const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2)\n\n    this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' })\n  }\n\n  private selectCard(index: number) {\n    this.selectedIndex = index\n    this.notifySelection()\n    this.scrollToSelectedCard()\n  }\n\n  private notifySelection() {\n    this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  private adjustCardHeight(e: Event, index: number) {\n    const imgElement = e.target as HTMLImageElement\n    const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight\n    const newHeight = imgElement.offsetWidth / aspectRatio\n    imgElement.style.height = `${newHeight}px`\n  }\n}\n"]}

package/dist/src/ox-select.js

@@ -10,15 +10,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { OxPopupList } from '@operato/popup';
 import { OxFormField } from './ox-form-field.js';
 let OxSelect = class OxSelect extends OxFormField {
-    constructor() {
-        super(...arguments);
-        this.name = '';
-        this.placeholder = '';
-        this.label = '';
-        this.popupContainer = null;
-        this.observer = null;
-    }
-    static { this.styles = [
+    static styles = [
         css `
       :host {
         display: block;
@@ -66,7 +58,12 @@ let OxSelect = class OxSelect extends OxFormField {
         color: var(--md-sys-color-on-primary-container);
       }
     `
-    ]; }
+    ];
+    name = '';
+    placeholder = '';
+    label = '';
+    popupContainer = null;
+    observer = null;
     render() {
         const label = (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) ||
             (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) ||

package/dist/src/ox-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-checkbox.js'\n\nimport { css, html, render, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-select')\nexport class OxSelect extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n\n        --ox-select-padding: var(--spacing-tiny);\n        --ox-select-font: var(--input-font);\n        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);\n      }\n\n      div {\n        width: 100%;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: var(--ox-select-padding);\n        font: var(--ox-select-font);\n        color: var(--ox-select-color);\n      }\n\n      span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        gap: 4px;\n      }\n\n      md-icon {\n        --md-icon-size: 16px;\n        display: block;\n        text-align: right;\n        color: var(--ox-select-icon-color);\n        opacity: 0.7;\n      }\n\n      div:hover md-icon {\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: String }) name: string = ''\n  @property({ type: String }) placeholder: string = ''\n\n  @state() label: string | string[] = ''\n  @state() popupContainer: HTMLElement | null = null\n  @state() observer: MutationObserver | null = null\n\n  render() {\n    const label =\n      (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) ||\n      (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) ||\n      this.placeholder ||\n      ''\n\n    return html`\n      <div @click=${this.expand}>\n        <span data-reactive-tooltip>${label}</span>\n        <md-icon>expand_more</md-icon>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      e.preventDefault()\n\n      if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {\n        this.expand()\n      }\n    })\n\n    this.addEventListener('click', () => this.expand())\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      const popupList = (this.popupContainer?.querySelector('ox-popup-list') ||\n        this.querySelector('ox-popup-list')) as OxPopupList\n\n      if (popupList) {\n        popupList.value = this.value\n        await this.requestUpdate()\n\n        this.label = popupList.getSelectedLabels()\n      }\n    }\n  }\n\n  setOptions(\n    options: string[] | { display: string; value: string }[],\n    opt: { multiple?: boolean; withSearch?: boolean } = {}\n  ) {\n    const objOptions = options.map(option => {\n      return typeof option == 'string' ? { display: option, value: option } : option\n    })\n\n    const { multiple, withSearch } = opt || {}\n\n    const template = html`\n      <ox-popup-list\n        align-left\n        nowrap\n        ?multiple=${multiple}\n        attr-selected=${multiple ? 'checked' : ''}\n        ?with-search=${withSearch}\n      >\n        ${multiple\n          ? html`<ox-checkbox\n                @change=${(e: Event) => {\n                  const target = e.target as HTMLInputElement\n                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n                    option => !option.hasAttribute('hidden')\n                  )\n                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n\n                  this.value = options\n                    .map(option =>\n                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined\n                    )\n                    .filter(Boolean)\n                }}\n                >set all</ox-checkbox\n              >\n              ${objOptions.map(\n                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n              )}`\n          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}\n      </ox-popup-list>\n    `\n\n    render(template, this)\n  }\n\n  expand() {\n    if (this.disabled) {\n      return\n    }\n\n    const slotContent = this.renderRoot.querySelector('slot')?.assignedNodes() || []\n\n    if (slotContent.length > 0) {\n      const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList\n\n      if (popupList) {\n        const { left, bottom } = this.getBoundingClientRect()\n\n        popupList.value = this.value\n        popupList.style.width = `${this.offsetWidth}px`\n        popupList.style.textWrap = 'nowrap'\n\n        const selectHandler = async (e: Event) => {\n          this.value = (e as CustomEvent).detail\n\n          if (popupList) {\n            await this.requestUpdate()\n            this.label = popupList.getSelectedLabels()\n          }\n        }\n        popupList.addEventListener('select', selectHandler)\n\n        const closeHandler = (e: Event) => {\n          /* popup이 close될 때 change 이벤트를 발생시킨다. */\n          this.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true,\n              detail: this.value\n            })\n          )\n          popupList.removeEventListener('select', selectHandler)\n          popupList.removeEventListener('close', closeHandler)\n\n          this.appendChild(popupList)\n        }\n        popupList.addEventListener('close', closeHandler, { once: true })\n\n        document.body.appendChild(popupList)\n\n        popupList.open({\n          left,\n          top: bottom\n        })\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-checkbox.js'\n\nimport { css, html, render, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-select')\nexport class OxSelect extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n\n        --ox-select-padding: var(--spacing-tiny);\n        --ox-select-font: var(--input-font);\n        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);\n      }\n\n      div {\n        width: 100%;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: var(--ox-select-padding);\n        font: var(--ox-select-font);\n        color: var(--ox-select-color);\n      }\n\n      span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        gap: 4px;\n      }\n\n      md-icon {\n        --md-icon-size: 16px;\n        display: block;\n        text-align: right;\n        color: var(--ox-select-icon-color);\n        opacity: 0.7;\n      }\n\n      div:hover md-icon {\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: String }) name: string = ''\n  @property({ type: String }) placeholder: string = ''\n\n  @state() label: string | string[] = ''\n  @state() popupContainer: HTMLElement | null = null\n  @state() observer: MutationObserver | null = null\n\n  render() {\n    const label =\n      (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) ||\n      (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) ||\n      this.placeholder ||\n      ''\n\n    return html`\n      <div @click=${this.expand}>\n        <span data-reactive-tooltip>${label}</span>\n        <md-icon>expand_more</md-icon>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      e.preventDefault()\n\n      if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {\n        this.expand()\n      }\n    })\n\n    this.addEventListener('click', () => this.expand())\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      const popupList = (this.popupContainer?.querySelector('ox-popup-list') ||\n        this.querySelector('ox-popup-list')) as OxPopupList\n\n      if (popupList) {\n        popupList.value = this.value\n        await this.requestUpdate()\n\n        this.label = popupList.getSelectedLabels()\n      }\n    }\n  }\n\n  setOptions(\n    options: string[] | { display: string; value: string }[],\n    opt: { multiple?: boolean; withSearch?: boolean } = {}\n  ) {\n    const objOptions = options.map(option => {\n      return typeof option == 'string' ? { display: option, value: option } : option\n    })\n\n    const { multiple, withSearch } = opt || {}\n\n    const template = html`\n      <ox-popup-list\n        align-left\n        nowrap\n        ?multiple=${multiple}\n        attr-selected=${multiple ? 'checked' : ''}\n        ?with-search=${withSearch}\n      >\n        ${multiple\n          ? html`<ox-checkbox\n                @change=${(e: Event) => {\n                  const target = e.target as HTMLInputElement\n                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n                    option => !option.hasAttribute('hidden')\n                  )\n                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n\n                  this.value = options\n                    .map(option =>\n                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined\n                    )\n                    .filter(Boolean)\n                }}\n                >set all</ox-checkbox\n              >\n              ${objOptions.map(\n                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n              )}`\n          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}\n      </ox-popup-list>\n    `\n\n    render(template, this)\n  }\n\n  expand() {\n    if (this.disabled) {\n      return\n    }\n\n    const slotContent = this.renderRoot.querySelector('slot')?.assignedNodes() || []\n\n    if (slotContent.length > 0) {\n      const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList\n\n      if (popupList) {\n        const { left, bottom } = this.getBoundingClientRect()\n\n        popupList.value = this.value\n        popupList.style.width = `${this.offsetWidth}px`\n        popupList.style.textWrap = 'nowrap'\n\n        const selectHandler = async (e: Event) => {\n          this.value = (e as CustomEvent).detail\n\n          if (popupList) {\n            await this.requestUpdate()\n            this.label = popupList.getSelectedLabels()\n          }\n        }\n        popupList.addEventListener('select', selectHandler)\n\n        const closeHandler = (e: Event) => {\n          /* popup이 close될 때 change 이벤트를 발생시킨다. */\n          this.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true,\n              detail: this.value\n            })\n          )\n          popupList.removeEventListener('select', selectHandler)\n          popupList.removeEventListener('close', closeHandler)\n\n          this.appendChild(popupList)\n        }\n        popupList.addEventListener('close', closeHandler, { once: true })\n\n        document.body.appendChild(popupList)\n\n        popupList.open({\n          left,\n          top: bottom\n        })\n      }\n    }\n  }\n}\n"]}