@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,5 +1,6 @@
 import { OptionValue } from '../../src/types';
-import { DropdownOption } from './utils/unifiedBox/DropdownModel';
+import { BaseBox } from './baseBox';
+import { DropdownOption } from './utils/unifiedBox/dropdownModel';
 export interface SelectBoxOptionType {
     id: string | number;
     text: string;
@@ -20,29 +21,21 @@ export interface SelectBoxConfig {
     onSelectAll?: () => void;
     onComplete?: () => void;
 }
-export declare class SelectBox {
-    private element;
-    private unifiedSelectBox;
-    private targetSelect;
-    private isInitializing;
-    private lastValue;
+export declare class SelectBox extends BaseBox {
+    protected get defaultPlaceholder(): string;
     constructor(element: HTMLElement, config?: SelectBoxConfig);
     /**
      * JavaScript 옵션을 DropdownOption 형식으로 변환
      */
     private normalizeOptions;
-    /**
-     * 타겟 select 요소 찾기
-     */
-    private findTargetSelect;
     /**
      * HTML select에서 옵션 파싱
      */
     private parseOptionsFromHTML;
     /**
-     * HTML에서 속성 파싱
+     * 값 변환 - originalValue 매핑
      */
-    private parseAttributesFromHTML;
+    protected resolveValue(value: string | number): string;
     /**
      * ID로부터 실제 HTML select의 value 값을 가져오기
      */
@@ -51,27 +44,7 @@ export declare class SelectBox {
      * 실제 HTML select의 value 값으로부터 내부 ID를 가져오기
      */
     private getIdFromRealValue;
-    /**
-     * 타겟 select와 동기화 (Single 모드)
-     */
-    private syncWithTargetSelect;
-    /**
-     * 타겟 select와 동기화 (Multiple 모드)
-     */
-    private syncWithTargetSelectMultiple;
     getValues(): DropdownOption[];
     setValues(value: DropdownOption[]): void;
-    getOptions(): DropdownOption[];
-    updateOptions(newOptions: DropdownOption[]): void;
-    setDisabled(disabled: boolean): void;
-    open(): void;
-    close(): void;
-    focus(): void;
-    destroy(): void;
-    selectAll(): void;
-    deselectAll(): void;
     getSelectedCount(): number;
-    isMultiple(): boolean;
-    toggleSelectAll(): void;
 }
-//# sourceMappingURL=selectBox.d.ts.map

package/dist/types/assets/scripts/shared/ButtonCloseX.d.ts

@@ -3,4 +3,3 @@ export type ButtonCloseXTheme = 'dark' | 'light';
 export declare const SVG_SIZE: Record<ButtonCloseXSize, number>;
 export declare const X_CLOSE_SVG: (size: string) => string;
 export declare function ButtonCloseX(size: ButtonCloseXSize, theme?: ButtonCloseXTheme, additionalClasses?: string, ariaLabel?: string, onClick?: () => void): string;
-//# sourceMappingURL=ButtonCloseX.d.ts.map

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

@@ -39,4 +39,3 @@ export declare class Slider {
     enable(): void;
     destroy(): void;
 }
-//# sourceMappingURL=slider.d.ts.map

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

@@ -5,4 +5,3 @@ export declare class Tab {
     private init;
     destroy(): void;
 }
-//# sourceMappingURL=tab.d.ts.map

package/dist/types/assets/scripts/table/Table.d.ts

@@ -0,0 +1,41 @@
+import type { TableOptions } from './const/types';
+export declare class Table {
+    private element;
+    private tableElement;
+    private theadElement;
+    private tbodyElement;
+    private options;
+    private sortState;
+    private selectedIndices;
+    private abortController;
+    constructor(options: TableOptions);
+    private createElement;
+    private createOuterElement;
+    private createTableElement;
+    private wrapWithScrollContainer;
+    private updateOuterClasses;
+    private createColGroup;
+    private createHeader;
+    private createHeaderCheckboxCell;
+    private createHeaderDataCell;
+    private renderBody;
+    private renderEmptyState;
+    private renderHorizontalBody;
+    private createRowCheckboxCell;
+    private createHorizontalRow;
+    private renderVerticalBody;
+    private createVerticalRow;
+    private createVerticalValueCell;
+    private handleSort;
+    private getNextSortDirection;
+    private updateSortIcons;
+    private getAriaSortValue;
+    private handleSelectAll;
+    private handleRowSelect;
+    private updateRowSelectionStyles;
+    private updateHeaderCheckbox;
+    getElement(): HTMLDivElement;
+    setData(data: Record<string, unknown>[]): void;
+    getSelectedIndices(): number[];
+    destroy(): void;
+}

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

@@ -0,0 +1,27 @@
+export declare const TABLE_CLASS_NAMES: {
+    readonly table: "ncua-table";
+    readonly horizontal: "ncua-table--horizontal";
+    readonly vertical: "ncua-table--vertical";
+    readonly hoverable: "ncua-table--hoverable";
+    readonly fixedHeader: "ncua-table--fixed-header";
+    readonly scrollContainer: "ncua-table__scroll-container";
+    readonly tableElement: "ncua-table__table";
+    readonly header: "ncua-table__header";
+    readonly headerCell: "ncua-table__header-cell";
+    readonly headerCellSortable: "ncua-table__header-cell--sortable";
+    readonly sortIcon: "ncua-table__sort-icon";
+    readonly body: "ncua-table__body";
+    readonly row: "ncua-table__row";
+    readonly rowSelected: "ncua-table__row--selected";
+    readonly rowWarning: "ncua-table__row--warning";
+    readonly rowError: "ncua-table__row--error";
+    readonly cell: "ncua-table__cell";
+    readonly checkboxCell: "ncua-table__checkbox-cell";
+    readonly checkboxCellHeader: "ncua-table__checkbox-cell--header";
+    readonly checkboxCellBody: "ncua-table__checkbox-cell--body";
+    readonly footer: "ncua-table__footer";
+    readonly footerRow: "ncua-table__footer-row";
+    readonly pagination: "ncua-table__pagination";
+    readonly empty: "ncua-table__empty";
+    readonly required: "ncua-table__required";
+};

package/dist/types/assets/scripts/table/const/index.d.ts

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

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

@@ -0,0 +1,23 @@
+export type TableType = 'horizontal' | 'vertical';
+export type SortDirection = 'asc' | 'desc' | 'none';
+export type RowStatus = 'warning' | 'error';
+export type TableColumn = {
+    key: string;
+    label: string;
+    width?: string;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: unknown, row: Record<string, unknown>, rowIndex: number) => HTMLElement | string;
+};
+export type TableOptions = {
+    type?: TableType;
+    columns?: TableColumn[];
+    data?: Record<string, unknown>[];
+    hoverable?: boolean;
+    selectable?: boolean;
+    fixedHeader?: boolean;
+    maxHeight?: string;
+    emptyText?: string;
+    onSort?: (key: string, direction: SortDirection) => void;
+    onSelect?: (selectedIndices: number[]) => void;
+};

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

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

package/dist/types/assets/scripts/tag/Tag.d.ts

@@ -25,4 +25,3 @@ export declare class Tag {
     private updateCountElement;
     destroy(): void;
 }
-//# sourceMappingURL=Tag.d.ts.map

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

@@ -9,4 +9,3 @@ export declare const TAG_CLASS_NAMES: {
 };
 export declare const getTagSizeClassName: (size: string) => string;
 export declare const getTooltipPositionClassName: (position: string) => string;
-//# sourceMappingURL=classNames.d.ts.map

package/dist/types/assets/scripts/tag/const/index.d.ts

@@ -1,4 +1,3 @@
 export * from './types';
 export * from './classNames';
 export * from './sizes';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/assets/scripts/tag/const/sizes.d.ts

@@ -5,4 +5,3 @@ export declare const iconSize: {
 export declare const MARGIN = 10;
 export declare const DEFAULT_TOOLTIP_WIDTH = 200;
 export declare const DEFAULT_TOOLTIP_HEIGHT = 60;
-//# sourceMappingURL=sizes.d.ts.map

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

@@ -31,4 +31,3 @@ export interface RequiredTagProps extends Required<Pick<BaseTagOptions, 'text' |
     close?: boolean;
     onButtonClick?: (event: MouseEvent) => void;
 }
-//# sourceMappingURL=types.d.ts.map

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

@@ -1,4 +1,3 @@
 export { Tag } from './Tag';
 export * from './const/types';
 export * from './const/classNames';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/assets/scripts/tooltip/Tooltip.d.ts

@@ -52,4 +52,3 @@ export declare class Tooltip {
     static createAutoLong(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
     static createAutoLongWithShadowDOM(title: string, content: string, options?: Partial<TooltipOptions>): Tooltip;
 }
-//# sourceMappingURL=Tooltip.d.ts.map

package/dist/types/assets/scripts/tooltip/TooltipLayerManager.d.ts

@@ -19,4 +19,3 @@ export declare class TooltipLayerManager {
     getPanel(id: string): HTMLElement | null;
     destroy(): void;
 }
-//# sourceMappingURL=TooltipLayerManager.d.ts.map

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

@@ -15,4 +15,3 @@ export declare const CLASS_NAMES: {
     TOOLTIP_PANEL: string;
     BUTTON_CLOSE_X: string;
 };
-//# sourceMappingURL=classNames.d.ts.map

package/dist/types/assets/scripts/tooltip/const/constants.d.ts

@@ -1,4 +1,4 @@
-import { TooltipOptions } from './types';
+import type { TooltipOptions } from './types';
 export declare const MARGIN = 10;
 export declare const DEFAULT_TOOLTIP_WIDTH = 200;
 export declare const DEFAULT_TOOLTIP_HEIGHT = 60;
@@ -31,4 +31,3 @@ export declare const EVENT_OPTIONS: {
     };
 };
 export declare const TOOLTIP_DEFAULT_VALUE: TooltipOptions;
-//# sourceMappingURL=constants.d.ts.map

package/dist/types/assets/scripts/tooltip/const/icons.d.ts

@@ -2,4 +2,3 @@ export declare const SVG_ICONS: {
     readonly 'help-circle-stroke': (size: number) => string;
     readonly 'help-circle-fill': (size: number) => string;
 };
-//# sourceMappingURL=icons.d.ts.map

package/dist/types/assets/scripts/tooltip/const/index.d.ts

@@ -3,4 +3,3 @@ export { SVG_ICONS } from './icons';
 export { CLASS_NAMES } from './classNames';
 export { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY, TOOLTIP_DEFAULT_VALUE, TOOLTIP_OFFSET, VIEWPORT_MARGIN, ICON_SIZES, TRANSITION_DURATION, OFFSCREEN_POSITION, OPACITY, POSITION, Z_INDEX, EVENT_OPTIONS, } from './constants';
 export { CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG } from './templates';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/assets/scripts/tooltip/const/templates.d.ts

@@ -14,4 +14,3 @@ export declare const HTML_TEMPLATES: {
     readonly TOOLTIP_CONTENT_SHADOW: (className: string) => string;
 };
 export declare const FALLBACK_ICON_SVG: (size: number) => string;
-//# sourceMappingURL=templates.d.ts.map

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

@@ -12,4 +12,3 @@ export interface TooltipOptions {
     className?: string;
 }
 export type CalculatedPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-//# sourceMappingURL=types.d.ts.map

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

@@ -4,4 +4,3 @@ export type { TooltipOptions, CalculatedPosition } from './const';
 export { calculateOptimalPosition } from './utils';
 export { SVG_ICONS, MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
 export default Tooltip;
-//# sourceMappingURL=index.d.ts.map

package/dist/types/assets/scripts/tooltip/utils.d.ts

@@ -1,3 +1,2 @@
 import { CalculatedPosition } from './const';
 export declare function calculateOptimalPosition(triggerElement: HTMLElement, tooltipElement: HTMLElement, preferredPosition?: string): CalculatedPosition;
-//# sourceMappingURL=utils.d.ts.map

package/dist/types/assets/scripts/utils/debounce.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 디바운스 유틸리티
+ * 마지막 호출 후 지정된 시간이 지나야 콜백이 실행됨
+ */
+export declare function debounce<T extends (...args: any[]) => any>(fn: T, ms: number): {
+    (...args: Parameters<T>): void;
+    cancel: () => void;
+};

package/dist/types/assets/scripts/utils/unifiedBox/domRenderer.d.ts

@@ -0,0 +1,107 @@
+export interface RenderableOption {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+    selected?: boolean;
+    focused?: boolean;
+}
+export interface DropdownRenderConfig {
+    maxHeight: number;
+    size: 'xs' | 'sm' | 'md';
+    listboxId: string;
+    noResultsText?: string;
+}
+export interface OptionElementData {
+    element: HTMLLIElement;
+    option: RenderableOption;
+    index: number;
+}
+export declare class DOMRenderer {
+    private optionElementCache;
+    /**
+     * 드롭다운 컨테이너 생성 (구조만)
+     */
+    createDropdownStructure(config: DropdownRenderConfig): {
+        dropdown: HTMLDivElement;
+        content: HTMLDivElement;
+        optionsList: HTMLUListElement;
+    };
+    /**
+     * 단일 옵션 엘리먼트 생성 (재사용 가능)
+     */
+    createOptionElement(option: RenderableOption, index: number, config: DropdownRenderConfig): HTMLLIElement;
+    /**
+     * 옵션 엘리먼트 상태 업데이트 (DOM 조작 최소화)
+     */
+    updateOptionElement(element: HTMLLIElement, option: RenderableOption, index: number, config: DropdownRenderConfig): void;
+    /**
+     * "결과 없음" 엘리먼트 생성
+     */
+    createNoResultsElement(text?: string): HTMLLIElement;
+    /**
+     * 옵션 리스트 효율적 업데이트 (Differential Rendering)
+     */
+    updateOptionsList(container: HTMLUListElement, newOptions: RenderableOption[], config: DropdownRenderConfig, showNoResults?: boolean): HTMLLIElement[];
+    /**
+     * 컨테이너 자식 엘리먼트 효율적 업데이트
+     */
+    private updateContainerChildren;
+    /**
+     * 클래스 토글 (변경이 필요한 경우에만)
+     */
+    private toggleClass;
+    /**
+     * 입력 필드 생성 (InputFieldUtils에서 이동)
+     */
+    createInputField(config: {
+        placeholder?: string;
+        disabled?: boolean;
+        size?: 'xs' | 'sm' | 'md';
+        showSearchIcon?: boolean;
+        onInput?: (value: string) => void;
+        onClick?: () => void;
+        onShowAll?: () => void;
+        onClear?: () => void;
+    }): {
+        container: HTMLElement;
+        input: HTMLInputElement;
+        setValue: (value: string) => void;
+        focus: () => void;
+        blur: () => void;
+    };
+    /**
+     * 캐시 정리
+     */
+    clearCache(): void;
+    /**
+     * 특정 옵션 캐시 제거
+     */
+    removeCachedOption(optionId: string | number): void;
+    /**
+     * 공통 DOM 생성 유틸리티
+     */
+    static createElementWithClass(tagName: string, className: string, textContent?: string): HTMLElement;
+    /**
+     * 버튼 엘리먼트 생성
+     */
+    static createButton(className: string, textContent: string, onClick?: (e: Event) => void): HTMLButtonElement;
+    /**
+     * SVG 아이콘 생성
+     */
+    static createSvgIcon(iconName: string, size?: number): SVGElement;
+    /**
+     * 푸터 생성
+     */
+    createFooter(config: {
+        multiple?: boolean;
+        showFooterButtons?: boolean;
+        onSelectAll?: () => void;
+        onEdit?: () => void;
+        onComplete?: () => void;
+        selectAllButtonText?: string;
+    }): HTMLElement;
+    /**
+     * 전체 선택 버튼 텍스트 업데이트
+     */
+    updateSelectAllButtonText(footerElement: HTMLElement, text: string): void;
+}

package/dist/types/assets/scripts/utils/unifiedBox/dropdownModel.d.ts

@@ -0,0 +1,142 @@
+export interface DropdownOption {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+    originalValue?: string;
+}
+export interface DropdownState {
+    isOpen: boolean;
+    focusedIndex: number;
+    selectedValues: (string | number)[];
+    searchValue: string;
+    showAllItems: boolean;
+    options: DropdownOption[];
+    filteredOptions: DropdownOption[];
+}
+export interface StateChangeListener {
+    onStateChange(newState: DropdownState, changedFields: string[]): void;
+}
+/**
+ * 드롭다운 상태 관리 모델
+ * Observer Pattern을 통한 상태 변경 알림
+ */
+export type FilterStrategy = (options: DropdownOption[], searchValue: string, showAllItems: boolean) => DropdownOption[];
+export declare class DropdownModel {
+    private state;
+    private listeners;
+    protected multiple: boolean;
+    private filterStrategy;
+    constructor(initialOptions: DropdownOption[], multiple?: boolean, filterStrategy?: FilterStrategy);
+    /** SelectBox 기본 전략: 항상 모든 옵션 표시 */
+    static defaultFilterStrategy: FilterStrategy;
+    /** ComboBox 전략: 검색어/전체보기 기반 필터링 */
+    static comboBoxFilterStrategy: FilterStrategy;
+    /**
+     * 상태 변경 리스너 등록
+     */
+    addListener(listener: StateChangeListener): void;
+    /**
+     * 상태 변경 리스너 제거
+     */
+    removeListener(listener: StateChangeListener): void;
+    /**
+     * 상태 변경 알림
+     */
+    private notifyListeners;
+    /**
+     * 드롭다운 열기/닫기
+     */
+    setOpen(isOpen: boolean): void;
+    /**
+     * 포커스 인덱스 설정
+     */
+    setFocusedIndex(index: number): void;
+    /**
+     * 검색어 설정 및 필터링
+     */
+    setSearchValue(searchValue: string): void;
+    /**
+     * 전체 보기 토글
+     */
+    setShowAllItems(showAll: boolean): void;
+    /**
+     * 선택된 값들을 직접 설정 (protected)
+     */
+    protected setSelectedValues(values: (string | number)[]): void;
+    /**
+     * 옵션 선택/해제
+     */
+    toggleOption(optionId: string | number): void;
+    /**
+     * 옵션 업데이트
+     */
+    updateOptions(newOptions: DropdownOption[]): void;
+    /**
+     * 필터링된 옵션 업데이트
+     */
+    private updateFilteredOptions;
+    /**
+     * 현재 상태 반환 (읽기 전용)
+     */
+    getState(): Readonly<DropdownState>;
+    /**
+     * 다중 선택 모드 여부 반환
+     */
+    isMultiple(): boolean;
+    /**
+     * 선택된 옵션들 반환
+     */
+    getSelectedOptions(): DropdownOption[];
+    /**
+     * 옵션이 선택되었는지 확인
+     */
+    isOptionSelected(optionId: string | number): boolean;
+    /**
+     * 상태 리셋
+     */
+    reset(): void;
+    /**
+     * 전체 선택/해제 토글 (MultiSelectUtils에서 이동)
+     */
+    toggleSelectAll(): void;
+    /**
+     * 전체 선택 버튼 텍스트 반환 (MultiSelectUtils에서 이동)
+     */
+    getSelectAllButtonText(): string;
+    /**
+     * 모든 항목이 선택되었는지 확인 (MultiSelectUtils에서 이동)
+     */
+    isAllItemsSelected(): boolean;
+    /**
+     * 검색 및 필터링 업데이트 (SearchFilterUtils에서 이동)
+     */
+    updateSearchAndFilter(searchValue: string, showAllItems?: boolean): void;
+    /**
+     * 검색어만 업데이트 (필터링 없이, API 모드용)
+     */
+    updateSearchValue(searchValue: string): void;
+    /**
+     * 드롭다운이 열릴 수 있는지 확인 (ComboBox용)
+     */
+    canOpenDropdown(): boolean;
+    /**
+     * 검색 결과가 없는지 확인
+     */
+    hasNoResults(): boolean;
+    /**
+     * 값 설정 (API 호환성)
+     */
+    setValue(value: string | number | (string | number)[]): void;
+    /**
+     * 값 가져오기 (API 호환성)
+     */
+    getValue(): string | number | (string | number)[];
+    /**
+     * 입력 초기화 (ComboBox용)
+     */
+    clearInput(): void;
+    /**
+     * 디버그 정보 (개발용)
+     */
+    getDebugInfo(): any;
+}