@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,9 +1,9 @@
 // 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>");
-  }
+export const SVG_ICONS = {
+  'help-circle-stroke': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none">
+      <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>
+    </svg>`,
+  'help-circle-fill': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none">
+      <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>
+    </svg>`
 };

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

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

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

@@ -1,31 +1,30 @@
 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 = {
+export function calculateOptimalPosition(triggerElement, tooltipElement) {
+  let preferredPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipElement.getBoundingClientRect();
+  const {
+    innerWidth: viewportWidth,
+    innerHeight: viewportHeight
+  } = window;
+  const 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;
+  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  for (const position of POSITION_PRIORITY) {
+    const 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;
+        const centerX = triggerRect.left + triggerRect.width / 2;
+        const tooltipHalfWidth = tooltipWidth / 2;
         if (centerX - tooltipHalfWidth < MARGIN) {
-          return "".concat(position, "-left");
+          return `${position}-left`;
         } else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-          return "".concat(position, "-right");
+          return `${position}-right`;
         }
       }
       return position;

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

@@ -0,0 +1,26 @@
+/**
+ * 디바운스 유틸리티
+ * 마지막 호출 후 지정된 시간이 지나야 콜백이 실행됨
+ */
+export function debounce(fn, ms) {
+  let timer;
+  const debounced = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timer !== undefined) {
+      clearTimeout(timer);
+    }
+    timer = window.setTimeout(() => {
+      timer = undefined;
+      fn(...args);
+    }, ms);
+  };
+  debounced.cancel = () => {
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  };
+  return debounced;
+}

package/dist/esm/assets/scripts/utils/unifiedBox/{DOMRenderer.js → domRenderer.js}

@@ -1,123 +1,118 @@
-var DOMRenderer = /** @class */function () {
-  function DOMRenderer() {
+export class DOMRenderer {
+  constructor() {
     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);
+  createDropdownStructure(config) {
+    const dropdown = document.createElement('div');
+    dropdown.className = `ncua-select-dropdown ncua-select-dropdown--down ncua-select-dropdown--${config.size}`;
     dropdown.style.display = 'none';
-    var content = document.createElement('div');
+    const content = document.createElement('div');
     content.className = 'ncua-select-dropdown__content';
-    var optionsList = document.createElement('ul');
+    const 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.maxHeight = `${config.maxHeight}px`;
     optionsList.style.overflowY = 'auto'; // 스크롤 활성화
     content.appendChild(optionsList);
     dropdown.appendChild(content);
     return {
-      dropdown: dropdown,
-      content: content,
-      optionsList: optionsList
+      dropdown,
+      content,
+      optionsList
     };
-  };
+  }
   /**
    * 단일 옵션 엘리먼트 생성 (재사용 가능)
    */
-  DOMRenderer.prototype.createOptionElement = function (option, index, config) {
-    var cached = this.optionElementCache.get(option.id);
+  createOptionElement(option, index, config) {
+    const cached = this.optionElementCache.get(option.id);
     if (cached) {
       this.updateOptionElement(cached, option, index, config);
       return cached;
     }
-    var element = document.createElement('li');
+    const 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');
+    element.id = `${config.listboxId}-${option.id}`;
+    const 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) {
+  updateOptionElement(element, option, index, config) {
     // 클래스 업데이트 (필요한 경우에만)
-    var shouldHaveSelected = option.selected || false;
-    var shouldHaveFocused = option.focused || false;
-    var shouldHaveDisabled = option.disabled || false;
+    const shouldHaveSelected = option.selected || false;
+    const shouldHaveFocused = option.focused || false;
+    const 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');
+  createNoResultsElement() {
+    let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '일치하는 결과가 없습니다.';
+    const 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;
-    }
+  updateOptionsList(container, newOptions, config) {
+    let showNoResults = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     // 스크롤 위치 저장
-    var scrollTop = container.scrollTop;
+    const scrollTop = container.scrollTop;
     // 결과 없음 처리
     if (showNoResults) {
       container.innerHTML = '';
       container.appendChild(this.createNoResultsElement(config.noResultsText));
       return [];
     }
-    var newElements = [];
+    const newElements = [];
     // 새 옵션들로 엘리먼트 생성/업데이트
-    newOptions.forEach(function (option, index) {
-      var element = _this.createOptionElement(option, index, config);
+    newOptions.forEach((option, index) => {
+      const element = this.createOptionElement(option, index, config);
       newElements.push(element);
     });
     // DOM 업데이트 최소화 - 변경된 부분만 업데이트
     this.updateContainerChildren(container, newElements);
     // 스크롤 위치 복원 (다음 프레임에서 실행)
-    requestAnimationFrame(function () {
+    requestAnimationFrame(() => {
       container.scrollTop = scrollTop;
     });
     return newElements;
-  };
+  }
   /**
    * 컨테이너 자식 엘리먼트 효율적 업데이트
    */
-  DOMRenderer.prototype.updateContainerChildren = function (container, newChildren) {
+  updateContainerChildren(container, newChildren) {
     // 기존 엘리먼트 제거 (새 리스트에 없는 것들)
-    Array.from(container.children).forEach(function (child) {
+    Array.from(container.children).forEach(child => {
       if (!newChildren.includes(child)) {
         child.remove();
       }
     });
     // 새 엘리먼트 추가 (순서 유지)
-    newChildren.forEach(function (child, index) {
-      var currentChild = container.children[index];
+    newChildren.forEach((child, index) => {
+      const currentChild = container.children[index];
       if (currentChild !== child) {
         if (currentChild) {
           container.insertBefore(child, currentChild);
@@ -126,52 +121,52 @@ var DOMRenderer = /** @class */function () {
         }
       }
     });
-  };
+  }
   /**
    * 클래스 토글 (변경이 필요한 경우에만)
    */
-  DOMRenderer.prototype.toggleClass = function (element, className, shouldHave) {
-    var hasClass = element.classList.contains(className);
+  toggleClass(element, className, shouldHave) {
+    const 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';
+  createInputField(config) {
+    const actualSize = config.size === 'md' ? 'sm' : config.size || 'sm';
     // 최상위 ncua-input 컨테이너 (React 버전과 동일)
-    var inputContainer = document.createElement('div');
-    inputContainer.className = "ncua-input ncua-input--".concat(actualSize);
+    const inputContainer = document.createElement('div');
+    inputContainer.className = `ncua-input ncua-input--${actualSize}`;
     if (config.disabled) inputContainer.classList.add('is-disabled');
     // ncua-input__content 래퍼 (React 버전과 동일)
-    var inputContent = document.createElement('div');
+    const 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);
+    const inputField = document.createElement('div');
+    inputField.className = `ncua-input__field ncua-input__field--${actualSize}`;
     // 실제 입력 필드 (React 버전과 동일)
-    var input = document.createElement('input');
+    const 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) {
+      input.addEventListener('input', e => {
         config.onInput(e.target.value);
       });
     }
     if (config.onClick) {
-      input.addEventListener('click', function (event) {
+      input.addEventListener('click', event => {
         event.stopPropagation(); // 이벤트 버블링 방지
         config.onClick();
       });
     }
     // 클리어 버튼 (React 버전의 renderClearButton과 동일)
-    var clearButton = null;
+    let clearButton = null;
     if (config.onClear) {
       clearButton = document.createElement('button');
       clearButton.type = 'button';
@@ -179,45 +174,45 @@ var DOMRenderer = /** @class */function () {
       clearButton.style.display = 'none'; // 초기에는 숨김
       clearButton.addEventListener('click', config.onClear);
       // 클리어 아이콘 (React와 동일한 크기)
-      var iconSize = actualSize === 'xs' ? 14 : 16;
-      var clearIcon = DOMRenderer.createSvgIcon('close', iconSize);
+      const iconSize = actualSize === 'xs' ? 14 : 16;
+      const clearIcon = DOMRenderer.createSvgIcon('close', iconSize);
       clearIcon.setAttribute('class', 'ncua-input__clear-icon');
       clearButton.appendChild(clearIcon);
       // 입력값 변경 시 클리어 버튼 표시/숨김
-      input.addEventListener('input', function () {
+      input.addEventListener('input', () => {
         if (clearButton) {
           clearButton.style.display = input.value ? 'flex' : 'none';
         }
       });
     }
     // 전체 보기 버튼 (React 버전의 trailingElement와 동일)
-    var showAllButton = null;
+    let 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');
+      const 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);
+      const iconSize = 14;
+      const showAllIcon = DOMRenderer.createSvgIcon('chevron-selector-vertical', iconSize);
       button.appendChild(showAllIcon);
       // 텍스트
-      var label = document.createElement('span');
+      const label = document.createElement('span');
       label.className = 'ncua-btn__label';
       label.textContent = '전체';
       button.appendChild(label);
       showAllButton.appendChild(button);
     }
     // 검색 아이콘 (React 버전의 leadingElement와 동일)
-    var searchIcon = null;
+    let 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);
+      const searchSvg = DOMRenderer.createSvgIcon('search', 14);
       searchSvg.style.color = '#98a2b3'; // gray300에 해당하는 색상
       searchIcon.appendChild(searchSvg);
     }
@@ -230,53 +225,49 @@ var DOMRenderer = /** @class */function () {
     inputContainer.appendChild(inputContent);
     return {
       container: inputContainer,
-      input: input,
-      setValue: function (value) {
+      input,
+      setValue: value => {
         input.value = value;
         // 클리어 버튼 표시 상태 업데이트
         if (clearButton) {
           clearButton.style.display = value ? 'flex' : 'none';
         }
       },
-      focus: function () {
-        return input.focus();
-      },
-      blur: function () {
-        return input.blur();
-      }
+      focus: () => input.focus(),
+      blur: () => input.blur()
     };
-  };
+  }
   /**
    * 캐시 정리
    */
-  DOMRenderer.prototype.clearCache = function () {
+  clearCache() {
     this.optionElementCache.clear();
-  };
+  }
   /**
    * 특정 옵션 캐시 제거
    */
-  DOMRenderer.prototype.removeCachedOption = function (optionId) {
+  removeCachedOption(optionId) {
     this.optionElementCache.delete(optionId);
-  };
+  }
   /**
    * 공통 DOM 생성 유틸리티
    */
-  DOMRenderer.createElementWithClass = function (tagName, className, textContent) {
-    var element = document.createElement(tagName);
+  static createElementWithClass(tagName, className, textContent) {
+    const 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');
+  static createButton(className, textContent, onClick) {
+    const button = document.createElement('button');
     button.className = className;
     // React 컴포넌트와 일치하도록 span.ncua-btn__label 구조 사용
-    var label = document.createElement('span');
+    const label = document.createElement('span');
     label.className = 'ncua-btn__label';
     label.textContent = textContent;
     button.appendChild(label);
@@ -284,15 +275,13 @@ var DOMRenderer = /** @class */function () {
       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');
+  static createSvgIcon(iconName) {
+    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+    const 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');
@@ -313,47 +302,44 @@ var DOMRenderer = /** @class */function () {
         break;
     }
     return svg;
-  };
+  }
   /**
    * 푸터 생성
    */
-  DOMRenderer.prototype.createFooter = function (config) {
+  createFooter(config) {
     // 푸터 생성
-    var footer = document.createElement('div');
+    const footer = document.createElement('div');
     footer.className = 'ncua-select-dropdown__footer';
-    var footerButtons = document.createElement('div');
+    const footerButtons = document.createElement('div');
     footerButtons.className = 'ncua-select-dropdown__footer-buttons';
-    var footerLeft = document.createElement('div');
+    const footerLeft = document.createElement('div');
     footerLeft.className = 'ncua-select-dropdown__footer-left';
-    var footerRight = document.createElement('div');
+    const 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;
+      const selectAllButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--text has-underline', config.selectAllButtonText || '전체 선택', e => {
         e.preventDefault();
         e.stopPropagation();
-        (_a = config.onSelectAll) === null || _a === void 0 ? void 0 : _a.call(config);
+        config.onSelectAll?.();
       });
       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;
+      const editButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary-gray', '편집', e => {
         e.preventDefault();
         e.stopPropagation();
-        (_a = config.onEdit) === null || _a === void 0 ? void 0 : _a.call(config);
+        config.onEdit?.();
       });
       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;
+      const completeButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary', '선택 완료', e => {
         e.preventDefault();
         e.stopPropagation();
-        (_a = config.onComplete) === null || _a === void 0 ? void 0 : _a.call(config);
+        config.onComplete?.();
       });
       footerRight.appendChild(completeButton);
     }
@@ -361,19 +347,17 @@ var DOMRenderer = /** @class */function () {
     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');
+  updateSelectAllButtonText(footerElement, text) {
+    const selectAllButton = footerElement.querySelector('.ncua-select-dropdown__footer-left .ncua-btn');
     if (selectAllButton) {
-      var label = selectAllButton.querySelector('.ncua-btn__label');
+      const label = selectAllButton.querySelector('.ncua-btn__label');
       if (label) {
         label.textContent = text;
       }
     }
-  };
-  return DOMRenderer;
-}();
-export { DOMRenderer };
+  }
+}