@edugouvfr/ngx-dsfr-ext

import { DsfrSize, DsfrPosition, DsfrOption, DsfrTableState } from '@edugouvfr/ngx-dsfr'; import { ICellRendererAngularComp, IFloatingFilterAngularComp, AgGridAngular } from 'ag-grid-angular'; import * as i0 from '@angular/core'; import { OnInit, ElementRef, TemplateRef, EventEmitter } from '@angular/core'; import { IFloatingFilterParams, ISimpleFilter, GridApi, IGetRowsParams, SortModelItem, ColDef, GridState, GridOptions, SortChangedEvent, GridPreDestroyedEvent, FilterChangedEvent, CellClickedEvent, RowSelectedEvent, SelectionChangedEvent, IRowNode, PaginationChangedEvent, CellEditingStoppedEvent, GridReadyEvent } from 'ag-grid-community'; import { Observable } from 'rxjs'; declare class DsfrButtonCellGridComponent implements ICellRendererAngularComp { id?: string; params: any; label: string; size?: DsfrSize; icon?: string; iconPosition?: DsfrPosition; ariaLabel?: string; customClass?: string; tooltipMessage?: string; ariaControls?: string; agInit(params: any): void; refresh(params?: any): boolean; /** * Permet d'appeler la méthode définie sur le bouton en passant les données de la ligne * @param $event Event lié au clic sur le bouton */ onClick($event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrButtonCellGridComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrButtonCellGridComponent, "dsfr-button-cell-grid", never, {}, {}, never, never, true, never>; } interface DsfrFilterSelectParams { label: string; id: string; options: DsfrOption[]; compareFn?: any; placeholder?: string; } declare class DsfrSelectFilterComponent<T> implements IFloatingFilterAngularComp { params: IFloatingFilterParams<ISimpleFilter> & DsfrFilterSelectParams; currentValue?: T; style: any; options: DsfrOption[]; label?: string; compareFn: any; agInit(params: IFloatingFilterParams<ISimpleFilter> & DsfrFilterSelectParams): void; onParentModelChanged(parentModel: any): void; onSelectChanged(): void; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrSelectFilterComponent<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrSelectFilterComponent<any>, "ng-component", never, {}, {}, never, never, true, never>; } declare enum DsfrGridModeConst { CLIENT = "client", SERVER = "server" } type DsfrGridMode = `${DsfrGridModeConst}`; /** Données retournées par la grid */ interface DsfrRemoteGridResult { data: any[]; totalRecords: number; } /** Mapper le modèle de l'API par rapport aux query params utilisés par la grid */ interface DsfrGridParams { /** nombre de résultat à retourner (taille de la page) */ limit: number; /** Index du premier résultat à afficher */ offset: number; /** Tri */ sort?: SortModelItem[]; /** Filtres */ filters?: any[]; } /** Mapper les résultats de la grid par rapport au résultat retournés par l'API */ interface DsfrGridResultModel { /** données */ data: string; /** total de résultats */ totalRecords: string; /** fonction de mapping optionnelle des données */ mappingFunction?: (e: any) => void; } /** * Datasource pour implémentation de la pagination coté backend de Ag-grid community * cf: https://medium.com/weekly-webtips/tech-building-reusable-server-side-pagination-for-ag-grid-in-angular-c8127e2da346 * et https://www.ag-grid.com/javascript-data-grid/infinite-scrolling/ * */ declare abstract class EduRemoteAgGridApi { getDataError?: (err: any) => void; gridApi?: GridApi | undefined; prepareUpdateData: (params: IGetRowsParams) => void; result$: Observable<DsfrRemoteGridResult> | undefined; } /** Représentation d'un évènement selectionChange ou rowSelect */ interface DsfrGridSelectionEvent { /** type d'évènement ag-grid */ event: RowSelectedEvent<any> | SelectionChangedEvent<any>; /** liste des noeuds ag-grid IRowNode */ selectedNodes: IRowNode<any>[]; } declare class DsfrGridComponent implements EduRemoteAgGridApi, OnInit { grid?: ElementRef; /** Template personnalisé pour afficher le total de lignes */ footerResultsTemplate?: TemplateRef<void>; /** Template pour les groupes de boutons d'actions du footer */ footerActionsTemplate?: TemplateRef<void>; /** Template pour les groupes de boutons d'actions du header. (dsfr-button-group) */ headerActionsTemplate?: TemplateRef<void>; /** Id du composant, généré par défaut */ gridId: string; columnDefs: ColDef[]; caption?: string; /** Nombre d'éléments affichés par page */ pageSize: number; /** Traductions des éléments de agGrid. Français par défaut, anglais si valeur nulle. */ localeText: any; /** Mode de la grid: données côté client ou serveur (défaut client) */ mode: DsfrGridMode; /** Données locale dans le cas de clientSide */ rowData?: any[]; /** Options des colonnes par défaut (cf. https://www.ag-grid.com/angular-data-grid/column-properties/ ) */ defaultColDef: ColDef; /** Etat initial du tableau (ex. page courante, filtres..) */ initialState?: GridState; /** Classes personnalisées pour la grid. Prédéfinies : "fr-table-bordered", "fr-table-no-strip". */ customClass?: string; /** Afficher un texte par-dessus la grid pendant le chargement */ showLoadingOverlay: boolean; /** Redéfinir le template de chargement */ loadingOverlayTemplate?: string; /** Redéfinir le template aucun résultat. /!\ L'id de ce container doit être passé à idNoRowsTemplate */ overlayNoRowsTemplate?: string; /** Id du template overlayNoRowsTemplate contenant le texte utilisé pour le aria-describedby */ idNoRowsTemplate: string; /** Hauteur fixe (scroll vertical si nécessaire) */ fixedHeight?: string; /** Calcul dynamique de la hauteur des lignes pour afficher le contenu des cellules sur plusieurs lignes (uniquement utilisé en serverSide). * Déconseillé d'utiliser si le nombre de lignes par pages est élevé, peut causer des problèmes de performance d'affichage. */ autoRowsHeight: boolean; /** Surcharge d'options supplémentaires pour agGrid (optionnel) */ gridOptions?: GridOptions<any>; /** Afficher le bouton d'action exporter au format CSV (uniqument si headerActionsTemplate non défini) */ showExportCsv: boolean; /** Champ qui correspond à l'identifiant de la donnée (optionnel) */ rowId?: string; /** Afficher la pagination */ showPagination: boolean; /** Afficher le total de lignes */ showFooterResult: boolean; /** Mise à jour et application du tri des colonnes */ sortChanged: EventEmitter<SortChangedEvent<any>>; /** Callback apres l'initialisation de la grid, retourne l'accès à l'API de agGrid */ gridReady: EventEmitter<GridApi<any>>; /** Callback avant la destruction de la grid (destruction du composant), permet de récuperer le state */ gridPreDestroyed: EventEmitter<GridPreDestroyedEvent<any>>; /** Mise à jour et application des filtres */ filterChanged: EventEmitter<FilterChangedEvent<any>>; /** Sélection d'une cellule du tableau */ cellSelect: EventEmitter<CellClickedEvent<any>>; /** Sélection ou déselection d'une ligne du tableau. Emission de l'évènement (RowSelectedEvent) et des noeuds sélectionnés (IRowNode[]) */ rowSelect: EventEmitter<DsfrGridSelectionEvent>; /** La sélection des lignes a changé. Emission de l'évènement (SelectionChangedEvent) et des noeuds sélectionnés (IRowNode[]) */ selectionChange: EventEmitter<DsfrGridSelectionEvent>; /** Indique une mise à jour nécessaire des données suite à un changement d'affichage (pagination, tri ou filtres). Si données côté serveur. */ dataChange: EventEmitter<DsfrGridParams>; /** Callback après changement de page */ paginationChange: EventEmitter<PaginationChangedEvent>; /** Callback après chaque changement des lignes affichées (modelUpdated) */ dataRender: EventEmitter<void>; /** Callback après appel à l'api en cas d'erreur de celle-ci */ dataFail: EventEmitter<any>; /** Evenement de fin d'édition d'une cellule */ cellEditingStopped: EventEmitter<CellEditingStoppedEvent<any>>; /** @internal Pour acceder a Grid API */ agGrid: AgGridAngular; /** Pagination */ /** Choix de taille de page (par défaut 10, 20, 50, 100). Pas d'affichage du select si non défini */ pageSizes: DsfrOption[]; /** @internal Total résultats*/ totalElements: number; /** @internal Page courante*/ currentPage: number | undefined; /** @internal Total pages */ totalPage: number; /**@internal Id généré du titre du tableau */ captionId?: string; /** @internal Index de la première ligne affichée */ startRow: number; /** @internal Index de la première ligne affichée */ endRow: number; /** @internal */ isLoadingServerSide: boolean; protected initialStatePagination: DsfrTableState | undefined; protected loading: boolean; protected selectable: boolean; /** @internal */ private _resultSubject$; /** Nombre d'éléments visuellement affichés en mode serveur */ private _nbElementsDisplayed; private i18n; constructor(); /** @internal */ get result$(): Observable<DsfrRemoteGridResult>; /** Données renvoyées par l'API */ set result(value: DsfrRemoteGridResult); ngOnInit(): void; /** * Au changement de paramètres des lignes affichées (pagination, filtre etc.), préparation des query params et envoi de l'evenement updateData * @param params IGetRowsParams paramètres modifiés * @internal */ prepareUpdateData(params: IGetRowsParams): void; /** * Erreur au retour de l'appel à l'api * @internal */ getDataError(err: any): void; /** * Modification et application du tri * @internal */ onSortChange(e: any): void; /** * Modification et application des filtres * @internal */ onFilterChange(e: any): void; /**@internal */ onCellEditingStop(e: any): void; /** * Après mise à jour des données * @internal */ onModelUpdated(e: any): void; /** * Au redimensionnement de la fenêtre * @internal */ onGridSizeChanged(e: any): void; /** * Au redimensionnement d'une colonne * @internal */ onColumnResized(): void; /** * Premier affichage des données * bug ag-grid: en mode infite + pagination + initialPagination, si le nombre de lignes a afficher est < a pageSize * des lignes vides s'affichent. Execution d'un double appel avec paginationGoToPage pour forcer un rendu correct * @internal */ onFirstDataRendered(): void; /** * Initialisation de la grid * @param params * @internal */ onGridReady(params: GridReadyEvent): void; /** * Evenement clic sur une cellule * @internal */ onCellClicked(e: CellClickedEvent<any>): void; /** * Evenement à la sélection ou déselection d'une ligne * @internal */ onRowSelected(e: RowSelectedEvent<any>): void; /** * Evenement au changement de sélection * @internal */ onSelectionChanged(e: SelectionChangedEvent<any>): void; /** * Changement de page * @param e numéro de page * @internal */ onPage(e: number): void; /** * @internal */ onClickExportCsv(): void; /** * @internal */ onChangePageSize(pageSize: number): void; /** * @internal */ onGridPreDestroyed(e: GridPreDestroyedEvent): void; protected onPaginationChanged(e: PaginationChangedEvent): void; private calculateTotalPage; private getRowNodeId; /** Ajout du tri aux query params */ private addSort; /** * Ajout des filtres aux query params * @internal */ private addFilters; /** * Remettre manuellement les paramètres de query en cas d'initialState * @param params query params */ private restoreInitialStateServer; /** * Détection du changement de langue depuis le service i18n (display) * @param code */ private onLangChange; /** * Permettre d'afficher sur plusieurs lignes en mode serveur (equivalent autoHeight en mode client) * Calculer la dimension de chaque row par rapport à son contenu et recalculer la taille de la grille * globale (limitation ag-grid sur le mode infinite) */ private setHeightOnRows; private transformRowHeight; private getRowElementFromNode; /** * Get max cell height needed on row * @param nodesCell each cells on row * @returns max height */ private getMaxHeightOnRow; /** * Redéfinir le focus pour les cellules possédant des éléments interactifs (focusables, ex. buttons) * Suppression de la gestion du focus par défaut de ag grid lorsque c'est le cas */ private suppressCellKeyboardEvent; /** * Redéfinir le focus pour les cellules d'en-tête possédant des floatings filters avec éléments interactifs (focusables, ex. buttons) * Suppression de la gestion du focus par défaut de ag grid lorsque c'est le cas */ private suppressHeaderKeyboardEvent; private suppressDefaultKeyboardEvent; private forceReloadOnNoData; private initPagination; static ɵfac: i0.ɵɵFactoryDeclaration<DsfrGridComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DsfrGridComponent, "dsfr-ext-ag-grid, dsfrx-ag-grid", never, { "gridId": { "alias": "gridId"; "required": false; }; "columnDefs": { "alias": "columnDefs"; "required": true; }; "caption": { "alias": "caption"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "localeText": { "alias": "localeText"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "defaultColDef": { "alias": "defaultColDef"; "required": false; }; "initialState": { "alias": "initialState"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "showLoadingOverlay": { "alias": "showLoadingOverlay"; "required": false; }; "loadingOverlayTemplate": { "alias": "loadingOverlayTemplate"; "required": false; }; "overlayNoRowsTemplate": { "alias": "overlayNoRowsTemplate"; "required": false; }; "idNoRowsTemplate": { "alias": "idNoRowsTemplate"; "required": false; }; "fixedHeight": { "alias": "fixedHeight"; "required": false; }; "autoRowsHeight": { "alias": "autoRowsHeight"; "required": false; }; "gridOptions": { "alias": "gridOptions"; "required": false; }; "showExportCsv": { "alias": "showExportCsv"; "required": false; }; "rowId": { "alias": "rowId"; "required": false; }; "showPagination": { "alias": "showPagination"; "required": false; }; "showFooterResult": { "alias": "showFooterResult"; "required": false; }; "pageSizes": { "alias": "pageSizes"; "required": false; }; "result": { "alias": "result"; "required": false; }; }, { "sortChanged": "sortChanged"; "gridReady": "gridReady"; "gridPreDestroyed": "gridPreDestroyed"; "filterChanged": "filterChanged"; "cellSelect": "cellSelect"; "rowSelect": "rowSelect"; "selectionChange": "selectionChange"; "dataChange": "dataChange"; "paginationChange": "paginationChange"; "dataRender": "dataRender"; "dataFail": "dataFail"; "cellEditingStopped": "cellEditingStopped"; }, ["footerResultsTemplate", "footerActionsTemplate", "headerActionsTemplate"], ["[caption]"], true, never>; static ngAcceptInputType_autoRowsHeight: unknown; static ngAcceptInputType_showExportCsv: unknown; static ngAcceptInputType_showPagination: unknown; static ngAcceptInputType_showFooterResult: unknown; } declare class DsfrGridModule { static ɵfac: i0.ɵɵFactoryDeclaration<DsfrGridModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<DsfrGridModule, never, [typeof DsfrGridComponent], [typeof DsfrGridComponent]>; static ɵinj: i0.ɵɵInjectorDeclaration<DsfrGridModule>; } export { DsfrButtonCellGridComponent, DsfrGridComponent, DsfrGridModule, DsfrSelectFilterComponent }; export type { DsfrGridParams, DsfrGridResultModel, DsfrGridSelectionEvent, DsfrRemoteGridResult };