@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -14,13 +14,13 @@ var _const = require("./const");
 var _breakpoint = require("../../../src/constant/breakpoint");
 // 공통 유틸리티 함수들
 function createWrapperElement(baseClass, color, className) {
-  var wrapper = document.createElement('div');
+  const wrapper = document.createElement('div');
   wrapper.className = buildClassName(baseClass, color, className);
   wrapper.setAttribute('role', 'alert');
   return wrapper;
 }
 function buildClassName(baseClass, color, className) {
-  var classes = [baseClass, "".concat(baseClass, "--").concat(color)];
+  const classes = [baseClass, `${baseClass}--${color}`];
   if (className) {
     classes.push(className);
   }
@@ -29,46 +29,51 @@ function buildClassName(baseClass, color, className) {
 function renderSupportingText(supportingText, className, supportTextLink) {
   if (!supportingText) return '';
   if (supportTextLink) {
-    return "<a href=\"".concat(supportTextLink, "\" class=\"ncua-full-width-notification__link\"><span class=\"").concat(className, "\">").concat(supportingText, "</span></a>");
+    return `<a href="${supportTextLink}" class="ncua-full-width-notification__link"><span class="${className}">${supportingText}</span></a>`;
   }
-  return "<span class=\"".concat(className, "\">").concat(supportingText, "</span>");
+  return `<span class="${className}">${supportingText}</span>`;
 }
 function renderActions(actions, wrapperClass) {
   // 액션이 없으면 빈 문자열 반환
   if (!actions || actions.length === 0) {
     return '';
   }
-  var buttonsHtml = actions.map(function (action) {
-    var buttonHtml = "\n      <button \n        class=\"ncua-btn ncua-btn--sm ncua-btn--".concat(action.hierarchy || 'text', "\"\n        data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n      >\n        ").concat(action.label, "\n      </button>");
+  const buttonsHtml = actions.map(action => {
+    const buttonHtml = `
+      <button 
+        class="ncua-btn ncua-btn--sm ncua-btn--${action.hierarchy || 'text'}"
+        data-action="${action.label}-${action.hierarchy}"
+      >
+        ${action.label}
+      </button>`;
     return buttonHtml;
   }).join('');
-  return "<div class=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
+  return `<div class="${wrapperClass}">${buttonsHtml}</div>`;
 }
 // 공통 이벤트 처리
 function bindNotificationEvents(element, actions, onClose, onRemove) {
-  element.addEventListener('click', function (event) {
-    var target = event.target;
+  element.addEventListener('click', event => {
+    const target = event.target;
     // 닫기 버튼 클릭 처리
-    if (target.matches(".".concat(_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(_const.CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(_const.CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON))) {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    if (target.matches(`.${_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${_const.CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) || target.closest(`.${_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${_const.CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) || target.closest(`.${_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON}`)) {
+      onClose?.();
+      onRemove?.();
       return;
     }
     // 액션 버튼 클릭 처리
-    var actionButton = target.closest('.ncua-btn[data-action]');
+    const actionButton = target.closest('.ncua-btn[data-action]');
     if (actionButton && actions) {
-      var actionData = actionButton.getAttribute('data-action');
+      const actionData = actionButton.getAttribute('data-action');
       if (actionData) {
-        var matchedAction = null;
-        for (var _i = 0, actions_1 = actions; _i < actions_1.length; _i++) {
-          var action = actions_1[_i];
-          var expectedDataAction = "".concat(action.label, "-").concat(action.hierarchy || 'link');
+        let matchedAction = null;
+        for (const action of actions) {
+          const expectedDataAction = `${action.label}-${action.hierarchy || 'link'}`;
           if (actionData === expectedDataAction) {
             matchedAction = action;
             break;
           }
         }
-        if (matchedAction === null || matchedAction === void 0 ? void 0 : matchedAction.onClick) {
+        if (matchedAction?.onClick) {
           matchedAction.onClick();
         }
       }
@@ -78,15 +83,15 @@ function bindNotificationEvents(element, actions, onClose, onRemove) {
 // 자동 닫기 설정
 function setupAutoClose(autoClose, onClose, onRemove) {
   if (autoClose > 0) {
-    return window.setTimeout(function () {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    return window.setTimeout(() => {
+      onClose?.();
+      onRemove?.();
     }, autoClose);
   }
   return undefined;
 }
 // Mobile detection utility
-var isMobile = function () {
+const isMobile = () => {
   return window.innerWidth <= parseInt(_breakpoint.BREAKPOINT.mobile);
 };
 exports.isMobile = isMobile;

package/dist/cjs/assets/scripts/progress-bar/ProgressBar.js

@@ -8,16 +8,6 @@ exports.ProgressBar = void 0;
  * ProgressBar 클래스
  * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
  */
-var __assign = void 0 && (void 0).__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);
-};
 /**
  * 값을 0-100 범위로 제한
  */
@@ -29,107 +19,97 @@ function clampValue(value) {
  */
 function getFillColorClass(color) {
   if (!color) return '';
-  var normalizedColor = color.toLowerCase().trim();
-  return "ncua-progress-bar__fill--color-".concat(normalizedColor);
+  const normalizedColor = color.toLowerCase().trim();
+  return `ncua-progress-bar__fill--color-${normalizedColor}`;
 }
 /**
  * 색상 이름을 label 색상 클래스명으로 변환
  */
 function getLabelColorClass(color) {
   if (!color) return '';
-  var normalizedColor = color.toLowerCase().trim();
-  return "ncua-progress-bar__label--color-".concat(normalizedColor);
+  const normalizedColor = color.toLowerCase().trim();
+  return `ncua-progress-bar__label--color-${normalizedColor}`;
 }
 /**
  * ProgressBar 클래스
  */
-var ProgressBar = exports.ProgressBar = /** @class */function () {
-  function ProgressBar(options) {
-    if (options === void 0) {
-      options = {};
-    }
+class ProgressBar {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.element = null;
-    this.options = __assign({
+    this.options = {
       showZeroLabel: false,
-      valueToPercent: true
-    }, options);
+      valueToPercent: true,
+      ...options
+    };
   }
   /**
    * segments 처리 로직
    */
-  ProgressBar.prototype.processSegments = function () {
-    var _a;
-    var _b = this.options,
-      segments = _b.segments,
-      label = _b.label,
-      valueToPercent = _b.valueToPercent;
-    var hasSegments = Boolean(segments && segments.length > 0);
-    var segmentCount = (_a = segments === null || segments === void 0 ? void 0 : segments.length) !== null && _a !== void 0 ? _a : 0;
+  processSegments() {
+    const {
+      segments,
+      label,
+      valueToPercent
+    } = this.options;
+    const hasSegments = Boolean(segments && segments.length > 0);
+    const segmentCount = segments?.length ?? 0;
     if (hasSegments) {
       // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
-      var shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
-      var segmentsToProcess = segments;
+      const shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
+      let segmentsToProcess = segments;
       // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
       if (shouldApplyValueToPercent) {
         // 원본 값들의 합계 계산
-        var originalTotal_1 = segmentsToProcess.reduce(function (sum, seg) {
-          return sum + seg.value;
-        }, 0);
-        if (originalTotal_1 > 0) {
+        const originalTotal = segmentsToProcess.reduce((sum, seg) => sum + seg.value, 0);
+        if (originalTotal > 0) {
           // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
-          segmentsToProcess = segmentsToProcess.map(function (segment) {
-            return {
-              value: segment.value / originalTotal_1 * 100,
-              color: segment.color
-            };
-          });
+          segmentsToProcess = segmentsToProcess.map(segment => ({
+            value: segment.value / originalTotal * 100,
+            color: segment.color
+          }));
         }
       }
       // 각 값 제한 (0-100 범위)
-      var limitedSegments = segmentsToProcess.map(function (segment) {
-        return {
-          value: clampValue(segment.value),
-          color: segment.color
-        };
-      });
+      const limitedSegments = segmentsToProcess.map(segment => ({
+        value: clampValue(segment.value),
+        color: segment.color
+      }));
       // 전체 합계 계산
-      var actualTotal_1 = limitedSegments.reduce(function (sum, seg) {
-        return sum + seg.value;
-      }, 0);
-      var total_1 = Math.min(actualTotal_1, 100);
+      const actualTotal = limitedSegments.reduce((sum, seg) => sum + seg.value, 0);
+      const total = Math.min(actualTotal, 100);
       // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
-      var processed = limitedSegments.map(function (segment) {
-        return __assign(__assign({}, segment), {
-          width: actualTotal_1 > 0 ? segment.value / actualTotal_1 * total_1 : 0
-        });
-      });
+      const processed = limitedSegments.map(segment => ({
+        ...segment,
+        width: actualTotal > 0 ? segment.value / actualTotal * total : 0
+      }));
       // segment의 개수가 2이상일때는 bottom 라벨로 고정
-      var effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+      const effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
       // floating label 스타일
-      var progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
-        '--progress-value': "".concat(total_1, "%")
+      const progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
+        '--progress-value': `${total}%`
       } : undefined;
       return {
-        totalValue: total_1,
-        displayValue: "".concat(total_1.toFixed(0), "%"),
+        totalValue: total,
+        displayValue: `${total.toFixed(0)}%`,
         processedSegments: processed,
-        effectiveLabel: effectiveLabel,
-        progressValueStyle: progressValueStyle
+        effectiveLabel,
+        progressValueStyle
       };
     }
     // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
     if (this.options.value !== undefined) {
-      var clamped = clampValue(this.options.value);
-      var effectiveLabel = label;
-      var progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
-        '--progress-value': "".concat(clamped, "%")
+      const clamped = clampValue(this.options.value);
+      const effectiveLabel = label;
+      const progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
+        '--progress-value': `${clamped}%`
       } : undefined;
       return {
         totalValue: clamped,
-        displayValue: "".concat(clamped.toFixed(0), "%"),
+        displayValue: `${clamped.toFixed(0)}%`,
         processedSegments: [],
-        effectiveLabel: effectiveLabel,
-        progressValueStyle: progressValueStyle
+        effectiveLabel,
+        progressValueStyle
       };
     }
     return {
@@ -139,134 +119,153 @@ var ProgressBar = exports.ProgressBar = /** @class */function () {
       effectiveLabel: label,
       progressValueStyle: undefined
     };
-  };
+  }
   /**
    * 단일 라벨 HTML 생성
    */
-  ProgressBar.prototype.renderSingleLabel = function (labelType, displayValue, totalValue) {
+  renderSingleLabel(labelType, displayValue, totalValue) {
     // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
     if (totalValue === 0 && !this.options.showZeroLabel) {
       return '';
     }
-    return "<span class=\"ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType, "\">").concat(displayValue, "</span>");
-  };
+    return `<span class="ncua-progress-bar__label ncua-progress-bar__label-${labelType}">${displayValue}</span>`;
+  }
   /**
    * segments 라벨 HTML 생성
    */
-  ProgressBar.prototype.renderSegmentLabels = function (segments, segmentCount) {
-    var _this = this;
+  renderSegmentLabels(segments, segmentCount) {
     if (segmentCount < 2) return '';
-    var labels = [];
-    segments.forEach(function (segment, index) {
+    const labels = [];
+    segments.forEach((segment, index) => {
       // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
-      if (segment.value === 0 && !_this.options.showZeroLabel) {
+      if (segment.value === 0 && !this.options.showZeroLabel) {
         return;
       }
-      var leftPosition = 0;
-      for (var i = 0; i < index; i++) {
+      let leftPosition = 0;
+      for (let i = 0; i < index; i++) {
         leftPosition += segments[i].width;
       }
       // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
       // 그 외에는 중앙에 정렬
-      var isZero = segment.value === 0;
+      const isZero = segment.value === 0;
       // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
-      var labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
-      var transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
-      var colorClass = getLabelColorClass(segment.color);
-      labels.push("<span class=\"ncua-progress-bar__label ncua-progress-bar__label--segment ".concat(colorClass, "\" style=\"left: ").concat(labelPosition, "%; transform: ").concat(transform, ";\">").concat(segment.value.toFixed(0), "%</span>"));
+      const labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
+      const transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
+      const colorClass = getLabelColorClass(segment.color);
+      labels.push(`<span class="ncua-progress-bar__label ncua-progress-bar__label--segment ${colorClass}" style="left: ${labelPosition}%; transform: ${transform};">${segment.value.toFixed(0)}%</span>`);
     });
-    return labels.length > 0 ? "<div class=\"ncua-progress-bar__labels--multiple\">".concat(labels.join(''), "</div>") : '';
-  };
+    return labels.length > 0 ? `<div class="ncua-progress-bar__labels--multiple">${labels.join('')}</div>` : '';
+  }
   /**
    * segment bar HTML 생성
    */
-  ProgressBar.prototype.renderSegmentBar = function (segments) {
-    var fills = [];
-    segments.forEach(function (segment, index) {
-      var classes = ['ncua-progress-bar__fill', index === 0 ? 'ncua-progress-bar__fill--first' : '', index === segments.length - 1 ? 'ncua-progress-bar__fill--last' : '', getFillColorClass(segment.color)].filter(Boolean).join(' ');
-      fills.push("<div class=\"".concat(classes, "\" style=\"width: ").concat(segment.width, "%;\"></div>"));
+  renderSegmentBar(segments) {
+    const fills = [];
+    segments.forEach((segment, index) => {
+      const classes = ['ncua-progress-bar__fill', index === 0 ? 'ncua-progress-bar__fill--first' : '', index === segments.length - 1 ? 'ncua-progress-bar__fill--last' : '', getFillColorClass(segment.color)].filter(Boolean).join(' ');
+      fills.push(`<div class="${classes}" style="width: ${segment.width}%;"></div>`);
     });
     return fills.join('');
-  };
+  }
   /**
    * HTML 문자열 생성
    */
-  ProgressBar.prototype.toHTML = function () {
-    var _a, _b;
-    var _c = this.processSegments(),
-      totalValue = _c.totalValue,
-      displayValue = _c.displayValue,
-      processedSegments = _c.processedSegments,
-      effectiveLabel = _c.effectiveLabel,
-      progressValueStyle = _c.progressValueStyle;
-    var hasSegments = Boolean(this.options.segments && this.options.segments.length > 0);
-    var segmentCount = (_b = (_a = this.options.segments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-    var isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+  toHTML() {
+    const {
+      totalValue,
+      displayValue,
+      processedSegments,
+      effectiveLabel,
+      progressValueStyle
+    } = this.processSegments();
+    const hasSegments = Boolean(this.options.segments && this.options.segments.length > 0);
+    const segmentCount = this.options.segments?.length ?? 0;
+    const isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
     // 스타일 문자열 생성
-    var styleString = progressValueStyle ? "style=\"".concat(Object.entries(progressValueStyle).map(function (_a) {
-      var key = _a[0],
-        value = _a[1];
-      return "".concat(key.replace(/([A-Z])/g, '-$1').toLowerCase(), ": ").concat(value);
-    }).join('; '), "\"") : '';
+    const styleString = progressValueStyle ? `style="${Object.entries(progressValueStyle).map(_ref => {
+      let [key, value] = _ref;
+      return `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`;
+    }).join('; ')}"` : '';
     // segment가 1개이거나 value만 있을 때는 동일하게 처리 (단일 progress bar)
-    var isSingleBar = segmentCount < 2; // segment가 0개 또는 1개일 때
+    const isSingleBar = segmentCount < 2; // segment가 0개 또는 1개일 때
     if (isSingleBar) {
-      var fillColorClass = hasSegments && segmentCount === 1 ? getFillColorClass(processedSegments[0].color) : '';
-      var floatingLabel_1 = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
-      var rightLabel_1 = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
-      var bottomLabel_1 = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
+      const fillColorClass = hasSegments && segmentCount === 1 ? getFillColorClass(processedSegments[0].color) : '';
+      const floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
+      const rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
+      const bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
       // 단일 progress bar일 때는 text-align: left를 위한 클래스 추가
-      var singleSegmentClass = 'ncua-progress-bar--single-segment';
-      return "<div class=\"ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || '', " ").concat(singleSegmentClass, "\" ").concat(styleString, ">\n  ").concat(floatingLabel_1, "\n  <div class=\"ncua-progress-bar__content\">\n    <div class=\"ncua-progress-bar__bar\">\n      <div class=\"ncua-progress-bar__fill ").concat(fillColorClass, "\" style=\"width: ").concat(totalValue, "%;\" aria-valuenow=\"").concat(totalValue, "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n    </div>\n    ").concat(rightLabel_1, "\n  </div>\n  ").concat(bottomLabel_1, "\n</div>");
+      const singleSegmentClass = 'ncua-progress-bar--single-segment';
+      return `<div class="ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''} ${singleSegmentClass}" ${styleString}>
+  ${floatingLabel}
+  <div class="ncua-progress-bar__content">
+    <div class="ncua-progress-bar__bar">
+      <div class="ncua-progress-bar__fill ${fillColorClass}" style="width: ${totalValue}%;" aria-valuenow="${totalValue}" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    ${rightLabel}
+  </div>
+  ${bottomLabel}
+</div>`;
     }
     // 일반 케이스
-    var floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
-    var rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
-    var bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
-    var segmentLabels = hasSegments && segmentCount >= 2 ? this.renderSegmentLabels(processedSegments, segmentCount) : '';
-    var segmentBar = hasSegments ? this.renderSegmentBar(processedSegments) : "<div class=\"ncua-progress-bar__fill\" style=\"width: ".concat(totalValue, "%;\" aria-valuenow=\"").concat(totalValue, "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>");
-    var segmentsClass = hasSegments ? 'ncua-progress-bar__bar--segments' : '';
-    return "<div class=\"ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || '', "\" ").concat(styleString, ">\n  ").concat(floatingLabel, "\n  <div class=\"ncua-progress-bar__content\">\n    <div class=\"ncua-progress-bar__bar ").concat(segmentsClass, "\">\n      ").concat(segmentBar, "\n    </div>\n    ").concat(rightLabel, "\n  </div>\n  ").concat(hasSegments && segmentCount >= 2 ? segmentLabels : bottomLabel, "\n</div>");
-  };
+    const floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
+    const rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
+    const bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
+    const segmentLabels = hasSegments && segmentCount >= 2 ? this.renderSegmentLabels(processedSegments, segmentCount) : '';
+    const segmentBar = hasSegments ? this.renderSegmentBar(processedSegments) : `<div class="ncua-progress-bar__fill" style="width: ${totalValue}%;" aria-valuenow="${totalValue}" aria-valuemin="0" aria-valuemax="100"></div>`;
+    const segmentsClass = hasSegments ? 'ncua-progress-bar__bar--segments' : '';
+    return `<div class="ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''}" ${styleString}>
+  ${floatingLabel}
+  <div class="ncua-progress-bar__content">
+    <div class="ncua-progress-bar__bar ${segmentsClass}">
+      ${segmentBar}
+    </div>
+    ${rightLabel}
+  </div>
+  ${hasSegments && segmentCount >= 2 ? segmentLabels : bottomLabel}
+</div>`;
+  }
   /**
    * DOM 요소 생성
    */
-  ProgressBar.prototype.toElement = function () {
-    var div = document.createElement('div');
+  toElement() {
+    const div = document.createElement('div');
     div.innerHTML = this.toHTML();
     this.element = div.firstElementChild;
     return this.element;
-  };
+  }
   /**
    * 요소 반환
    */
-  ProgressBar.prototype.getElement = function () {
+  getElement() {
     return this.toElement();
-  };
+  }
   /**
    * 옵션 업데이트
    */
-  ProgressBar.prototype.updateOptions = function (newOptions) {
-    this.options = __assign(__assign({}, this.options), newOptions);
+  updateOptions(newOptions) {
+    this.options = {
+      ...this.options,
+      ...newOptions
+    };
     if (this.element) {
-      var newElement = this.toElement();
+      const newElement = this.toElement();
       if (this.element.parentNode) {
         this.element.parentNode.replaceChild(newElement, this.element);
       }
       this.element = newElement;
     }
-  };
+  }
   /**
    * Static factory method
    */
-  ProgressBar.create = function (options) {
+  static create(options) {
     return new ProgressBar(options);
-  };
+  }
   /**
    * Static method: HTML 문자열 생성
    */
-  ProgressBar.toHTML = function (options) {
+  static toHTML(options) {
     return new ProgressBar(options).toHTML();
-  };
-  return ProgressBar;
-}();
+  }
+}
+exports.ProgressBar = ProgressBar;