@engie-group/fluid-design-system-angular

import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit, QueryList } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { FormItemComponent } from '../form-item/form-item.component'; import { ListGroupComponent } from '../list-group/list-group.component'; import { ListItemComponent } from '../list-item/list-item.component'; import { TagComponent } from '../tag/tag.component'; import { TagSize } from '../tag/tag.model'; import * as i0 from "@angular/core"; export declare class MultiSelectComponent extends FormItemComponent implements OnInit, AfterViewInit, ControlValueAccessor, OnDestroy { private readonly element; private readonly cdr; private document; private static readonly ESCAPE_CODE; private static readonly ENTER_CODE; private static readonly UP_CODE; private static readonly DOWN_CODE; private static readonly ALPHA_NUMERIC_REGEX; /** * @ignore */ private _onChange; /** * @ignore */ private _onTouched; /** * Notifier used to stop items click event subscription. * @ignore */ private unsubscribe; private childOptionsChange; /** * @ignore */ isOpen: boolean; /** * @ignore */ selectedIndexes: Set<number>; /** * @ignore */ selectedValues: Set<string>; /** * Icon name */ iconName: string; /** * Label used for accessibility related attributes on button and list. * Should be the same value (text only) as the `<label>` element */ fieldLabel: string; /** * Instructions on how to navigate the list. It is append after the input label. * @example "Use up and down arrows and Enter to select a value" */ listNavigationLabel: string; /** * Button default label when no value is selected. It is appended after the input label. * @example "Select a value" */ buttonDefaultValueLabel: string; /** * Max tags to display */ maxTagsToDisplay: number; /** * Whether or no to display selected items. When set to `false` and number of selected > 1, * instead of displaying each selected item as tags it only display one tag `X selected` */ displaySelectedItems: boolean; /** * Selected text when `displaySelectedItems = false`: * @example '5 selected` */ selectedText: string; /** * Selected options tag color. Can only be grey or brand */ tagColor: 'brand' | 'grey'; /** * Tag close label for accessibility, default is `Deselect` and it will be followed by the tag label. So focusing the close icon will read `Remove tag label`. * Make sure to set a meaningful value and a translated one */ tagCloseLabel: string; /** * Tag close label for accessibility, default is `Deselect all`. So focusing the close icon will read `Deselect all`. * Make sure to set a meaningful value and a translated one */ tagResetSelectionLabel?: string; /** * Trigger button to toggle the list * @ignore */ buttonEl: ElementRef<HTMLButtonElement>; /** * Trigger button to toggle the list * @ignore */ input: ElementRef<HTMLInputElement>; /** * List containing options * @ignore */ listEl: ListGroupComponent; /** * List containing tags * @ignore */ tags: QueryList<TagComponent>; /** * Option items * @ignore */ selectOptions: QueryList<ListItemComponent>; constructor(element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, document: any); ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; setInputsAndListenersOnOptions(): void; updateSelectedIndexes(): void; /** * @ignore */ toggleByIndex(e: MouseEvent, index: number, tagIndex: number): void; /** * @ignore */ resetSelection(e: Event): void; private toggleItem; private toggleValueInSelectedValue; private toggleIndexInSelected; private openList; private closeList; /** * @ignore */ toggleIsOpen(): void; /** * @ignore */ handleListKeydown(e: KeyboardEvent): void; /** * @ignore */ handleFocusOut(e: FocusEvent): void; /** * @ignore */ handleOutsideClick(e: MouseEvent): void; /** * Implemented as part of ControlValueAccessor. * @ignore */ registerOnChange(fn: any): void; /** * Implemented as part of ControlValueAccessor. * @ignore */ registerOnTouched(fn: any): void; /** * Implemented as part of ControlValueAccessor. * @ignore */ setDisabledState(isDisabled: boolean): void; /** * Implemented as part of ControlValueAccessor. * @ignore */ writeValue(values?: string[]): void; private updateOptionsActive; /** * Label (≠ value) of selected option * @ignore */ getLabelAtIndex(index: number): string; /** * Close aria Label of taf to close * @param index */ getTagCloseLabel(index: number): string; /** * Aria-label for the trigger button element. * @ignore */ get buttonLabel(): string; /** * @ignore */ get formattedInputValue(): string; /** * @ignore */ getAdditionalClass(): string; /** * @ignore */ getSubscriptId(): string; /** * @ignore */ getInstructionsId(): string; /** * @ignore */ getDescriptionId(): string; /** * Index of the currently focused option. */ private get focusedIndex(); private set focusedIndex(value); /** * @ignore */ get selectedIndexesToShow(): number[]; /** * @ignore */ get tagSize(): TagSize; /** * @ignore */ get selectIndexAsArray(): number[]; private getOptionId; static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "nj-multi-select", never, { "iconName": { "alias": "iconName"; "required": false; }; "fieldLabel": { "alias": "fieldLabel"; "required": false; }; "listNavigationLabel": { "alias": "listNavigationLabel"; "required": false; }; "buttonDefaultValueLabel": { "alias": "buttonDefaultValueLabel"; "required": false; }; "maxTagsToDisplay": { "alias": "maxTagsToDisplay"; "required": false; }; "displaySelectedItems": { "alias": "displaySelectedItems"; "required": false; }; "selectedText": { "alias": "selectedText"; "required": false; }; "tagColor": { "alias": "tagColor"; "required": false; }; "tagCloseLabel": { "alias": "tagCloseLabel"; "required": false; }; "tagResetSelectionLabel": { "alias": "tagResetSelectionLabel"; "required": false; }; }, {}, ["selectOptions"], ["[njFormLabel]", "[njFormSubscript]", "[njSelectOptions]"], true, never>; }