chrv-components 1.11.26 → 1.11.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
Binary file
|
|
@@ -18,7 +18,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
|
18
18
|
import { MatOption } from '@angular/material/core';
|
|
19
19
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
20
20
|
import { MatError } from '@angular/material/form-field';
|
|
21
|
-
import
|
|
21
|
+
import { isValid, isBefore } from 'date-fns';
|
|
22
22
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
23
23
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
24
24
|
import * as i3$1 from '@angular/material/chips';
|
|
@@ -641,12 +641,12 @@ function maxDate(date) {
|
|
|
641
641
|
if (!value) {
|
|
642
642
|
return null;
|
|
643
643
|
}
|
|
644
|
-
const maxDate = moment(date);
|
|
645
|
-
const inputDate = moment(value);
|
|
646
|
-
return !(
|
|
644
|
+
// const maxDate = moment(date);
|
|
645
|
+
// const inputDate = moment(value);
|
|
646
|
+
return !(isValid(value) && isBefore(value, date))
|
|
647
647
|
? {
|
|
648
648
|
maxdate: true,
|
|
649
|
-
max: maxDate
|
|
649
|
+
max: maxDate,
|
|
650
650
|
actual: value,
|
|
651
651
|
}
|
|
652
652
|
: null;
|
|
@@ -3148,7 +3148,7 @@ class ChrDataTable {
|
|
|
3148
3148
|
return value;
|
|
3149
3149
|
}
|
|
3150
3150
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChrDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3151
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ChrDataTable, isStandalone: true, selector: "chr-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, isAsc: { classPropertyName: "isAsc", publicName: "isAsc", isSignal: true, isRequired: false, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", isAsc: "isAscChange", sortBy: "sortByChange", pageSize: "pageSizeChange", currentPage: "currentPageChange" }, providers: [PaginationService], ngImport: i0, template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\r\n (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" [attr.data-accent-color]=\"color()\"\r\n (click)=\"select(data(), $event)\" />\r\n </th>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\r\n (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n @if (column.properties && sortBy() == column.properties && isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\r\n }\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n @if (column.properties && sortBy() == column.properties && !isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\r\n }\r\n </div>\r\n </th>\r\n }\r\n @if (actions()) {\r\n <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (data() === null || data() === undefined || data().length <= 0) { <tr>\r\n @if (selectable()) {\r\n <td></td>\r\n }\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n }\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\r\n id: this.id()}; track entry) {\r\n <tr [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <td class=\"w-min\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\r\n [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </td>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <td tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </td>\r\n }\r\n @if (actions()) {\r\n <td>\r\n <div class=\"actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\r\n [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id()}; track entry) {\r\n <div class=\"entry\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n </div>\r\n }\r\n @if (selectable()) {\r\n <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\r\n [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </div>\r\n }\r\n </div>\r\n @for (column of columns() || []; track column) {\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n {{column.display}}\r\n </div>\r\n <div class=\"entry-content\" tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"entry-row\">\r\n @if (actions()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n Actions\r\n </div>\r\n }\r\n @if (actions()) {\r\n <div class=\"entry-content actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\r\n [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val | date: column.format}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\r\n }\r\n</ng-template>\r\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\r\n <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\r\n (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\r\n {\r\n controls:[\r\n {\r\n name: 'key',\r\n type: column.inputType || 'text',\r\n validations: column.validations,\r\n width: 'row'\r\n }\r\n ]\r\n }\r\n ]\" />\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <div class=\"w-full h-full flex flex-row items-center align-middle\">\r\n @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\r\n <span\r\n class=\"w-full md:max-w-36 flex text-center content-center align-middle items-center justify-center text-xs font-medium py-0.5 rounded-full\"\r\n [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\r\n {{ chip.display }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n</ng-template>", styles: ["[data-color=primary]{color:var(--primary-color)}[data-color=secondary]{color:var(--secondary-color)}[data-color=tertiary]{color:var(--tertiary-color)}[data-color=warn]{color:var(--warn-color)}[data-color=error]{color:var(--error-color)}[data-accent-color=primary]{accent-color:var(--primary-color)}[data-accent-color=secondary]{accent-color:var(--secondary-color)}[data-accent-color=tertiary]{accent-color:var(--tertiary-color)}[data-accent-color=warn]{accent-color:var(--warn-color)}[data-accent-color=error]{accent-color:var(--error-color)}[data-border-color=primary]{border-color:var(--primary-color)}[data-border-color=secondary]{border-color:var(--secondary-color)}[data-border-color=tertiary]{border-color:var(--tertiary-color)}[data-border-color=warn]{border-color:var(--warn-color)}[data-border-color=error]{border-color:var(--error-color)}[data-bg-color=primary]{background-color:var(--primary-color)}[data-bg-color=secondary]{background-color:var(--secondary-color)}[data-bg-color=tertiary]{background-color:var(--tertiary-color)}[data-bg-color=warn]{background-color:var(--warn-color)}[data-bg-color=error]{background-color:var(--error-color)}.bg-primary{background-color:var(--primary-color)}.bg-primary-contrast{background-color:var(--primary-contrast-color)}.bg-secondary{background-color:var(--secondary-color)}.bg-secondary-contrast{background-color:var(--secondary-contrast-color)}.bg-tertiary{background-color:var(--tertiary-color)}.bg-tertiary-contrast{background-color:var(--tertiary-contrast-color)}.bg-warn{background-color:var(--warn-color)}.bg-warn-contrast{background-color:var(--warn-contrast-color)}.bg-error{background-color:var(--error-color)}.bg-error-contrast{background-color:var(--error-contrast-color)}.bg-neutral{background-color:var(--neutral-color)}.text-primary{color:var(--primary-color)}.text-primary-contrast{color:var(--primary-contrast-color)}.text-secondary{color:var(--secondary-color)}.text-secondary-contrast{color:var(--secondary-contrast-color)}.text-tertiary{color:var(--tertiary-color)}.text-tertiary-contrast{color:var(--tertiary-contrast-color)}.text-warn{color:var(--warn-color)}.text-warn-contrast{color:var(--warn-contrast-color)}.text-error{color:var(--error-color)}.text-error-contrast{color:var(--error-contrast-color)}.text{color:var(--text-color)}.text-neutral{color:var(--text-neutral-color)}.border-primary{border-color:var(--primary-color)}.border-primary-contrast{border-color:var(--primary-contrast-color)}.border-secondary{border-color:var(--secondary-color)}.border-secondary-contrast{border-color:var(--secondary-contrast-color)}.border-tertiary{border-color:var(--tertiary-color)}.border-tertiary-contrast{border-color:var(--tertiary-contrast-color)}.border-warn{border-color:var(--warn-color)}.border-warn-contrast{border-color:var(--warn-contrast-color)}.border-error{border-color:var(--error-color)}.border-error-contrast{border-color:var(--error-contrast-color)}table{table-layout:auto;width:100%;box-shadow:1px 6px 10px #0003;border-radius:.5rem}td>*{text-wrap:pretty}th{height:3rem;padding:.5rem .25rem;text-align:left}th:is(:first-child){border-top-left-radius:.25rem}th:is(:last-child){border-top-right-radius:.25rem}td{color:var(--text-color)}td:is(:first-child){border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}td:is(:last-child){border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}tr{border-radius:.5rem}tr{border-bottom-width:2px}tr:is(:last-child){border:0}td{height:3rem;padding:.25rem .125rem}tr:nth-child(2n){background-color:var(--neutral-color)}.header-cell{cursor:pointer}.header-cell-content-wrapper{color:inherit;display:flex;flex-direction:row;width:100%;height:100%;justify-content:space-between;align-items:center}.header-cell-content{color:inherit}.actions-cell{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}.actions-header-cell{text-align:center;width:min-content}::ng-deep .form-wrapper *{padding:0!important;margin:0!important}::ng-deep .form-wrapper{display:flex;flex-direction:row;align-items:center;align-content:center;justify-items:center;width:100%!important}.chr-mobile-table{display:flex;flex-direction:column;gap:1rem}.entry{display:flex;flex-direction:column;text-wrap:pretty;color:var(--text-color)}.entry-row{display:grid;flex-direction:row;grid-template-columns:8rem 1fr}.entry-row:not(:last-child){border-bottom-width:2px}.entry-header{display:flex;align-items:center;padding:1rem 1rem 1rem .5rem;border-radius:inherit}.entry-row:is(:first-child){border-top-left-radius:.5rem}.entry-row:is(:last-child){border-bottom-left-radius:.5rem}.entry-content{display:flex;align-items:center;width:100%;padding:1rem .5rem 1rem 1rem}.hidden{display:none}@media (min-width: 768px){.md\\:\\!table{display:table!important}}@media (min-width: 768px){.md\\:\\!hidden{display:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: ChrButtonComponent, selector: "app-chr-button", inputs: ["display", "icon", "click", "clickWhileDisabled", "color", "textColor", "flat", "predicate", "type", "href", "target", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: ChrFormComponent, selector: "app-chr-form", inputs: ["sections", "controls", "validators", "valid", "model", "disabled", "submit", "compact", "debounceTime", "tabDisplay", "form"], outputs: ["validChange", "modelChange", "formDataChange", "valuesChanges", "formChange", "valueChanges", "formChanges"] }, { kind: "pipe", type: SortPipe, name: "sort" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TabToInputHandlerDirective, selector: "[tab-input-only]" }] }); }
|
|
3151
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ChrDataTable, isStandalone: true, selector: "chr-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, isAsc: { classPropertyName: "isAsc", publicName: "isAsc", isSignal: true, isRequired: false, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", isAsc: "isAscChange", sortBy: "sortByChange", pageSize: "pageSizeChange", currentPage: "currentPageChange" }, providers: [PaginationService], ngImport: i0, template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\r\n (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none no-events table-checkbox\"\r\n [attr.data-accent-color]=\"color()\" (click)=\"select(data(), $event)\" />\r\n </th>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\r\n (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n @if (column.properties && sortBy() == column.properties && !isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\r\n }\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n @if (column.properties && sortBy() == column.properties && isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\r\n }\r\n </div>\r\n </th>\r\n }\r\n @if (actions()) {\r\n <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (data() === null || data() === undefined || data().length <= 0) { <tr>\r\n @if (selectable()) {\r\n <td></td>\r\n }\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n }\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\r\n id: this.id()}; track entry) {\r\n <tr [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <td class=\"w-min\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none no-events table-checkbox\"\r\n (click)=\"select(entry, $event)\" [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </td>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <td tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </td>\r\n }\r\n @if (actions()) {\r\n <td>\r\n <div class=\"actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\r\n [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id()}; track entry) {\r\n <div class=\"entry\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n </div>\r\n }\r\n @if (selectable()) {\r\n <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none no-events table-checkbox\"\r\n (click)=\"select(entry, $event)\" [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </div>\r\n }\r\n </div>\r\n @for (column of columns() || []; track column) {\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n {{column.display}}\r\n </div>\r\n <div class=\"entry-content\" tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"entry-row\">\r\n @if (actions()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n Actions\r\n </div>\r\n }\r\n @if (actions()) {\r\n <div class=\"entry-content actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\r\n [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val | date: column.format}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\r\n }\r\n</ng-template>\r\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\r\n <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\r\n (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\r\n {\r\n controls:[\r\n {\r\n name: 'key',\r\n type: column.inputType || 'text',\r\n validations: column.validations,\r\n width: 'row'\r\n }\r\n ]\r\n }\r\n ]\" />\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <div class=\"w-full h-full flex flex-row items-center align-middle\">\r\n @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\r\n <span\r\n class=\"w-full md:max-w-36 flex text-center content-center align-middle items-center justify-center text-xs font-medium py-0.5 rounded-full\"\r\n [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\r\n {{ chip.display }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n</ng-template>", styles: ["[data-color=primary]{color:var(--primary-color)}[data-color=secondary]{color:var(--secondary-color)}[data-color=tertiary]{color:var(--tertiary-color)}[data-color=warn]{color:var(--warn-color)}[data-color=error]{color:var(--error-color)}[data-accent-color=primary]{accent-color:var(--primary-color)}[data-accent-color=secondary]{accent-color:var(--secondary-color)}[data-accent-color=tertiary]{accent-color:var(--tertiary-color)}[data-accent-color=warn]{accent-color:var(--warn-color)}[data-accent-color=error]{accent-color:var(--error-color)}[data-border-color=primary]{border-color:var(--primary-color)}[data-border-color=secondary]{border-color:var(--secondary-color)}[data-border-color=tertiary]{border-color:var(--tertiary-color)}[data-border-color=warn]{border-color:var(--warn-color)}[data-border-color=error]{border-color:var(--error-color)}[data-bg-color=primary]{background-color:var(--primary-color)}[data-bg-color=secondary]{background-color:var(--secondary-color)}[data-bg-color=tertiary]{background-color:var(--tertiary-color)}[data-bg-color=warn]{background-color:var(--warn-color)}[data-bg-color=error]{background-color:var(--error-color)}.bg-primary{background-color:var(--primary-color)}.bg-primary-contrast{background-color:var(--primary-contrast-color)}.bg-secondary{background-color:var(--secondary-color)}.bg-secondary-contrast{background-color:var(--secondary-contrast-color)}.bg-tertiary{background-color:var(--tertiary-color)}.bg-tertiary-contrast{background-color:var(--tertiary-contrast-color)}.bg-warn{background-color:var(--warn-color)}.bg-warn-contrast{background-color:var(--warn-contrast-color)}.bg-error{background-color:var(--error-color)}.bg-error-contrast{background-color:var(--error-contrast-color)}.bg-neutral{background-color:var(--neutral-color)}.text-primary{color:var(--primary-color)}.text-primary-contrast{color:var(--primary-contrast-color)}.text-secondary{color:var(--secondary-color)}.text-secondary-contrast{color:var(--secondary-contrast-color)}.text-tertiary{color:var(--tertiary-color)}.text-tertiary-contrast{color:var(--tertiary-contrast-color)}.text-warn{color:var(--warn-color)}.text-warn-contrast{color:var(--warn-contrast-color)}.text-error{color:var(--error-color)}.text-error-contrast{color:var(--error-contrast-color)}.text{color:var(--text-color)}.text-neutral{color:var(--text-neutral-color)}.border-primary{border-color:var(--primary-color)}.border-primary-contrast{border-color:var(--primary-contrast-color)}.border-secondary{border-color:var(--secondary-color)}.border-secondary-contrast{border-color:var(--secondary-contrast-color)}.border-tertiary{border-color:var(--tertiary-color)}.border-tertiary-contrast{border-color:var(--tertiary-contrast-color)}.border-warn{border-color:var(--warn-color)}.border-warn-contrast{border-color:var(--warn-contrast-color)}.border-error{border-color:var(--error-color)}.border-error-contrast{border-color:var(--error-contrast-color)}table{table-layout:auto;width:100%;box-shadow:1px 6px 10px #0003;border-radius:.5rem}td>*{text-wrap:pretty}th{height:3rem;padding:.5rem .25rem;text-align:left}th:is(:first-child){border-top-left-radius:.25rem}th:is(:last-child){border-top-right-radius:.25rem}td{color:var(--text-color)}td:is(:first-child){border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}td:is(:last-child){border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}tr{border-radius:.5rem}tr{border-bottom-width:2px}tr:is(:last-child){border:0}td{height:3rem;padding:.25rem .125rem}.no-events{pointer-events:none}tr:nth-child(2n){background-color:var(--neutral-color)}.header-cell{cursor:pointer}.header-cell-content-wrapper{color:inherit;display:flex;flex-direction:row;width:100%;height:100%;justify-content:space-between;align-items:center}.header-cell-content{color:inherit}.actions-cell{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}.actions-header-cell{text-align:center;width:min-content}::ng-deep .form-wrapper *{padding:0!important;margin:0!important}::ng-deep .form-wrapper{display:flex;flex-direction:row;align-items:center;align-content:center;justify-items:center;width:100%!important}.chr-mobile-table{display:flex;flex-direction:column;gap:1rem}.entry{display:flex;flex-direction:column;text-wrap:pretty;color:var(--text-color)}.entry-row{display:grid;flex-direction:row;grid-template-columns:8rem 1fr}.entry-row:not(:last-child){border-bottom-width:2px}.entry-header{display:flex;align-items:center;padding:1rem 1rem 1rem .5rem;border-radius:inherit}.entry-row:is(:first-child){border-top-left-radius:.5rem}.entry-row:is(:last-child){border-bottom-left-radius:.5rem}.entry-content{display:flex;align-items:center;width:100%;padding:1rem .5rem 1rem 1rem}.hidden{display:none}@media (min-width: 768px){.md\\:\\!table{display:table!important}}@media (min-width: 768px){.md\\:\\!hidden{display:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: ChrButtonComponent, selector: "app-chr-button", inputs: ["display", "icon", "click", "clickWhileDisabled", "color", "textColor", "flat", "predicate", "type", "href", "target", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: ChrFormComponent, selector: "app-chr-form", inputs: ["sections", "controls", "validators", "valid", "model", "disabled", "submit", "compact", "debounceTime", "tabDisplay", "form"], outputs: ["validChange", "modelChange", "formDataChange", "valuesChanges", "formChange", "valueChanges", "formChanges"] }, { kind: "pipe", type: SortPipe, name: "sort" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TabToInputHandlerDirective, selector: "[tab-input-only]" }] }); }
|
|
3152
3152
|
}
|
|
3153
3153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChrDataTable, decorators: [{
|
|
3154
3154
|
type: Component,
|
|
@@ -3161,7 +3161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
3161
3161
|
SortPipe,
|
|
3162
3162
|
MatIcon,
|
|
3163
3163
|
TabToInputHandlerDirective,
|
|
3164
|
-
], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\r\n (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" [attr.data-accent-color]=\"color()\"\r\n (click)=\"select(data(), $event)\" />\r\n </th>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\r\n (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n @if (column.properties && sortBy() == column.properties && isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\r\n }\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n @if (column.properties && sortBy() == column.properties && !isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\r\n }\r\n </div>\r\n </th>\r\n }\r\n @if (actions()) {\r\n <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (data() === null || data() === undefined || data().length <= 0) { <tr>\r\n @if (selectable()) {\r\n <td></td>\r\n }\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n }\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\r\n id: this.id()}; track entry) {\r\n <tr [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <td class=\"w-min\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\r\n [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </td>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <td tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </td>\r\n }\r\n @if (actions()) {\r\n <td>\r\n <div class=\"actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\r\n [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id()}; track entry) {\r\n <div class=\"entry\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n </div>\r\n }\r\n @if (selectable()) {\r\n <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\r\n [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </div>\r\n }\r\n </div>\r\n @for (column of columns() || []; track column) {\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n {{column.display}}\r\n </div>\r\n <div class=\"entry-content\" tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"entry-row\">\r\n @if (actions()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n Actions\r\n </div>\r\n }\r\n @if (actions()) {\r\n <div class=\"entry-content actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\r\n [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val | date: column.format}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\r\n }\r\n</ng-template>\r\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\r\n <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\r\n (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\r\n {\r\n controls:[\r\n {\r\n name: 'key',\r\n type: column.inputType || 'text',\r\n validations: column.validations,\r\n width: 'row'\r\n }\r\n ]\r\n }\r\n ]\" />\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <div class=\"w-full h-full flex flex-row items-center align-middle\">\r\n @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\r\n <span\r\n class=\"w-full md:max-w-36 flex text-center content-center align-middle items-center justify-center text-xs font-medium py-0.5 rounded-full\"\r\n [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\r\n {{ chip.display }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n</ng-template>", styles: ["[data-color=primary]{color:var(--primary-color)}[data-color=secondary]{color:var(--secondary-color)}[data-color=tertiary]{color:var(--tertiary-color)}[data-color=warn]{color:var(--warn-color)}[data-color=error]{color:var(--error-color)}[data-accent-color=primary]{accent-color:var(--primary-color)}[data-accent-color=secondary]{accent-color:var(--secondary-color)}[data-accent-color=tertiary]{accent-color:var(--tertiary-color)}[data-accent-color=warn]{accent-color:var(--warn-color)}[data-accent-color=error]{accent-color:var(--error-color)}[data-border-color=primary]{border-color:var(--primary-color)}[data-border-color=secondary]{border-color:var(--secondary-color)}[data-border-color=tertiary]{border-color:var(--tertiary-color)}[data-border-color=warn]{border-color:var(--warn-color)}[data-border-color=error]{border-color:var(--error-color)}[data-bg-color=primary]{background-color:var(--primary-color)}[data-bg-color=secondary]{background-color:var(--secondary-color)}[data-bg-color=tertiary]{background-color:var(--tertiary-color)}[data-bg-color=warn]{background-color:var(--warn-color)}[data-bg-color=error]{background-color:var(--error-color)}.bg-primary{background-color:var(--primary-color)}.bg-primary-contrast{background-color:var(--primary-contrast-color)}.bg-secondary{background-color:var(--secondary-color)}.bg-secondary-contrast{background-color:var(--secondary-contrast-color)}.bg-tertiary{background-color:var(--tertiary-color)}.bg-tertiary-contrast{background-color:var(--tertiary-contrast-color)}.bg-warn{background-color:var(--warn-color)}.bg-warn-contrast{background-color:var(--warn-contrast-color)}.bg-error{background-color:var(--error-color)}.bg-error-contrast{background-color:var(--error-contrast-color)}.bg-neutral{background-color:var(--neutral-color)}.text-primary{color:var(--primary-color)}.text-primary-contrast{color:var(--primary-contrast-color)}.text-secondary{color:var(--secondary-color)}.text-secondary-contrast{color:var(--secondary-contrast-color)}.text-tertiary{color:var(--tertiary-color)}.text-tertiary-contrast{color:var(--tertiary-contrast-color)}.text-warn{color:var(--warn-color)}.text-warn-contrast{color:var(--warn-contrast-color)}.text-error{color:var(--error-color)}.text-error-contrast{color:var(--error-contrast-color)}.text{color:var(--text-color)}.text-neutral{color:var(--text-neutral-color)}.border-primary{border-color:var(--primary-color)}.border-primary-contrast{border-color:var(--primary-contrast-color)}.border-secondary{border-color:var(--secondary-color)}.border-secondary-contrast{border-color:var(--secondary-contrast-color)}.border-tertiary{border-color:var(--tertiary-color)}.border-tertiary-contrast{border-color:var(--tertiary-contrast-color)}.border-warn{border-color:var(--warn-color)}.border-warn-contrast{border-color:var(--warn-contrast-color)}.border-error{border-color:var(--error-color)}.border-error-contrast{border-color:var(--error-contrast-color)}table{table-layout:auto;width:100%;box-shadow:1px 6px 10px #0003;border-radius:.5rem}td>*{text-wrap:pretty}th{height:3rem;padding:.5rem .25rem;text-align:left}th:is(:first-child){border-top-left-radius:.25rem}th:is(:last-child){border-top-right-radius:.25rem}td{color:var(--text-color)}td:is(:first-child){border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}td:is(:last-child){border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}tr{border-radius:.5rem}tr{border-bottom-width:2px}tr:is(:last-child){border:0}td{height:3rem;padding:.25rem .125rem}tr:nth-child(2n){background-color:var(--neutral-color)}.header-cell{cursor:pointer}.header-cell-content-wrapper{color:inherit;display:flex;flex-direction:row;width:100%;height:100%;justify-content:space-between;align-items:center}.header-cell-content{color:inherit}.actions-cell{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}.actions-header-cell{text-align:center;width:min-content}::ng-deep .form-wrapper *{padding:0!important;margin:0!important}::ng-deep .form-wrapper{display:flex;flex-direction:row;align-items:center;align-content:center;justify-items:center;width:100%!important}.chr-mobile-table{display:flex;flex-direction:column;gap:1rem}.entry{display:flex;flex-direction:column;text-wrap:pretty;color:var(--text-color)}.entry-row{display:grid;flex-direction:row;grid-template-columns:8rem 1fr}.entry-row:not(:last-child){border-bottom-width:2px}.entry-header{display:flex;align-items:center;padding:1rem 1rem 1rem .5rem;border-radius:inherit}.entry-row:is(:first-child){border-top-left-radius:.5rem}.entry-row:is(:last-child){border-bottom-left-radius:.5rem}.entry-content{display:flex;align-items:center;width:100%;padding:1rem .5rem 1rem 1rem}.hidden{display:none}@media (min-width: 768px){.md\\:\\!table{display:table!important}}@media (min-width: 768px){.md\\:\\!hidden{display:none!important}}\n"] }]
|
|
3164
|
+
], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\r\n (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none no-events table-checkbox\"\r\n [attr.data-accent-color]=\"color()\" (click)=\"select(data(), $event)\" />\r\n </th>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\r\n (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n @if (column.properties && sortBy() == column.properties && !isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\r\n }\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n @if (column.properties && sortBy() == column.properties && isAsc()) {\r\n <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\r\n }\r\n </div>\r\n </th>\r\n }\r\n @if (actions()) {\r\n <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @if (data() === null || data() === undefined || data().length <= 0) { <tr>\r\n @if (selectable()) {\r\n <td></td>\r\n }\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n }\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\r\n id: this.id()}; track entry) {\r\n <tr [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <td class=\"w-min\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none no-events table-checkbox\"\r\n (click)=\"select(entry, $event)\" [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </td>\r\n }\r\n @for (column of columns() || []; track column) {\r\n <td tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </td>\r\n }\r\n @if (actions()) {\r\n <td>\r\n <div class=\"actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\r\n [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id()}; track entry) {\r\n <div class=\"entry\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n @if (selectable()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n </div>\r\n }\r\n @if (selectable()) {\r\n <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" class=\"pointer-events-none no-events table-checkbox\"\r\n (click)=\"select(entry, $event)\" [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\r\n </div>\r\n }\r\n </div>\r\n @for (column of columns() || []; track column) {\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n {{column.display}}\r\n </div>\r\n <div class=\"entry-content\" tab-input-only>\r\n @switch (column.type) {\r\n @default {\r\n <ng-container [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('date') {\r\n <ng-container [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('input') {\r\n <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n @case ('chips') {\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"entry-row\">\r\n @if (actions()) {\r\n <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\r\n Actions\r\n </div>\r\n }\r\n @if (actions()) {\r\n <div class=\"entry-content actions-cell\">\r\n @for (action of actions(); track action) {\r\n <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\r\n [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <span>{{val | date: column.format}}</span>\r\n }\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\r\n }\r\n</ng-template>\r\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\r\n <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\r\n (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\r\n {\r\n controls:[\r\n {\r\n name: 'key',\r\n type: column.inputType || 'text',\r\n validations: column.validations,\r\n width: 'row'\r\n }\r\n ]\r\n }\r\n ]\" />\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n @if (column.callback? column.callback(value) : value; as val) {\r\n <div class=\"w-full h-full flex flex-row items-center align-middle\">\r\n @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\r\n <span\r\n class=\"w-full md:max-w-36 flex text-center content-center align-middle items-center justify-center text-xs font-medium py-0.5 rounded-full\"\r\n [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\r\n {{ chip.display }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n</ng-template>", styles: ["[data-color=primary]{color:var(--primary-color)}[data-color=secondary]{color:var(--secondary-color)}[data-color=tertiary]{color:var(--tertiary-color)}[data-color=warn]{color:var(--warn-color)}[data-color=error]{color:var(--error-color)}[data-accent-color=primary]{accent-color:var(--primary-color)}[data-accent-color=secondary]{accent-color:var(--secondary-color)}[data-accent-color=tertiary]{accent-color:var(--tertiary-color)}[data-accent-color=warn]{accent-color:var(--warn-color)}[data-accent-color=error]{accent-color:var(--error-color)}[data-border-color=primary]{border-color:var(--primary-color)}[data-border-color=secondary]{border-color:var(--secondary-color)}[data-border-color=tertiary]{border-color:var(--tertiary-color)}[data-border-color=warn]{border-color:var(--warn-color)}[data-border-color=error]{border-color:var(--error-color)}[data-bg-color=primary]{background-color:var(--primary-color)}[data-bg-color=secondary]{background-color:var(--secondary-color)}[data-bg-color=tertiary]{background-color:var(--tertiary-color)}[data-bg-color=warn]{background-color:var(--warn-color)}[data-bg-color=error]{background-color:var(--error-color)}.bg-primary{background-color:var(--primary-color)}.bg-primary-contrast{background-color:var(--primary-contrast-color)}.bg-secondary{background-color:var(--secondary-color)}.bg-secondary-contrast{background-color:var(--secondary-contrast-color)}.bg-tertiary{background-color:var(--tertiary-color)}.bg-tertiary-contrast{background-color:var(--tertiary-contrast-color)}.bg-warn{background-color:var(--warn-color)}.bg-warn-contrast{background-color:var(--warn-contrast-color)}.bg-error{background-color:var(--error-color)}.bg-error-contrast{background-color:var(--error-contrast-color)}.bg-neutral{background-color:var(--neutral-color)}.text-primary{color:var(--primary-color)}.text-primary-contrast{color:var(--primary-contrast-color)}.text-secondary{color:var(--secondary-color)}.text-secondary-contrast{color:var(--secondary-contrast-color)}.text-tertiary{color:var(--tertiary-color)}.text-tertiary-contrast{color:var(--tertiary-contrast-color)}.text-warn{color:var(--warn-color)}.text-warn-contrast{color:var(--warn-contrast-color)}.text-error{color:var(--error-color)}.text-error-contrast{color:var(--error-contrast-color)}.text{color:var(--text-color)}.text-neutral{color:var(--text-neutral-color)}.border-primary{border-color:var(--primary-color)}.border-primary-contrast{border-color:var(--primary-contrast-color)}.border-secondary{border-color:var(--secondary-color)}.border-secondary-contrast{border-color:var(--secondary-contrast-color)}.border-tertiary{border-color:var(--tertiary-color)}.border-tertiary-contrast{border-color:var(--tertiary-contrast-color)}.border-warn{border-color:var(--warn-color)}.border-warn-contrast{border-color:var(--warn-contrast-color)}.border-error{border-color:var(--error-color)}.border-error-contrast{border-color:var(--error-contrast-color)}table{table-layout:auto;width:100%;box-shadow:1px 6px 10px #0003;border-radius:.5rem}td>*{text-wrap:pretty}th{height:3rem;padding:.5rem .25rem;text-align:left}th:is(:first-child){border-top-left-radius:.25rem}th:is(:last-child){border-top-right-radius:.25rem}td{color:var(--text-color)}td:is(:first-child){border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}td:is(:last-child){border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}tr{border-radius:.5rem}tr{border-bottom-width:2px}tr:is(:last-child){border:0}td{height:3rem;padding:.25rem .125rem}.no-events{pointer-events:none}tr:nth-child(2n){background-color:var(--neutral-color)}.header-cell{cursor:pointer}.header-cell-content-wrapper{color:inherit;display:flex;flex-direction:row;width:100%;height:100%;justify-content:space-between;align-items:center}.header-cell-content{color:inherit}.actions-cell{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}.actions-header-cell{text-align:center;width:min-content}::ng-deep .form-wrapper *{padding:0!important;margin:0!important}::ng-deep .form-wrapper{display:flex;flex-direction:row;align-items:center;align-content:center;justify-items:center;width:100%!important}.chr-mobile-table{display:flex;flex-direction:column;gap:1rem}.entry{display:flex;flex-direction:column;text-wrap:pretty;color:var(--text-color)}.entry-row{display:grid;flex-direction:row;grid-template-columns:8rem 1fr}.entry-row:not(:last-child){border-bottom-width:2px}.entry-header{display:flex;align-items:center;padding:1rem 1rem 1rem .5rem;border-radius:inherit}.entry-row:is(:first-child){border-top-left-radius:.5rem}.entry-row:is(:last-child){border-bottom-left-radius:.5rem}.entry-content{display:flex;align-items:center;width:100%;padding:1rem .5rem 1rem 1rem}.hidden{display:none}@media (min-width: 768px){.md\\:\\!table{display:table!important}}@media (min-width: 768px){.md\\:\\!hidden{display:none!important}}\n"] }]
|
|
3165
3165
|
}] });
|
|
3166
3166
|
|
|
3167
3167
|
class ChrNiceFileInputComponent extends ChrFileInputComponent {
|