@ncds/ui-admin 1.6.4 → 1.7.0

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

@@ -0,0 +1,106 @@
+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 { MODAL_CLASS_NAMES, getModalSizeClassNames } from './const/classNames';
+import { ModalHeader } from './ModalHeader';
+import { ModalContent } from './ModalContent';
+import { ModalActions } from './ModalActions';
+export var Modal = /** @class */ (function () {
+    function Modal(options) {
+        if (options === void 0) { options = {}; }
+        var _this = this;
+        this.isOpen = false;
+        this.handleBackdropClick = function (e) {
+            if (_this.options.closeOnBackdropClick && e.target === e.currentTarget) {
+                _this.close();
+            }
+        };
+        this.handleKeyDown = function (e) {
+            if (_this.isOpen && _this.options.closeOnEsc && e.key === 'Escape') {
+                _this.close();
+            }
+        };
+        this.options = __assign({ size: 'md', closeOnBackdropClick: false, closeOnEsc: true, className: '', onClose: function () { } }, options);
+        this.createElement();
+    }
+    Modal.prototype.createElement = function () {
+        // 백드롭 요소 생성
+        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);
+    };
+    Modal.prototype.getBackdropClasses = function () {
+        return "".concat(MODAL_CLASS_NAMES.backdrop, " ").concat(this.options.className); // ncua-modal-backdrop + className
+    };
+    Modal.prototype.getModalClasses = function () {
+        return "".concat(MODAL_CLASS_NAMES.modal, " ").concat(getModalSizeClassNames(this.options.size)); // ncua-modal ncua-modal--${size}
+    };
+    Modal.prototype.open = function () {
+        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);
+    };
+    Modal.prototype.close = function () {
+        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();
+        }
+    };
+    Modal.prototype.destroy = function () {
+        this.close();
+        this.element.removeEventListener('click', this.handleBackdropClick);
+    };
+    Modal.prototype.setContent = function (content) {
+        if (typeof content === 'string') {
+            this.modalElement.innerHTML = content;
+        }
+        else {
+            this.modalElement.innerHTML = '';
+            this.modalElement.appendChild(content);
+        }
+    };
+    Modal.prototype.getElement = function () {
+        return this.element;
+    };
+    Modal.prototype.getModalElement = function () {
+        return this.modalElement;
+    };
+    Modal.prototype.isModalOpen = function () {
+        return this.isOpen;
+    };
+    // Static factory method
+    Modal.create = function (options) {
+        return new Modal(options);
+    };
+    // Static properties for HTML usage
+    Modal.Header = ModalHeader;
+    Modal.Content = ModalContent;
+    Modal.Actions = ModalActions;
+    return 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,125 @@
+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 { MODAL_CLASS_NAMES, getModalActionsLayoutClassNames, getModalActionsAlignClassNames } from './const/classNames';
+var ModalActions = /** @class */ (function () {
+    function ModalActions(content, options) {
+        if (options === void 0) { options = {}; }
+        this.options = __assign({ layout: 'vertical', showDivider: false, align: 'stretch', fullWidth: false, checkboxContent: options.checkboxContent }, options);
+        this.createElement();
+        if (content) {
+            this.setContent(content);
+        }
+    }
+    ModalActions.prototype.createElement = function () {
+        // Wrapper 요소 생성
+        this.wrapperElement = document.createElement('div');
+        var 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) {
+            var checkboxDiv = document.createElement('div');
+            checkboxDiv.className = MODAL_CLASS_NAMES.actionsCheckbox;
+            var 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');
+        var actionsClasses = [
+            MODAL_CLASS_NAMES.actions,
+            getModalActionsLayoutClassNames(this.options.layout),
+            getModalActionsAlignClassNames(this.options.align),
+        ];
+        if (this.options.fullWidth) {
+            actionsClasses.push("".concat(MODAL_CLASS_NAMES.actions, "--full-width"));
+        }
+        this.actionsElement.className = actionsClasses.join(' ');
+        this.wrapperElement.appendChild(this.actionsElement);
+    };
+    ModalActions.prototype.getElement = function () {
+        return this.wrapperElement;
+    };
+    ModalActions.prototype.getActionsElement = function () {
+        return this.actionsElement;
+    };
+    ModalActions.prototype.getHTML = function () {
+        return this.wrapperElement.outerHTML;
+    };
+    ModalActions.prototype.appendTo = function (parent) {
+        parent.appendChild(this.wrapperElement);
+    };
+    ModalActions.prototype.setContent = function (content) {
+        var _this = this;
+        this.actionsElement.innerHTML = '';
+        if (typeof content === 'string') {
+            this.actionsElement.innerHTML = content;
+        }
+        else if (Array.isArray(content)) {
+            // 배열인 경우 모든 요소를 추가
+            content.forEach(function (element) {
+                _this.actionsElement.appendChild(element);
+            });
+        }
+        else {
+            // 단일 HTMLElement인 경우
+            this.actionsElement.appendChild(content);
+        }
+    };
+    ModalActions.prototype.addAction = function (action) {
+        if (typeof action === 'string') {
+            this.actionsElement.insertAdjacentHTML('beforeend', action);
+        }
+        else {
+            this.actionsElement.appendChild(action);
+        }
+    };
+    ModalActions.prototype.clear = function () {
+        this.actionsElement.innerHTML = '';
+    };
+    ModalActions.prototype.setCheckboxContent = function (content) {
+        if (this.options.layout !== 'checkbox') {
+            console.warn('setCheckboxContent can only be used with checkbox layout');
+            return;
+        }
+        var checkboxContentElement = this.wrapperElement.querySelector(".".concat(MODAL_CLASS_NAMES.actionsCheckboxContent));
+        if (checkboxContentElement) {
+            if (typeof content === 'string') {
+                checkboxContentElement.innerHTML = content;
+            }
+            else {
+                checkboxContentElement.innerHTML = '';
+                checkboxContentElement.appendChild(content);
+            }
+        }
+    };
+    ModalActions.prototype.addDivider = function () {
+        var divider = document.createElement('div');
+        divider.className = MODAL_CLASS_NAMES.actionsDivider;
+        return divider;
+    };
+    // Static factory method
+    ModalActions.create = function (content, options) {
+        return new ModalActions(content, options);
+    };
+    return ModalActions;
+}());
+export { ModalActions };

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,41 @@
+import { MODAL_CLASS_NAMES } from './const/classNames';
+import { setElementContent } from './utils/contentUtils';
+var ModalContent = /** @class */ (function () {
+    function ModalContent(content) {
+        this.createElement();
+        if (content) {
+            this.setContent(content);
+        }
+    }
+    ModalContent.prototype.createElement = function () {
+        this.element = document.createElement('div');
+        this.element.className = MODAL_CLASS_NAMES.content;
+    };
+    ModalContent.prototype.getElement = function () {
+        return this.element;
+    };
+    ModalContent.prototype.getHTML = function () {
+        return this.element.outerHTML;
+    };
+    ModalContent.prototype.appendTo = function (parent) {
+        parent.appendChild(this.element);
+    };
+    ModalContent.prototype.setContent = function (content) {
+        setElementContent(this.element, content);
+    };
+    ModalContent.prototype.clear = function () {
+        this.element.innerHTML = '';
+    };
+    ModalContent.prototype.getText = function () {
+        return this.element.textContent || '';
+    };
+    ModalContent.prototype.getInnerHTML = function () {
+        return this.element.innerHTML;
+    };
+    // Static factory method
+    ModalContent.create = function (content) {
+        return new ModalContent(content);
+    };
+    return ModalContent;
+}());
+export { ModalContent };

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,102 @@
+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 { ButtonCloseX } from '../shared/ButtonCloseX';
+import { FeaturedIcon } from '../featuredIcon';
+import { MODAL_CLASS_NAMES, getModalHeaderAlignClassNames } from './const/classNames';
+import { setElementContent } from './utils/contentUtils';
+var ModalHeader = /** @class */ (function () {
+    function ModalHeader(options) {
+        if (options === void 0) { options = {}; }
+        this.options = __assign({ featuredIcon: options.featuredIcon, align: 'left', title: '', subtitle: '', showDivider: false, hideCloseButton: false }, options);
+        this.createElement();
+    }
+    ModalHeader.prototype.createElement = function () {
+        var 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) {
+            var 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) {
+            var titleDiv = document.createElement('div');
+            titleDiv.className = MODAL_CLASS_NAMES.title;
+            if (this.options.title) {
+                var titleText = document.createElement('div');
+                titleText.className = MODAL_CLASS_NAMES.titleText;
+                setElementContent(titleText, this.options.title);
+                titleDiv.appendChild(titleText);
+            }
+            if (this.options.subtitle) {
+                var 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) {
+            var closeButtonContainer = document.createElement('div');
+            closeButtonContainer.innerHTML = ButtonCloseX('sm', 'light', MODAL_CLASS_NAMES.closeButton, '닫기');
+            this.element.appendChild(closeButtonContainer.firstElementChild);
+        }
+    };
+    ModalHeader.prototype.getElement = function () {
+        return this.element;
+    };
+    ModalHeader.prototype.getHTML = function () {
+        return this.element.outerHTML;
+    };
+    ModalHeader.prototype.appendTo = function (parent) {
+        parent.appendChild(this.element);
+    };
+    ModalHeader.prototype.setTitle = function (title) {
+        this.options.title = title;
+        var titleElement = this.element.querySelector(".".concat(MODAL_CLASS_NAMES.titleText));
+        if (titleElement) {
+            setElementContent(titleElement, title);
+        }
+    };
+    ModalHeader.prototype.setSubtitle = function (subtitle) {
+        this.options.subtitle = subtitle;
+        var subtitleElement = this.element.querySelector(".".concat(MODAL_CLASS_NAMES.titleSubtitle));
+        if (subtitleElement) {
+            setElementContent(subtitleElement, subtitle);
+        }
+    };
+    ModalHeader.prototype.setCloseHandler = function (handler) {
+        var closeButton = this.element.querySelector(".".concat(MODAL_CLASS_NAMES.closeButton));
+        if (closeButton) {
+            closeButton.addEventListener('click', handler);
+        }
+    };
+    ModalHeader.prototype.addDivider = function () {
+        var divider = document.createElement('div');
+        divider.className = MODAL_CLASS_NAMES.headerDivider;
+        return divider;
+    };
+    // Static factory method
+    ModalHeader.create = function (options) {
+        return new ModalHeader(options);
+    };
+    return ModalHeader;
+}());
+export { ModalHeader };

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 var 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 var getModalSizeClassNames = function (size) { return "ncua-modal--".concat(size); };
+export var getModalHeaderAlignClassNames = function (align) { return "ncua-modal__header--".concat(align); };
+export var getModalActionsLayoutClassNames = function (layout) { return "ncua-modal__actions--".concat(layout); };
+export var getModalActionsAlignClassNames = function (align) { return "ncua-modal__actions--".concat(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) {
+    var 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;
+}