import { FocusKeyManager } from '@angular/cdk/a11y'; import { SelectionModel } from '@angular/cdk/collections'; import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core'; import { Observable } from 'rxjs'; import { TsChipComponent, TsChipEvent, TsChipSelectionChange } from './chip.component'; /** * Possible orientations for {@link TsChipCollectionComponent} */ export declare type TsChipCollectionOrientation = 'horizontal' | 'vertical'; /** * Change event object that is emitted when the chip collection value has changed. */ export declare class TsChipCollectionChange { source: TsChipCollectionComponent; value: string[]; constructor(source: TsChipCollectionComponent, value: string[]); } /** * Component that is used to group {@link TsChipComponent} instances * * @example * * * https://getterminus.github.io/ui-demos-release/components/chip */ export declare class TsChipCollectionComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy { protected elementRef: ElementRef; private changeDetectorRef; zone: NgZone; /** * Uid of the chip collection */ protected uid: string; /** * The aria-describedby attribute on the chip collection for improved a11y. * * @internal */ ariaDescribedby: string; /** * User defined tab index. * * When it is not null, use user defined tab index. Otherwise use _tabIndex * * @internal */ _userTabIndex: number | null; /** * When a chip is destroyed, we store the index of the destroyed chip until the chips * query list notifies about the update. This is necessary because we cannot determine an * appropriate chip that should receive focus until the array of chips updated completely. * * @internal */ lastDestroyedChipIndex: number | null; /** * The FocusKeyManager which handles focus. * * @internal */ keyManager: FocusKeyManager; /** * Manage selections * * @internal */ selectionModel: SelectionModel; /** * Function when touched * * @internal */ onTouched: () => void; /** * Function when changed * * @internal */ onChange: (value: string[]) => void; /** * Combined stream of all of the child chips' selection change events. * * @internal */ get chipSelectionChanges(): Observable; /** * Combined stream of all of the child chips' focus change events. * * @internal */ get chipFocusChanges(): Observable; /** * Combined stream of all of the child chips' blur change events. * * @internal */ get chipBlurChanges(): Observable; /** * Combined stream of all of the child chips' remove change events. * * @internal */ get chipDestroyChanges(): Observable; /** * Determine whether there is at least one chip in collection. */ get empty(): boolean; /** * Whether any chips has focus */ get focused(): boolean; /** * The ARIA role applied to the chip list */ get role(): string | null; private _role; /** * The chip components contained within this chip collection. */ chips: QueryList; /** * Whether the user should be allowed to select multiple chips. * * @param value */ set allowMultipleSelections(value: boolean); get allowMultipleSelections(): boolean; private _allowMultipleSelections; /** * Orientation of the chip collection. */ ariaOrientation: 'horizontal' | 'vertical'; /** * Set and get chip collection id * * @param value */ set id(value: string); get id(): string; private _id; /** * Get and set disable state * * @param value */ set isDisabled(value: boolean); get isDisabled(): boolean; private _disabled; /** * Get and set readonly state * * @param value */ set isReadonly(value: boolean); get isReadonly(): boolean; private _readonly; /** * Whether or not this chip collection is selectable. When a chip collection is not selectable, * all the chips are not selectable. * * @param value */ set isSelectable(value: boolean); get isSelectable(): boolean; private _selectable; /** * Orientation of the chip - either horizontal or vertical. Default to horizontal. */ orientation: TsChipCollectionOrientation; /** * Set and get tabindex * * @param value */ set tabIndex(value: number); get tabIndex(): number; private _tabIndex; /** * Set and get chip collection value * * @param value */ set value(value: string[]); get value(): string[]; private _value; /** * Event emitted when the chip collection value has been changed by the user. */ readonly collectionChange: EventEmitter; /** * Emitted when a chip is to be removed. */ readonly removed: EventEmitter; /** * Emitted when tab pressed with chip focused */ readonly tabUpdateFocus: EventEmitter; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, zone: NgZone); /** * Initialize the selection model */ ngOnInit(): void; /** * Initialize the key manager and listen for chip changes */ ngAfterViewInit(): void; /** * Trigger an initial sync after the content has loaded */ ngAfterContentInit(): void; /** * Needed for untilComponentDestroyed */ ngOnDestroy(): void; /** * When blurred, mark the field as touched when focus moved outside the chip collection. */ blur(): void; /** * Focuses the first non-disabled chip in this chip collection, or the associated input when there are no eligible chips. */ focus(): void; /** * Pass events to the keyboard manager. * * @internal * * @param event - They KeyboardEvent */ keydown(event: KeyboardEvent): void; /** * Utility to for whether input field is empty * * @param element - An HTMLElement * @returns boolean */ private static isInputEmpty; /** * Check the tab index as you should not be allowed to focus an empty list. * * @internal */ private updateTabIndex; /** * If the amount of chips changed, we need to update the key manager state and focus the next closest chip. */ private updateFocusForDestroyedChips; /** * Emits change event to set the model value. */ private propagateChanges; /** * Utility to ensure all indexes are valid. * * @param index - The index to be checked. * @returns True if the index is valid for our collection of chips. */ private isValidIndex; /** * Reset all the chips subscription */ private resetChips; /** * Listens to user-generated selection events on each chip. */ private listenToChipsSelection; /** * Listens to user-generated selection events on each chip. */ private listenToChipsFocus; /** * Listens to remove events on each chip. */ private listenToChipsRemoved; /** * Syncs the collection's state with the individual chips. */ private syncChipsState; }