chrv-components 1.12.56 → 1.12.57
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
|
|
@@ -6336,6 +6336,12 @@ class DataGrid {
|
|
|
6336
6336
|
}
|
|
6337
6337
|
return items;
|
|
6338
6338
|
};
|
|
6339
|
+
this.onAdd = () => {
|
|
6340
|
+
this.onAddRow.emit();
|
|
6341
|
+
setTimeout(() => {
|
|
6342
|
+
this.viewport()?.scrollTo({ bottom: 0 });
|
|
6343
|
+
}, 250);
|
|
6344
|
+
};
|
|
6339
6345
|
this.log = (event) => {
|
|
6340
6346
|
console.log(`[DataGrid-${this.id()}]`, event);
|
|
6341
6347
|
};
|
|
@@ -6497,7 +6503,7 @@ class DataGrid {
|
|
|
6497
6503
|
// provide: VIRTUAL_SCROLL_STRATEGY,
|
|
6498
6504
|
// useClass: DynamicSizeScrollStrategy,
|
|
6499
6505
|
// },
|
|
6500
|
-
], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], 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()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n @if(table()?.description){\r\n <span class=\"table-description\">{{ table()?.description }}</span>\r\n }\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowManageDistincValueFetching()){\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n </div>\r\n }\r\n @if (allowSync() && allowManageTrackingPersistence()) {\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n </div>\r\n }\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon 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 icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onAddRow.emit()\" title=\"Ajouter une ligne\">add</span>\r\n }\r\n @if(allowExport()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n }\r\n @if(totalItems() !== -1){\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"grid-container data-grid-wrapper\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n @for (column of columns(); track column.columnName) {\r\n @let isForeignKey = isForeignKeyColumn(column);\r\n @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n @let isComputedColumn = column.isGenerated;\r\n @let isUniqueColumn = isUniqueKeyColumn(column);\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n }\r\n </div>\r\n <div class=\"grid-body\">\r\n @if(enableVirtualization()){\r\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row.data, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKey){\r\n <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n 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 <div class=\"column-icons\">\r\n @if(isUniqueColumn){\r\n <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n }\r\n @if(isPrimaryKey || isForeignKey){\r\n <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n 'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n }\r\n @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n }\r\n </div>\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon\">arrow_downward</span>\r\n }\r\n }\r\n <div class=\"filter-group-controls\" #controls>\r\n <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n class=\"filter\"></chr-column-filter>\r\n @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n @if(isComputedColumn){\r\n <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n }@else if(!isGroupBySource && groupBy() !== null){\r\n <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n <span class=\"toggle faded\">Inclure</span>\r\n <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let contextMenuItems = datarowContextMenuActions(row, index);\r\n <div #rowElement class=\"grid-row\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n @for (column of columns(); track column.columnName) {\r\n <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\"\r\n (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n @if($last){\r\n @if(actions().length > 0){\r\n <div class=\"actions-menu\">\r\n <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;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 .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;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 .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 .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.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(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;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);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{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 .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\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: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange", "isEditingChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu", "openOnClick"] }, { 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", "suggestions", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ColumnGroup, selector: "chr-column-group", inputs: ["isOpen", "by", "mode"], outputs: ["isOpenChange", "modeChange", "groupChange"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }] }); }
|
|
6506
|
+
], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], 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()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n @if(table()?.description){\r\n <span class=\"table-description\">{{ table()?.description }}</span>\r\n }\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowManageDistincValueFetching()){\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n </div>\r\n }\r\n @if (allowSync() && allowManageTrackingPersistence()) {\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n </div>\r\n }\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon 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 icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onAdd()\" title=\"Ajouter une ligne\">add</span>\r\n }\r\n @if(allowExport()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n }\r\n @if(totalItems() !== -1){\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"grid-container data-grid-wrapper\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n @for (column of columns(); track column.columnName) {\r\n @let isForeignKey = isForeignKeyColumn(column);\r\n @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n @let isComputedColumn = column.isGenerated;\r\n @let isUniqueColumn = isUniqueKeyColumn(column);\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n }\r\n </div>\r\n <div class=\"grid-body\">\r\n @if(enableVirtualization()){\r\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row.data, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKey){\r\n <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n 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 <div class=\"column-icons\">\r\n @if(isUniqueColumn){\r\n <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n }\r\n @if(isPrimaryKey || isForeignKey){\r\n <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n 'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n }\r\n @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n }\r\n </div>\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon\">arrow_downward</span>\r\n }\r\n }\r\n <div class=\"filter-group-controls\" #controls>\r\n <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n class=\"filter\"></chr-column-filter>\r\n @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n @if(isComputedColumn){\r\n <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n }@else if(!isGroupBySource && groupBy() !== null){\r\n <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n <span class=\"toggle faded\">Inclure</span>\r\n <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let contextMenuItems = datarowContextMenuActions(row, index);\r\n <div #rowElement class=\"grid-row\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n @for (column of columns(); track column.columnName) {\r\n <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\"\r\n (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n @if($last){\r\n @if(actions().length > 0){\r\n <div class=\"actions-menu\">\r\n <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;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 .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;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 .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 .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.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(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;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);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{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 .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\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: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange", "isEditingChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu", "openOnClick"] }, { 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", "suggestions", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ColumnGroup, selector: "chr-column-group", inputs: ["isOpen", "by", "mode"], outputs: ["isOpenChange", "modeChange", "groupChange"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }] }); }
|
|
6501
6507
|
}
|
|
6502
6508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DataGrid, decorators: [{
|
|
6503
6509
|
type: Component,
|
|
@@ -6523,7 +6529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
6523
6529
|
// provide: VIRTUAL_SCROLL_STRATEGY,
|
|
6524
6530
|
// useClass: DynamicSizeScrollStrategy,
|
|
6525
6531
|
// },
|
|
6526
|
-
], 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()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n @if(table()?.description){\r\n <span class=\"table-description\">{{ table()?.description }}</span>\r\n }\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowManageDistincValueFetching()){\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n </div>\r\n }\r\n @if (allowSync() && allowManageTrackingPersistence()) {\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n </div>\r\n }\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon 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 icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onAddRow.emit()\" title=\"Ajouter une ligne\">add</span>\r\n }\r\n @if(allowExport()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n }\r\n @if(totalItems() !== -1){\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"grid-container data-grid-wrapper\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n @for (column of columns(); track column.columnName) {\r\n @let isForeignKey = isForeignKeyColumn(column);\r\n @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n @let isComputedColumn = column.isGenerated;\r\n @let isUniqueColumn = isUniqueKeyColumn(column);\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n }\r\n </div>\r\n <div class=\"grid-body\">\r\n @if(enableVirtualization()){\r\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row.data, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKey){\r\n <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n 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 <div class=\"column-icons\">\r\n @if(isUniqueColumn){\r\n <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n }\r\n @if(isPrimaryKey || isForeignKey){\r\n <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n 'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n }\r\n @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n }\r\n </div>\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon\">arrow_downward</span>\r\n }\r\n }\r\n <div class=\"filter-group-controls\" #controls>\r\n <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n class=\"filter\"></chr-column-filter>\r\n @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n @if(isComputedColumn){\r\n <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n }@else if(!isGroupBySource && groupBy() !== null){\r\n <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n <span class=\"toggle faded\">Inclure</span>\r\n <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let contextMenuItems = datarowContextMenuActions(row, index);\r\n <div #rowElement class=\"grid-row\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n @for (column of columns(); track column.columnName) {\r\n <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\"\r\n (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n @if($last){\r\n @if(actions().length > 0){\r\n <div class=\"actions-menu\">\r\n <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;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 .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;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 .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 .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.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(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;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);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{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 .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\n"] }]
|
|
6532
|
+
], 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()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n @if(table()?.description){\r\n <span class=\"table-description\">{{ table()?.description }}</span>\r\n }\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowManageDistincValueFetching()){\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n </div>\r\n }\r\n @if (allowSync() && allowManageTrackingPersistence()) {\r\n <div>\r\n <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n </div>\r\n }\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon 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 icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onAdd()\" title=\"Ajouter une ligne\">add</span>\r\n }\r\n @if(allowExport()){\r\n <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n }\r\n @if(totalItems() !== -1){\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"grid-container data-grid-wrapper\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n @for (column of columns(); track column.columnName) {\r\n @let isForeignKey = isForeignKeyColumn(column);\r\n @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n @let isComputedColumn = column.isGenerated;\r\n @let isUniqueColumn = isUniqueKeyColumn(column);\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n }\r\n </div>\r\n <div class=\"grid-body\">\r\n @if(enableVirtualization()){\r\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row.data, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n </ng-container>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKey){\r\n <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n 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 <div class=\"column-icons\">\r\n @if(isUniqueColumn){\r\n <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n }\r\n @if(isPrimaryKey || isForeignKey){\r\n <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n 'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n }\r\n @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n }\r\n </div>\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon\">arrow_downward</span>\r\n }\r\n }\r\n <div class=\"filter-group-controls\" #controls>\r\n <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n class=\"filter\"></chr-column-filter>\r\n @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n @if(isComputedColumn){\r\n <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n }@else if(!isGroupBySource && groupBy() !== null){\r\n <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n <span class=\"toggle faded\">Inclure</span>\r\n <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let contextMenuItems = datarowContextMenuActions(row, index);\r\n <div #rowElement class=\"grid-row\"\r\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n @for (column of columns(); track column.columnName) {\r\n <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\"\r\n (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n @if($last){\r\n @if(actions().length > 0){\r\n <div class=\"actions-menu\">\r\n <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;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 .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;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 .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 .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.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(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;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);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{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 .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\n"] }]
|
|
6527
6533
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: false }] }, { type: i0.Output, args: ["tableChange"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], headerScroll: [{ type: i0.ViewChild, args: ['headerScroll', { isSignal: true }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }, { type: i0.Output, args: ["groupByChange"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], enableVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualization", required: false }] }], allowFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFiltering", required: false }] }], allowGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowGrouping", required: false }] }], allowInsert: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowInsert", required: false }] }], allowUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowUpdate", required: false }] }], allowDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDelete", required: false }] }], allowSync: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSync", required: false }] }], allowRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRefresh", required: false }] }], allowNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNavigation", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], allowManageTrackingPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManageTrackingPersistence", required: false }] }], allowManageDistincValueFetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManageDistincValueFetching", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], onExport: [{ type: i0.Output, args: ["onExport"] }], onSync: [{ type: i0.Output, args: ["onSync"] }], onRefresh: [{ type: i0.Output, args: ["onRefresh"] }], onAddRow: [{ type: i0.Output, args: ["onAddRow"] }], onDeleteRow: [{ type: i0.Output, args: ["onDeleteRow"] }], onForeignTableNavigate: [{ type: i0.Output, args: ["onForeignTableNavigate"] }], onNavigate: [{ type: i0.Output, args: ["onNavigate"] }], onFilterValueChange: [{ type: i0.Output, args: ["onFilterValueChange"] }], allowFetchDistinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFetchDistinctValues", required: false }] }, { type: i0.Output, args: ["allowFetchDistinctValuesChange"] }], crossRequestTrackingPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossRequestTrackingPersistence", required: false }] }, { type: i0.Output, args: ["crossRequestTrackingPersistenceChange"] }], modifiedCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiedCells", required: false }] }, { type: i0.Output, args: ["modifiedCellsChange"] }], modifiedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiedRows", required: false }] }, { type: i0.Output, args: ["modifiedRowsChange"] }], addedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedRows", required: false }] }, { type: i0.Output, args: ["addedRowsChange"] }], deletedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletedRows", required: false }] }, { type: i0.Output, args: ["deletedRowsChange"] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], trackByMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByMode", required: false }] }, { type: i0.Output, args: ["trackByModeChange"] }] } });
|
|
6528
6534
|
|
|
6529
6535
|
class MessageBanner {
|