UNPKG

@edugouvfr/ngx-dsfr

Version:

NgxDsfr est un portage Angular des éléments d'interface du Système de Design de l'État Français (DSFR).

209 lines (208 loc) 11.5 kB
import { AfterContentInit, AfterViewInit, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { DsfrSegmentedControl } from '../segmented-control/segmented-control.model'; import { BasePaginatedTableComponent } from './component/paginated-table.component'; import { DsfrSelectRowDirective } from './directive/row-select.directive'; import { DsfrColumn, DsfrRowOptions, DsfrSortColumn, DsfrTableOptions, DsfrTableSelectionEvent, DsfrTableState } from './table.model'; import * as i0 from "@angular/core"; export declare class DsfrTableComponent extends BasePaginatedTableComponent implements OnInit, OnChanges, AfterContentInit, AfterViewInit, OnDestroy { /** Template pour les groupes de boutons d'actions du header. DOIT contenir un dsfr-buttons-group */ headerActionsTemplate: TemplateRef<any>; /** Template du résumé dans le cas d'un tableau complexe */ headerSummaryTemplate: TemplateRef<any>; /** Template de l'en-tête des colonnes du tableau. (contenu du thead) */ tableHeaderTemplate: TemplateRef<any>; /** Template des lignes, row en paramètre (contenu du tbody) */ tableBodyTemplate: TemplateRef<any>; /** Template du pied du tableau (contenu du tfoot) */ tableFooterTemplate: TemplateRef<any>; /** Template personnalisé pour afficher le total de lignes */ footerResultsTemplate: TemplateRef<any>; /** Template pour les groupes de boutons d'actions du footer */ footerActionsTemplate: TemplateRef<any>; /** Template à afficher pendant le chargement des données */ loadingTemplate: TemplateRef<any>; /** Template pour une vue alternative au tableau (ex. liste) */ alternativeViewTemplate: TemplateRef<any>; /** @internal éléments checkbox enfant pour gérer la sélection si tableBodyTemplate */ cellCheckboxes: QueryList<DsfrSelectRowDirective>; /** * @internal éléments checkbox enfant pour gérer la sélection si tableBodyTemplate non défini. * Dans le cas du template par défaut on ne peut pas utiliser ContentChildren. * ( cf. issues https://github.com/angular/angular/issues/14842 et https://github.com/angular/angular/issues/16299 ) **/ cellCheckboxesDefault: QueryList<DsfrSelectRowDirective>; /** Identifiant de la table */ tableId: string; /** Titre du tableau. Obligatoire sauf si labelledBy est renseigné. */ caption: string; /** Hauteur maximale de la table (px), le contenu supplémentaire provoque un scroll vertical */ fixedHeight: number; /** Rend les th sticky en haut du tableau (à condition que fixedHeight soit renseigné) */ thSticky: boolean; /** Données */ data: any[]; /** Propriété correspondant à l'identifiant unique de chaque donnée (recommandé) */ dataKey: string; /** Options d'affichage du tableau */ tableOptions: DsfrTableOptions; /** Options d'affichage des lignes. dataKey doit être défini */ rowsOptions: DsfrRowOptions[]; /** Définition des colonnes */ columns: DsfrColumn[]; /** Afficher le nombre de résultat total dans le footer */ showFooterResult: boolean; /** Message affiché en cas de tableau vide ('Aucun résultat' par défaut) */ emptyResultsMessage: string | undefined; /** Indique que les données sont en cours de chargement */ loading: boolean; /** Header: affiche la barre de recherche dans le header */ showSearch: boolean; /** * Valeur du placeholder de l'input de recherche, si showSearch est `true`. */ searchInputPlaceholder: string | undefined; /** * Valeur du title du bouton de la barre de recherche, si showSearch est `true`. */ searchButtonTitle: string | undefined; /** * Valeur de la barre de recherche, si `showSearch` est à `true`. */ searchInputValue: string | undefined; /** Header: affiche le changement de type de vue (tableau / liste) */ showHeaderViews: boolean; /** Header: redéfinit les vues du contrôle segmenté (si changeDisplayType). Par défaut tableau/liste */ headerViewsOptions: DsfrSegmentedControl[]; /** Liste des identifiants des lignes initialement sélectionnées */ initialSelection: any[]; /** Renvoie la colonne triée au changement de tri de la table */ readonly sortChange: EventEmitter<DsfrSortColumn | null>; /** Renvoie la vue sélectionnée au changement de vue (displayModes) */ readonly viewSelect: EventEmitter<string>; /** Renvoie la valeur de l'input de la barre de recherche au changement. */ readonly searchChange: EventEmitter<string>; /** Renvoie la valeur de l'input de la barre de recherche au clic sur rechercher. */ readonly searchSelect: EventEmitter<string>; /** A la sélection d'une ligne, émet toutes les lignes sélectionnées et la ligne sélectionnée */ selectionChange: EventEmitter<DsfrTableSelectionEvent>; /** Case à cocher tout sélectionner cochée ou décochée */ showSelectAllChange: EventEmitter<boolean>; /** @internal pour permettre la mise a jour du select all en header */ isAllChecked$: BehaviorSubject<boolean>; /** @internal lignes affichées (pagination) */ displayedRows$: Observable<any[]>; /** @internal lignes sélectionnées */ selectedRows: any[]; /**@internal pas de choix de vue, ou vue table sélectionnée */ showTableView: boolean; /** @internal liste des différentes classes de la table */ tableClasses: string[]; /** @internal Observable de l'état du tableau pour le rafraichissement des données */ tableState$: Observable<DsfrTableState>; protected isSortable: boolean; private dataChanged$; private notifyOnDestroy; private readonly logger; private readonly cd; ngOnInit(): void; /** * Initialisation et mise a jour des checkboxes sélectionnées à chaque rafraichissement des données * Cas ou le SLOT est utilisé pour les row (tableBodyTemplate) */ ngAfterContentInit(): void; /** * Initialisation et mise a jour des checkboxes sélectionnées à chaque rafraichissement des données * Cas ou on utilise le template par DEFAUT pour les rows (tableBodyTemplate non défini) */ ngAfterViewInit(): void; /** * Au changement de data / rowsOptions / tableOptions * Rafraichir les données et la vue * @param changes */ ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * @internal * Initialisation de la table si sélection * - calcul du nombre d'elements selectionnables * - application de la sélection initiale * - coche de isAllChecked si toutes les lignes sont sélectionnées */ initSelectableTable(rows: any[]): void; /** @internal */ setTableClasses(): string[]; /** @internal */ trackById(dataKey: string, index: number, item: any): any; /** @internal */ onviewSelect(view: string): void; /** @internal */ onsearchChange(search: string): void; /** @internal */ onsearchSelect(search: string): void; /** * Sélection ou déselection d'une ligne * @internal */ selectRow(row: any): void; /** * Sélection ou déselection de toutes les lignes * @internal * */ toggleshowSelectAll(allSelected: boolean): void; /** * Affichage du tableau selon la colonne concernées et mise a jour des données affichées * @internal **/ onSortChange(): void; /** * Détermine si le tableau contient au moins une colonne triable */ private hasSortableColumn; /** Fonction de tri : sortFunction de la colonne si définie ou par défaut sur du contenu texte simple */ private sortRows; /** * Abonnement à la mise a jour des données et au changement d'état pour rafraichir le tableau */ private registerRefreshData; /** * Application de l'état sur les données affichées apres refresh data ou tri/pagination * @param data données modifiées * @param state état (tri, pagination, page size) * @returns données à jour triées et paginées */ private applyStateToData; /** * Application des nouvelles options d'affichage du tableau * @param options du tableau modifiées */ private applyOptionsToTable; /** * Retourne les options de la ligne passée en paramètre, selon l'identifiant ou l'index * */ private getRowOption; /** * Map data au format lignes affichables et application de la sélection * @param data * @returns data avec informations d'afffichage et index */ private mapDataToRows; /** Mettre à jour la sélection lors de l'appel a la methode sur le service */ private refreshSelection; /** * Au clic sur tout sélectionner/tout déselectionner * Selection des composants de checkbox (cellCheckboxesDefault ou cellCheckboxes) pour application du script DSFR * */ private showSelectAllCells; /** * Au nouveau rendu du composant tableau (initialisation, refreshData ou pagination) ou setSelected * Simulation du clic sur les checkboxes pour application du script DSFR (style) * @param cellsCheckboxes liste complete des directives de checkboxes * @param selectedRows liste des lignes a mettre a jour * @param select sélectionner ou déselectionner * */ private selectCellsAfterRender; /** Fonction de tri par défaut insensible à la casse et aux diacritiques */ private sortByDefault; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrTableComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrTableComponent, "dsfr-datatable", never, { "tableId": { "alias": "tableId"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixedHeight": { "alias": "fixedHeight"; "required": false; }; "thSticky": { "alias": "thSticky"; "required": false; }; "data": { "alias": "data"; "required": true; }; "dataKey": { "alias": "dataKey"; "required": false; }; "tableOptions": { "alias": "tableOptions"; "required": false; }; "rowsOptions": { "alias": "rowsOptions"; "required": false; }; "columns": { "alias": "columns"; "required": true; }; "showFooterResult": { "alias": "showFooterResult"; "required": false; }; "emptyResultsMessage": { "alias": "emptyResultsMessage"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "searchInputPlaceholder": { "alias": "searchInputPlaceholder"; "required": false; }; "searchButtonTitle": { "alias": "searchButtonTitle"; "required": false; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; }; "showHeaderViews": { "alias": "showHeaderViews"; "required": false; }; "headerViewsOptions": { "alias": "headerViewsOptions"; "required": false; }; "initialSelection": { "alias": "initialSelection"; "required": false; }; }, { "sortChange": "sortChange"; "viewSelect": "viewSelect"; "searchChange": "searchChange"; "searchSelect": "searchSelect"; "selectionChange": "selectionChange"; "showSelectAllChange": "showSelectAllChange"; }, ["headerActionsTemplate", "headerSummaryTemplate", "tableHeaderTemplate", "tableBodyTemplate", "tableFooterTemplate", "footerResultsTemplate", "footerActionsTemplate", "loadingTemplate", "alternativeViewTemplate", "cellCheckboxes"], never, true, never>; }