@ncds/ui-admin 1.8.3 → 1.8.5

package/dist/temp/assets/scripts/featuredIcon.js

@@ -0,0 +1,79 @@
+// React 컴포넌트와 동일하게 구성
+const iconSizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+};
+export class FeaturedIcon {
+    constructor(options) {
+        this.options = {
+            theme: 'light-circle',
+            color: 'neutral',
+            size: 'sm',
+            className: '',
+            ...options,
+        };
+        this.element = this.createElement();
+    }
+    // svgString ( ICON SVG ) 을 받아서 요소를 생성
+    createElement() {
+        const { theme, color, size, className, svgString } = this.options;
+        // React FeaturedIcon과 동일한 클래스 구조
+        const classes = [
+            'ncua-featured-icon',
+            `ncua-featured-icon--${theme}`,
+            `ncua-featured-icon--${color}`,
+            `ncua-featured-icon--${size}`,
+        ];
+        if (className) {
+            classes.push(className);
+        }
+        const div = document.createElement('div');
+        div.className = classes.join(' ');
+        // outline-circle 테마일 때 추가 요소들 (React 컴포넌트와 동일)
+        if (theme === 'outline-circle') {
+            const innerOutline = document.createElement('div');
+            innerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--inner';
+            div.appendChild(innerOutline);
+            const outerOutline = document.createElement('div');
+            outerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--outer';
+            div.appendChild(outerOutline);
+        }
+        // SVG 아이콘 추가
+        const iconSize = iconSizeMap[size];
+        const svgWithSize = this.addSizeToSvg(svgString, iconSize);
+        div.innerHTML += svgWithSize;
+        return div;
+    }
+    addSizeToSvg(svgString, size) {
+        return svgString.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+    }
+    // Public methods
+    getElement() {
+        return this.element;
+    }
+    updateColor(color) {
+        this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, `ncua-featured-icon--${color}`);
+        this.options.color = color;
+    }
+    updateSize(size) {
+        const iconSize = iconSizeMap[size];
+        this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, `ncua-featured-icon--${size}`);
+        const svgIcon = this.element.querySelector('svg');
+        if (svgIcon) {
+            svgIcon.setAttribute('width', String(iconSize));
+            svgIcon.setAttribute('height', String(iconSize));
+        }
+        this.options.size = size;
+    }
+    destroy() {
+        if (this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    }
+    // Static factory method
+    static create(options) {
+        return new FeaturedIcon(options);
+    }
+}

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

@@ -0,0 +1,24 @@
+import type { BaseNotificationOptions } from './const';
+export interface FloatingNotificationOptions extends BaseNotificationOptions {
+    type?: 'floating';
+}
+export declare class FloatingNotification {
+    private element;
+    private options;
+    private autoCloseTimer?;
+    private featuredIcon?;
+    private mobileCleanup?;
+    constructor(options: FloatingNotificationOptions);
+    private createElement;
+    private buildTemplate;
+    private renderCloseButton;
+    private setupMobileListener;
+    private updateMobileStyles;
+    private bindEvents;
+    private setupAutoClose;
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    static create(options: FloatingNotificationOptions): FloatingNotification;
+}

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

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

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,111 @@
+import { sanitizeHtml } from '../utils/sanitize';
+import { CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES, SVG_ICONS } from './const';
+import { bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose, } from './utils';
+export class FullWidthNotification {
+    constructor(options) {
+        this.options = {
+            color: 'neutral',
+            className: '',
+            actions: [],
+            autoClose: 0,
+            supportingText: undefined,
+            ...options,
+        };
+        this.element = this.createElement();
+        this.bindEvents();
+        this.setupAutoClose();
+    }
+    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 = sanitizeHtml(this.buildTemplate({
+            iconHtml,
+            title,
+            supportingText,
+            actions,
+            onClose,
+            supportTextLink,
+            onHidePermanently,
+        }));
+        return wrapper;
+    }
+    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 `
+      <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 `
+      <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) {
+            const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+            if (hidePermanentlyButton) {
+                hidePermanentlyButton.addEventListener('click', () => {
+                    this.options.onHidePermanently?.();
+                    this.remove();
+                });
+            }
+        }
+    }
+    setupAutoClose() {
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+    }
+    // Public methods
+    getElement() {
+        return this.element;
+    }
+    appendTo(parent) {
+        parent.appendChild(this.element);
+    }
+    remove() {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+        if (this.element?.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    }
+    destroy() {
+        this.remove();
+    }
+    // Static factory methods
+    static create(options) {
+        return new FullWidthNotification(options);
+    }
+}

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,140 @@
+import { FeaturedIcon } from '../featuredIcon';
+import { sanitizeHtml } from '../utils/sanitize';
+import { CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES, SVG_ICONS } from './const';
+import { bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose, } from './utils';
+export class MessageNotification {
+    constructor(options) {
+        this.options = {
+            color: 'neutral',
+            className: '',
+            actions: [],
+            autoClose: 0,
+            supportingText: undefined,
+            ...options,
+        };
+        this.element = this.createElement();
+        this.bindEvents();
+        this.setupAutoClose();
+    }
+    createElement() {
+        const { title, supportingText, color, className, actions, onClose, onHidePermanently } = this.options;
+        // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+        let actualColor = color;
+        if (color === 'info') {
+            actualColor = 'neutral';
+        }
+        const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
+        const iconFunction = FLOATING_ICON_MAP[actualColor];
+        // FeaturedIcon 생성
+        let featuredIconElement = null;
+        if (iconFunction) {
+            const 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 = sanitizeHtml(this.buildTemplate({
+            title,
+            supportingText,
+            actions,
+            onClose,
+            onHidePermanently,
+        }));
+        // FeaturedIcon을 content-wrapper에 추가
+        if (featuredIconElement) {
+            const contentWrapper = wrapper.querySelector(`.${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
+            if (contentWrapper) {
+                contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
+            }
+        }
+        return wrapper;
+    }
+    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 `
+      <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 `
+      <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) {
+            const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+            if (hidePermanentlyButton) {
+                hidePermanentlyButton.addEventListener('click', () => {
+                    this.options.onHidePermanently?.();
+                    this.remove();
+                });
+            }
+        }
+    }
+    setupAutoClose() {
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+    }
+    // Public methods
+    getElement() {
+        return this.element;
+    }
+    appendTo(parent) {
+        parent.appendChild(this.element);
+    }
+    remove() {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+        if (this.element?.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    }
+    destroy() {
+        // FeaturedIcon 정리
+        if (this.featuredIcon) {
+            this.featuredIcon.destroy();
+            this.featuredIcon = undefined;
+        }
+        this.remove();
+    }
+    // Static factory methods
+    static create(options) {
+        return new MessageNotification(options);
+    }
+}

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

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