ngx-tethys 20.0.1-0 → 20.0.2

package/select/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ElementRef, InjectionToken, AfterViewInit, AfterContentInit, OnDestroy, Signal, TemplateRef, QueryList } from '@angular/core';
+import { OnInit, ElementRef, InjectionToken, AfterViewInit, OnDestroy, Signal, WritableSignal, TemplateRef, QueryList } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
@@ -8,15 +8,15 @@ import * as i4 from '@angular/cdk/overlay';
 import { ScrollStrategy, Overlay, ConnectionPositionPair, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as i5 from 'ngx-tethys/loading';
 import * as i6 from 'ngx-tethys/shared';
-import { IThyOptionParentComponent, ThyOption, ThyOptionSelectionChangeEvent, SelectControlSize, ThySelectOptionGroup } from 'ngx-tethys/shared';
+import { SelectControlSize, ThyOption, SelectOptionBase, ThyOptionRender } from 'ngx-tethys/shared';
 import * as i7 from 'ngx-tethys/icon';
 import * as i8 from 'ngx-tethys/empty';
 import { TabIndexDisabledControlValueAccessorMixin, ThyPlacement } from 'ngx-tethys/core';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from 'ngx-tethys/util';
 import { FunctionProp } from 'ngx-tethys/util';
 import { Observable } from 'rxjs';
+import { SafeAny } from 'ngx-tethys/types';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '';
 /**
@@ -29,8 +29,8 @@ declare class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin
     readonly innerValue: _angular_core.ModelSignal<any>;
     readonly disabled: _angular_core.WritableSignal<boolean>;
     private hostRenderer;
-    readonly thySize: _angular_core.InputSignal<InputSize>;
-    readonly name: _angular_core.InputSignal<string>;
+    readonly thySize: _angular_core.InputSignal<InputSize | undefined>;
+    readonly name: _angular_core.InputSignal<string | undefined>;
     readonly thyAllowClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
     writeValue(obj: any): void;
     setDisabledState?(isDisabled: boolean): void;
@@ -84,15 +84,23 @@ interface ThySelectOptionModel {
     icon?: string;
     groupLabel?: string;
 }
-interface ThyOptionGroupModel extends ThySelectOptionModel {
-    children?: ThySelectOptionModel[];
+interface ThySelectFlattedItem {
+    type: 'option' | 'group';
+    value?: string | number;
+    rawValue?: any;
+    label?: string;
+    showOptionCustom?: boolean;
+    template?: TemplateRef<any>;
+    disabled?: boolean;
+    searchKey?: string;
+    groupLabel?: string;
 }
 /**
  * 下拉选择组件
  * @name thy-select,thy-custom-select
  * @order 10
  */
-declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implements ControlValueAccessor, IThyOptionParentComponent, OnInit, AfterViewInit, AfterContentInit, OnDestroy {
+declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
     private ngZone;
     private elementRef;
     private changeDetectorRef;
@@ -106,32 +114,34 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
     disabled: boolean;
     mode: SelectMode;
     scrollTop: number;
-    modalValue: any;
     defaultOffset: number;
-    dropDownClass: {
+    readonly dropDownClass: Signal<{
         [key: string]: boolean;
-    };
-    dropDownMinWidth: number | null;
+    }>;
+    readonly dropDownMinWidth: Signal<number | null>;
     /**
      * 设置下拉框的最小宽度，默认值 `match-select`，表示与输入框的宽度一致；`min-width` 表示最小宽度为200px；支持自定义最小宽度，比如传 `{minWidth: 150}` 表示最小宽度为150px
      * @default match-select
      */
-    readonly thyDropdownWidthMode: _angular_core.InputSignal<ThyDropdownWidthMode>;
-    dropDownPositions: ConnectionPositionPair[];
-    selectionModel: SelectionModel<ThyOption>;
-    triggerRectWidth: number;
-    scrollStrategy: ScrollStrategy;
-    private resizeSubscription;
-    private selectionModelSubscription;
+    readonly thyDropdownWidthMode: _angular_core.InputSignal<ThyDropdownWidthMode | undefined>;
+    readonly placement: Signal<ThyPlacement>;
+    readonly dropDownPositions: Signal<ConnectionPositionPair[]>;
+    thyItemSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly virtualHeight: Signal<number>;
+    /**
+     * 出现滚动条时，视觉上能看到的最大选项个数
+     */
+    private maxItemLength;
+    triggerRectWidth: WritableSignal<number | undefined>;
+    scrollStrategy?: ScrollStrategy;
+    private resizeSubscription?;
     /**
      * 手动聚焦中的标识
      */
     private manualFocusing;
     private config;
-    private readonly destroy$;
-    readonly optionSelectionChanges: Observable<ThyOptionSelectionChangeEvent>;
-    readonly cdkConnectedOverlay: Signal<CdkConnectedOverlay>;
-    keyManager: ActiveDescendantKeyManager<ThyOption>;
+    private destroyRef;
+    readonly cdkConnectedOverlay: Signal<CdkConnectedOverlay | undefined>;
     panelOpen: boolean;
     /**
      * 搜索时回调
@@ -175,7 +185,7 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
      * @type primary | success | danger | warning
      * @default primary
      */
-    readonly thySize: _angular_core.InputSignal<SelectControlSize>;
+    readonly thySize: _angular_core.InputSignal<SelectControlSize | undefined>;
     /**
      * 数据为空时显示的提示文字
      */
@@ -201,20 +211,20 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
     /**
      * 排序比较函数
      */
-    readonly thySortComparator: _angular_core.InputSignal<(a: ThyOption, b: ThyOption, options: ThyOption[]) => number>;
+    readonly thySortComparator: _angular_core.InputSignal<((a: ThyOption, b: ThyOption, options: ThyOption[]) => number) | undefined>;
     /**
      * Footer 模板，默认值为空不显示 Footer
      */
-    readonly thyFooterTemplate: _angular_core.InputSignal<TemplateRef<any>>;
+    readonly thyFooterTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
     /**
      * 弹出位置
      * @type ThyPlacement
      */
-    readonly thyPlacement: _angular_core.InputSignal<ThyPlacement>;
+    readonly thyPlacement: _angular_core.InputSignal<ThyPlacement | undefined>;
     /**
      * 自定义 Overlay Origin
      */
-    readonly thyOrigin: _angular_core.InputSignal<HTMLElement | ElementRef<any>>;
+    readonly thyOrigin: _angular_core.InputSignal<HTMLElement | ElementRef<any> | undefined>;
     /**
      * 自定义 Footer 模板容器 class
      */
@@ -222,7 +232,7 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
     /**
      * @private
      */
-    readonly selectedValueDisplayRef: Signal<TemplateRef<any>>;
+    readonly selectedValueDisplayRef: Signal<TemplateRef<any> | undefined>;
     /**
      * 初始化时，是否展开面板
      */
@@ -239,86 +249,91 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
      * 是否隐藏选择框边框
      */
     readonly thyBorderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    isReactiveDriven: boolean;
-    innerOptions: ThySelectOptionModel[];
-    optionGroups: ThyOptionGroupModel[];
+    private scrolledIndex;
+    readonly cdkVirtualScrollViewport: Signal<CdkVirtualScrollViewport | undefined>;
+    private shouldActivateOption;
     /**
      * option 列表
      */
-    readonly thyOptions: _angular_core.InputSignalWithTransform<ThySelectOptionModel[], ThySelectOptionModel[]>;
-    options: QueryList<ThyOption>;
+    readonly thyOptions: _angular_core.InputSignalWithTransform<ThySelectOptionModel[] | undefined, ThySelectOptionModel[]>;
+    readonly keywords: WritableSignal<string>;
     /**
      * 目前只支持多选选中项的展示，默认为空，渲染文字模板，传入tag，渲染展示模板,
      * @default ''｜tag
      */
     readonly thyPreset: _angular_core.InputSignal<string>;
     trigger: ElementRef<HTMLElement>;
-    readonly panel: Signal<ElementRef<HTMLElement>>;
+    private readonly options;
+    private readonly groups;
     /**
-     * @private
+     * 所有分组和选项
      */
-    contentOptions: QueryList<ThyOption>;
-    viewOptions: QueryList<ThyOption>;
+    private readonly allGroupsAndOptions;
     /**
-     * @private
+     * 渲染的分组和选项，基于 keywords 过滤后
      */
-    readonly contentGroups: Signal<readonly ThySelectOptionGroup[]>;
-    readonly viewGroups: Signal<readonly ThySelectOptionGroup[]>;
-    handleKeydown(event: KeyboardEvent): void;
-    get optionsChanges$(): Observable<ThyOption[]>;
+    readonly filteredGroupsAndOptions: Signal<ThySelectFlattedItem[]>;
+    /**
+     * 渲染的选项
+     */
+    private readonly filteredOptions;
+    private readonly filteredOptionsMap;
+    /**
+     * 当前选中的值
+     */
+    readonly selectedValues: WritableSignal<any[]>;
+    readonly selectedValuesMap: Signal<Map<any, boolean>>;
+    /**
+     * 传给 selectControl 指令的选中值
+     */
+    readonly selectedOptions: WritableSignal<SelectOptionBase | SelectOptionBase[] | null>;
+    optionRenders: QueryList<ThyOptionRender>;
+    keydown(event: KeyboardEvent): void;
+    get optionsChanges$(): Observable<ThyOptionRender[]>;
     private buildScrollStrategy;
-    private isSearching;
-    groupBy: (item: ThySelectOptionModel) => string;
-    get placement(): ThyPlacement;
     constructor();
-    writeValue(value: any): void;
+    writeValue(value: SafeAny): void;
     ngOnInit(): void;
-    buildOptionGroups(options: ThySelectOptionModel[]): ThyOptionGroupModel[];
-    buildReactiveOptions(): void;
-    getDropdownMinWidth(): number | null;
     ngAfterViewInit(): void;
-    ngAfterContentInit(): void;
-    setup(): void;
-    get isHiddenOptions(): boolean;
-    onAttached(): void;
-    dropDownMouseMove(event: MouseEvent): void;
-    onOptionsScrolled(elementRef: ElementRef): void;
-    onSearchFilter(searchText: string): void;
+    private setup;
+    private buildAllGroupsAndOptions;
+    private allGroupsAndOptionsByReactive;
+    private allGroupsAndOptionsByTemplate;
+    private buildFilteredGroupsAndOptions;
+    private updateSelectedOptions;
+    optionsScrolled(index: number): void;
+    search(keywords: string): void;
     onBlur(event?: FocusEvent): void;
     onFocus(event?: FocusEvent): void;
     focus(options?: FocusOptions): void;
     remove($event: {
-        item: ThyOption;
+        item: SelectOptionBase;
         $eventOrigin: Event;
     }): void;
     clearSelectValue(event?: Event): void;
     updateCdkConnectedOverlayPositions(): void;
-    get selected(): ThyOption | ThyOption[];
-    get isMultiple(): boolean;
-    get empty(): boolean;
-    getItemCount(): number;
+    readonly isMultiple: Signal<boolean>;
+    readonly empty: Signal<boolean>;
+    activatedValue: WritableSignal<string | string[] | number | null | undefined>;
     toggle(event: MouseEvent): void;
     open(): void;
     close(): void;
     private emitModelValueChange;
-    private highlightCorrectOption;
-    private initKeyManager;
-    private handleClosedKeydown;
-    private handleOpenKeydown;
-    private getPositions;
-    private instanceSelectionModel;
-    private resetOptions;
-    private initializeSelection;
-    private setDropDownClass;
-    private setSelectionByModelValue;
-    private onSelect;
-    private sortValues;
+    private scrollToActivatedOption;
+    private handleKeydown;
+    optionClick(event: {
+        value: SafeAny;
+        isUserInput: boolean;
+    }): void;
+    optionHover(value: SafeAny): void;
+    mouseLeaveOptions(): void;
     private getOriginRectWidth;
     private subscribeTriggerResize;
     private unsubscribeTriggerResize;
+    trackByFn(index: number, item: ThySelectFlattedItem): SafeAny;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThySelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelect, "thy-select,thy-custom-select", ["thySelect"], { "thyDropdownWidthMode": { "alias": "thyDropdownWidthMode"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPlaceHolder": { "alias": "thyPlaceHolder"; "required": false; "isSignal": true; }; "thyServerSearch": { "alias": "thyServerSearch"; "required": false; "isSignal": true; }; "thyLoadState": { "alias": "thyLoadState"; "required": false; "isSignal": true; }; "thyAutoActiveFirstItem": { "alias": "thyAutoActiveFirstItem"; "required": false; "isSignal": true; }; "thyMode": { "alias": "thyMode"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyEmptySearchMessageText": { "alias": "thyEmptySearchMessageText"; "required": false; "isSignal": true; }; "thyEnableScrollLoad": { "alias": "thyEnableScrollLoad"; "required": false; "isSignal": true; }; "thyAllowClear": { "alias": "thyAllowClear"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thySortComparator": { "alias": "thySortComparator"; "required": false; "isSignal": true; }; "thyFooterTemplate": { "alias": "thyFooterTemplate"; "required": false; "isSignal": true; }; "thyPlacement": { "alias": "thyPlacement"; "required": false; "isSignal": true; }; "thyOrigin": { "alias": "thyOrigin"; "required": false; "isSignal": true; }; "thyFooterClass": { "alias": "thyFooterClass"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyBorderless": { "alias": "thyBorderless"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; }, { "thyOnSearch": "thyOnSearch"; "thyOnScrollToBottom": "thyOnScrollToBottom"; "thyOnExpandStatusChange": "thyOnExpandStatusChange"; }, ["selectedValueDisplayRef", "contentGroups", "contentOptions"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelect, "thy-select,thy-custom-select", ["thySelect"], { "thyDropdownWidthMode": { "alias": "thyDropdownWidthMode"; "required": false; "isSignal": true; }; "thyItemSize": { "alias": "thyItemSize"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPlaceHolder": { "alias": "thyPlaceHolder"; "required": false; "isSignal": true; }; "thyServerSearch": { "alias": "thyServerSearch"; "required": false; "isSignal": true; }; "thyLoadState": { "alias": "thyLoadState"; "required": false; "isSignal": true; }; "thyAutoActiveFirstItem": { "alias": "thyAutoActiveFirstItem"; "required": false; "isSignal": true; }; "thyMode": { "alias": "thyMode"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyEmptySearchMessageText": { "alias": "thyEmptySearchMessageText"; "required": false; "isSignal": true; }; "thyEnableScrollLoad": { "alias": "thyEnableScrollLoad"; "required": false; "isSignal": true; }; "thyAllowClear": { "alias": "thyAllowClear"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thySortComparator": { "alias": "thySortComparator"; "required": false; "isSignal": true; }; "thyFooterTemplate": { "alias": "thyFooterTemplate"; "required": false; "isSignal": true; }; "thyPlacement": { "alias": "thyPlacement"; "required": false; "isSignal": true; }; "thyOrigin": { "alias": "thyOrigin"; "required": false; "isSignal": true; }; "thyFooterClass": { "alias": "thyFooterClass"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyBorderless": { "alias": "thyBorderless"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; }, { "thyOnSearch": "thyOnSearch"; "thyOnScrollToBottom": "thyOnScrollToBottom"; "thyOnExpandStatusChange": "thyOnExpandStatusChange"; }, ["selectedValueDisplayRef", "options", "groups"], ["*"], true, never>;
     static ngAcceptInputType_thyDisabled: i1.ThyBooleanInput;
 }