@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -4,126 +4,121 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DOMRenderer = void 0;
-var DOMRenderer = exports.DOMRenderer = /** @class */function () {
-  function DOMRenderer() {
+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);
@@ -132,52 +127,52 @@ var DOMRenderer = exports.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';
@@ -185,45 +180,45 @@ var DOMRenderer = exports.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);
     }
@@ -236,53 +231,49 @@ var DOMRenderer = exports.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);
@@ -290,15 +281,13 @@ var DOMRenderer = exports.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');
@@ -319,47 +308,44 @@ var DOMRenderer = exports.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);
     }
@@ -367,18 +353,18 @@ var DOMRenderer = exports.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;
-}();
+  }
+}
+exports.DOMRenderer = DOMRenderer;