@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

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

@@ -0,0 +1,348 @@
+import { IMAGE_FILE_INPUT_CLASS_NAMES, getFileInputSizeClassName, getHintTextClassName, getImageFileInputSizeClassName, getLabelClassName, } from './const/classNames';
+var ImageFileInputView = /** @class */ (function () {
+    function ImageFileInputView(options, model) {
+        this.renderedFiles = []; // 이미 렌더링된 파일들 추적
+        this.previewUrls = new Map(); // 파일 URL 추적
+        this.options = options;
+        this.model = model;
+        this.element = this.createElement();
+        this.previewsContainer = this.element.querySelector(".".concat(IMAGE_FILE_INPUT_CLASS_NAMES.previews));
+        this.fileInputElement = this.element.querySelector('input[type="file"]');
+        this.buttonElement = this.element.querySelector('button.ncua-btn');
+    }
+    /**
+     * 메인 DOM 요소 생성
+     */
+    ImageFileInputView.prototype.createElement = function () {
+        var mainContainer = document.createElement('div');
+        var baseClasses = "".concat(IMAGE_FILE_INPUT_CLASS_NAMES.imageFileInput, " ").concat(getImageFileInputSizeClassName(this.options.size));
+        var customClasses = this.options.className ? " ".concat(this.options.className) : '';
+        mainContainer.className = baseClasses + customClasses;
+        // Image previews container
+        var previewsContainer = document.createElement('div');
+        previewsContainer.className = IMAGE_FILE_INPUT_CLASS_NAMES.previews;
+        mainContainer.appendChild(previewsContainer);
+        // File input container
+        var fileInputContainer = document.createElement('div');
+        var fileInputClasses = "".concat(IMAGE_FILE_INPUT_CLASS_NAMES.fileInput, " ").concat(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 생성
+     */
+    ImageFileInputView.prototype.createFileInput = function () {
+        var 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 생성
+     */
+    ImageFileInputView.prototype.createInputContainer = function () {
+        var 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 생성
+     */
+    ImageFileInputView.prototype.createLabelContainer = function () {
+        var container = document.createElement('div');
+        container.className = IMAGE_FILE_INPUT_CLASS_NAMES.label;
+        var 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 생성
+     */
+    ImageFileInputView.prototype.createHelpIcon = function () {
+        var iconContainer = document.createElement('span');
+        iconContainer.className = IMAGE_FILE_INPUT_CLASS_NAMES.helpIcon;
+        var 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');
+        var 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');
+        var 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');
+        var 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 생성 (파일 찾기)
+     */
+    ImageFileInputView.prototype.createButton = function () {
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = "ncua-btn ncua-btn--xs ncua-btn--secondary-gray";
+        button.disabled = this.options.disabled;
+        var iconSvg = this.createShareIcon();
+        button.appendChild(iconSvg);
+        var label = document.createElement('span');
+        label.className = 'ncua-btn__label';
+        label.textContent = this.options.buttonLabel;
+        button.appendChild(label);
+        return button;
+    };
+    /**
+     * Share icon (업로드 아이콘) 생성
+     */
+    ImageFileInputView.prototype.createShareIcon = function () {
+        var 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');
+        var 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 (삭제 아이콘) 생성
+     */
+    ImageFileInputView.prototype.createTrashIcon = function () {
+        var 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');
+        var 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 생성
+     */
+    ImageFileInputView.prototype.createHintText = function () {
+        var hintText = document.createElement('div');
+        hintText.className = getHintTextClassName(this.options.destructive);
+        hintText.textContent = this.options.hintText;
+        return hintText;
+    };
+    /**
+     * Hint list 생성
+     * Note: 힌트 리스트는 컴포넌트 size와 관계없이 항상 xs 사이즈로 고정됨
+     */
+    ImageFileInputView.prototype.createHintList = function () {
+        var _a;
+        var ul = document.createElement('ul');
+        ul.className = IMAGE_FILE_INPUT_CLASS_NAMES.hintList;
+        (_a = this.options.hintItems) === null || _a === void 0 ? void 0 : _a.forEach(function (hint) {
+            var li = document.createElement('li');
+            li.className = IMAGE_FILE_INPUT_CLASS_NAMES.hintItem;
+            li.textContent = hint;
+            ul.appendChild(li);
+        });
+        return ul;
+    };
+    /**
+     * 이미지 프리뷰 렌더링
+     */
+    ImageFileInputView.prototype.renderImagePreviews = function (files, onRemove, onBrowseClick) {
+        var _this = this;
+        // 기존 프리뷰 정리
+        this.cleanupPreviews();
+        // 새로운 프리뷰 렌더링
+        files.forEach(function (file, index) {
+            var previewContainer = _this.createImagePreview(file, index, onRemove);
+            _this.previewsContainer.appendChild(previewContainer);
+            _this.renderedFiles.push(file);
+        });
+        // 빈 슬롯 표시 여부 확인
+        var showEmptySlot = this.options.maxFileCount ? files.length < this.options.maxFileCount : files.length === 0;
+        if (showEmptySlot) {
+            var emptySlot = this.createEmptySlot(onBrowseClick);
+            this.previewsContainer.appendChild(emptySlot);
+        }
+    };
+    /**
+     * 이미지 프리뷰 생성
+     */
+    ImageFileInputView.prototype.createImagePreview = function (file, index, onRemove) {
+        var container = document.createElement('div');
+        container.className = IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer;
+        // 이미지 요소 생성
+        var img = document.createElement('img');
+        img.className = IMAGE_FILE_INPUT_CLASS_NAMES.previewImage;
+        img.alt = file.name;
+        // 이미지 URL 생성
+        var isInitialFile = this.model.isInitialFile(file);
+        if (isInitialFile) {
+            // 초기 파일: fileImageUrl 사용
+            var imageUrl = this.model.getInitialFileImageUrl(file);
+            if (imageUrl) {
+                img.src = imageUrl;
+            }
+        }
+        else {
+            // 새로 추가된 파일: createObjectURL 사용
+            var url = URL.createObjectURL(file);
+            img.src = url;
+            this.previewUrls.set(file, url);
+        }
+        container.appendChild(img);
+        // 삭제 버튼 생성
+        var removeButton = document.createElement('button');
+        removeButton.type = 'button';
+        removeButton.className = "ncua-btn ncua-btn--sm ncua-btn--text ".concat(IMAGE_FILE_INPUT_CLASS_NAMES.previewRemoveButton);
+        removeButton.setAttribute('aria-label', 'Remove image');
+        var trashIcon = this.createTrashIcon();
+        removeButton.appendChild(trashIcon);
+        removeButton.addEventListener('click', function () { return onRemove(index); });
+        container.appendChild(removeButton);
+        return container;
+    };
+    /**
+     * 빈 슬롯 생성 (파일 찾기 버튼)
+     */
+    ImageFileInputView.prototype.createEmptySlot = function (onBrowseClick) {
+        var _this = this;
+        var wrapper = document.createElement('div');
+        wrapper.className = 'ncua-image-file-input__empty-slot-wrapper';
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = "ncua-btn ncua-btn--".concat(this.options.size, " ncua-btn--secondary-gray ").concat(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 생성 및 추가
+        var tooltip = this.createTooltip();
+        wrapper.appendChild(tooltip);
+        // Hover 이벤트로 tooltip 표시/숨김
+        wrapper.addEventListener('mouseenter', function () {
+            if (!_this.options.disabled) {
+                tooltip.style.display = 'block';
+            }
+        });
+        wrapper.addEventListener('mouseleave', function () {
+            tooltip.style.display = 'none';
+        });
+        return wrapper;
+    };
+    /**
+     * Tooltip 생성
+     */
+    ImageFileInputView.prototype.createTooltip = function () {
+        var iconSize = this.options.size === 'xs' ? '48' : '80';
+        var tooltipHTML = "\n      <svg width=\"".concat(iconSize, "\" height=\"").concat(iconSize, "\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" style=\"opacity: 0; cursor: pointer;\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"2\"></circle>\n      </svg>\n      <span class=\"ncua-tooltip__bg ncua-tooltip__bg--black ncua-tooltip__bg--bottom ncua-tooltip__bg--visible\">\n        <span class=\"ncua-tooltip__content\">").concat(this.options.imagePreviewTooltipLabel, "</span>\n      </span>\n    ");
+        var tooltip = document.createElement('span');
+        tooltip.className = 'ncua-tooltip ncua-tooltip--sm ncua-tooltip--short';
+        tooltip.style.display = 'none';
+        tooltip.innerHTML = tooltipHTML;
+        return tooltip;
+    };
+    /**
+     * 기존 프리뷰 정리
+     */
+    ImageFileInputView.prototype.cleanupPreviews = function () {
+        // Blob URL 정리
+        this.previewUrls.forEach(function (url) {
+            URL.revokeObjectURL(url);
+        });
+        this.previewUrls.clear();
+        // DOM 정리
+        this.previewsContainer.innerHTML = '';
+        this.renderedFiles = [];
+    };
+    ImageFileInputView.prototype.setButtonDisabled = function (disabled) {
+        this.buttonElement.disabled = disabled;
+        // 빈 슬롯 wrapper 내부의 버튼도 disabled 설정
+        var emptySlotWrapper = this.previewsContainer.querySelector('.ncua-image-file-input__empty-slot-wrapper');
+        if (emptySlotWrapper) {
+            var emptySlotButton = emptySlotWrapper.querySelector(".".concat(IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer, ".ncua-btn"));
+            if (emptySlotButton) {
+                emptySlotButton.disabled = disabled;
+            }
+        }
+    };
+    ImageFileInputView.prototype.getElement = function () {
+        return this.element;
+    };
+    ImageFileInputView.prototype.getFileInputElement = function () {
+        return this.fileInputElement;
+    };
+    ImageFileInputView.prototype.getButtonElement = function () {
+        return this.buttonElement;
+    };
+    ImageFileInputView.prototype.destroy = function () {
+        this.cleanupPreviews();
+    };
+    return ImageFileInputView;
+}());
+export { ImageFileInputView };

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,24 @@
+// ImageFileInput 관련 CSS 클래스명 상수
+export var 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 var getImageFileInputSizeClassName = function (size) { return "ncua-image-file-input--".concat(size); };
+export var getFileInputSizeClassName = function (size) { return "ncua-file-input--".concat(size); };
+export var getButtonSizeClassName = function (size) { return "ncua-button--".concat(size); };
+export var getLabelClassName = function (isRequired) {
+    return isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
+};
+export var getHintTextClassName = function (destructive) {
+    return 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,32 @@
+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 { Tag } from './tag';
+import { Tooltip } from './tooltip';
+declare global {
+    interface Window {
+        ncua: {
+            Slider?: typeof Slider;
+            Tab?: typeof Tab;
+            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,28 @@
+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 { Tag } from './tag';
+import { Tooltip } from './tooltip';
+window.ncua = {
+    Slider: Slider,
+    Tab: Tab,
+    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;
+}