@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -1,87 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-"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 사이즈
-const FEATURED_ICON_SIZES = exports.FEATURED_ICON_SIZES = {
-  MOBILE: 'md',
-  DESKTOP: 'sm'
-};
-// SVG 아이콘 픽셀 사이즈
-const ICON_PIXEL_SIZES = exports.ICON_PIXEL_SIZES = {
-  MOBILE: '20',
-  DESKTOP: '16',
-  FULL_WIDTH: '16' // Full-width는 항상 고정
-};
-// 닫기 버튼 사이즈
-const CLOSE_BUTTON_SIZES = exports.CLOSE_BUTTON_SIZES = {
-  MOBILE: 'sm',
-  DESKTOP: 'xs'
-};
-// 닫기 버튼 SVG 픽셀 사이즈
-const CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = {
-  xs: 16,
-  sm: 20
-};
-// Full-width 알림 고정 사이즈
-const FULL_WIDTH_SIZES = exports.FULL_WIDTH_SIZES = {
-  ICON: '16',
-  CLOSE_BUTTON: '20'
-};
-// Message 알림 고정 사이즈
-const MESSAGE_SIZES = exports.MESSAGE_SIZES = {
-  FEATURED_ICON: 'lg',
-  ICON_PIXEL: '24',
-  CLOSE_BUTTON: '20'
-};
-// 사이즈 유틸리티 함수들
-const getSizes = exports.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/cjs/assets/scripts/notification/const/types.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MESSAGE_CLOSE_ICON_COLORS = void 0;
-// Message Notification 닫기 버튼 아이콘 색상 맵
-const 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

@@ -1,92 +0,0 @@
-"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

@@ -1,97 +0,0 @@
-"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) {
-  const wrapper = document.createElement('div');
-  wrapper.className = buildClassName(baseClass, color, className);
-  wrapper.setAttribute('role', 'alert');
-  return wrapper;
-}
-function buildClassName(baseClass, color, className) {
-  const classes = [baseClass, `${baseClass}--${color}`];
-  if (className) {
-    classes.push(className);
-  }
-  return classes.join(' ');
-}
-function renderSupportingText(supportingText, className, supportTextLink) {
-  if (!supportingText) return '';
-  if (supportTextLink) {
-    return `<a href="${supportTextLink}" class="ncua-full-width-notification__link"><span class="${className}">${supportingText}</span></a>`;
-  }
-  return `<span class="${className}">${supportingText}</span>`;
-}
-function renderActions(actions, wrapperClass) {
-  // 액션이 없으면 빈 문자열 반환
-  if (!actions || actions.length === 0) {
-    return '';
-  }
-  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="${wrapperClass}">${buttonsHtml}</div>`;
-}
-// 공통 이벤트 처리
-function bindNotificationEvents(element, actions, onClose, onRemove) {
-  element.addEventListener('click', event => {
-    const target = event.target;
-    // 닫기 버튼 클릭 처리
-    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;
-    }
-    // 액션 버튼 클릭 처리
-    const actionButton = target.closest('.ncua-btn[data-action]');
-    if (actionButton && actions) {
-      const actionData = actionButton.getAttribute('data-action');
-      if (actionData) {
-        let matchedAction = null;
-        for (const action of actions) {
-          const expectedDataAction = `${action.label}-${action.hierarchy || 'link'}`;
-          if (actionData === expectedDataAction) {
-            matchedAction = action;
-            break;
-          }
-        }
-        if (matchedAction?.onClick) {
-          matchedAction.onClick();
-        }
-      }
-    }
-  });
-}
-// 자동 닫기 설정
-function setupAutoClose(autoClose, onClose, onRemove) {
-  if (autoClose > 0) {
-    return window.setTimeout(() => {
-      onClose?.();
-      onRemove?.();
-    }, autoClose);
-  }
-  return undefined;
-}
-// Mobile detection utility
-const isMobile = () => {
-  return window.innerWidth <= parseInt(_breakpoint.BREAKPOINT.mobile);
-};
-exports.isMobile = isMobile;

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

@@ -1,271 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBar = void 0;
-/**
- * ProgressBar 클래스
- * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
- */
-/**
- * 값을 0-100 범위로 제한
- */
-function clampValue(value) {
-  return Math.min(Math.max(0, value), 100);
-}
-/**
- * 색상 이름을 fill 색상 클래스명으로 변환
- */
-function getFillColorClass(color) {
-  if (!color) return '';
-  const normalizedColor = color.toLowerCase().trim();
-  return `ncua-progress-bar__fill--color-${normalizedColor}`;
-}
-/**
- * 색상 이름을 label 색상 클래스명으로 변환
- */
-function getLabelColorClass(color) {
-  if (!color) return '';
-  const normalizedColor = color.toLowerCase().trim();
-  return `ncua-progress-bar__label--color-${normalizedColor}`;
-}
-/**
- * ProgressBar 클래스
- */
-class ProgressBar {
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    this.element = null;
-    this.options = {
-      showZeroLabel: false,
-      valueToPercent: true,
-      ...options
-    };
-  }
-  /**
-   * segments 처리 로직
-   */
-  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)
-      const shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
-      let segmentsToProcess = segments;
-      // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
-      if (shouldApplyValueToPercent) {
-        // 원본 값들의 합계 계산
-        const originalTotal = segmentsToProcess.reduce((sum, seg) => sum + seg.value, 0);
-        if (originalTotal > 0) {
-          // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
-          segmentsToProcess = segmentsToProcess.map(segment => ({
-            value: segment.value / originalTotal * 100,
-            color: segment.color
-          }));
-        }
-      }
-      // 각 값 제한 (0-100 범위)
-      const limitedSegments = segmentsToProcess.map(segment => ({
-        value: clampValue(segment.value),
-        color: segment.color
-      }));
-      // 전체 합계 계산
-      const actualTotal = limitedSegments.reduce((sum, seg) => sum + seg.value, 0);
-      const total = Math.min(actualTotal, 100);
-      // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
-      const processed = limitedSegments.map(segment => ({
-        ...segment,
-        width: actualTotal > 0 ? segment.value / actualTotal * total : 0
-      }));
-      // segment의 개수가 2이상일때는 bottom 라벨로 고정
-      const effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
-      // floating label 스타일
-      const progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
-        '--progress-value': `${total}%`
-      } : undefined;
-      return {
-        totalValue: total,
-        displayValue: `${total.toFixed(0)}%`,
-        processedSegments: processed,
-        effectiveLabel,
-        progressValueStyle
-      };
-    }
-    // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
-    if (this.options.value !== undefined) {
-      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: `${clamped.toFixed(0)}%`,
-        processedSegments: [],
-        effectiveLabel,
-        progressValueStyle
-      };
-    }
-    return {
-      totalValue: 0,
-      displayValue: '0%',
-      processedSegments: [],
-      effectiveLabel: label,
-      progressValueStyle: undefined
-    };
-  }
-  /**
-   * 단일 라벨 HTML 생성
-   */
-  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-${labelType}">${displayValue}</span>`;
-  }
-  /**
-   * segments 라벨 HTML 생성
-   */
-  renderSegmentLabels(segments, segmentCount) {
-    if (segmentCount < 2) return '';
-    const labels = [];
-    segments.forEach((segment, index) => {
-      // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
-      if (segment.value === 0 && !this.options.showZeroLabel) {
-        return;
-      }
-      let leftPosition = 0;
-      for (let i = 0; i < index; i++) {
-        leftPosition += segments[i].width;
-      }
-      // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
-      // 그 외에는 중앙에 정렬
-      const isZero = segment.value === 0;
-      // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
-      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">${labels.join('')}</div>` : '';
-  }
-  /**
-   * segment bar HTML 생성
-   */
-  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 문자열 생성
-   */
-  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';
-    // 스타일 문자열 생성
-    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)
-    const isSingleBar = segmentCount < 2; // segment가 0개 또는 1개일 때
-    if (isSingleBar) {
-      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를 위한 클래스 추가
-      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>`;
-    }
-    // 일반 케이스
-    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 요소 생성
-   */
-  toElement() {
-    const div = document.createElement('div');
-    div.innerHTML = this.toHTML();
-    this.element = div.firstElementChild;
-    return this.element;
-  }
-  /**
-   * 요소 반환
-   */
-  getElement() {
-    return this.toElement();
-  }
-  /**
-   * 옵션 업데이트
-   */
-  updateOptions(newOptions) {
-    this.options = {
-      ...this.options,
-      ...newOptions
-    };
-    if (this.element) {
-      const newElement = this.toElement();
-      if (this.element.parentNode) {
-        this.element.parentNode.replaceChild(newElement, this.element);
-      }
-      this.element = newElement;
-    }
-  }
-  /**
-   * Static factory method
-   */
-  static create(options) {
-    return new ProgressBar(options);
-  }
-  /**
-   * Static method: HTML 문자열 생성
-   */
-  static toHTML(options) {
-    return new ProgressBar(options).toHTML();
-  }
-}
-exports.ProgressBar = ProgressBar;

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

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