@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { Tooltip } from './Tooltip';
+export { Tooltip } from './Tooltip';
+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;

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

@@ -0,0 +1,10 @@
+import { Tooltip } from './Tooltip';
+export { Tooltip } from './Tooltip';
+export { calculateOptimalPosition } from './utils';
+export { SVG_ICONS, MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+    window.ncua = window.ncua || {};
+    window.ncua.Tooltip = Tooltip;
+}
+export default Tooltip;

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

@@ -0,0 +1,2 @@
+import { CalculatedPosition } from './const';
+export declare function calculateOptimalPosition(triggerElement: HTMLElement, tooltipElement: HTMLElement, preferredPosition?: string): CalculatedPosition;

package/dist/temp/assets/scripts/tooltip/utils.js

@@ -0,0 +1,33 @@
+import { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
+export function calculateOptimalPosition(triggerElement, tooltipElement, preferredPosition = 'bottom') {
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+    const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
+    const spaces = {
+        top: triggerRect.top,
+        bottom: viewportHeight - triggerRect.bottom,
+        left: triggerRect.left,
+        right: viewportWidth - triggerRect.right,
+    };
+    const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+    const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+    for (const position of POSITION_PRIORITY) {
+        const hasSpace = position === 'bottom' || position === 'top'
+            ? spaces[position] >= tooltipHeight + MARGIN
+            : spaces[position] >= tooltipWidth + MARGIN;
+        if (hasSpace) {
+            if (position === 'bottom' || position === 'top') {
+                const centerX = triggerRect.left + triggerRect.width / 2;
+                const tooltipHalfWidth = tooltipWidth / 2;
+                if (centerX - tooltipHalfWidth < MARGIN) {
+                    return `${position}-left`;
+                }
+                else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
+                    return `${position}-right`;
+                }
+            }
+            return position;
+        }
+    }
+    return preferredPosition;
+}

package/dist/temp/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/temp/assets/scripts/utils/debounce.js

@@ -0,0 +1,23 @@
+/**
+ * 디바운스 유틸리티
+ * 마지막 호출 후 지정된 시간이 지나야 콜백이 실행됨
+ */
+export function debounce(fn, ms) {
+    let timer;
+    const debounced = (...args) => {
+        if (timer !== undefined) {
+            clearTimeout(timer);
+        }
+        timer = window.setTimeout(() => {
+            timer = undefined;
+            fn(...args);
+        }, ms);
+    };
+    debounced.cancel = () => {
+        if (timer !== undefined) {
+            clearTimeout(timer);
+            timer = undefined;
+        }
+    };
+    return debounced;
+}

package/dist/{types/assets/scripts/utils/unifiedBox/DOMRenderer.d.ts → temp/assets/scripts/utils/unifiedBox/domRenderer.d.ts}

@@ -105,4 +105,3 @@ export declare class DOMRenderer {
      */
     updateSelectAllButtonText(footerElement: HTMLElement, text: string): void;
 }
-//# sourceMappingURL=DOMRenderer.d.ts.map

package/dist/temp/assets/scripts/utils/unifiedBox/domRenderer.js

@@ -0,0 +1,367 @@
+export class DOMRenderer {
+    constructor() {
+        this.optionElementCache = new Map();
+    }
+    /**
+     * 드롭다운 컨테이너 생성 (구조만)
+     */
+    createDropdownStructure(config) {
+        const dropdown = document.createElement('div');
+        dropdown.className = `ncua-select-dropdown ncua-select-dropdown--down ncua-select-dropdown--${config.size}`;
+        dropdown.style.display = 'none';
+        const content = document.createElement('div');
+        content.className = 'ncua-select-dropdown__content';
+        const optionsList = document.createElement('ul');
+        optionsList.className = 'ncua-select-dropdown__options';
+        optionsList.setAttribute('role', 'listbox');
+        optionsList.setAttribute('id', config.listboxId);
+        optionsList.style.maxHeight = `${config.maxHeight}px`;
+        optionsList.style.overflowY = 'auto'; // 스크롤 활성화
+        content.appendChild(optionsList);
+        dropdown.appendChild(content);
+        return { dropdown, content, optionsList };
+    }
+    /**
+     * 단일 옵션 엘리먼트 생성 (재사용 가능)
+     */
+    createOptionElement(option, index, config) {
+        const cached = this.optionElementCache.get(option.id);
+        if (cached) {
+            this.updateOptionElement(cached, option, index, config);
+            return cached;
+        }
+        const element = document.createElement('li');
+        element.className = 'ncua-select-dropdown__option';
+        element.setAttribute('data-value', String(option.id));
+        element.setAttribute('data-index', String(index));
+        element.setAttribute('role', 'option');
+        element.id = `${config.listboxId}-${option.id}`;
+        const span = document.createElement('span');
+        span.className = 'ncua-select-dropdown__option-text';
+        span.textContent = option.label;
+        element.appendChild(span);
+        this.updateOptionElement(element, option, index, config);
+        this.optionElementCache.set(option.id, element);
+        return element;
+    }
+    /**
+     * 옵션 엘리먼트 상태 업데이트 (DOM 조작 최소화)
+     */
+    updateOptionElement(element, option, index, config) {
+        // 클래스 업데이트 (필요한 경우에만)
+        const shouldHaveSelected = option.selected || false;
+        const shouldHaveFocused = option.focused || false;
+        const shouldHaveDisabled = option.disabled || false;
+        this.toggleClass(element, 'ncua-select-dropdown__option--selected', shouldHaveSelected);
+        this.toggleClass(element, 'ncua-select-dropdown__option--focused', shouldHaveFocused);
+        this.toggleClass(element, 'ncua-select-dropdown__option--disabled', shouldHaveDisabled);
+        // 속성 업데이트 (필요한 경우에만)
+        element.setAttribute('aria-selected', String(shouldHaveSelected));
+        element.setAttribute('data-index', String(index));
+    }
+    /**
+     * "결과 없음" 엘리먼트 생성
+     */
+    createNoResultsElement(text = '일치하는 결과가 없습니다.') {
+        const noResults = document.createElement('li');
+        noResults.className = 'ncua-select-dropdown__no-results';
+        noResults.textContent = text;
+        return noResults;
+    }
+    /**
+     * 옵션 리스트 효율적 업데이트 (Differential Rendering)
+     */
+    updateOptionsList(container, newOptions, config, showNoResults = false) {
+        // 스크롤 위치 저장
+        const scrollTop = container.scrollTop;
+        // 결과 없음 처리
+        if (showNoResults) {
+            container.innerHTML = '';
+            container.appendChild(this.createNoResultsElement(config.noResultsText));
+            return [];
+        }
+        const newElements = [];
+        // 새 옵션들로 엘리먼트 생성/업데이트
+        newOptions.forEach((option, index) => {
+            const element = this.createOptionElement(option, index, config);
+            newElements.push(element);
+        });
+        // DOM 업데이트 최소화 - 변경된 부분만 업데이트
+        this.updateContainerChildren(container, newElements);
+        // 스크롤 위치 복원 (다음 프레임에서 실행)
+        requestAnimationFrame(() => {
+            container.scrollTop = scrollTop;
+        });
+        return newElements;
+    }
+    /**
+     * 컨테이너 자식 엘리먼트 효율적 업데이트
+     */
+    updateContainerChildren(container, newChildren) {
+        // 기존 엘리먼트 제거 (새 리스트에 없는 것들)
+        Array.from(container.children).forEach((child) => {
+            if (!newChildren.includes(child)) {
+                child.remove();
+            }
+        });
+        // 새 엘리먼트 추가 (순서 유지)
+        newChildren.forEach((child, index) => {
+            const currentChild = container.children[index];
+            if (currentChild !== child) {
+                if (currentChild) {
+                    container.insertBefore(child, currentChild);
+                }
+                else {
+                    container.appendChild(child);
+                }
+            }
+        });
+    }
+    /**
+     * 클래스 토글 (변경이 필요한 경우에만)
+     */
+    toggleClass(element, className, shouldHave) {
+        const hasClass = element.classList.contains(className);
+        if (shouldHave && !hasClass) {
+            element.classList.add(className);
+        }
+        else if (!shouldHave && hasClass) {
+            element.classList.remove(className);
+        }
+    }
+    /**
+     * 입력 필드 생성 (InputFieldUtils에서 이동)
+     */
+    createInputField(config) {
+        const actualSize = config.size === 'md' ? 'sm' : config.size || 'sm';
+        // 최상위 ncua-input 컨테이너 (React 버전과 동일)
+        const inputContainer = document.createElement('div');
+        inputContainer.className = `ncua-input ncua-input--${actualSize}`;
+        if (config.disabled)
+            inputContainer.classList.add('is-disabled');
+        // ncua-input__content 래퍼 (React 버전과 동일)
+        const inputContent = document.createElement('div');
+        inputContent.className = 'ncua-input__content';
+        // ncua-input__field 래퍼 (React 버전과 동일, size 포함)
+        const inputField = document.createElement('div');
+        inputField.className = `ncua-input__field ncua-input__field--${actualSize}`;
+        // 실제 입력 필드 (React 버전과 동일)
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = config.placeholder || '';
+        if (config.disabled)
+            input.disabled = true;
+        // 이벤트 리스너
+        if (config.onInput) {
+            input.addEventListener('input', (e) => {
+                config.onInput(e.target.value);
+            });
+        }
+        if (config.onClick) {
+            input.addEventListener('click', (event) => {
+                event.stopPropagation(); // 이벤트 버블링 방지
+                config.onClick();
+            });
+        }
+        // 클리어 버튼 (React 버전의 renderClearButton과 동일)
+        let clearButton = null;
+        if (config.onClear) {
+            clearButton = document.createElement('button');
+            clearButton.type = 'button';
+            clearButton.className = 'ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear';
+            clearButton.style.display = 'none'; // 초기에는 숨김
+            clearButton.addEventListener('click', config.onClear);
+            // 클리어 아이콘 (React와 동일한 크기)
+            const iconSize = actualSize === 'xs' ? 14 : 16;
+            const clearIcon = DOMRenderer.createSvgIcon('close', iconSize);
+            clearIcon.setAttribute('class', 'ncua-input__clear-icon');
+            clearButton.appendChild(clearIcon);
+            // 입력값 변경 시 클리어 버튼 표시/숨김
+            input.addEventListener('input', () => {
+                if (clearButton) {
+                    clearButton.style.display = input.value ? 'flex' : 'none';
+                }
+            });
+        }
+        // 전체 보기 버튼 (React 버전의 trailingElement와 동일)
+        let showAllButton = null;
+        if (config.onShowAll) {
+            showAllButton = document.createElement('div');
+            showAllButton.className = 'ncua-input__icon-wrap ncua-input__right-icon';
+            showAllButton.addEventListener('click', config.onShowAll);
+            // 전체 버튼 (React Button 컴포넌트와 유사한 구조)
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'ncua-btn ncua-btn--xxs ncua-btn--text';
+            // 아이콘
+            const iconSize = 14;
+            const showAllIcon = DOMRenderer.createSvgIcon('chevron-selector-vertical', iconSize);
+            button.appendChild(showAllIcon);
+            // 텍스트
+            const label = document.createElement('span');
+            label.className = 'ncua-btn__label';
+            label.textContent = '전체';
+            button.appendChild(label);
+            showAllButton.appendChild(button);
+        }
+        // 검색 아이콘 (React 버전의 leadingElement와 동일)
+        let searchIcon = null;
+        if (config.showSearchIcon) {
+            searchIcon = document.createElement('div');
+            searchIcon.className = 'ncua-input__icon-wrap ncua-input__left-icon';
+            // 검색 아이콘 (React와 동일한 크기와 색상)
+            const searchSvg = DOMRenderer.createSvgIcon('search', 14);
+            searchSvg.style.color = '#98a2b3'; // gray300에 해당하는 색상
+            searchIcon.appendChild(searchSvg);
+        }
+        // 구조 조립 (React 버전과 동일한 순서)
+        if (searchIcon)
+            inputField.appendChild(searchIcon);
+        inputField.appendChild(input);
+        if (clearButton)
+            inputField.appendChild(clearButton);
+        if (showAllButton)
+            inputField.appendChild(showAllButton);
+        inputContent.appendChild(inputField);
+        inputContainer.appendChild(inputContent);
+        return {
+            container: inputContainer,
+            input,
+            setValue: (value) => {
+                input.value = value;
+                // 클리어 버튼 표시 상태 업데이트
+                if (clearButton) {
+                    clearButton.style.display = value ? 'flex' : 'none';
+                }
+            },
+            focus: () => input.focus(),
+            blur: () => input.blur(),
+        };
+    }
+    /**
+     * 캐시 정리
+     */
+    clearCache() {
+        this.optionElementCache.clear();
+    }
+    /**
+     * 특정 옵션 캐시 제거
+     */
+    removeCachedOption(optionId) {
+        this.optionElementCache.delete(optionId);
+    }
+    /**
+     * 공통 DOM 생성 유틸리티
+     */
+    static createElementWithClass(tagName, className, textContent) {
+        const element = document.createElement(tagName);
+        element.className = className;
+        if (textContent) {
+            element.textContent = textContent;
+        }
+        return element;
+    }
+    /**
+     * 버튼 엘리먼트 생성
+     */
+    static createButton(className, textContent, onClick) {
+        const button = document.createElement('button');
+        button.className = className;
+        // React 컴포넌트와 일치하도록 span.ncua-btn__label 구조 사용
+        const label = document.createElement('span');
+        label.className = 'ncua-btn__label';
+        label.textContent = textContent;
+        button.appendChild(label);
+        if (onClick) {
+            button.addEventListener('click', onClick);
+        }
+        return button;
+    }
+    /**
+     * SVG 아이콘 생성
+     */
+    static createSvgIcon(iconName, size = 16) {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', size.toString());
+        svg.setAttribute('height', size.toString());
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('fill', 'none');
+        // 기본 아이콘들
+        switch (iconName) {
+            case 'close':
+                svg.innerHTML =
+                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 7 7 17M7 7l10 10"/>';
+                break;
+            case 'chevron-down':
+                svg.innerHTML =
+                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>';
+                break;
+            case 'chevron-selector-vertical':
+                svg.innerHTML =
+                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 15 5 5 5-5M7 9l5-5 5 5"/>';
+                break;
+            case 'search':
+                svg.innerHTML =
+                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0"></path>';
+                break;
+        }
+        return svg;
+    }
+    /**
+     * 푸터 생성
+     */
+    createFooter(config) {
+        // 푸터 생성
+        const footer = document.createElement('div');
+        footer.className = 'ncua-select-dropdown__footer';
+        const footerButtons = document.createElement('div');
+        footerButtons.className = 'ncua-select-dropdown__footer-buttons';
+        const footerLeft = document.createElement('div');
+        footerLeft.className = 'ncua-select-dropdown__footer-left';
+        const footerRight = document.createElement('div');
+        footerRight.className = 'ncua-select-dropdown__footer-right';
+        // 다중 선택인 경우 전체 선택 버튼 추가
+        if (config.multiple) {
+            const selectAllButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--text has-underline', config.selectAllButtonText || '전체 선택', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                config.onSelectAll?.();
+            });
+            footerLeft.appendChild(selectAllButton);
+        }
+        // 편집 버튼 (showFooterButtons가 true이고 onEdit가 있는 경우)
+        if (config.showFooterButtons && config.onEdit) {
+            const editButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary-gray', '편집', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                config.onEdit?.();
+            });
+            footerRight.appendChild(editButton);
+        }
+        // 선택 완료 버튼 (다중 선택이거나 showFooterButtons가 true인 경우)
+        if (config.multiple || config.showFooterButtons) {
+            const completeButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary', '선택 완료', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                config.onComplete?.();
+            });
+            footerRight.appendChild(completeButton);
+        }
+        footerButtons.appendChild(footerLeft);
+        footerButtons.appendChild(footerRight);
+        footer.appendChild(footerButtons);
+        return footer;
+    }
+    /**
+     * 전체 선택 버튼 텍스트 업데이트
+     */
+    updateSelectAllButtonText(footerElement, text) {
+        const selectAllButton = footerElement.querySelector('.ncua-select-dropdown__footer-left .ncua-btn');
+        if (selectAllButton) {
+            const label = selectAllButton.querySelector('.ncua-btn__label');
+            if (label) {
+                label.textContent = text;
+            }
+        }
+    }
+}

package/dist/{types/assets/scripts/utils/unifiedBox/DropdownModel.d.ts → temp/assets/scripts/utils/unifiedBox/dropdownModel.d.ts}

@@ -20,12 +20,17 @@ export interface StateChangeListener {
  * 드롭다운 상태 관리 모델
  * Observer Pattern을 통한 상태 변경 알림
  */
+export type FilterStrategy = (options: DropdownOption[], searchValue: string, showAllItems: boolean) => DropdownOption[];
 export declare class DropdownModel {
     private state;
     private listeners;
     protected multiple: boolean;
-    private isComboBox;
-    constructor(initialOptions: DropdownOption[], multiple?: boolean);
+    private filterStrategy;
+    constructor(initialOptions: DropdownOption[], multiple?: boolean, filterStrategy?: FilterStrategy);
+    /** SelectBox 기본 전략: 항상 모든 옵션 표시 */
+    static defaultFilterStrategy: FilterStrategy;
+    /** ComboBox 전략: 검색어/전체보기 기반 필터링 */
+    static comboBoxFilterStrategy: FilterStrategy;
     /**
      * 상태 변경 리스너 등록
      */
@@ -38,10 +43,6 @@ export declare class DropdownModel {
      * 상태 변경 알림
      */
     private notifyListeners;
-    /**
-     * ComboBox 타입 설정
-     */
-    setComboBoxMode(isComboBox: boolean): void;
     /**
      * 드롭다운 열기/닫기
      */
@@ -90,10 +91,6 @@ export declare class DropdownModel {
      * 옵션이 선택되었는지 확인
      */
     isOptionSelected(optionId: string | number): boolean;
-    /**
-     * 전체 선택 상태인지 확인 (isAllItemsSelected와 동일)
-     */
-    isAllSelected(): boolean;
     /**
      * 상태 리셋
      */
@@ -126,18 +123,6 @@ export declare class DropdownModel {
      * 검색 결과가 없는지 확인
      */
     hasNoResults(): boolean;
-    /**
-     * 상태 동기화를 위한 외부 접근 메서드들 (DropdownUtils에서 이동)
-     */
-    syncSetIsOpen(isOpen: boolean): void;
-    syncSetFocusedIndex(index: number): void;
-    syncGetIsOpen(): boolean;
-    syncGetFocusedIndex(): number;
-    syncGetSelectedValues(): (string | number)[];
-    /**
-     * 선택값 업데이트 (SelectBoxModel에서 이동)
-     */
-    updateSelectedValues(values: (string | number)[]): void;
     /**
      * 값 설정 (API 호환성)
      */
@@ -155,4 +140,3 @@ export declare class DropdownModel {
      */
     getDebugInfo(): any;
 }
-//# sourceMappingURL=DropdownModel.d.ts.map