@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-select.js

@@ -1,571 +1 @@
-import { getDbComponentIconSize, createDbIcon } from './db-icons.js';
-import './db-checkbox.js';
-
-const SIZES = ['s', 'm', 'l'];
-class DbSelect extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.internals = this.attachInternals();
-        this.built = false;
-        this.searchTerm = '';
-        this.focusedIndex = -1;
-        this.handleTriggerClick = () => {
-            if (this.hasAttribute('disabled') || this.hasAttribute('readonly'))
-                return;
-            this.open = !this.open;
-            if (this.open && this.searchable) {
-                setTimeout(() => this.searchInput?.focus(), 0);
-            }
-        };
-        this.handleTriggerFocus = () => {
-            this.trigger?.classList.add('designbase-wc-select__trigger--focused');
-        };
-        this.handleTriggerBlur = () => {
-            this.trigger?.classList.remove('designbase-wc-select__trigger--focused');
-        };
-        this.handleClear = (event) => {
-            event.stopPropagation();
-            const next = [];
-            this.setSelectedValues(next);
-            this.syncTrigger();
-            this.syncOptions();
-            this.dispatchChange(next);
-        };
-        this.handleSearchInput = () => {
-            this.searchTerm = this.searchInput?.value || '';
-            this.focusedIndex = -1;
-            this.syncOptions();
-        };
-        this.handleDocumentMouseDown = (event) => {
-            if (!this.contains(event.target)) {
-                this.open = false;
-                this.searchTerm = '';
-                if (this.searchInput)
-                    this.searchInput.value = '';
-                this.focusedIndex = -1;
-                this.syncOptions();
-            }
-        };
-        this.handleDocumentKeyDown = (event) => {
-            if (!this.contains(document.activeElement))
-                return;
-            if (!this.open) {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    this.open = true;
-                }
-                return;
-            }
-            const filtered = this.getFilteredOptions();
-            switch (event.key) {
-                case 'Escape':
-                    event.preventDefault();
-                    this.open = false;
-                    this.searchTerm = '';
-                    if (this.searchInput)
-                        this.searchInput.value = '';
-                    this.focusedIndex = -1;
-                    this.syncOptions();
-                    break;
-                case 'ArrowDown':
-                    event.preventDefault();
-                    this.focusedIndex = Math.min(this.focusedIndex + 1, filtered.length - 1);
-                    this.syncOptions();
-                    break;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
-                    this.syncOptions();
-                    break;
-                case 'Enter':
-                    event.preventDefault();
-                    if (this.focusedIndex >= 0 && filtered[this.focusedIndex]) {
-                        this.selectOption(filtered[this.focusedIndex]);
-                    }
-                    break;
-            }
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'options',
-            'value',
-            'placeholder',
-            'label',
-            'size',
-            'full-width',
-            'disabled',
-            'readonly',
-            'required',
-            'error',
-            'error-message',
-            'helper-text',
-            'multiple',
-            'searchable',
-            'show-clear-button',
-            'open',
-            'max-height',
-            'position',
-            'dropdown-width',
-            'name',
-        ];
-    }
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(value) {
-        this.setAttribute('name', value);
-    }
-    get open() {
-        return this.hasAttribute('open');
-    }
-    set open(value) {
-        this.toggleAttribute('open', value);
-        this.syncOpenState();
-    }
-    get value() {
-        return this.getAttribute('value') || '';
-    }
-    set value(value) {
-        if (value)
-            this.setAttribute('value', value);
-        else
-            this.removeAttribute('value');
-        this.syncTrigger();
-        this.syncOptions();
-    }
-    connectedCallback() {
-        if (!this.built) {
-            this.build();
-        }
-        this.syncState();
-        document.addEventListener('mousedown', this.handleDocumentMouseDown);
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    formResetCallback() {
-        this.removeAttribute('value');
-        this.internals.setFormValue(null);
-        if (this.built) {
-            this.syncTrigger();
-            this.syncOptions();
-        }
-    }
-    formDisabledCallback(disabled) {
-        this.toggleAttribute('disabled', disabled);
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'open') {
-            this.syncOpenState();
-            return;
-        }
-        if (name === 'value') {
-            this.syncTrigger();
-            this.syncOptions();
-            return;
-        }
-        this.syncState();
-    }
-    get multiple() {
-        return this.hasAttribute('multiple');
-    }
-    set multiple(value) {
-        this.toggleAttribute('multiple', Boolean(value));
-    }
-    get searchable() {
-        return this.hasAttribute('searchable');
-    }
-    set searchable(value) {
-        this.toggleAttribute('searchable', Boolean(value));
-    }
-    get showClearButton() {
-        if (!this.hasAttribute('show-clear-button')) {
-            return true;
-        }
-        return this.getAttribute('show-clear-button') !== 'false';
-    }
-    parseOptions() {
-        const raw = this.getAttribute('options') || '[]';
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return raw.split(',').map((item) => item.trim()).filter(Boolean).map((label) => ({ value: label, label }));
-        }
-    }
-    parseSelectedValues() {
-        const raw = this.getAttribute('value') || '';
-        if (!raw)
-            return [];
-        if (this.multiple) {
-            try {
-                const parsed = JSON.parse(raw);
-                return Array.isArray(parsed) ? parsed.map(String) : [];
-            }
-            catch {
-                return raw.split(',').map((item) => item.trim()).filter(Boolean);
-            }
-        }
-        return raw ? [raw] : [];
-    }
-    setSelectedValues(values) {
-        if (this.multiple) {
-            if (values.length)
-                this.setAttribute('value', JSON.stringify(values));
-            else
-                this.removeAttribute('value');
-        }
-        else {
-            if (values[0])
-                this.setAttribute('value', values[0]);
-            else
-                this.removeAttribute('value');
-        }
-    }
-    getIconSize() {
-        const size = this.getAttribute('size') || 'm';
-        return getDbComponentIconSize(SIZES.includes(size) ? size : 'm');
-    }
-    syncIndicatorIcons() {
-        const iconPx = this.getIconSize();
-        this.clearButton?.replaceChildren(createDbIcon('close', iconPx));
-        if (this.chevronEl) {
-            this.chevronEl.replaceChildren(createDbIcon(this.open ? 'chevron-up' : 'chevron-down', iconPx));
-        }
-    }
-    build() {
-        const id = this.getAttribute('id') || `db-select-${Math.random().toString(36).slice(2)}`;
-        const listboxId = `${id}-listbox`;
-        if (!this.hasAttribute('id'))
-            this.setAttribute('id', id);
-        this.labelEl = document.createElement('label');
-        this.labelEl.className = 'designbase-wc-select__label';
-        this.trigger = document.createElement('div');
-        this.trigger.className = 'designbase-wc-select__trigger';
-        this.trigger.tabIndex = 0;
-        this.trigger.setAttribute('role', 'combobox');
-        this.trigger.setAttribute('aria-haspopup', 'listbox');
-        this.trigger.setAttribute('aria-controls', listboxId);
-        this.trigger.addEventListener('click', this.handleTriggerClick);
-        this.trigger.addEventListener('focus', this.handleTriggerFocus);
-        this.trigger.addEventListener('blur', this.handleTriggerBlur);
-        this.valueEl = document.createElement('div');
-        this.valueEl.className = 'designbase-wc-select__value';
-        this.indicatorsEl = document.createElement('div');
-        this.indicatorsEl.className = 'designbase-wc-select__indicators';
-        this.clearButton = document.createElement('button');
-        this.clearButton.type = 'button';
-        this.clearButton.className = 'designbase-wc-select__clear-button';
-        this.clearButton.setAttribute('aria-label', '모든 값 지우기');
-        this.clearButton.hidden = true;
-        this.clearButton.appendChild(createDbIcon('close', this.getIconSize()));
-        this.clearButton.addEventListener('click', this.handleClear);
-        this.chevronEl = document.createElement('div');
-        this.chevronEl.className = 'designbase-wc-select__chevron';
-        this.indicatorsEl.append(this.clearButton, this.chevronEl);
-        this.trigger.append(this.valueEl, this.indicatorsEl);
-        this.dropdown = document.createElement('div');
-        this.dropdown.className = 'designbase-wc-select__dropdown';
-        this.searchWrap = document.createElement('div');
-        this.searchWrap.className = 'designbase-wc-select__search';
-        this.searchWrap.hidden = true;
-        this.searchInput = document.createElement('input');
-        this.searchInput.type = 'text';
-        this.searchInput.className = 'designbase-wc-select__search-input';
-        this.searchInput.placeholder = '옵션 검색';
-        this.searchInput.addEventListener('input', this.handleSearchInput);
-        this.searchInput.addEventListener('mousedown', (event) => event.stopPropagation());
-        this.searchInput.addEventListener('click', (event) => event.stopPropagation());
-        this.searchWrap.appendChild(this.searchInput);
-        this.optionsEl = document.createElement('div');
-        this.optionsEl.className = 'designbase-wc-select__options';
-        this.optionsEl.id = listboxId;
-        this.optionsEl.setAttribute('role', 'listbox');
-        this.dropdown.append(this.searchWrap, this.optionsEl);
-        this.helperEl = document.createElement('p');
-        this.helperEl.className = 'designbase-wc-select__helper-text';
-        this.errorEl = document.createElement('p');
-        this.errorEl.className = 'designbase-wc-select__error-message';
-        this.append(this.labelEl, this.trigger, this.dropdown, this.helperEl, this.errorEl);
-        this.built = true;
-    }
-    getFilteredOptions() {
-        const options = this.parseOptions();
-        if (!this.searchable || !this.searchTerm)
-            return options;
-        const term = this.searchTerm.toLowerCase();
-        return options.filter((option) => option.label.toLowerCase().includes(term));
-    }
-    selectOption(option) {
-        if (option.disabled)
-            return;
-        const selected = this.parseSelectedValues();
-        let next;
-        if (this.multiple) {
-            next = selected.includes(option.value)
-                ? selected.filter((value) => value !== option.value)
-                : [...selected, option.value];
-        }
-        else {
-            next = [option.value];
-            this.open = false;
-            this.searchTerm = '';
-            if (this.searchInput)
-                this.searchInput.value = '';
-            this.focusedIndex = -1;
-        }
-        this.setSelectedValues(next);
-        this.syncTrigger();
-        this.syncOptions();
-        this.dispatchChange(next);
-    }
-    dispatchChange(values) {
-        const options = this.parseOptions();
-        if (this.multiple) {
-            const formData = new FormData();
-            values.forEach((v) => formData.append(this.name || 'select', v));
-            this.internals.setFormValue(values.length ? formData : null);
-            this.dispatchEvent(new Event('change', { bubbles: true }));
-            this.dispatchEvent(new CustomEvent('db-change', {
-                detail: {
-                    value: values,
-                    labels: values.map((value) => options.find((option) => option.value === value)?.label || value),
-                },
-                bubbles: true,
-                composed: true,
-            }));
-            return;
-        }
-        const value = values[0] || '';
-        const label = options.find((option) => option.value === value)?.label || '';
-        this.internals.setFormValue(value || null);
-        this.dispatchEvent(new Event('change', { bubbles: true }));
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { value, label },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    syncState() {
-        if (!this.trigger || !this.dropdown || !this.optionsEl)
-            return;
-        const size = SIZES.includes((this.getAttribute('size') || 'm'))
-            ? (this.getAttribute('size') || 'm')
-            : 'm';
-        const position = this.getAttribute('position') === 'top' ? 'top' : 'bottom';
-        const dropdownWidth = this.getAttribute('dropdown-width') === 'full' ? 'full' : 'auto';
-        const maxHeight = Number(this.getAttribute('max-height') || 200);
-        const label = this.getAttribute('label') || '';
-        const helperText = this.getAttribute('helper-text') || '';
-        const errorMessage = this.getAttribute('error-message') || '';
-        const hasError = this.hasAttribute('error');
-        const id = this.getAttribute('id') || '';
-        this.className = [
-            'designbase-wc-select',
-            `designbase-wc-select--${size}`,
-            this.open && 'designbase-wc-select--open',
-            hasError && 'designbase-wc-select--error',
-            this.hasAttribute('disabled') && 'designbase-wc-select--disabled',
-            this.hasAttribute('readonly') && 'designbase-wc-select--readonly',
-            this.hasAttribute('full-width') && 'designbase-wc-select--full-width',
-            this.multiple && 'designbase-wc-select--multiple',
-            this.searchable && 'designbase-wc-select--searchable',
-        ].filter(Boolean).join(' ');
-        const selectedForState = this.parseSelectedValues();
-        this.classList.toggle('designbase-wc-select--has-value', selectedForState.length > 0);
-        if (this.labelEl) {
-            const requiredMark = this.hasAttribute('required') ? '<span class="designbase-wc-select__required" aria-hidden="true">*</span>' : '';
-            this.labelEl.innerHTML = label ? `${this.escape(label)}${requiredMark}` : '';
-            this.labelEl.hidden = !label;
-        }
-        this.dropdown.className = [
-            'designbase-wc-select__dropdown',
-            `designbase-wc-select__dropdown--${dropdownWidth}`,
-            `designbase-wc-select__dropdown--${position}`,
-            this.open && 'designbase-wc-select__dropdown--open',
-        ].filter(Boolean).join(' ');
-        this.optionsEl.style.maxHeight = `${maxHeight}px`;
-        if (this.searchWrap) {
-            this.searchWrap.hidden = !this.searchable;
-        }
-        const helperId = `${id}-helper`;
-        const errorId = `${id}-error`;
-        if (hasError && errorMessage) {
-            this.errorEl.id = errorId;
-            this.errorEl.textContent = errorMessage;
-            this.errorEl.hidden = false;
-            this.helperEl.hidden = true;
-            this.trigger.setAttribute('aria-describedby', errorId);
-            this.trigger.setAttribute('aria-invalid', 'true');
-        }
-        else if (helperText) {
-            this.helperEl.id = helperId;
-            this.helperEl.textContent = helperText;
-            this.helperEl.hidden = false;
-            this.errorEl.hidden = true;
-            this.trigger.setAttribute('aria-describedby', helperId);
-            this.trigger.removeAttribute('aria-invalid');
-        }
-        else {
-            this.helperEl.hidden = true;
-            this.errorEl.hidden = true;
-            this.trigger.removeAttribute('aria-describedby');
-            this.trigger.removeAttribute('aria-invalid');
-        }
-        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {
-            this.trigger.tabIndex = -1;
-        }
-        else {
-            this.trigger.tabIndex = 0;
-        }
-        this.syncOpenState();
-        this.syncTrigger();
-        this.syncOptions();
-        this.syncIndicatorIcons();
-    }
-    syncOpenState() {
-        if (!this.trigger || !this.dropdown || !this.chevronEl)
-            return;
-        this.trigger.setAttribute('aria-expanded', String(this.open));
-        this.classList.toggle('designbase-wc-select--open', this.open);
-        this.dropdown.classList.toggle('designbase-wc-select__dropdown--open', this.open);
-        this.syncIndicatorIcons();
-    }
-    syncTrigger() {
-        if (!this.valueEl || !this.clearButton)
-            return;
-        const options = this.parseOptions();
-        const selected = this.parseSelectedValues();
-        const placeholder = this.getAttribute('placeholder') || '선택하세요';
-        const hasValue = selected.length > 0;
-        const showClear = hasValue
-            && this.showClearButton
-            && !this.hasAttribute('disabled')
-            && !this.hasAttribute('readonly');
-        this.valueEl.replaceChildren();
-        if (this.multiple) {
-            if (selected.length === 0) {
-                const placeholderEl = document.createElement('span');
-                placeholderEl.className = 'designbase-wc-select__placeholder';
-                placeholderEl.textContent = placeholder;
-                this.valueEl.appendChild(placeholderEl);
-            }
-            else {
-                const tags = document.createElement('div');
-                tags.className = 'designbase-wc-select__tags';
-                selected.forEach((value) => {
-                    const option = options.find((item) => item.value === value);
-                    const tag = document.createElement('span');
-                    tag.className = 'designbase-wc-select__tag';
-                    const tagLabel = document.createElement('span');
-                    tagLabel.className = 'designbase-wc-select__tag-label';
-                    tagLabel.textContent = option?.label || value;
-                    const removeButton = document.createElement('button');
-                    removeButton.type = 'button';
-                    removeButton.className = 'designbase-wc-select__tag-remove';
-                    removeButton.setAttribute('aria-label', `${option?.label || value} 제거`);
-                    removeButton.appendChild(createDbIcon('close', 12));
-                    removeButton.addEventListener('click', (event) => {
-                        event.stopPropagation();
-                        const next = selected.filter((item) => item !== value);
-                        this.setSelectedValues(next);
-                        this.syncTrigger();
-                        this.syncOptions();
-                        this.dispatchChange(next);
-                    });
-                    tag.append(tagLabel, removeButton);
-                    tags.appendChild(tag);
-                });
-                this.valueEl.appendChild(tags);
-            }
-        }
-        else {
-            const single = document.createElement('span');
-            single.className = 'designbase-wc-select__single-value';
-            const selectedOption = options.find((option) => option.value === selected[0]);
-            single.textContent = hasValue ? (selectedOption?.label || selected[0]) : placeholder;
-            if (!hasValue) {
-                single.classList.add('designbase-wc-select__placeholder');
-            }
-            this.valueEl.appendChild(single);
-        }
-        this.clearButton.hidden = !showClear;
-        this.clearButton.setAttribute('aria-hidden', showClear ? 'false' : 'true');
-        this.classList.toggle('designbase-wc-select--has-value', hasValue);
-    }
-    syncOptions() {
-        if (!this.optionsEl)
-            return;
-        const options = this.getFilteredOptions();
-        const selected = this.parseSelectedValues();
-        const id = this.getAttribute('id') || 'db-select';
-        this.optionsEl.replaceChildren();
-        if (options.length === 0) {
-            const empty = document.createElement('div');
-            empty.className = 'designbase-wc-select__no-options';
-            empty.textContent = this.searchTerm ? '검색 결과가 없습니다.' : '옵션이 없습니다.';
-            this.optionsEl.appendChild(empty);
-            return;
-        }
-        options.forEach((option, index) => {
-            const isSelected = selected.includes(option.value);
-            const isFocused = index === this.focusedIndex;
-            const optionEl = document.createElement('div');
-            optionEl.className = [
-                'designbase-wc-select__option',
-                isSelected && 'designbase-wc-select__option--selected',
-                isFocused && 'designbase-wc-select__option--focused',
-                option.disabled && 'designbase-wc-select__option--disabled',
-            ].filter(Boolean).join(' ');
-            optionEl.id = `${id}-option-${index}`;
-            optionEl.setAttribute('role', 'option');
-            optionEl.setAttribute('aria-selected', String(isSelected));
-            optionEl.addEventListener('click', () => this.selectOption(option));
-            if (this.multiple) {
-                const checkboxWrap = document.createElement('div');
-                checkboxWrap.className = 'designbase-wc-select__checkbox';
-                const checkbox = document.createElement('db-checkbox');
-                checkbox.setAttribute('size', 's');
-                checkbox.setAttribute('has-label', 'false');
-                if (isSelected)
-                    checkbox.setAttribute('checked', '');
-                if (option.disabled)
-                    checkbox.setAttribute('disabled', '');
-                checkboxWrap.appendChild(checkbox);
-                optionEl.appendChild(checkboxWrap);
-            }
-            const label = document.createElement('span');
-            label.className = 'designbase-wc-select__option-label';
-            label.textContent = option.label;
-            optionEl.appendChild(label);
-            this.optionsEl.appendChild(optionEl);
-        });
-        if (this.focusedIndex >= 0) {
-            this.trigger?.setAttribute('aria-activedescendant', `${id}-option-${this.focusedIndex}`);
-        }
-        else {
-            this.trigger?.removeAttribute('aria-activedescendant');
-        }
-    }
-    escape(value) {
-        return value.replace(/[&<>"']/g, (char) => ({
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#39;',
-        }[char] || char));
-    }
-}
-DbSelect.formAssociated = true;
-if (!customElements.get('db-select')) {
-    customElements.define('db-select', DbSelect);
-}
-
-export { DbSelect };
+import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";import"./db-checkbox.js";const s=["s","m","l"];class DbSelect extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.searchTerm="",this.focusedIndex=-1,this.handleTriggerClick=()=>{this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.open=!this.open,this.open&&this.searchable&&setTimeout(()=>this.searchInput?.focus(),0))},this.handleTriggerFocus=()=>{this.trigger?.classList.add("designbase-wc-select__trigger--focused")},this.handleTriggerBlur=()=>{this.trigger?.classList.remove("designbase-wc-select__trigger--focused")},this.handleClear=e=>{e.stopPropagation();const t=[];this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)},this.handleSearchInput=()=>{this.searchTerm=this.searchInput?.value||"",this.focusedIndex=-1,this.syncOptions()},this.handleDocumentMouseDown=e=>{this.contains(e.target)||(this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions())},this.handleDocumentKeyDown=e=>{if(!this.contains(document.activeElement))return;if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));const t=this.getFilteredOptions();switch(e.key){case"Escape":e.preventDefault(),this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions();break;case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,t.length-1),this.syncOptions();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.syncOptions();break;case"Enter":e.preventDefault(),this.focusedIndex>=0&&t[this.focusedIndex]&&this.selectOption(t[this.focusedIndex])}}}static get observedAttributes(){return["options","value","placeholder","label","size","full-width","disabled","readonly","required","error","error-message","helper-text","multiple","searchable","show-clear-button","open","max-height","position","dropdown-width","name"]}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e),this.syncOpenState()}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value"),this.syncTrigger(),this.syncOptions()}connectedCallback(){this.built||this.build(),this.syncState(),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}formResetCallback(){this.removeAttribute("value"),this.internals.setFormValue(null),this.built&&(this.syncTrigger(),this.syncOptions())}formDisabledCallback(e){this.toggleAttribute("disabled",e)}attributeChangedCallback(e){if(this.built){if("open"!==e)return"value"===e?(this.syncTrigger(),void this.syncOptions()):void this.syncState();this.syncOpenState()}}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",Boolean(e))}get searchable(){return this.hasAttribute("searchable")}set searchable(e){this.toggleAttribute("searchable",Boolean(e))}get showClearButton(){return!this.hasAttribute("show-clear-button")||"false"!==this.getAttribute("show-clear-button")}parseOptions(){const e=this.getAttribute("options")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean).map(e=>({value:e,label:e}))}}parseSelectedValues(){const e=this.getAttribute("value")||"";if(!e)return[];if(this.multiple)try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}return e?[e]:[]}setSelectedValues(e){this.multiple?e.length?this.setAttribute("value",JSON.stringify(e)):this.removeAttribute("value"):e[0]?this.setAttribute("value",e[0]):this.removeAttribute("value")}getIconSize(){const t=this.getAttribute("size")||"m";return e(s.includes(t)?t:"m")}syncIndicatorIcons(){const e=this.getIconSize();this.clearButton?.replaceChildren(t("close",e)),this.chevronEl&&this.chevronEl.replaceChildren(t(this.open?"chevron-up":"chevron-down",e))}build(){const e=this.getAttribute("id")||`db-select-${Math.random().toString(36).slice(2)}`,s=`${e}-listbox`;this.hasAttribute("id")||this.setAttribute("id",e),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-select__label",this.trigger=document.createElement("div"),this.trigger.className="designbase-wc-select__trigger",this.trigger.tabIndex=0,this.trigger.setAttribute("role","combobox"),this.trigger.setAttribute("aria-haspopup","listbox"),this.trigger.setAttribute("aria-controls",s),this.trigger.addEventListener("click",this.handleTriggerClick),this.trigger.addEventListener("focus",this.handleTriggerFocus),this.trigger.addEventListener("blur",this.handleTriggerBlur),this.valueEl=document.createElement("div"),this.valueEl.className="designbase-wc-select__value",this.indicatorsEl=document.createElement("div"),this.indicatorsEl.className="designbase-wc-select__indicators",this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="designbase-wc-select__clear-button",this.clearButton.setAttribute("aria-label","모든 값 지우기"),this.clearButton.hidden=!0,this.clearButton.appendChild(t("close",this.getIconSize())),this.clearButton.addEventListener("click",this.handleClear),this.chevronEl=document.createElement("div"),this.chevronEl.className="designbase-wc-select__chevron",this.indicatorsEl.append(this.clearButton,this.chevronEl),this.trigger.append(this.valueEl,this.indicatorsEl),this.dropdown=document.createElement("div"),this.dropdown.className="designbase-wc-select__dropdown",this.searchWrap=document.createElement("div"),this.searchWrap.className="designbase-wc-select__search",this.searchWrap.hidden=!0,this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="designbase-wc-select__search-input",this.searchInput.placeholder="옵션 검색",this.searchInput.addEventListener("input",this.handleSearchInput),this.searchInput.addEventListener("mousedown",e=>e.stopPropagation()),this.searchInput.addEventListener("click",e=>e.stopPropagation()),this.searchWrap.appendChild(this.searchInput),this.optionsEl=document.createElement("div"),this.optionsEl.className="designbase-wc-select__options",this.optionsEl.id=s,this.optionsEl.setAttribute("role","listbox"),this.dropdown.append(this.searchWrap,this.optionsEl),this.helperEl=document.createElement("p"),this.helperEl.className="designbase-wc-select__helper-text",this.errorEl=document.createElement("p"),this.errorEl.className="designbase-wc-select__error-message",this.append(this.labelEl,this.trigger,this.dropdown,this.helperEl,this.errorEl),this.built=!0}getFilteredOptions(){const e=this.parseOptions();if(!this.searchable||!this.searchTerm)return e;const t=this.searchTerm.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))}selectOption(e){if(e.disabled)return;const t=this.parseSelectedValues();let s;this.multiple?s=t.includes(e.value)?t.filter(t=>t!==e.value):[...t,e.value]:(s=[e.value],this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1),this.setSelectedValues(s),this.syncTrigger(),this.syncOptions(),this.dispatchChange(s)}dispatchChange(e){const t=this.parseOptions();if(this.multiple){const s=new FormData;return e.forEach(e=>s.append(this.name||"select",e)),this.internals.setFormValue(e.length?s:null),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,labels:e.map(e=>t.find(t=>t.value===e)?.label||e)},bubbles:!0,composed:!0}))}const s=e[0]||"",i=t.find(e=>e.value===s)?.label||"";this.internals.setFormValue(s||null),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:s,label:i},bubbles:!0,composed:!0}))}syncState(){if(!this.trigger||!this.dropdown||!this.optionsEl)return;const e=s.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",t="top"===this.getAttribute("position")?"top":"bottom",i="full"===this.getAttribute("dropdown-width")?"full":"auto",n=Number(this.getAttribute("max-height")||200),a=this.getAttribute("label")||"",r=this.getAttribute("helper-text")||"",l=this.getAttribute("error-message")||"",h=this.hasAttribute("error"),c=this.getAttribute("id")||"";this.className=["designbase-wc-select",`designbase-wc-select--${e}`,this.open&&"designbase-wc-select--open",h&&"designbase-wc-select--error",this.hasAttribute("disabled")&&"designbase-wc-select--disabled",this.hasAttribute("readonly")&&"designbase-wc-select--readonly",this.hasAttribute("full-width")&&"designbase-wc-select--full-width",this.multiple&&"designbase-wc-select--multiple",this.searchable&&"designbase-wc-select--searchable"].filter(Boolean).join(" ");const o=this.parseSelectedValues();if(this.classList.toggle("designbase-wc-select--has-value",o.length>0),this.labelEl){const e=this.hasAttribute("required")?'<span class="designbase-wc-select__required" aria-hidden="true">*</span>':"";this.labelEl.innerHTML=a?`${this.escape(a)}${e}`:"",this.labelEl.hidden=!a}this.dropdown.className=["designbase-wc-select__dropdown",`designbase-wc-select__dropdown--${i}`,`designbase-wc-select__dropdown--${t}`,this.open&&"designbase-wc-select__dropdown--open"].filter(Boolean).join(" "),this.optionsEl.style.maxHeight=`${n}px`,this.searchWrap&&(this.searchWrap.hidden=!this.searchable);const d=`${c}-helper`,u=`${c}-error`;h&&l?(this.errorEl.id=u,this.errorEl.textContent=l,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.trigger.setAttribute("aria-describedby",u),this.trigger.setAttribute("aria-invalid","true")):r?(this.helperEl.id=d,this.helperEl.textContent=r,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.trigger.setAttribute("aria-describedby",d),this.trigger.removeAttribute("aria-invalid")):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.trigger.removeAttribute("aria-describedby"),this.trigger.removeAttribute("aria-invalid")),this.hasAttribute("disabled")||this.hasAttribute("readonly")?this.trigger.tabIndex=-1:this.trigger.tabIndex=0,this.syncOpenState(),this.syncTrigger(),this.syncOptions(),this.syncIndicatorIcons()}syncOpenState(){this.trigger&&this.dropdown&&this.chevronEl&&(this.trigger.setAttribute("aria-expanded",String(this.open)),this.classList.toggle("designbase-wc-select--open",this.open),this.dropdown.classList.toggle("designbase-wc-select__dropdown--open",this.open),this.syncIndicatorIcons())}syncTrigger(){if(!this.valueEl||!this.clearButton)return;const e=this.parseOptions(),s=this.parseSelectedValues(),i=this.getAttribute("placeholder")||"선택하세요",n=s.length>0,a=n&&this.showClearButton&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");if(this.valueEl.replaceChildren(),this.multiple)if(0===s.length){const e=document.createElement("span");e.className="designbase-wc-select__placeholder",e.textContent=i,this.valueEl.appendChild(e)}else{const i=document.createElement("div");i.className="designbase-wc-select__tags",s.forEach(n=>{const a=e.find(e=>e.value===n),r=document.createElement("span");r.className="designbase-wc-select__tag";const l=document.createElement("span");l.className="designbase-wc-select__tag-label",l.textContent=a?.label||n;const h=document.createElement("button");h.type="button",h.className="designbase-wc-select__tag-remove",h.setAttribute("aria-label",`${a?.label||n} 제거`),h.appendChild(t("close",12)),h.addEventListener("click",e=>{e.stopPropagation();const t=s.filter(e=>e!==n);this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)}),r.append(l,h),i.appendChild(r)}),this.valueEl.appendChild(i)}else{const t=document.createElement("span");t.className="designbase-wc-select__single-value";const a=e.find(e=>e.value===s[0]);t.textContent=n?a?.label||s[0]:i,n||t.classList.add("designbase-wc-select__placeholder"),this.valueEl.appendChild(t)}this.clearButton.hidden=!a,this.clearButton.setAttribute("aria-hidden",a?"false":"true"),this.classList.toggle("designbase-wc-select--has-value",n)}syncOptions(){if(!this.optionsEl)return;const e=this.getFilteredOptions(),t=this.parseSelectedValues(),s=this.getAttribute("id")||"db-select";if(this.optionsEl.replaceChildren(),0===e.length){const e=document.createElement("div");return e.className="designbase-wc-select__no-options",e.textContent=this.searchTerm?"검색 결과가 없습니다.":"옵션이 없습니다.",void this.optionsEl.appendChild(e)}e.forEach((e,i)=>{const n=t.includes(e.value),a=i===this.focusedIndex,r=document.createElement("div");if(r.className=["designbase-wc-select__option",n&&"designbase-wc-select__option--selected",a&&"designbase-wc-select__option--focused",e.disabled&&"designbase-wc-select__option--disabled"].filter(Boolean).join(" "),r.id=`${s}-option-${i}`,r.setAttribute("role","option"),r.setAttribute("aria-selected",String(n)),r.addEventListener("click",()=>this.selectOption(e)),this.multiple){const t=document.createElement("div");t.className="designbase-wc-select__checkbox";const s=document.createElement("db-checkbox");s.setAttribute("size","s"),s.setAttribute("has-label","false"),n&&s.setAttribute("checked",""),e.disabled&&s.setAttribute("disabled",""),t.appendChild(s),r.appendChild(t)}const l=document.createElement("span");l.className="designbase-wc-select__option-label",l.textContent=e.label,r.appendChild(l),this.optionsEl.appendChild(r)}),this.focusedIndex>=0?this.trigger?.setAttribute("aria-activedescendant",`${s}-option-${this.focusedIndex}`):this.trigger?.removeAttribute("aria-activedescendant")}escape(e){return e.replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]||e))}}DbSelect.formAssociated=!0,customElements.get("db-select")||customElements.define("db-select",DbSelect);export{DbSelect};