@edugouvfr/ngx-dsfr-ext

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, Renderer2, TemplateRef } from '@angular/core'; import { DefaultControlComponent, DsfrButtonType, DsfrButtonVariant, DsfrSeverity } from '@edugouvfr/ngx-dsfr'; import { DsfrCompleteEvent } from './autocomplete.model'; import * as i0 from "@angular/core"; export declare class DsfrAutocompleteComponent extends DefaultControlComponent<any> implements OnInit, AfterViewInit, OnDestroy { private readonly _renderer; /** Template des suggestions, option en paramètre */ suggestionTemplate: TemplateRef<any>; /** @internal */ viewport: CdkVirtualScrollViewport; /** @internal */ inputComponent: ElementRef; /** @internal */ listBox: ElementRef; /** L'utilisateur doit traiter cet événement pour déclencher une méthode de recherche qui met à jour la propriété suggestions. */ filterChange: EventEmitter<DsfrCompleteEvent>; /** Emet la suggestion à la sélection de celle-ci */ suggestionSelect: EventEmitter<any>; /** Fermeture de la liste de suggestions */ listClose: EventEmitter<void>; /** 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; /** Propriété CSS z-index de la liste, par défaut supérieur aux composants 'lifted' DSFR */ zIndex: number | undefined; /** Activer le filtre automatique sur l'autocomplete. Faux par défaut */ autoFilter: boolean; /** Supprime la valeur de l'input si elle ne provient pas directement de la liste de suggestion. */ requireSelection: boolean; /** Mode sélection multiple de valeurs */ multiple: boolean; /** Mode multiple: Nombre max. d'options sélectionnables */ maxSelectedOptions: number | undefined; /** Activer le virtual scroll */ virtualScroll: boolean; /** Hauteur maximale avec unité avant le scroll sur la liste déroulante (correspond à la propriété css max-height)*/ scrollHeight: string; /** Surcharger la hauteur en px d'un item dans le cas du virtual scroll. Par défaut 24 (px). */ virtualScrollItemHeight: number; /** Nom de la propriété correspond à la valeur (string) dans l'objet suggestion */ suggestionValueKey: string; /** Afficher le spinner indiquant le chargement des suggestions */ loading: boolean; /** * Cache le label visuellement en le laissant disponible aux lecteurs d'écran. */ labelSrOnly: boolean; /** 👓 Correspond à l'attribut `aria-label` */ ariaLabel: string; /** 👓 Correspond à l'attribut `aria-invalid` */ ariaInvalid: string; /** 👓 Correspond à l'attribut `aria-describedby` */ ariaDescribedby: string; /** * Le délai (en millisecondes) pour déclencher l'événement de changement de saisie et de filtrage. * Par défaut la valeur est 0 */ delay: number; /** minimum de caractères nécessaires au déclenchement des suggestions. 1 par défaut */ minLength: number; /** (form-input) type de l'input, 'text' ou 'search'. 'text' par défaut */ type: 'text' | 'search'; /** (form-input) champ obligatoire ou non, faux par défaut. */ required: boolean; /** (form-input) placeholder de l'input. */ placeholder: string; /** (form-input) attribut maxLength de l'input. */ maxLength: number; /** (form-input) ajoute un icone à droite dans le champ de saisie. */ icon: string; /** (form-input) pattern de l'input.*/ pattern: string; /** (form-input) ajout d'un style spécifique, permet par exemple de la limiter la largeur d'un input. */ customClass: string; /** (form-input) message d'information lié au composant */ message: string | undefined; /** (form-input) représente la sévérité du message. */ messageSeverity: DsfrSeverity; /** (form-input) Emission de l'événement si le type du bouton est différent de `submit`. */ buttonSelect: EventEmitter<Event>; /*** (form-input) permet de désactiver le bouton d'action. 'false' par défaut. */ buttonDisabled: boolean; /*** (form-input) crée un combo champ + bouton si buttonIcon est renseigné */ buttonIcon: string | undefined; /** (form-input) crée un combo champ + bouton si buttonLabel est renseigné */ buttonLabel: string; /*** (form-input) tooltip message sur le bouton s'il y a lieu. */ buttonTooltipMessage: string; /*** (form-input) type du button,'button' par défaut. */ buttonType: DsfrButtonType; /** (form-input) style du bouton, 'primary' par défaut. */ buttonVariant: DsfrButtonVariant; /** (form-input) [accessibilité] Spécifie le libellé qui sera retranscrit par les narrateurs d'écran. */ buttonAriaLabel: string; /** (form-input) Change la mise en page d'un input accompagné d'un bouton. */ inputWrapMode: 'addon' | 'action'; /** Mode multiple : à la suppression d'une suggestion (tag) */ clearOptionSelect: EventEmitter<{ nativeEvent: Event; option: any; }>; /** @internal */ valueInput: string; protected isExpanded: boolean; protected currentOptionIndex: number; protected statusMessageMultiple: string; /** Nombre de résultats après une recherche (pas de valeur initiale = a11y) */ protected nbSuggestions: import("@angular/core").Signal<number>; /** Les suggestions manipulées par la fonction de filtrage de l'utilisateur. */ protected filteredSuggestions: import("@angular/core").WritableSignal<any[]>; private i18n; /** Les suggestions originales utilisées lorsqu'on est en autoFilter. */ private originalSuggestions; private inputChange$; private notifyOnDestroy; /** Indique si l'utilisateur a tapé au moins un caractère */ private hasUserTyped; constructor(_renderer: Renderer2); /** Liste des suggestions */ set suggestions(suggestions: any[]); /** Fonction de formatage de la valeur affichée dans l'input à la sélection d'une suggestion */ formatOnSelect: (selectedSuggestion: any) => string; /** @internal */ ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; /** @internal */ onToogleDisplayList(display: boolean): void; /** @internal */ onInput(event: Event): void; /** @internal Ouverture de la liste des suggestions au focus si le minLength est de 0 */ onFocusInput(): void; /** Gestion des touches de navigation. */ /** @internal */ doKeyEvent(event: KeyboardEvent, options: any[]): void; /** * On ferme la liste des suggestions quand on sort du champ. * Mise a jour de la valeur dans le cas de requireSelection ou multiple * */ /** @internal */ updateValueAndCloseList(hasSelectOption?: boolean): void; /** Sélection d'une suggestion */ /** @internal */ onOptionSelect(suggestion: any, i: number, hasClickOnOption: boolean): void; /** * Ajout de l'attribut aria-activedescendant correspond à l'option qui a le focus * @internal */ onOptionFocus(optionId: string): void; /** Override writeValue pour setter la valeur de l'input programmatiquement à l'initialisation * @internal */ writeValue(value: any): void; /** @internal */ isOptionSelected(i: number, option?: any): boolean; /** Emission de buttonSelect au niveau de form-input, seulement si le type du bouton n'est pas `submit` */ protected onInputButtonSelect(e: Event): void; /** Suppression d'une suggestion sélectionnée en mode multiple */ protected removeSuggestion(e: Event, opt: any): void; /** Filtrage apres input change+debounce */ private handleInputChange; /** * Filtre la liste avec la valeur * * La recherche se fait toujours à partir de : originalSuggestions * On valorise directement la propriété privée _suggestions sans passer par le setter (réservé à l'utilisateur) * afin de garder intact originalSuggestions */ private doAutoFilter; private activateOption; /** * En mode virtualScroll le scroll doit se faire par la methode scrollToIndex de CDK virtualscroll * @param index index de l'option dans la liste gérée par cdkVirtualFor */ private manageScrollForVirtualScroll; private resetAriaActiveDescendant; /** * Ajoute la suggestion dans la liste si elle n'est pas déja présente et si le nombre d'options sélectionnées est inférieur à maxSelectedOptions * @param suggestion */ private addSuggestionMultiple; private resetValueAndIndex; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrAutocompleteComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrAutocompleteComponent, "dsfr-ext-autocomplete, dsfrx-autocomplete", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "autoFilter": { "alias": "autoFilter"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxSelectedOptions": { "alias": "maxSelectedOptions"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; }; "virtualScrollItemHeight": { "alias": "virtualScrollItemHeight"; "required": false; }; "suggestionValueKey": { "alias": "suggestionValueKey"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "labelSrOnly": { "alias": "labelSrOnly"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaInvalid": { "alias": "ariaInvalid"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "type": { "alias": "type"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageSeverity": { "alias": "messageSeverity"; "required": false; }; "buttonDisabled": { "alias": "buttonDisabled"; "required": false; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "buttonTooltipMessage": { "alias": "buttonTooltipMessage"; "required": false; }; "buttonType": { "alias": "buttonType"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "buttonAriaLabel": { "alias": "buttonAriaLabel"; "required": false; }; "inputWrapMode": { "alias": "inputWrapMode"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; "formatOnSelect": { "alias": "formatOnSelect"; "required": false; }; }, { "filterChange": "filterChange"; "suggestionSelect": "suggestionSelect"; "listClose": "listClose"; "buttonSelect": "buttonSelect"; "clearOptionSelect": "clearOptionSelect"; }, ["suggestionTemplate"], ["[label]"], true, never>; }