import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
let EaasSelect = class EaasSelect extends LitElement {
    constructor() {
        super(...arguments);
        this.defaultItem = { id: '', name: '전체' };
        this.items = [];
        this.selectedItem = {};
        this.isShowAll = true;
        this.isOpen = false;
        this.handleOutsideClick = (event) => {
            const path = event.composedPath();
            if (!path.includes(this)) {
                this.isOpen = false;
            }
        };
    }
    static { this.styles = css `
    :host {
      display: block;
      min-width: 100px; /* 그룹 데이터 없을때 최소 너비 */

      .eaas-select {
        position: relative;
      }

      .selected {
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.2);
        padding: 0 var(--padding-default);
        justify-content: space-between;
        border-radius: 5px;
        color: var(--md-sys-color-on-secondary);
        font-size: 1em;
        cursor: pointer;
        min-width: 120px;
        height: 30px;
      }

      .dropdown {
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
        color: var(--md-sys-color-surface-tint);
        background-color: var(--md-sys-color-secondary);
        max-height: 200px;
        overflow-y: auto;
        z-index: 10;
      }

      .option {
        padding: var(--padding-narrow) var(--padding-wide);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
      }

      .option:hover {
        color: var(--md-sys-color-on-secondary);
        font-weight: 700;
        background-color: var(--md-sys-color-primary);
      }

      /* Mobile View */
      @media screen and (max-width: 768px) {
        .selected {
          min-width: initial;
        }
      }
    }
  `; }
    render() {
        return html `
      <div class="eaas-select">
        <div class="selected" @click=${this.toggleDropdown}>
          <span>${this.selectedItem?.name || this.defaultItem.name}</span>
          <md-icon>keyboard_arrow_down</md-icon>
        </div>

        ${this.isOpen
            ? html `
              <div class="dropdown">
                ${this.isShowAll
                ? html `<div class="option" @click=${() => this.selectItem(this.defaultItem)}>전체</div>`
                : ''}
                ${this.items.map(item => html ` <div class="option" @click=${() => this.selectItem(item)}>${item.name}</div> `)}
              </div>
            `
            : ''}
      </div>
    `;
    }
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('click', this.handleOutsideClick);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleOutsideClick);
        super.disconnectedCallback();
    }
    toggleDropdown() {
        this.isOpen = !this.isOpen;
    }
    selectItem(item) {
        this.isOpen = false;
        this.dispatchEvent(new CustomEvent('selection-changed', { detail: item }));
    }
};
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasSelect.prototype, "items", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], EaasSelect.prototype, "selectedItem", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], EaasSelect.prototype, "isShowAll", void 0);
__decorate([
    state(),
    __metadata("design:type", Boolean)
], EaasSelect.prototype, "isOpen", void 0);
EaasSelect = __decorate([
    customElement('eaas-select')
], EaasSelect);
export { EaasSelect };
//# sourceMappingURL=eaas-select.js.map