@ncds/ui-admin 1.3.0 → 1.4.1

package/dist/esm/assets/scripts/utils/selectbox/UnifiedSelectBox.js

@@ -0,0 +1,672 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = this && this.__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function () {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { DOMRenderer } from './DOMRenderer';
+import { DropdownModel } from './DropdownModel';
+import { SelectBoxController } from './SelectBoxController';
+/**
+ * 통합된 SelectBox 클래스
+ * SelectBox와 ComboBox의 기능을 모두 포함
+ */
+var UnifiedSelectBox = /** @class */function () {
+  function UnifiedSelectBox(element, config) {
+    if (config === void 0) {
+      config = {};
+    }
+    var _a;
+    this.lastSearchValue = ''; // 이전 검색어 추적 (API 모드에서 옵션 교체를 위해)
+    this.hasInitialOptions = false; // 초기 옵션이 있는지 여부 (select 태그 등)
+    this.element = element;
+    this.config = __assign(__assign({
+      options: [],
+      placeholder: config.type === 'combobox' ? '검색하세요' : '선택하세요',
+      maxHeight: 275,
+      disabled: false,
+      size: 'md',
+      multiple: false,
+      showFooterButtons: false,
+      required: false,
+      type: 'selectbox'
+    }, config), {
+      searchDebounceMs: (_a = config.searchDebounceMs) !== null && _a !== void 0 ? _a : 500
+    });
+    this.initialize();
+  }
+  UnifiedSelectBox.prototype.initialize = function () {
+    this.element.innerHTML = '';
+    this.setupElementClasses();
+    // 초기 옵션이 있는지 확인 (select 태그 등에서 파싱된 옵션이 있는 경우)
+    this.hasInitialOptions = this.config.options && this.config.options.length > 0 || false;
+    this.model = new DropdownModel(this.config.options || [], this.config.multiple || false);
+    // ComboBox 타입인 경우 모델에 설정
+    if (this.config.type === 'combobox') {
+      this.model.setComboBoxMode(true);
+    }
+    this.renderer = new DOMRenderer();
+    this.createUI();
+    this.setupController();
+    if (this.config.value) {
+      this.model.setValue(this.config.value);
+    }
+  };
+  UnifiedSelectBox.prototype.setupElementClasses = function () {
+    var baseClass = this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
+    this.element.className = "".concat(baseClass, " ").concat(baseClass, "--").concat(this.config.size);
+    if (this.config.disabled) {
+      this.element.classList.add("".concat(baseClass, "--disabled"));
+    }
+    if (this.config.multiple) {
+      this.element.classList.add("".concat(baseClass, "--multiple"));
+    }
+  };
+  UnifiedSelectBox.prototype.createUI = function () {
+    if (this.config.type === 'combobox') {
+      this.createComboBoxUI();
+    } else {
+      this.createSelectBoxUI();
+    }
+  };
+  UnifiedSelectBox.prototype.createComboBoxUI = function () {
+    var _this = this;
+    // 컨텐츠 컨테이너
+    var content = DOMRenderer.createElementWithClass('div', 'ncua-combobox__content');
+    this.element.appendChild(content);
+    // 입력 필드 생성
+    this.inputField = this.renderer.createInputField({
+      placeholder: this.config.placeholder || '검색하세요',
+      disabled: this.config.disabled || false,
+      size: this.config.size || 'md',
+      showSearchIcon: true,
+      onInput: function (value) {
+        return _this.handleInput(value);
+      },
+      onClick: function () {
+        return _this.handleInputClick();
+      },
+      onClear: function () {
+        return _this.handleClearInput();
+      },
+      onShowAll: function () {
+        return _this.handleShowAll();
+      }
+    });
+    content.appendChild(this.inputField.container);
+    this.triggerElement = this.inputField.input;
+    // 드롭다운 생성
+    this.createDropdown(content);
+  };
+  UnifiedSelectBox.prototype.createSelectBoxUI = function () {
+    // 트리거 생성
+    var trigger = DOMRenderer.createElementWithClass('div', 'ncua-selectbox__content');
+    trigger.setAttribute('tabindex', this.config.disabled ? '-1' : '0');
+    trigger.setAttribute('role', 'combobox');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    var valueSpan = DOMRenderer.createElementWithClass('span', 'ncua-selectbox__value', this.config.placeholder);
+    var arrow = DOMRenderer.createSvgIcon('chevron-down', this.config.size === 'xs' ? 14 : 16);
+    arrow.classList.add('ncua-selectbox__arrow');
+    trigger.appendChild(valueSpan);
+    trigger.appendChild(arrow);
+    this.element.appendChild(trigger);
+    this.triggerElement = trigger;
+    this.arrowElement = arrow;
+    // 드롭다운 생성
+    this.createDropdown(this.element);
+  };
+  UnifiedSelectBox.prototype.createDropdown = function (parent) {
+    var _this = this;
+    var dropdownStructure = this.renderer.createDropdownStructure({
+      maxHeight: this.config.maxHeight || 275,
+      size: this.config.size || 'md',
+      listboxId: "selectbox-".concat(Date.now()),
+      noResultsText: '일치하는 결과가 없습니다.'
+    });
+    this.dropdownElement = dropdownStructure.dropdown;
+    // SelectBox 단일 선택 모드일 때 특별한 클래스 추가
+    if (this.config.type === 'selectbox' && !this.config.multiple) {
+      this.dropdownElement.classList.add('ncua-select-dropdown--selectbox-single');
+    }
+    // 다중 선택 모드일 때 클래스 추가
+    if (this.config.multiple) {
+      this.dropdownElement.classList.add('ncua-select-dropdown--multiple');
+    }
+    parent.appendChild(this.dropdownElement);
+    // 푸터 버튼 추가 (필요한 경우)
+    if (this.config.multiple || this.config.showFooterButtons) {
+      this.footerElement = this.renderer.createFooter({
+        multiple: this.config.multiple,
+        showFooterButtons: this.config.showFooterButtons,
+        selectAllButtonText: this.model.getSelectAllButtonText(),
+        onSelectAll: function () {
+          return _this.handleSelectAll();
+        },
+        onEdit: this.config.onEdit ? function () {
+          var _a, _b;
+          return (_b = (_a = _this.config).onEdit) === null || _b === void 0 ? void 0 : _b.call(_a);
+        } : undefined,
+        onComplete: function () {
+          return _this.handleComplete();
+        }
+      });
+      this.dropdownElement.appendChild(this.footerElement);
+    }
+  };
+  UnifiedSelectBox.prototype.setupController = function () {
+    var _this = this;
+    if (!this.triggerElement || !this.dropdownElement) {
+      throw new Error('Trigger or dropdown element not found');
+    }
+    var controllerConfig = {
+      triggerElement: this.triggerElement,
+      dropdownElement: this.dropdownElement,
+      model: this.model,
+      renderer: this.renderer,
+      renderConfig: {
+        maxHeight: this.config.maxHeight || 275,
+        size: this.config.size || 'md',
+        listboxId: "selectbox-".concat(Date.now()),
+        noResultsText: '일치하는 결과가 없습니다.'
+      },
+      onOpen: function () {
+        var baseClass = _this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
+        _this.element.classList.add("".concat(baseClass, "--open"));
+        if (_this.triggerElement) {
+          _this.triggerElement.setAttribute('aria-expanded', 'true');
+        }
+        // 화살표 아이콘 회전 (selectbox 타입일 때만)
+        if (_this.config.type === 'selectbox' && _this.arrowElement) {
+          _this.arrowElement.classList.add('ncua-selectbox__arrow--up');
+        }
+      },
+      onClose: function () {
+        var baseClass = _this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
+        _this.element.classList.remove("".concat(baseClass, "--open"));
+        if (_this.triggerElement) {
+          _this.triggerElement.setAttribute('aria-expanded', 'false');
+        }
+        // 화살표 아이콘 원래대로 (selectbox 타입일 때만)
+        if (_this.config.type === 'selectbox' && _this.arrowElement) {
+          _this.arrowElement.classList.remove('ncua-selectbox__arrow--up');
+        }
+      },
+      onSelectionChange: function (selectedValues) {
+        _this.handleSelectionChange(selectedValues);
+      },
+      onSearch: function (searchValue) {
+        var _a, _b;
+        (_b = (_a = _this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, searchValue);
+      },
+      onScrollBottom: this.config.onScrollBottom,
+      disabled: this.config.disabled || false,
+      canToggle: function () {
+        return _this.canToggleDropdown();
+      },
+      type: this.config.type // 타입 정보 전달
+    };
+    this.controller = new SelectBoxController(controllerConfig);
+  };
+  // 이벤트 핸들러들
+  UnifiedSelectBox.prototype.handleInput = function (value) {
+    var _this = this;
+    var _a, _b;
+    // 기존 디바운스 타이머 제거
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer);
+      this.searchDebounceTimer = undefined;
+    }
+    // 필터링은 즉시 업데이트 (사용자가 입력하는 동안 필터링 결과를 즉시 보여줌)
+    // 하지만 onSearch 콜백은 디바운싱 적용
+    var isApiMode = this.config.type === 'combobox' && !this.hasInitialOptions;
+    if (isApiMode) {
+      // 텍스트가 변경되었거나 비워졌으면 즉시 옵션 완전히 제거
+      if (this.lastSearchValue !== value) {
+        if (!value.trim()) {
+          // 검색어가 비워졌으면 옵션 완전히 비우기
+          this.model.updateOptions([]);
+        } else {
+          // 검색어가 변경되었으면 이전 옵션 즉시 제거
+          this.model.updateOptions([]);
+        }
+        this.lastSearchValue = value;
+      }
+    }
+    // 디바운싱이 설정되어 있으면 입력이 멈춘 후 onSearch 콜백만 실행
+    if (this.config.searchDebounceMs > 0) {
+      // 새로운 타이머 ID 생성 (각 타이머를 고유하게 식별)
+      var timerId_1 = Date.now() + Math.random();
+      this.currentDebounceTimerId = timerId_1;
+      this.searchDebounceTimer = window.setTimeout(function () {
+        var _a, _b;
+        // 타이머가 취소되었는지 확인 (다른 타이머가 시작되었으면 현재 타이머는 무시)
+        if (_this.currentDebounceTimerId !== timerId_1) {
+          return; // 이 타이머는 취소되었으므로 실행하지 않음
+        }
+        // 타이머가 여전히 유효하면 실행
+        _this.searchDebounceTimer = undefined;
+        _this.currentDebounceTimerId = undefined;
+        // API 모드인 경우 필터링 업데이트 (디바운싱 후 실행)
+        if (isApiMode) {
+          _this.model.updateSearchAndFilter(value);
+        }
+        // 텍스트가 있을 때만 드롭다운 열기
+        if (value.trim()) {
+          _this.controller.open();
+        } else if (!_this.model.getState().showAllItems) {
+          _this.controller.close();
+        }
+        // onSearch 콜백 호출 (디바운싱 적용, 최종 타이머만 실행)
+        (_b = (_a = _this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+      }, this.config.searchDebounceMs);
+    } else {
+      // 디바운싱이 0으로 명시적으로 설정되었으면 즉시 실행
+      this.model.updateSearchAndFilter(value);
+      // 텍스트가 있거나 옵션이 있으면 드롭다운 열기
+      var hasOptions = this.model.getState().options.length > 0 || this.model.getState().filteredOptions.length > 0;
+      if (value.trim() || hasOptions) {
+        this.controller.open();
+      } else if (!this.model.getState().showAllItems) {
+        this.controller.close();
+      }
+      // onSearch 콜백 호출 (디바운싱 없음)
+      (_b = (_a = this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    }
+  };
+  UnifiedSelectBox.prototype.handleInputClick = function () {
+    var _a, _b;
+    if (!this.config.disabled) {
+      (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
+      if (this.config.type === 'combobox') {
+        var currentInputValue = ((_b = this.inputField) === null || _b === void 0 ? void 0 : _b.input.value) || '';
+        if (currentInputValue.trim().length > 0 || this.model.getState().showAllItems) {
+          this.controller.open();
+        }
+      }
+    }
+  };
+  UnifiedSelectBox.prototype.handleClearInput = function () {
+    // input 필드 텍스트 지우기
+    if (this.inputField) {
+      this.inputField.setValue('');
+    }
+    // 모델의 검색값도 초기화
+    this.model.clearInput();
+    // ComboBox 타입이고 초기 옵션이 없는 경우 (API 모드)
+    // Clear 버튼 클릭 시 옵션도 완전히 비우기
+    var isApiMode = this.config.type === 'combobox' && !this.hasInitialOptions;
+    if (isApiMode) {
+      this.model.updateOptions([]);
+      this.lastSearchValue = '';
+    }
+    this.controller.close();
+  };
+  UnifiedSelectBox.prototype.handleShowAll = function () {
+    var _a, _b, _c, _d;
+    return __awaiter(this, void 0, void 0, function () {
+      var hasOptions;
+      return __generator(this, function (_e) {
+        switch (_e.label) {
+          case 0:
+            if (!!this.config.disabled) return [3 /*break*/, 2];
+            (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = this.inputField) === null || _b === void 0 ? void 0 : _b.setValue('');
+            this.model.updateSearchAndFilter('', true);
+            // onSearchAll 콜백 호출 (async 함수일 경우를 대비해 Promise.resolve로 감싸서 처리)
+            return [4 /*yield*/, Promise.resolve((_d = (_c = this.config).onSearchAll) === null || _d === void 0 ? void 0 : _d.call(_c))];
+          case 1:
+            // onSearchAll 콜백 호출 (async 함수일 경우를 대비해 Promise.resolve로 감싸서 처리)
+            _e.sent();
+            hasOptions = this.model.getState().options.length > 0 || this.model.getState().filteredOptions.length > 0;
+            if (hasOptions) {
+              this.controller.open();
+            }
+            _e.label = 2;
+          case 2:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  UnifiedSelectBox.prototype.handleSelectionChange = function (selectedValues) {
+    var _a, _b;
+    var result = this.config.multiple ? selectedValues : selectedValues[0] || '';
+    (_b = (_a = this.config).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, result);
+    // UI 업데이트
+    if (this.config.type === 'selectbox') {
+      this.updateSelectBoxValue();
+    }
+    // 다중 선택인 경우 전체 선택 버튼 텍스트 업데이트
+    if (this.config.multiple) {
+      this.updateSelectAllButtonText();
+    }
+    // 단일 선택 시 드롭다운 닫기
+    if (!this.config.multiple && !this.config.showFooterButtons) {
+      this.controller.close();
+    }
+  };
+  UnifiedSelectBox.prototype.updateSelectBoxValue = function () {
+    var valueSpan = this.element.querySelector('.ncua-selectbox__value');
+    if (valueSpan) {
+      if (this.config.multiple) {
+        // Multiple 모드일 때는 항상 placeholder 표시
+        valueSpan.textContent = this.config.placeholder || '';
+      } else {
+        // Single 모드일 때는 선택된 옵션 또는 placeholder 표시
+        var selectedOptions = this.model.getSelectedOptions();
+        var selectedOption = selectedOptions[0];
+        valueSpan.textContent = selectedOption ? selectedOption.label : this.config.placeholder || '';
+      }
+    }
+  };
+  UnifiedSelectBox.prototype.canToggleDropdown = function () {
+    var _a;
+    if (this.config.type === 'combobox') {
+      // ComboBox의 경우: 인풋에 텍스트가 있으면 항상 토글 가능
+      var currentInputValue = ((_a = this.inputField) === null || _a === void 0 ? void 0 : _a.input.value) || '';
+      return currentInputValue.trim().length > 0 || this.model.getState().showAllItems;
+    }
+    return true; // SelectBox는 항상 토글 가능
+  };
+  // 푸터 버튼 핸들러들
+  UnifiedSelectBox.prototype.handleSelectAll = function () {
+    var _a, _b;
+    if (this.config.multiple) {
+      this.model.toggleSelectAll();
+      this.updateSelectAllButtonText();
+      // 외부 콜백 호출
+      (_b = (_a = this.config).onSelectAll) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+  };
+  UnifiedSelectBox.prototype.handleComplete = function () {
+    var _a, _b, _c, _d;
+    if (this.config.multiple || this.config.type === 'combobox') {
+      var currentValues = this.model.getValue();
+      // SelectBox 타입이고 multiple 모드일 때만 onChange 콜백으로 현재 선택된 값들 전달
+      if (this.config.type === 'selectbox' && this.config.multiple && Array.isArray(currentValues)) {
+        (_b = (_a = this.config).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, currentValues);
+      }
+      (_d = (_c = this.config).onComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
+      // ComboBox 타입인 경우에만 값 초기화 및 검색어 초기화
+      if (this.config.type === 'combobox') {
+        this.model.setValue([]);
+        if (this.inputField) {
+          this.inputField.setValue('');
+        }
+        this.model.clearInput();
+        var isApiMode = !this.hasInitialOptions;
+        if (isApiMode) {
+          this.model.updateOptions([]);
+          this.lastSearchValue = '';
+        }
+      }
+      this.controller.close();
+    }
+  };
+  UnifiedSelectBox.prototype.updateSelectAllButtonText = function () {
+    if (!this.config.multiple || !this.footerElement) return;
+    this.renderer.updateSelectAllButtonText(this.footerElement, this.model.getSelectAllButtonText());
+  };
+  // Public API
+  UnifiedSelectBox.prototype.getValues = function () {
+    var selectedIds = this.model.getValue();
+    var allOptions = this.getOptions();
+    // selectedIds가 배열이 아닌 경우 배열로 변환
+    var ids = Array.isArray(selectedIds) ? selectedIds : selectedIds ? [selectedIds] : [];
+    // 선택된 id에 해당하는 옵션 객체들을 찾아서 반환
+    return ids.map(function (id) {
+      return allOptions.find(function (opt) {
+        return opt.id === id;
+      });
+    }).filter(function (opt) {
+      return opt !== undefined;
+    });
+  };
+  UnifiedSelectBox.prototype.getOptions = function () {
+    return this.config.options || [];
+  };
+  UnifiedSelectBox.prototype.setValues = function (value) {
+    // 옵션 객체 배열에서 id 배열로 변환
+    var ids = value.map(function (option) {
+      return option.id;
+    });
+    // 단일 선택 모드인 경우 첫 번째 값만 사용
+    var finalIds = this.config.multiple ? ids : ids[0] || '';
+    this.model.setValue(finalIds);
+    if (this.config.type === 'selectbox') {
+      this.updateSelectBoxValue();
+    } else {
+      // ComboBox의 경우 input 필드도 업데이트
+      if (this.inputField) {
+        var isEmpty = value.length === 0;
+        if (isEmpty) {
+          // 빈 값으로 설정할 때 input 필드와 검색값 모두 비우기
+          this.inputField.setValue('');
+          this.model.updateSearchAndFilter('');
+        }
+      }
+    }
+  };
+  UnifiedSelectBox.prototype.updateOptions = function (newOptions) {
+    // config.options도 업데이트 (getOptions()가 이를 반환하므로)
+    this.config.options = __spreadArray([], newOptions, true);
+    this.model.updateOptions(newOptions);
+    this.controller.updateOptions(newOptions);
+  };
+  UnifiedSelectBox.prototype.setDisabled = function (disabled) {
+    var _a, _b;
+    this.config.disabled = disabled;
+    var baseClass = this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
+    var disabledClass = "".concat(baseClass, "--disabled");
+    this.element.classList.toggle(disabledClass, disabled);
+    if (this.controller) {
+      this.controller.setDisabled(disabled);
+    }
+    if (this.config.type === 'combobox') {
+      // 입력 필드 비활성화
+      if ((_a = this.inputField) === null || _a === void 0 ? void 0 : _a.input) {
+        this.inputField.input.disabled = disabled;
+        (_b = this.inputField.container) === null || _b === void 0 ? void 0 : _b.classList.toggle('is-disabled', disabled);
+      }
+    } else if (this.triggerElement) {
+      this.triggerElement.setAttribute('tabindex', disabled ? '-1' : '0');
+    }
+  };
+  UnifiedSelectBox.prototype.open = function () {
+    this.controller.open();
+  };
+  UnifiedSelectBox.prototype.close = function () {
+    this.controller.close();
+  };
+  UnifiedSelectBox.prototype.focus = function () {
+    var _a, _b;
+    if (this.config.type === 'combobox') {
+      (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      (_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+  };
+  UnifiedSelectBox.prototype.destroy = function () {
+    // 디바운스 타이머 정리
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer);
+      this.searchDebounceTimer = undefined;
+    }
+    this.currentDebounceTimerId = undefined;
+    this.controller.destroy();
+    this.renderer.clearCache();
+    this.inputField = undefined;
+  };
+  // Multiple 모드 전용 메서드들
+  UnifiedSelectBox.prototype.selectAll = function () {
+    var _a;
+    if (this.config.multiple) {
+      var allOptionIds = ((_a = this.config.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
+        return option.id;
+      })) || [];
+      this.model.setValue(allOptionIds);
+    }
+  };
+  UnifiedSelectBox.prototype.deselectAll = function () {
+    if (this.config.multiple) {
+      this.model.setValue([]);
+    }
+  };
+  UnifiedSelectBox.prototype.isMultiple = function () {
+    return this.config.multiple || false;
+  };
+  UnifiedSelectBox.prototype.toggleSelectAll = function () {
+    var _a;
+    if (!this.config.multiple) return;
+    var currentValues = this.model.getValue();
+    var allOptionIds = ((_a = this.config.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
+      return option.id;
+    })) || [];
+    if (Array.isArray(currentValues) && currentValues.length === allOptionIds.length) {
+      // 모든 옵션이 선택되어 있으면 전체 해제
+      this.deselectAll();
+    } else {
+      // 일부만 선택되어 있거나 아무것도 선택되지 않았으면 전체 선택
+      this.selectAll();
+    }
+  };
+  // 디버깅용
+  UnifiedSelectBox.prototype.getDebugInfo = function () {
+    return {
+      config: this.config,
+      modelState: this.model.getDebugInfo(),
+      isOpen: this.model.getState().isOpen
+    };
+  };
+  return UnifiedSelectBox;
+}();
+export { UnifiedSelectBox };

package/dist/esm/constant/color.js

@@ -17,6 +17,8 @@ export var COLOR = {
   pink100: '#fce7f6',
   pink600: '#c11574',
   yellow600: '#c27004',
+  violet300: '#C3B5FD',
+  violet600: '#5720B7',
   white: '#fff',
   currentColor: 'currentColor',
   black: '',