chrv-components 1.11.0 → 1.11.1

package/fesm2022/chrv-components.mjs

@@ -2929,7 +2929,7 @@ class ChrDataTable {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChrDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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\">\n  <thead>\n    <tr>\n      @if (selectable()) {\n      <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\n        (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" [attr.data-accent-color]=\"color()\"\n          (click)=\"select(data(), $event)\" />\n      </th>\n      }\n      @for (column of columns() || []; track column) {\n      <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\n        (click)=\"sort(column.properties)\">\n        <div class=\"header-cell-content-wrapper\">\n          <span class=\"header-cell-content\">{{column.display}}</span>\n          @if (column.properties && sortBy() == column.properties && isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\n          }\n          <!-- \uD83E\uDC71 \uD83E\uDC73 -->\n          @if (column.properties && sortBy() == column.properties && !isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\n          }\n        </div>\n      </th>\n      }\n      @if (actions()) {\n      <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (data() === null || data() === undefined || data().length <= 0) { <tr>\n      @if (selectable()) {\n      <td></td>\n      }\n      <td>Pas de donn\u00E9es</td>\n      </tr>\n      }\n      @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\n      id: this.id()}; track entry) {\n      <tr [ngClass]=\"getBorderColor(color())\">\n        @if (selectable()) {\n        <td class=\"w-min\" (click)=\"checkbox.click()\">\n          <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n            [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n        </td>\n        }\n        @for (column of columns() || []; track column) {\n        <td tab-input-only>\n          @switch (column.type) {\n          @default {\n          <ng-container [ngTemplateOutlet]=\"default\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('date') {\n          <ng-container [ngTemplateOutlet]=\"date\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('input') {\n          <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n            [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('chips') {\n          <ng-container [ngTemplateOutlet]=\"chip\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          }\n        </td>\n        }\n        @if (actions()) {\n        <td>\n          <div class=\"actions-cell\">\n            @for (action of actions(); track action) {\n            <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\n              [color]=\"action.color\" [disabled]=\"\n                                            action.disabledCallback\n                                                ? action.disabledCallback(entry)\n                                                : action.disabled || false\">\n            </app-chr-button>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n  </tbody>\n  <tfoot></tfoot>\n</table>\n\n<div class=\"md:!hidden chr-mobile-table\">\n  @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\n  this.id()}; track entry) {\n  <div class=\"entry\">\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      @if (selectable()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n      </div>\n      }\n      @if (selectable()) {\n      <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n          [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n      </div>\n      }\n    </div>\n    @for (column of columns() || []; track column) {\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        {{column.display}}\n      </div>\n      <div class=\"entry-content\" tab-input-only>\n        @switch (column.type) {\n        @default {\n        <ng-container [ngTemplateOutlet]=\"default\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('date') {\n        <ng-container [ngTemplateOutlet]=\"date\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('input') {\n        <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n          [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('chips') {\n        <ng-container [ngTemplateOutlet]=\"chip\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        }\n      </div>\n    </div>\n    }\n    <div class=\"entry-row\">\n      @if (actions()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        Actions\n      </div>\n      }\n      @if (actions()) {\n      <div class=\"entry-content actions-cell\">\n        @for (action of actions(); track action) {\n        <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\n          [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\n                                                            action.disabledCallback\n                                                                ? action.disabledCallback(entry)\n                                                                : action.disabled || false\">\n        </app-chr-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\n\n<!-- CELL TEMPLATES -->\n<ng-template #default let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val}}</span>\n  }\n</ng-template>\n<ng-template #date let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val | date: column.format}}</span>\n  }\n</ng-template>\n<ng-template #link let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\n  }\n</ng-template>\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\n  <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\n    (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\n                {\n                    controls:[\n                        {\n                            name: 'key',\n                            type: column.inputType || 'text',\n                            validations: column.validations,\n                            width: 'row'\n                        }\n                    ]\n                }\n                ]\" />\n</ng-template>\n<ng-template #chip let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <div class=\"w-full h-full flex flex-row items-center align-middle\">\n    @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\n    <span\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\"\n      [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\n      {{ chip.display }}\n    </span>\n    }\n  </div>\n  }\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)}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"], outputs: ["pageChange", "pageSizeChange"] }, { 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]" }] }); }
+    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\">\n  <thead>\n    <tr>\n      @if (selectable()) {\n      <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\n        (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" [attr.data-accent-color]=\"color()\"\n          (click)=\"select(data(), $event)\" />\n      </th>\n      }\n      @for (column of columns() || []; track column) {\n      <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\n        (click)=\"sort(column.properties)\">\n        <div class=\"header-cell-content-wrapper\">\n          <span class=\"header-cell-content\">{{column.display}}</span>\n          @if (column.properties && sortBy() == column.properties && isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\n          }\n          <!-- \uD83E\uDC71 \uD83E\uDC73 -->\n          @if (column.properties && sortBy() == column.properties && !isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\n          }\n        </div>\n      </th>\n      }\n      @if (actions()) {\n      <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (data() === null || data() === undefined || data().length <= 0) { <tr>\n      @if (selectable()) {\n      <td></td>\n      }\n      <td>Pas de donn\u00E9es</td>\n      </tr>\n      }\n      @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\n      id: this.id()}; track entry) {\n      <tr [ngClass]=\"getBorderColor(color())\">\n        @if (selectable()) {\n        <td class=\"w-min\" (click)=\"checkbox.click()\">\n          <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n            [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n        </td>\n        }\n        @for (column of columns() || []; track column) {\n        <td tab-input-only>\n          @switch (column.type) {\n          @default {\n          <ng-container [ngTemplateOutlet]=\"default\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('date') {\n          <ng-container [ngTemplateOutlet]=\"date\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('input') {\n          <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n            [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('chips') {\n          <ng-container [ngTemplateOutlet]=\"chip\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          }\n        </td>\n        }\n        @if (actions()) {\n        <td>\n          <div class=\"actions-cell\">\n            @for (action of actions(); track action) {\n            <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\n              [color]=\"action.color\" [disabled]=\"\n                                            action.disabledCallback\n                                                ? action.disabledCallback(entry)\n                                                : action.disabled || false\">\n            </app-chr-button>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n  </tbody>\n  <tfoot></tfoot>\n</table>\n\n<div class=\"md:!hidden chr-mobile-table\">\n  @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\n  this.id()}; track entry) {\n  <div class=\"entry\">\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      @if (selectable()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n      </div>\n      }\n      @if (selectable()) {\n      <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n          [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n      </div>\n      }\n    </div>\n    @for (column of columns() || []; track column) {\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        {{column.display}}\n      </div>\n      <div class=\"entry-content\" tab-input-only>\n        @switch (column.type) {\n        @default {\n        <ng-container [ngTemplateOutlet]=\"default\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('date') {\n        <ng-container [ngTemplateOutlet]=\"date\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('input') {\n        <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n          [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('chips') {\n        <ng-container [ngTemplateOutlet]=\"chip\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        }\n      </div>\n    </div>\n    }\n    <div class=\"entry-row\">\n      @if (actions()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        Actions\n      </div>\n      }\n      @if (actions()) {\n      <div class=\"entry-content actions-cell\">\n        @for (action of actions(); track action) {\n        <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\n          [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\n                                                            action.disabledCallback\n                                                                ? action.disabledCallback(entry)\n                                                                : action.disabled || false\">\n        </app-chr-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\n\n<!-- CELL TEMPLATES -->\n<ng-template #default let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val}}</span>\n  }\n</ng-template>\n<ng-template #date let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val | date: column.format}}</span>\n  }\n</ng-template>\n<ng-template #link let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\n  }\n</ng-template>\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\n  <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\n    (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\n                {\n                    controls:[\n                        {\n                            name: 'key',\n                            type: column.inputType || 'text',\n                            validations: column.validations,\n                            width: 'row'\n                        }\n                    ]\n                }\n                ]\" />\n</ng-template>\n<ng-template #chip let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <div class=\"w-full h-full flex flex-row items-center align-middle\">\n    @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\n    <span\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\"\n      [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\n      {{ chip.display }}\n    </span>\n    }\n  </div>\n  }\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"], outputs: ["pageChange", "pageSizeChange"] }, { 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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChrDataTable, decorators: [{
             type: Component,
@@ -2942,7 +2942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SortPipe,
                         MatIcon,
                         TabToInputHandlerDirective,
-                    ], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\n  <thead>\n    <tr>\n      @if (selectable()) {\n      <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\n        (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" [attr.data-accent-color]=\"color()\"\n          (click)=\"select(data(), $event)\" />\n      </th>\n      }\n      @for (column of columns() || []; track column) {\n      <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\n        (click)=\"sort(column.properties)\">\n        <div class=\"header-cell-content-wrapper\">\n          <span class=\"header-cell-content\">{{column.display}}</span>\n          @if (column.properties && sortBy() == column.properties && isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\n          }\n          <!-- \uD83E\uDC71 \uD83E\uDC73 -->\n          @if (column.properties && sortBy() == column.properties && !isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\n          }\n        </div>\n      </th>\n      }\n      @if (actions()) {\n      <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (data() === null || data() === undefined || data().length <= 0) { <tr>\n      @if (selectable()) {\n      <td></td>\n      }\n      <td>Pas de donn\u00E9es</td>\n      </tr>\n      }\n      @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\n      id: this.id()}; track entry) {\n      <tr [ngClass]=\"getBorderColor(color())\">\n        @if (selectable()) {\n        <td class=\"w-min\" (click)=\"checkbox.click()\">\n          <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n            [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n        </td>\n        }\n        @for (column of columns() || []; track column) {\n        <td tab-input-only>\n          @switch (column.type) {\n          @default {\n          <ng-container [ngTemplateOutlet]=\"default\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('date') {\n          <ng-container [ngTemplateOutlet]=\"date\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('input') {\n          <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n            [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('chips') {\n          <ng-container [ngTemplateOutlet]=\"chip\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          }\n        </td>\n        }\n        @if (actions()) {\n        <td>\n          <div class=\"actions-cell\">\n            @for (action of actions(); track action) {\n            <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\n              [color]=\"action.color\" [disabled]=\"\n                                            action.disabledCallback\n                                                ? action.disabledCallback(entry)\n                                                : action.disabled || false\">\n            </app-chr-button>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n  </tbody>\n  <tfoot></tfoot>\n</table>\n\n<div class=\"md:!hidden chr-mobile-table\">\n  @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\n  this.id()}; track entry) {\n  <div class=\"entry\">\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      @if (selectable()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n      </div>\n      }\n      @if (selectable()) {\n      <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n          [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n      </div>\n      }\n    </div>\n    @for (column of columns() || []; track column) {\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        {{column.display}}\n      </div>\n      <div class=\"entry-content\" tab-input-only>\n        @switch (column.type) {\n        @default {\n        <ng-container [ngTemplateOutlet]=\"default\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('date') {\n        <ng-container [ngTemplateOutlet]=\"date\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('input') {\n        <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n          [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('chips') {\n        <ng-container [ngTemplateOutlet]=\"chip\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        }\n      </div>\n    </div>\n    }\n    <div class=\"entry-row\">\n      @if (actions()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        Actions\n      </div>\n      }\n      @if (actions()) {\n      <div class=\"entry-content actions-cell\">\n        @for (action of actions(); track action) {\n        <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\n          [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\n                                                            action.disabledCallback\n                                                                ? action.disabledCallback(entry)\n                                                                : action.disabled || false\">\n        </app-chr-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\n\n<!-- CELL TEMPLATES -->\n<ng-template #default let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val}}</span>\n  }\n</ng-template>\n<ng-template #date let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val | date: column.format}}</span>\n  }\n</ng-template>\n<ng-template #link let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\n  }\n</ng-template>\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\n  <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\n    (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\n                {\n                    controls:[\n                        {\n                            name: 'key',\n                            type: column.inputType || 'text',\n                            validations: column.validations,\n                            width: 'row'\n                        }\n                    ]\n                }\n                ]\" />\n</ng-template>\n<ng-template #chip let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <div class=\"w-full h-full flex flex-row items-center align-middle\">\n    @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\n    <span\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\"\n      [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\n      {{ chip.display }}\n    </span>\n    }\n  </div>\n  }\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)}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"] }]
+                    ], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\n  <thead>\n    <tr>\n      @if (selectable()) {\n      <th [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\" class=\"w-min\"\n        (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" [attr.data-accent-color]=\"color()\"\n          (click)=\"select(data(), $event)\" />\n      </th>\n      }\n      @for (column of columns() || []; track column) {\n      <th class=\"header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\"\n        (click)=\"sort(column.properties)\">\n        <div class=\"header-cell-content-wrapper\">\n          <span class=\"header-cell-content\">{{column.display}}</span>\n          @if (column.properties && sortBy() == column.properties && isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_upward</mat-icon>\n          }\n          <!-- \uD83E\uDC71 \uD83E\uDC73 -->\n          @if (column.properties && sortBy() == column.properties && !isAsc()) {\n          <mat-icon class=\"header-cell-content\">arrow_downward</mat-icon>\n          }\n        </div>\n      </th>\n      }\n      @if (actions()) {\n      <th class=\"actions-header-cell\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">Actions\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (data() === null || data() === undefined || data().length <= 0) { <tr>\n      @if (selectable()) {\n      <td></td>\n      }\n      <td>Pas de donn\u00E9es</td>\n      </tr>\n      }\n      @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(),\n      id: this.id()}; track entry) {\n      <tr [ngClass]=\"getBorderColor(color())\">\n        @if (selectable()) {\n        <td class=\"w-min\" (click)=\"checkbox.click()\">\n          <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n            [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n        </td>\n        }\n        @for (column of columns() || []; track column) {\n        <td tab-input-only>\n          @switch (column.type) {\n          @default {\n          <ng-container [ngTemplateOutlet]=\"default\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('date') {\n          <ng-container [ngTemplateOutlet]=\"date\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('input') {\n          <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n            [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          @case ('chips') {\n          <ng-container [ngTemplateOutlet]=\"chip\"\n            [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n          </ng-container>\n          }\n          }\n        </td>\n        }\n        @if (actions()) {\n        <td>\n          <div class=\"actions-cell\">\n            @for (action of actions(); track action) {\n            <app-chr-button [display]=\"action.display\" [icon]=\"action.icon\" [click]=\"action.callback.bind(null, entry)\"\n              [color]=\"action.color\" [disabled]=\"\n                                            action.disabledCallback\n                                                ? action.disabledCallback(entry)\n                                                : action.disabled || false\">\n            </app-chr-button>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n  </tbody>\n  <tfoot></tfoot>\n</table>\n\n<div class=\"md:!hidden chr-mobile-table\">\n  @for (entry of data() | sort:isAsc():sortBy() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\n  this.id()}; track entry) {\n  <div class=\"entry\">\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      @if (selectable()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n      </div>\n      }\n      @if (selectable()) {\n      <div class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\n        <input #checkbox type=\"checkbox\" class=\"pointer-events-none table-checkbox\" (click)=\"select(entry, $event)\"\n          [attr.data-accent-color]=\"color()\" [checked]=\"contains(entry)\" />\n      </div>\n      }\n    </div>\n    @for (column of columns() || []; track column) {\n    <div class=\"entry-row\" [ngClass]=\"getBorderColor(color())\">\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        {{column.display}}\n      </div>\n      <div class=\"entry-content\" tab-input-only>\n        @switch (column.type) {\n        @default {\n        <ng-container [ngTemplateOutlet]=\"default\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('date') {\n        <ng-container [ngTemplateOutlet]=\"date\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('input') {\n        <ng-container [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\n          [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        @case ('chips') {\n        <ng-container [ngTemplateOutlet]=\"chip\"\n          [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\n        </ng-container>\n        }\n        }\n      </div>\n    </div>\n    }\n    <div class=\"entry-row\">\n      @if (actions()) {\n      <div class=\"entry-header\" [ngClass]=\"[getBackgroundColor(color()), getContrastTextColor(color())]\">\n        Actions\n      </div>\n      }\n      @if (actions()) {\n      <div class=\"entry-content actions-cell\">\n        @for (action of actions(); track action) {\n        <app-chr-button class=\"w-full\" [display]=\"action.display\" [icon]=\"action.icon\" type=\"full\"\n          [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\n                                                            action.disabledCallback\n                                                                ? action.disabledCallback(entry)\n                                                                : action.disabled || false\">\n        </app-chr-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<app-chr-paginator [id]=\"this.id()\" [(page)]=\"currentPage\" [(pageSize)]=\"pageSize\" />\n\n<!-- CELL TEMPLATES -->\n<ng-template #default let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val}}</span>\n  }\n</ng-template>\n<ng-template #date let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <span>{{val | date: column.format}}</span>\n  }\n</ng-template>\n<ng-template #link let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <a target=\"_blank\" [href]=\"column.url + '/'+ val\">{{val}}</a>\n  }\n</ng-template>\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\" class=\"w-full\">\n  <app-chr-form class=\"form-wrapper w-full\" [model]=\"{key: value}\"\n    (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\n                {\n                    controls:[\n                        {\n                            name: 'key',\n                            type: column.inputType || 'text',\n                            validations: column.validations,\n                            width: 'row'\n                        }\n                    ]\n                }\n                ]\" />\n</ng-template>\n<ng-template #chip let-column='column' let-value=\"value\">\n  @if (column.callback? column.callback(value) : value; as val) {\n  <div class=\"w-full h-full flex flex-row items-center align-middle\">\n    @if ((column.chips?.[val] || column.chips?.[column.chipsCallback(val)]); as chip) {\n    <span\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\"\n      [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\n      {{ chip.display }}\n    </span>\n    }\n  </div>\n  }\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"] }]
         }] });
 
 class ChrNiceFileInputComponent extends ChrFileInputComponent {