ng-devui
Version:
DevUI components based on Angular
301 lines (300 loc) • 13.8 kB
TypeScript
import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectedPosition, ScrollStrategy, ScrollStrategyOptions, VerticalConnectionPos } from '@angular/cdk/overlay';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { I18nInterface, I18nService } from 'ng-devui/i18n';
import { AppendToBodyDirection, AppendToBodyScrollStrategyType, DevConfigService } from 'ng-devui/utils';
import { WindowRef } from 'ng-devui/window-ref';
import { Observable, Subscription } from 'rxjs';
import * as i0 from "@angular/core";
export declare class SelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy, OnChanges {
private doc;
private renderer;
private windowRef;
private changeDetectorRef;
private i18n;
private ngZone;
private el;
private devConfigService;
private scrollStrategyOption;
/**
* 【必选】下拉选项资源，支持Array<string>, Array<{key: value}>
*/
options: any[];
/**
* 【可选】是否支持过滤搜索
*/
isSearch: boolean;
/**
* 【可选】是否支持聚焦自动展开下拉
*/
toggleOnFocus: boolean;
/**
* 【可选】下拉菜单高度，建议使用px作为高度单位
*/
scrollHight: string;
/**
* 【可选】下拉高亮css
*/
highlightItemClass: string;
/**
* 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段做过滤操作
*/
filterKey: string;
/**
* 【当传入资源（options）类型为Array<{key: value}，可选】选项与选中值类型不一致时用于指定赋值属性
*/
valueKey: string;
/**
* 【可选】是否支持多选
*/
multiple: boolean;
/**
* 【可选】是否支持全选
*/
isSelectAll: boolean;
/**
* 【可选】是否可以输入
*/
readonly: boolean;
/**
* 【可选】下拉选框尺寸
*/
size: '' | 'sm' | 'lg';
/**
* 【可选】是否appendToBody
*/
appendToBody: boolean;
/**
* 【可选】cdk模式overlay Positions的控制
*/
appendToBodyDirections: Array<AppendToBodyDirection | ConnectedPosition>;
appendToBodyScrollStrategy: AppendToBodyScrollStrategyType;
/**
* 【可选】cdk模式origin width
*/
width: number;
/**
* 【可选】模板高度
*/
templateItemSize: number;
/**
* 【可选】是否禁用下拉框
*/
disabled: boolean;
/**
* 【可选】下拉默认显示文字
*/
placeholder: string;
searchPlaceholder: string;
/**
* 【可选】搜索函数，当需要自定义下拉选择过滤规则时可以使用
* 请保证返回值有id和option字段，id是确保尤其多选的时候能正确索引对应选项
* 简单实现参考：
* search = (term) => {
* return of(
* [Lily, May, Jorsh, Shiwa, Nanth]
* .map((option, index) => ({id: index, option: option}))
* .filter(item => item.option.name.toLowerCase().indexOf(term.toLowerCase()) !== -1)
* );
* }
*/
searchFn: (term: string) => Observable<Array<{
id: string | number;
option: any;
}>>;
/**
* 【可选】决定选择框文字如何显示，默认显示filterKey字段或者本身的值
*/
valueParser: (item: any) => any;
/**
* 【可选】决定下拉框没项文字如何显示，默认显示filterKey字段或者本身的值
*/
formatter: (item: any) => string;
direction: 'up' | 'down' | 'auto';
overview: 'border' | 'underlined';
/**
* 【可选】是否开启clear功能（是否开启只对单选生效）
*/
allowClear: boolean;
color: any;
/**
* 【可选】启用数据懒加载，默认不启用
*/
enableLazyLoad: boolean;
/**
* 是否虚拟滚动
*/
virtualScroll: any;
/**
* 非必填，如传入，会忽略ContentChild
*/
inputItemTemplate: TemplateRef<any>;
extraConfig: {
labelization?: {
enable: boolean;
overflow?: 'normal' | 'scroll-y' | 'multiple-line' | string;
containerMaxHeight?: string;
/**
* @deprecated
*/
containnerMaxHeight?: string;
labelMaxWidth?: string;
maxTags?: number;
};
selectedItemWithTemplate?: {
enable: boolean;
};
enableFocusFirstFilteredOption?: boolean;
[feature: string]: any;
};
/**
* 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段做禁用操作的key
*/
optionDisabledKey: string;
/**
* 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段禁止变更的key
*/
optionImmutableKey: string;
/**
* 【可选】配置无数据展示
*/
noResultItemTemplate: TemplateRef<any>;
/**
* 【可选】配置多选的时候是否维持原数组排序还是用户选择的顺序排序，默认是用户顺序
*/
keepMultipleOrder: 'origin' | 'user-select';
customViewTemplate: TemplateRef<any>;
/**
* customViewTemplate的方向，支持下方和右方
*/
customViewDirection: 'bottom' | 'right' | 'left' | 'top';
autoScrollIntoActive: boolean;
autoFocus: boolean;
notAutoScroll: boolean;
loadingTemplateRef: TemplateRef<any>;
showItemTitle: boolean;
showAnimation: boolean;
styleType: string;
showGlowStyle: boolean;
beforeChange: (index: any, option: any, action: any) => boolean | Promise<boolean> | Observable<boolean>;
/**
* select下拉toggle事件，值为true或false
*/
toggleChange: EventEmitter<boolean>;
loadMore: EventEmitter<any>;
/**
* 输出函数，当选中某个选项项后，将会调用此函数，参数为当前选择项的值。如果需要获取所有选择状态的值，请参考(ngModelChange)方法
*/
valueChange: EventEmitter<any>;
itemTemplate: TemplateRef<any>;
selectWrapper: ElementRef;
selectInputElement: ElementRef;
selectMenuElement: ElementRef;
selectBoxElement: ElementRef;
selectInputWithTemplateElement: ElementRef;
selectInputWithLabelElement: ElementRef;
filterInputElement: ElementRef;
dropdownUl: ElementRef;
connectedOverlay: CdkConnectedOverlay;
virtualScrollViewport: CdkVirtualScrollViewport;
get hasGlowStyle(): boolean;
set isOpen(value: boolean);
get isOpen(): boolean;
get isClearIconShow(): any;
get showMoreTags(): any;
get moreTagsNum(): string;
_inputValue: any;
_isOpen: boolean;
allChecked: boolean;
halfChecked: boolean;
isMouseEvent: boolean;
showLoading: boolean;
startAnimation: boolean;
limitMaxHeight: boolean;
availableOptions: any[];
multiItems: any[];
value: any;
filter: string;
activeIndex: number;
selectIndex: number;
popDirection: 'top' | 'bottom';
menuPosition: VerticalConnectionPos;
i18nCommonText: I18nInterface['common'];
i18nSubscription: Subscription;
document: Document;
dropDownWidth: number;
scrollHeightNum: number;
lastCloseScrollHeight: number;
minBuffer: number;
maxBuffer: number;
scrollStrategy: ScrollStrategy;
cdkConnectedOverlayOrigin: CdkOverlayOrigin;
overlayPositions: Array<ConnectedPosition>;
virtualScrollViewportSizeMightChange: boolean;
virtualScrollItemSize: any;
CONTAINER_MARGINS: number;
ANIMATION_DELAY: number;
get showSelectAll(): boolean;
private sourceSubscription;
private filterSubscription;
private resetting;
private onChange;
private onTouch;
constructor(doc: any, renderer: Renderer2, windowRef: WindowRef, changeDetectorRef: ChangeDetectorRef, i18n: I18nService, ngZone: NgZone, el: ElementRef, devConfigService: DevConfigService, scrollStrategyOption: ScrollStrategyOptions);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
setPositions(): void;
setI18nText(): void;
getVirtualScrollHeight(len: any, size: any): string;
get realVirtualScrollItemSize(): any;
resetSource(): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
registerFilterChange(): void;
searchInputValueChangeEvent(): void;
writeValue(value: any): void;
writeIntoInput(value: any): void;
setAvailableOptions(): void;
getMultipleSelectedOption(): void;
getSingleSelectedOption(): void;
getOption(data: any, value: any, hasOption?: any): any;
getOptionIndex(option: any): number;
getValue: (item: any, key: any) => string;
scrollIntoActive(): void;
canChange(option: any, index: any, action: string): Promise<boolean>;
choose: (option: any, index: any, $event?: Event, operate?: string) => void;
updateCdkConnectedOverlayOrigin(): void;
resetScrollTop(isClose?: boolean): void;
autoToggle($event: any): void;
setMouseEventTrue(event: any): void;
setMouseEventFalse(event: any): void;
toggle(): void;
isBottomRectEnough(): boolean;
setDocumentClickListener(): void;
onDocumentClick: ($event: Event) => void;
onEscKeyup($event: any): void;
handleKeyUpEvent($event: any): void;
handleKeyDownEvent($event: any): void;
scrollToActive(): void;
handleKeyEnterEvent($event: any, isSearchInput?: boolean): void;
getSelectedItem: () => any;
removeItem(item: any, $event: any): void;
selectAll(): void;
trackByFn(index: any, item: any): any;
trackByOptionPointer(index: any, item: any): any;
loadMoreEvent(event: any): void;
loadFinish(): void;
loadStart(): void;
onPositionChange(position: ConnectedOverlayPositionChange): void;
animationEnd($event: any): void;
setAllChecked(): void;
forceSearchNext(): void;
valueClear($event: any): void;
resetStatus(): void;
clearText(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "d-select", ["select"], { "options": { "alias": "options"; "required": false; }; "isSearch": { "alias": "isSearch"; "required": false; }; "toggleOnFocus": { "alias": "toggleOnFocus"; "required": false; }; "scrollHight": { "alias": "scrollHight"; "required": false; }; "highlightItemClass": { "alias": "highlightItemClass"; "required": false; }; "filterKey": { "alias": "filterKey"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "isSelectAll": { "alias": "isSelectAll"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; }; "appendToBodyDirections": { "alias": "appendToBodyDirections"; "required": false; }; "appendToBodyScrollStrategy": { "alias": "appendToBodyScrollStrategy"; "required": false; }; "width": { "alias": "width"; "required": false; }; "templateItemSize": { "alias": "templateItemSize"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; "valueParser": { "alias": "valueParser"; "required": false; }; "formatter": { "alias": "formatter"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "overview": { "alias": "overview"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; "color": { "alias": "color"; "required": false; }; "enableLazyLoad": { "alias": "enableLazyLoad"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "inputItemTemplate": { "alias": "inputItemTemplate"; "required": false; }; "extraConfig": { "alias": "extraConfig"; "required": false; }; "optionDisabledKey": { "alias": "optionDisabledKey"; "required": false; }; "optionImmutableKey": { "alias": "optionImmutableKey"; "required": false; }; "noResultItemTemplate": { "alias": "noResultItemTemplate"; "required": false; }; "keepMultipleOrder": { "alias": "keepMultipleOrder"; "required": false; }; "customViewTemplate": { "alias": "customViewTemplate"; "required": false; }; "customViewDirection": { "alias": "customViewDirection"; "required": false; }; "autoScrollIntoActive": { "alias": "autoScrollIntoActive"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "notAutoScroll": { "alias": "notAutoScroll"; "required": false; }; "loadingTemplateRef": { "alias": "loadingTemplateRef"; "required": false; }; "showItemTitle": { "alias": "showItemTitle"; "required": false; }; "showAnimation": { "alias": "showAnimation"; "required": false; }; "styleType": { "alias": "styleType"; "required": false; }; "showGlowStyle": { "alias": "showGlowStyle"; "required": false; }; "beforeChange": { "alias": "beforeChange"; "required": false; }; }, { "toggleChange": "toggleChange"; "loadMore": "loadMore"; "valueChange": "valueChange"; }, ["itemTemplate"], never, false, never>;
}