@edugouvfr/ngx-dsfr-ext
Version:
NgxDsfrExt est une extension au package @edugouvfr/ngx-dsfr (portage Angular des éléments DSFR)
75 lines (74 loc) • 4.62 kB
TypeScript
import { ElementRef, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
export declare class DropdownContainerComponent {
comboBox: ElementRef;
toolbarWrapper: ElementRef;
listbox: ElementRef;
/** Activer le virtual scroll */
virtualScroll: boolean;
/** Surcharger la hauteur d'un item dans le cas du virtual scroll. Par défaut 24px. */
virtualScrollItemHeight: number;
/** Attacher l'élément de liste déroulante au 'body' ou a un container (réf. vers un élément #div ou nom de la classe du parent) */
appendTo: 'body' | HTMLElement | string | undefined;
hasOptions: boolean;
/** Propriété CSS z-index de la liste, par défaut supérieur aux composants 'lifted' DSFR */
zIndex: number | undefined;
/** Hauteur maximale avant le scroll sur la liste déroulante. */
scrollHeight: string;
classToWrap: string;
hasToolBar: boolean;
indexFirstSelected: number | null;
/** Set focus on list on opening */
autofocus: boolean;
/** La dropdown prend la taille des éléments qu'il contient (par défaut : taille du select) */
autoWidthDropdown: boolean;
hideList: EventEmitter<void>;
focusOnList: EventEmitter<HTMLElement>;
dropdownAttached: EventEmitter<void>;
/** Element auquel la liste est attachée programmatiquement si appendTo défini */
protected containerToAttach: HTMLElement | undefined;
private _toolBarFirstElement;
private _displayDropdown;
private readonly _renderer;
constructor();
get displayDropdown(): boolean;
get comboBoxElement(): HTMLElement;
set displayDropdown(value: boolean);
/**
* Fermer la liste déroulante en cas de clic en dehors du composant et detruire le composant si il a été ajouté en appendTo
* @internal */
onClickOutside(): void;
/** La dropdown est visible et positionnée */
onDropdownAttached(): void;
/**
* Positionne le focus sur la toolbar si elle existe ou un élément de la liste à l'ouverture de la dropdown
* @internal */
setFocus(): void;
/**
* Gestion des événements clavier sur la toolbar
* - "flèche bas" : le focus est positionné sur la liste.
* - "TAB" : si dernier élément focusable de la toolbar, fermer la dropdown et aller sur l'element suivant
* - "SHIFT TAB": si premier élément focusable de la toolbar, fermer la dropdown et aller sur l'element suivant
* - "ECHAP" : fermer la dropdown et conserver le focus sur le select
*/
protected onKeyDownToolbar(event: KeyboardEvent): void;
/**
* Positionne le focus sur un élément de la liste lors de l'ouverture ou après "flèche bas" depuis le champ de recherche.
* - Si un élément est déjà sélectionné, le focus est positionné sur celui-ci.
* - Sinon, le focus est placé sur le premier élément de la liste.
*/
private focusOnListElement;
/**
* cas TAB : L'élément est le dernier élément focusable de la toolbar :
* - l'élément est la croix pour vider la recherche
* - l'élément est la barre de recherche et la croix n'est pas présente
* - la barre de recherche n'est pas présente (un seul élément focusable : tout sélectionner)
*/
private isLastFocusableOnToolBar;
/**
* Attribut aria-activedescendant sur l'input égal à l'option qui a le focus
* @internal */
private setAriaActiveDescendant;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownContainerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownContainerComponent, "edu-dropdown-container", never, { "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "virtualScrollItemHeight": { "alias": "virtualScrollItemHeight"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "hasOptions": { "alias": "hasOptions"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; }; "classToWrap": { "alias": "classToWrap"; "required": false; }; "hasToolBar": { "alias": "hasToolBar"; "required": false; }; "indexFirstSelected": { "alias": "indexFirstSelected"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "autoWidthDropdown": { "alias": "autoWidthDropdown"; "required": false; }; "displayDropdown": { "alias": "displayDropdown"; "required": false; }; }, { "hideList": "hideList"; "focusOnList": "focusOnList"; "dropdownAttached": "dropdownAttached"; }, ["listbox"], ["control", "[toolbar]", "empty", "*"], true, never>;
}