@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/esm/assets/scripts/baseBox.js

@@ -0,0 +1,143 @@
+/**
+ * SelectBox와 ComboBox의 공통 기능을 담는 베이스 클래스
+ */
+var BaseBox = /** @class */function () {
+  function BaseBox(element) {
+    this.targetSelect = null;
+    this.isInitializing = true;
+    this.lastValue = '';
+    this.element = element;
+    this.targetSelect = this.findTargetSelect(element);
+  }
+  /** 초기화 완료 처리 (서브클래스 생성자 마지막에 호출) */
+  BaseBox.prototype.completeInitialization = function () {
+    var _this = this;
+    setTimeout(function () {
+      _this.isInitializing = false;
+    }, 0);
+  };
+  /**
+   * 타겟 select 요소 찾기
+   */
+  BaseBox.prototype.findTargetSelect = function (element) {
+    // 1. 직접 select 태그인 경우
+    if (element.tagName === 'SELECT') {
+      return element;
+    }
+    // 2. 자식으로 select 태그가 있는 경우
+    var selectChild = element.querySelector('select');
+    if (selectChild) {
+      return selectChild;
+    }
+    // 3. data-target 속성으로 지정된 경우
+    var targetId = element.getAttribute('data-target');
+    if (targetId) {
+      var targetElement = document.getElementById(targetId);
+      if (targetElement && targetElement.tagName === 'SELECT') {
+        return targetElement;
+      }
+    }
+    return null;
+  };
+  /**
+   * HTML에서 속성 파싱
+   */
+  BaseBox.prototype.parseAttributesFromHTML = function () {
+    var attributes = {};
+    if (this.targetSelect) {
+      // select 요소의 속성들
+      if (this.targetSelect.disabled) attributes.disabled = true;
+      if (this.targetSelect.value) attributes.value = this.targetSelect.value;
+      // placeholder는 첫 번째 빈 option에서 가져오기
+      var firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
+      if (firstOption) {
+        attributes.placeholder = firstOption.textContent || this.defaultPlaceholder;
+      }
+    }
+    // 컨테이너 요소의 data 속성들
+    var containerAttributes = this.element.dataset;
+    if (containerAttributes.placeholder) attributes.placeholder = containerAttributes.placeholder;
+    if (containerAttributes.size) attributes.size = containerAttributes.size;
+    if (containerAttributes.disabled === 'true') attributes.disabled = true;
+    return attributes;
+  };
+  /**
+   * 값 변환 훅 - SelectBox에서 originalValue 매핑을 위해 오버라이드
+   * 기본 동작: 그대로 문자열 변환
+   */
+  BaseBox.prototype.resolveValue = function (value) {
+    return String(value);
+  };
+  /**
+   * 타겟 select와 동기화 (Single 모드)
+   */
+  BaseBox.prototype.syncWithTargetSelect = function (value) {
+    if (this.targetSelect) {
+      this.targetSelect.value = this.resolveValue(value);
+      var event_1 = new Event('change', {
+        bubbles: true
+      });
+      this.targetSelect.dispatchEvent(event_1);
+    }
+  };
+  /**
+   * 타겟 select와 동기화 (Multiple 모드)
+   */
+  BaseBox.prototype.syncWithTargetSelectMultiple = function (values) {
+    var _this = this;
+    if (this.targetSelect && this.targetSelect.multiple) {
+      // 모든 옵션 선택 해제
+      Array.from(this.targetSelect.options).forEach(function (option) {
+        option.selected = false;
+      });
+      // 선택된 값들에 해당하는 옵션들 선택
+      values.forEach(function (value) {
+        var resolved = _this.resolveValue(value);
+        var option = _this.targetSelect.querySelector("option[value=\"".concat(resolved, "\"]"));
+        if (option) {
+          option.selected = true;
+        }
+      });
+      var event_2 = new Event('change', {
+        bubbles: true
+      });
+      this.targetSelect.dispatchEvent(event_2);
+    }
+  };
+  // UnifiedBoxManager 위임 메서드들
+  BaseBox.prototype.getOptions = function () {
+    return this.unifiedSelectBox.getOptions();
+  };
+  BaseBox.prototype.updateOptions = function (newOptions) {
+    this.unifiedSelectBox.updateOptions(newOptions);
+  };
+  BaseBox.prototype.setDisabled = function (disabled) {
+    this.unifiedSelectBox.setDisabled(disabled);
+  };
+  BaseBox.prototype.open = function () {
+    this.unifiedSelectBox.open();
+  };
+  BaseBox.prototype.close = function () {
+    this.unifiedSelectBox.close();
+  };
+  BaseBox.prototype.focus = function () {
+    this.unifiedSelectBox.focus();
+  };
+  BaseBox.prototype.destroy = function () {
+    this.unifiedSelectBox.destroy();
+  };
+  BaseBox.prototype.selectAll = function () {
+    this.unifiedSelectBox.selectAll();
+  };
+  BaseBox.prototype.deselectAll = function () {
+    this.unifiedSelectBox.deselectAll();
+  };
+  BaseBox.prototype.isMultiple = function () {
+    return this.unifiedSelectBox.isMultiple();
+  };
+  BaseBox.prototype.toggleSelectAll = function () {
+    this.unifiedSelectBox.toggleSelectAll();
+  };
+  return BaseBox;
+}();
+export { BaseBox };

package/dist/esm/assets/scripts/comboBox.js

@@ -1,3 +1,23 @@
+var __extends = this && this.__extends || function () {
+  var extendStatics = function (d, b) {
+    extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+    };
+    return extendStatics(d, b);
+  };
+  return function (d, b) {
+    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
 var __assign = this && this.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -17,27 +37,24 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { UnifiedBoxManager } from './utils/unifiedBox/UnifiedBoxManager';
-var ComboBox = /** @class */function () {
+import { BaseBox } from './baseBox';
+import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
+var ComboBox = /** @class */function (_super) {
+  __extends(ComboBox, _super);
   function ComboBox(element, config) {
     if (config === void 0) {
       config = {};
     }
     var _this = this;
     var _a, _b, _c, _d, _e, _f;
-    this.targetSelect = null;
-    this.isInitializing = true;
-    this.lastValue = '';
-    this.element = element;
-    // 타겟 select 요소 찾기
-    this.targetSelect = this.findTargetSelect(element);
+    _this = _super.call(this, element) || this;
     // HTML에서 옵션 파싱 (config.options가 없을 경우)
-    var htmlOptions = this.parseOptionsFromHTML();
+    var htmlOptions = _this.parseOptionsFromHTML();
     // JavaScript 옵션을 DropdownOption 형식으로 변환 (이제 구조가 동일하므로 단순 복사)
     var normalizedOptions = config.options ? __spreadArray([], config.options, true) : htmlOptions;
     var finalOptions = normalizedOptions;
     // HTML에서 속성 파싱
-    var htmlAttributes = this.parseAttributesFromHTML();
+    var htmlAttributes = _this.parseAttributesFromHTML();
     // 기존 API를 새 API로 변환
     var unifiedConfig = __assign(__assign({}, config), {
       type: 'combobox',
@@ -49,7 +66,7 @@ var ComboBox = /** @class */function () {
       onScrollBottom: config.onScrollBottom,
       searchDebounceMs: config.searchDebounceMs,
       options: finalOptions,
-      placeholder: config.placeholder || htmlAttributes.placeholder || '검색하고 선택하세요',
+      placeholder: config.placeholder || htmlAttributes.placeholder || _this.defaultPlaceholder,
       value: (_d = (_c = config.value) !== null && _c !== void 0 ? _c : htmlAttributes.value) !== null && _d !== void 0 ? _d : config.multiple ? [] : '',
       disabled: (_f = (_e = config.disabled) !== null && _e !== void 0 ? _e : htmlAttributes.disabled) !== null && _f !== void 0 ? _f : false,
       size: config.size || htmlAttributes.size || 'md',
@@ -74,35 +91,17 @@ var ComboBox = /** @class */function () {
         (_a = config.onChange) === null || _a === void 0 ? void 0 : _a.call(config, value);
       }
     });
-    this.unifiedSelectBox = new UnifiedBoxManager(element, unifiedConfig);
-    // 초기화 완료 (다음 이벤트 루프에서 실행)
-    setTimeout(function () {
-      _this.isInitializing = false;
-    }, 0);
+    _this.unifiedSelectBox = new UnifiedBoxManager(element, unifiedConfig);
+    _this.completeInitialization();
+    return _this;
   }
-  /**
-   * 타겟 select 요소 찾기
-   */
-  ComboBox.prototype.findTargetSelect = function (element) {
-    // 1. 직접 select 태그인 경우
-    if (element.tagName === 'SELECT') {
-      return element;
-    }
-    // 2. 자식으로 select 태그가 있는 경우
-    var selectChild = element.querySelector('select');
-    if (selectChild) {
-      return selectChild;
-    }
-    // 3. data-target 속성으로 지정된 경우
-    var targetId = element.getAttribute('data-target');
-    if (targetId) {
-      var targetElement = document.getElementById(targetId);
-      if (targetElement && targetElement.tagName === 'SELECT') {
-        return targetElement;
-      }
-    }
-    return null;
-  };
+  Object.defineProperty(ComboBox.prototype, "defaultPlaceholder", {
+    get: function () {
+      return '검색하고 선택하세요';
+    },
+    enumerable: false,
+    configurable: true
+  });
   /**
    * HTML select에서 옵션 파싱
    */
@@ -122,72 +121,10 @@ var ComboBox = /** @class */function () {
     });
     return options;
   };
-  /**
-   * HTML에서 속성 파싱
-   */
-  ComboBox.prototype.parseAttributesFromHTML = function () {
-    var attributes = {};
-    if (this.targetSelect) {
-      // select 요소의 속성들
-      if (this.targetSelect.disabled) attributes.disabled = true;
-      if (this.targetSelect.value) attributes.value = this.targetSelect.value;
-      // placeholder는 첫 번째 빈 option에서 가져오기
-      var firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
-      if (firstOption) {
-        attributes.placeholder = firstOption.textContent || '검색하고 선택하세요';
-      }
-    }
-    // 컨테이너 요소의 data 속성들
-    var containerAttributes = this.element.dataset;
-    if (containerAttributes.placeholder) attributes.placeholder = containerAttributes.placeholder;
-    if (containerAttributes.size) attributes.size = containerAttributes.size;
-    if (containerAttributes.disabled === 'true') attributes.disabled = true;
-    return attributes;
-  };
-  /**
-   * 타겟 select와 동기화 (Single 모드)
-   */
-  ComboBox.prototype.syncWithTargetSelect = function (value) {
-    if (this.targetSelect) {
-      this.targetSelect.value = String(value);
-      // select 요소의 change 이벤트 발생
-      var event_1 = new Event('change', {
-        bubbles: true
-      });
-      this.targetSelect.dispatchEvent(event_1);
-    }
-  };
-  /**
-   * 타겟 select와 동기화 (Multiple 모드)
-   */
-  ComboBox.prototype.syncWithTargetSelectMultiple = function (values) {
-    var _this = this;
-    if (this.targetSelect && this.targetSelect.multiple) {
-      // 모든 옵션 선택 해제
-      Array.from(this.targetSelect.options).forEach(function (option) {
-        option.selected = false;
-      });
-      // 선택된 값들에 해당하는 옵션들 선택
-      values.forEach(function (value) {
-        var option = _this.targetSelect.querySelector("option[value=\"".concat(value, "\"]"));
-        if (option) {
-          option.selected = true;
-        }
-      });
-      // select 요소의 change 이벤트 발생
-      var event_2 = new Event('change', {
-        bubbles: true
-      });
-      this.targetSelect.dispatchEvent(event_2);
-    }
-  };
-  // 기존 API 호환성 메서드들
+  // ComboBox 고유 API
   ComboBox.prototype.getValues = function () {
     return this.unifiedSelectBox.getValues();
   };
-  ComboBox.prototype.getOptions = function () {
-    return this.unifiedSelectBox.getOptions();
-  };
   ComboBox.prototype.setValues = function (value) {
     // 옵션 객체 배열에서 id 배열로 변환하여 lastValue 비교
     var ids = value.map(function (option) {
@@ -209,25 +146,6 @@ var ComboBox = /** @class */function () {
       }
     }
   };
-  ComboBox.prototype.updateOptions = function (newOptions) {
-    this.unifiedSelectBox.updateOptions(newOptions);
-  };
-  ComboBox.prototype.setDisabled = function (disabled) {
-    this.unifiedSelectBox.setDisabled(disabled);
-  };
-  ComboBox.prototype.open = function () {
-    this.unifiedSelectBox.open();
-  };
-  ComboBox.prototype.close = function () {
-    this.unifiedSelectBox.close();
-  };
-  ComboBox.prototype.focus = function () {
-    this.unifiedSelectBox.focus();
-  };
-  ComboBox.prototype.destroy = function () {
-    this.unifiedSelectBox.destroy();
-  };
-  // ComboBox 특화 메서드들
   ComboBox.prototype.clearInput = function () {
     // UnifiedBoxManager의 handleClearInput과 동일한 로직
     this.unifiedSelectBox.close();
@@ -235,22 +153,12 @@ var ComboBox = /** @class */function () {
   ComboBox.prototype.getDebugInfo = function () {
     return this.unifiedSelectBox.getDebugInfo();
   };
-  // Multiple 모드 전용 메서드들
-  ComboBox.prototype.selectAll = function () {
-    this.unifiedSelectBox.selectAll();
-  };
-  ComboBox.prototype.deselectAll = function () {
-    this.unifiedSelectBox.deselectAll();
-  };
   ComboBox.prototype.getSelectedCount = function () {
     var value = this.getValues();
-    return Array.isArray(value) ? value.length : value ? 1 : 0;
-  };
-  ComboBox.prototype.isMultiple = function () {
-    return this.unifiedSelectBox.isMultiple();
-  };
-  ComboBox.prototype.toggleSelectAll = function () {
-    this.unifiedSelectBox.toggleSelectAll();
+    if (Array.isArray(value)) {
+      return value.length;
+    }
+    return value ? 1 : 0;
   };
   /**
    * 드롭다운을 스크롤의 바닥으로 이동
@@ -271,5 +179,5 @@ var ComboBox = /** @class */function () {
     this.unifiedSelectBox.setFocusIndex(index);
   };
   return ComboBox;
-}();
+}(BaseBox);
 export { ComboBox };

package/dist/esm/assets/scripts/datePicker.js

@@ -8,7 +8,7 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-import { formatDateInput, formatHourInput, formatMinuteInput } from '@ncds/ui-admin/src/utils/date-picker';
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../src/utils/date-picker';
 import flatpickr from 'flatpickr';
 import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';

package/dist/esm/assets/scripts/featuredIcon.js

@@ -20,7 +20,7 @@ var FeaturedIcon = /** @class */function () {
     this.options = __assign({
       theme: 'light-circle',
       color: 'neutral',
-      size: 'md',
+      size: 'sm',
       className: ''
     }, options);
     this.element = this.createElement();

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

@@ -14,9 +14,6 @@ export var FILE_INPUT_CLASS_NAMES = {
 export var getFileInputSizeClassName = function (size) {
   return "ncua-file-input--".concat(size);
 };
-export var getButtonSizeClassName = function (size) {
-  return "ncua-button--".concat(size);
-};
 export var getLabelClassName = function (isRequired) {
   return isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
 };

package/dist/esm/assets/scripts/fileInput/fileInput.js

@@ -0,0 +1,74 @@
+import { FileInputModel } from './fileInputModel';
+import { FileInputView } from './fileInputView';
+var FileInput = /** @class */function () {
+  function FileInput(options) {
+    var _this = this;
+    this.handleBrowseClick = function () {
+      if (!_this.model.isDisabled()) {
+        _this.view.getFileInputElement().click();
+      }
+    };
+    this.handleFileChange = function (event) {
+      var _a, _b;
+      var target = event.target;
+      var selectedFiles = target.files;
+      if (!selectedFiles || selectedFiles.length === 0) return;
+      var _c = _this.model.validateFiles(Array.from(selectedFiles)),
+        validFiles = _c.validFiles,
+        invalidFiles = _c.invalidFiles;
+      var options = _this.model.getOptions();
+      if (validFiles.length > 0) {
+        (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, validFiles);
+      }
+      if (invalidFiles.length > 0) {
+        (_b = options.onFail) === null || _b === void 0 ? void 0 : _b.call(options, invalidFiles);
+      }
+      target.value = '';
+    };
+    this.model = new FileInputModel(options);
+    this.view = new FileInputView(this.model.getOptions());
+    this.setupEventListeners();
+    if (options.container) {
+      this.appendToContainer(options.container);
+    }
+  }
+  FileInput.prototype.appendToContainer = function (container) {
+    var containerElement = null;
+    if (typeof container === 'string') {
+      containerElement = document.getElementById(container);
+      if (!containerElement) {
+        containerElement = document.querySelector(container);
+      }
+    } else {
+      containerElement = container;
+    }
+    if (containerElement) {
+      containerElement.appendChild(this.getElement());
+    } else {
+      console.warn("FileInput: Container not found:", container);
+    }
+  };
+  FileInput.prototype.setupEventListeners = function () {
+    var fileInput = this.view.getFileInputElement();
+    var button = this.view.getButtonElement();
+    fileInput.addEventListener('change', this.handleFileChange);
+    button.addEventListener('click', this.handleBrowseClick);
+  };
+  // Public API
+  FileInput.prototype.getElement = function () {
+    return this.view.getElement();
+  };
+  FileInput.prototype.setDisabled = function (disabled) {
+    this.model.setDisabled(disabled);
+    this.view.setButtonDisabled(disabled);
+  };
+  FileInput.prototype.destroy = function () {
+    var fileInput = this.view.getFileInputElement();
+    var button = this.view.getButtonElement();
+    fileInput.removeEventListener('change', this.handleFileChange);
+    button.removeEventListener('click', this.handleBrowseClick);
+    this.view.destroy();
+  };
+  return FileInput;
+}();
+export { FileInput };

package/dist/esm/assets/scripts/fileInput/fileInputModel.js

@@ -0,0 +1,56 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { FileInputErrorType } from './const/types';
+var FileInputModel = /** @class */function () {
+  function FileInputModel(options) {
+    this.options = __assign({
+      size: 'xs',
+      multiple: false,
+      buttonLabel: '파일 찾기',
+      disabled: false
+    }, options);
+  }
+  FileInputModel.prototype.getOptions = function () {
+    return this.options;
+  };
+  FileInputModel.prototype.validateFiles = function (fileList) {
+    var validFiles = [];
+    var invalidFiles = [];
+    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
+      var file = fileList_1[_i];
+      if (this.options.maxFileSize && file.size > this.options.maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        continue;
+      }
+      if (this.options.maxFileCount && validFiles.length >= this.options.maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
+        }));
+        continue;
+      }
+      validFiles.push(file);
+    }
+    return {
+      validFiles: validFiles,
+      invalidFiles: invalidFiles
+    };
+  };
+  FileInputModel.prototype.setDisabled = function (disabled) {
+    this.options.disabled = disabled;
+  };
+  FileInputModel.prototype.isDisabled = function () {
+    return this.options.disabled;
+  };
+  return FileInputModel;
+}();
+export { FileInputModel };