chrv-components 1.10.61 → 1.10.63
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
|
|
@@ -3013,7 +3013,7 @@ class ChrDataTable {
|
|
|
3013
3013
|
return value;
|
|
3014
3014
|
}
|
|
3015
3015
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChrDataTable, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3016
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ChrDataTable, isStandalone: true, selector: "chr-table", inputs: { data: "data", selectable: "selectable", selection: "selection", actions: "actions", isAsc: "isAsc", sortBy: "sortBy", pageSize: "pageSize", currentPage: "currentPage", id: "id", color: "color", columns: "columns" }, outputs: { selectionChange: "selectionChange", isAscChange: "isAscChange", sortByChange: "sortByChange", pageSizeChange: "pageSizeChange", currentPageChange: "currentPageChange" }, providers: [PaginationService], ngImport: i0, template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"selectable\" [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" class=\"w-min\">\r\n </th>\r\n <th *ngFor=\"let column of columns || []\" class=\"header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && isAsc\">arrow_upward</mat-icon>\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && !isAsc\">arrow_downward</mat-icon>\r\n </div>\r\n </th>\r\n <th *ngIf=\"actions\" class=\"actions-header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngIf=\"data === null || data === undefined || data.length <= 0\">\r\n <td *ngIf=\"selectable\"></td>\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n <tr [ngClass]=\"getBorderColor(color)\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <td *ngIf=\"selectable\" class=\"w-min\">\r\n <input type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </td>\r\n <td *ngFor=\"let column of columns || []\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"actions\">\r\n <div class=\"actions-cell\">\r\n <app-chr-button *ngFor=\"let action of actions\" [display]=\"action.display\" [icon]=\"action.icon\"\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 </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n <div class=\"entry\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color)\">\r\n <div class=\"entry-header\" *ngIf=\"selectable\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n\r\n </div>\r\n <div *ngIf=\"selectable\" class=\"entry-content flex flex-row justify-center\">\r\n <input class=\"\" type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </div>\r\n </div>\r\n <div class=\"entry-row\" *ngFor=\"let column of columns || []\" [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\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"entry-row\">\r\n <div class=\"entry-header\" *ngIf=\"actions\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n Actions\r\n </div>\r\n <div *ngIf=\"actions\" class=\"entry-content actions-cell\">\r\n <app-chr-button class=\"w-full\" *ngFor=\"let action of actions\" [display]=\"action.display\"\r\n [icon]=\"action.icon\" type=\"full\" [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\"\r\n [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id\" [(pageSize)]=\"pageSize\" [(page)]=\"currentPage\" (pageSizeChange)=\"emitPageSize($event)\"\r\n (pageChange)=\"emitCurrentPage($event)\"></app-chr-paginator>\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val}}</p>\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val | date: column.format}}</p>\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n <a *ngIf=\"column.callback? column.callback(value) : value as val\" target=\"_blank\"\r\n [href]=\"column.url + '/'+ val\">{{val}}</a>\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 </app-chr-form>\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n <div *ngIf=\"column.callback? column.callback(value) : value as val\"\r\n class=\"w-full h-full flex flex-row items-center align-middle\">\r\n <span *ngIf=\"column.chips?.[val] as chip\"\r\n class=\"w-full 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 </div>\r\n</ng-template>", styles: ["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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2$1.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: i1.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]" }] }); }
|
|
3016
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ChrDataTable, isStandalone: true, selector: "chr-table", inputs: { data: "data", selectable: "selectable", selection: "selection", actions: "actions", isAsc: "isAsc", sortBy: "sortBy", pageSize: "pageSize", currentPage: "currentPage", id: "id", color: "color", columns: "columns" }, outputs: { selectionChange: "selectionChange", isAscChange: "isAscChange", sortByChange: "sortByChange", pageSizeChange: "pageSizeChange", currentPageChange: "currentPageChange" }, providers: [PaginationService], ngImport: i0, template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"selectable\" [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" class=\"w-min\">\r\n </th>\r\n <th *ngFor=\"let column of columns || []\" class=\"header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && isAsc\">arrow_upward</mat-icon>\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && !isAsc\">arrow_downward</mat-icon>\r\n </div>\r\n </th>\r\n <th *ngIf=\"actions\" class=\"actions-header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngIf=\"data === null || data === undefined || data.length <= 0\">\r\n <td *ngIf=\"selectable\"></td>\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n <tr [ngClass]=\"getBorderColor(color)\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <td *ngIf=\"selectable\" class=\"w-min\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </td>\r\n <td *ngFor=\"let column of columns || []\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"actions\">\r\n <div class=\"actions-cell\">\r\n <app-chr-button *ngFor=\"let action of actions\" [display]=\"action.display\" [icon]=\"action.icon\"\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 </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n <div class=\"entry\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color)\">\r\n <div class=\"entry-header\" *ngIf=\"selectable\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n\r\n </div>\r\n <div *ngIf=\"selectable\" class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\r\n <input #checkbox class=\"\" type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </div>\r\n </div>\r\n <div class=\"entry-row\" *ngFor=\"let column of columns || []\" [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\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"entry-row\">\r\n <div class=\"entry-header\" *ngIf=\"actions\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n Actions\r\n </div>\r\n <div *ngIf=\"actions\" class=\"entry-content actions-cell\">\r\n <app-chr-button class=\"w-full\" *ngFor=\"let action of actions\" [display]=\"action.display\"\r\n [icon]=\"action.icon\" type=\"full\" [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\"\r\n [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id\" [(pageSize)]=\"pageSize\" [(page)]=\"currentPage\" (pageSizeChange)=\"emitPageSize($event)\"\r\n (pageChange)=\"emitCurrentPage($event)\"></app-chr-paginator>\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n <span *ngIf=\"column.callback? column.callback(value) : value as val\">{{val}}</span>\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n <span *ngIf=\"column.callback? column.callback(value) : value as val\">{{val | date: column.format}}</span>\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n <a *ngIf=\"column.callback? column.callback(value) : value as val\" target=\"_blank\"\r\n [href]=\"column.url + '/'+ val\">{{val}}</a>\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 </app-chr-form>\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n <div *ngIf=\"column.callback? column.callback(value) : value as val\"\r\n class=\"w-full h-full flex flex-row items-center align-middle\">\r\n <span *ngIf=\"column.chips?.[val] as chip\"\r\n class=\"w-full 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 </div>\r\n</ng-template>", styles: ["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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2$1.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: i1.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]" }] }); }
|
|
3017
3017
|
}
|
|
3018
3018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChrDataTable, decorators: [{
|
|
3019
3019
|
type: Component,
|
|
@@ -3026,7 +3026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3026
3026
|
SortPipe,
|
|
3027
3027
|
MatIcon,
|
|
3028
3028
|
TabToInputHandlerDirective,
|
|
3029
|
-
], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"selectable\" [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" class=\"w-min\">\r\n </th>\r\n <th *ngFor=\"let column of columns || []\" class=\"header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && isAsc\">arrow_upward</mat-icon>\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && !isAsc\">arrow_downward</mat-icon>\r\n </div>\r\n </th>\r\n <th *ngIf=\"actions\" class=\"actions-header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngIf=\"data === null || data === undefined || data.length <= 0\">\r\n <td *ngIf=\"selectable\"></td>\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n <tr [ngClass]=\"getBorderColor(color)\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <td *ngIf=\"selectable\" class=\"w-min\">\r\n <input type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </td>\r\n <td *ngFor=\"let column of columns || []\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"actions\">\r\n <div class=\"actions-cell\">\r\n <app-chr-button *ngFor=\"let action of actions\" [display]=\"action.display\" [icon]=\"action.icon\"\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 </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n <div class=\"entry\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color)\">\r\n <div class=\"entry-header\" *ngIf=\"selectable\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n\r\n </div>\r\n <div *ngIf=\"selectable\" class=\"entry-content flex flex-row justify-center\">\r\n <input class=\"\" type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </div>\r\n </div>\r\n <div class=\"entry-row\" *ngFor=\"let column of columns || []\" [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\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"entry-row\">\r\n <div class=\"entry-header\" *ngIf=\"actions\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n Actions\r\n </div>\r\n <div *ngIf=\"actions\" class=\"entry-content actions-cell\">\r\n <app-chr-button class=\"w-full\" *ngFor=\"let action of actions\" [display]=\"action.display\"\r\n [icon]=\"action.icon\" type=\"full\" [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\"\r\n [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id\" [(pageSize)]=\"pageSize\" [(page)]=\"currentPage\" (pageSizeChange)=\"emitPageSize($event)\"\r\n (pageChange)=\"emitCurrentPage($event)\"></app-chr-paginator>\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val}}</p>\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val | date: column.format}}</p>\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n <a *ngIf=\"column.callback? column.callback(value) : value as val\" target=\"_blank\"\r\n [href]=\"column.url + '/'+ val\">{{val}}</a>\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 </app-chr-form>\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n <div *ngIf=\"column.callback? column.callback(value) : value as val\"\r\n class=\"w-full h-full flex flex-row items-center align-middle\">\r\n <span *ngIf=\"column.chips?.[val] as chip\"\r\n class=\"w-full 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 </div>\r\n</ng-template>", styles: ["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"] }]
|
|
3029
|
+
], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"selectable\" [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" class=\"w-min\">\r\n </th>\r\n <th *ngFor=\"let column of columns || []\" class=\"header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <span class=\"header-cell-content\">{{column.display}}</span>\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && isAsc\">arrow_upward</mat-icon>\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"column.properties && sortBy == column.properties && !isAsc\">arrow_downward</mat-icon>\r\n </div>\r\n </th>\r\n <th *ngIf=\"actions\" class=\"actions-header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngIf=\"data === null || data === undefined || data.length <= 0\">\r\n <td *ngIf=\"selectable\"></td>\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n <tr [ngClass]=\"getBorderColor(color)\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <td *ngIf=\"selectable\" class=\"w-min\" (click)=\"checkbox.click()\">\r\n <input #checkbox type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </td>\r\n <td *ngFor=\"let column of columns || []\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"actions\">\r\n <div class=\"actions-cell\">\r\n <app-chr-button *ngFor=\"let action of actions\" [display]=\"action.display\" [icon]=\"action.icon\"\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 </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<div class=\"md:!hidden chr-mobile-table\">\r\n <div class=\"entry\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <div class=\"entry-row\" [ngClass]=\"getBorderColor(color)\">\r\n <div class=\"entry-header\" *ngIf=\"selectable\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n\r\n </div>\r\n <div *ngIf=\"selectable\" class=\"entry-content flex flex-row justify-center\" (click)=\"checkbox.click()\">\r\n <input #checkbox class=\"\" type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </div>\r\n </div>\r\n <div class=\"entry-row\" *ngFor=\"let column of columns || []\" [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\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"entry-row\">\r\n <div class=\"entry-header\" *ngIf=\"actions\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">\r\n Actions\r\n </div>\r\n <div *ngIf=\"actions\" class=\"entry-content actions-cell\">\r\n <app-chr-button class=\"w-full\" *ngFor=\"let action of actions\" [display]=\"action.display\"\r\n [icon]=\"action.icon\" type=\"full\" [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\"\r\n [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<app-chr-paginator [id]=\"this.id\" [(pageSize)]=\"pageSize\" [(page)]=\"currentPage\" (pageSizeChange)=\"emitPageSize($event)\"\r\n (pageChange)=\"emitCurrentPage($event)\"></app-chr-paginator>\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n <span *ngIf=\"column.callback? column.callback(value) : value as val\">{{val}}</span>\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n <span *ngIf=\"column.callback? column.callback(value) : value as val\">{{val | date: column.format}}</span>\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n <a *ngIf=\"column.callback? column.callback(value) : value as val\" target=\"_blank\"\r\n [href]=\"column.url + '/'+ val\">{{val}}</a>\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 </app-chr-form>\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n <div *ngIf=\"column.callback? column.callback(value) : value as val\"\r\n class=\"w-full h-full flex flex-row items-center align-middle\">\r\n <span *ngIf=\"column.chips?.[val] as chip\"\r\n class=\"w-full 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 </div>\r\n</ng-template>", styles: ["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"] }]
|
|
3030
3030
|
}], ctorParameters: () => [{ type: DataService }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
|
|
3031
3031
|
type: Input
|
|
3032
3032
|
}], selectable: [{
|