@ncds/ui-admin 1.7.0 → 1.8.1

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

@@ -1,40 +1,40 @@
 // 알림 컴포넌트 사이즈 관련 상수들
 // FeaturedIcon 사이즈
-export var FEATURED_ICON_SIZES = {
+export const FEATURED_ICON_SIZES = {
     MOBILE: 'md',
     DESKTOP: 'sm',
 };
 // SVG 아이콘 픽셀 사이즈
-export var ICON_PIXEL_SIZES = {
+export const ICON_PIXEL_SIZES = {
     MOBILE: '20',
     DESKTOP: '16',
     FULL_WIDTH: '16', // Full-width는 항상 고정
 };
 // 닫기 버튼 사이즈
-export var CLOSE_BUTTON_SIZES = {
+export const CLOSE_BUTTON_SIZES = {
     MOBILE: 'sm',
     DESKTOP: 'xs',
 };
 // 닫기 버튼 SVG 픽셀 사이즈
-export var CLOSE_BUTTON_SVG_SIZES = {
+export const CLOSE_BUTTON_SVG_SIZES = {
     xs: 16,
     sm: 20,
 };
 // Full-width 알림 고정 사이즈
-export var FULL_WIDTH_SIZES = {
+export const FULL_WIDTH_SIZES = {
     ICON: '16',
     CLOSE_BUTTON: '20',
 };
 // Message 알림 고정 사이즈
-export var MESSAGE_SIZES = {
+export const MESSAGE_SIZES = {
     FEATURED_ICON: 'lg',
     ICON_PIXEL: '24',
     CLOSE_BUTTON: '20',
 };
 // 사이즈 유틸리티 함수들
-export var 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]; },
+export const getSizes = {
+    featuredIcon: (isMobile) => (isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP),
+    iconPixel: (isMobile) => (isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP),
+    closeButton: (isMobile) => (isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP),
+    closeButtonSvg: (size) => CLOSE_BUTTON_SVG_SIZES[size],
 };

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

@@ -1,5 +1,5 @@
 // Message Notification 닫기 버튼 아이콘 색상 맵
-export var MESSAGE_CLOSE_ICON_COLORS = {
+export const MESSAGE_CLOSE_ICON_COLORS = {
     neutral: '#6B7280',
     error: '#EF4444',
     warning: '#F97316',

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

@@ -2,13 +2,13 @@ import { CLASS_NAMES } from './const';
 import { BREAKPOINT } from '../../../src/constant/breakpoint';
 // 공통 유틸리티 함수들
 export 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;
 }
 export function buildClassName(baseClass, color, className) {
-    var classes = [baseClass, "".concat(baseClass, "--").concat(color)];
+    const classes = [baseClass, `${baseClass}--${color}`];
     if (className) {
         classes.push(className);
     }
@@ -18,50 +18,55 @@ export 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>`;
 }
 export 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>`;
 }
 // 공통 이벤트 처리
 export 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(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) ||
-            target.closest(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) ||
-            target.closest(".".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON))) {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+        if (target.matches(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) ||
+            target.closest(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) ||
+            target.closest(`.${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();
                 }
             }
@@ -71,14 +76,14 @@ export function bindNotificationEvents(element, actions, onClose, onRemove) {
 // 자동 닫기 설정
 export 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
-export var isMobile = function () {
+export const isMobile = () => {
     return window.innerWidth <= parseInt(BREAKPOINT.mobile);
 };

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

@@ -2,17 +2,6 @@
  * ProgressBar 클래스
  * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
  */
-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);
-};
 /**
  * 값을 0-100 범위로 제한
  */
@@ -25,8 +14,8 @@ 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 색상 클래스명으로 변환
@@ -34,79 +23,84 @@ function getFillColorClass(color) {
 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 = /** @class */ (function () {
-    function ProgressBar(options) {
-        if (options === void 0) { options = {}; }
+export class ProgressBar {
+    constructor(options = {}) {
         this.element = null;
-        this.options = __assign({ showZeroLabel: false, valueToPercent: true }, options);
+        this.options = {
+            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;
+    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,
+                    segmentsToProcess = segmentsToProcess.map((segment) => ({
+                        value: (segment.value / originalTotal) * 100,
                         color: segment.color,
-                    }); });
+                    }));
                 }
             }
             // 각 값 제한 (0-100 범위)
-            var limitedSegments = segmentsToProcess.map(function (segment) { return ({
+            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 {
@@ -116,52 +110,51 @@ var 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 = [
+    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' : '',
@@ -169,90 +162,102 @@ var ProgressBar = /** @class */ (function () {
             ]
                 .filter(Boolean)
                 .join(' ');
-            fills.push("<div class=\"".concat(classes, "\" style=\"width: ").concat(segment.width, "%;\"></div>"));
+            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(([key, value]) => `${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
+        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: ".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>");
-    };
+            : `<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;
-}());
-export { ProgressBar };
+    }
+}