@ncds/ui-admin 1.7.0 → 1.8.1

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

@@ -1,79 +1,97 @@
-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);
-};
 import { SVG_ICONS, CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES } from './const';
 import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose, } from './utils';
-var FullWidthNotification = /** @class */ (function () {
-    function FullWidthNotification(options) {
-        this.options = __assign({ color: 'neutral', className: '', actions: [], autoClose: 0, supportingText: undefined }, options);
+export class FullWidthNotification {
+    constructor(options) {
+        this.options = {
+            color: 'neutral',
+            className: '',
+            actions: [],
+            autoClose: 0,
+            supportingText: undefined,
+            ...options,
+        };
         this.element = this.createElement();
         this.bindEvents();
         this.setupAutoClose();
     }
-    FullWidthNotification.prototype.createElement = function () {
-        var _a = this.options, title = _a.title, supportingText = _a.supportingText, color = _a.color, className = _a.className, actions = _a.actions, onClose = _a.onClose, supportTextLink = _a.supportTextLink, onHidePermanently = _a.onHidePermanently;
-        var wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
-        var iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
+    createElement() {
+        const { title, supportingText, color, className, actions, onClose, supportTextLink, onHidePermanently } = this.options;
+        const wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
+        const iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
         wrapper.innerHTML = this.buildTemplate({
-            iconHtml: iconHtml,
-            title: title,
-            supportingText: supportingText,
-            actions: actions,
-            onClose: onClose,
-            supportTextLink: supportTextLink,
-            onHidePermanently: onHidePermanently,
+            iconHtml,
+            title,
+            supportingText,
+            actions,
+            onClose,
+            supportTextLink,
+            onHidePermanently,
         });
         return wrapper;
-    };
-    FullWidthNotification.prototype.buildTemplate = function (params) {
-        var iconHtml = params.iconHtml, title = params.title, supportingText = params.supportingText, actions = params.actions, onClose = params.onClose, supportTextLink = params.supportTextLink, onHidePermanently = params.onHidePermanently;
-        return "\n      <div class=\"".concat(CLASS_NAMES.FULL_WIDTH.CONTAINER, "\">\n        <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.CONTENT, "\">\n          <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER, "\">\n            <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.ICON, "\">").concat(iconHtml, "</div>\n            <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, "\">\n              <span class=\"").concat(CLASS_NAMES.FULL_WIDTH.TITLE, "\">").concat(title, "</span>\n              ").concat(renderSupportingText(supportingText, CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink), "\n            </div>\n          </div>\n          <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER, "\">\n            ").concat(actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FULL_WIDTH.ACTIONS) : '', "\n            ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n            ").concat(this.renderCloseButton(onClose), "\n          </div>\n        </div>\n      </div>\n    ");
-    };
-    FullWidthNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
+    }
+    buildTemplate(params) {
+        const { iconHtml, title, supportingText, actions, onClose, supportTextLink, onHidePermanently } = params;
+        return `
+      <div class="${CLASS_NAMES.FULL_WIDTH.CONTAINER}">
+        <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT}">
+          <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER}">
+            <div class="${CLASS_NAMES.FULL_WIDTH.ICON}">${iconHtml}</div>
+            <div class="${CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER}">
+              <span class="${CLASS_NAMES.FULL_WIDTH.TITLE}">${title}</span>
+              ${renderSupportingText(supportingText, CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink)}
+            </div>
+          </div>
+          <div class="${CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderHidePermanentlyButton(onHidePermanently) {
         if (!onHidePermanently)
             return '';
-        return "\n      <button type=\"button\" class=\"ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link\" data-hide-permanently=\"true\">\n        \uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30\n      </button>\n    ";
-    };
-    FullWidthNotification.prototype.renderCloseButton = function (onClose) {
+        return `
+      <button type="button" class="ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link" data-hide-permanently="true">
+        다시보지 않기
+      </button>
+    `;
+    }
+    renderCloseButton(onClose) {
         if (!onClose)
             return '';
-        return "\n      <button type=\"button\" class=\"".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n        ").concat(SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON), "\n      </button>\n    ");
-    };
-    FullWidthNotification.prototype.bindEvents = function () {
-        var _this = this;
-        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () { return _this.remove(); });
+        return `
+      <button type="button" class="${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON)}
+      </button>
+    `;
+    }
+    bindEvents() {
+        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
         // 다시보지 않기 버튼 이벤트 바인딩
         if (this.options.onHidePermanently) {
-            var hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+            const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
             if (hidePermanentlyButton) {
-                hidePermanentlyButton.addEventListener('click', function () {
-                    var _a, _b;
-                    (_b = (_a = _this.options).onHidePermanently) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    _this.remove();
+                hidePermanentlyButton.addEventListener('click', () => {
+                    this.options.onHidePermanently?.();
+                    this.remove();
                 });
             }
         }
-    };
-    FullWidthNotification.prototype.setupAutoClose = function () {
-        var _this = this;
-        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () { return _this.remove(); });
-    };
+    }
+    setupAutoClose() {
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+    }
     // Public methods
-    FullWidthNotification.prototype.getElement = function () {
+    getElement() {
         return this.element;
-    };
-    FullWidthNotification.prototype.appendTo = function (parent) {
+    }
+    appendTo(parent) {
         parent.appendChild(this.element);
-    };
-    FullWidthNotification.prototype.remove = function () {
+    }
+    remove() {
         if (this.autoCloseTimer) {
             clearTimeout(this.autoCloseTimer);
             this.autoCloseTimer = undefined;
@@ -81,14 +99,12 @@ var FullWidthNotification = /** @class */ (function () {
         if (this.element && this.element.parentNode) {
             this.element.parentNode.removeChild(this.element);
         }
-    };
-    FullWidthNotification.prototype.destroy = function () {
+    }
+    destroy() {
         this.remove();
-    };
+    }
     // Static factory methods
-    FullWidthNotification.create = function (options) {
+    static create(options) {
         return new FullWidthNotification(options);
-    };
-    return FullWidthNotification;
-}());
-export { FullWidthNotification };
+    }
+}

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

@@ -1,38 +1,34 @@
-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);
-};
 import { SVG_ICONS, CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES } from './const';
 import { FeaturedIcon } from '../featuredIcon';
 import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose, } from './utils';
-var MessageNotification = /** @class */ (function () {
-    function MessageNotification(options) {
-        this.options = __assign({ color: 'neutral', className: '', actions: [], autoClose: 0, supportingText: undefined }, options);
+export class MessageNotification {
+    constructor(options) {
+        this.options = {
+            color: 'neutral',
+            className: '',
+            actions: [],
+            autoClose: 0,
+            supportingText: undefined,
+            ...options,
+        };
         this.element = this.createElement();
         this.bindEvents();
         this.setupAutoClose();
     }
-    MessageNotification.prototype.createElement = function () {
-        var _a = this.options, title = _a.title, supportingText = _a.supportingText, color = _a.color, className = _a.className, actions = _a.actions, onClose = _a.onClose, onHidePermanently = _a.onHidePermanently;
+    createElement() {
+        const { title, supportingText, color, className, actions, onClose, onHidePermanently } = this.options;
         // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-        var actualColor = color;
+        let actualColor = color;
         if (color === 'info') {
             console.warn('Message notification does not support "info" color. Using "neutral" instead.');
             actualColor = 'neutral';
         }
-        var wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
-        var iconFunction = FLOATING_ICON_MAP[actualColor];
+        const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
+        const iconFunction = FLOATING_ICON_MAP[actualColor];
         // FeaturedIcon 생성
-        var featuredIconElement = null;
+        let featuredIconElement = null;
         if (iconFunction) {
-            var iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
+            const iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
             this.featuredIcon = FeaturedIcon.create({
                 svgString: iconSvg,
                 theme: 'light-circle',
@@ -42,62 +38,85 @@ var MessageNotification = /** @class */ (function () {
             featuredIconElement = this.featuredIcon.getElement();
         }
         wrapper.innerHTML = this.buildTemplate({
-            title: title,
-            supportingText: supportingText,
-            actions: actions,
-            onClose: onClose,
-            onHidePermanently: onHidePermanently,
+            title,
+            supportingText,
+            actions,
+            onClose,
+            onHidePermanently,
         });
         // FeaturedIcon을 content-wrapper에 추가
         if (featuredIconElement) {
-            var contentWrapper = wrapper.querySelector(".".concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER));
+            const contentWrapper = wrapper.querySelector(`.${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
             if (contentWrapper) {
                 contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
             }
         }
         return wrapper;
-    };
-    MessageNotification.prototype.buildTemplate = function (params) {
-        var title = params.title, supportingText = params.supportingText, actions = params.actions, onClose = params.onClose, onHidePermanently = params.onHidePermanently;
-        return "\n      <div class=\"".concat(CLASS_NAMES.MESSAGE.CONTAINER, "\">\n        <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT, "\">\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER, "\">\n            <div class=\"").concat(CLASS_NAMES.MESSAGE.TEXT_CONTAINER, "\">\n              <span class=\"").concat(CLASS_NAMES.MESSAGE.TITLE, "\">").concat(title, "</span>\n              ").concat(renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT), "\n            </div>\n          </div>\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n            ").concat(actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : '', "\n          </div>\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n            ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n            ").concat(this.renderCloseButton(onClose), "\n          </div>\n        </div>\n      </div>\n    ");
-    };
-    MessageNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
+    }
+    buildTemplate(params) {
+        const { title, supportingText, actions, onClose, onHidePermanently } = params;
+        return `
+      <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
+        <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
+          <div class="${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
+            <div class="${CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
+              <span class="${CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
+              ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
+            </div>
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : ''}
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderHidePermanentlyButton(onHidePermanently) {
         if (!onHidePermanently)
             return '';
-        return "\n      <button type=\"button\" class=\"".concat(CLASS_NAMES.COMMON.ACTION_BUTTON, " ").concat(CLASS_NAMES.COMMON.ACTION_BUTTON, "--text ").concat(CLASS_NAMES.MESSAGE.HIDE_LINK, "\" data-hide-permanently=\"true\">\n        \uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30\n      </button>\n    ");
-    };
-    MessageNotification.prototype.renderCloseButton = function (onClose) {
+        return `
+      <button type="button" class="${CLASS_NAMES.COMMON.ACTION_BUTTON} ${CLASS_NAMES.COMMON.ACTION_BUTTON}--text ${CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
+        다시 보지 않기
+      </button>
+    `;
+    }
+    renderCloseButton(onClose) {
         if (!onClose)
             return '';
-        return "\n      <button type=\"button\" class=\"".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n        ").concat(SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', "stroke=\"#2F2F30\""), "\n      </button>\n    ");
-    };
-    MessageNotification.prototype.bindEvents = function () {
-        var _this = this;
-        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () { return _this.remove(); });
+        return `
+      <button type="button" class="${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', `stroke="#2F2F30"`)}
+      </button>
+    `;
+    }
+    bindEvents() {
+        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
         // 다시보지 않기 버튼 이벤트 바인딩
         if (this.options.onHidePermanently) {
-            var hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+            const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
             if (hidePermanentlyButton) {
-                hidePermanentlyButton.addEventListener('click', function () {
-                    var _a, _b;
-                    (_b = (_a = _this.options).onHidePermanently) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    _this.remove();
+                hidePermanentlyButton.addEventListener('click', () => {
+                    this.options.onHidePermanently?.();
+                    this.remove();
                 });
             }
         }
-    };
-    MessageNotification.prototype.setupAutoClose = function () {
-        var _this = this;
-        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () { return _this.remove(); });
-    };
+    }
+    setupAutoClose() {
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+    }
     // Public methods
-    MessageNotification.prototype.getElement = function () {
+    getElement() {
         return this.element;
-    };
-    MessageNotification.prototype.appendTo = function (parent) {
+    }
+    appendTo(parent) {
         parent.appendChild(this.element);
-    };
-    MessageNotification.prototype.remove = function () {
+    }
+    remove() {
         if (this.autoCloseTimer) {
             clearTimeout(this.autoCloseTimer);
             this.autoCloseTimer = undefined;
@@ -105,19 +124,17 @@ var MessageNotification = /** @class */ (function () {
         if (this.element && this.element.parentNode) {
             this.element.parentNode.removeChild(this.element);
         }
-    };
-    MessageNotification.prototype.destroy = function () {
+    }
+    destroy() {
         // FeaturedIcon 정리
         if (this.featuredIcon) {
             this.featuredIcon.destroy();
             this.featuredIcon = undefined;
         }
         this.remove();
-    };
+    }
     // Static factory methods
-    MessageNotification.create = function (options) {
+    static create(options) {
         return new MessageNotification(options);
-    };
-    return MessageNotification;
-}());
-export { MessageNotification };
+    }
+}

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

@@ -1,32 +1,10 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { FullWidthNotification } from './FullWidthNotification';
 import { FloatingNotification } from './FloatingNotification';
 import { MessageNotification } from './MessageNotification';
 // 통합 Notification 클래스
-var Notification = /** @class */ (function () {
-    function Notification(options) {
-        var _a = options.type, type = _a === void 0 ? 'floating' : _a, baseOptions = __rest(options, ["type"]);
+export class Notification {
+    constructor(options) {
+        const { type = 'floating', ...baseOptions } = options;
         if (type === 'message') {
             this.instance = new MessageNotification(baseOptions);
         }
@@ -38,71 +16,79 @@ var Notification = /** @class */ (function () {
         }
     }
     // 모든 메서드를 instance에 위임
-    Notification.prototype.getElement = function () {
+    getElement() {
         return this.instance.getElement();
-    };
-    Notification.prototype.appendTo = function (parent) {
+    }
+    appendTo(parent) {
         return this.instance.appendTo(parent);
-    };
-    Notification.prototype.remove = function () {
+    }
+    remove() {
         return this.instance.remove();
-    };
-    Notification.prototype.destroy = function () {
+    }
+    destroy() {
         return this.instance.destroy();
-    };
-    Notification.prototype.show = function (parent) {
+    }
+    show(parent) {
         if (parent) {
             this.instance.appendTo(parent);
         }
         else {
             this.instance.appendTo(document.body);
         }
-    };
+    }
     // Static factory methods
-    Notification.create = function (options) {
+    static create(options) {
         return new Notification(options);
-    };
+    }
     // Convenience method for creating notifications with specific color
-    Notification.createWithColor = function (color, title, supportingText, options) {
-        var autoCloseMap = {
+    static createWithColor(color, title, supportingText, options) {
+        const autoCloseMap = {
             success: 3000,
             error: 5000,
             warning: 3000,
             info: 3000,
             neutral: 0,
         };
-        return new Notification(__assign({ title: title, supportingText: supportingText, color: color, type: 'floating', autoClose: autoCloseMap[color] }, options));
-    };
+        return new Notification({
+            title,
+            supportingText,
+            color,
+            type: 'floating',
+            autoClose: autoCloseMap[color],
+            ...options,
+        });
+    }
     // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
-    Notification.success = function (title, supportingText, options) {
-        var notification = this.createWithColor('success', title, supportingText, options);
+    static success(title, supportingText, options) {
+        const notification = this.createWithColor('success', title, supportingText, options);
         notification.show();
         return notification;
-    };
-    Notification.error = function (title, supportingText, options) {
-        var notification = this.createWithColor('error', title, supportingText, options);
+    }
+    static error(title, supportingText, options) {
+        const notification = this.createWithColor('error', title, supportingText, options);
         notification.show();
         return notification;
-    };
-    Notification.warning = function (title, supportingText, options) {
-        var notification = this.createWithColor('warning', title, supportingText, options);
+    }
+    static warning(title, supportingText, options) {
+        const notification = this.createWithColor('warning', title, supportingText, options);
         notification.show();
         return notification;
-    };
-    Notification.info = function (title, supportingText, options) {
-        var notification = this.createWithColor('info', title, supportingText, options);
+    }
+    static info(title, supportingText, options) {
+        const notification = this.createWithColor('info', title, supportingText, options);
         notification.show();
         return notification;
-    };
-    Notification.neutral = function (title, supportingText, options) {
-        var notification = this.createWithColor('neutral', title, supportingText, options);
+    }
+    static neutral(title, supportingText, options) {
+        const notification = this.createWithColor('neutral', title, supportingText, options);
         notification.show();
         return notification;
-    };
+    }
     // showFullWidth method for backward compatibility
-    Notification.showFullWidth = function (options) {
-        return new Notification(__assign(__assign({}, options), { type: 'full-width' }));
-    };
-    return Notification;
-}());
-export { Notification };
+    static showFullWidth(options) {
+        return new Notification({
+            ...options,
+            type: 'full-width',
+        });
+    }
+}

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

@@ -1,5 +1,5 @@
 // CSS class names
-export var CLASS_NAMES = {
+export const CLASS_NAMES = {
     FULL_WIDTH: {
         BASE: 'ncua-full-width-notification',
         CONTAINER: 'ncua-full-width-notification__container',

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

@@ -1,39 +1,25 @@
 // SVG 아이콘들 (크기는 동적으로 설정)
-export var SVG_ICONS = {
-    'pin-02': function (size) {
-        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167\"></path></svg>");
-    },
-    'alert-triangle': function (size) {
-        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31\"></path></svg>");
-    },
-    'alert-circle': function (size) {
-        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
-    },
-    'check-circle': function (size) {
-        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
-    },
-    'info-circle': function (size) {
-        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#5720B7\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
-    },
-    'message-chat-square': function (size) {
-        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#0C111D\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z\"></path></svg>");
-    },
-    'x-close': function (size) {
-        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
-    },
+export const SVG_ICONS = {
+    'pin-02': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
+    'alert-triangle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31"></path></svg>`,
+    'alert-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'check-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'info-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#5720B7" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'message-chat-square': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#0C111D" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z"></path></svg>`,
+    'x-close': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12"></path></svg>`,
 };
-export var FLOATING_ICON_MAP = {
+export const FLOATING_ICON_MAP = {
     neutral: SVG_ICONS['pin-02'],
     error: SVG_ICONS['alert-triangle'],
     warning: SVG_ICONS['alert-circle'],
     success: SVG_ICONS['check-circle'],
     // info는 floating에서는 지원하지 않음
 };
-export var FULL_WIDTH_ICON_MAP = {
+export const FULL_WIDTH_ICON_MAP = {
     neutral: SVG_ICONS['message-chat-square'],
     error: SVG_ICONS['alert-triangle'],
     warning: SVG_ICONS['alert-triangle'],
     success: SVG_ICONS['check-circle'],
     info: SVG_ICONS['info-circle'],
 };
-export var ICON_MAP = FULL_WIDTH_ICON_MAP;
+export const ICON_MAP = FULL_WIDTH_ICON_MAP;