@ncds/ui-admin 1.6.4 → 1.7.0

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

@@ -0,0 +1,154 @@
+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 { CLASS_NAMES, FLOATING_ICON_MAP, getSizes } from './const';
+import { isMobile } from './utils';
+import { MEDIA_QUERY } from '../../../src/constant/breakpoint';
+import { FeaturedIcon } from '../featuredIcon';
+import { ButtonCloseX } from '../shared/ButtonCloseX';
+import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose, } from './utils';
+var FloatingNotification = /** @class */ (function () {
+    function FloatingNotification(options) {
+        this.options = __assign({ color: 'neutral', className: '', actions: [], autoClose: 0, supportingText: undefined }, options);
+        this.element = this.createElement();
+        this.bindEvents();
+        this.setupAutoClose();
+        this.setupMobileListener();
+    }
+    FloatingNotification.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;
+        // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
+        var actualColor = color;
+        if (color === 'info') {
+            console.warn('Floating notification does not support "info" color. Using "neutral" instead.');
+            actualColor = 'neutral';
+        }
+        var wrapper = createWrapperElement(CLASS_NAMES.FLOATING.BASE, actualColor, className);
+        var iconFunction = FLOATING_ICON_MAP[actualColor];
+        var mobile = isMobile();
+        // FeaturedIcon 생성
+        var featuredIconElement = null;
+        if (iconFunction) {
+            var size = getSizes.featuredIcon(mobile);
+            var iconSize = getSizes.iconPixel(mobile);
+            var iconSvg = iconFunction(iconSize);
+            this.featuredIcon = FeaturedIcon.create({
+                svgString: iconSvg,
+                theme: 'dark-circle',
+                color: actualColor,
+                size: size,
+            });
+            featuredIconElement = this.featuredIcon.getElement();
+        }
+        wrapper.innerHTML = this.buildTemplate({
+            title: title,
+            supportingText: supportingText,
+            actions: actions,
+            onClose: onClose,
+            isMobile: mobile,
+        });
+        // FeaturedIcon을 container에 추가
+        if (featuredIconElement) {
+            var container = wrapper.querySelector(".".concat(CLASS_NAMES.FLOATING.CONTAINER));
+            if (container) {
+                container.insertBefore(featuredIconElement, container.firstChild);
+            }
+        }
+        return wrapper;
+    };
+    FloatingNotification.prototype.buildTemplate = function (params) {
+        var title = params.title, supportingText = params.supportingText, actions = params.actions, onClose = params.onClose, isMobile = params.isMobile;
+        return "\n      <div class=\"".concat(CLASS_NAMES.FLOATING.CONTENT, "\">\n        <div class=\"").concat(CLASS_NAMES.FLOATING.CONTAINER, "\">\n          <div class=\"").concat(CLASS_NAMES.FLOATING.TEXT_CONTAINER, "\">\n            <div class=\"").concat(CLASS_NAMES.FLOATING.TITLE_WRAPPER, "\">\n              <span class=\"").concat(CLASS_NAMES.FLOATING.TITLE, "\">").concat(title, "</span>\n            </div>\n            ").concat(renderSupportingText(supportingText, CLASS_NAMES.FLOATING.SUPPORTING_TEXT), "\n            ").concat(actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FLOATING.ACTIONS) : '', "\n          </div>\n        </div>\n      </div>\n      ").concat(this.renderCloseButton(onClose, isMobile), "\n    ");
+    };
+    FloatingNotification.prototype.renderCloseButton = function (onClose, isMobile) {
+        if (isMobile === void 0) { isMobile = false; }
+        if (!onClose)
+            return '';
+        var size = getSizes.closeButton(isMobile);
+        return ButtonCloseX(size, 'light', CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
+    };
+    FloatingNotification.prototype.setupMobileListener = function () {
+        var _this = this;
+        var mediaQuery = window.matchMedia(MEDIA_QUERY.mobile);
+        var handleChange = function (e) {
+            _this.updateMobileStyles(e.matches);
+            if (e.matches && _this.options.onClose) {
+                _this.options.onClose();
+                _this.remove();
+            }
+        };
+        handleChange({ matches: mediaQuery.matches });
+        mediaQuery.addEventListener('change', handleChange);
+        this.mobileCleanup = function () {
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    };
+    FloatingNotification.prototype.updateMobileStyles = function (mobile) {
+        if (this.featuredIcon) {
+            var newSize = getSizes.featuredIcon(mobile);
+            this.featuredIcon.updateSize(newSize);
+        }
+        var closeButton = this.element.querySelector('.ncua-button-close-x');
+        if (closeButton) {
+            var newSize = getSizes.closeButton(mobile);
+            var newSvgSize = getSizes.closeButtonSvg(newSize);
+            closeButton.className = closeButton.className.replace(/ncua-button-close-x--(xs|sm)/, "ncua-button-close-x--".concat(newSize));
+            var svg = closeButton.querySelector('svg');
+            if (svg) {
+                svg.setAttribute('width', newSvgSize.toString());
+                svg.setAttribute('height', newSvgSize.toString());
+            }
+        }
+    };
+    FloatingNotification.prototype.bindEvents = function () {
+        var _this = this;
+        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () { return _this.remove(); });
+    };
+    FloatingNotification.prototype.setupAutoClose = function () {
+        var _this = this;
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () { return _this.remove(); });
+    };
+    // Public methods
+    FloatingNotification.prototype.getElement = function () {
+        return this.element;
+    };
+    FloatingNotification.prototype.appendTo = function (parent) {
+        parent.appendChild(this.element);
+    };
+    FloatingNotification.prototype.remove = function () {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    };
+    FloatingNotification.prototype.destroy = function () {
+        // FeaturedIcon 정리
+        if (this.featuredIcon) {
+            this.featuredIcon.destroy();
+            this.featuredIcon = undefined;
+        }
+        // 모바일 리스너 정리
+        if (this.mobileCleanup) {
+            this.mobileCleanup();
+            this.mobileCleanup = undefined;
+        }
+        this.remove();
+    };
+    // Static factory methods
+    FloatingNotification.create = function (options) {
+        return new FloatingNotification(options);
+    };
+    return FloatingNotification;
+}());
+export { FloatingNotification };

package/dist/temp/assets/scripts/notification/FullWidthNotification.d.ts

@@ -0,0 +1,21 @@
+import type { BaseNotificationOptions } from './const';
+export interface FullWidthNotificationOptions extends BaseNotificationOptions {
+    type?: 'full-width';
+}
+export declare class FullWidthNotification {
+    private element;
+    private options;
+    private autoCloseTimer?;
+    constructor(options: FullWidthNotificationOptions);
+    private createElement;
+    private buildTemplate;
+    private renderHidePermanentlyButton;
+    private renderCloseButton;
+    private bindEvents;
+    private setupAutoClose;
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    static create(options: FullWidthNotificationOptions): FullWidthNotification;
+}

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

@@ -0,0 +1,94 @@
+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);
+        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);
+        wrapper.innerHTML = this.buildTemplate({
+            iconHtml: iconHtml,
+            title: title,
+            supportingText: supportingText,
+            actions: actions,
+            onClose: onClose,
+            supportTextLink: supportTextLink,
+            onHidePermanently: 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) {
+        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) {
+        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(); });
+        // 다시보지 않기 버튼 이벤트 바인딩
+        if (this.options.onHidePermanently) {
+            var 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();
+                });
+            }
+        }
+    };
+    FullWidthNotification.prototype.setupAutoClose = function () {
+        var _this = this;
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () { return _this.remove(); });
+    };
+    // Public methods
+    FullWidthNotification.prototype.getElement = function () {
+        return this.element;
+    };
+    FullWidthNotification.prototype.appendTo = function (parent) {
+        parent.appendChild(this.element);
+    };
+    FullWidthNotification.prototype.remove = function () {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    };
+    FullWidthNotification.prototype.destroy = function () {
+        this.remove();
+    };
+    // Static factory methods
+    FullWidthNotification.create = function (options) {
+        return new FullWidthNotification(options);
+    };
+    return FullWidthNotification;
+}());
+export { FullWidthNotification };

package/dist/temp/assets/scripts/notification/MessageNotification.d.ts

@@ -0,0 +1,22 @@
+import type { BaseNotificationOptions } from './const';
+export interface MessageNotificationOptions extends BaseNotificationOptions {
+    type?: 'message';
+}
+export declare class MessageNotification {
+    private element;
+    private options;
+    private autoCloseTimer?;
+    private featuredIcon?;
+    constructor(options: MessageNotificationOptions);
+    private createElement;
+    private buildTemplate;
+    private renderHidePermanentlyButton;
+    private renderCloseButton;
+    private bindEvents;
+    private setupAutoClose;
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    static create(options: MessageNotificationOptions): MessageNotification;
+}

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

@@ -0,0 +1,123 @@
+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);
+        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;
+        // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+        var 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];
+        // FeaturedIcon 생성
+        var featuredIconElement = null;
+        if (iconFunction) {
+            var iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
+            this.featuredIcon = FeaturedIcon.create({
+                svgString: iconSvg,
+                theme: 'light-circle',
+                color: actualColor,
+                size: MESSAGE_SIZES.FEATURED_ICON,
+            });
+            featuredIconElement = this.featuredIcon.getElement();
+        }
+        wrapper.innerHTML = this.buildTemplate({
+            title: title,
+            supportingText: supportingText,
+            actions: actions,
+            onClose: onClose,
+            onHidePermanently: onHidePermanently,
+        });
+        // FeaturedIcon을 content-wrapper에 추가
+        if (featuredIconElement) {
+            var contentWrapper = wrapper.querySelector(".".concat(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) {
+        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) {
+        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(); });
+        // 다시보지 않기 버튼 이벤트 바인딩
+        if (this.options.onHidePermanently) {
+            var 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();
+                });
+            }
+        }
+    };
+    MessageNotification.prototype.setupAutoClose = function () {
+        var _this = this;
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () { return _this.remove(); });
+    };
+    // Public methods
+    MessageNotification.prototype.getElement = function () {
+        return this.element;
+    };
+    MessageNotification.prototype.appendTo = function (parent) {
+        parent.appendChild(this.element);
+    };
+    MessageNotification.prototype.remove = function () {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    };
+    MessageNotification.prototype.destroy = function () {
+        // FeaturedIcon 정리
+        if (this.featuredIcon) {
+            this.featuredIcon.destroy();
+            this.featuredIcon = undefined;
+        }
+        this.remove();
+    };
+    // Static factory methods
+    MessageNotification.create = function (options) {
+        return new MessageNotification(options);
+    };
+    return MessageNotification;
+}());
+export { MessageNotification };

package/dist/temp/assets/scripts/notification/Notification.d.ts

@@ -0,0 +1,21 @@
+import type { NotificationColor, BaseNotificationOptions } from './const';
+export interface NotificationOptions extends BaseNotificationOptions {
+    type?: 'full-width' | 'floating' | 'message';
+}
+export declare class Notification {
+    private instance;
+    constructor(options: NotificationOptions);
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    show(parent?: HTMLElement): void;
+    static create(options: NotificationOptions): Notification;
+    static createWithColor(color: NotificationColor, title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
+    static success(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
+    static error(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
+    static warning(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
+    static info(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
+    static neutral(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
+    static showFullWidth(options: Omit<NotificationOptions, 'type'>): Notification;
+}

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

@@ -0,0 +1,108 @@
+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"]);
+        if (type === 'message') {
+            this.instance = new MessageNotification(baseOptions);
+        }
+        else if (type === 'full-width') {
+            this.instance = new FullWidthNotification(baseOptions);
+        }
+        else {
+            this.instance = new FloatingNotification(baseOptions);
+        }
+    }
+    // 모든 메서드를 instance에 위임
+    Notification.prototype.getElement = function () {
+        return this.instance.getElement();
+    };
+    Notification.prototype.appendTo = function (parent) {
+        return this.instance.appendTo(parent);
+    };
+    Notification.prototype.remove = function () {
+        return this.instance.remove();
+    };
+    Notification.prototype.destroy = function () {
+        return this.instance.destroy();
+    };
+    Notification.prototype.show = function (parent) {
+        if (parent) {
+            this.instance.appendTo(parent);
+        }
+        else {
+            this.instance.appendTo(document.body);
+        }
+    };
+    // Static factory methods
+    Notification.create = function (options) {
+        return new Notification(options);
+    };
+    // Convenience method for creating notifications with specific color
+    Notification.createWithColor = function (color, title, supportingText, options) {
+        var 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));
+    };
+    // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
+    Notification.success = function (title, supportingText, options) {
+        var 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);
+        notification.show();
+        return notification;
+    };
+    Notification.warning = function (title, supportingText, options) {
+        var 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);
+        notification.show();
+        return notification;
+    };
+    Notification.neutral = function (title, supportingText, options) {
+        var 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 };

package/dist/temp/assets/scripts/notification/const/classNames.d.ts

@@ -0,0 +1,43 @@
+export declare const CLASS_NAMES: {
+    readonly FULL_WIDTH: {
+        readonly BASE: "ncua-full-width-notification";
+        readonly CONTAINER: "ncua-full-width-notification__container";
+        readonly CONTENT: "ncua-full-width-notification__content";
+        readonly CONTENT_WRAPPER: "ncua-full-width-notification__content-wrapper";
+        readonly ICON: "ncua-full-width-notification__icon";
+        readonly TEXT_CONTAINER: "ncua-full-width-notification__text-container";
+        readonly TITLE: "ncua-full-width-notification__title";
+        readonly SUPPORTING_TEXT: "ncua-full-width-notification__supporting-text";
+        readonly ACTIONS_CONTAINER: "ncua-full-width-notification__actions-container";
+        readonly ACTIONS: "ncua-full-width-notification__actions";
+        readonly CLOSE_BUTTON: "ncua-full-width-notification__close-button";
+    };
+    readonly FLOATING: {
+        readonly BASE: "ncua-floating-notification";
+        readonly CONTAINER: "ncua-floating-notification__container";
+        readonly CONTENT: "ncua-floating-notification__content";
+        readonly TEXT_CONTAINER: "ncua-floating-notification__text-container";
+        readonly TITLE_WRAPPER: "ncua-floating-notification__title-wrapper";
+        readonly TITLE: "ncua-floating-notification__title";
+        readonly SUPPORTING_TEXT: "ncua-floating-notification__supporting-text";
+        readonly ACTIONS: "ncua-floating-notification__actions";
+        readonly CLOSE_BUTTON: "ncua-floating-notification__close-button";
+    };
+    readonly MESSAGE: {
+        readonly BASE: "ncua-message-notification";
+        readonly CONTAINER: "ncua-message-notification__container";
+        readonly CONTENT: "ncua-message-notification__content";
+        readonly CONTENT_WRAPPER: "ncua-message-notification__content-wrapper";
+        readonly ICON: "ncua-message-notification__icon";
+        readonly TEXT_CONTAINER: "ncua-message-notification__text-container";
+        readonly TITLE: "ncua-message-notification__title";
+        readonly SUPPORTING_TEXT: "ncua-message-notification__supporting-text";
+        readonly ACTIONS_CONTAINER: "ncua-message-notification__actions-container";
+        readonly ACTIONS: "ncua-message-notification__actions";
+        readonly HIDE_LINK: "ncua-message-notification__hide-link";
+        readonly CLOSE_BUTTON: "ncua-message-notification__close-button";
+    };
+    readonly COMMON: {
+        readonly ACTION_BUTTON: "ncua-notification__action-button";
+    };
+};

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

@@ -0,0 +1,44 @@
+// CSS class names
+export var CLASS_NAMES = {
+    FULL_WIDTH: {
+        BASE: 'ncua-full-width-notification',
+        CONTAINER: 'ncua-full-width-notification__container',
+        CONTENT: 'ncua-full-width-notification__content',
+        CONTENT_WRAPPER: 'ncua-full-width-notification__content-wrapper',
+        ICON: 'ncua-full-width-notification__icon',
+        TEXT_CONTAINER: 'ncua-full-width-notification__text-container',
+        TITLE: 'ncua-full-width-notification__title',
+        SUPPORTING_TEXT: 'ncua-full-width-notification__supporting-text',
+        ACTIONS_CONTAINER: 'ncua-full-width-notification__actions-container',
+        ACTIONS: 'ncua-full-width-notification__actions',
+        CLOSE_BUTTON: 'ncua-full-width-notification__close-button',
+    },
+    FLOATING: {
+        BASE: 'ncua-floating-notification',
+        CONTAINER: 'ncua-floating-notification__container',
+        CONTENT: 'ncua-floating-notification__content',
+        TEXT_CONTAINER: 'ncua-floating-notification__text-container',
+        TITLE_WRAPPER: 'ncua-floating-notification__title-wrapper',
+        TITLE: 'ncua-floating-notification__title',
+        SUPPORTING_TEXT: 'ncua-floating-notification__supporting-text',
+        ACTIONS: 'ncua-floating-notification__actions',
+        CLOSE_BUTTON: 'ncua-floating-notification__close-button',
+    },
+    MESSAGE: {
+        BASE: 'ncua-message-notification',
+        CONTAINER: 'ncua-message-notification__container',
+        CONTENT: 'ncua-message-notification__content',
+        CONTENT_WRAPPER: 'ncua-message-notification__content-wrapper',
+        ICON: 'ncua-message-notification__icon',
+        TEXT_CONTAINER: 'ncua-message-notification__text-container',
+        TITLE: 'ncua-message-notification__title',
+        SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
+        ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
+        ACTIONS: 'ncua-message-notification__actions',
+        HIDE_LINK: 'ncua-message-notification__hide-link',
+        CLOSE_BUTTON: 'ncua-message-notification__close-button',
+    },
+    COMMON: {
+        ACTION_BUTTON: 'ncua-notification__action-button',
+    },
+};

package/dist/temp/assets/scripts/notification/const/icons.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationColor } from './types';
+export declare const SVG_ICONS: {
+    readonly 'pin-02': (size: string) => string;
+    readonly 'alert-triangle': (size: string) => string;
+    readonly 'alert-circle': (size: string) => string;
+    readonly 'check-circle': (size: string) => string;
+    readonly 'info-circle': (size: string) => string;
+    readonly 'message-chat-square': (size: string) => string;
+    readonly 'x-close': (size: string) => string;
+};
+export declare const FLOATING_ICON_MAP: Partial<Record<NotificationColor, (size: string) => string>>;
+export declare const FULL_WIDTH_ICON_MAP: {
+    readonly neutral: (size: string) => string;
+    readonly error: (size: string) => string;
+    readonly warning: (size: string) => string;
+    readonly success: (size: string) => string;
+    readonly info: (size: string) => string;
+};
+export declare const ICON_MAP: {
+    readonly neutral: (size: string) => string;
+    readonly error: (size: string) => string;
+    readonly warning: (size: string) => string;
+    readonly success: (size: string) => string;
+    readonly info: (size: string) => string;
+};