@edugouvfr/ngx-dsfr-ext
Version:
NgxDsfrExt est une extension au package @edugouvfr/ngx-dsfr (portage Angular des éléments DSFR)
88 lines (87 loc) • 4.04 kB
TypeScript
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { OnInit, TemplateRef } from '@angular/core';
import { DsfrOption, DsfrSelectOption } from '@edugouvfr/ngx-dsfr';
import { AbstractSelectComponent } from '../shared/components';
import * as i0 from "@angular/core";
interface OptionsViewModel extends DsfrOption {
isGroup?: boolean;
groupId?: number;
}
export declare class DsfrMultiselectComponent extends AbstractSelectComponent<DsfrSelectOption> implements OnInit {
/** @internal */
viewport: CdkVirtualScrollViewport;
/** Template des labels des options */
groupTemplate: TemplateRef<any>;
/** @internal liste d'options filtrées */
optionsFilter: DsfrSelectOption[];
/** Nombre de résultats après une recherche (pas de valeur initiale = a11y) */
protected nbFilterResults: import("@angular/core").WritableSignal<number>;
protected readonly containerListClass = "dsfrx-multiselect__list";
protected optionsFlatten: OptionsViewModel[];
/**@internal */
get options(): DsfrSelectOption[] | undefined;
/** Personnalisation de la fonction de recherche pour filtrer les options. Fonction à 2 arguments : option (DsfrSelectOption) et texte cherché (string) */
set searchFn(fn: (o: DsfrOption, text: string) => boolean);
/** Liste des options disponibles. */
set options(val: DsfrSelectOption[] | undefined);
/**
* Mise a jour de la valeur de selectedOptions et value programmaticalement (ex. à l'init reactive form)
* @param value
* @internal
*/
writeValue(value: any): void;
/**
* Sélection ou désélection d'une option
* @internal */
onOptionClick(e: any, option: DsfrOption): void;
/** @internal */
isSelected(option: DsfrOption): boolean;
/**
* Interaction au clavier dans la liste déroulante
* Les flêches permettent de naviguer d'une option à l'autre en modifiant le focus.
* A la fin ou au début de la liste on boucle sur la première ou dernière option
* @internal */
onOptionKeydown(event: KeyboardEvent, option: DsfrOption): void;
/**
* Sélectionner ou déselectionner toutes les options
* Si maxSelectedOptions est défini, sélection uniquement des (max) premières options
@internal
*/
selectAll(): void;
/**
* Filtrer les options selon la fonction de recherche et conserver la structure. Les labels des groupes sont ignorés.
* @internal */
onSearch(): void;
/**
* Filtrer les options selon la fonction de recherche et conserver la structure. Les labels des groupes sont ignorés.
* @internal */
onSearchFlatten(): void;
/** @internal */
hasisAllSelected(): boolean;
/** @internal */
trackByIndex: (index: number) => number;
/** @internal */
clearOption(event: {
nativeEvent: Event;
option: DsfrOption;
}): void;
/** @internal */
clearAllOptions(): void;
protected handleListFocus(el: HTMLElement): void;
/** Index du premier element sélectionné pour positionner le focus et aria */
private getFirstIndexSelected;
/** Sélection ou déselection d'une option en mode multiple/checkbox */
private optionClickMultiple;
/** Sélection ou déselection d'une option en mode single */
private optionClickSingle;
/** Fonction de recherche par défaut */
private _searchFn;
/** Set focus on element and add aria-activedescendant attribute to parent */
private setFocusElement;
private scrollForVirtualScroll;
/** Gestion à plat du tableau des options en cas de groupe */
private flattenOptions;
static ɵfac: i0.ɵɵFactoryDeclaration<DsfrMultiselectComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DsfrMultiselectComponent, "dsfr-ext-multiselect, dsfrx-multiselect,", never, { "searchFn": { "alias": "searchFn"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, ["groupTemplate"], ["[label]"], true, never>;
}
export {};