chrv-components 1.11.81 → 1.11.82
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
|
|
@@ -5198,7 +5198,7 @@ class DataGrid {
|
|
|
5198
5198
|
};
|
|
5199
5199
|
}
|
|
5200
5200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sort: "sortChange", filter: "filterChange", cellChange: "cellChange", rowClick: "rowClick", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onDB2Navigate: "onDB2Navigate", onNavigate: "onNavigate", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange" }, providers: [PaginationService], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info .mat-icon{font-size:1.25rem!important;width:2rem;height:2rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }] }); }
|
|
5201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sort: "sortChange", filter: "filterChange", cellChange: "cellChange", rowClick: "rowClick", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onDB2Navigate: "onDB2Navigate", onNavigate: "onNavigate", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange" }, providers: [PaginationService], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }] }); }
|
|
5202
5202
|
}
|
|
5203
5203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataGrid, decorators: [{
|
|
5204
5204
|
type: Component,
|
|
@@ -5211,7 +5211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
5211
5211
|
ScrollIntoViewDirective,
|
|
5212
5212
|
ControlClickDirective,
|
|
5213
5213
|
ColumnFilter,
|
|
5214
|
-
], providers: [PaginationService], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info .mat-icon{font-size:1.25rem!important;width:2rem;height:2rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"] }]
|
|
5214
|
+
], providers: [PaginationService], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"] }]
|
|
5215
5215
|
}], ctorParameters: () => [] });
|
|
5216
5216
|
|
|
5217
5217
|
class MessageBanner {
|