@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).
69 lines • 14 kB
JavaScript
import { CommonModule, KeyValuePipe } from '@angular/common';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { EduTableModel } from './table-legacy.model';
import * as i0 from "@angular/core";
import * as i1 from "../../shared";
import * as i2 from "@angular/common";
/**
* @deprecated utiliser le nouveau composant de table
*/
export class DsfrTableLegacyComponent {
constructor(i18n, keyValuePipe) {
this.i18n = i18n;
this.keyValuePipe = keyValuePipe;
/**
* Permet d'empêcher le scroll horizontal. Si le tableau no-scroll comporte trop de colonnes le tableau est coupé
* sur la droite (overflow hidden).
*/
this.noScroll = false;
/**
* Permet de désactiver le scroll en fixant la largeur des colonnes du tableau. Les colonnes sont alors toutes de
* la même taille quelque soit leur contenu.
*/
this.fixedLayout = false;
/** Permet de masquer (visuellement) le caption afin de l’utiliser uniquement dans le cadre de l’accessibilité. */
this.noCaption = false;
/** Permet de placer le caption en dessous du tableau plutôt qu’en haut. */
this.captionBottom = false;
/** Permet d'ajouter des bordures aux lignes du tableau. */
this.bordered = false;
/** @internal */
this.dataModel = { columns: [], rows: [] };
this.noDataMessage = this.i18n.t('table.noData');
}
/** Modèle de données. */
set data(data) {
this.dataModel = new EduTableModel(data, this.keyValuePipe);
}
/** @internal */
hasRows() {
return !!this.dataModel && !!this.dataModel.rows && this.dataModel.rows.length > 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrTableLegacyComponent, deps: [{ token: i1.DsfrI18nService }, { token: i2.KeyValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrTableLegacyComponent, isStandalone: true, selector: "dsfr-table", inputs: { noDataMessage: "noDataMessage", noScroll: "noScroll", fixedLayout: "fixedLayout", caption: "caption", noCaption: "noCaption", captionBottom: "captionBottom", customClass: "customClass", headerCustomClass: "headerCustomClass", bordered: "bordered", data: "data" }, providers: [KeyValuePipe], ngImport: i0, template: "@if (dataModel.columns !== [] && dataModel.rows !== []) {\n <div\n #dsfrTable\n [class]=\"customClass\"\n [ngClass]=\"{\n 'fr-table': true,\n 'fr-table--bordered': bordered,\n 'fr-table--no-scroll': noScroll,\n 'fr-table--layout-fixed': fixedLayout,\n 'fr-table--no-caption': noCaption,\n 'fr-table--caption-bottom': captionBottom\n }\">\n <table>\n @if (caption) {\n <caption>\n {{\n caption\n }}\n </caption>\n }\n @if (!caption) {\n <caption>\n <ng-content select=\"[caption]\"></ng-content>\n </caption>\n }\n <thead [ngClass]=\"headerCustomClass ? headerCustomClass : null\">\n <tr>\n @for (column of dataModel.columns; track column) {\n <th scope=\"col\">{{ column.heading }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of dataModel.rows; track row) {\n <tr>\n @for (column of dataModel.columns; track column) {\n <td>{{ row[column.key] }}</td>\n }\n </tr>\n }\n @if (!hasRows() && noDataMessage) {\n <tr>\n <td class=\"edu-td__nodata\" [attr.colspan]=\"dataModel.columns.length\">{{ noDataMessage }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n}\n", styles: ["td.edu-td__nodata{text-align:center;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrTableLegacyComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-table', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], providers: [KeyValuePipe], template: "@if (dataModel.columns !== [] && dataModel.rows !== []) {\n <div\n #dsfrTable\n [class]=\"customClass\"\n [ngClass]=\"{\n 'fr-table': true,\n 'fr-table--bordered': bordered,\n 'fr-table--no-scroll': noScroll,\n 'fr-table--layout-fixed': fixedLayout,\n 'fr-table--no-caption': noCaption,\n 'fr-table--caption-bottom': captionBottom\n }\">\n <table>\n @if (caption) {\n <caption>\n {{\n caption\n }}\n </caption>\n }\n @if (!caption) {\n <caption>\n <ng-content select=\"[caption]\"></ng-content>\n </caption>\n }\n <thead [ngClass]=\"headerCustomClass ? headerCustomClass : null\">\n <tr>\n @for (column of dataModel.columns; track column) {\n <th scope=\"col\">{{ column.heading }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of dataModel.rows; track row) {\n <tr>\n @for (column of dataModel.columns; track column) {\n <td>{{ row[column.key] }}</td>\n }\n </tr>\n }\n @if (!hasRows() && noDataMessage) {\n <tr>\n <td class=\"edu-td__nodata\" [attr.colspan]=\"dataModel.columns.length\">{{ noDataMessage }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n}\n", styles: ["td.edu-td__nodata{text-align:center;font-style:italic}\n"] }]
}], ctorParameters: () => [{ type: i1.DsfrI18nService }, { type: i2.KeyValuePipe }], propDecorators: { noDataMessage: [{
type: Input
}], noScroll: [{
type: Input
}], fixedLayout: [{
type: Input
}], caption: [{
type: Input
}], noCaption: [{
type: Input
}], captionBottom: [{
type: Input
}], customClass: [{
type: Input
}], headerCustomClass: [{
type: Input
}], bordered: [{
type: Input
}], data: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtbGVnYWN5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RhYmxlLWxlZ2FjeS90YWJsZS1sZWdhY3kuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdGFibGUtbGVnYWN5L3RhYmxlLWxlZ2FjeS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzdELE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXBFLE9BQU8sRUFBaUIsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7Ozs7QUFFcEU7O0dBRUc7QUFVSCxNQUFNLE9BQU8sd0JBQXdCO0lBeUNuQyxZQUNVLElBQXFCLEVBQ3JCLFlBQTBCO1FBRDFCLFNBQUksR0FBSixJQUFJLENBQWlCO1FBQ3JCLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBdkNwQzs7O1dBR0c7UUFDTSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRTFCOzs7V0FHRztRQUNNLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBSzdCLGtIQUFrSDtRQUN6RyxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRTNCLDJFQUEyRTtRQUNsRSxrQkFBYSxHQUFHLEtBQUssQ0FBQztRQVkvQiw0REFBNEQ7UUFDbkQsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUUxQixnQkFBZ0I7UUFDaEIsY0FBUyxHQUFrQixFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLEVBQUUsRUFBRSxDQUFDO1FBTW5ELElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQUVELDBCQUEwQjtJQUMxQixJQUNXLElBQUksQ0FBQyxJQUFtQjtRQUNqQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksYUFBYSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDOUQsQ0FBQztJQUVELGdCQUFnQjtJQUNoQixPQUFPO1FBQ0wsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUNyRixDQUFDOytHQXpEVSx3QkFBd0I7bUdBQXhCLHdCQUF3QiwyVUFGeEIsQ0FBQyxZQUFZLENBQUMsMEJDZjNCLDgwQ0FpREEsaUhEbkNZLFlBQVk7OzRGQUdYLHdCQUF3QjtrQkFUcEMsU0FBUzsrQkFDRSxZQUFZLGlCQUdQLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDLGFBQ1osQ0FBQyxZQUFZLENBQUM7K0dBSWhCLGFBQWE7c0JBQXJCLEtBQUs7Z0JBTUcsUUFBUTtzQkFBaEIsS0FBSztnQkFNRyxXQUFXO3NCQUFuQixLQUFLO2dCQUdHLE9BQU87c0JBQWYsS0FBSztnQkFHRyxTQUFTO3NCQUFqQixLQUFLO2dCQUdHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBT0csV0FBVztzQkFBbkIsS0FBSztnQkFHRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBR0csUUFBUTtzQkFBaEIsS0FBSztnQkFjSyxJQUFJO3NCQURkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUsIEtleVZhbHVlUGlwZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRHNmckkxOG5TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IERzZnJEYXRhVGFibGUsIEVkdVRhYmxlTW9kZWwgfSBmcm9tICcuL3RhYmxlLWxlZ2FjeS5tb2RlbCc7XG5cbi8qKlxuICogQGRlcHJlY2F0ZWQgdXRpbGlzZXIgbGUgbm91dmVhdSBjb21wb3NhbnQgZGUgdGFibGVcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZHNmci10YWJsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJsZS1sZWdhY3kuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWJsZS1sZWdhY3kuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHByb3ZpZGVyczogW0tleVZhbHVlUGlwZV0sXG59KVxuZXhwb3J0IGNsYXNzIERzZnJUYWJsZUxlZ2FjeUNvbXBvbmVudCB7XG4gIC8qKiBNZXNzYWdlIHNpIGF1Y3VuZSBkb25uw6llLiAqL1xuICBASW5wdXQoKSBub0RhdGFNZXNzYWdlOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFBlcm1ldCBkJ2VtcMOqY2hlciBsZSBzY3JvbGwgaG9yaXpvbnRhbC4gU2kgbGUgdGFibGVhdSBuby1zY3JvbGwgY29tcG9ydGUgdHJvcCBkZSBjb2xvbm5lcyBsZSB0YWJsZWF1IGVzdCBjb3Vww6lcbiAgICogc3VyIGxhIGRyb2l0ZSAob3ZlcmZsb3cgaGlkZGVuKS5cbiAgICovXG4gIEBJbnB1dCgpIG5vU2Nyb2xsID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFBlcm1ldCBkZSBkw6lzYWN0aXZlciBsZSBzY3JvbGwgZW4gZml4YW50IGxhIGxhcmdldXIgZGVzIGNvbG9ubmVzIGR1IHRhYmxlYXUuIExlcyBjb2xvbm5lcyBzb250IGFsb3JzIHRvdXRlcyBkZVxuICAgKiBsYSBtw6ptZSB0YWlsbGUgcXVlbHF1ZSBzb2l0IGxldXIgY29udGVudS5cbiAgICovXG4gIEBJbnB1dCgpIGZpeGVkTGF5b3V0ID0gZmFsc2U7XG5cbiAgLyoqIFRpdHJlIGF1LWRlc3N1cyBkdSB0YWJsZWF1LiAqL1xuICBASW5wdXQoKSBjYXB0aW9uOiBzdHJpbmc7XG5cbiAgLyoqIFBlcm1ldCBkZSBtYXNxdWVyICh2aXN1ZWxsZW1lbnQpIGxlIGNhcHRpb24gYWZpbiBkZSBs4oCZdXRpbGlzZXIgdW5pcXVlbWVudCBkYW5zIGxlIGNhZHJlIGRlIGzigJlhY2Nlc3NpYmlsaXTDqS4gKi9cbiAgQElucHV0KCkgbm9DYXB0aW9uID0gZmFsc2U7XG5cbiAgLyoqIFBlcm1ldCBkZSBwbGFjZXIgbGUgY2FwdGlvbiBlbiBkZXNzb3VzIGR1IHRhYmxlYXUgcGx1dMO0dCBxdeKAmWVuIGhhdXQuICovXG4gIEBJbnB1dCgpIGNhcHRpb25Cb3R0b20gPSBmYWxzZTtcblxuICAvKipcbiAgICogQ2xhc3NlcyBkZSBwZXJzb25uYWxpc2F0aW9uIGR1IHRhYmxlYXUgKGV4IDogYGZyLXRhYmxlLS1ncmVlbi1lbWVyYXVkZWApLlxuICAgKlxuICAgKiBAc2VlIGh0dHBzOi8vZ291dmZyLmF0bGFzc2lhbi5uZXQvd2lraS9zcGFjZXMvREIvcGFnZXMvMzEyMDE2OTcxL1RhYmxlYXUrLStUYWJsZSNQZXJzb25uYWxpc2F0aW9uXG4gICAqL1xuICBASW5wdXQoKSBjdXN0b21DbGFzczogc3RyaW5nO1xuXG4gIC8qKiBDbGFzc2UocykgZGUgcGVyc29ubmFsaXNhdGlvbiBkZSBsJ2VudMOqdGUuICovXG4gIEBJbnB1dCgpIGhlYWRlckN1c3RvbUNsYXNzOiBzdHJpbmc7XG5cbiAgLyoqIFBlcm1ldCBkJ2Fqb3V0ZXIgZGVzIGJvcmR1cmVzIGF1eCBsaWduZXMgZHUgdGFibGVhdS4gICovXG4gIEBJbnB1dCgpIGJvcmRlcmVkID0gZmFsc2U7XG5cbiAgLyoqIEBpbnRlcm5hbCAqL1xuICBkYXRhTW9kZWw6IEVkdVRhYmxlTW9kZWwgPSB7IGNvbHVtbnM6IFtdLCByb3dzOiBbXSB9O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgaTE4bjogRHNmckkxOG5TZXJ2aWNlLFxuICAgIHByaXZhdGUga2V5VmFsdWVQaXBlOiBLZXlWYWx1ZVBpcGUsXG4gICkge1xuICAgIHRoaXMubm9EYXRhTWVzc2FnZSA9IHRoaXMuaTE4bi50KCd0YWJsZS5ub0RhdGEnKTtcbiAgfVxuXG4gIC8qKiBNb2TDqGxlIGRlIGRvbm7DqWVzLiAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBkYXRhKGRhdGE6IERzZnJEYXRhVGFibGUpIHtcbiAgICB0aGlzLmRhdGFNb2RlbCA9IG5ldyBFZHVUYWJsZU1vZGVsKGRhdGEsIHRoaXMua2V5VmFsdWVQaXBlKTtcbiAgfVxuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgaGFzUm93cygpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLmRhdGFNb2RlbCAmJiAhIXRoaXMuZGF0YU1vZGVsLnJvd3MgJiYgdGhpcy5kYXRhTW9kZWwucm93cy5sZW5ndGggPiAwO1xuICB9XG59XG4iLCJAaWYgKGRhdGFNb2RlbC5jb2x1bW5zICE9PSBbXSAmJiBkYXRhTW9kZWwucm93cyAhPT0gW10pIHtcbiAgPGRpdlxuICAgICNkc2ZyVGFibGVcbiAgICBbY2xhc3NdPVwiY3VzdG9tQ2xhc3NcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgJ2ZyLXRhYmxlJzogdHJ1ZSxcbiAgICAnZnItdGFibGUtLWJvcmRlcmVkJzogYm9yZGVyZWQsXG4gICAgJ2ZyLXRhYmxlLS1uby1zY3JvbGwnOiBub1Njcm9sbCxcbiAgICAnZnItdGFibGUtLWxheW91dC1maXhlZCc6IGZpeGVkTGF5b3V0LFxuICAgICdmci10YWJsZS0tbm8tY2FwdGlvbic6IG5vQ2FwdGlvbixcbiAgICAnZnItdGFibGUtLWNhcHRpb24tYm90dG9tJzogY2FwdGlvbkJvdHRvbVxuICB9XCI+XG4gICAgPHRhYmxlPlxuICAgICAgQGlmIChjYXB0aW9uKSB7XG4gICAgICAgIDxjYXB0aW9uPlxuICAgICAgICAgIHt7XG4gICAgICAgICAgY2FwdGlvblxuICAgICAgICAgIH19XG4gICAgICAgIDwvY2FwdGlvbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoIWNhcHRpb24pIHtcbiAgICAgICAgPGNhcHRpb24+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2NhcHRpb25dXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2NhcHRpb24+XG4gICAgICB9XG4gICAgICA8dGhlYWQgW25nQ2xhc3NdPVwiaGVhZGVyQ3VzdG9tQ2xhc3MgPyBoZWFkZXJDdXN0b21DbGFzcyA6IG51bGxcIj5cbiAgICAgICAgPHRyPlxuICAgICAgICAgIEBmb3IgKGNvbHVtbiBvZiBkYXRhTW9kZWwuY29sdW1uczsgdHJhY2sgY29sdW1uKSB7XG4gICAgICAgICAgICA8dGggc2NvcGU9XCJjb2xcIj57eyBjb2x1bW4uaGVhZGluZyB9fTwvdGg+XG4gICAgICAgICAgfVxuICAgICAgICA8L3RyPlxuICAgICAgPC90aGVhZD5cbiAgICAgIDx0Ym9keT5cbiAgICAgICAgQGZvciAocm93IG9mIGRhdGFNb2RlbC5yb3dzOyB0cmFjayByb3cpIHtcbiAgICAgICAgICA8dHI+XG4gICAgICAgICAgICBAZm9yIChjb2x1bW4gb2YgZGF0YU1vZGVsLmNvbHVtbnM7IHRyYWNrIGNvbHVtbikge1xuICAgICAgICAgICAgICA8dGQ+e3sgcm93W2NvbHVtbi5rZXldIH19PC90ZD5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L3RyPlxuICAgICAgICB9XG4gICAgICAgIEBpZiAoIWhhc1Jvd3MoKSAmJiBub0RhdGFNZXNzYWdlKSB7XG4gICAgICAgICAgPHRyPlxuICAgICAgICAgICAgPHRkIGNsYXNzPVwiZWR1LXRkX19ub2RhdGFcIiBbYXR0ci5jb2xzcGFuXT1cImRhdGFNb2RlbC5jb2x1bW5zLmxlbmd0aFwiPnt7IG5vRGF0YU1lc3NhZ2UgfX08L3RkPlxuICAgICAgICAgIDwvdHI+XG4gICAgICAgIH1cbiAgICAgIDwvdGJvZHk+XG4gICAgPC90YWJsZT5cbiAgPC9kaXY+XG59XG4iXX0=