@ncds/ui-admin 1.3.0 → 1.5.0

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CLASS_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _classNames.CLASS_NAMES;
+  }
+});
+Object.defineProperty(exports, "CSS_TEMPLATES", {
+  enumerable: true,
+  get: function () {
+    return _templates.CSS_TEMPLATES;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_TOOLTIP_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_TOOLTIP_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_TOOLTIP_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_TOOLTIP_WIDTH;
+  }
+});
+Object.defineProperty(exports, "EVENT_OPTIONS", {
+  enumerable: true,
+  get: function () {
+    return _constants.EVENT_OPTIONS;
+  }
+});
+Object.defineProperty(exports, "FALLBACK_ICON_SVG", {
+  enumerable: true,
+  get: function () {
+    return _templates.FALLBACK_ICON_SVG;
+  }
+});
+Object.defineProperty(exports, "HTML_TEMPLATES", {
+  enumerable: true,
+  get: function () {
+    return _templates.HTML_TEMPLATES;
+  }
+});
+Object.defineProperty(exports, "ICON_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _constants.ICON_SIZES;
+  }
+});
+Object.defineProperty(exports, "MARGIN", {
+  enumerable: true,
+  get: function () {
+    return _constants.MARGIN;
+  }
+});
+Object.defineProperty(exports, "OFFSCREEN_POSITION", {
+  enumerable: true,
+  get: function () {
+    return _constants.OFFSCREEN_POSITION;
+  }
+});
+Object.defineProperty(exports, "OPACITY", {
+  enumerable: true,
+  get: function () {
+    return _constants.OPACITY;
+  }
+});
+Object.defineProperty(exports, "POSITION", {
+  enumerable: true,
+  get: function () {
+    return _constants.POSITION;
+  }
+});
+Object.defineProperty(exports, "POSITION_PRIORITY", {
+  enumerable: true,
+  get: function () {
+    return _constants.POSITION_PRIORITY;
+  }
+});
+Object.defineProperty(exports, "SVG_ICONS", {
+  enumerable: true,
+  get: function () {
+    return _icons.SVG_ICONS;
+  }
+});
+Object.defineProperty(exports, "TOOLTIP_DEFAULT_VALUE", {
+  enumerable: true,
+  get: function () {
+    return _constants.TOOLTIP_DEFAULT_VALUE;
+  }
+});
+Object.defineProperty(exports, "TOOLTIP_OFFSET", {
+  enumerable: true,
+  get: function () {
+    return _constants.TOOLTIP_OFFSET;
+  }
+});
+Object.defineProperty(exports, "TRANSITION_DURATION", {
+  enumerable: true,
+  get: function () {
+    return _constants.TRANSITION_DURATION;
+  }
+});
+Object.defineProperty(exports, "VIEWPORT_MARGIN", {
+  enumerable: true,
+  get: function () {
+    return _constants.VIEWPORT_MARGIN;
+  }
+});
+Object.defineProperty(exports, "Z_INDEX", {
+  enumerable: true,
+  get: function () {
+    return _constants.Z_INDEX;
+  }
+});
+var _icons = require("./icons");
+var _classNames = require("./classNames");
+var _constants = require("./constants");
+var _templates = require("./templates");

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HTML_TEMPLATES = exports.FALLBACK_ICON_SVG = exports.CSS_TEMPLATES = void 0;
+var _constants = require("./constants");
+/**
+ * 툴팁 관련 CSS 및 HTML 템플릿
+ */
+// CSS 템플릿
+var CSS_TEMPLATES = exports.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(_constants.OFFSCREEN_POSITION, "; \n    top: ").concat(_constants.OFFSCREEN_POSITION, ";\n    opacity: 0;\n    transition: opacity ").concat(_constants.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 템플릿
+var HTML_TEMPLATES = exports.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
+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>");
+};
+exports.FALLBACK_ICON_SVG = FALLBACK_ICON_SVG;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_TOOLTIP_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _const.DEFAULT_TOOLTIP_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_TOOLTIP_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _const.DEFAULT_TOOLTIP_WIDTH;
+  }
+});
+Object.defineProperty(exports, "MARGIN", {
+  enumerable: true,
+  get: function () {
+    return _const.MARGIN;
+  }
+});
+Object.defineProperty(exports, "POSITION_PRIORITY", {
+  enumerable: true,
+  get: function () {
+    return _const.POSITION_PRIORITY;
+  }
+});
+Object.defineProperty(exports, "SVG_ICONS", {
+  enumerable: true,
+  get: function () {
+    return _const.SVG_ICONS;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.Tooltip;
+  }
+});
+Object.defineProperty(exports, "calculateOptimalPosition", {
+  enumerable: true,
+  get: function () {
+    return _utils.calculateOptimalPosition;
+  }
+});
+exports.default = void 0;
+var _Tooltip = require("./Tooltip");
+var _utils = require("./utils");
+var _const = require("./const");
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.Tooltip = _Tooltip.Tooltip;
+}
+var _default = exports.default = _Tooltip.Tooltip;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateOptimalPosition = calculateOptimalPosition;
+var _const = require("./const");
+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 || _const.DEFAULT_TOOLTIP_WIDTH;
+  var tooltipHeight = tooltipRect.height || _const.DEFAULT_TOOLTIP_HEIGHT;
+  for (var _i = 0, POSITION_PRIORITY_1 = _const.POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
+    var position = POSITION_PRIORITY_1[_i];
+    var hasSpace = position === 'bottom' || position === 'top' ? spaces[position] >= tooltipHeight + _const.MARGIN : spaces[position] >= tooltipWidth + _const.MARGIN;
+    if (hasSpace) {
+      if (position === 'bottom' || position === 'top') {
+        var centerX = triggerRect.left + triggerRect.width / 2;
+        var tooltipHalfWidth = tooltipWidth / 2;
+        if (centerX - tooltipHalfWidth < _const.MARGIN) {
+          return "".concat(position, "-left");
+        } else if (centerX + tooltipHalfWidth > viewportWidth - _const.MARGIN) {
+          return "".concat(position, "-right");
+        }
+      }
+      return position;
+    }
+  }
+  return preferredPosition;
+}

package/dist/cjs/assets/scripts/utils/selectbox/DOMRenderer.js

@@ -0,0 +1,384 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DOMRenderer = void 0;
+var DOMRenderer = exports.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;
+}();