@ncds/ui-admin 1.6.3 → 1.6.4-alpha.0

package/dist/esm/assets/scripts/tooltip/TooltipLayerManager.js

@@ -1,79 +0,0 @@
-import { CLASS_NAMES, Z_INDEX } from './const';
-/**
- * 툴팁 레이어 관리자
- * 전역 레이어 하나를 사용하여 모든 툴팁 패널을 관리합니다.
- */
-var TooltipLayerManager = /** @class */function () {
-  function TooltipLayerManager() {
-    this.layer = null;
-    this.panels = new Map();
-    this.nextId = 0;
-    this.maxZIndex = Z_INDEX.TOOLTIP_LAYER; // 기본 z-index (가장 높은 값 추적)
-    this.createGlobalLayer();
-  }
-  TooltipLayerManager.getInstance = function () {
-    if (!this.instance) {
-      this.instance = new TooltipLayerManager();
-    }
-    return this.instance;
-  };
-  TooltipLayerManager.prototype.createGlobalLayer = function () {
-    // 기존 레이어가 있으면 제거
-    var existingLayer = document.getElementById('tooltip-global-layer');
-    if (existingLayer) {
-      existingLayer.remove();
-    }
-    this.layer = document.createElement('div');
-    this.layer.id = 'tooltip-global-layer';
-    this.layer.className = CLASS_NAMES.TOOLTIP_GLOBAL_LAYER;
-    this.layer.style.zIndex = String(this.maxZIndex);
-    document.body.appendChild(this.layer);
-  };
-  TooltipLayerManager.prototype.createPanel = function (zIndex) {
-    if (zIndex === void 0) {
-      zIndex = Z_INDEX.TOOLTIP_LAYER;
-    }
-    if (!this.layer) {
-      this.createGlobalLayer();
-    }
-    // 최대 z-index 추적 및 전역 레이어 업데이트
-    // 왜 이런 구현이 필요한지..? 툴팁 레이어 매니저는 바디에 무분별하게 붙는걸 방지하기 위해 하나의 전역 레이아웃입니다. 툴팁 20개씩 붙는 페이지를 위함
-    // 전역 레이어의 z-index는 자식과 일치되면 가장 좋지만, 수시로 변하는 z-index를 추적하는 것이 디버깅측면에서 좋지않고 버그를 유발할 가능성이 높아보여
-    // 툴팁은 보통은 고정된값을 사용하기에, 변동이 없다고 가정하고, 변동되는 경우에만 가장 높은 z-index를 추적하고 업데이트하는 구현을 하였습니다.
-    if (zIndex > this.maxZIndex) {
-      this.maxZIndex = zIndex;
-      if (this.layer) {
-        this.layer.style.zIndex = String(this.maxZIndex);
-      }
-    }
-    var id = "tooltip-panel-".concat(++this.nextId);
-    var panel = document.createElement('span');
-    panel.id = id;
-    panel.className = CLASS_NAMES.TOOLTIP_PANEL;
-    this.panels.set(id, panel);
-    this.layer.appendChild(panel);
-    return {
-      id: id,
-      panel: panel
-    };
-  };
-  TooltipLayerManager.prototype.removePanel = function (id) {
-    var panel = this.panels.get(id);
-    if (panel && panel.parentNode) {
-      panel.parentNode.removeChild(panel);
-      this.panels.delete(id);
-    }
-  };
-  TooltipLayerManager.prototype.getPanel = function (id) {
-    return this.panels.get(id) || null;
-  };
-  TooltipLayerManager.prototype.destroy = function () {
-    this.panels.clear();
-    if (this.layer && this.layer.parentNode) {
-      this.layer.parentNode.removeChild(this.layer);
-    }
-    this.layer = null;
-  };
-  return TooltipLayerManager;
-}();
-export { TooltipLayerManager };

package/dist/esm/assets/scripts/tooltip/const/classNames.js

@@ -1,23 +0,0 @@
-// Tooltip CSS 클래스명 상수들
-export var CLASS_NAMES = {
-  // 기본 클래스
-  TOOLTIP: 'ncua-tooltip',
-  TOOLTIP_ICON: 'ncua-tooltip__icon',
-  TOOLTIP_BG: 'ncua-tooltip__bg',
-  TOOLTIP_TITLE: 'ncua-tooltip__title',
-  TOOLTIP_CONTENT: 'ncua-tooltip__content',
-  TOOLTIP_CLOSE_BUTTON: 'ncua-tooltip__close-button',
-  // 수정자 클래스 (modifier classes)
-  TOOLTIP_HIDDEN_ARROW: 'ncua-tooltip--hidden-arrow',
-  TOOLTIP_STROKE: 'ncua-tooltip--stroke',
-  TOOLTIP_AUTO: 'ncua-tooltip--auto',
-  // 배경 상태 클래스
-  TOOLTIP_BG_VISIBLE: 'ncua-tooltip__bg--visible',
-  TOOLTIP_BG_MEASURING: 'ncua-tooltip__bg--measuring',
-  TOOLTIP_BG_FORCE_HIDDEN: 'ncua-tooltip__bg--force-hidden',
-  // 레이어 관련 클래스
-  TOOLTIP_GLOBAL_LAYER: 'ncua-tooltip-global-layer',
-  TOOLTIP_PANEL: 'ncua-tooltip-panel',
-  // 버튼 클래스
-  BUTTON_CLOSE_X: 'ncua-button-close-x'
-};

package/dist/esm/assets/scripts/tooltip/const/constants.js

@@ -1,50 +0,0 @@
-export var MARGIN = 10;
-export var DEFAULT_TOOLTIP_WIDTH = 200;
-export var DEFAULT_TOOLTIP_HEIGHT = 60;
-export var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
-// 툴팁 위치 계산 관련 상수
-export var TOOLTIP_OFFSET = 8; // 툴팁과 앵커 사이의 거리
-export var VIEWPORT_MARGIN = 8; // 뷰포트 경계와의 최소 거리
-// 아이콘 크기 상수
-export var ICON_SIZES = {
-  sm: 14,
-  md: 16
-};
-// 애니메이션 관련 상수
-export var TRANSITION_DURATION = '0.18s';
-export var OFFSCREEN_POSITION = '-99999px';
-// 툴팁 상태 관련 상수
-export var OPACITY = {
-  HIDDEN: '0',
-  VISIBLE: '1'
-};
-export var POSITION = {
-  INITIAL: '0px',
-  OFFSCREEN: OFFSCREEN_POSITION
-};
-// z-index 관련 상수
-export var Z_INDEX = {
-  TOOLTIP_LAYER: 2000 // 툴팁 전역 레이어 기본 z-index
-};
-// 이벤트 관련 상수
-export var EVENT_OPTIONS = {
-  PASSIVE: {
-    passive: true
-  },
-  ONCE: {
-    once: true
-  }
-};
-export var TOOLTIP_DEFAULT_VALUE = {
-  tooltipType: 'white',
-  iconType: 'stroke',
-  position: 'auto',
-  size: 'sm',
-  hideArrow: false,
-  title: '',
-  content: '',
-  type: 'short',
-  zIndex: Z_INDEX.TOOLTIP_LAYER,
-  useShadowDOM: false,
-  className: '' // 커스텀 클래스명
-};

package/dist/esm/assets/scripts/tooltip/const/icons.js

@@ -1,9 +0,0 @@
-// SVG 아이콘들
-export var SVG_ICONS = {
-  'help-circle-stroke': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\">\n      <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path>\n    </svg>");
-  },
-  'help-circle-fill': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m-1.093 7.271a2 2 0 0 1 3.013 1.727V10c0 .47-.365.958-1.055 1.418a6 6 0 0 1-1.262.634 1 1 0 0 0 .633 1.897l.169-.061a8.05 8.05 0 0 0 1.57-.806c.81-.54 1.944-1.55 1.945-3.081a4 4 0 0 0-7.773-1.333 1 1 0 0 0 1.886.664 2 2 0 0 1 .874-1.06M12 16a1 1 0 1 0 0 2h.01a1 1 0 0 0 0-2z\" clip-rule=\"evenodd\"></path>\n    </svg>");
-  }
-};

package/dist/esm/assets/scripts/tooltip/const/index.js

@@ -1,4 +0,0 @@
-export { SVG_ICONS } from './icons';
-export { CLASS_NAMES } from './classNames';
-export { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY, TOOLTIP_DEFAULT_VALUE, TOOLTIP_OFFSET, VIEWPORT_MARGIN, ICON_SIZES, TRANSITION_DURATION, OFFSCREEN_POSITION, OPACITY, POSITION, Z_INDEX, EVENT_OPTIONS } from './constants';
-export { CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG } from './templates';

package/dist/esm/assets/scripts/tooltip/const/templates.js

@@ -1,42 +0,0 @@
-import { OFFSCREEN_POSITION, TRANSITION_DURATION } from './constants';
-/**
- * 툴팁 관련 CSS 및 HTML 템플릿
- */
-// CSS 템플릿
-export var CSS_TEMPLATES = {
-  // 레이어 컨테이너 스타일 (클릭 통과)
-  LAYER_CONTAINER: function (zIndex) {
-    return "\n    position: fixed;\n    inset: 0;\n    pointer-events: none;\n    z-index: ".concat(zIndex, ";\n    display: block;\n  ");
-  },
-  // 툴팁 패널 스타일 (클릭 허용)
-  TOOLTIP_PANEL: function (zIndex) {
-    return "\n    position: fixed;\n    left: ".concat(OFFSCREEN_POSITION, "; \n    top: ").concat(OFFSCREEN_POSITION, ";\n    opacity: 0;\n    transition: opacity ").concat(TRANSITION_DURATION, " ease;\n    pointer-events: auto;\n    z-index: ").concat(zIndex, ";\n    right: auto;\n    bottom: auto;\n    transform: none;\n  ");
-  },
-  // 앵커 래퍼 스타일
-  ANCHOR_WRAPPER: "\n    display: inline-flex;\n    vertical-align: middle;\n    margin: 0 4px;\n  ",
-  // Shadow DOM 기본 스타일
-  SHADOW_DOM_HOST: "\n    :host { \n      all: unset; \n      display: block; \n      font-family: system-ui; \n      color: black; \n    }\n  "
-};
-// HTML 템플릿
-export var HTML_TEMPLATES = {
-  // 아이콘 래퍼
-  ICON_WRAPPER: function (className, iconSvg) {
-    return "<span class=\"".concat(className, "\">").concat(iconSvg, "</span>");
-  },
-  // 툴팁 제목
-  TOOLTIP_TITLE: function (className, title) {
-    return "<span class=\"".concat(className, "\">").concat(title, "</span>");
-  },
-  // 툴팁 콘텐츠 (일반)
-  TOOLTIP_CONTENT: function (className, content) {
-    return "<span class=\"".concat(className, "\">").concat(content, "</span>");
-  },
-  // 툴팁 콘텐츠 (Shadow DOM)
-  TOOLTIP_CONTENT_SHADOW: function (className) {
-    return "<span class=\"".concat(className, "\" data-shadow-content></span>");
-  }
-};
-// 폴백 아이콘 SVG
-export var FALLBACK_ICON_SVG = function (size) {
-  return "<svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n    <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" fill=\"none\"/>\n    <text x=\"8\" y=\"11\" font-size=\"8\" text-anchor=\"middle\" fill=\"currentColor\">?</text>\n  </svg>");
-};

package/dist/esm/assets/scripts/tooltip/const/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/assets/scripts/tooltip/index.js

@@ -1,10 +0,0 @@
-import { Tooltip } from './Tooltip';
-export { Tooltip } from './Tooltip';
-export { calculateOptimalPosition } from './utils';
-export { SVG_ICONS, MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
-// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
-if (typeof window !== 'undefined') {
-  window.ncua = window.ncua || {};
-  window.ncua.Tooltip = Tooltip;
-}
-export default Tooltip;

package/dist/esm/assets/scripts/tooltip/utils.js

@@ -1,35 +0,0 @@
-import { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
-export function calculateOptimalPosition(triggerElement, tooltipElement, preferredPosition) {
-  if (preferredPosition === void 0) {
-    preferredPosition = 'bottom';
-  }
-  var triggerRect = triggerElement.getBoundingClientRect();
-  var tooltipRect = tooltipElement.getBoundingClientRect();
-  var viewportWidth = window.innerWidth,
-    viewportHeight = window.innerHeight;
-  var spaces = {
-    top: triggerRect.top,
-    bottom: viewportHeight - triggerRect.bottom,
-    left: triggerRect.left,
-    right: viewportWidth - triggerRect.right
-  };
-  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  for (var _i = 0, POSITION_PRIORITY_1 = POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
-    var position = POSITION_PRIORITY_1[_i];
-    var hasSpace = position === 'bottom' || position === 'top' ? spaces[position] >= tooltipHeight + MARGIN : spaces[position] >= tooltipWidth + MARGIN;
-    if (hasSpace) {
-      if (position === 'bottom' || position === 'top') {
-        var centerX = triggerRect.left + triggerRect.width / 2;
-        var tooltipHalfWidth = tooltipWidth / 2;
-        if (centerX - tooltipHalfWidth < MARGIN) {
-          return "".concat(position, "-left");
-        } else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-          return "".concat(position, "-right");
-        }
-      }
-      return position;
-    }
-  }
-  return preferredPosition;
-}

package/dist/esm/assets/scripts/utils/unifiedBox/DOMRenderer.js

@@ -1,379 +0,0 @@
-var DOMRenderer = /** @class */function () {
-  function DOMRenderer() {
-    this.optionElementCache = new Map();
-  }
-  /**
-   * 드롭다운 컨테이너 생성 (구조만)
-   */
-  DOMRenderer.prototype.createDropdownStructure = function (config) {
-    var dropdown = document.createElement('div');
-    dropdown.className = "ncua-select-dropdown ncua-select-dropdown--down ncua-select-dropdown--".concat(config.size);
-    dropdown.style.display = 'none';
-    var content = document.createElement('div');
-    content.className = 'ncua-select-dropdown__content';
-    var optionsList = document.createElement('ul');
-    optionsList.className = 'ncua-select-dropdown__options';
-    optionsList.setAttribute('role', 'listbox');
-    optionsList.setAttribute('id', config.listboxId);
-    optionsList.style.maxHeight = "".concat(config.maxHeight, "px");
-    optionsList.style.overflowY = 'auto'; // 스크롤 활성화
-    content.appendChild(optionsList);
-    dropdown.appendChild(content);
-    return {
-      dropdown: dropdown,
-      content: content,
-      optionsList: optionsList
-    };
-  };
-  /**
-   * 단일 옵션 엘리먼트 생성 (재사용 가능)
-   */
-  DOMRenderer.prototype.createOptionElement = function (option, index, config) {
-    var cached = this.optionElementCache.get(option.id);
-    if (cached) {
-      this.updateOptionElement(cached, option, index, config);
-      return cached;
-    }
-    var element = document.createElement('li');
-    element.className = 'ncua-select-dropdown__option';
-    element.setAttribute('data-value', String(option.id));
-    element.setAttribute('data-index', String(index));
-    element.setAttribute('role', 'option');
-    element.id = "".concat(config.listboxId, "-").concat(option.id);
-    var span = document.createElement('span');
-    span.className = 'ncua-select-dropdown__option-text';
-    span.textContent = option.label;
-    element.appendChild(span);
-    this.updateOptionElement(element, option, index, config);
-    this.optionElementCache.set(option.id, element);
-    return element;
-  };
-  /**
-   * 옵션 엘리먼트 상태 업데이트 (DOM 조작 최소화)
-   */
-  DOMRenderer.prototype.updateOptionElement = function (element, option, index, config) {
-    // 클래스 업데이트 (필요한 경우에만)
-    var shouldHaveSelected = option.selected || false;
-    var shouldHaveFocused = option.focused || false;
-    var shouldHaveDisabled = option.disabled || false;
-    this.toggleClass(element, 'ncua-select-dropdown__option--selected', shouldHaveSelected);
-    this.toggleClass(element, 'ncua-select-dropdown__option--focused', shouldHaveFocused);
-    this.toggleClass(element, 'ncua-select-dropdown__option--disabled', shouldHaveDisabled);
-    // 속성 업데이트 (필요한 경우에만)
-    element.setAttribute('aria-selected', String(shouldHaveSelected));
-    element.setAttribute('data-index', String(index));
-  };
-  /**
-   * "결과 없음" 엘리먼트 생성
-   */
-  DOMRenderer.prototype.createNoResultsElement = function (text) {
-    if (text === void 0) {
-      text = '일치하는 결과가 없습니다.';
-    }
-    var noResults = document.createElement('li');
-    noResults.className = 'ncua-select-dropdown__no-results';
-    noResults.textContent = text;
-    return noResults;
-  };
-  /**
-   * 옵션 리스트 효율적 업데이트 (Differential Rendering)
-   */
-  DOMRenderer.prototype.updateOptionsList = function (container, newOptions, config, showNoResults) {
-    var _this = this;
-    if (showNoResults === void 0) {
-      showNoResults = false;
-    }
-    // 스크롤 위치 저장
-    var scrollTop = container.scrollTop;
-    // 결과 없음 처리
-    if (showNoResults) {
-      container.innerHTML = '';
-      container.appendChild(this.createNoResultsElement(config.noResultsText));
-      return [];
-    }
-    var newElements = [];
-    // 새 옵션들로 엘리먼트 생성/업데이트
-    newOptions.forEach(function (option, index) {
-      var element = _this.createOptionElement(option, index, config);
-      newElements.push(element);
-    });
-    // DOM 업데이트 최소화 - 변경된 부분만 업데이트
-    this.updateContainerChildren(container, newElements);
-    // 스크롤 위치 복원 (다음 프레임에서 실행)
-    requestAnimationFrame(function () {
-      container.scrollTop = scrollTop;
-    });
-    return newElements;
-  };
-  /**
-   * 컨테이너 자식 엘리먼트 효율적 업데이트
-   */
-  DOMRenderer.prototype.updateContainerChildren = function (container, newChildren) {
-    // 기존 엘리먼트 제거 (새 리스트에 없는 것들)
-    Array.from(container.children).forEach(function (child) {
-      if (!newChildren.includes(child)) {
-        child.remove();
-      }
-    });
-    // 새 엘리먼트 추가 (순서 유지)
-    newChildren.forEach(function (child, index) {
-      var currentChild = container.children[index];
-      if (currentChild !== child) {
-        if (currentChild) {
-          container.insertBefore(child, currentChild);
-        } else {
-          container.appendChild(child);
-        }
-      }
-    });
-  };
-  /**
-   * 클래스 토글 (변경이 필요한 경우에만)
-   */
-  DOMRenderer.prototype.toggleClass = function (element, className, shouldHave) {
-    var hasClass = element.classList.contains(className);
-    if (shouldHave && !hasClass) {
-      element.classList.add(className);
-    } else if (!shouldHave && hasClass) {
-      element.classList.remove(className);
-    }
-  };
-  /**
-   * 입력 필드 생성 (InputFieldUtils에서 이동)
-   */
-  DOMRenderer.prototype.createInputField = function (config) {
-    var actualSize = config.size === 'md' ? 'sm' : config.size || 'sm';
-    // 최상위 ncua-input 컨테이너 (React 버전과 동일)
-    var inputContainer = document.createElement('div');
-    inputContainer.className = "ncua-input ncua-input--".concat(actualSize);
-    if (config.disabled) inputContainer.classList.add('is-disabled');
-    // ncua-input__content 래퍼 (React 버전과 동일)
-    var inputContent = document.createElement('div');
-    inputContent.className = 'ncua-input__content';
-    // ncua-input__field 래퍼 (React 버전과 동일, size 포함)
-    var inputField = document.createElement('div');
-    inputField.className = "ncua-input__field ncua-input__field--".concat(actualSize);
-    // 실제 입력 필드 (React 버전과 동일)
-    var input = document.createElement('input');
-    input.type = 'text';
-    input.placeholder = config.placeholder || '';
-    if (config.disabled) input.disabled = true;
-    // 이벤트 리스너
-    if (config.onInput) {
-      input.addEventListener('input', function (e) {
-        config.onInput(e.target.value);
-      });
-    }
-    if (config.onClick) {
-      input.addEventListener('click', function (event) {
-        event.stopPropagation(); // 이벤트 버블링 방지
-        config.onClick();
-      });
-    }
-    // 클리어 버튼 (React 버전의 renderClearButton과 동일)
-    var clearButton = null;
-    if (config.onClear) {
-      clearButton = document.createElement('button');
-      clearButton.type = 'button';
-      clearButton.className = 'ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear';
-      clearButton.style.display = 'none'; // 초기에는 숨김
-      clearButton.addEventListener('click', config.onClear);
-      // 클리어 아이콘 (React와 동일한 크기)
-      var iconSize = actualSize === 'xs' ? 14 : 16;
-      var clearIcon = DOMRenderer.createSvgIcon('close', iconSize);
-      clearIcon.setAttribute('class', 'ncua-input__clear-icon');
-      clearButton.appendChild(clearIcon);
-      // 입력값 변경 시 클리어 버튼 표시/숨김
-      input.addEventListener('input', function () {
-        if (clearButton) {
-          clearButton.style.display = input.value ? 'flex' : 'none';
-        }
-      });
-    }
-    // 전체 보기 버튼 (React 버전의 trailingElement와 동일)
-    var showAllButton = null;
-    if (config.onShowAll) {
-      showAllButton = document.createElement('div');
-      showAllButton.className = 'ncua-input__icon-wrap ncua-input__right-icon';
-      showAllButton.addEventListener('click', config.onShowAll);
-      // 전체 버튼 (React Button 컴포넌트와 유사한 구조)
-      var button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'ncua-btn ncua-btn--xxs ncua-btn--text';
-      // 아이콘
-      var iconSize = 14;
-      var showAllIcon = DOMRenderer.createSvgIcon('chevron-selector-vertical', iconSize);
-      button.appendChild(showAllIcon);
-      // 텍스트
-      var label = document.createElement('span');
-      label.className = 'ncua-btn__label';
-      label.textContent = '전체';
-      button.appendChild(label);
-      showAllButton.appendChild(button);
-    }
-    // 검색 아이콘 (React 버전의 leadingElement와 동일)
-    var searchIcon = null;
-    if (config.showSearchIcon) {
-      searchIcon = document.createElement('div');
-      searchIcon.className = 'ncua-input__icon-wrap ncua-input__left-icon';
-      // 검색 아이콘 (React와 동일한 크기와 색상)
-      var searchSvg = DOMRenderer.createSvgIcon('search', 14);
-      searchSvg.style.color = '#98a2b3'; // gray300에 해당하는 색상
-      searchIcon.appendChild(searchSvg);
-    }
-    // 구조 조립 (React 버전과 동일한 순서)
-    if (searchIcon) inputField.appendChild(searchIcon);
-    inputField.appendChild(input);
-    if (clearButton) inputField.appendChild(clearButton);
-    if (showAllButton) inputField.appendChild(showAllButton);
-    inputContent.appendChild(inputField);
-    inputContainer.appendChild(inputContent);
-    return {
-      container: inputContainer,
-      input: input,
-      setValue: function (value) {
-        input.value = value;
-        // 클리어 버튼 표시 상태 업데이트
-        if (clearButton) {
-          clearButton.style.display = value ? 'flex' : 'none';
-        }
-      },
-      focus: function () {
-        return input.focus();
-      },
-      blur: function () {
-        return input.blur();
-      }
-    };
-  };
-  /**
-   * 캐시 정리
-   */
-  DOMRenderer.prototype.clearCache = function () {
-    this.optionElementCache.clear();
-  };
-  /**
-   * 특정 옵션 캐시 제거
-   */
-  DOMRenderer.prototype.removeCachedOption = function (optionId) {
-    this.optionElementCache.delete(optionId);
-  };
-  /**
-   * 공통 DOM 생성 유틸리티
-   */
-  DOMRenderer.createElementWithClass = function (tagName, className, textContent) {
-    var element = document.createElement(tagName);
-    element.className = className;
-    if (textContent) {
-      element.textContent = textContent;
-    }
-    return element;
-  };
-  /**
-   * 버튼 엘리먼트 생성
-   */
-  DOMRenderer.createButton = function (className, textContent, onClick) {
-    var button = document.createElement('button');
-    button.className = className;
-    // React 컴포넌트와 일치하도록 span.ncua-btn__label 구조 사용
-    var label = document.createElement('span');
-    label.className = 'ncua-btn__label';
-    label.textContent = textContent;
-    button.appendChild(label);
-    if (onClick) {
-      button.addEventListener('click', onClick);
-    }
-    return button;
-  };
-  /**
-   * SVG 아이콘 생성
-   */
-  DOMRenderer.createSvgIcon = function (iconName, size) {
-    if (size === void 0) {
-      size = 16;
-    }
-    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('width', size.toString());
-    svg.setAttribute('height', size.toString());
-    svg.setAttribute('viewBox', '0 0 24 24');
-    svg.setAttribute('fill', 'none');
-    // 기본 아이콘들
-    switch (iconName) {
-      case 'close':
-        svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 7 7 17M7 7l10 10"/>';
-        break;
-      case 'chevron-down':
-        svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>';
-        break;
-      case 'chevron-selector-vertical':
-        svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 15 5 5 5-5M7 9l5-5 5 5"/>';
-        break;
-      case 'search':
-        svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0"></path>';
-        break;
-    }
-    return svg;
-  };
-  /**
-   * 푸터 생성
-   */
-  DOMRenderer.prototype.createFooter = function (config) {
-    // 푸터 생성
-    var footer = document.createElement('div');
-    footer.className = 'ncua-select-dropdown__footer';
-    var footerButtons = document.createElement('div');
-    footerButtons.className = 'ncua-select-dropdown__footer-buttons';
-    var footerLeft = document.createElement('div');
-    footerLeft.className = 'ncua-select-dropdown__footer-left';
-    var footerRight = document.createElement('div');
-    footerRight.className = 'ncua-select-dropdown__footer-right';
-    // 다중 선택인 경우 전체 선택 버튼 추가
-    if (config.multiple) {
-      var selectAllButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--text has-underline', config.selectAllButtonText || '전체 선택', function (e) {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        (_a = config.onSelectAll) === null || _a === void 0 ? void 0 : _a.call(config);
-      });
-      footerLeft.appendChild(selectAllButton);
-    }
-    // 편집 버튼 (showFooterButtons가 true이고 onEdit가 있는 경우)
-    if (config.showFooterButtons && config.onEdit) {
-      var editButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary-gray', '편집', function (e) {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        (_a = config.onEdit) === null || _a === void 0 ? void 0 : _a.call(config);
-      });
-      footerRight.appendChild(editButton);
-    }
-    // 선택 완료 버튼 (다중 선택이거나 showFooterButtons가 true인 경우)
-    if (config.multiple || config.showFooterButtons) {
-      var completeButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary', '선택 완료', function (e) {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        (_a = config.onComplete) === null || _a === void 0 ? void 0 : _a.call(config);
-      });
-      footerRight.appendChild(completeButton);
-    }
-    footerButtons.appendChild(footerLeft);
-    footerButtons.appendChild(footerRight);
-    footer.appendChild(footerButtons);
-    return footer;
-  };
-  /**
-   * 전체 선택 버튼 텍스트 업데이트
-   */
-  DOMRenderer.prototype.updateSelectAllButtonText = function (footerElement, text) {
-    var selectAllButton = footerElement.querySelector('.ncua-select-dropdown__footer-left .ncua-btn');
-    if (selectAllButton) {
-      var label = selectAllButton.querySelector('.ncua-btn__label');
-      if (label) {
-        label.textContent = text;
-      }
-    }
-  };
-  return DOMRenderer;
-}();
-export { DOMRenderer };