@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/assets/scripts/modal/Modal.js

@@ -0,0 +1,100 @@
+import { MODAL_CLASS_NAMES, getModalSizeClassNames } from './const/classNames';
+import { ModalHeader } from './ModalHeader';
+import { ModalContent } from './ModalContent';
+import { ModalActions } from './ModalActions';
+class Modal {
+    constructor(options = {}) {
+        this.isOpen = false;
+        this.handleBackdropClick = (e) => {
+            if (this.options.closeOnBackdropClick && e.target === e.currentTarget) {
+                this.close();
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if (this.isOpen && this.options.closeOnEsc && e.key === 'Escape') {
+                this.close();
+            }
+        };
+        this.options = {
+            size: 'md',
+            closeOnBackdropClick: false,
+            closeOnEsc: true,
+            className: '',
+            onClose: () => { },
+            ...options,
+        };
+        this.createElement();
+    }
+    createElement() {
+        // 백드롭 요소 생성
+        this.element = document.createElement('div');
+        this.element.className = this.getBackdropClasses();
+        this.element.addEventListener('click', this.handleBackdropClick);
+        // 모달 요소 생성
+        this.modalElement = document.createElement('div');
+        this.modalElement.className = this.getModalClasses();
+        this.element.appendChild(this.modalElement);
+    }
+    getBackdropClasses() {
+        return `${MODAL_CLASS_NAMES.backdrop} ${this.options.className}`; // ncua-modal-backdrop + className
+    }
+    getModalClasses() {
+        return `${MODAL_CLASS_NAMES.modal} ${getModalSizeClassNames(this.options.size)}`; // ncua-modal ncua-modal--${size}
+    }
+    open() {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        // zIndex 설정 적용 (값이 있을 때만)
+        if (this.options.zIndex !== undefined) {
+            this.element.style.zIndex = this.options.zIndex.toString();
+        }
+        document.body.appendChild(this.element);
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.body.classList.add(MODAL_CLASS_NAMES.modalOpen);
+    }
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        if (this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.body.classList.remove(MODAL_CLASS_NAMES.modalOpen);
+        if (this.options.onClose) {
+            this.options.onClose();
+        }
+    }
+    destroy() {
+        this.close();
+        this.element.removeEventListener('click', this.handleBackdropClick);
+    }
+    setContent(content) {
+        if (typeof content === 'string') {
+            this.modalElement.innerHTML = content;
+        }
+        else {
+            this.modalElement.innerHTML = '';
+            this.modalElement.appendChild(content);
+        }
+    }
+    getElement() {
+        return this.element;
+    }
+    getModalElement() {
+        return this.modalElement;
+    }
+    isModalOpen() {
+        return this.isOpen;
+    }
+    // Static factory method
+    static create(options) {
+        return new Modal(options);
+    }
+}
+// Static properties for HTML usage
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Actions = ModalActions;
+export { Modal };

package/dist/temp/assets/scripts/modal/ModalActions.d.ts

@@ -0,0 +1,18 @@
+import { ModalActionsProps } from './const/types';
+export declare class ModalActions {
+    private wrapperElement;
+    private actionsElement;
+    private options;
+    constructor(content?: string | HTMLElement, options?: ModalActionsProps);
+    private createElement;
+    getElement(): HTMLDivElement;
+    getActionsElement(): HTMLDivElement;
+    getHTML(): string;
+    appendTo(parent: HTMLElement): void;
+    setContent(content: string | HTMLElement | HTMLElement[]): void;
+    addAction(action: string | HTMLElement): void;
+    clear(): void;
+    setCheckboxContent(content: string | HTMLElement): void;
+    addDivider(): HTMLElement;
+    static create(content?: string | HTMLElement, options?: ModalActionsProps): ModalActions;
+}

package/dist/temp/assets/scripts/modal/ModalActions.js

@@ -0,0 +1,117 @@
+import { MODAL_CLASS_NAMES, getModalActionsLayoutClassNames, getModalActionsAlignClassNames } from './const/classNames';
+export class ModalActions {
+    constructor(content, options = {}) {
+        this.options = {
+            layout: 'vertical',
+            showDivider: false,
+            align: 'stretch',
+            fullWidth: false,
+            checkboxContent: options.checkboxContent,
+            ...options,
+        };
+        this.createElement();
+        if (content) {
+            this.setContent(content);
+        }
+    }
+    createElement() {
+        // Wrapper 요소 생성
+        this.wrapperElement = document.createElement('div');
+        const wrapperClasses = [MODAL_CLASS_NAMES.actionsWrapper];
+        if (this.options.layout === 'checkbox') {
+            wrapperClasses.push(MODAL_CLASS_NAMES.actionsWrapperCheckbox);
+        }
+        this.wrapperElement.className = wrapperClasses.join(' ');
+        // Checkbox content (checkbox 레이아웃인 경우)
+        if (this.options.layout === 'checkbox' && this.options.checkboxContent) {
+            const checkboxDiv = document.createElement('div');
+            checkboxDiv.className = MODAL_CLASS_NAMES.actionsCheckbox;
+            const checkboxContentDiv = document.createElement('div');
+            checkboxContentDiv.className = MODAL_CLASS_NAMES.actionsCheckboxContent;
+            if (typeof this.options.checkboxContent === 'string') {
+                checkboxContentDiv.innerHTML = this.options.checkboxContent;
+            }
+            else {
+                checkboxContentDiv.appendChild(this.options.checkboxContent);
+            }
+            checkboxDiv.appendChild(checkboxContentDiv);
+            this.wrapperElement.appendChild(checkboxDiv);
+        }
+        // Actions 요소 생성
+        this.actionsElement = document.createElement('div');
+        const actionsClasses = [
+            MODAL_CLASS_NAMES.actions,
+            getModalActionsLayoutClassNames(this.options.layout),
+            getModalActionsAlignClassNames(this.options.align),
+        ];
+        if (this.options.fullWidth) {
+            actionsClasses.push(`${MODAL_CLASS_NAMES.actions}--full-width`);
+        }
+        this.actionsElement.className = actionsClasses.join(' ');
+        this.wrapperElement.appendChild(this.actionsElement);
+    }
+    getElement() {
+        return this.wrapperElement;
+    }
+    getActionsElement() {
+        return this.actionsElement;
+    }
+    getHTML() {
+        return this.wrapperElement.outerHTML;
+    }
+    appendTo(parent) {
+        parent.appendChild(this.wrapperElement);
+    }
+    setContent(content) {
+        this.actionsElement.innerHTML = '';
+        if (typeof content === 'string') {
+            this.actionsElement.innerHTML = content;
+        }
+        else if (Array.isArray(content)) {
+            // 배열인 경우 모든 요소를 추가
+            content.forEach((element) => {
+                this.actionsElement.appendChild(element);
+            });
+        }
+        else {
+            // 단일 HTMLElement인 경우
+            this.actionsElement.appendChild(content);
+        }
+    }
+    addAction(action) {
+        if (typeof action === 'string') {
+            this.actionsElement.insertAdjacentHTML('beforeend', action);
+        }
+        else {
+            this.actionsElement.appendChild(action);
+        }
+    }
+    clear() {
+        this.actionsElement.innerHTML = '';
+    }
+    setCheckboxContent(content) {
+        if (this.options.layout !== 'checkbox') {
+            console.warn('setCheckboxContent can only be used with checkbox layout');
+            return;
+        }
+        const checkboxContentElement = this.wrapperElement.querySelector(`.${MODAL_CLASS_NAMES.actionsCheckboxContent}`);
+        if (checkboxContentElement) {
+            if (typeof content === 'string') {
+                checkboxContentElement.innerHTML = content;
+            }
+            else {
+                checkboxContentElement.innerHTML = '';
+                checkboxContentElement.appendChild(content);
+            }
+        }
+    }
+    addDivider() {
+        const divider = document.createElement('div');
+        divider.className = MODAL_CLASS_NAMES.actionsDivider;
+        return divider;
+    }
+    // Static factory method
+    static create(content, options) {
+        return new ModalActions(content, options);
+    }
+}

package/dist/temp/assets/scripts/modal/ModalContent.d.ts

@@ -0,0 +1,13 @@
+export declare class ModalContent {
+    private element;
+    constructor(content?: string | HTMLElement);
+    private createElement;
+    getElement(): HTMLDivElement;
+    getHTML(): string;
+    appendTo(parent: HTMLElement): void;
+    setContent(content: string | HTMLElement): void;
+    clear(): void;
+    getText(): string;
+    getInnerHTML(): string;
+    static create(content?: string | HTMLElement): ModalContent;
+}

package/dist/temp/assets/scripts/modal/ModalContent.js

@@ -0,0 +1,39 @@
+import { MODAL_CLASS_NAMES } from './const/classNames';
+import { setElementContent } from './utils/contentUtils';
+export class ModalContent {
+    constructor(content) {
+        this.createElement();
+        if (content) {
+            this.setContent(content);
+        }
+    }
+    createElement() {
+        this.element = document.createElement('div');
+        this.element.className = MODAL_CLASS_NAMES.content;
+    }
+    getElement() {
+        return this.element;
+    }
+    getHTML() {
+        return this.element.outerHTML;
+    }
+    appendTo(parent) {
+        parent.appendChild(this.element);
+    }
+    setContent(content) {
+        setElementContent(this.element, content);
+    }
+    clear() {
+        this.element.innerHTML = '';
+    }
+    getText() {
+        return this.element.textContent || '';
+    }
+    getInnerHTML() {
+        return this.element.innerHTML;
+    }
+    // Static factory method
+    static create(content) {
+        return new ModalContent(content);
+    }
+}

package/dist/temp/assets/scripts/modal/ModalHeader.d.ts

@@ -0,0 +1,15 @@
+import { ModalHeaderProps } from './const/types';
+export declare class ModalHeader {
+    private element;
+    private options;
+    constructor(options?: ModalHeaderProps);
+    private createElement;
+    getElement(): HTMLElement;
+    getHTML(): string;
+    appendTo(parent: HTMLElement): void;
+    setTitle(title: string): void;
+    setSubtitle(subtitle: string): void;
+    setCloseHandler(handler: () => void): void;
+    addDivider(): HTMLElement;
+    static create(options?: ModalHeaderProps): ModalHeader;
+}

package/dist/temp/assets/scripts/modal/ModalHeader.js

@@ -0,0 +1,96 @@
+import { ButtonCloseX } from '../shared/ButtonCloseX';
+import { FeaturedIcon } from '../featuredIcon';
+import { MODAL_CLASS_NAMES, getModalHeaderAlignClassNames } from './const/classNames';
+import { setElementContent } from './utils/contentUtils';
+export class ModalHeader {
+    constructor(options = {}) {
+        this.options = {
+            featuredIcon: options.featuredIcon,
+            align: 'left',
+            title: '',
+            subtitle: '',
+            showDivider: false,
+            hideCloseButton: false,
+            ...options,
+        };
+        this.createElement();
+    }
+    createElement() {
+        const headerClasses = [MODAL_CLASS_NAMES.header, getModalHeaderAlignClassNames(this.options.align)];
+        // Header 요소 생성
+        this.element = document.createElement('header');
+        this.element.className = headerClasses.join(' ');
+        // Featured Icon
+        if (this.options.featuredIcon) {
+            const featuredIcon = new FeaturedIcon({
+                svgString: this.options.featuredIcon.svgString,
+                theme: this.options.featuredIcon.theme,
+                color: this.options.featuredIcon.color,
+                size: 'sm',
+            });
+            this.element.appendChild(featuredIcon.getElement());
+        }
+        // Title and subtitle
+        if (this.options.title || this.options.subtitle) {
+            const titleDiv = document.createElement('div');
+            titleDiv.className = MODAL_CLASS_NAMES.title;
+            if (this.options.title) {
+                const titleText = document.createElement('div');
+                titleText.className = MODAL_CLASS_NAMES.titleText;
+                setElementContent(titleText, this.options.title);
+                titleDiv.appendChild(titleText);
+            }
+            if (this.options.subtitle) {
+                const subtitleText = document.createElement('div');
+                subtitleText.className = MODAL_CLASS_NAMES.titleSubtitle;
+                setElementContent(subtitleText, this.options.subtitle);
+                titleDiv.appendChild(subtitleText);
+            }
+            this.element.appendChild(titleDiv);
+        }
+        // Close button
+        if (!this.options.hideCloseButton) {
+            const closeButtonContainer = document.createElement('div');
+            closeButtonContainer.innerHTML = ButtonCloseX('sm', 'light', MODAL_CLASS_NAMES.closeButton, '닫기');
+            this.element.appendChild(closeButtonContainer.firstElementChild);
+        }
+    }
+    getElement() {
+        return this.element;
+    }
+    getHTML() {
+        return this.element.outerHTML;
+    }
+    appendTo(parent) {
+        parent.appendChild(this.element);
+    }
+    setTitle(title) {
+        this.options.title = title;
+        const titleElement = this.element.querySelector(`.${MODAL_CLASS_NAMES.titleText}`);
+        if (titleElement) {
+            setElementContent(titleElement, title);
+        }
+    }
+    setSubtitle(subtitle) {
+        this.options.subtitle = subtitle;
+        const subtitleElement = this.element.querySelector(`.${MODAL_CLASS_NAMES.titleSubtitle}`);
+        if (subtitleElement) {
+            setElementContent(subtitleElement, subtitle);
+        }
+    }
+    setCloseHandler(handler) {
+        const closeButton = this.element.querySelector(`.${MODAL_CLASS_NAMES.closeButton}`);
+        if (closeButton) {
+            closeButton.addEventListener('click', handler);
+        }
+    }
+    addDivider() {
+        const divider = document.createElement('div');
+        divider.className = MODAL_CLASS_NAMES.headerDivider;
+        return divider;
+    }
+    // Static factory method
+    static create(options) {
+        return new ModalHeader(options);
+    }
+}

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

@@ -0,0 +1,22 @@
+export declare const MODAL_CLASS_NAMES: {
+    backdrop: string;
+    modal: string;
+    modalOpen: string;
+    header: string;
+    title: string;
+    titleText: string;
+    titleSubtitle: string;
+    closeButton: string;
+    headerDivider: string;
+    content: string;
+    actionsWrapper: string;
+    actionsWrapperCheckbox: string;
+    actions: string;
+    actionsDivider: string;
+    actionsCheckbox: string;
+    actionsCheckboxContent: string;
+};
+export declare const getModalSizeClassNames: (size: string) => string;
+export declare const getModalHeaderAlignClassNames: (align: string) => string;
+export declare const getModalActionsLayoutClassNames: (layout: string) => string;
+export declare const getModalActionsAlignClassNames: (align: string) => string;

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

@@ -0,0 +1,23 @@
+// Modal 관련 CSS 클래스명 상수
+export const MODAL_CLASS_NAMES = {
+    backdrop: 'ncua-modal-backdrop',
+    modal: 'ncua-modal',
+    modalOpen: 'ncua-modal-open',
+    header: 'ncua-modal__header',
+    title: 'ncua-modal__title',
+    titleText: 'ncua-modal__title-text',
+    titleSubtitle: 'ncua-modal__title-subtitle',
+    closeButton: 'ncua-modal__close-button',
+    headerDivider: 'ncua-modal__header-divider',
+    content: 'ncua-modal__content',
+    actionsWrapper: 'ncua-modal__actions-wrapper',
+    actionsWrapperCheckbox: 'ncua-modal__actions-wrapper--checkbox',
+    actions: 'ncua-modal__actions',
+    actionsDivider: 'ncua-modal__actions-divider',
+    actionsCheckbox: 'ncua-modal__actions-checkbox',
+    actionsCheckboxContent: 'ncua-modal__actions-checkbox-content',
+};
+export const getModalSizeClassNames = (size) => `ncua-modal--${size}`;
+export const getModalHeaderAlignClassNames = (align) => `ncua-modal__header--${align}`;
+export const getModalActionsLayoutClassNames = (layout) => `ncua-modal__actions--${layout}`;
+export const getModalActionsAlignClassNames = (align) => `ncua-modal__actions--${align}`;

package/dist/temp/assets/scripts/modal/const/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './classNames';

package/dist/temp/assets/scripts/modal/const/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './classNames';

package/dist/temp/assets/scripts/modal/const/types.d.ts

@@ -0,0 +1,61 @@
+import { ModalSize, ModalHeaderAlign, ModalActionsLayout } from '../../../../src/components/modal/Modal';
+import { FeaturedIconOptions } from '../../featuredIcon';
+export type { ModalSize, ModalHeaderAlign, ModalActionsAlign, ModalActionsLayout, ModalProps as ReactModalProps, ModalHeaderProps as ReactModalHeaderProps, ModalContentProps as ReactModalContentProps, ModalActionsProps as ReactModalActionsProps, } from '../../../../src/components/modal/Modal';
+export type { FeaturedIconOptions } from '../../featuredIcon';
+export interface ModalProps {
+    isOpen?: boolean;
+    size?: ModalSize;
+    closeOnBackdropClick?: boolean;
+    closeOnEsc?: boolean;
+    className?: string;
+    zIndex?: number;
+    onClose?: () => void;
+}
+export interface RequiredModalProps extends ModalProps {
+    size: ModalSize;
+    closeOnBackdropClick: boolean;
+    closeOnEsc: boolean;
+    className: string;
+    onClose: () => void;
+}
+export interface BaseModalOptions extends ModalProps {
+}
+export interface ModalHeaderProps {
+    children?: string | HTMLElement;
+    onClose?: () => void;
+    featuredIcon?: FeaturedIconOptions;
+    align?: ModalHeaderAlign;
+    title?: string;
+    subtitle?: string;
+    showDivider?: boolean;
+    hideCloseButton?: boolean;
+}
+export interface ModalContentProps {
+    children: string | HTMLElement;
+}
+export interface RequiredModalHeaderProps extends ModalHeaderProps {
+    children?: string | HTMLElement;
+    onClose?: () => void;
+    featuredIcon?: FeaturedIconOptions;
+    align: ModalHeaderAlign;
+    title: string;
+    subtitle: string;
+    showDivider: boolean;
+    hideCloseButton: boolean;
+}
+export interface ModalActionsProps {
+    children?: string | HTMLElement | HTMLElement[];
+    layout?: ModalActionsLayout;
+    showDivider?: boolean;
+    align?: 'left' | 'center' | 'right' | 'stretch';
+    fullWidth?: boolean;
+    checkboxContent?: string | HTMLElement;
+}
+export interface RequiredModalActionsProps extends ModalActionsProps {
+    children?: string | HTMLElement | HTMLElement[];
+    layout: ModalActionsLayout;
+    showDivider: boolean;
+    align: 'left' | 'center' | 'right' | 'stretch';
+    fullWidth: boolean;
+    checkboxContent: string | HTMLElement | undefined;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/temp/assets/scripts/modal/index.d.ts

@@ -0,0 +1,7 @@
+import { Modal } from './Modal';
+import { ModalHeader } from './ModalHeader';
+import { ModalContent } from './ModalContent';
+import { ModalActions } from './ModalActions';
+export { Modal, ModalHeader, ModalContent, ModalActions };
+export type { ModalProps, ModalHeaderProps, ModalContentProps, ModalActionsProps, ModalSize, ModalHeaderAlign, ModalActionsLayout, FeaturedIconOptions, } from './const/types';
+export * from './const';

package/dist/temp/assets/scripts/modal/index.js

@@ -0,0 +1,15 @@
+import { Modal } from './Modal';
+import { ModalHeader } from './ModalHeader';
+import { ModalContent } from './ModalContent';
+import { ModalActions } from './ModalActions';
+export { Modal, ModalHeader, ModalContent, ModalActions };
+// 기존 호환성을 위한 타입들도 export
+export * from './const';
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+    window.ncua = window.ncua || {};
+    window.ncua.Modal = Modal;
+    window.ncua.ModalHeader = ModalHeader;
+    window.ncua.ModalContent = ModalContent;
+    window.ncua.ModalActions = ModalActions;
+}

package/dist/temp/assets/scripts/modal/utils/contentUtils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 문자열이 HTML 태그를 포함하는지 확인
+ */
+export declare function isHTMLString(str: string): boolean;
+/**
+ * 요소에 콘텐츠를 안전하게 설정
+ * HTML 구조면 innerHTML, 일반 텍스트면 textContent 사용
+ * HTMLElement인 경우 outerHTML을 사용하여 string으로 변환
+ */
+export declare function setElementContent(element: HTMLElement, content: string | HTMLElement): void;

package/dist/temp/assets/scripts/modal/utils/contentUtils.js

@@ -0,0 +1,29 @@
+/**
+ * 문자열이 HTML 태그를 포함하는지 확인
+ */
+export function isHTMLString(str) {
+    const htmlTagRegex = /<[^>]+>/;
+    return htmlTagRegex.test(str);
+}
+/**
+ * 요소에 콘텐츠를 안전하게 설정
+ * HTML 구조면 innerHTML, 일반 텍스트면 textContent 사용
+ * HTMLElement인 경우 outerHTML을 사용하여 string으로 변환
+ */
+export function setElementContent(element, content) {
+    // HTMLElement인 경우 outerHTML로 변환
+    if (content instanceof HTMLElement) {
+        element.innerHTML = '';
+        element.appendChild(content);
+        return;
+    }
+    // string인 경우
+    if (isHTMLString(content)) {
+        // HTML 구조면 innerHTML 사용 ( script 태그도 허용해야함 )
+        element.innerHTML = content;
+    }
+    else {
+        // 일반 텍스트면 textContent 사용
+        element.textContent = content;
+    }
+}

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;
+}