@edugouvfr/ngx-dsfr-ext

import * as _angular_core from '@angular/core'; import { OnInit, AfterViewInit, OnDestroy, TemplateRef, ElementRef, EventEmitter, OnChanges, Signal, AfterContentInit, WritableSignal, ChangeDetectorRef, ViewContainerRef, Renderer2, DestroyRef } from '@angular/core'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { DefaultControlComponent, DsfrButtonType, DsfrButtonVariant, DsfrSelectOption, DsfrLink, DsfrSeverity, DsfrButtonComponent, DsfrLinkComponent, DsfrSize, DsfrButton, DsfrOption, DefaultValueAccessorComponent, DsfrSeverityConst, DsfrI18nService, DsfrModalAction, DsfrButtonVariantConst, DsfrHeadingLevel as DsfrHeadingLevel$1, DsfrBadge, DsfrTableOptions, DsfrColumn, DsfrSegmentedControl, DsfrTableState, DsfrTablePaginationEvent, DsfrSortColumn, DsfrTableComponent, DsfrFileSizeUnit } from '@edugouvfr/ngx-dsfr'; export { DsfrUserMenuComponent as DsfrProfileMenuComponent, DsfrToolLinkMenuComponent as DsfrToolsMenuComponent } from '@edugouvfr/ngx-dsfr'; import { Validator, AbstractControl, ValidationErrors } from '@angular/forms'; import { Observable } from 'rxjs'; import { BreakpointObserver } from '@angular/cdk/layout'; interface DsfrCompleteEvent { /** Browser event. */ originalEvent: Event; /** Selected option value. */ query: string; } type DsfrSuggestions = any[]; /** * Interface utilisée pour le contexte du template suggestionTemplate */ interface DsfrSuggestionContext { $implicit: any; index: number; } declare class DsfrAutocompleteComponent extends DefaultControlComponent<any> implements OnInit, AfterViewInit, OnDestroy { /** Template des suggestions, option en paramètre */ suggestionTemplate?: TemplateRef<DsfrSuggestionContext>; /** @internal viewport pour le virtualScroll */ viewport?: CdkVirtualScrollViewport; /** @internal le composant de saisie (<input>) */ inputComponent?: ElementRef; /** (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; /** 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; /** (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'; /** * [accessibilité] Permet de masquer visuellement le libellé du bouton en le laissant accessible aux dispositifs d'assistance. * * A utiliser pour le bouton si icône seule. */ buttonLabelSrOnly: boolean; /** 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>; /** Mode multiple : à la suppression d'une suggestion (tag) */ clearOptionSelect: EventEmitter<{ nativeEvent: Event; option: any; }>; /** 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: _angular_core.InputSignal<string | HTMLElement | undefined>; /** Propriété CSS z-index de la liste, par défaut supérieur aux composants 'lifted' DSFR */ zIndex: _angular_core.InputSignal<number | undefined>; /** Activer le filtre automatique sur l'autocomplete. Faux par défaut */ autoFilter: _angular_core.InputSignal<boolean>; /** Supprime la valeur de l'input si elle ne provient pas directement de la liste de suggestion. */ requireSelection: _angular_core.InputSignal<boolean>; /** Mode sélection multiple de valeurs */ multiple: _angular_core.InputSignal<boolean>; /** Mode multiple: Nombre max. d'options sélectionnables */ maxSelectedOptions: _angular_core.InputSignal<number | undefined>; /** Activer le virtual scroll */ virtualScroll: _angular_core.InputSignal<boolean>; /** Hauteur maximale avec unité avant le scroll sur la liste déroulante (correspond à la propriété css max-height) */ scrollHeight: _angular_core.InputSignal<string>; /** Surcharger la hauteur en px d'un item dans le cas du virtual scroll. Par défaut 24 (px). */ virtualScrollItemHeight: _angular_core.InputSignal<number>; /** Nom de la propriété correspondant à la valeur (string) affichée dans l'objet suggestion */ suggestionValueKey: _angular_core.InputSignal<string | undefined>; /** Optionnel : nom de la propriété correspond à la valeur de sélection dans l'objet suggestion. * Sans définition la sélection concerne tout l'objet suggestion */ selectedValueKey: _angular_core.InputSignal<string | undefined>; /** Afficher le spinner indiquant le chargement des suggestions */ loading: _angular_core.InputSignal<boolean>; /** Cache le label visuellement en le laissant disponible aux lecteurs d'écran. */ labelSrOnly: _angular_core.InputSignal<boolean>; /** 👓 Correspond à l'attribut `aria-label` */ ariaLabel: _angular_core.InputSignal<string | undefined>; /** 👓 Correspond à l'attribut `aria-invalid` */ ariaInvalid: _angular_core.InputSignal<string | undefined>; /** 👓 Correspond à l'attribut `aria-describedby` */ ariaDescribedby: _angular_core.InputSignal<string | undefined>; /** * 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: _angular_core.InputSignal<number>; /** Minimum de caractères nécessaires au déclenchement des suggestions. 1 par défaut */ minLength: _angular_core.InputSignal<number>; /** Liste des suggestions */ suggestions: _angular_core.InputSignal<any[]>; /** @internal value interne du dsfr-form-input */ valueInput: _angular_core.WritableSignal<string>; /** @internal */ readonly combinedAriaDescribedBy: _angular_core.Signal<string | null>; protected isExpanded: _angular_core.WritableSignal<boolean>; protected currentOptionIndex: _angular_core.WritableSignal<number>; protected statusMessageMultiple: string; protected listSelectedOptions: any[]; /** Nombre de résultats après une recherche (pas de valeur initiale = a11y) */ protected nbSuggestions: _angular_core.Signal<number>; /** Les suggestions filtrées en cas de autoFilter, égales aux suggestions sinon */ protected filteredSuggestions: _angular_core.WritableSignal<any[]>; private inputChange$; private notifyOnDestroy; /** Container HTML <ul> de la liste des suggestions */ private containerListElement; private readonly _cd; private readonly _i18n; private readonly _renderer; constructor(); /** Fonction de formatage de la valeur affichée dans l'input à la sélection d'une suggestion */ formatOnSelect: (selectedSuggestion: any) => string; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; /** * Override writeValue pour setter la valeur de l'input programmatiquement à l'initialisation * @internal */ writeValue(value: any): void; /** @internal */ setDisabledState(isDisabled: boolean): void; /** * Le blur qui ajoute le statut touched ne doit se déclencher que si la liste est fermée * Pour éviter l'affichage d'erreurs de validation lorsque le clic est appuyé sur la selection d'une option * (touched et donc validation déclenchés trop tot) */ protected onFocusOut(): void; protected onToogleDisplayList(display: boolean): void; protected onInput(event: Event): void; /** Ouverture de la liste des suggestions au focus si le minLength est de 0, ou si l'input comporte déjà une valeur */ protected onFocusInput(): void; /** Gestion des touches de navigation. */ protected doKeyEvent(event: KeyboardEvent, options: any[]): void; protected onClickOption(suggestion: any, i: number): void; /** * Fermeture de la liste des suggestions à la sortie du champ * Mise a jour de la valeur dans le cas de requireSelection ou multiple * @param hasSelectOption l'utilisateur a cliqué ou sélectionné au clavier une option * */ protected updateValueAndCloseList(hasSelectOption?: boolean): void; /** * Gestion de l'attribut aria-selected * true: en mode multiple l'option est sélectionnée, en mode simple l'option est en focus */ protected isOptionSelected(i: number, option?: any): boolean; /** Méthode c/c de la même méthode qui existe du côté du composant form-input */ protected getWrapClasses(): string[]; /** * Gestion du focus à l'ouverture de la liste (evenement du dropdown-container) * @param el element ul de liste ou li courant */ protected handleListFocusOnOpen(listElement: HTMLElement): void; /** 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, optToRemove: any): void; /** Sélection d'une suggestion (clavier ou souris) */ private onOptionSelect; /** 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; /** * Affichage visuel de l'option active (class selected, aria-activedescendant) a la nav. clavier ou selection souris * Scroll jusqu'a l'option en cas de navigation clavier * @param index index courant option active * @param hasClickOnOption selection a la souris */ private activateFocusOption; private addSelectedSuggestion; private handleNoSelectedSuggestion; /** * 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; /** Initialisation de la liste des options programmatiquement sélectionné depuis suggestions */ private initSelectedOptionsList; /** Initialisation de l'option sélectionnée programmatiquement depuis suggestions */ private initSelectedOption; private resetValueAndIndex; /** * 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; /** Effacement de aria-activedescendant lorsque la liste est cachée ou l'input vide */ private resetAriaActiveDescendant; /** Get option dans la liste des options selon attribut HTML [data-index] */ private queryOptionFromDataIndex; private getSelectedValue; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsfrAutocompleteComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsfrAutocompleteComponent, "dsfr-ext-autocomplete, dsfrx-autocomplete", never, { "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; }; "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; }; "buttonLabelSrOnly": { "alias": "buttonLabelSrOnly"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "autoFilter": { "alias": "autoFilter"; "required": false; "isSignal": true; }; "requireSelection": { "alias": "requireSelection"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSelectedOptions": { "alias": "maxSelectedOptions"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "virtualScrollItemHeight": { "alias": "virtualScrollItemHeight"; "required": false; "isSignal": true; }; "suggestionValueKey": { "alias": "suggestionValueKey"; "required": false; "isSignal": true; }; "selectedValueKey": { "alias": "selectedValueKey"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "labelSrOnly": { "alias": "labelSrOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaInvalid": { "alias": "ariaInvalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "formatOnSelect": { "alias": "formatOnSelect"; "required": false; }; }, { "buttonSelect": "buttonSelect"; "filterChange": "filterChange"; "suggestionSelect": "suggestionSelect"; "listClose": "listClose"; "clearOptionSelect": "clearOptionSelect"; }, ["suggestionTemplate"], ["[label]"], true, never>; static ngAcceptInputType_maxLength: unknown; static ngAcceptInputType_buttonLabelSrOnly: unknown; } interface DsfrDateEvent { value?: string | DsfrRangeModel; date?: Date; } /** * Implémente la saisie d'une date via un input ou via un calendrier affichant les jours et les mois. * Validator est implémenté uniquement par rapport à min et max */ declare class DsfrCalendarComponent implements AfterViewInit, OnDestroy, OnInit, OnChanges { /** * Valeur initial de la date. * La valeur doit prendre la forme dd/mm/yyyy pour la locale fr et mm/dd/yyyy pour la locale en. */ value?: string | DsfrRangeModel; /** Force le focus sur la date courante à l'initialisation du composant */ autofocus: boolean; /** Id de l'élément correspondant au label de la grille de dates */ ariaLabelledBy: string; /** Modifie le mode de sélection du calendrier, entre `single` et `range` */ mode: DsfrCalendarMode; /** * Permet d'ignorer la valeur initiale de l'input `value` si celle ci est erronée. * (ex: date de début postérieure à date de fin) */ ignoreInitialValue: boolean; /** Emission de la date au format DsfrDateEvent */ dateChange: EventEmitter<DsfrDateEvent>; /** Evènement au changement d'affichage du calendrier (changement mois ou année) */ calendarChange: EventEmitter<Date>; protected previousMonth?: ElementRef<HTMLButtonElement>; protected nextMonth?: ElementRef<HTMLButtonElement>; protected monthSelect?: ElementRef<HTMLElement>; protected yearSelect?: ElementRef<HTMLElement>; protected tbody?: ElementRef<HTMLTableElement>; protected monthSelectOptions: DsfrSelectOption[]; protected yearSelectOptions: DsfrSelectOption[]; protected currentMonthIndex: number; protected currentYear: number; protected translatedMonthAbbreviations: string[]; protected translatedMonths: string[]; protected prevMonthLabel: string; protected nextMonthLabel: string; protected monthSelectLabel: string; protected yearSelectLabel: string; protected isMonoYear: boolean; protected isMonoMonth: boolean; protected readonly rows: any[]; protected readonly columns: any[]; private dayCells; private prevCodeLang; private focusDay; private selectedDay; private lastDate; private _min; private _max; private subscription; private firstDayOffset; private daysInMonth; private rangeStart; private rangeEnd; /** * Date de fin potentielle du range en cours de sélection, utilisée uniquement pour gérer la prévisualisation du range. */ private rangeEndPreview; private readonly i18n; private readonly langService; private readonly loggerService; constructor(); /** * @return Le code de la langue en cours */ get codeLang(): string; get min(): string | undefined; get max(): string | undefined; protected get isEnglishLocale(): boolean; /** * Date minimale inclue. Doit être au format IS0-8601 : AAAA-MM-JJ. * Ce paramètre peut être utilisé seul ou avec la propriété max. */ set min(value: string | undefined); /** * Date maximale inclue. Doit être au format IS0-8601 : AAAA-MM-JJ. * Ce paramètre peut être utilisé seul ou avec la propriété min. */ set max(value: string | undefined); /** @internal */ ngOnInit(): void; /** @internal */ ngOnDestroy(): void; /** @internal */ ngAfterViewInit(): void; /** @internal */ ngOnChanges(): void; /** * Permet de forcer le focus sur la date active, la dernière date focusée ou la date du jour par défaut. * * Cette méthode est notamment utilisée dans la gestion du calendrier embarqué dans une modale. */ focusDate(): void; /********************** * Event Handlers **********************/ protected handleCancelButton(event: Event): void; protected handleNextMonthButton(event: Event): void; protected handlePreviousMonthButton(event: Event): void; protected handleMonthSelectKeydown(event: KeyboardEvent): void; protected handleYearSelectKeydown(event: KeyboardEvent): void; protected handleDayClick(event: MouseEvent): void; protected handleDayMouseEnter(event: MouseEvent): void; /** * Permet d'éviter que la prévisualisation du range ne persiste lorsque le curseur de lasoursi est déplacé hors de * la table */ protected handleCalendarMouseLeave(): void; protected handleDayKeyDown(event: KeyboardEvent): void; /** * Gestion de la sélection dans la liste déroulante des mois * * @param selectedMonthIndex Index du mois sélectionné (indexage commençant à 1) */ protected handleMonthSelect(selectedMonthIndex: number): void; /** * Gestion de la sélection dans la liste déroulante des années * * @param selectedYear Année sélectionnée */ protected handleYearSelect(selectedYear: number): void; /** * Détermine si le jour correspondant à la cellule appartient au range en cours de sélection. */ protected isInRangePreview(row: number, col: number): boolean; private getDateFromCell; /** * Permet de calculer si le jour a focus est bien disponible dans le mois et l'année de destination après sélection * dans la liste déroulante. * * Dans le cas où l'on se trouve le 29 Février 2024 et où l'on change d'année grâce à la liste déroulante à 2023, * le jour a focus devrait être le 28 Février 2023. * * @param currentYear Année cible * @param selectedMonthIndex Mois cible * @param currentDay Jour courant dans le calendrier * @returns Le numéro du jour à focus */ private computeDayToFocus; /** * Formatage de la valeur dans la langue courante * @param value Valeur au format ISO ou dans la langue courante */ private reformatValue; /** * Gestion du changement de langue dans le composant. * * @param code Code de la locale à prendre en compte */ private onLangChange; /** * Mets à jour l'ensemble du Date Picker */ private updateCalendar; /** * Détermine la colonne à partir de laquelle le mois commence dans le calendrier. * * Cette colonne est dépendante du jour de la semaine mais également de la locale : le calendrier anglais a comme * première colonne le dimanche, contrairement au calendrier français pour lequel la première colonne est le lundi. * * @param firstDayOfMonth Index du premier jour de la semaine * @returns Index de la colonne où commence le mois */ private getCurrentMonthStartingColumn; /** * Mise à jour des valeurs des deux listes déroulantes, mois et année. */ private updateMonthAndYearSelects; /** * Mise à jour de l'état d'une cellule de la table en fonction de : * - si elle se trouve dans le mois, * - si elle se trouve en dehors des dates limites, * - si elle est sélectionnée. * * @param tdElement Une cellule td du tableau * @param outsideOfCurrentMonth boolean true si le jour fait partie du mois ou non * @param cellDate jour correspondant à la cellule */ private updateCell; private setCellAsFocusable; private setCellAsSelected; private setCellAsInsideRangeBoundary; private setCellDataDate; private setCellText; private setCellAsOutOfBounds; private setCellAsDisabled; /** * Suppression des éléments ayant pu être attribués durant le rendu de la grille * * @param tdElement */ private resetCellAttributes; /** * Initie le changement de focus de la date. * * @param targetDate Date cible attendue */ private moveFocusToDay; /** * Met à jour le tabindex de toutes les cellules de la grille. * * Nécessaire pour rendre un élement de la table focusable. * * @param autofocus Permet de forcer le focus sur l'élément défini comme étant à tabindex 0. Valeur par défaut à true. */ private updateTableCellsTabIndex; /** * Force le focus sur la limite min ou max d'un mois pour éviter que le focus soit indisponible. * * Exemple: L'utilisateur sélectionne le 17 Juillet 2024. Il décide ensuite de changer de mois via la liste * déroulante et cible Octobre. Cependant, la date max donnée au date picker est le 10 Octobre 2024. Etant incapable * de focus cette date au retour du focus dans la grille, la nouvelle date de focus bascule alors à la date max déterminée, * cad. le 10 Octobre 2024. * * @param boundary type du boundary à prendre en compte, entre le min et le max */ private autoFocusBoundaryDate; private initializeCalendar; private getNumberOfDaysInMonth; /** * Calcule la date cible en fonction de la date actuelle et du nombre de mois à ajouter ou enlever à cette dernière. * * @param currentDate Date actuelle * @param monthsOffset Nombre de mois à ajouter ou enlever à la date actuelle * @returns La date cible */ private computeTargetDateWithMonthOffset; private moveToNextYear; private moveToPreviousYear; private moveToNextMonth; private moveToPreviousMonth; private moveFocusToNextDay; private moveFocusToNextWeek; private moveFocusToPreviousDay; private moveFocusToPreviousWeek; private moveFocusToFirstDayOfWeek; private moveFocusToLastDayOfWeek; /** * Vérifie que le jour cliqué est sélectionnable en fonction de si il est disabled et de si le jour cliqué est * le même que celui en cours de sélection en mode "range". * * @param domNode La date cliquée * @returns Un booléen confirmant que la date cliquée est sélectionnable */ private isDaySelectable; private getDayFromDataDateAttribute; /** * Mets à jour la valeur du composant et émets un événement de type DsfrDateEvent. * Cette emission peut être omise via le paramètre booléen skipEmission, notamment à l'initialisation du composant. * @param value * @private */ private setSingleModeNewValue; /** * Mets à jour la valeur de période du composant en fonction de la nouvelle date donnée, et émets un événement de type DsfrDateEvent. * Cette emission peut être omise via le paramètre booléen skipEmission, notamment à l'initialisation du composant. * @private */ private setRangeModeNewIndividualValue; /** * Mets entièrement à jour la valeur de période du composant et émets un événement de type DsfrDateEvent. * Cette emission peut être omise via le paramètre booléen skipEmission, notamment à l'initialisation du composant. * @param value * @private */ private setNewRangeValue; /** * Valorise la date de l'input suite à la sélection d'une date dans le calendrier * @param domNode cellule td du calendrier telle que 'data-date' contienne la date ISO, ex : data-date="2024-05-28". * - i18n : le code de formatage fait appel à DateUtils */ private updateCalendarValue; /** * Positionne la date du calendrier à partir de * - i18n : la date est obtenue à partir de DateUtils */ private computeInitialDate; private initializeFocusAndSelectedDay; /** * @param date date * @returns true si la data 'd' est dans l'intervalle [min, max] du cou */ private inMinMaxRange; private computeMonthSelectOptions; private computeYearSelectOptions; private updateMonthTranslations; private isValidIso; /** * Dans le cas d'un changement de mois ou d'année dans le calendrier, cette fonction détermine le type de butée atteinte * dans le cas ou le nouveau focusDay se trouverait en dehors des dates min ou max, uniquement dans un mois contenant lesdits min ou max. * * Exemple: Le focusDay est le 20 Juin 2024 et la date max le 15 Juillet 2024. Si l'utilisateur navigue vers le mois de Juillet via la * liste déroulante ou la flèche de "Mois suivant", getReachedBoundary retourne 'max', qui est le type de butée atteinte. * * @returns Retourne le type de butée atteinte (min ou max) ou undefined si aucune butée n'est atteinte ou qu'aucun focusDay n'est valide pour * cette date. */ private getReachedBoundary; private computeMonoYearAndMonoMonth; /** * Vérifie si la date active du composant se trouve dans les limites données du composant. * * @param date * @returns Un booléen indiquant si la date se trouve bien entre les limites minimum et maximum données. */ private isInBounds; /** * Attribue la valeur sélectionnée à l'index correspondant dans `value`, en fonction de si il doit être remis * à jour, et de si l'une des deux valeurs est déjà prise en compte. * * @param newValue * @param reset * @returns Un booléen indiquant si la plage de date est complètement formée. */ private setIndividualRangeValue; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsfrCalendarComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsfrCalendarComponent, "dsfr-ext-calendar, dsfrx-calendar", never, { "value": { "alias": "value"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "ignoreInitialValue": { "alias": "ignoreInitialValue"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, { "dateChange": "dateChange"; "calendarChange": "calendarChange"; }, never, never, true, never>; static ngAcceptInputType_autofocus: unknown; static ngAcceptInputType_ignoreInitialValue: unknown; } type DsfrRangeModel = [string | undefined, string | undefined]; type DsfrDefinedRangeModel = [string, string]; type DsfrCalendarMode = 'single' | 'range'; declare class DsfrCalendarModalComponent implements AfterViewInit, OnDestroy { /** * Date minimale inclue. Doit être au format IS0-8601 : AAAA-MM-JJ. * Ce paramètre peut être utilisé seul ou avec la propriété max. */ min: string; /** * Date maximale inclue. Doit être au format IS0-8601 : AAAA-MM-JJ. * Ce paramètre peut être utilisé seul ou avec la propriété min. */ max: string; /** * Valeur de l'attribut aria-label du bouton d'ouverture de la modale. */ ariaLabel: string; /** * Message du `tooltip` (attribut `title` du bouton) ou ajout d'un `span` en `sr-only` si pas de label. */ tooltipMessage: string; /** * Valeur de l'attribut disabled du bouton d'ouverture de la modale. */ disabled: boolean; /** Modifie le mode de sélection du calendrier, entre `single` et `range` */ mode: DsfrCalendarMode; /** * Permet d'ignorer la valeur initiale de l'input `value`si celle ci est erronée * (ex: date de début postérieure à date de fin) */ ignoreInitialValue: boolean; /** * Emission de la date au format DsfrDateEvent */ dateChange: EventEmitter<DsfrDateEvent>; protected modal: ElementRef<HTMLDivElement>; protected calendar: DsfrCalendarComponent; /** * Id aléatoire, unique, de la modale (le calendrier) */ protected modalId: string; protected ariaLabelTitleModal: string; protected isOpen: boolean; protected dialogTitle: string; protected translatedMonths: string[]; protected dialogTriggerBtnNode: HTMLButtonElement | undefined; private _value; private currentMonthIndex; private currentYear; private subscription; private readonly elementRef; private readonly i18n; private readonly logger; constructor(); get value(): string | DsfrRangeModel | undefined; /** * Valeur initial de la date. * La valeur doit prendre la forme dd/mm/yyyy pour la locale fr et mm/dd/yyyy pour la locale en. */ set value(value: string | DsfrRangeModel | undefined); ngAfterViewInit(): void; ngOnDestroy(): void; /** * Gère le clic en dehors de la modale */ protected onCalendarOutside(): void; protected handleTriggerBtnClick(): void; protected handleDataChange(dateEvent: DsfrDateEvent): void; protected handleModalKeydown(keyEvent: KeyboardEvent): void; protected handleCancelButton(): void; /** * Met à jour le titre de la dialog (visuellement caché) pour les besoins d'accessibilité. */ private updateDialogTitle; /** * Ferme la modale. * * Positionne le focus sur le bouton d'ouverture de la modale si besoin. * * @param focusTriggerBtn Permet de savoir si le focus doit être donné au bouton d'ouverture de la modale */ private close; private updateMonthTranslations; /** * Gestion du changement de langue dans le composant. * * @param code Code de la locale à prendre en compte */ private onLangChange; /** * Mise à jour des valeurs des deux listes déroulantes, mois et année. */ private updateMonthIndexAndYear; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsfrCalendarModalComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsfrCalendarModalComponent, "dsfr-ext-calendar-modal, dsfrx-calendar-modal", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; }; "tooltipMessage": { "alias": "tooltipMessage"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "ignoreInitialValue": { "alias": "ignoreInitialValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dateChange": "dateChange"; }, never, never, true, never>; } interface DsfrSlide { /** Url de l'image de l'entête. */ imagePath?: string; /** Texte alternatif de l'image, obligatoire si image renseigné. */ alt?: string; /** Titre associé à l'image, optionnel */ caption?: string; /** Description associée à l'image, optionnel */ content?: string; /** Lien associé, optionnel */ link?: DsfrLink; /** Données supplémentaires associées, optionnel */ data?: DsfrLink; } /** * Interface utilisée pour le contexte du template templateSlide */ interface DsfrSlideContext { $implicit: DsfrSlide; index: number; } declare const DEFAULT_INTERVAL: number; declare class DsfrCarouselComponent implements OnInit, OnDestroy, AfterViewInit { /** @internal */ slidesContainer?: ElementRef; /** @internal */ templateSlide?: TemplateRef<DsfrSlideContext>; /** Identifiant du champ, généré automatiquement par défaut. */ carouselId?: string; /** Attribut aria-label du composant */ ariaLabel?: string; /** Défilement automatique, faux par défaut */ autoplay: boolean; /** Indique si le carrousel boucle ou non, vrai par défaut. */ circular: boolean; interval: number; /** Indique si le carrousel doit réagir aux événements du clavier, vrai par défaut. */ keyboard: boolean; /** Tableau de slides. */ slides: DsfrSlide[]; /** Taille maximale du container de slides (optionnel) */ maxWidth?: string; /** Indique si le carrousel doit prendre en charge les interactions par balayage gauche/droite sur les appareils à écran tactile, vrai par défaut. */ touch: boolean; /** Avec les contrôles de chaque côté des slides. */ withControls: boolean; /** Avec des indicateurs d'avancement. */ withIndicators: boolean; /** Avec des indicateurs d'avancement. */ inverse: boolean; /** Afficher les indicateur et contrôles à l'intérieur de l'image */ withControlsInside: boolean; /** Dans le cas de controlsInside à l'interieur, place les indicateur sur un fond noir en couleurs inversées */ reverseColorsIndicators: boolean; /** Avec des labels. */ withCaptions: boolean; /** Désactiver l'animation de transition */ disableTransition: boolean; /** Au changement de slide, emission de l'index du slide actif */ carouselChange: EventEmitter<number>; /** @internal Le carousel est en pause et ne restart que si l'utilisateur clique explicitement sur play */ onPause: boolean; /** @internal */ transition: boolean; private i18n; /** Slide courant. */ private _current; /** Id du timer */ private timeoutId; /** Evénements touch */ private startPoint; private renderer; private transitionListener; constructor(); /** * @internal * Duplique le premier et dernier slide pour l'effet de transition circulaire */ get visibleSlides(): DsfrSlide[]; get current(): number; private set current(value); ngOnInit(): void; ngOnDestroy(): void; ngAfterViewInit(): void; /** * Spécifique mobile * @internal */ onTouchStart(event: TouchEvent): void; /** * Spécifique mobile * @internal */ onTouchEnd(event: TouchEvent): void; /** @internal */ onKeydown(event: KeyboardEvent): void; /** * Transition vers le slide précédent * @internal */ previous(origin?: 'user' | 'timer'): void; /** * Transition vers le slide suivant * @internal */ next(origin?: 'user' | 'timer'): void; /** @internal */ togglePlayPause(): void; /** * @internal * Lance le carousel si en autoplay et non explicitement sur pause */ startSlideshow(): void; /** * @internal * Stoppe le carousel */ stopSlideshow(): void; /** Effet de transition des slides */ private getTransform; private toggleSlideshow; /** * Gestion de l'affichage avant le premier et apres le dernier slide en mode circulaire */ private handleFirstLastTransition; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsfrCarouselComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsfrCarouselComponent, "dsfrx-carousel, dsfr-ext-carousel", never, { "carouselId": { "alias": "carouselId"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "autoplay": { "alias": "autoplay"; "required": false; }; "circular": { "alias": "circular"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "keyboard": { "alias": "keyboard"; "required": false; }; "slides": { "alias": "slides"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "touch": { "alias": "touch"; "required": false; }; "withControls": { "alias": "withControls"; "required": false; }; "withIndicators": { "alias": "withIndicators"; "required": false; }; "inverse": { "alias": "inverse"; "required": false; }; "withControlsInside": { "alias": "withControlsInside"; "required": false; }; "reverseColorsIndicators": { "alias": "reverseColorsIndicators"; "required": false; }; "withCaptions": { "alias": "withCaptions"; "required": false; }; "disableTransition": { "alias": "disableTransition"; "required": false; }; }, { "carouselChange": "carouselChange"; }, ["templateSlide"], never, true, never>; static ngAcceptInputType_autoplay: unknown; static ngAcceptInputType_withControls: unknown; static ngAcceptInputType_withIndicators: unknown; static ngAcceptInputType_inverse: unknown; static ngAcceptInputType_withControlsInside: unknown; static ngAcceptInputType_reverseColorsIndicators: unknown; static ngAcceptInputType_withCaptions: unknown; static ngAcceptInputType_disableTransition: unknown; } /** * Réprésente un message + sévérité. */ interface MessageViewModel { text?: string | string[]; severity?: DsfrSeverity; } /** * Implémente la saisie d'une date via un input ou via un calendrier affichant les jours et les mois. * Validator est implémenté uniquement par rapport à min et max * @since 0.10 * @author pfontanet */ declare class DsfrDatePickerComponent extends DefaultControlComponent<string | DsfrRangeModel> implements OnInit, AfterViewInit, Validator, OnDestroy { /** * Indique si la date est obligatoire. */ required: boolean; /** * Indique si le masque de saisie doit être affiché ou non. */ showMask: boolean; /** * Cache le Label visuellement en le laissant disponible aux lecteurs d'écran. */ labelSrOnly: boolean; /** * Indique la valeur de la propriété css z-index de la modale du composant. */ zIndex?: 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; /** Modifie le mode de sélection du datepicker, entre `single` et `range` */ mode: DsfrCalendarMode; /** Force l'utilisation du mode regular pour la légende du fieldset en mode range */ rangeLegendRegular: boolean; /** Emission de la date.*/ dateChange: EventEmitter<DsfrDateEvent>; protected calendar?: DsfrCalendarComponent; protected controlSingle?: ElementRef; protected controlRange?: ElementRef; protected modal?: ElementRef<HTMLDivElement>; /** * Presentation Model pour la priorisation des messages. */ protected readonly messageDateViewModel: Signal<MessageViewModel>; protected currentMonthIndex: number; protected currentYear: number; protected translatedMonthAbbreviations: string[]; protected translatedMonths: string[]; protected calendarHeading: string; protected modalLabel: string; protected startDate: string | undefined; protected endDate: string | undefined; /** Permet d'ignorer la valeur passée en input à l'ouverture de la modale, notamment si cette valeur est invalide */ protected ignoreCalendarInitialValue: boolean; /** Gère l'annonce de la date/période sélectionnée à la fermeture de la modale (si sélection effective) */ protected statusMessage: string | undefined; /** * Placeholder par défaut de l'input. Dépend de la langue 'jj/mm/aaaa' ou 'mm/dd/yyyy' */ protected placeholder: string | undefined; /** * Id aléatoire, unique, de la modale (le calendrier) */ protected modalId: string; protected isOpen: boolean; protected buttonLabelChoose: string; protected buttonLabelRangeChoose: string; protected dropdownContainerControlElement: HTMLElement | undefined; private dialogTriggerBtnNode; private prevCodeLang; private dayLabels; private monthLabels; private _min; private _max; /** * Message d'information lié au composant. */ private readonly _message; /** * Représente la sévérité du message. */ private readonly _messageSeverity; /** * Messages d'erreurs relatifs à une validation interne spécifique au composant. */ private readonly _internalError; private readonly cdr; private readonly elementRef; private readonly i18n; private readonly langService; private readonly logger; /** @internal */ constructor(); get value(): string | DsfrRangeModel | undefined; /** * @return Le code de la langue en cours */ get codeLang(): string; /** * @internal */ get min(): string | undefined; /** * @internal */ get max(): string | undefined; protected get isEnglishLocale(): boolean; set value(value: string | DsfrRangeModel | undefined); /** * Date minimale inclue. Doit être au format IS0-8601 : AAAA-MM-JJ. * Ce paramètre peut être utilisé seul ou avec la propriété max. */ set min(value: string | undefined); /** * Date maximale inclue. Doit être au format IS0-8601 : AAAA-MM-JJ. * Ce paramètre peut être utilisé seul ou avec la propriété min. */ set max(value: string | undefined); ngOnInit(): void; ngOnDestroy(): void; ngAfterViewInit(): void; /** * From Validator interface. * * @internal */ validate(control: AbstractControl): ValidationErrors | null; /** * Surcharge de ControlValueAccessor#writeValue permettant potentiellement de corriger le format de la valeur saisie * avant enregistrement dans le modèle. * @internal */ writeValue(value: string | DsfrRangeModel | undefined): void; /** * Il faut écouter focusout et non blur car ce dernier ne bubble pas donc le composant parent ne le capte pas. */ protected onInputSingleFocusout(): void; /** * Il faut écouter focusout et non blur car ce dernier ne bubble pas donc le composant parent ne le capte pas. */ protected onInputRangeFocusout(): void; /** * La date de début ou de fin du range vient d'être modifiée. Il faut appeler la fonction enregistrée via * registerOnChange pour indiquer à Angular que la value a changé et qu'il doit revalider le modèle. */ protected onRangeModelChange(): void; /** * Mise a jour du titre lors de la navigation dans le calendrier. */ protected onUpdateCalendarView(date: Date): void; /** * Gère le clic en dehors de la modale */ protected onCalendarOutside(): void; protected handleTriggerButtonClick(event: Event): void; protected handleTriggerButtonKeydown(event: KeyboardEvent): void; protected handleCancelButton(event: Event): void; protected handleModalKeydown(keyEvent: KeyboardEvent): void; protected onCalendarVisible(): void; protected onCalendarDateChange(dateEvent: DsfrDateEvent): void; private formatValue; private containsMaskLiteral; /** * Met à jour l'étiquette accessible du calendrier (visuellement cachée). */ private updateCalendarHeading; /** * Gère la validation interne de la date pour les critères de date min et date max. * * @param showMessage * * @returns `true` en cas d'erreur, false sinon. */ private handleInternalValidation; private handleSingleModeInternalValidation; private handleRangeModeInternalValidation; private processError; private parseAsDateObject; /** * Changement de la valeur de l'input et formatage dans la langue courante * @param value Valeur au format ISO ou dans la langue courante */ private reformatSingleModeValue; /** * Changement de la valeur de l'input et formatage dans la langue courante * @param value Valeur au format ISO ou dans la langue courante */ private reformatRangeModeValue; /** * Gestion du changement de langue dans le composant. * * @param code Code de la locale à prendre en compte */ private onLangChange; private reformatForNewCodeLang; /** * Ouvre la modale. */ private open; /** * Ferme la modale. * * Positionne le focus sur le bouton d'ouverture de la modale si besoin. * * @param focusTriggerBtn Permet de savoir si le focus doit être donné au bouton d'ouverture de la modale */ private close; /** * Méthode invoquée à la sortie de l'input text. Formate l'input et affecte la propriété 'aria-label' du bouton de * sélection du calendrier. A noter que, si la date est exacte, 'aria-label' contient la date, ex : * "Changer la date, Lundi Mai 27, 2024" ou ="Change Date, Monday July 1, 2024" * - i18n : le code de parsing est remplacé par un appel à DateUtils */ private announceNewValue; private announceNewValueInSingleMode; private announceNewValueInRangeMode; private updateMonthTranslations; private isValidIso; /** * Mise à jour du mois et de l'année pour le titre de la modale. */ private updateMonthIndexAndYear; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsfrDatePickerComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsfrDatePickerComponent, "dsfr-ext-datepicker, dsfrx-datepicker", never, { "required": { "alias": "required"; "required": false; }; "showMask": { "alias": "showMask"; "required": false; }; "labelSrOnly": { "alias": "labelSrOnly"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "rangeLegendRegular": { "alias": "rangeLegendRegular"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, { "dateChange": "dateChange"; }, never, ["[label]", "[label]", "[label]"], true, never>; static ngAcceptInputType_rangeLegendRegular: unknown; } /** * Composant affichage d'un groupe de menu dropdown */ declare class DsfrDropdownMenuGroupComponent implements AfterViewInit { showSeparator: boolean; protected element: ElementRef<any>; /** * Ajout d'un wrapper <li> avec role presentation * si showSeparator, ajout d'un separateur apres ce li */ ngAfterViewInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsfrDropdownMenuGroupComponent, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsfrDropdownMenuGroupComponent, "dsfrx-dropdownmenu-group, dsfr-ext-dropdownmenu-group", never, { "showSeparator": { "alias": "showSeparator"; "required": false; }; }, {}, never, ["*"], true, never>; static ngAcceptInputType_showSeparator: unknown; } /** * Composant affichage d'un menuitem ou d'un menuitemcheckbox du composant dropdown-menu */ declare class DsfrDropdownMenuItemComponent implements AfterViewInit, AfterContentInit, OnDestroy { type: undefined | 'checkbox' | 'radio'; selectItem: EventEmitter<Event>; button: DsfrButtonComponent | undefined; link: DsfrLinkComponent | undefined; _anchorElement: HTMLElement | undefined; _checked: boolean; private readonly elementRef; private readonly renderer; private _unlistenFn; get checked(): boolean; set checked(value: boolean); /** * Positionner les classes CSS si dsfr-button ou dsfr-link */ ngAfterContentInit(): void; /** * Positionnement des éléments dans le DOM pour l'accessi