@skyux/indicators
Version:
This library was generated with [Nx](https://nx.dev).
97 lines (96 loc) • 4.57 kB
TypeScript
import { EventEmitter, OnDestroy, QueryList, TrackByFunction } from '@angular/core';
import { Subject } from 'rxjs';
import { SkyTokenComponent } from './token.component';
import { SkyToken } from './types/token';
import { SkyTokenSelectedEventArgs } from './types/token-selected-event-args';
import { SkyTokensMessage } from './types/tokens-message';
import * as i0 from "@angular/core";
/**
* Creates a container that enables navigation between tokens using keyboard arrow keys.
* This is useful when combined with other components where the <kbd>Tab</kbd> key is
* reserved for other functions, such as the SKY UX Lookup component.
*/
export declare class SkyTokensComponent implements OnDestroy {
#private;
/**
* Whether to disable the tokens list to prevent users from selecting tokens,
* dismissing tokens, or navigating through the list with the arrow keys. When the tokens list
* is disabled, users can still place focus on items in the list using the `Tab` key.
* @default false
*/
set disabled(value: boolean | undefined);
get disabled(): boolean;
/**
* Whether users can remove a token from the list by selecting a token's close button.
* @default true
*/
set dismissible(value: boolean | undefined);
get dismissible(): boolean;
/**
* The token property to display for each item in the tokens list.
* @default "name"
*/
set displayWith(value: string | undefined);
get displayWith(): string;
/**
* The token property that represents the token's unique identifier. When this property
* is set, animations are enabled when dismissing tokens.
*/
trackWith: string | undefined;
/**
* Whether users can place focus on tokens in the list using the `Tab` key.
* This does not affect the ability of users to select tokens, dismiss tokens,
* or navigate through the list with the arrow keys.
* @default true
*/
set focusable(value: boolean | undefined);
get focusable(): boolean;
/**
* The array of tokens to include in the list.
*/
set tokens(value: SkyToken[] | undefined);
get tokens(): SkyToken[];
/**
* The observable of `SkyTokensMessage` that can place focus on a
* particular token or remove the active token from the list.
*/
set messageStream(value: Subject<SkyTokensMessage> | undefined);
get messageStream(): Subject<SkyTokensMessage>;
/**
* Fires when users navigate through the tokens list with the `Tab` key
* and attempt to move past the final token in the list.
*/
focusIndexOverRange: EventEmitter<void>;
/**
* Fires when users navigate through the tokens list with the `Tab` key
* and attempt to move before the first token in the list.
*/
focusIndexUnderRange: EventEmitter<void>;
/**
* Fires when users select a token in the list. This event emits the selected token.
*/
tokenSelected: EventEmitter<SkyTokenSelectedEventArgs<any>>;
/**
* Fires when the tokens in the list change.
* This event emits an array of the tokens in the updated list.
*/
tokensChange: EventEmitter<SkyToken<any>[]>;
/**
* Fires when all animations on the tokens are complete.
* @internal
*/
tokensRendered: EventEmitter<void>;
get activeIndex(): number;
set activeIndex(value: number);
trackTokenFn: TrackByFunction<SkyToken>;
tokenComponents: QueryList<SkyTokenComponent> | undefined;
constructor();
ngOnDestroy(): void;
onTokenClick(token: SkyToken): void;
animationDone(): void;
onTokenKeyDown(event: KeyboardEvent): void;
selectToken(token: SkyToken): void;
removeToken(token: SkyToken): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyTokensComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SkyTokensComponent, "sky-tokens", never, { "disabled": { "alias": "disabled"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "trackWith": { "alias": "trackWith"; "required": false; }; "focusable": { "alias": "focusable"; "required": false; }; "tokens": { "alias": "tokens"; "required": false; }; "messageStream": { "alias": "messageStream"; "required": false; }; }, { "focusIndexOverRange": "focusIndexOverRange"; "focusIndexUnderRange": "focusIndexUnderRange"; "tokenSelected": "tokenSelected"; "tokensChange": "tokensChange"; "tokensRendered": "tokensRendered"; }, never, ["*"], false, never>;
}