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

package/dist/temp/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;
+}

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

@@ -0,0 +1,311 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export var DropdownModel = /** @class */ (function () {
+    function DropdownModel(initialOptions, multiple, filterStrategy) {
+        if (multiple === void 0) { multiple = false; }
+        this.listeners = [];
+        this.multiple = multiple;
+        this.filterStrategy = filterStrategy !== null && filterStrategy !== void 0 ? filterStrategy : DropdownModel.defaultFilterStrategy;
+        this.state = {
+            isOpen: false,
+            focusedIndex: -1,
+            selectedValues: [],
+            searchValue: '',
+            showAllItems: false,
+            options: __spreadArray([], initialOptions, true),
+            filteredOptions: this.filterStrategy(__spreadArray([], initialOptions, true), '', false),
+        };
+    }
+    /**
+     * 상태 변경 리스너 등록
+     */
+    DropdownModel.prototype.addListener = function (listener) {
+        this.listeners.push(listener);
+    };
+    /**
+     * 상태 변경 리스너 제거
+     */
+    DropdownModel.prototype.removeListener = function (listener) {
+        var index = this.listeners.indexOf(listener);
+        if (index > -1) {
+            this.listeners.splice(index, 1);
+        }
+    };
+    /**
+     * 상태 변경 알림
+     */
+    DropdownModel.prototype.notifyListeners = function (changedFields) {
+        var _this = this;
+        this.listeners.forEach(function (listener) {
+            listener.onStateChange(__assign({}, _this.state), changedFields);
+        });
+    };
+    /**
+     * 드롭다운 열기/닫기
+     */
+    DropdownModel.prototype.setOpen = function (isOpen) {
+        if (this.state.isOpen !== isOpen) {
+            this.state.isOpen = isOpen;
+            if (!isOpen) {
+                this.state.focusedIndex = -1;
+                this.state.showAllItems = false;
+            }
+            this.notifyListeners(['isOpen', 'focusedIndex', 'showAllItems']);
+        }
+    };
+    /**
+     * 포커스 인덱스 설정
+     */
+    DropdownModel.prototype.setFocusedIndex = function (index) {
+        var maxIndex = this.state.filteredOptions.length - 1;
+        var clampedIndex = Math.max(-1, Math.min(index, maxIndex));
+        if (this.state.focusedIndex !== clampedIndex) {
+            this.state.focusedIndex = clampedIndex;
+            this.notifyListeners(['focusedIndex']);
+        }
+    };
+    /**
+     * 검색어 설정 및 필터링
+     */
+    DropdownModel.prototype.setSearchValue = function (searchValue) {
+        if (this.state.searchValue !== searchValue) {
+            this.state.searchValue = searchValue;
+            this.updateFilteredOptions();
+            this.notifyListeners(['searchValue', 'filteredOptions']);
+        }
+    };
+    /**
+     * 전체 보기 토글
+     */
+    DropdownModel.prototype.setShowAllItems = function (showAll) {
+        if (this.state.showAllItems !== showAll) {
+            this.state.showAllItems = showAll;
+            this.updateFilteredOptions();
+            this.notifyListeners(['showAllItems', 'filteredOptions']);
+        }
+    };
+    /**
+     * 선택된 값들을 직접 설정 (protected)
+     */
+    DropdownModel.prototype.setSelectedValues = function (values) {
+        this.state.selectedValues = __spreadArray([], values, true);
+        this.notifyListeners(['selectedValues']);
+    };
+    /**
+     * 옵션 선택/해제
+     */
+    DropdownModel.prototype.toggleOption = function (optionId) {
+        var currentValues = __spreadArray([], this.state.selectedValues, true);
+        if (this.multiple) {
+            var index = currentValues.indexOf(optionId);
+            if (index > -1) {
+                currentValues.splice(index, 1);
+            }
+            else {
+                currentValues.push(optionId);
+            }
+        }
+        else {
+            currentValues.length = 0;
+            currentValues.push(optionId);
+        }
+        this.state.selectedValues = currentValues;
+        this.notifyListeners(['selectedValues']);
+    };
+    /**
+     * 옵션 업데이트
+     */
+    DropdownModel.prototype.updateOptions = function (newOptions) {
+        // 현재 상태 저장
+        var wasOpen = this.state.isOpen;
+        var wasShowAllItems = this.state.showAllItems;
+        this.state.options = __spreadArray([], newOptions, true);
+        this.state.selectedValues = this.state.selectedValues.filter(function (value) { return newOptions.some(function (opt) { return opt.id === value; }); });
+        // 드롭다운이 열려있었다면 상태 유지
+        if (wasOpen) {
+            this.state.isOpen = true;
+            this.state.showAllItems = wasShowAllItems;
+        }
+        this.updateFilteredOptions();
+        this.notifyListeners(['options', 'selectedValues', 'filteredOptions', 'isOpen', 'showAllItems']);
+    };
+    /**
+     * 필터링된 옵션 업데이트
+     */
+    DropdownModel.prototype.updateFilteredOptions = function () {
+        this.state.filteredOptions = this.filterStrategy(this.state.options, this.state.searchValue, this.state.showAllItems);
+    };
+    /**
+     * 현재 상태 반환 (읽기 전용)
+     */
+    DropdownModel.prototype.getState = function () {
+        return __assign({}, this.state);
+    };
+    /**
+     * 다중 선택 모드 여부 반환
+     */
+    DropdownModel.prototype.isMultiple = function () {
+        return this.multiple;
+    };
+    /**
+     * 선택된 옵션들 반환
+     */
+    DropdownModel.prototype.getSelectedOptions = function () {
+        var _this = this;
+        return this.state.options.filter(function (opt) { return _this.state.selectedValues.includes(opt.id); });
+    };
+    /**
+     * 옵션이 선택되었는지 확인
+     */
+    DropdownModel.prototype.isOptionSelected = function (optionId) {
+        return this.state.selectedValues.includes(optionId);
+    };
+    /**
+     * 상태 리셋
+     */
+    DropdownModel.prototype.reset = function () {
+        this.state.isOpen = false;
+        this.state.focusedIndex = -1;
+        this.state.selectedValues = [];
+        this.state.searchValue = '';
+        this.state.showAllItems = false;
+        this.state.filteredOptions = [];
+        this.notifyListeners([
+            'isOpen',
+            'focusedIndex',
+            'selectedValues',
+            'searchValue',
+            'showAllItems',
+            'filteredOptions',
+        ]);
+    };
+    /**
+     * 전체 선택/해제 토글 (MultiSelectUtils에서 이동)
+     */
+    DropdownModel.prototype.toggleSelectAll = function () {
+        if (!this.multiple)
+            return;
+        var availableOptions = this.state.options.filter(function (opt) { return !opt.disabled; });
+        var allSelected = this.state.selectedValues.length === availableOptions.length;
+        var newValue;
+        if (allSelected) {
+            newValue = [];
+        }
+        else {
+            newValue = availableOptions.map(function (opt) { return opt.id; });
+        }
+        this.state.selectedValues = newValue;
+        this.notifyListeners(['selectedValues']);
+    };
+    /**
+     * 전체 선택 버튼 텍스트 반환 (MultiSelectUtils에서 이동)
+     */
+    DropdownModel.prototype.getSelectAllButtonText = function () {
+        if (!this.multiple)
+            return '전체 선택';
+        return this.isAllItemsSelected() ? '전체 해제' : '전체 선택';
+    };
+    /**
+     * 모든 항목이 선택되었는지 확인 (MultiSelectUtils에서 이동)
+     */
+    DropdownModel.prototype.isAllItemsSelected = function () {
+        var _this = this;
+        if (!this.multiple)
+            return false;
+        var availableOptions = this.state.options.filter(function (opt) { return !opt.disabled; });
+        if (availableOptions.length === 0)
+            return false;
+        var availableIds = availableOptions.map(function (opt) { return opt.id; });
+        return availableIds.length > 0 && availableIds.every(function (id) { return _this.state.selectedValues.includes(id); });
+    };
+    /**
+     * 검색 및 필터링 업데이트 (SearchFilterUtils에서 이동)
+     */
+    DropdownModel.prototype.updateSearchAndFilter = function (searchValue, showAllItems) {
+        if (showAllItems === void 0) { showAllItems = false; }
+        this.state.searchValue = searchValue;
+        this.state.showAllItems = showAllItems;
+        this.updateFilteredOptions();
+        this.notifyListeners(['searchValue', 'filteredOptions', 'showAllItems']);
+    };
+    /**
+     * 검색어만 업데이트 (필터링 없이, API 모드용)
+     */
+    DropdownModel.prototype.updateSearchValue = function (searchValue) {
+        this.state.searchValue = searchValue;
+        this.notifyListeners(['searchValue']);
+    };
+    /**
+     * 드롭다운이 열릴 수 있는지 확인 (ComboBox용)
+     */
+    DropdownModel.prototype.canOpenDropdown = function () {
+        return this.state.showAllItems || this.state.searchValue.trim().length > 0;
+    };
+    /**
+     * 검색 결과가 없는지 확인
+     */
+    DropdownModel.prototype.hasNoResults = function () {
+        return this.state.filteredOptions.length === 0 && (this.state.showAllItems || Boolean(this.state.searchValue));
+    };
+    /**
+     * 값 설정 (API 호환성)
+     */
+    DropdownModel.prototype.setValue = function (value) {
+        var values = Array.isArray(value) ? value : [value];
+        this.setSelectedValues(values);
+    };
+    /**
+     * 값 가져오기 (API 호환성)
+     */
+    DropdownModel.prototype.getValue = function () {
+        return this.multiple ? this.state.selectedValues : this.state.selectedValues[0] || '';
+    };
+    /**
+     * 입력 초기화 (ComboBox용)
+     */
+    DropdownModel.prototype.clearInput = function () {
+        this.updateSearchAndFilter('');
+    };
+    /**
+     * 디버그 정보 (개발용)
+     */
+    DropdownModel.prototype.getDebugInfo = function () {
+        return {
+            state: this.state,
+            multiple: this.multiple,
+            listeners: this.listeners.length,
+        };
+    };
+    /** SelectBox 기본 전략: 항상 모든 옵션 표시 */
+    DropdownModel.defaultFilterStrategy = function (options) { return __spreadArray([], options, true); };
+    /** ComboBox 전략: 검색어/전체보기 기반 필터링 */
+    DropdownModel.comboBoxFilterStrategy = function (options, searchValue, showAllItems) {
+        if (!showAllItems && !searchValue) {
+            return [];
+        }
+        if (searchValue) {
+            var searchLower_1 = searchValue.toLowerCase();
+            return options.filter(function (option) { return option.label.toLowerCase().includes(searchLower_1); });
+        }
+        return __spreadArray([], options, true);
+    };
+    return DropdownModel;
+}());

package/dist/temp/assets/scripts/utils/unifiedBox/unifiedBoxController.d.ts

@@ -0,0 +1,156 @@
+import { DOMRenderer, DropdownRenderConfig } from './domRenderer';
+import { DropdownModel, DropdownState, StateChangeListener } from './dropdownModel';
+export interface UnifiedBoxControllerConfig {
+    triggerElement: HTMLElement;
+    dropdownElement: HTMLElement;
+    model: DropdownModel;
+    renderer: DOMRenderer;
+    renderConfig: DropdownRenderConfig;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onSelectionChange?: (selectedValues: (string | number)[]) => void;
+    onSearch?: (searchValue: string) => void;
+    onScrollBottom?: () => void;
+    disabled?: boolean;
+    canToggle?: () => boolean;
+    type?: 'selectbox' | 'combobox';
+}
+/**
+ * SelectBox 통합 컨트롤러
+ * 이벤트 처리, UI 상태 제어, 사용자 인터랙션 담당
+ */
+export declare class UnifiedBoxController implements StateChangeListener {
+    private config;
+    private isOpen;
+    private focusedIndex;
+    private isKeyboardNavigation;
+    private outsideClickHandler;
+    private keyDownHandler;
+    private scrollLockHandlers;
+    private optionElements;
+    private handlerMap;
+    private scrollPosition;
+    private mouseMoveHandlerAttached;
+    private lastFilteredOptionsCount;
+    private lastFilteredOptionsHash;
+    private scrollBottomHandler?;
+    private lastScrollBottomTime;
+    constructor(config: UnifiedBoxControllerConfig);
+    /**
+     * 상태 변경 리스너 (Observer Pattern)
+     */
+    onStateChange(newState: DropdownState, changedFields: string[]): void;
+    /**
+     * 이벤트 핸들러 설정
+     */
+    private setupEventHandlers;
+    /**
+     * 드롭다운 열기
+     */
+    open(): void;
+    /**
+     * 드롭다운 닫기
+     */
+    close(): void;
+    /**
+     * 드롭다운 토글
+     */
+    toggle(): void;
+    /**
+     * 키보드 입력 처리
+     */
+    private handleKeyDown;
+    /**
+     * 옵션 검색
+     */
+    private searchOption;
+    /**
+     * 드롭다운 표시/숨김 업데이트
+     */
+    private updateDropdownVisibility;
+    /**
+     * 옵션 표시 업데이트
+     */
+    private updateOptionsDisplay;
+    /**
+     * 포커스된 옵션 업데이트
+     */
+    private updateFocusedOption;
+    /**
+     * 옵션 클릭 이벤트 핸들러 등록
+     */
+    private attachOptionEventHandlers;
+    /**
+     * 옵션 이벤트 핸들러 제거
+     */
+    private removeOptionEventHandlers;
+    /**
+     * 옵션 업데이트가 필요한지 판단
+     */
+    private shouldUpdateOptions;
+    /**
+     * 외부 클릭 감지 활성화
+     */
+    private enableOutsideClick;
+    /**
+     * 외부 클릭 감지 비활성화
+     */
+    private disableOutsideClick;
+    /**
+     * 스크롤 잠금 활성화 (드롭다운 내부 스크롤은 허용)
+     * ComboBox 또는 multiple 모드에서는 스크롤 잠금 비활성화
+     */
+    private enableScrollLock;
+    /**
+     * 스크롤 가능한 부모 요소 찾기
+     */
+    private findScrollableParent;
+    /**
+     * 스크롤 잠금 해제
+     */
+    private disableScrollLock;
+    /**
+     * 마우스 호버 처리 (외부에서 호출용)
+     */
+    handleMouseHover(index: number): void;
+    /**
+     * 옵션 배열 업데이트
+     */
+    updateOptions(options: any[]): void;
+    getIsOpen(): boolean;
+    setFocus(index: number): void;
+    getFocusedIndex(): number;
+    /**
+     * 드롭다운 위치 조정 (화면 크기에 따라 up/down 방향 결정)
+     * 단일 선택 모드에서만 적용
+     */
+    private adjustDropdownPosition;
+    /**
+     * 드롭다운 위치 계산 (React dropdownUtils.ts 로직 참고)
+     */
+    private calculateDropdownPosition;
+    /**
+     * 드롭다운 예상 높이 계산
+     */
+    private estimateDropdownHeight;
+    /**
+     * 드롭다운 세부 위치 조정 (뷰포트 경계 처리)
+     */
+    private adjustDropdownPositionDetails;
+    /**
+     * 스크롤 바닥 감지 활성화
+     */
+    private enableScrollBottomDetection;
+    /**
+     * 스크롤 바닥 감지 비활성화
+     */
+    private disableScrollBottomDetection;
+    /**
+     * disabled 상태 설정
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 정리
+     */
+    destroy(): void;
+}