@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/assets/scripts/imageFileInput/ImageFileInputView.js

@@ -0,0 +1,350 @@
+import { IMAGE_FILE_INPUT_CLASS_NAMES, getFileInputSizeClassName, getHintTextClassName, getImageFileInputSizeClassName, getLabelClassName, } from './const/classNames';
+export class ImageFileInputView {
+    constructor(options, model) {
+        this.renderedFiles = []; // 이미 렌더링된 파일들 추적
+        this.previewUrls = new Map(); // 파일 URL 추적
+        this.options = options;
+        this.model = model;
+        this.element = this.createElement();
+        this.previewsContainer = this.element.querySelector(`.${IMAGE_FILE_INPUT_CLASS_NAMES.previews}`);
+        this.fileInputElement = this.element.querySelector('input[type="file"]');
+        this.buttonElement = this.element.querySelector('button.ncua-btn');
+    }
+    /**
+     * 메인 DOM 요소 생성
+     */
+    createElement() {
+        const mainContainer = document.createElement('div');
+        const baseClasses = `${IMAGE_FILE_INPUT_CLASS_NAMES.imageFileInput} ${getImageFileInputSizeClassName(this.options.size)}`;
+        const customClasses = this.options.className ? ` ${this.options.className}` : '';
+        mainContainer.className = baseClasses + customClasses;
+        // Image previews container
+        const previewsContainer = document.createElement('div');
+        previewsContainer.className = IMAGE_FILE_INPUT_CLASS_NAMES.previews;
+        mainContainer.appendChild(previewsContainer);
+        // File input container
+        const fileInputContainer = document.createElement('div');
+        const fileInputClasses = `${IMAGE_FILE_INPUT_CLASS_NAMES.fileInput} ${getFileInputSizeClassName(this.options.size)}`;
+        fileInputContainer.className = fileInputClasses;
+        // Hidden file input 생성
+        fileInputContainer.appendChild(this.createFileInput());
+        // Input container
+        fileInputContainer.appendChild(this.createInputContainer());
+        // Hint list
+        if (this.options.hintItems && this.options.hintItems.length > 0) {
+            fileInputContainer.appendChild(this.createHintList());
+        }
+        mainContainer.appendChild(fileInputContainer);
+        return mainContainer;
+    }
+    /**
+     * Hidden file input 생성
+     */
+    createFileInput() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.hidden = true;
+        input.tabIndex = -1;
+        input.setAttribute('aria-hidden', 'true');
+        input.classList.add('no-filestyle');
+        if (this.options.accept) {
+            input.accept = this.options.accept;
+        }
+        if (this.options.multiple) {
+            input.multiple = true;
+        }
+        if (this.options.fileInputName) {
+            input.name = this.options.fileInputName;
+        }
+        return input;
+    }
+    /**
+     * Input container 생성
+     */
+    createInputContainer() {
+        const container = document.createElement('div');
+        container.className = IMAGE_FILE_INPUT_CLASS_NAMES.inputContainer;
+        // Label
+        if (this.options.label) {
+            container.appendChild(this.createLabelContainer());
+        }
+        // Button
+        container.appendChild(this.createButton());
+        // Hint text
+        if (this.options.hintText) {
+            container.appendChild(this.createHintText());
+        }
+        return container;
+    }
+    /**
+     * Label container 생성
+     */
+    createLabelContainer() {
+        const container = document.createElement('div');
+        container.className = IMAGE_FILE_INPUT_CLASS_NAMES.label;
+        const label = document.createElement('label');
+        label.className = getLabelClassName(this.options.isRequired);
+        label.textContent = this.options.label;
+        container.appendChild(label);
+        if (this.options.showHelpIcon) {
+            container.appendChild(this.createHelpIcon());
+        }
+        return container;
+    }
+    /**
+     * Help icon 생성
+     */
+    createHelpIcon() {
+        const iconContainer = document.createElement('span');
+        iconContainer.className = IMAGE_FILE_INPUT_CLASS_NAMES.helpIcon;
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', '16');
+        svg.setAttribute('height', '16');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('fill', 'none');
+        svg.setAttribute('stroke', 'currentColor');
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', '12');
+        circle.setAttribute('cy', '12');
+        circle.setAttribute('r', '10');
+        circle.setAttribute('stroke-width', '2');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('stroke-linecap', 'round');
+        path.setAttribute('stroke-linejoin', 'round');
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', '12');
+        line.setAttribute('y1', '17');
+        line.setAttribute('x2', '12.01');
+        line.setAttribute('y2', '17');
+        line.setAttribute('stroke-width', '2');
+        line.setAttribute('stroke-linecap', 'round');
+        svg.appendChild(circle);
+        svg.appendChild(path);
+        svg.appendChild(line);
+        iconContainer.appendChild(svg);
+        return iconContainer;
+    }
+    /**
+     * Button 생성 (파일 찾기)
+     */
+    createButton() {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `ncua-btn ncua-btn--xs ncua-btn--secondary-gray`;
+        button.disabled = this.options.disabled;
+        const iconSvg = this.createShareIcon();
+        button.appendChild(iconSvg);
+        const label = document.createElement('span');
+        label.className = 'ncua-btn__label';
+        label.textContent = this.options.buttonLabel;
+        button.appendChild(label);
+        return button;
+    }
+    /**
+     * Share icon (업로드 아이콘) 생성
+     */
+    createShareIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        svg.setAttribute('width', '14');
+        svg.setAttribute('height', '14');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('fill', 'none');
+        svg.setAttribute('stroke', 'none');
+        svg.classList.add('ncua-btn__icon');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('stroke', 'currentColor');
+        path.setAttribute('stroke-linecap', 'round');
+        path.setAttribute('stroke-linejoin', 'round');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('d', 'M21 12v4.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V12m13-5-4-4m0 0L8 7m4-4v12');
+        svg.appendChild(path);
+        return svg;
+    }
+    /**
+     * Trash icon (삭제 아이콘) 생성
+     */
+    createTrashIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        svg.setAttribute('width', '20');
+        svg.setAttribute('height', '20');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('fill', 'none');
+        svg.setAttribute('stroke', 'currentColor');
+        svg.classList.add('ncua-btn__icon');
+        const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path1.setAttribute('stroke', 'currentColor');
+        path1.setAttribute('stroke-linecap', 'round');
+        path1.setAttribute('stroke-linejoin', 'round');
+        path1.setAttribute('stroke-width', '2');
+        path1.setAttribute('d', 'M16 6v-.8c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 2 13.92 2 12.8 2h-1.6c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C8 3.52 8 4.08 8 5.2V6m2 5.5v5m4-5v5M3 6h18m-2 0v11.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C16.72 22 15.88 22 14.2 22H9.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C5 19.72 5 18.88 5 17.2V6');
+        svg.appendChild(path1);
+        return svg;
+    }
+    /**
+     * Hint text 생성
+     */
+    createHintText() {
+        const hintText = document.createElement('div');
+        hintText.className = getHintTextClassName(this.options.destructive);
+        hintText.textContent = this.options.hintText;
+        return hintText;
+    }
+    /**
+     * Hint list 생성
+     * Note: 힌트 리스트는 컴포넌트 size와 관계없이 항상 xs 사이즈로 고정됨
+     */
+    createHintList() {
+        const ul = document.createElement('ul');
+        ul.className = IMAGE_FILE_INPUT_CLASS_NAMES.hintList;
+        this.options.hintItems?.forEach((hint) => {
+            const li = document.createElement('li');
+            li.className = IMAGE_FILE_INPUT_CLASS_NAMES.hintItem;
+            li.textContent = hint;
+            ul.appendChild(li);
+        });
+        return ul;
+    }
+    /**
+     * 이미지 프리뷰 렌더링
+     */
+    renderImagePreviews(files, onRemove, onBrowseClick) {
+        // 기존 프리뷰 정리
+        this.cleanupPreviews();
+        // 새로운 프리뷰 렌더링
+        files.forEach((file, index) => {
+            const previewContainer = this.createImagePreview(file, index, onRemove);
+            this.previewsContainer.appendChild(previewContainer);
+            this.renderedFiles.push(file);
+        });
+        // 빈 슬롯 표시 여부 확인
+        const showEmptySlot = this.options.maxFileCount ? files.length < this.options.maxFileCount : files.length === 0;
+        if (showEmptySlot) {
+            const emptySlot = this.createEmptySlot(onBrowseClick);
+            this.previewsContainer.appendChild(emptySlot);
+        }
+    }
+    /**
+     * 이미지 프리뷰 생성
+     */
+    createImagePreview(file, index, onRemove) {
+        const container = document.createElement('div');
+        container.className = IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer;
+        // 이미지 요소 생성
+        const img = document.createElement('img');
+        img.className = IMAGE_FILE_INPUT_CLASS_NAMES.previewImage;
+        img.alt = file.name;
+        // 이미지 URL 생성
+        const isInitialFile = this.model.isInitialFile(file);
+        if (isInitialFile) {
+            // 초기 파일: fileImageUrl 사용
+            const imageUrl = this.model.getInitialFileImageUrl(file);
+            if (imageUrl) {
+                img.src = imageUrl;
+            }
+        }
+        else {
+            // 새로 추가된 파일: createObjectURL 사용
+            const url = URL.createObjectURL(file);
+            img.src = url;
+            this.previewUrls.set(file, url);
+        }
+        container.appendChild(img);
+        // 삭제 버튼 생성
+        const removeButton = document.createElement('button');
+        removeButton.type = 'button';
+        removeButton.className = `ncua-btn ncua-btn--sm ncua-btn--text ${IMAGE_FILE_INPUT_CLASS_NAMES.previewRemoveButton}`;
+        removeButton.setAttribute('aria-label', 'Remove image');
+        const trashIcon = this.createTrashIcon();
+        removeButton.appendChild(trashIcon);
+        removeButton.addEventListener('click', () => onRemove(index));
+        container.appendChild(removeButton);
+        return container;
+    }
+    /**
+     * 빈 슬롯 생성 (파일 찾기 버튼)
+     */
+    createEmptySlot(onBrowseClick) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'ncua-image-file-input__empty-slot-wrapper';
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `ncua-btn ncua-btn--${this.options.size} ncua-btn--secondary-gray ${IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer}`;
+        button.disabled = this.options.disabled;
+        button.setAttribute('aria-label', this.options.imagePreviewTooltipLabel);
+        button.addEventListener('click', onBrowseClick);
+        wrapper.addEventListener('click', onBrowseClick);
+        wrapper.appendChild(button);
+        // Tooltip 생성 및 추가
+        const tooltip = this.createTooltip();
+        wrapper.appendChild(tooltip);
+        // Hover 이벤트로 tooltip 표시/숨김
+        wrapper.addEventListener('mouseenter', () => {
+            if (!this.options.disabled) {
+                tooltip.style.display = 'block';
+            }
+        });
+        wrapper.addEventListener('mouseleave', () => {
+            tooltip.style.display = 'none';
+        });
+        return wrapper;
+    }
+    /**
+     * Tooltip 생성
+     */
+    createTooltip() {
+        const iconSize = this.options.size === 'xs' ? '48' : '80';
+        const tooltipHTML = `
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" style="opacity: 0; cursor: pointer;">
+        <circle cx="12" cy="12" r="10" stroke-width="2"></circle>
+      </svg>
+      <span class="ncua-tooltip__bg ncua-tooltip__bg--black ncua-tooltip__bg--bottom ncua-tooltip__bg--visible">
+        <span class="ncua-tooltip__content">${this.options.imagePreviewTooltipLabel}</span>
+      </span>
+    `;
+        const tooltip = document.createElement('span');
+        tooltip.className = 'ncua-tooltip ncua-tooltip--sm ncua-tooltip--short';
+        tooltip.style.display = 'none';
+        tooltip.innerHTML = tooltipHTML;
+        return tooltip;
+    }
+    /**
+     * 기존 프리뷰 정리
+     */
+    cleanupPreviews() {
+        // Blob URL 정리
+        this.previewUrls.forEach((url) => {
+            URL.revokeObjectURL(url);
+        });
+        this.previewUrls.clear();
+        // DOM 정리
+        this.previewsContainer.innerHTML = '';
+        this.renderedFiles = [];
+    }
+    setButtonDisabled(disabled) {
+        this.buttonElement.disabled = disabled;
+        // 빈 슬롯 wrapper 내부의 버튼도 disabled 설정
+        const emptySlotWrapper = this.previewsContainer.querySelector('.ncua-image-file-input__empty-slot-wrapper');
+        if (emptySlotWrapper) {
+            const emptySlotButton = emptySlotWrapper.querySelector(`.${IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer}.ncua-btn`);
+            if (emptySlotButton) {
+                emptySlotButton.disabled = disabled;
+            }
+        }
+    }
+    getElement() {
+        return this.element;
+    }
+    getFileInputElement() {
+        return this.fileInputElement;
+    }
+    getButtonElement() {
+        return this.buttonElement;
+    }
+    destroy() {
+        this.cleanupPreviews();
+    }
+}

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

@@ -0,0 +1,19 @@
+export declare const IMAGE_FILE_INPUT_CLASS_NAMES: {
+    imageFileInput: string;
+    previews: string;
+    previewContainer: string;
+    previewImage: string;
+    previewRemoveButton: string;
+    fileInput: string;
+    inputContainer: string;
+    label: string;
+    helpIcon: string;
+    hintText: string;
+    hintList: string;
+    hintItem: string;
+};
+export declare const getImageFileInputSizeClassName: (size: string) => string;
+export declare const getFileInputSizeClassName: (size: string) => string;
+export declare const getButtonSizeClassName: (size: string) => string;
+export declare const getLabelClassName: (isRequired?: boolean) => "ncua-label" | "ncua-label ncua-label--required";
+export declare const getHintTextClassName: (destructive?: boolean) => "ncua-input__hint-text" | "ncua-input__hint-text ncua-input__hint-text--destructive";

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

@@ -0,0 +1,20 @@
+// ImageFileInput 관련 CSS 클래스명 상수
+export const IMAGE_FILE_INPUT_CLASS_NAMES = {
+    imageFileInput: 'ncua-image-file-input',
+    previews: 'ncua-image-file-input__previews',
+    previewContainer: 'ncua-image-file-input__preview-container',
+    previewImage: 'ncua-image-file-input__preview-image',
+    previewRemoveButton: 'ncua-image-file-input__preview-remove-button',
+    fileInput: 'ncua-file-input',
+    inputContainer: 'ncua-file-input__input-container',
+    label: 'ncua-file-input__label',
+    helpIcon: 'ncua-input__help-icon',
+    hintText: 'ncua-input__hint-text',
+    hintList: 'ncua-file-input__hint-list',
+    hintItem: 'ncua-file-input__hint-item',
+};
+export const getImageFileInputSizeClassName = (size) => `ncua-image-file-input--${size}`;
+export const getFileInputSizeClassName = (size) => `ncua-file-input--${size}`;
+export const getButtonSizeClassName = (size) => `ncua-button--${size}`;
+export const getLabelClassName = (isRequired) => isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
+export const getHintTextClassName = (destructive) => destructive ? 'ncua-input__hint-text ncua-input__hint-text--destructive' : 'ncua-input__hint-text';

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

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

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

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

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

@@ -0,0 +1,125 @@
+export declare enum ImageFileInputErrorType {
+    ALREADY_UPLOADED = "ALREADY_UPLOADED",
+    EXCEED_MAX_FILE_SIZE = "EXCEED_MAX_FILE_SIZE",
+    EXCEED_MAX_FILE_COUNT = "EXCEED_MAX_FILE_COUNT"
+}
+export interface InvalidFile extends Omit<File, 'constructor'> {
+    errorType: ImageFileInputErrorType;
+}
+export type ImageFileInputSize = 'xs' | 'sm' | 'md' | 'lg';
+export type UploadedFile = {
+    fileName: string;
+    fileImageUrl?: string;
+};
+export interface BaseImageFileInputOptions {
+    /**
+     * Size of the input
+     */
+    size?: ImageFileInputSize;
+    /**
+     * Accepted file types
+     * e.g. '.jpg,.png,.pdf' or 'image/*'
+     */
+    accept?: string;
+    /**
+     * Allow multiple file selection
+     */
+    multiple?: boolean;
+    /**
+     * Maximum number of files
+     */
+    maxFileCount?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxFileSize?: number;
+    /**
+     * Initial files (controlled mode)
+     */
+    value?: File[];
+    /**
+     * Callback when files change (controlled mode)
+     */
+    onChange?: (files: File[]) => void;
+    /**
+     * Callback when files are selected (uncontrolled mode)
+     */
+    onFileSelect?: (files: File[]) => void;
+    /**
+     * Callback when file selection fails
+     */
+    onFail?: (files: InvalidFile[]) => void;
+    /**
+     * Label shown on the button
+     */
+    buttonLabel?: string;
+    /**
+     * Label shown on the image preview
+     */
+    imagePreviewTooltipLabel?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Hint text items to display as a list
+     */
+    hintItems?: string[];
+    /**
+     * Whether the input is required
+     */
+    isRequired?: boolean;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon?: boolean;
+    /**
+     * Hint text to display
+     */
+    hintText?: string;
+    /**
+     * Validation state
+     */
+    validation?: boolean;
+    /**
+     * Destructive state
+     */
+    destructive?: boolean;
+    /**
+     * Name attribute for file input (for PHP form submission)
+     */
+    fileInputName?: string;
+    /**
+     * Container element or selector to automatically append the image file input
+     * Can be a DOM element, element ID, or CSS selector
+     */
+    container?: HTMLElement | string;
+    /**
+     * Additional CSS class names to add to the main image file input element
+     */
+    className?: string;
+}
+export interface RequiredImageFileInputProps extends Required<Pick<BaseImageFileInputOptions, 'size' | 'buttonLabel' | 'imagePreviewTooltipLabel'>> {
+    accept?: string;
+    multiple: boolean;
+    maxFileCount?: number;
+    maxFileSize?: number;
+    value?: File[];
+    onChange?: (files: File[]) => void;
+    onFileSelect?: (files: File[]) => void;
+    onFail?: (files: InvalidFile[]) => void;
+    disabled: boolean;
+    label?: string;
+    hintItems?: string[];
+    isRequired?: boolean;
+    showHelpIcon?: boolean;
+    hintText?: string;
+    validation?: boolean;
+    destructive?: boolean;
+    fileInputName?: string;
+    className?: string;
+}

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

@@ -0,0 +1,7 @@
+// ImageFileInput 관련 타입 정의 (React ImageFileInput.tsx와 동일)
+export var ImageFileInputErrorType;
+(function (ImageFileInputErrorType) {
+    ImageFileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
+    ImageFileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
+    ImageFileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
+})(ImageFileInputErrorType || (ImageFileInputErrorType = {}));

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

@@ -0,0 +1,3 @@
+export * from './const/classNames';
+export * from './const/types';
+export { ImageFileInput } from './ImageFileInput';

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

@@ -0,0 +1,9 @@
+import { ImageFileInput } from './ImageFileInput';
+export * from './const/classNames';
+export * from './const/types';
+export { ImageFileInput } from './ImageFileInput';
+// 전역 등록 (추후 index.ts와 개별동작 할 수 있게끔 대비)
+if (typeof window !== 'undefined') {
+    window.ncua = window.ncua || {};
+    window.ncua.ImageFileInput = ImageFileInput;
+}

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

@@ -0,0 +1,34 @@
+import { ComboBox } from './comboBox';
+import { DatePicker } from './datePicker';
+import { FeaturedIcon } from './featuredIcon';
+import { FileInput } from './fileInput';
+import { ImageFileInput } from './imageFileInput';
+import { Modal } from './modal';
+import { Notification } from './notification';
+import { ProgressBar } from './progress-bar';
+import { SelectBox } from './selectBox';
+import { Slider } from './slider';
+import { Tab } from './tab';
+import { Table } from './table';
+import { Tag } from './tag';
+import { Tooltip } from './tooltip';
+declare global {
+    interface Window {
+        ncua: {
+            Slider?: typeof Slider;
+            Tab?: typeof Tab;
+            Table?: typeof Table;
+            Tag?: typeof Tag;
+            DatePicker?: typeof DatePicker;
+            FeaturedIcon?: typeof FeaturedIcon;
+            FileInput?: typeof FileInput;
+            Modal?: typeof Modal;
+            Notification?: typeof Notification;
+            ProgressBar?: typeof ProgressBar;
+            Tooltip?: typeof Tooltip;
+            SelectBox?: typeof SelectBox;
+            ComboBox?: typeof ComboBox;
+            ImageFileInput?: typeof ImageFileInput;
+        };
+    }
+}

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

@@ -0,0 +1,30 @@
+import { ComboBox } from './comboBox';
+import { DatePicker } from './datePicker';
+import { FeaturedIcon } from './featuredIcon';
+import { FileInput } from './fileInput';
+import { ImageFileInput } from './imageFileInput';
+import { Modal } from './modal';
+import { Notification } from './notification';
+import { ProgressBar } from './progress-bar';
+import { SelectBox } from './selectBox';
+import { Slider } from './slider';
+import { Tab } from './tab';
+import { Table } from './table';
+import { Tag } from './tag';
+import { Tooltip } from './tooltip';
+window.ncua = {
+    Slider: Slider,
+    Tab: Tab,
+    Table: Table,
+    Tag: Tag,
+    DatePicker: DatePicker,
+    SelectBox: SelectBox,
+    ComboBox: ComboBox,
+    FeaturedIcon: FeaturedIcon,
+    FileInput: FileInput,
+    Modal: Modal,
+    Notification: Notification,
+    ProgressBar: ProgressBar,
+    Tooltip: Tooltip,
+    ImageFileInput: ImageFileInput,
+};

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

@@ -0,0 +1,27 @@
+import { BaseModalOptions } from './const/types';
+import { ModalHeader } from './ModalHeader';
+import { ModalContent } from './ModalContent';
+import { ModalActions } from './ModalActions';
+export declare class Modal {
+    private element;
+    private modalElement;
+    private isOpen;
+    private options;
+    constructor(options?: BaseModalOptions);
+    private createElement;
+    private getBackdropClasses;
+    private getModalClasses;
+    private handleBackdropClick;
+    private handleKeyDown;
+    open(): void;
+    close(): void;
+    destroy(): void;
+    setContent(content: string | HTMLElement): void;
+    getElement(): HTMLDivElement;
+    getModalElement(): HTMLDivElement;
+    isModalOpen(): boolean;
+    static create(options?: BaseModalOptions): Modal;
+    static Header: typeof ModalHeader;
+    static Content: typeof ModalContent;
+    static Actions: typeof ModalActions;
+}