@ncds/ui-admin 1.3.0 → 1.5.0

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

@@ -8,6 +8,10 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+import { formatDateInput, formatHourInput, formatMinuteInput } from '@ncds/ui-admin/src/utils/date-picker';
+import flatpickr from 'flatpickr';
+import { Korean } from 'flatpickr/dist/l10n/ko';
+import moment from 'moment';
 // Constants
 var CONSTANTS = {
   ICON_SIZES: {
@@ -22,33 +26,47 @@ var CONSTANTS = {
     DATE_PICKER_ICO: 'ncua-date-picker__ico',
     BUTTON_GROUP: 'ncua-button-group',
     BUTTON_GROUP_HAS_BORDER: 'has-border',
-    BUTTON: 'ncua-button-group__item'
+    BUTTON: 'ncua-button-group__item',
+    HAS_TIME: 'ncua-date-picker--has-time'
   },
   FORMATS: {
-    DATE: 'YYYY-MM-DD'
+    DATE: 'YYYY-MM-DD',
+    DATE_TIME: 'YYYY-MM-DD HH:mm'
   },
   ERROR_MESSAGES: {
     FLATPICKR_NOT_LOADED: 'flatpickr 라이브러리가 로드되지 않았습니다.',
     MOMENT_NOT_LOADED: 'moment 라이브러리가 로드되지 않았습니다.'
   }
 };
-var DatePicker = /** @class */function () {
+export var DatePicker = /** @class */function () {
   function DatePicker(wrapper, options) {
+    var _a, _b;
     this.flatpickrInstances = [];
     this.currentButton = null;
-    var _a = options.buttons,
-      buttons = _a === void 0 ? [] : _a,
+    var buttons = (_a = options.buttons, _a === void 0 ? [] : _a),
       size = options.size,
+      autoComplete = (_b = options.autoComplete, _b === void 0 ? 'off' : _b),
       datePickerOptions = options.datePickerOptions;
+    this.validateWrapper(wrapper);
     this.validationDependencies((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0);
-    this.element = wrapper;
+    this.instanceId = DatePicker.instanceCounter++;
+    this.contentWrapper = wrapper;
     this.datePickerOptions = datePickerOptions;
     this.buttons = buttons;
     this.size = size;
+    this.separator = '~';
+    this.autoComplete = autoComplete;
+    this.dateFormat = datePickerOptions[0].options.enableTime ? CONSTANTS.FORMATS.DATE_TIME : CONSTANTS.FORMATS.DATE;
     this.init();
   }
+  DatePicker.prototype.validateWrapper = function (wrapper) {
+    if (DatePicker.usedWrappers.has(wrapper)) {
+      throw new Error("\uC774\uBBF8 \uC0AC\uC6A9 \uC911\uC778 DOM \uC694\uC18C\uC785\uB2C8\uB2E4. " + "\uAC19\uC740 DOM \uC694\uC18C\uC5D0\uB294 \uD558\uB098\uC758 DatePicker \uC778\uC2A4\uD134\uC2A4\uB9CC \uC0DD\uC131\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. " + "\uB2E4\uB978 DOM \uC694\uC18C\uB97C \uC0AC\uC6A9\uD558\uAC70\uB098 \uAE30\uC874 \uC778\uC2A4\uD134\uC2A4\uB97C \uBA3C\uC800 \uC81C\uAC70\uD574\uC8FC\uC138\uC694.");
+    }
+    DatePicker.usedWrappers.add(wrapper);
+  };
   DatePicker.prototype.init = function () {
-    this.element.innerHTML = '';
+    this.contentWrapper.innerHTML = '';
     this.initializeWrapper();
     this.initButtonGroup();
     this.initDatePicker();
@@ -63,12 +81,15 @@ var DatePicker = /** @class */function () {
   };
   DatePicker.prototype.initializeWrapper = function () {
     if (this.datePickerOptions.length < 2) return;
-    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
+    this.contentWrapper.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
   };
   DatePicker.prototype.initButtonGroup = function () {
     var _this = this;
     if (this.buttons.length === 0) return;
-    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
+    if (this.contentWrapper.classList.contains(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER)) {
+      this.contentWrapper.classList.replace(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER, CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
+    }
+    this.contentWrapper.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
     var createButtonWrapperElement = function () {
       var wrapper = document.createElement('div');
       wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP_HAS_BORDER, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, "--").concat(_this.size);
@@ -83,7 +104,7 @@ var DatePicker = /** @class */function () {
     var wrapper = createButtonWrapperElement();
     appendButtons(wrapper);
     wrapper.addEventListener('click', this.updateDateWithButton.bind(this));
-    this.element.appendChild(wrapper);
+    this.contentWrapper.appendChild(wrapper);
   };
   DatePicker.prototype.createButtonElement = function (button) {
     if (button.isCurrent) {
@@ -97,7 +118,7 @@ var DatePicker = /** @class */function () {
   };
   DatePicker.prototype.reRenderButtonGroup = function (buttons) {
     var _this = this;
-    var buttonGroup = this.element.querySelector(".".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP));
+    var buttonGroup = this.contentWrapper.querySelector(".".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP));
     if (!buttonGroup) return;
     buttonGroup.innerHTML = '';
     buttons.forEach(function (button) {
@@ -111,49 +132,59 @@ var DatePicker = /** @class */function () {
   DatePicker.prototype.initDatePicker = function () {
     var _this = this;
     var datePickerOptions = this.datePickerOptions;
-    var createWrapperElement = function (size) {
+    var createInputWrapperElement = function (size) {
       var wrapper = document.createElement('div');
-      wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, " ").concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, "--").concat(size);
+      wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, " ").concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, "--").concat(size, " ").concat(_this.datePickerOptions.some(function (option) {
+        return option.options.enableTime;
+      }) ? CONSTANTS.CLASS_NAMES.HAS_TIME : '');
       return wrapper;
     };
-    var createInput = function (elementId) {
+    var createInput = function (datePickerOption, index) {
+      var _a, _b;
+      var defaultPlaceHolder = datePickerOption.options.enableTime ? CONSTANTS.FORMATS.DATE_TIME : CONSTANTS.FORMATS.DATE;
       var input = document.createElement('input');
       input.type = 'text';
-      input.id = elementId;
+      input.placeholder = (_a = datePickerOption.placeholder) !== null && _a !== void 0 ? _a : defaultPlaceHolder;
+      input.name = (_b = datePickerOption.attrName) !== null && _b !== void 0 ? _b : '';
+      input.id = "datepicker-".concat(_this.instanceId, "-").concat(datePickerOption.element, "-").concat(index);
       input.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_INPUT;
+      input.autocomplete = _this.autoComplete;
       return input;
     };
-    var createIcon = function (size) {
+    var createIcon = function (size, elementId, index) {
       var getCalendarIconSvg = function (size) {
         return "\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 16 16\" fill=\"none\">\n        <path\n          d=\"M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z\"\n          stroke=\"black\"\n          stroke-width=\"1.33333\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>");
       };
-      var ico = document.createElement('span');
+      var ico = document.createElement('label');
+      ico.htmlFor = "datepicker-".concat(_this.instanceId, "-").concat(elementId, "-").concat(index);
       ico.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_ICO;
       ico.innerHTML = getCalendarIconSvg(CONSTANTS.ICON_SIZES[size]);
       return ico;
     };
     var insertSeparator = function () {
       var span = document.createElement('span');
-      span.textContent = '-';
-      _this.element.insertBefore(span, _this.element.querySelectorAll(".".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER))[1]);
+      span.textContent = _this.separator;
+      _this.contentWrapper.insertBefore(span, _this.contentWrapper.querySelectorAll(".".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER))[1]);
     };
     var createDatePickerElement = function (datePickerOption, index) {
-      var wrapper = createWrapperElement(_this.size);
-      var input = createInput(datePickerOption.element);
-      wrapper.appendChild(input);
-      wrapper.appendChild(createIcon(_this.size));
-      wrapper.addEventListener('click', function () {
+      var inputWrapper = createInputWrapperElement(_this.size);
+      var input = createInput(datePickerOption, index);
+      inputWrapper.appendChild(input);
+      inputWrapper.appendChild(createIcon(_this.size, datePickerOption.element, index));
+      inputWrapper.addEventListener('click', function () {
+        // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+        // biome-ignore lint/suspicious/useIterableCallbackReturn: <explanation>
         _this.buttons.forEach(function (button) {
           return button.isCurrent = false;
         });
         _this.currentButton = null;
         _this.reRenderButtonGroup(_this.buttons);
       });
-      _this.element.appendChild(wrapper);
+      _this.contentWrapper.appendChild(inputWrapper);
       if (index > 0) {
         insertSeparator();
       }
-      return _this.initializeFlatpickr(input, datePickerOption.options, wrapper);
+      return _this.initializeFlatpickr(input, datePickerOption.options, inputWrapper);
     };
     var createFlatpickrInstances = function (datePickerOptions) {
       return datePickerOptions.map(function (datePickerOption, index) {
@@ -161,24 +192,23 @@ var DatePicker = /** @class */function () {
       });
     };
     var calcInitDates = function (datePickerOptions) {
-      var _a;
       if (_this.buttons.length > 0) {
-        var _b = (_a = _this.buttons.find(function (button) {
-            return button.isCurrent;
-          })) !== null && _a !== void 0 ? _a : {
-            period: 0,
-            unit: 'days'
-          },
-          period = _b.period,
-          unit = _b.unit;
-        return [moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE), moment().format(CONSTANTS.FORMATS.DATE)];
+        var currentButton = _this.buttons.find(function (button) {
+          return button.isCurrent;
+        });
+        if (!currentButton) {
+          return datePickerOptions.map(function () {
+            return '';
+          });
+        }
+        return _this.calculateDatesFromButton(currentButton);
       }
       return datePickerOptions.map(function (datePickerOption) {
         var _a;
         if ((_a = datePickerOption.options) === null || _a === void 0 ? void 0 : _a.defaultDate) {
-          return moment(datePickerOption.options.defaultDate.toString()).format(CONSTANTS.FORMATS.DATE);
+          return moment(datePickerOption.options.defaultDate.toString()).format(_this.dateFormat);
         }
-        return moment().format(CONSTANTS.FORMATS.DATE);
+        return '';
       });
     };
     this.flatpickrInstances = createFlatpickrInstances(datePickerOptions);
@@ -186,8 +216,76 @@ var DatePicker = /** @class */function () {
     this.setMultipleDates(dates);
   };
   DatePicker.prototype.initializeFlatpickr = function (input, options, wrapper) {
+    var _a, _b;
+    // flatpickr locale 설정 확인
+    var locale = options.locale || 'ko';
+    // flatpickr locale이 로드되었는지 확인
+    if (!((_a = flatpickr === null || flatpickr === void 0 ? void 0 : flatpickr.l10ns) === null || _a === void 0 ? void 0 : _a[locale])) {
+      console.warn("flatpickr locale '".concat(locale, "' is not loaded. Available locales:"), Object.keys((flatpickr === null || flatpickr === void 0 ? void 0 : flatpickr.l10ns) || {}));
+      if (locale === 'ko') flatpickr.l10ns.ko = Korean;else options.locale = undefined;
+    }
+    var onInputHandler = function (e) {
+      var target = e.target;
+      var input = target.value;
+      var formattedInput = formatDateInput(input);
+      if (formattedInput === input) return;
+      target.value = formattedInput;
+    };
+    var onHourInputHandler = function (e) {
+      var target = e.target;
+      var input = target.value;
+      var formattedInput = formatHourInput(input);
+      if (formattedInput === input) return;
+      target.value = formattedInput;
+    };
+    var onMinuteInputHandler = function (e) {
+      var target = e.target;
+      var input = target.value;
+      var formattedInput = formatMinuteInput(input);
+      if (formattedInput === input) return;
+      target.value = formattedInput;
+    };
+    // 외부 클릭 시 시간 입력 강제 blur 처리
+    var handleMouseDown = function (e) {
+      var flatpickrCalendar = wrapper.querySelector('.flatpickr-calendar.open');
+      if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
+        var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+        timeInputs.forEach(function (input) {
+          if (document.activeElement === input) {
+            input.blur();
+          }
+        });
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown, true);
     return flatpickr(input, __assign(__assign({}, options), {
-      appendTo: wrapper
+      allowInput: (_b = options.allowInput) !== null && _b !== void 0 ? _b : true,
+      appendTo: wrapper,
+      time_24hr: true,
+      defaultHour: options.defaultHour || 0,
+      defaultMinute: options.defaultMinute || 0,
+      locale: locale,
+      onReady: function (selectedDates, dateStr, instance) {
+        var _a;
+        var input = instance.input;
+        if (!input) return;
+        var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+        input.addEventListener('input', onInputHandler);
+        if (!timeInputWrapper) return;
+        var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+        var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+        if (!hourInput || !minuteInput) return;
+        hourInput.addEventListener('input', onHourInputHandler);
+        minuteInput.addEventListener('input', onMinuteInputHandler);
+      },
+      onDestroy: function (selectedDates, dateStr, instance) {
+        var input = instance.input;
+        if (!input) return;
+        input.removeEventListener('input', onInputHandler);
+        input.removeEventListener('input', onHourInputHandler);
+        input.removeEventListener('input', onMinuteInputHandler);
+        document.removeEventListener('mousedown', handleMouseDown, true);
+      }
     }));
   };
   DatePicker.prototype.updateDateWithButton = function (e) {
@@ -198,19 +296,6 @@ var DatePicker = /** @class */function () {
       return button.text === target.textContent;
     });
     if (!clickedButton || clickedButton === this.currentButton) return;
-    // 날짜 계산
-    var calculateDates = function () {
-      var period = clickedButton.period,
-        unit = clickedButton.unit;
-      var dates = [];
-      var startDate = period ? moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE) : moment().format(CONSTANTS.FORMATS.DATE);
-      dates.push(startDate);
-      if (_this.datePickerOptions.length > 1) {
-        var endDate = moment().format(CONSTANTS.FORMATS.DATE);
-        dates.push(endDate);
-      }
-      return dates;
-    };
     var updateButtonState = function () {
       return _this.buttons.map(function (button) {
         return __assign(__assign({}, button), {
@@ -220,24 +305,108 @@ var DatePicker = /** @class */function () {
     };
     this.currentButton = clickedButton;
     this.reRenderButtonGroup(updateButtonState());
-    this.setMultipleDates(calculateDates());
+    this.setMultipleDates(this.calculateDatesFromButton(clickedButton));
   };
   DatePicker.prototype.setMultipleDates = function (dates) {
     var _this = this;
     dates.forEach(function (date, index) {
-      _this.flatpickrInstances[index].setDate(date, true);
-      _this.flatpickrInstances[index].redraw();
+      var _a, _b;
+      var shouldTriggerChange = index === dates.length - 1;
+      (_a = _this.flatpickrInstances[index]) === null || _a === void 0 ? void 0 : _a.setDate(date, shouldTriggerChange);
+      (_b = _this.flatpickrInstances[index]) === null || _b === void 0 ? void 0 : _b.redraw();
+    });
+  };
+  DatePicker.prototype.updateButtonsByPeriod = function (period) {
+    var newButtons = this.buttons.map(function (button) {
+      return __assign(__assign({}, button), {
+        isCurrent: period !== null && button.period === period
+      });
+    });
+    this.reRenderButtonGroup(newButtons);
+  };
+  DatePicker.prototype.calculateDatesFromButton = function (button) {
+    var _this = this;
+    var period = button.period,
+      unit = button.unit;
+    return this.datePickerOptions.map(function (option, index) {
+      var _a;
+      var hasTime = (_a = option.options) === null || _a === void 0 ? void 0 : _a.enableTime;
+      if (index === 0) {
+        var startMoment = period ? moment().subtract(period, unit) : moment();
+        return hasTime ? startMoment.startOf('day').format(_this.dateFormat) : startMoment.format(_this.dateFormat);
+      }
+      return hasTime ? moment().endOf('day').format(_this.dateFormat) : moment().format(_this.dateFormat);
     });
   };
   DatePicker.prototype.setDate = function (dates) {
-    this.setMultipleDates(dates);
+    var _this = this;
+    var startDate = dates[0],
+      endDate = dates[1];
+    var datesToSet = this.datePickerOptions.map(function (option, index) {
+      var _a, _b;
+      var date = index === 0 ? startDate : endDate;
+      if (!date || date === '0000-00-00') return '';
+      var hasTime = (_a = option.options) === null || _a === void 0 ? void 0 : _a.enableTime;
+      var flatpickrFormat = ((_b = option.options) === null || _b === void 0 ? void 0 : _b.dateFormat) || (hasTime ? 'Y-m-d H:i' : 'Y-m-d');
+      // dateFormat이 설정되어 있지 않을 때만 hasTime에 따라 기본값 설정
+      // dateFormat이 설정되어 있으면 그 형식을 그대로 사용 (enableTime과 무관하게)
+      var momentFormat = _this.convertFlatpickrFormatToMoment(flatpickrFormat);
+      var momentDate;
+      if (hasTime && !date.includes(':')) {
+        // 시간이 없는 날짜 형식으로 파싱
+        momentDate = moment(date);
+        if (!momentDate.isValid()) return '';
+        return index === 0 ? momentDate.startOf('day').format(momentFormat) : momentDate.endOf('day').format(momentFormat);
+      }
+      if (hasTime && date.includes(':')) {
+        momentDate = moment(date);
+        if (!momentDate.isValid()) return '';
+        return momentDate.format(momentFormat);
+      }
+      // 시간이 없는 경우 (hasTime이 false이거나 date에 시간이 없는 경우)
+      momentDate = moment(date);
+      if (!momentDate.isValid()) {
+        momentDate = moment(date, momentFormat, true);
+      }
+      // 둘 다 실패하면 다른 일반적인 형식들로 시도
+      if (!momentDate.isValid()) {
+        momentDate = moment(date, [momentFormat, 'YYYY-MM-DD', 'YYYY/MM/DD', 'MM/DD/YYYY'], true);
+      }
+      if (!momentDate.isValid()) return '';
+      // dateFormat 형식으로 포맷팅하여 반환 (flatpickr가 표시하는 형식과 일치)
+      return momentDate.format(momentFormat);
+    });
+    var period = datesToSet[0] && datesToSet[1] ? moment(datesToSet[1]).diff(moment(datesToSet[0]), 'days') : null;
+    this.updateButtonsByPeriod(period);
+    this.setMultipleDates(datesToSet);
+  };
+  // flatpickr 형식을 moment 형식으로 변환하는 헬퍼 메서드
+  DatePicker.prototype.convertFlatpickrFormatToMoment = function (flatpickrFormat) {
+    var map = {
+      Y: 'YYYY',
+      y: 'YY',
+      m: 'MM',
+      d: 'DD',
+      H: 'HH',
+      i: 'mm',
+      S: 'ss'
+    };
+    return flatpickrFormat.replace(/[YymdHiS]/g, function (matched) {
+      return map[matched] || matched;
+    });
   };
   DatePicker.prototype.getDates = function () {
-    return this.flatpickrInstances.flatMap(function (instance) {
-      return instance.selectedDates;
+    var _this = this;
+    return this.flatpickrInstances.map(function (instance) {
+      var selectedDates = instance.selectedDates;
+      if (selectedDates.length > 0) {
+        return moment(selectedDates[0]).format(_this.dateFormat);
+      }
+      return '';
     });
   };
+  DatePicker.instanceCounter = 0;
+  DatePicker.usedWrappers = new Set(); // 사용된 wrapper 요소 추적용
   return DatePicker;
 }();
-export { DatePicker };
 window.DatePicker = DatePicker;

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

@@ -0,0 +1,90 @@
+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);
+};
+// React 컴포넌트와 동일하게 구성
+var iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+var FeaturedIcon = /** @class */function () {
+  function FeaturedIcon(options) {
+    this.options = __assign({
+      theme: 'light-circle',
+      color: 'neutral',
+      size: 'md',
+      className: ''
+    }, options);
+    this.element = this.createElement();
+  }
+  // svgString ( ICON SVG ) 을 받아서 요소를 생성
+  FeaturedIcon.prototype.createElement = function () {
+    var _a = this.options,
+      theme = _a.theme,
+      color = _a.color,
+      size = _a.size,
+      className = _a.className,
+      svgString = _a.svgString;
+    // React FeaturedIcon과 동일한 클래스 구조
+    var classes = ['ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size)];
+    if (className) {
+      classes.push(className);
+    }
+    var div = document.createElement('div');
+    div.className = classes.join(' ');
+    // outline-circle 테마일 때 추가 요소들 (React 컴포넌트와 동일)
+    if (theme === 'outline-circle') {
+      var innerOutline = document.createElement('div');
+      innerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--inner';
+      div.appendChild(innerOutline);
+      var outerOutline = document.createElement('div');
+      outerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--outer';
+      div.appendChild(outerOutline);
+    }
+    // SVG 아이콘 추가
+    var iconSize = iconSizeMap[size];
+    var svgWithSize = this.addSizeToSvg(svgString, iconSize);
+    div.innerHTML += svgWithSize;
+    return div;
+  };
+  FeaturedIcon.prototype.addSizeToSvg = function (svgString, size) {
+    return svgString.replace(/<svg([^>]*)>/, "<svg$1 width=\"".concat(size, "\" height=\"").concat(size, "\">"));
+  };
+  // Public methods
+  FeaturedIcon.prototype.getElement = function () {
+    return this.element;
+  };
+  FeaturedIcon.prototype.updateColor = function (color) {
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, "ncua-featured-icon--".concat(color));
+    this.options.color = color;
+  };
+  FeaturedIcon.prototype.updateSize = function (size) {
+    var iconSize = iconSizeMap[size];
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, "ncua-featured-icon--".concat(size));
+    var svgIcon = this.element.querySelector('svg');
+    if (svgIcon) {
+      svgIcon.setAttribute('width', String(iconSize));
+      svgIcon.setAttribute('height', String(iconSize));
+    }
+    this.options.size = size;
+  };
+  FeaturedIcon.prototype.destroy = function () {
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  };
+  // Static factory method
+  FeaturedIcon.create = function (options) {
+    return new FeaturedIcon(options);
+  };
+  return FeaturedIcon;
+}();
+export { FeaturedIcon };