@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
TypeScript
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>;
}