@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

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

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CLASS_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _classNames.CLASS_NAMES;
+  }
+});
+Object.defineProperty(exports, "CLOSE_BUTTON_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.CLOSE_BUTTON_SIZES;
+  }
+});
+Object.defineProperty(exports, "CLOSE_BUTTON_SVG_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.CLOSE_BUTTON_SVG_SIZES;
+  }
+});
+Object.defineProperty(exports, "FEATURED_ICON_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.FEATURED_ICON_SIZES;
+  }
+});
+Object.defineProperty(exports, "FLOATING_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.FLOATING_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FULL_WIDTH_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.FULL_WIDTH_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FULL_WIDTH_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.FULL_WIDTH_SIZES;
+  }
+});
+Object.defineProperty(exports, "ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "ICON_PIXEL_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.ICON_PIXEL_SIZES;
+  }
+});
+Object.defineProperty(exports, "MESSAGE_CLOSE_ICON_COLORS", {
+  enumerable: true,
+  get: function () {
+    return _types.MESSAGE_CLOSE_ICON_COLORS;
+  }
+});
+Object.defineProperty(exports, "MESSAGE_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.MESSAGE_SIZES;
+  }
+});
+Object.defineProperty(exports, "SVG_ICONS", {
+  enumerable: true,
+  get: function () {
+    return _icons.SVG_ICONS;
+  }
+});
+Object.defineProperty(exports, "getSizes", {
+  enumerable: true,
+  get: function () {
+    return _sizes.getSizes;
+  }
+});
+var _icons = require("./icons");
+var _classNames = require("./classNames");
+var _sizes = require("./sizes");
+var _types = require("./types");

package/dist/cjs/assets/scripts/notification/const/sizes.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSizes = exports.MESSAGE_SIZES = exports.ICON_PIXEL_SIZES = exports.FULL_WIDTH_SIZES = exports.FEATURED_ICON_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SIZES = void 0;
+// 알림 컴포넌트 사이즈 관련 상수들
+// FeaturedIcon 사이즈
+var FEATURED_ICON_SIZES = exports.FEATURED_ICON_SIZES = {
+  MOBILE: 'md',
+  DESKTOP: 'sm'
+};
+// SVG 아이콘 픽셀 사이즈
+var ICON_PIXEL_SIZES = exports.ICON_PIXEL_SIZES = {
+  MOBILE: '20',
+  DESKTOP: '16',
+  FULL_WIDTH: '16' // Full-width는 항상 고정
+};
+// 닫기 버튼 사이즈
+var CLOSE_BUTTON_SIZES = exports.CLOSE_BUTTON_SIZES = {
+  MOBILE: 'sm',
+  DESKTOP: 'xs'
+};
+// 닫기 버튼 SVG 픽셀 사이즈
+var CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = {
+  xs: 16,
+  sm: 20
+};
+// Full-width 알림 고정 사이즈
+var FULL_WIDTH_SIZES = exports.FULL_WIDTH_SIZES = {
+  ICON: '16',
+  CLOSE_BUTTON: '20'
+};
+// Message 알림 고정 사이즈
+var MESSAGE_SIZES = exports.MESSAGE_SIZES = {
+  FEATURED_ICON: 'lg',
+  ICON_PIXEL: '24',
+  CLOSE_BUTTON: '20'
+};
+// 사이즈 유틸리티 함수들
+var getSizes = exports.getSizes = {
+  featuredIcon: function (isMobile) {
+    return isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP;
+  },
+  iconPixel: function (isMobile) {
+    return isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP;
+  },
+  closeButton: function (isMobile) {
+    return isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP;
+  },
+  closeButtonSvg: function (size) {
+    return CLOSE_BUTTON_SVG_SIZES[size];
+  }
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MESSAGE_CLOSE_ICON_COLORS = void 0;
+// Message Notification 닫기 버튼 아이콘 색상 맵
+var MESSAGE_CLOSE_ICON_COLORS = exports.MESSAGE_CLOSE_ICON_COLORS = {
+  neutral: '#6B7280',
+  error: '#EF4444',
+  warning: '#F97316',
+  success: '#16A34A',
+  info: '#6B7280' // info는 message 타입에서 지원하지 않지만 fallback용
+};

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Notification: true,
+  FullWidthNotification: true,
+  FloatingNotification: true,
+  MessageNotification: true,
+  SVG_ICONS: true,
+  CLASS_NAMES: true,
+  ICON_MAP: true,
+  FLOATING_ICON_MAP: true,
+  FULL_WIDTH_ICON_MAP: true
+};
+Object.defineProperty(exports, "CLASS_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _const.CLASS_NAMES;
+  }
+});
+Object.defineProperty(exports, "FLOATING_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _const.FLOATING_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FULL_WIDTH_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _const.FULL_WIDTH_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FloatingNotification", {
+  enumerable: true,
+  get: function () {
+    return _FloatingNotification.FloatingNotification;
+  }
+});
+Object.defineProperty(exports, "FullWidthNotification", {
+  enumerable: true,
+  get: function () {
+    return _FullWidthNotification.FullWidthNotification;
+  }
+});
+Object.defineProperty(exports, "ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _const.ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "MessageNotification", {
+  enumerable: true,
+  get: function () {
+    return _MessageNotification.MessageNotification;
+  }
+});
+Object.defineProperty(exports, "Notification", {
+  enumerable: true,
+  get: function () {
+    return _Notification.Notification;
+  }
+});
+Object.defineProperty(exports, "SVG_ICONS", {
+  enumerable: true,
+  get: function () {
+    return _const.SVG_ICONS;
+  }
+});
+var _Notification = require("./Notification");
+var _FullWidthNotification = require("./FullWidthNotification");
+var _FloatingNotification = require("./FloatingNotification");
+var _MessageNotification = require("./MessageNotification");
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+var _const = require("./const");
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.Notification = Notification;
+}

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bindNotificationEvents = bindNotificationEvents;
+exports.buildClassName = buildClassName;
+exports.createWrapperElement = createWrapperElement;
+exports.isMobile = void 0;
+exports.renderActions = renderActions;
+exports.renderSupportingText = renderSupportingText;
+exports.setupAutoClose = setupAutoClose;
+var _const = require("./const");
+var _breakpoint = require("../../../src/constant/breakpoint");
+// 공통 유틸리티 함수들
+function createWrapperElement(baseClass, color, className) {
+  var 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)];
+  if (className) {
+    classes.push(className);
+  }
+  return classes.join(' ');
+}
+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 "<span class=\"".concat(className, "\">").concat(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>");
+    return buttonHtml;
+  }).join('');
+  return "<div class=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
+}
+// 공통 이벤트 처리
+function bindNotificationEvents(element, actions, onClose, onRemove) {
+  element.addEventListener('click', function (event) {
+    var 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();
+      return;
+    }
+    // 액션 버튼 클릭 처리
+    var actionButton = target.closest('.ncua-btn[data-action]');
+    if (actionButton && actions) {
+      var 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');
+          if (actionData === expectedDataAction) {
+            matchedAction = action;
+            break;
+          }
+        }
+        if (matchedAction === null || matchedAction === void 0 ? void 0 : matchedAction.onClick) {
+          matchedAction.onClick();
+        }
+      }
+    }
+  });
+}
+// 자동 닫기 설정
+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();
+    }, autoClose);
+  }
+  return undefined;
+}
+// Mobile detection utility
+var isMobile = function () {
+  return window.innerWidth <= parseInt(_breakpoint.BREAKPOINT.mobile);
+};
+exports.isMobile = isMobile;

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

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 범위로 제한
+ */
+function clampValue(value) {
+  return Math.min(Math.max(0, value), 100);
+}
+/**
+ * 색상 이름을 fill 색상 클래스명으로 변환
+ */
+function getFillColorClass(color) {
+  if (!color) return '';
+  var normalizedColor = color.toLowerCase().trim();
+  return "ncua-progress-bar__fill--color-".concat(normalizedColor);
+}
+/**
+ * 색상 이름을 label 색상 클래스명으로 변환
+ */
+function getLabelColorClass(color) {
+  if (!color) return '';
+  var normalizedColor = color.toLowerCase().trim();
+  return "ncua-progress-bar__label--color-".concat(normalizedColor);
+}
+/**
+ * ProgressBar 클래스
+ */
+var ProgressBar = exports.ProgressBar = /** @class */function () {
+  function ProgressBar(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    this.element = null;
+    this.options = __assign({
+      showZeroLabel: false,
+      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;
+    if (hasSegments) {
+      // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
+      var shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
+      var segmentsToProcess = segments;
+      // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
+      if (shouldApplyValueToPercent) {
+        // 원본 값들의 합계 계산
+        var originalTotal_1 = segmentsToProcess.reduce(function (sum, seg) {
+          return sum + seg.value;
+        }, 0);
+        if (originalTotal_1 > 0) {
+          // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
+          segmentsToProcess = segmentsToProcess.map(function (segment) {
+            return {
+              value: segment.value / originalTotal_1 * 100,
+              color: segment.color
+            };
+          });
+        }
+      }
+      // 각 값 제한 (0-100 범위)
+      var limitedSegments = segmentsToProcess.map(function (segment) {
+        return {
+          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);
+      // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
+      var processed = limitedSegments.map(function (segment) {
+        return __assign(__assign({}, segment), {
+          width: actualTotal_1 > 0 ? segment.value / actualTotal_1 * total_1 : 0
+        });
+      });
+      // segment의 개수가 2이상일때는 bottom 라벨로 고정
+      var effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+      // floating label 스타일
+      var progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
+        '--progress-value': "".concat(total_1, "%")
+      } : undefined;
+      return {
+        totalValue: total_1,
+        displayValue: "".concat(total_1.toFixed(0), "%"),
+        processedSegments: processed,
+        effectiveLabel: effectiveLabel,
+        progressValueStyle: 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, "%")
+      } : undefined;
+      return {
+        totalValue: clamped,
+        displayValue: "".concat(clamped.toFixed(0), "%"),
+        processedSegments: [],
+        effectiveLabel: effectiveLabel,
+        progressValueStyle: progressValueStyle
+      };
+    }
+    return {
+      totalValue: 0,
+      displayValue: '0%',
+      processedSegments: [],
+      effectiveLabel: label,
+      progressValueStyle: undefined
+    };
+  };
+  /**
+   * 단일 라벨 HTML 생성
+   */
+  ProgressBar.prototype.renderSingleLabel = function (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>");
+  };
+  /**
+   * segments 라벨 HTML 생성
+   */
+  ProgressBar.prototype.renderSegmentLabels = function (segments, segmentCount) {
+    var _this = this;
+    if (segmentCount < 2) return '';
+    var labels = [];
+    segments.forEach(function (segment, index) {
+      // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+      if (segment.value === 0 && !_this.options.showZeroLabel) {
+        return;
+      }
+      var leftPosition = 0;
+      for (var i = 0; i < index; i++) {
+        leftPosition += segments[i].width;
+      }
+      // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
+      // 그 외에는 중앙에 정렬
+      var 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>"));
+    });
+    return labels.length > 0 ? "<div class=\"ncua-progress-bar__labels--multiple\">".concat(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>"));
+    });
+    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';
+    // 스타일 문자열 생성
+    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('; '), "\"") : '';
+    // segment가 1개이거나 value만 있을 때는 동일하게 처리 (단일 progress bar)
+    var 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) : '';
+      // 단일 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>");
+    }
+    // 일반 케이스
+    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>");
+  };
+  /**
+   * DOM 요소 생성
+   */
+  ProgressBar.prototype.toElement = function () {
+    var div = document.createElement('div');
+    div.innerHTML = this.toHTML();
+    this.element = div.firstElementChild;
+    return this.element;
+  };
+  /**
+   * 요소 반환
+   */
+  ProgressBar.prototype.getElement = function () {
+    return this.toElement();
+  };
+  /**
+   * 옵션 업데이트
+   */
+  ProgressBar.prototype.updateOptions = function (newOptions) {
+    this.options = __assign(__assign({}, this.options), newOptions);
+    if (this.element) {
+      var newElement = this.toElement();
+      if (this.element.parentNode) {
+        this.element.parentNode.replaceChild(newElement, this.element);
+      }
+      this.element = newElement;
+    }
+  };
+  /**
+   * Static factory method
+   */
+  ProgressBar.create = function (options) {
+    return new ProgressBar(options);
+  };
+  /**
+   * Static method: HTML 문자열 생성
+   */
+  ProgressBar.toHTML = function (options) {
+    return new ProgressBar(options).toHTML();
+  };
+  return ProgressBar;
+}();

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function () {
+    return _ProgressBar.ProgressBar;
+  }
+});
+var _ProgressBar = require("./ProgressBar");