ng-devui
Version:
DevUI components based on Angular
161 lines (160 loc) • 7.23 kB
TypeScript
import { ConnectedPosition } from '@angular/cdk/overlay';
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { I18nInterface, I18nService } from 'ng-devui/i18n';
import { ToggleMenuContainerComponent, ToggleMenuListComponent, ToggleMenuSearchComponent } from 'ng-devui/toggle-menu';
import { AppendToBodyDirection, AppendToBodyScrollStrategyType, DevConfigService } from 'ng-devui/utils';
import { Observable, Subscription } from 'rxjs';
import * as i0 from "@angular/core";
export declare class TagsInputComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges, AfterViewInit {
private i18n;
private devConfigService;
private cdr;
/**
* 【必选】记录输入的标签
*/
tags: any[];
/**
* 【可选】disabled 灰化状态
*/
disabled: boolean;
/**
* 【可选】使用的属性名
*/
displayProperty: string;
/**
* 【可选】输入的placeholder
*/
placeholder: string;
/**
* 【可选】达到最大值时可自定义placeholder
*/
maxPlaceholder: string;
/**
* 【可选】输入标签的最小长度
*/
minLength: number;
/**
* 【可选】输入标签的最大长度, 524288为 input 支持最大值
*/
maxLength: number;
/**
* 【可选】标签的最小个数
*/
minTags: number;
/**
* 【可选】标签的最大个数
*/
maxTags: number;
/**
* 【可选】输入框的spellcheck
*/
spellcheck: boolean;
/**
* 【可选】是否appendToBody
*/
appendToBody: boolean;
appendToBodyDirections: Array<AppendToBodyDirection | ConnectedPosition>;
appendToBodyScrollStrategy: AppendToBodyScrollStrategyType;
/**
* 【可选】是否虚拟滚动
*/
virtualScroll: boolean;
/**
* 【可选】是否使用下拉列表
*/
showSuggestion: boolean;
/**
* 【可选】下拉选项
*/
suggestionList: any;
/**
* 【可选】是否按空格添加tag
*/
isAddBySpace: boolean;
/**
* 【可选】默认两行显示，false 则单行显示
*/
multiline: boolean;
/**
* 【可选】已选中标签容器最大高度
*/
maxHeight: string;
generateOptionFromInput: boolean;
/**
* 【可选】大小写敏感
*/
caseSensitivity: boolean;
itemTemplate: TemplateRef<any>;
tagTemplate: TemplateRef<any>;
noResultItemTemplate: TemplateRef<any>;
checkBeforeGenerate: (newTag: string) => boolean;
checkBeforeAdd: (newTag: string) => boolean | Promise<boolean> | Observable<boolean>;
showAnimation: boolean;
styleType: string;
/**
* 输出函数，当选中某个选项项后，将会调用此函数，参数为当前选择项的值。如果需要获取所有选择状态的值，请参考(ngModelChange)方法
*/
valueChange: EventEmitter<any>;
searchChange: EventEmitter<any>;
tagsInputWrapperItem: ElementRef;
selectBoxContainer: ToggleMenuContainerComponent;
selectBox: ToggleMenuListComponent;
searchBox: ToggleMenuSearchComponent;
get getPlaceHolder(): string;
newTag: string;
availableOptions: any[];
selectedItems: any[];
/**
* 对于用户传入的suggestionList不做修改，数据的操作在_suggestionList上进行
*/
_suggestionList: any[];
newTagValid: boolean;
isReduce: boolean;
isOpen: boolean;
inputEvent: any;
blurEventSubscription: Subscription;
valueParser: (item: any) => any;
searchFn: (term: string) => Observable<Array<{
id: string | number;
option: any;
}>>;
private DEBOUNCE_TIME;
private sourceSubscription;
private KEYS;
private i18nSubscription;
i18nCommonText: I18nInterface['common'];
i18nTagsInputText: I18nInterface['tagsInput'];
private onChange;
private onTouch;
constructor(i18n: I18nService, devConfigService: DevConfigService, cdr: ChangeDetectorRef);
private setI18nText;
writeValue(value: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
registerFilterChange(): void;
checkIsIncludes(option: any, item: any, isString?: any): boolean;
reduceSuggestionList(): void;
host_click(): void;
passEvent(data: any): void;
addSuggestionByIndex(index: any, value: any): void;
removeTag(data: any): void;
tagIsValid(): boolean;
isEmptyString(tag: any): boolean;
addTag(): void;
canAdd(value?: any): Promise<boolean>;
checkMaxTags(tag: any): void;
setValue({ option, index }: {
option: any;
index: any;
}): void;
searchInputValueChange(event: any): void;
toggleChangeFn(event: any): void;
delayResetNewTag(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TagsInputComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TagsInputComponent, "d-tags-input", ["TagsInput"], { "tags": { "alias": "tags"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "displayProperty": { "alias": "displayProperty"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxPlaceholder": { "alias": "maxPlaceholder"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minTags": { "alias": "minTags"; "required": false; }; "maxTags": { "alias": "maxTags"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; }; "appendToBodyDirections": { "alias": "appendToBodyDirections"; "required": false; }; "appendToBodyScrollStrategy": { "alias": "appendToBodyScrollStrategy"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "showSuggestion": { "alias": "showSuggestion"; "required": false; }; "suggestionList": { "alias": "suggestionList"; "required": false; }; "isAddBySpace": { "alias": "isAddBySpace"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "generateOptionFromInput": { "alias": "generateOptionFromInput"; "required": false; }; "caseSensitivity": { "alias": "caseSensitivity"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "tagTemplate": { "alias": "tagTemplate"; "required": false; }; "noResultItemTemplate": { "alias": "noResultItemTemplate"; "required": false; }; "checkBeforeGenerate": { "alias": "checkBeforeGenerate"; "required": false; }; "checkBeforeAdd": { "alias": "checkBeforeAdd"; "required": false; }; "showAnimation": { "alias": "showAnimation"; "required": false; }; "styleType": { "alias": "styleType"; "required": false; }; }, { "valueChange": "valueChange"; "searchChange": "searchChange"; }, never, never, false, never>;
}