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

package/dist/temp/src/utils/dropdown/dropdownUtils.d.ts

@@ -0,0 +1,17 @@
+import type { DropdownPositionConfig, DropdownPositionResult } from '../../types/dropdown';
+/**
+ * 드롭다운 위치를 계산하는 유틸리티 함수
+ */
+export declare const calculateDropdownPosition: ({ triggerRef, maxHeight, itemCount, itemHeight, offset, }: DropdownPositionConfig) => DropdownPositionResult;
+/**
+ * 키보드 네비게이션을 위한 포커스 인덱스 계산
+ */
+export declare const calculateNextFocusIndex: (currentIndex: number, direction: 'up' | 'down', validOptionsLength: number) => number;
+/**
+ * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
+ */
+export declare const adjustDropdownPosition: (dropdownElement: HTMLElement) => void;
+/**
+ * 스크롤 가능한 부모 요소를 찾는 유틸리티 함수
+ */
+export declare const findScrollableParent: (element: Element, boundary: Element) => Element | null;

package/dist/temp/src/utils/dropdown/dropdownUtils.js

@@ -0,0 +1,79 @@
+/**
+ * 드롭다운 위치를 계산하는 유틸리티 함수
+ */
+export var calculateDropdownPosition = function (_a) {
+    var triggerRef = _a.triggerRef, maxHeight = _a.maxHeight, itemCount = _a.itemCount, _b = _a.itemHeight, itemHeight = _b === void 0 ? 40 : _b, _c = _a.offset, offset = _c === void 0 ? 20 : _c;
+    if (!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+        return { direction: 'down', maxHeight: maxHeight };
+    }
+    var rect = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var dropdownHeight = Math.min(maxHeight, itemCount * itemHeight);
+    // 아래쪽 공간이 충분한지 확인
+    var spaceBelow = viewportHeight - rect.bottom;
+    if (spaceBelow < dropdownHeight + offset) {
+        return { direction: 'up', maxHeight: maxHeight };
+    }
+    return { direction: 'down', maxHeight: maxHeight };
+};
+/**
+ * 키보드 네비게이션을 위한 포커스 인덱스 계산
+ */
+export var calculateNextFocusIndex = function (currentIndex, direction, validOptionsLength) {
+    if (validOptionsLength === 0)
+        return -1;
+    if (direction === 'down') {
+        return currentIndex < validOptionsLength - 1 ? currentIndex + 1 : 0;
+    }
+    return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
+};
+/**
+ * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
+ */
+export var adjustDropdownPosition = function (dropdownElement) {
+    var dropdownRect = dropdownElement.getBoundingClientRect();
+    var viewportWidth = window.innerWidth;
+    var viewportHeight = window.innerHeight;
+    // 좌우 위치 조정
+    if (dropdownRect.right > viewportWidth) {
+        var overflow = dropdownRect.right - viewportWidth;
+        dropdownElement.style.left = "".concat(-overflow - 10, "px");
+    }
+    if (dropdownRect.left < 0) {
+        dropdownElement.style.left = '10px';
+    }
+    // 상하 위치 조정 (이미 up/down 방향이 결정된 후 미세 조정)
+    if (dropdownRect.bottom > viewportHeight) {
+        var overflow = dropdownRect.bottom - viewportHeight;
+        dropdownElement.style.maxHeight = "".concat(dropdownRect.height - overflow - 10, "px");
+    }
+};
+/**
+ * 스크롤 가능한 부모 요소를 찾는 유틸리티 함수
+ */
+export var findScrollableParent = function (element, boundary) {
+    var current = element;
+    while (current && current !== boundary && current !== document.body) {
+        var style = window.getComputedStyle(current);
+        var overflowY = style.overflowY;
+        if (overflowY === 'scroll' || overflowY === 'auto') {
+            var scrollHeight = current.scrollHeight, clientHeight = current.clientHeight;
+            if (scrollHeight > clientHeight) {
+                return current;
+            }
+        }
+        current = current.parentElement;
+    }
+    // boundary 자체가 스크롤 가능한지 확인
+    if (current === boundary) {
+        var style = window.getComputedStyle(boundary);
+        var overflowY = style.overflowY;
+        if (overflowY === 'scroll' || overflowY === 'auto') {
+            var scrollHeight = boundary.scrollHeight, clientHeight = boundary.clientHeight;
+            if (scrollHeight > clientHeight) {
+                return boundary;
+            }
+        }
+    }
+    return null;
+};

package/dist/temp/src/utils/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdownUtils';
+export * from './multiSelect';

package/dist/temp/src/utils/dropdown/index.js

@@ -0,0 +1,2 @@
+export * from './dropdownUtils';
+export * from './multiSelect';

package/dist/temp/src/utils/dropdown/multiSelect.d.ts

@@ -0,0 +1,31 @@
+import type { MultiSelectOption, SelectedTag } from '../../types';
+/**
+ * 전체 선택 상태를 확인하는 유틸 함수
+ */
+export declare const isAllItemsSelected: (selectedValues: (string | number)[], options: MultiSelectOption[]) => boolean;
+/**
+ * 전체 선택 버튼 텍스트를 반환하는 유틸 함수
+ */
+export declare const getSelectAllButtonText: (selectedValues: (string | number)[], options: MultiSelectOption[], selectText?: string, deselectText?: string) => string;
+/**
+ * 전체 선택/해제를 처리하는 유틸 함수
+ */
+export declare const handleSelectAllItems: (selectedValues: (string | number)[], options: MultiSelectOption[]) => (string | number)[];
+/**
+ * 선택된 항목들을 태그 데이터로 변환하는 유틸 함수
+ */
+export declare const getSelectedTags: (selectedValues: (string | number)[], options: MultiSelectOption[]) => SelectedTag[];
+/**
+ * 태그 제거 시 선택값에서 해당 ID를 제거하는 유틸 함수
+ */
+export declare const removeTagFromSelected: (selectedValues: (string | number)[], tagIdToRemove: string | number) => (string | number)[];
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ */
+export declare const useMultiSelect: (selectedValues: (string | number)[], options: MultiSelectOption[], selectText?: string, deselectText?: string) => {
+    isAllSelected: boolean;
+    buttonText: string;
+    toggleSelectAll: () => (string | number)[];
+    getSelectedTagsData: () => SelectedTag[];
+    removeTag: (tagId: string | number) => (string | number)[];
+};

package/dist/temp/src/utils/dropdown/multiSelect.js

@@ -0,0 +1,68 @@
+/**
+ * 전체 선택 상태를 확인하는 유틸 함수
+ */
+export var isAllItemsSelected = function (selectedValues, options) {
+    if (options.length === 0)
+        return false;
+    var validOptionIds = options.filter(function (option) { return !option.disabled; }).map(function (option) { return option.id; });
+    return validOptionIds.length > 0 && validOptionIds.every(function (id) { return selectedValues.includes(id); });
+};
+/**
+ * 전체 선택 버튼 텍스트를 반환하는 유틸 함수
+ */
+export var getSelectAllButtonText = function (selectedValues, options, selectText, deselectText) {
+    if (selectText === void 0) { selectText = '전체 선택'; }
+    if (deselectText === void 0) { deselectText = '전체 해제'; }
+    return isAllItemsSelected(selectedValues, options) ? deselectText : selectText;
+};
+/**
+ * 전체 선택/해제를 처리하는 유틸 함수
+ */
+export var handleSelectAllItems = function (selectedValues, options) {
+    if (isAllItemsSelected(selectedValues, options)) {
+        // 전체 해제: 빈 배열 반환
+        return [];
+    }
+    // 전체 선택: 비활성화되지 않은 모든 옵션 ID 반환
+    return options.filter(function (option) { return !option.disabled; }).map(function (option) { return option.id; });
+};
+/**
+ * 선택된 항목들을 태그 데이터로 변환하는 유틸 함수
+ */
+export var getSelectedTags = function (selectedValues, options) {
+    return selectedValues
+        .map(function (value) {
+        var option = options.find(function (opt) { return opt.id === value; });
+        return option ? { id: option.id, label: option.label || String(option.id) } : null;
+    })
+        .filter(function (tag) { return tag !== null; });
+};
+/**
+ * 태그 제거 시 선택값에서 해당 ID를 제거하는 유틸 함수
+ */
+export var removeTagFromSelected = function (selectedValues, tagIdToRemove) {
+    return selectedValues.filter(function (id) { return id !== tagIdToRemove; });
+};
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ */
+export var useMultiSelect = function (selectedValues, options, selectText, deselectText) {
+    var isAllSelected = isAllItemsSelected(selectedValues, options);
+    var buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
+    var toggleSelectAll = function () {
+        return handleSelectAllItems(selectedValues, options);
+    };
+    var getSelectedTagsData = function () {
+        return getSelectedTags(selectedValues, options);
+    };
+    var removeTag = function (tagId) {
+        return removeTagFromSelected(selectedValues, tagId);
+    };
+    return {
+        isAllSelected: isAllSelected,
+        buttonText: buttonText,
+        toggleSelectAll: toggleSelectAll,
+        getSelectedTagsData: getSelectedTagsData,
+        removeTag: removeTag,
+    };
+};

package/dist/temp/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './dropdown';

package/dist/temp/src/utils/index.js

@@ -0,0 +1,4 @@
+// 날짜 관련 utils
+export * from './date-picker';
+// 드롭다운 관련 utils
+export * from './dropdown';

package/dist/types/assets/scripts/baseBox.d.ts

@@ -0,0 +1,55 @@
+import { OptionValue } from '../../src/types';
+import { DropdownOption } from './utils/unifiedBox/dropdownModel';
+import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
+/**
+ * SelectBox와 ComboBox의 공통 기능을 담는 베이스 클래스
+ */
+export declare abstract class BaseBox {
+    protected element: HTMLElement;
+    protected unifiedSelectBox: UnifiedBoxManager;
+    protected targetSelect: HTMLSelectElement | null;
+    protected isInitializing: boolean;
+    protected lastValue: OptionValue;
+    /** 서브클래스에서 기본 placeholder를 지정 */
+    protected abstract get defaultPlaceholder(): string;
+    constructor(element: HTMLElement);
+    /** 초기화 완료 처리 (서브클래스 생성자 마지막에 호출) */
+    protected completeInitialization(): void;
+    /**
+     * 타겟 select 요소 찾기
+     */
+    protected findTargetSelect(element: HTMLElement): HTMLSelectElement | null;
+    /**
+     * HTML에서 속성 파싱
+     */
+    protected parseAttributesFromHTML(): {
+        placeholder?: string;
+        value?: string;
+        disabled?: boolean;
+        size?: 'xs' | 'sm' | 'md';
+    };
+    /**
+     * 값 변환 훅 - SelectBox에서 originalValue 매핑을 위해 오버라이드
+     * 기본 동작: 그대로 문자열 변환
+     */
+    protected resolveValue(value: string | number): string;
+    /**
+     * 타겟 select와 동기화 (Single 모드)
+     */
+    protected syncWithTargetSelect(value: string | number): void;
+    /**
+     * 타겟 select와 동기화 (Multiple 모드)
+     */
+    protected syncWithTargetSelectMultiple(values: (string | number)[]): void;
+    getOptions(): DropdownOption[];
+    updateOptions(newOptions: DropdownOption[]): void;
+    setDisabled(disabled: boolean): void;
+    open(): void;
+    close(): void;
+    focus(): void;
+    destroy(): void;
+    selectAll(): void;
+    deselectAll(): void;
+    isMultiple(): boolean;
+    toggleSelectAll(): void;
+}

package/dist/types/assets/scripts/comboBox.d.ts

@@ -0,0 +1,60 @@
+import type { Size } from '../../constant/size';
+import type { OptionValue } from '../../src/types';
+import { BaseBox } from './baseBox';
+import type { DropdownOption } from './utils/unifiedBox/dropdownModel';
+import { type UnifiedBoxManagerConfig } from './utils/unifiedBox/unifiedBoxManager';
+export interface ComboBoxOptionType {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboBoxConfig {
+    options?: ComboBoxOptionType[];
+    placeholder?: string;
+    value?: OptionValue;
+    onChange?: (value: OptionValue) => void;
+    onSearch?: (searchValue: string) => void;
+    onEdit?: () => void;
+    onSelectAll?: () => void;
+    onSearchAll?: () => void;
+    onComplete?: () => void;
+    onTagRemove?: (tagId: string | number) => void;
+    onScrollBottom?: () => void;
+    searchDebounceMs?: number;
+    maxHeight?: number;
+    disabled?: boolean;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    label?: string;
+    required?: boolean;
+}
+export declare class ComboBox extends BaseBox {
+    protected get defaultPlaceholder(): string;
+    constructor(element: HTMLElement, config?: ComboBoxConfig);
+    /**
+     * HTML select에서 옵션 파싱
+     */
+    private parseOptionsFromHTML;
+    getValues(): DropdownOption[];
+    setValues(value: DropdownOption[]): void;
+    clearInput(): void;
+    getDebugInfo(): {
+        config: UnifiedBoxManagerConfig;
+        modelState: any;
+        isOpen: boolean;
+    };
+    getSelectedCount(): number;
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     */
+    setFocusIndex(index: number): void;
+}

package/dist/types/assets/scripts/datePicker.d.ts

@@ -0,0 +1,86 @@
+import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
+export type DatePickerSize = 'xs' | 'sm';
+export interface ValidationError {
+    index: number;
+    date: string | Date;
+    minDate?: string | Date;
+    maxDate?: string | Date;
+    violations: Array<'minDate' | 'maxDate'>;
+    previousDate?: string | Date;
+}
+interface Options {
+    buttons?: DatePickerButton[];
+    size: DatePickerSize;
+    autoComplete?: 'on' | 'off';
+    datePickerOptions: DatePickerOptionWrapper[];
+    onValidationError?: (error: ValidationError) => void;
+}
+interface DatePickerOptionWrapper {
+    element: string;
+    attrName?: string;
+    placeholder?: string;
+    options: FlatpickrOptions;
+}
+interface DatePickerButton {
+    text: string;
+    period: number;
+    unit: 'days' | 'weeks' | 'months' | 'years';
+    isCurrent: boolean;
+}
+export declare class DatePicker {
+    private static instanceCounter;
+    private static usedWrappers;
+    private readonly contentWrapper;
+    private readonly datePickerOptions;
+    private readonly size;
+    private readonly instanceId;
+    private separator;
+    private autoComplete;
+    private buttons;
+    private flatpickrInstances;
+    private currentButton;
+    private dateFormat;
+    private onValidationError?;
+    constructor(wrapper: HTMLElement, options: Options);
+    private validateWrapper;
+    private init;
+    private validationDependencies;
+    private initializeWrapper;
+    private initButtonGroup;
+    private createButtonElement;
+    private reRenderButtonGroup;
+    private initDatePicker;
+    private initializeFlatpickr;
+    private createBlurHandler;
+    private setupFlatpickrLocale;
+    private createInputHandler;
+    private findFlatpickrInstanceByInput;
+    private clearInputValue;
+    private restorePreviousDate;
+    private createHourInputHandler;
+    private createMinuteInputHandler;
+    private createMouseDownHandler;
+    private createOnChangeHandler;
+    private invokeOriginalOnChange;
+    private isValidDate;
+    private validateAndRestoreIfNeeded;
+    private findFlatpickrInstanceIndexByInput;
+    private restoreDateToInstance;
+    private createOnReadyHandler;
+    private createOnDestroyHandler;
+    private convertDateOption;
+    private validateDate;
+    private checkDateViolations;
+    setDate(dates: string[]): void;
+    private formatDateForOption;
+    private parseDateWithMultipleFormats;
+    private formatMomentDate;
+    private calculatePeriod;
+    private updateDateWithButton;
+    private setMultipleDates;
+    private updateButtonsByPeriod;
+    private calculateDatesFromButton;
+    private convertFlatpickrFormatToMoment;
+    getDates(): string[];
+}
+export {};

package/dist/types/assets/scripts/featuredIcon.d.ts

@@ -0,0 +1,22 @@
+export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+export type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface FeaturedIconOptions {
+    svgString: string;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+export declare class FeaturedIcon {
+    private element;
+    private options;
+    constructor(options: FeaturedIconOptions);
+    private createElement;
+    private addSizeToSvg;
+    getElement(): HTMLElement;
+    updateColor(color: FeaturedIconColor): void;
+    updateSize(size: FeaturedIconSize): void;
+    destroy(): void;
+    static create(options: FeaturedIconOptions): FeaturedIcon;
+}

package/dist/types/assets/scripts/fileInput/const/classNames.d.ts

@@ -0,0 +1,15 @@
+export declare const FILE_INPUT_CLASS_NAMES: {
+    fileInput: string;
+    inputContainer: string;
+    label: string;
+    helpIcon: string;
+    hintText: string;
+    hintList: string;
+    hintItem: string;
+    fileTags: string;
+    fileTagContainer: string;
+    fileImage: string;
+};
+export declare const getFileInputSizeClassName: (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/types/assets/scripts/fileInput/const/index.d.ts

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

package/dist/types/assets/scripts/fileInput/const/types.d.ts

@@ -0,0 +1,88 @@
+export declare enum FileInputErrorType {
+    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: FileInputErrorType;
+}
+export type FileInputSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface BaseFileInputOptions {
+    /**
+     * Size of the input
+     */
+    size?: FileInputSize;
+    /**
+     * 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;
+    /**
+     * Callback when files change
+     */
+    onChange?: (files: File[]) => void;
+    /**
+     * Callback when file selection fails
+     */
+    onFail?: (files: InvalidFile[]) => void;
+    /**
+     * Label shown on the button
+     */
+    buttonLabel?: 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;
+    /**
+     * Container element or selector to automatically append the file input
+     * Can be a DOM element, element ID, or CSS selector
+     */
+    container?: HTMLElement | string;
+    /**
+     * Additional CSS class names to add to the main file input element
+     */
+    className?: string;
+}
+type RequiredKeys = 'size' | 'buttonLabel' | 'multiple' | 'disabled';
+export type RequiredFileInputProps = Required<Pick<BaseFileInputOptions, RequiredKeys>> & Omit<BaseFileInputOptions, RequiredKeys | 'container'>;
+export {};

package/dist/types/assets/scripts/fileInput/fileInput.d.ts

@@ -0,0 +1,13 @@
+import { BaseFileInputOptions } from './const/types';
+export declare class FileInput {
+    private model;
+    private view;
+    constructor(options: BaseFileInputOptions);
+    private appendToContainer;
+    private setupEventListeners;
+    private handleBrowseClick;
+    private handleFileChange;
+    getElement(): HTMLDivElement;
+    setDisabled(disabled: boolean): void;
+    destroy(): void;
+}

package/dist/types/assets/scripts/fileInput/fileInputModel.d.ts

@@ -0,0 +1,12 @@
+import { BaseFileInputOptions, InvalidFile, RequiredFileInputProps } from './const/types';
+export declare class FileInputModel {
+    private options;
+    constructor(options: BaseFileInputOptions);
+    getOptions(): RequiredFileInputProps;
+    validateFiles(fileList: File[]): {
+        validFiles: File[];
+        invalidFiles: InvalidFile[];
+    };
+    setDisabled(disabled: boolean): void;
+    isDisabled(): boolean;
+}

package/dist/types/assets/scripts/fileInput/fileInputView.d.ts

@@ -0,0 +1,42 @@
+import { RequiredFileInputProps } from './const/types';
+export declare class FileInputView {
+    private element;
+    private fileInputElement;
+    private buttonElement;
+    private options;
+    constructor(options: RequiredFileInputProps);
+    /**
+     * 메인 DOM 요소 생성
+     */
+    private createElement;
+    /**
+     * Hidden file input 생성
+     */
+    private createFileInput;
+    /**
+     * Input container 생성
+     */
+    private createInputContainer;
+    /**
+     * Label container 생성
+     */
+    private createLabelContainer;
+    /**
+     * Help icon 생성
+     */
+    private createHelpIcon;
+    private createButton;
+    /**
+     * Hint text 생성
+     */
+    private createHintText;
+    /**
+     * Hint list 생성
+     */
+    private createHintList;
+    setButtonDisabled(disabled: boolean): void;
+    getElement(): HTMLDivElement;
+    getFileInputElement(): HTMLInputElement;
+    getButtonElement(): HTMLButtonElement;
+    destroy(): void;
+}

package/dist/types/assets/scripts/fileInput/index.d.ts

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