@edugouvfr/ngx-dsfr-ext

import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit } from '@angular/core'; import { DsfrI18nService, DsfrSelectOption, LangService, LoggerService } from '@edugouvfr/ngx-dsfr'; import { DsfrDateEvent } from '../shared/models/date-event'; import * as i0 from "@angular/core"; /** * 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 */ export declare class DsfrCalendarComponent implements AfterViewInit, OnDestroy, OnInit, OnChanges { private i18n; private langService; private loggerService; /** * 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 | undefined; /** 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; /** 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; /** @internal */ constructor(i18n: DsfrI18nService, langService: LangService, loggerService: LoggerService); /** * @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 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; /** * 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; /** * Compare deux dates et retourne true si ces dernières sont les même. * * @param day1 Date 1 à comparer * @param day2 Date 2 à comparer * @returns true si les deux dates sont les même */ private isSameDay; /** * 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; /** * 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; /** * Calcul 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; private isDayDisabled; 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 setNewValue; /** * 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; /** * @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; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrCalendarComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrCalendarComponent, "dsfr-ext-calendar, dsfrx-calendar", never, { "value": { "alias": "value"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": true; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, { "dateChange": "dateChange"; "calendarChange": "calendarChange"; }, never, never, true, never>; }