npm - @elementar-rt/components - Versions diffs - 0.6.58 → 0.7.1 - Mend

@elementar-rt/components 0.6.58 → 0.7.1

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.

Files changed (414) hide show

package/fesm2022/elementar-rt-components-dashboard.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"elementar-rt-components-dashboard.mjs","sources":["../../../projects/components/dashboard/src/types.ts","../../../projects/components/dashboard/src/widget-skeleton/widget-skeleton.component.ts","../../../projects/components/dashboard/src/widget-skeleton/widget-skeleton.component.html","../../../projects/components/dashboard/src/dashboard/dashboard.component.ts","../../../projects/components/dashboard/src/dashboard/dashboard.component.html","../../../projects/components/dashboard/elementar-rt-components-dashboard.ts"],"sourcesContent":["import { InjectionToken, InputSignal } from '@angular/core';\n\nexport interface Dashboard {\n markWidgetAsLoaded(id: any): void;\n}\n\nexport interface WidgetComponent {\n id: InputSignal<any>;\n widget?: InputSignal<any>;\n}\n\nexport interface WidgetConfig {\n type: string;\n skeleton?: any;\n plain?: boolean;\n component: () => Promise<any>;\n}\n\nexport interface WidgetItem {\n id: any;\n type?: string;\n columns: number;\n children?: WidgetItem[];\n skeletonHeight?: string;\n height?: string;\n widget?: any; // widget data or nothing\n}\n\nexport const DASHBOARD = new InjectionToken('DASHBOARD');\n","import { Component } from '@angular/core';\nimport { SkeletonBlockComponent, SkeletonComponent, SkeletonLineComponent } from '@elementar-rt/components/skeleton';\n\n@Component({\n selector: 'emr-widget-skeleton',\n exportAs: 'emrWidgetSkeleton',\n imports: [\n SkeletonLineComponent,\n SkeletonBlockComponent,\n SkeletonComponent\n ],\n templateUrl: './widget-skeleton.component.html',\n styleUrl: './widget-skeleton.component.scss',\n host: {\n 'class': 'emr-widget-skeleton',\n }\n})\nexport class WidgetSkeletonComponent {\n\n}\n","<emr-skeleton direction=\"col\" class=\"h-full\">\n <emr-skeleton-line class=\"h-4 w-8/12\"/>\n <div class=\"grow min-h-12\">\n <emr-skeleton-block class=\"h-full\"/>\n </div>\n</emr-skeleton>\n","import {\n booleanAttribute,\n Component,\n forwardRef,\n input,\n OnInit,\n signal\n} from '@angular/core';\nimport {\n DASHBOARD, WidgetConfig, WidgetItem\n} from '../types';\nimport { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport { WidgetSkeletonComponent } from '../widget-skeleton/widget-skeleton.component';\n\n@Component({\n selector: 'emr-dashboard',\n exportAs: 'emrDashboard',\n imports: [\n NgComponentOutlet,\n AsyncPipe,\n WidgetSkeletonComponent,\n NgTemplateOutlet\n ],\n providers: [\n {\n provide: DASHBOARD,\n useExisting: forwardRef(() => DashboardComponent),\n }\n ],\n templateUrl: './dashboard.component.html',\n styleUrl: './dashboard.component.scss',\n host: {\n 'class': 'emr-dashboard'\n }\n})\nexport class DashboardComponent implements OnInit {\n protected _skeletonMap = new Map<string, any>();\n protected _componentsMap = new Map<string, any>();\n\n readonly configs = input<WidgetConfig[]>([]);\n readonly items = input<WidgetItem[]>([]);\n readonly plain = input(false, {\n transform: booleanAttribute\n });\n readonly waitWhenAllWidgetLoaded = input(false, {\n transform: booleanAttribute\n });\n\n protected _allLoaded = signal(false);\n protected _loadedWidgetsCount = signal(0);\n\n ngOnInit() {\n if (this.configs().length === 0) {\n return;\n }\n\n if (!this.waitWhenAllWidgetLoaded()) {\n this._allLoaded.set(true);\n }\n\n this.configs().forEach(config => {\n this._skeletonMap.set(config.type, config.skeleton);\n });\n this.configs().forEach(async (config, index: number) => {\n this._componentsMap.set(config.type, config.component());\n });\n }\n\n markWidgetAsLoaded(id: any) {\n this._loadedWidgetsCount.set(this._loadedWidgetsCount() + 1);\n this._allLoaded.set(this._loadedWidgetsCount() === this.items().length);\n }\n\n protected getWidgetConfig(type: string): WidgetConfig {\n return this.configs().find(config => config.type === type) as WidgetConfig;\n }\n\n protected getSkeletonComponent(type: string): any {\n return this._skeletonMap.get(type);\n }\n\n protected getWidgetComponent(type: string) {\n return this._componentsMap.get(type);\n }\n\n protected getWidgetInputs(widgetItem: WidgetItem): any {\n return widgetItem.widget ? { widget: widgetItem.widget, id: widgetItem.id } : { id: widgetItem.id };\n }\n}\n","<div class=\"dashgrid\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n @for (item of items; track $index) {\n <div class=\"dashgrid-item\"\n [style.--emr-dashgrid-item-colspan]=\"item.columns \|\| 12\">\n @if (item.children?.length > 0) {\n <div class=\"dashgrid\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n </div>\n } @else {\n <div class=\"widget\"\n [style.--emr-dashboard-widget-height]=\"item.height\"\n [class.plain]=\"getWidgetConfig(item.type).plain \|\| plain()\"\n [class.hidden]=\"!_allLoaded()\">\n <ng-container [ngComponentOutlet]=\"getWidgetComponent(item.type) \| async\"\n [ngComponentOutletInputs]=\"getWidgetInputs(item)\"/>\n </div>\n\n @if (!_allLoaded()) {\n <div class=\"widget skeleton\"\n [style.--emr-dashboard-widget-skeleton-min-height]=\"item.skeletonHeight \|\| item.height\">\n @let skeletonComponent = getSkeletonComponent(item.type);\n\n @if (skeletonComponent) {\n <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n } @else {\n <emr-widget-skeleton/>\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"elementar-rt-components-dashboard.mjs","sources":["../../../projects/components/dashboard/src/types.ts","../../../projects/components/dashboard/src/widget-skeleton/widget-skeleton.component.ts","../../../projects/components/dashboard/src/widget-skeleton/widget-skeleton.component.html","../../../projects/components/dashboard/src/dashboard/dashboard.component.ts","../../../projects/components/dashboard/src/dashboard/dashboard.component.html","../../../projects/components/dashboard/elementar-rt-components-dashboard.ts"],"sourcesContent":["import { InjectionToken, InputSignal } from '@angular/core';\n\nexport interface Dashboard {\n markWidgetAsLoaded(id: any): void;\n}\n\nexport interface WidgetComponent {\n id: InputSignal<any>;\n widget?: InputSignal<any>;\n}\n\nexport interface WidgetConfig {\n type: string;\n skeleton?: any;\n plain?: boolean;\n component: () => Promise<any>;\n}\n\nexport interface WidgetItem {\n id: any;\n type?: string;\n columns: number;\n children?: WidgetItem[];\n skeletonHeight?: string;\n height?: string;\n widget?: any; // widget data or nothing\n}\n\nexport const DASHBOARD = new InjectionToken('DASHBOARD');\n","import { Component } from '@angular/core';\nimport { SkeletonBlockComponent, SkeletonComponent, SkeletonLineComponent } from '@elementar-rt/components/skeleton';\n\n@Component({\n selector: 'emr-widget-skeleton',\n exportAs: 'emrWidgetSkeleton',\n imports: [\n SkeletonLineComponent,\n SkeletonBlockComponent,\n SkeletonComponent\n ],\n templateUrl: './widget-skeleton.component.html',\n styleUrl: './widget-skeleton.component.scss',\n host: {\n 'class': 'emr-widget-skeleton',\n }\n})\nexport class WidgetSkeletonComponent {\n\n}\n","<emr-skeleton direction=\"col\" class=\"h-full\">\n <emr-skeleton-line class=\"h-4 w-8/12\"/>\n <div class=\"grow min-h-12\">\n <emr-skeleton-block class=\"h-full\"/>\n </div>\n</emr-skeleton>\n","import {\n booleanAttribute,\n Component,\n forwardRef,\n input,\n OnInit,\n signal\n} from '@angular/core';\nimport {\n DASHBOARD, WidgetConfig, WidgetItem\n} from '../types';\nimport { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport { WidgetSkeletonComponent } from '../widget-skeleton/widget-skeleton.component';\n\n@Component({\n selector: 'emr-dashboard',\n exportAs: 'emrDashboard',\n imports: [\n NgComponentOutlet,\n AsyncPipe,\n WidgetSkeletonComponent,\n NgTemplateOutlet\n ],\n providers: [\n {\n provide: DASHBOARD,\n useExisting: forwardRef(() => DashboardComponent),\n }\n ],\n templateUrl: './dashboard.component.html',\n styleUrl: './dashboard.component.scss',\n host: {\n 'class': 'emr-dashboard'\n }\n})\nexport class DashboardComponent implements OnInit {\n protected _skeletonMap = new Map<string, any>();\n protected _componentsMap = new Map<string, any>();\n\n readonly configs = input<WidgetConfig[]>([]);\n readonly items = input<WidgetItem[]>([]);\n readonly plain = input(false, {\n transform: booleanAttribute\n });\n readonly waitWhenAllWidgetLoaded = input(false, {\n transform: booleanAttribute\n });\n\n protected _allLoaded = signal(false);\n protected _loadedWidgetsCount = signal(0);\n\n ngOnInit() {\n if (this.configs().length === 0) {\n return;\n }\n\n if (!this.waitWhenAllWidgetLoaded()) {\n this._allLoaded.set(true);\n }\n\n this.configs().forEach(config => {\n this._skeletonMap.set(config.type, config.skeleton);\n });\n this.configs().forEach(async (config, index: number) => {\n this._componentsMap.set(config.type, config.component());\n });\n }\n\n markWidgetAsLoaded(id: any) {\n this._loadedWidgetsCount.set(this._loadedWidgetsCount() + 1);\n this._allLoaded.set(this._loadedWidgetsCount() === this.items().length);\n }\n\n protected getWidgetConfig(type: string): WidgetConfig {\n return this.configs().find(config => config.type === type) as WidgetConfig;\n }\n\n protected getSkeletonComponent(type: string): any {\n return this._skeletonMap.get(type);\n }\n\n protected getWidgetComponent(type: string) {\n return this._componentsMap.get(type);\n }\n\n protected getWidgetInputs(widgetItem: WidgetItem): any {\n return widgetItem.widget ? { widget: widgetItem.widget, id: widgetItem.id } : { id: widgetItem.id };\n }\n}\n","<div class=\"dashgrid\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n @for (item of items; track $index) {\n <div class=\"dashgrid-item\"\n [style.--emr-dashgrid-item-colspan]=\"item.columns \|\| 12\">\n @if (item.children?.length > 0) {\n <div class=\"dashgrid\">\n <ng-container ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n </div>\n } @else {\n <div class=\"widget\"\n [style.--emr-dashboard-widget-height]=\"item.height\"\n [class.plain]=\"getWidgetConfig(item.type).plain \|\| plain()\"\n [class.hidden]=\"!_allLoaded()\">\n <ng-container [ngComponentOutlet]=\"getWidgetComponent(item.type) \| async\"\n [ngComponentOutletInputs]=\"getWidgetInputs(item)\"/>\n </div>\n\n @if (!_allLoaded()) {\n <div class=\"widget skeleton\"\n [style.--emr-dashboard-widget-skeleton-min-height]=\"item.skeletonHeight \|\| item.height\">\n @let skeletonComponent = getSkeletonComponent(item.type);\n\n @if (skeletonComponent) {\n <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n } @else {\n <emr-widget-skeleton/>\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-data-grid.mjs CHANGED Viewed

@@ -4,22 +4,22 @@ import { NgTemplateOutlet } from '@angular/common';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 class DataGridComponent {
-    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
-    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    rowHeight = input(48, ...(ngDevMode ? [{ debugName: "rowHeight" }] : []));
-    virtualScrollHeight = input(400, ...(ngDevMode ? [{ debugName: "virtualScrollHeight" }] : []));
-    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    multiSelect = input(false, ...(ngDevMode ? [{ debugName: "multiSelect", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rowHeight = input(48, ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    virtualScrollHeight = input(400, ...(ngDevMode ? [{ debugName: "virtualScrollHeight" }] : /* istanbul ignore next */ []));
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    multiSelect = input(false, { ...(ngDevMode ? { debugName: "multiSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     sortChange = output();
     cellEdit = output();
     rowSelect = output();
-    _sortField = signal('', ...(ngDevMode ? [{ debugName: "_sortField" }] : []));
-    _sortDir = signal('asc', ...(ngDevMode ? [{ debugName: "_sortDir" }] : []));
-    _selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "_selectedRows" }] : []));
-    _editingCell = signal(null, ...(ngDevMode ? [{ debugName: "_editingCell" }] : []));
-    _editValue = signal('', ...(ngDevMode ? [{ debugName: "_editValue" }] : []));
+    _sortField = signal('', ...(ngDevMode ? [{ debugName: "_sortField" }] : /* istanbul ignore next */ []));
+    _sortDir = signal('asc', ...(ngDevMode ? [{ debugName: "_sortDir" }] : /* istanbul ignore next */ []));
+    _selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "_selectedRows" }] : /* istanbul ignore next */ []));
+    _editingCell = signal(null, ...(ngDevMode ? [{ debugName: "_editingCell" }] : /* istanbul ignore next */ []));
+    _editValue = signal('', ...(ngDevMode ? [{ debugName: "_editValue" }] : /* istanbul ignore next */ []));
     _sortedRows = computed(() => {
         const field = this._sortField();
         const dir = this._sortDir();
@@ -34,7 +34,7 @@ class DataGridComponent {
                 : String(av).localeCompare(String(bv));
             return dir === 'asc' ? cmp : -cmp;
         });
-    }, ...(ngDevMode ? [{ debugName: "_sortedRows" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_sortedRows" }] : /* istanbul ignore next */ []));
     _sort(col) {
         if (!col.sortable)
             return;
@@ -51,7 +51,7 @@ class DataGridComponent {
     _allSelected = computed(() => {
         const rows = this._sortedRows();
         return rows.length > 0 && rows.every(r => this._selectedRows().has(r));
-    }, ...(ngDevMode ? [{ debugName: "_allSelected" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_allSelected" }] : /* istanbul ignore next */ []));
     _toggleRow(row) {
         if (!this.selectable())
             return;
@@ -103,13 +103,13 @@ class DataGridComponent {
         const cols = this.columns();
         const check = this.selectable() ? '--spacing(10) ' : '';
         return check + cols.map(c => this._colWidth(c)).join(' ');
-    }, ...(ngDevMode ? [{ debugName: "_gridTemplateColumns" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DataGridComponent, isStandalone: true, selector: "emr-data-grid", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollHeight: { classPropertyName: "virtualScrollHeight", publicName: "virtualScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", cellEdit: "cellEdit", rowSelect: "rowSelect" }, ngImport: i0, template: "<div class=\"grid-container\" [style.--grid-cols]=\"_gridTemplateColumns()\">\n  <!-- Header -->\n  <div class=\"grid-header\">\n    @if (selectable()) {\n      <div class=\"grid-cell grid-cell--check\">\n        @if (multiSelect()) {\n          <input type=\"checkbox\" [checked]=\"_allSelected()\" (change)=\"_toggleAll()\" />\n        }\n      </div>\n    }\n    @for (col of columns(); track col.field) {\n      <div\n        class=\"grid-cell grid-cell--header\"\n        [attr.data-sortable]=\"col.sortable || null\"\n        [attr.data-sorted]=\"_sortField() === col.field || null\"\n        [attr.data-sort-dir]=\"_sortField() === col.field ? _sortDir() : null\"\n        (click)=\"_sort(col)\"\n      >\n        <span>{{ col.header }}</span>\n        @if (col.sortable) {\n          <span class=\"sort-icon\">\n            @if (_sortField() === col.field && _sortDir() === 'asc') { \u2191 }\n            @else if (_sortField() === col.field && _sortDir() === 'desc') { \u2193 }\n            @else { \u2195 }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Virtual scroll body -->\n  @if (loading()) {\n    <div class=\"grid-loading\">\n      <div class=\"loading-spinner\"></div>\n      <span>Loading\u2026</span>\n    </div>\n  } @else if (_sortedRows().length === 0) {\n    <div class=\"grid-empty\">{{ emptyMessage() }}</div>\n  } @else {\n    <cdk-virtual-scroll-viewport\n      class=\"grid-body\"\n      [itemSize]=\"rowHeight()\"\n      [style.height.px]=\"virtualScrollHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of _sortedRows(); let i = index\"\n        class=\"grid-row\"\n        [attr.data-selected]=\"_isSelected(row) || null\"\n        (click)=\"_toggleRow(row)\"\n      >\n        @if (selectable()) {\n          <div class=\"grid-cell grid-cell--check\">\n            <input type=\"checkbox\" [checked]=\"_isSelected(row)\" (click)=\"$event.stopPropagation(); _toggleRow(row)\" />\n          </div>\n        }\n        @for (col of columns(); track col.field) {\n          <div\n            class=\"grid-cell\"\n            [attr.data-editable]=\"col.editable || null\"\n            (dblclick)=\"_startEdit(i, col, _getCellValue(row, col))\"\n          >\n            @if (_isEditing(i, col.field)) {\n              <input\n                class=\"cell-input\"\n                [value]=\"_editValue()\"\n                (input)=\"_editValue.set($any($event.target).value)\"\n                (blur)=\"_commitEdit(row, col)\"\n                (keydown.enter)=\"_commitEdit(row, col)\"\n                (keydown.escape)=\"_editingCell.set(null)\"\n                autofocus\n              />\n            } @else if (col.cellTemplate) {\n              <ng-container *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row, value: _getCellValue(row, col) }\"></ng-container>\n            } @else {\n              {{ _getCellValue(row, col) }}\n            }\n          </div>\n        }\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;border:1px solid var(--color-outline-variant);border-radius:.75rem;background:var(--color-surface)}.grid-container{--grid-cols: 1fr}.grid-header{display:grid;grid-template-columns:var(--grid-cols);background:var(--color-surface-container);border-bottom:2px solid var(--color-outline-variant);position:sticky;top:0;z-index:1}.grid-row{display:grid;grid-template-columns:var(--grid-cols);border-bottom:1px solid var(--color-outline-variant);transition:background .1s ease}.grid-row:hover{background:var(--color-surface-container)}.grid-row[data-selected]{background:var(--color-primary-container)}.grid-row:last-child{border-bottom:none}.grid-cell{display:flex;align-items:center;padding:0 calc(var(--spacing, .25rem) * 3);font-size:.875rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.grid-cell--header{font-weight:600;font-size:.75rem;color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.05em;gap:var(--spacing, .25rem);-webkit-user-select:none;user-select:none}.grid-cell--header[data-sortable]{cursor:pointer}.grid-cell--header[data-sortable]:hover{color:var(--color-on-surface)}.grid-cell--header[data-sorted]{color:var(--color-primary)}.grid-cell--check{justify-content:center;padding:0}.grid-cell[data-editable]{cursor:cell}.sort-icon{font-size:.75rem;opacity:.7}.cell-input{width:100%;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:.25rem;padding:calc(var(--spacing, .25rem) * .5) var(--spacing, .25rem);font-size:.875rem;outline:none;color:var(--color-on-surface)}.grid-body{display:block}.grid-loading,.grid-empty{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 10);color:var(--color-on-surface-variant);font-size:.875rem}.loading-spinner{width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);border:2px solid var(--color-outline-variant);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, ...(ngDevMode ? [{ debugName: "_gridTemplateColumns" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DataGridComponent, isStandalone: true, selector: "emr-data-grid", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollHeight: { classPropertyName: "virtualScrollHeight", publicName: "virtualScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", cellEdit: "cellEdit", rowSelect: "rowSelect" }, ngImport: i0, template: "<div class=\"grid-container\" [style.--grid-cols]=\"_gridTemplateColumns()\">\n  <!-- Header -->\n  <div class=\"grid-header\">\n    @if (selectable()) {\n      <div class=\"grid-cell grid-cell--check\">\n        @if (multiSelect()) {\n          <input type=\"checkbox\" [checked]=\"_allSelected()\" (change)=\"_toggleAll()\" />\n        }\n      </div>\n    }\n    @for (col of columns(); track col.field) {\n      <div\n        class=\"grid-cell grid-cell--header\"\n        [attr.data-sortable]=\"col.sortable || null\"\n        [attr.data-sorted]=\"_sortField() === col.field || null\"\n        [attr.data-sort-dir]=\"_sortField() === col.field ? _sortDir() : null\"\n        (click)=\"_sort(col)\"\n      >\n        <span>{{ col.header }}</span>\n        @if (col.sortable) {\n          <span class=\"sort-icon\">\n            @if (_sortField() === col.field && _sortDir() === 'asc') { \u2191 }\n            @else if (_sortField() === col.field && _sortDir() === 'desc') { \u2193 }\n            @else { \u2195 }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Virtual scroll body -->\n  @if (loading()) {\n    <div class=\"grid-loading\">\n      <div class=\"loading-spinner\"></div>\n      <span>Loading\u2026</span>\n    </div>\n  } @else if (_sortedRows().length === 0) {\n    <div class=\"grid-empty\">{{ emptyMessage() }}</div>\n  } @else {\n    <cdk-virtual-scroll-viewport\n      class=\"grid-body\"\n      [itemSize]=\"rowHeight()\"\n      [style.height.px]=\"virtualScrollHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of _sortedRows(); let i = index\"\n        class=\"grid-row\"\n        [attr.data-selected]=\"_isSelected(row) || null\"\n        (click)=\"_toggleRow(row)\"\n      >\n        @if (selectable()) {\n          <div class=\"grid-cell grid-cell--check\">\n            <input type=\"checkbox\" [checked]=\"_isSelected(row)\" (click)=\"$event.stopPropagation(); _toggleRow(row)\" />\n          </div>\n        }\n        @for (col of columns(); track col.field) {\n          <div\n            class=\"grid-cell\"\n            [attr.data-editable]=\"col.editable || null\"\n            (dblclick)=\"_startEdit(i, col, _getCellValue(row, col))\"\n          >\n            @if (_isEditing(i, col.field)) {\n              <input\n                class=\"cell-input\"\n                [value]=\"_editValue()\"\n                (input)=\"_editValue.set($any($event.target).value)\"\n                (blur)=\"_commitEdit(row, col)\"\n                (keydown.enter)=\"_commitEdit(row, col)\"\n                (keydown.escape)=\"_editingCell.set(null)\"\n                autofocus\n              />\n            } @else if (col.cellTemplate) {\n              <ng-container *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row, value: _getCellValue(row, col) }\"></ng-container>\n            } @else {\n              {{ _getCellValue(row, col) }}\n            }\n          </div>\n        }\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;border:1px solid var(--color-outline-variant);border-radius:.75rem;background:var(--color-surface)}.grid-container{--grid-cols: 1fr}.grid-header{display:grid;grid-template-columns:var(--grid-cols);background:var(--color-surface-container);border-bottom:2px solid var(--color-outline-variant);position:sticky;top:0;z-index:1}.grid-row{display:grid;grid-template-columns:var(--grid-cols);border-bottom:1px solid var(--color-outline-variant);transition:background .1s ease}.grid-row:hover{background:var(--color-surface-container)}.grid-row[data-selected]{background:var(--color-primary-container)}.grid-row:last-child{border-bottom:none}.grid-cell{display:flex;align-items:center;padding:0 calc(var(--spacing, .25rem) * 3);font-size:.875rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.grid-cell--header{font-weight:600;font-size:.75rem;color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.05em;gap:var(--spacing, .25rem);-webkit-user-select:none;user-select:none}.grid-cell--header[data-sortable]{cursor:pointer}.grid-cell--header[data-sortable]:hover{color:var(--color-on-surface)}.grid-cell--header[data-sorted]{color:var(--color-primary)}.grid-cell--check{justify-content:center;padding:0}.grid-cell[data-editable]{cursor:cell}.sort-icon{font-size:.75rem;opacity:.7}.cell-input{width:100%;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:.25rem;padding:calc(var(--spacing, .25rem) * .5) var(--spacing, .25rem);font-size:.875rem;outline:none;color:var(--color-on-surface)}.grid-body{display:block}.grid-loading,.grid-empty{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 10);color:var(--color-on-surface-variant);font-size:.875rem}.loading-spinner{width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);border:2px solid var(--color-outline-variant);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'emr-data-grid', standalone: true, imports: [NgTemplateOutlet, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid-container\" [style.--grid-cols]=\"_gridTemplateColumns()\">\n  <!-- Header -->\n  <div class=\"grid-header\">\n    @if (selectable()) {\n      <div class=\"grid-cell grid-cell--check\">\n        @if (multiSelect()) {\n          <input type=\"checkbox\" [checked]=\"_allSelected()\" (change)=\"_toggleAll()\" />\n        }\n      </div>\n    }\n    @for (col of columns(); track col.field) {\n      <div\n        class=\"grid-cell grid-cell--header\"\n        [attr.data-sortable]=\"col.sortable || null\"\n        [attr.data-sorted]=\"_sortField() === col.field || null\"\n        [attr.data-sort-dir]=\"_sortField() === col.field ? _sortDir() : null\"\n        (click)=\"_sort(col)\"\n      >\n        <span>{{ col.header }}</span>\n        @if (col.sortable) {\n          <span class=\"sort-icon\">\n            @if (_sortField() === col.field && _sortDir() === 'asc') { \u2191 }\n            @else if (_sortField() === col.field && _sortDir() === 'desc') { \u2193 }\n            @else { \u2195 }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Virtual scroll body -->\n  @if (loading()) {\n    <div class=\"grid-loading\">\n      <div class=\"loading-spinner\"></div>\n      <span>Loading\u2026</span>\n    </div>\n  } @else if (_sortedRows().length === 0) {\n    <div class=\"grid-empty\">{{ emptyMessage() }}</div>\n  } @else {\n    <cdk-virtual-scroll-viewport\n      class=\"grid-body\"\n      [itemSize]=\"rowHeight()\"\n      [style.height.px]=\"virtualScrollHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of _sortedRows(); let i = index\"\n        class=\"grid-row\"\n        [attr.data-selected]=\"_isSelected(row) || null\"\n        (click)=\"_toggleRow(row)\"\n      >\n        @if (selectable()) {\n          <div class=\"grid-cell grid-cell--check\">\n            <input type=\"checkbox\" [checked]=\"_isSelected(row)\" (click)=\"$event.stopPropagation(); _toggleRow(row)\" />\n          </div>\n        }\n        @for (col of columns(); track col.field) {\n          <div\n            class=\"grid-cell\"\n            [attr.data-editable]=\"col.editable || null\"\n            (dblclick)=\"_startEdit(i, col, _getCellValue(row, col))\"\n          >\n            @if (_isEditing(i, col.field)) {\n              <input\n                class=\"cell-input\"\n                [value]=\"_editValue()\"\n                (input)=\"_editValue.set($any($event.target).value)\"\n                (blur)=\"_commitEdit(row, col)\"\n                (keydown.enter)=\"_commitEdit(row, col)\"\n                (keydown.escape)=\"_editingCell.set(null)\"\n                autofocus\n              />\n            } @else if (col.cellTemplate) {\n              <ng-container *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row, value: _getCellValue(row, col) }\"></ng-container>\n            } @else {\n              {{ _getCellValue(row, col) }}\n            }\n          </div>\n        }\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;border:1px solid var(--color-outline-variant);border-radius:.75rem;background:var(--color-surface)}.grid-container{--grid-cols: 1fr}.grid-header{display:grid;grid-template-columns:var(--grid-cols);background:var(--color-surface-container);border-bottom:2px solid var(--color-outline-variant);position:sticky;top:0;z-index:1}.grid-row{display:grid;grid-template-columns:var(--grid-cols);border-bottom:1px solid var(--color-outline-variant);transition:background .1s ease}.grid-row:hover{background:var(--color-surface-container)}.grid-row[data-selected]{background:var(--color-primary-container)}.grid-row:last-child{border-bottom:none}.grid-cell{display:flex;align-items:center;padding:0 calc(var(--spacing, .25rem) * 3);font-size:.875rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.grid-cell--header{font-weight:600;font-size:.75rem;color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.05em;gap:var(--spacing, .25rem);-webkit-user-select:none;user-select:none}.grid-cell--header[data-sortable]{cursor:pointer}.grid-cell--header[data-sortable]:hover{color:var(--color-on-surface)}.grid-cell--header[data-sorted]{color:var(--color-primary)}.grid-cell--check{justify-content:center;padding:0}.grid-cell[data-editable]{cursor:cell}.sort-icon{font-size:.75rem;opacity:.7}.cell-input{width:100%;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:.25rem;padding:calc(var(--spacing, .25rem) * .5) var(--spacing, .25rem);font-size:.875rem;outline:none;color:var(--color-on-surface)}.grid-body{display:block}.grid-loading,.grid-empty{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 10);color:var(--color-on-surface-variant);font-size:.875rem}.loading-spinner{width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);border:2px solid var(--color-outline-variant);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'emr-data-grid', standalone: true, imports: [NgTemplateOutlet, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid-container\" [style.--grid-cols]=\"_gridTemplateColumns()\">\n  <!-- Header -->\n  <div class=\"grid-header\">\n    @if (selectable()) {\n      <div class=\"grid-cell grid-cell--check\">\n        @if (multiSelect()) {\n          <input type=\"checkbox\" [checked]=\"_allSelected()\" (change)=\"_toggleAll()\" />\n        }\n      </div>\n    }\n    @for (col of columns(); track col.field) {\n      <div\n        class=\"grid-cell grid-cell--header\"\n        [attr.data-sortable]=\"col.sortable || null\"\n        [attr.data-sorted]=\"_sortField() === col.field || null\"\n        [attr.data-sort-dir]=\"_sortField() === col.field ? _sortDir() : null\"\n        (click)=\"_sort(col)\"\n      >\n        <span>{{ col.header }}</span>\n        @if (col.sortable) {\n          <span class=\"sort-icon\">\n            @if (_sortField() === col.field && _sortDir() === 'asc') { \u2191 }\n            @else if (_sortField() === col.field && _sortDir() === 'desc') { \u2193 }\n            @else { \u2195 }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Virtual scroll body -->\n  @if (loading()) {\n    <div class=\"grid-loading\">\n      <div class=\"loading-spinner\"></div>\n      <span>Loading\u2026</span>\n    </div>\n  } @else if (_sortedRows().length === 0) {\n    <div class=\"grid-empty\">{{ emptyMessage() }}</div>\n  } @else {\n    <cdk-virtual-scroll-viewport\n      class=\"grid-body\"\n      [itemSize]=\"rowHeight()\"\n      [style.height.px]=\"virtualScrollHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of _sortedRows(); let i = index\"\n        class=\"grid-row\"\n        [attr.data-selected]=\"_isSelected(row) || null\"\n        (click)=\"_toggleRow(row)\"\n      >\n        @if (selectable()) {\n          <div class=\"grid-cell grid-cell--check\">\n            <input type=\"checkbox\" [checked]=\"_isSelected(row)\" (click)=\"$event.stopPropagation(); _toggleRow(row)\" />\n          </div>\n        }\n        @for (col of columns(); track col.field) {\n          <div\n            class=\"grid-cell\"\n            [attr.data-editable]=\"col.editable || null\"\n            (dblclick)=\"_startEdit(i, col, _getCellValue(row, col))\"\n          >\n            @if (_isEditing(i, col.field)) {\n              <input\n                class=\"cell-input\"\n                [value]=\"_editValue()\"\n                (input)=\"_editValue.set($any($event.target).value)\"\n                (blur)=\"_commitEdit(row, col)\"\n                (keydown.enter)=\"_commitEdit(row, col)\"\n                (keydown.escape)=\"_editingCell.set(null)\"\n                autofocus\n              />\n            } @else if (col.cellTemplate) {\n              <ng-container *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row, value: _getCellValue(row, col) }\"></ng-container>\n            } @else {\n              {{ _getCellValue(row, col) }}\n            }\n          </div>\n        }\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;border:1px solid var(--color-outline-variant);border-radius:.75rem;background:var(--color-surface)}.grid-container{--grid-cols: 1fr}.grid-header{display:grid;grid-template-columns:var(--grid-cols);background:var(--color-surface-container);border-bottom:2px solid var(--color-outline-variant);position:sticky;top:0;z-index:1}.grid-row{display:grid;grid-template-columns:var(--grid-cols);border-bottom:1px solid var(--color-outline-variant);transition:background .1s ease}.grid-row:hover{background:var(--color-surface-container)}.grid-row[data-selected]{background:var(--color-primary-container)}.grid-row:last-child{border-bottom:none}.grid-cell{display:flex;align-items:center;padding:0 calc(var(--spacing, .25rem) * 3);font-size:.875rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.grid-cell--header{font-weight:600;font-size:.75rem;color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.05em;gap:var(--spacing, .25rem);-webkit-user-select:none;user-select:none}.grid-cell--header[data-sortable]{cursor:pointer}.grid-cell--header[data-sortable]:hover{color:var(--color-on-surface)}.grid-cell--header[data-sorted]{color:var(--color-primary)}.grid-cell--check{justify-content:center;padding:0}.grid-cell[data-editable]{cursor:cell}.sort-icon{font-size:.75rem;opacity:.7}.cell-input{width:100%;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:.25rem;padding:calc(var(--spacing, .25rem) * .5) var(--spacing, .25rem);font-size:.875rem;outline:none;color:var(--color-on-surface)}.grid-body{display:block}.grid-loading,.grid-empty{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 10);color:var(--color-on-surface-variant);font-size:.875rem}.loading-spinner{width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);border:2px solid var(--color-outline-variant);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], virtualScrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollHeight", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }] } });
 /**

package/fesm2022/elementar-rt-components-data-grid.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"elementar-rt-components-data-grid.mjs","sources":["../../../projects/components/data-grid/src/data-grid/data-grid.component.ts","../../../projects/components/data-grid/src/data-grid/data-grid.component.html","../../../projects/components/data-grid/elementar-rt-components-data-grid.ts"],"sourcesContent":["import {\n Component, input, output, signal, computed,\n ChangeDetectionStrategy, booleanAttribute, contentChildren, TemplateRef\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';\n\nexport interface DataGridColumn<T = unknown> {\n field: keyof T & string;\n header: string;\n width?: number;\n minWidth?: number;\n sortable?: boolean;\n editable?: boolean;\n frozen?: boolean;\n cellTemplate?: TemplateRef<{ $implicit: T; value: unknown }>;\n}\n\nexport interface SortEvent {\n field: string;\n direction: 'asc' \| 'desc';\n}\n\nexport interface CellEditEvent<T = unknown> {\n row: T;\n field: string;\n oldValue: unknown;\n newValue: unknown;\n}\n\n@Component({\n selector: 'emr-data-grid',\n standalone: true,\n imports: [NgTemplateOutlet, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf],\n templateUrl: './data-grid.component.html',\n styleUrl: './data-grid.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataGridComponent<T extends Record<string, unknown> = Record<string, unknown>> {\n rows = input<T[]>([]);\n columns = input<DataGridColumn<T>[]>([]);\n rowHeight = input(48);\n virtualScrollHeight = input(400);\n selectable = input(false, { transform: booleanAttribute });\n multiSelect = input(false, { transform: booleanAttribute });\n loading = input(false, { transform: booleanAttribute });\n emptyMessage = input('No data available');\n\n sortChange = output<SortEvent>();\n cellEdit = output<CellEditEvent<T>>();\n rowSelect = output<T[]>();\n\n protected _sortField = signal('');\n protected _sortDir = signal<'asc' \| 'desc'>('asc');\n protected _selectedRows = signal<Set<T>>(new Set());\n protected _editingCell = signal<{ rowIdx: number; field: string } \| null>(null);\n protected _editValue = signal<unknown>('');\n\n protected _sortedRows = computed(() => {\n const field = this._sortField();\n const dir = this._sortDir();\n const data = [...this.rows()];\n if (!field) return data;\n return data.sort((a, b) => {\n const av = a[field];\n const bv = b[field];\n const cmp = typeof av === 'number' && typeof bv === 'number'\n ? av - bv\n : String(av).localeCompare(String(bv));\n return dir === 'asc' ? cmp : -cmp;\n });\n });\n\n protected _sort(col: DataGridColumn<T>): void {\n if (!col.sortable) return;\n if (this._sortField() === col.field) {\n this._sortDir.set(this._sortDir() === 'asc' ? 'desc' : 'asc');\n } else {\n this._sortField.set(col.field);\n this._sortDir.set('asc');\n }\n this.sortChange.emit({ field: this._sortField(), direction: this._sortDir() });\n }\n\n protected _isSelected(row: T): boolean { return this._selectedRows().has(row); }\n\n protected _allSelected = computed(() => {\n const rows = this._sortedRows();\n return rows.length > 0 && rows.every(r => this._selectedRows().has(r));\n });\n\n protected _toggleRow(row: T): void {\n if (!this.selectable()) return;\n const sel = new Set(this._selectedRows());\n if (sel.has(row)) {\n sel.delete(row);\n } else {\n if (!this.multiSelect()) sel.clear();\n sel.add(row);\n }\n this._selectedRows.set(sel);\n this.rowSelect.emit([...sel]);\n }\n\n protected _toggleAll(): void {\n const rows = this._sortedRows();\n const sel = this._allSelected() ? new Set<T>() : new Set(rows);\n this._selectedRows.set(sel);\n this.rowSelect.emit([...sel]);\n }\n\n protected _startEdit(rowIdx: number, col: DataGridColumn<T>, value: unknown): void {\n if (!col.editable) return;\n this._editingCell.set({ rowIdx, field: col.field });\n this._editValue.set(value);\n }\n\n protected _commitEdit(row: T, col: DataGridColumn<T>): void {\n const editing = this._editingCell();\n if (!editing) return;\n const oldValue = row[col.field];\n const newValue = this._editValue();\n (row as Record<string, unknown>)[col.field] = newValue;\n this.cellEdit.emit({ row, field: col.field, oldValue, newValue });\n this._editingCell.set(null);\n }\n\n protected _isEditing(rowIdx: number, field: string): boolean {\n const e = this._editingCell();\n return !!e && e.rowIdx === rowIdx && e.field === field;\n }\n\n protected _getCellValue(row: T, col: DataGridColumn<T>): unknown {\n return row[col.field];\n }\n\n protected _colWidth(col: DataGridColumn<T>): string {\n return col.width ? `${col.width}px` : col.minWidth ? `minmax(${col.minWidth}px, 1fr)` : '1fr';\n }\n\n protected _gridTemplateColumns = computed(() => {\n const cols = this.columns();\n const check = this.selectable() ? '--spacing(10) ' : '';\n return check + cols.map(c => this._colWidth(c)).join(' ');\n });\n}\n","<div class=\"grid-container\" [style.--grid-cols]=\"_gridTemplateColumns()\">\n <!-- Header -->\n <div class=\"grid-header\">\n @if (selectable()) {\n <div class=\"grid-cell grid-cell--check\">\n @if (multiSelect()) {\n <input type=\"checkbox\" [checked]=\"_allSelected()\" (change)=\"_toggleAll()\" />\n }\n </div>\n }\n @for (col of columns(); track col.field) {\n <div\n class=\"grid-cell grid-cell--header\"\n [attr.data-sortable]=\"col.sortable \|\| null\"\n [attr.data-sorted]=\"_sortField() === col.field \|\| null\"\n [attr.data-sort-dir]=\"_sortField() === col.field ? _sortDir() : null\"\n (click)=\"_sort(col)\"\n >\n <span>{{ col.header }}</span>\n @if (col.sortable) {\n <span class=\"sort-icon\">\n @if (_sortField() === col.field && _sortDir() === 'asc') { ↑ }\n @else if (_sortField() === col.field && _sortDir() === 'desc') { ↓ }\n @else { ↕ }\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Virtual scroll body -->\n @if (loading()) {\n <div class=\"grid-loading\">\n <div class=\"loading-spinner\"></div>\n <span>Loading…</span>\n </div>\n } @else if (_sortedRows().length === 0) {\n <div class=\"grid-empty\">{{ emptyMessage() }}</div>\n } @else {\n <cdk-virtual-scroll-viewport\n class=\"grid-body\"\n [itemSize]=\"rowHeight()\"\n [style.height.px]=\"virtualScrollHeight()\"\n >\n <div\n cdkVirtualFor=\"let row of _sortedRows(); let i = index\"\n class=\"grid-row\"\n [attr.data-selected]=\"_isSelected(row) \|\| null\"\n (click)=\"_toggleRow(row)\"\n >\n @if (selectable()) {\n <div class=\"grid-cell grid-cell--check\">\n <input type=\"checkbox\" [checked]=\"_isSelected(row)\" (click)=\"$event.stopPropagation(); _toggleRow(row)\" />\n </div>\n }\n @for (col of columns(); track col.field) {\n <div\n class=\"grid-cell\"\n [attr.data-editable]=\"col.editable \|\| null\"\n (dblclick)=\"_startEdit(i, col, _getCellValue(row, col))\"\n >\n @if (_isEditing(i, col.field)) {\n <input\n class=\"cell-input\"\n [value]=\"_editValue()\"\n (input)=\"_editValue.set($any($event.target).value)\"\n (blur)=\"_commitEdit(row, col)\"\n (keydown.enter)=\"_commitEdit(row, col)\"\n (keydown.escape)=\"_editingCell.set(null)\"\n autofocus\n />\n } @else if (col.cellTemplate) {\n <ng-container ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row, value: _getCellValue(row, col) }\"></ng-container>\n } @else {\n {{ _getCellValue(row, col) }}\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n }\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"elementar-rt-components-data-grid.mjs","sources":["../../../projects/components/data-grid/src/data-grid/data-grid.component.ts","../../../projects/components/data-grid/src/data-grid/data-grid.component.html","../../../projects/components/data-grid/elementar-rt-components-data-grid.ts"],"sourcesContent":["import {\n Component, input, output, signal, computed,\n ChangeDetectionStrategy, booleanAttribute, contentChildren, TemplateRef\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';\n\nexport interface DataGridColumn<T = unknown> {\n field: keyof T & string;\n header: string;\n width?: number;\n minWidth?: number;\n sortable?: boolean;\n editable?: boolean;\n frozen?: boolean;\n cellTemplate?: TemplateRef<{ $implicit: T; value: unknown }>;\n}\n\nexport interface SortEvent {\n field: string;\n direction: 'asc' \| 'desc';\n}\n\nexport interface CellEditEvent<T = unknown> {\n row: T;\n field: string;\n oldValue: unknown;\n newValue: unknown;\n}\n\n@Component({\n selector: 'emr-data-grid',\n standalone: true,\n imports: [NgTemplateOutlet, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf],\n templateUrl: './data-grid.component.html',\n styleUrl: './data-grid.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataGridComponent<T extends Record<string, unknown> = Record<string, unknown>> {\n rows = input<T[]>([]);\n columns = input<DataGridColumn<T>[]>([]);\n rowHeight = input(48);\n virtualScrollHeight = input(400);\n selectable = input(false, { transform: booleanAttribute });\n multiSelect = input(false, { transform: booleanAttribute });\n loading = input(false, { transform: booleanAttribute });\n emptyMessage = input('No data available');\n\n sortChange = output<SortEvent>();\n cellEdit = output<CellEditEvent<T>>();\n rowSelect = output<T[]>();\n\n protected _sortField = signal('');\n protected _sortDir = signal<'asc' \| 'desc'>('asc');\n protected _selectedRows = signal<Set<T>>(new Set());\n protected _editingCell = signal<{ rowIdx: number; field: string } \| null>(null);\n protected _editValue = signal<unknown>('');\n\n protected _sortedRows = computed(() => {\n const field = this._sortField();\n const dir = this._sortDir();\n const data = [...this.rows()];\n if (!field) return data;\n return data.sort((a, b) => {\n const av = a[field];\n const bv = b[field];\n const cmp = typeof av === 'number' && typeof bv === 'number'\n ? av - bv\n : String(av).localeCompare(String(bv));\n return dir === 'asc' ? cmp : -cmp;\n });\n });\n\n protected _sort(col: DataGridColumn<T>): void {\n if (!col.sortable) return;\n if (this._sortField() === col.field) {\n this._sortDir.set(this._sortDir() === 'asc' ? 'desc' : 'asc');\n } else {\n this._sortField.set(col.field);\n this._sortDir.set('asc');\n }\n this.sortChange.emit({ field: this._sortField(), direction: this._sortDir() });\n }\n\n protected _isSelected(row: T): boolean { return this._selectedRows().has(row); }\n\n protected _allSelected = computed(() => {\n const rows = this._sortedRows();\n return rows.length > 0 && rows.every(r => this._selectedRows().has(r));\n });\n\n protected _toggleRow(row: T): void {\n if (!this.selectable()) return;\n const sel = new Set(this._selectedRows());\n if (sel.has(row)) {\n sel.delete(row);\n } else {\n if (!this.multiSelect()) sel.clear();\n sel.add(row);\n }\n this._selectedRows.set(sel);\n this.rowSelect.emit([...sel]);\n }\n\n protected _toggleAll(): void {\n const rows = this._sortedRows();\n const sel = this._allSelected() ? new Set<T>() : new Set(rows);\n this._selectedRows.set(sel);\n this.rowSelect.emit([...sel]);\n }\n\n protected _startEdit(rowIdx: number, col: DataGridColumn<T>, value: unknown): void {\n if (!col.editable) return;\n this._editingCell.set({ rowIdx, field: col.field });\n this._editValue.set(value);\n }\n\n protected _commitEdit(row: T, col: DataGridColumn<T>): void {\n const editing = this._editingCell();\n if (!editing) return;\n const oldValue = row[col.field];\n const newValue = this._editValue();\n (row as Record<string, unknown>)[col.field] = newValue;\n this.cellEdit.emit({ row, field: col.field, oldValue, newValue });\n this._editingCell.set(null);\n }\n\n protected _isEditing(rowIdx: number, field: string): boolean {\n const e = this._editingCell();\n return !!e && e.rowIdx === rowIdx && e.field === field;\n }\n\n protected _getCellValue(row: T, col: DataGridColumn<T>): unknown {\n return row[col.field];\n }\n\n protected _colWidth(col: DataGridColumn<T>): string {\n return col.width ? `${col.width}px` : col.minWidth ? `minmax(${col.minWidth}px, 1fr)` : '1fr';\n }\n\n protected _gridTemplateColumns = computed(() => {\n const cols = this.columns();\n const check = this.selectable() ? '--spacing(10) ' : '';\n return check + cols.map(c => this._colWidth(c)).join(' ');\n });\n}\n","<div class=\"grid-container\" [style.--grid-cols]=\"_gridTemplateColumns()\">\n <!-- Header -->\n <div class=\"grid-header\">\n @if (selectable()) {\n <div class=\"grid-cell grid-cell--check\">\n @if (multiSelect()) {\n <input type=\"checkbox\" [checked]=\"_allSelected()\" (change)=\"_toggleAll()\" />\n }\n </div>\n }\n @for (col of columns(); track col.field) {\n <div\n class=\"grid-cell grid-cell--header\"\n [attr.data-sortable]=\"col.sortable \|\| null\"\n [attr.data-sorted]=\"_sortField() === col.field \|\| null\"\n [attr.data-sort-dir]=\"_sortField() === col.field ? _sortDir() : null\"\n (click)=\"_sort(col)\"\n >\n <span>{{ col.header }}</span>\n @if (col.sortable) {\n <span class=\"sort-icon\">\n @if (_sortField() === col.field && _sortDir() === 'asc') { ↑ }\n @else if (_sortField() === col.field && _sortDir() === 'desc') { ↓ }\n @else { ↕ }\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Virtual scroll body -->\n @if (loading()) {\n <div class=\"grid-loading\">\n <div class=\"loading-spinner\"></div>\n <span>Loading…</span>\n </div>\n } @else if (_sortedRows().length === 0) {\n <div class=\"grid-empty\">{{ emptyMessage() }}</div>\n } @else {\n <cdk-virtual-scroll-viewport\n class=\"grid-body\"\n [itemSize]=\"rowHeight()\"\n [style.height.px]=\"virtualScrollHeight()\"\n >\n <div\n cdkVirtualFor=\"let row of _sortedRows(); let i = index\"\n class=\"grid-row\"\n [attr.data-selected]=\"_isSelected(row) \|\| null\"\n (click)=\"_toggleRow(row)\"\n >\n @if (selectable()) {\n <div class=\"grid-cell grid-cell--check\">\n <input type=\"checkbox\" [checked]=\"_isSelected(row)\" (click)=\"$event.stopPropagation(); _toggleRow(row)\" />\n </div>\n }\n @for (col of columns(); track col.field) {\n <div\n class=\"grid-cell\"\n [attr.data-editable]=\"col.editable \|\| null\"\n (dblclick)=\"_startEdit(i, col, _getCellValue(row, col))\"\n >\n @if (_isEditing(i, col.field)) {\n <input\n class=\"cell-input\"\n [value]=\"_editValue()\"\n (input)=\"_editValue.set($any($event.target).value)\"\n (blur)=\"_commitEdit(row, col)\"\n (keydown.enter)=\"_commitEdit(row, col)\"\n (keydown.escape)=\"_editingCell.set(null)\"\n autofocus\n />\n } @else if (col.cellTemplate) {\n <ng-container ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row, value: _getCellValue(row, col) }\"></ng-container>\n } @else {\n {{ _getCellValue(row, col) }}\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n }\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-data-view.mjs CHANGED Viewed

@@ -9,10 +9,10 @@ import { SkeletonBlockComponent, SkeletonLineComponent, SkeletonCircleComponent,
 class DataViewEmptyDataDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewEmptyDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DataViewEmptyDataDirective, isStandalone: true, selector: "[emrDataViewEmptyData]", host: { classAttribute: "emr-data-view-empty-data" }, exportAs: ["emrDataViewEmptyData"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewEmptyDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: DataViewEmptyDataDirective, isStandalone: true, selector: "[emrDataViewEmptyData]", host: { classAttribute: "emr-data-view-empty-data" }, exportAs: ["emrDataViewEmptyData"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewEmptyDataDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewEmptyDataDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrDataViewEmptyData]',
@@ -26,10 +26,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class DataViewEmptyFilterResultsDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewEmptyFilterResultsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DataViewEmptyFilterResultsDirective, isStandalone: true, selector: "[emrDataViewEmptyFilterResults]", host: { classAttribute: "emr-data-view-empty-filter-results" }, exportAs: ["emrDataViewEmptyFilterResults"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewEmptyFilterResultsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: DataViewEmptyFilterResultsDirective, isStandalone: true, selector: "[emrDataViewEmptyFilterResults]", host: { classAttribute: "emr-data-view-empty-filter-results" }, exportAs: ["emrDataViewEmptyFilterResults"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewEmptyFilterResultsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewEmptyFilterResultsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrDataViewEmptyFilterResults]',
@@ -43,10 +43,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class DataViewActionBarDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewActionBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DataViewActionBarDirective, isStandalone: true, selector: "[emrDataViewActionBar]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewActionBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: DataViewActionBarDirective, isStandalone: true, selector: "[emrDataViewActionBar]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewActionBarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewActionBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrDataViewActionBar]',
@@ -58,31 +58,21 @@ class DataViewComponent {
     _cdr = inject(ChangeDetectorRef);
     _elementRef = inject(ElementRef);
     _renderer = inject(Renderer2);
-    _emptyDataRef = contentChild(DataViewEmptyDataDirective, ...(ngDevMode ? [{ debugName: "_emptyDataRef" }] : []));
-    _emptyFilterResults = contentChild(DataViewEmptyFilterResultsDirective, ...(ngDevMode ? [{ debugName: "_emptyFilterResults" }] : []));
-    _actionBarRef = contentChild(DataViewActionBarDirective, ...(ngDevMode ? [{ debugName: "_actionBarRef" }] : []));
-    _matTable = viewChild('table', ...(ngDevMode ? [{ debugName: "_matTable" }] : []));
-    _matSort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "_matSort" }] : []));
-    variant = input('list', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    paginator = input(...(ngDevMode ? [undefined, { debugName: "paginator" }] : []));
-    columnDefs = input([], ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
-    withSelection = input(false, ...(ngDevMode ? [{ debugName: "withSelection", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    highlightHeader = input(false, ...(ngDevMode ? [{ debugName: "highlightHeader", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    rowModelType = input('clientSide', ...(ngDevMode ? [{ debugName: "rowModelType" }] : []));
-    withSorting = input(false, ...(ngDevMode ? [{ debugName: "withSorting", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    hoverRows = input(false, ...(ngDevMode ? [{ debugName: "hoverRows", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
+    _emptyDataRef = contentChild(DataViewEmptyDataDirective, ...(ngDevMode ? [{ debugName: "_emptyDataRef" }] : /* istanbul ignore next */ []));
+    _emptyFilterResults = contentChild(DataViewEmptyFilterResultsDirective, ...(ngDevMode ? [{ debugName: "_emptyFilterResults" }] : /* istanbul ignore next */ []));
+    _actionBarRef = contentChild(DataViewActionBarDirective, ...(ngDevMode ? [{ debugName: "_actionBarRef" }] : /* istanbul ignore next */ []));
+    _matTable = viewChild('table', ...(ngDevMode ? [{ debugName: "_matTable" }] : /* istanbul ignore next */ []));
+    _matSort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "_matSort" }] : /* istanbul ignore next */ []));
+    variant = input('list', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    paginator = input(...(ngDevMode ? [undefined, { debugName: "paginator" }] : /* istanbul ignore next */ []));
+    columnDefs = input([], ...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    withSelection = input(false, { ...(ngDevMode ? { debugName: "withSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    highlightHeader = input(false, { ...(ngDevMode ? { debugName: "highlightHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    rowModelType = input('clientSide', ...(ngDevMode ? [{ debugName: "rowModelType" }] : /* istanbul ignore next */ []));
+    withSorting = input(false, { ...(ngDevMode ? { debugName: "withSorting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    stickyHeader = input(false, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hoverRows = input(false, { ...(ngDevMode ? { debugName: "hoverRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     displayedColumns = computed(() => {
         const displayedColumns = this
             .columnDefs()
@@ -92,7 +82,7 @@ class DataViewComponent {
             displayedColumns.unshift('selection');
         }
         return [...displayedColumns, '__actionBar'];
-    }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
     dataSource = computed(() => {
         const dataSource = new MatTableDataSource(this.data());
         if (this.paginator()) {
@@ -115,12 +105,10 @@ class DataViewComponent {
             }
         };
         return dataSource;
-    }, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-    cellRenderers = input([], ...(ngDevMode ? [{ debugName: "cellRenderers" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    search = input('', ...(ngDevMode ? [{ debugName: "search" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    cellRenderers = input([], ...(ngDevMode ? [{ debugName: "cellRenderers" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    search = input('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
     injector = inject(Injector);
     selection = new SelectionModel(true, []);
     cellRenderersMap = new Map();
@@ -231,10 +219,10 @@ class DataViewComponent {
         this.selectionChanged.emit([]);
         this.allRowsSelectionChanged.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DataViewComponent, isStandalone: true, selector: "emr-data-view", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, withSelection: { classPropertyName: "withSelection", publicName: "withSelection", isSignal: true, isRequired: false, transformFunction: null }, highlightHeader: { classPropertyName: "highlightHeader", publicName: "highlightHeader", isSignal: true, isRequired: false, transformFunction: null }, rowModelType: { classPropertyName: "rowModelType", publicName: "rowModelType", isSignal: true, isRequired: false, transformFunction: null }, withSorting: { classPropertyName: "withSorting", publicName: "withSorting", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, hoverRows: { classPropertyName: "hoverRows", publicName: "hoverRows", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelectionChanged: "rowSelectionChanged", selectionChanged: "selectionChanged", allRowsSelectionChanged: "allRowsSelectionChanged", sortChange: "sortChange" }, host: { properties: { "class.highlight-header": "highlightHeader()", "class.hover-rows": "hoverRows()", "class.is-loading": "loading()" }, classAttribute: "emr-data-view" }, queries: [{ propertyName: "_emptyDataRef", first: true, predicate: DataViewEmptyDataDirective, descendants: true, isSignal: true }, { propertyName: "_emptyFilterResults", first: true, predicate: DataViewEmptyFilterResultsDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarRef", first: true, predicate: DataViewActionBarDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_matTable", first: true, predicate: ["table"], descendants: true, isSignal: true }, { propertyName: "_matSort", first: true, predicate: MatSort, descendants: true, isSignal: true }], exportAs: ["emrDataView"], ngImport: i0, template: "<emr-skeleton>\n  <mat-table matSort\n             [dataSource]=\"dataSource()\"\n             [matSortDisabled]=\"!withSorting() || (loading() && rowModelType() === 'serverSide')\"\n             (matSortChange)=\"onSortChange($event)\"\n             class=\"table\"\n             [class.hidden]=\"noFilteredResults\">\n    @if (withSelection()) {\n      <ng-container matColumnDef=\"selection\">\n        <mat-header-cell *matHeaderCellDef>\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6\"/>\n          } @else {\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n            </mat-checkbox>\n          }\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6 max-w-full\"/>\n          } @else {\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"rowSelectionToggle($event, row)\"\n                          [checked]=\"selection.isSelected(row)\">\n            </mat-checkbox>\n          }\n        </mat-cell>\n      </ng-container>\n    }\n\n    @for (columnDef of columnDefs(); track columnDef) {\n      @if (columnDef.visible) {\n        <ng-container [matColumnDef]=\"columnDef.dataField\">\n          <mat-header-cell *matHeaderCellDef mat-sort-header class=\"header-cell\"\n                           [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line class=\"w-24 max-w-full\"/>\n              } @else {\n                {{ columnDef.name }}\n              }\n            </div>\n          </mat-header-cell>\n          <mat-cell *matCellDef=\"let element\" class=\"cell\"\n                    [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line/>\n              } @else {\n                @if (columnDef.dataRenderer && hasCellRenderer(columnDef.dataRenderer)) {\n                  <ng-container [ngComponentOutlet]=\"getCellRenderer(columnDef.dataRenderer)\"\n                                [ngComponentOutletInputs]=\"{ element, columnDef, fieldData: element[columnDef.dataField] }\"\n                                [ngComponentOutletInjector]=\"injector\"/>\n                } @else {\n                  {{ element[columnDef.dataField] }}\n                }\n              }\n            </div>\n          </mat-cell>\n        </ng-container>\n      }\n    }\n\n    <ng-container matColumnDef=\"__actionBar\">\n      <mat-header-cell *matHeaderCellDef class=\"header-cell-action-bar\"/>\n      <mat-cell *matCellDef=\"let element\" class=\"cell-action-bar\">\n        @if (actionBarTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: element }\"/>\n        }\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: stickyHeader()\"/>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns()\" class=\"data-view-row\"\n             [class.is-selected]=\"selection.isSelected(row)\"/>\n  </mat-table>\n</emr-skeleton>\n\n@if (noFilteredResults) {\n  @if (loading()) {\n    <div class=\"flex flex-col items-center justify-center h-full\">\n      <emr-skeleton-circle class=\"size-32\"/>\n      <emr-skeleton-line class=\"w-1/2 mt-9\"/>\n      <emr-skeleton-line class=\"w-1/3 h-4 mt-5\"/>\n    </div>\n  } @else {\n    @if (hasFilterValue) {\n      <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n    }\n  }\n}\n", styles: [":host{--emr-data-view-row-bg: var(--color-background);--emr-data-view-hl-header-row-bg: var(--color-surface-container);--emr-data-view-hl-header-margin: calc(var(--spacing) * 1) 0;--emr-data-view-sticky-header-top: 0;--emr-data-view-selected-border-color: var(--color-primary);--emr-data-view-row-hover-bg: var(--color-surface-bright);--emr-data-view-bg: transparent;--mat-table-row-item-outline-width: 0;--mat-table-background-color: var(--emr-data-view-bg);--emr-content-fade-color: var(--emr-data-view-row-bg);--emr-data-view-header-bg: var(--color-background);display:flex;flex-direction:column;height:100%}:host mat-table{height:100%;padding-bottom:calc(var(--spacing) * 3)}:host ::ng-deep emr-block-state{--emr-block-state-padding: 0}:host ::ng-deep .mat-mdc-header-row{background:var(--emr-data-view-header-bg)}:host .mat-mdc-cell{background:var(--emr-data-view-row-bg)}:host .mat-mdc-cell.cell-action-bar{background:linear-gradient(to left,var(--emr-data-view-row-bg) 90%,transparent)}:host .emr-skeleton-block{z-index:1}:host .mdc-data-table__cell.mat-column-selection:first-child,:host .mdc-data-table__header-cell.mat-column-selection:first-child{max-width:calc(var(--spacing) * 16);padding:0;justify-content:center}:host .mat-mdc-header-cell{text-transform:uppercase;font-size:var(--text-xs);overflow:hidden}:host .mat-mdc-row.mdc-data-table__row{border:1px solid var(--color-border)!important;border-radius:.75rem;overflow:hidden;height:calc(var(--spacing) * 16)}:host .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:calc(var(--spacing) * 4)}:host .mdc-data-table__row{position:relative}:host .mdc-data-table__row.is-selected{border-color:var(--emr-data-view-selected-border-color)!important}:host.hover-rows .data-view-row:hover .mat-mdc-cell{--emr-data-view-row-bg: var(--emr-data-view-row-hover-bg)}:host .data-view-row:hover .cell-action-bar{opacity:100%;z-index:1}:host.is-loading .data-view-row .cell-action-bar{display:none}:host ::ng-deep .header-cell,:host ::ng-deep .cell{min-width:var(--emr-data-view-cell-width, auto);max-width:var(--emr-data-view-cell-width, auto)}:host ::ng-deep .cell{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}:host ::ng-deep .header-cell-action-bar,:host ::ng-deep .cell-action-bar{position:absolute;top:0;bottom:0;inset-inline-end:0;padding:0}:host ::ng-deep .header-cell-action-bar:not(:has(.force-visible)),:host ::ng-deep .cell-action-bar:not(:has(.force-visible)){opacity:0;z-index:-50}:host .mat-mdc-table .mat-mdc-header-cell{color:var(--sys-on-surface)}:host.highlight-header ::ng-deep .mat-mdc-header-row{position:relative;margin:var(--emr-data-view-hl-header-margin)}:host.highlight-header ::ng-deep .mat-mdc-header-row:before{content:\"\";position:absolute;left:0;right:0;background:var(--emr-data-view-hl-header-row-bg);height:calc(var(--spacing) * 10);border-radius:.5rem;z-index:0}:host.highlight-header ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-300);--emr-skeleton-to-bg: var(--color-neutral-400)}:host.highlight-header ::ng-deep .mat-mdc-table .mat-mdc-header-cell{background:transparent;color:var(--text-neutral-700)}:host ::ng-deep .mat-sort-header{z-index:1;position:relative}:host ::ng-deep .mat-sort-header-stem{width:1px}:host ::ng-deep .mat-sort-header-pointer-left,:host ::ng-deep .mat-sort-header-pointer-right{height:1px}:host ::ng-deep .mat-sort-header-pointer-middle{width:1px;height:1px}:host[data-view-variant=table]{--emr-data-view-hl-header-margin: 0}:host[data-view-variant=table] .mat-mdc-header-row:before{height:calc(var(--spacing) * 12)}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row{border:none!important;border-top:1px solid var(--color-border)!important;height:auto;border-radius:0}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:0}:host[data-view-variant=table].highlight-header .mat-mdc-row.mdc-data-table__row:first-of-type{border-top:none!important}:host-context(html.dark){--emr-data-view-row-hover-bg: var(--color-surface-container-low)}:host-context(html.dark) ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-700);--emr-skeleton-to-bg: var(--color-neutral-800)}:host-context(html.dark) ::ng-deep .mat-mdc-table .mat-mdc-header-cell{color:var(--text-neutral-400)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkeletonBlockComponent, selector: "emr-skeleton-block", exportAs: ["emrSkeletonBlock"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: SkeletonLineComponent, selector: "emr-skeleton-line", exportAs: ["emrSkeletonLine"] }, { kind: "component", type: SkeletonCircleComponent, selector: "emr-skeleton-circle", exportAs: ["emrSkeletonCircle"] }, { kind: "component", type: SkeletonComponent, selector: "emr-skeleton", inputs: ["direction"], exportAs: ["emrSkeleton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DataViewComponent, isStandalone: true, selector: "emr-data-view", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, withSelection: { classPropertyName: "withSelection", publicName: "withSelection", isSignal: true, isRequired: false, transformFunction: null }, highlightHeader: { classPropertyName: "highlightHeader", publicName: "highlightHeader", isSignal: true, isRequired: false, transformFunction: null }, rowModelType: { classPropertyName: "rowModelType", publicName: "rowModelType", isSignal: true, isRequired: false, transformFunction: null }, withSorting: { classPropertyName: "withSorting", publicName: "withSorting", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, hoverRows: { classPropertyName: "hoverRows", publicName: "hoverRows", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelectionChanged: "rowSelectionChanged", selectionChanged: "selectionChanged", allRowsSelectionChanged: "allRowsSelectionChanged", sortChange: "sortChange" }, host: { properties: { "class.highlight-header": "highlightHeader()", "class.hover-rows": "hoverRows()", "class.is-loading": "loading()" }, classAttribute: "emr-data-view" }, queries: [{ propertyName: "_emptyDataRef", first: true, predicate: DataViewEmptyDataDirective, descendants: true, isSignal: true }, { propertyName: "_emptyFilterResults", first: true, predicate: DataViewEmptyFilterResultsDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarRef", first: true, predicate: DataViewActionBarDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_matTable", first: true, predicate: ["table"], descendants: true, isSignal: true }, { propertyName: "_matSort", first: true, predicate: MatSort, descendants: true, isSignal: true }], exportAs: ["emrDataView"], ngImport: i0, template: "<emr-skeleton>\n  <mat-table matSort\n             [dataSource]=\"dataSource()\"\n             [matSortDisabled]=\"!withSorting() || (loading() && rowModelType() === 'serverSide')\"\n             (matSortChange)=\"onSortChange($event)\"\n             class=\"table\"\n             [class.hidden]=\"noFilteredResults\">\n    @if (withSelection()) {\n      <ng-container matColumnDef=\"selection\">\n        <mat-header-cell *matHeaderCellDef>\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6\"/>\n          } @else {\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n            </mat-checkbox>\n          }\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6 max-w-full\"/>\n          } @else {\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"rowSelectionToggle($event, row)\"\n                          [checked]=\"selection.isSelected(row)\">\n            </mat-checkbox>\n          }\n        </mat-cell>\n      </ng-container>\n    }\n\n    @for (columnDef of columnDefs(); track columnDef) {\n      @if (columnDef.visible) {\n        <ng-container [matColumnDef]=\"columnDef.dataField\">\n          <mat-header-cell *matHeaderCellDef mat-sort-header class=\"header-cell\"\n                           [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line class=\"w-24 max-w-full\"/>\n              } @else {\n                {{ columnDef.name }}\n              }\n            </div>\n          </mat-header-cell>\n          <mat-cell *matCellDef=\"let element\" class=\"cell\"\n                    [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line/>\n              } @else {\n                @if (columnDef.dataRenderer && hasCellRenderer(columnDef.dataRenderer)) {\n                  <ng-container [ngComponentOutlet]=\"getCellRenderer(columnDef.dataRenderer)\"\n                                [ngComponentOutletInputs]=\"{ element, columnDef, fieldData: element[columnDef.dataField] }\"\n                                [ngComponentOutletInjector]=\"injector\"/>\n                } @else {\n                  {{ element[columnDef.dataField] }}\n                }\n              }\n            </div>\n          </mat-cell>\n        </ng-container>\n      }\n    }\n\n    <ng-container matColumnDef=\"__actionBar\">\n      <mat-header-cell *matHeaderCellDef class=\"header-cell-action-bar\"/>\n      <mat-cell *matCellDef=\"let element\" class=\"cell-action-bar\">\n        @if (actionBarTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: element }\"/>\n        }\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: stickyHeader()\"/>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns()\" class=\"data-view-row\"\n             [class.is-selected]=\"selection.isSelected(row)\"/>\n  </mat-table>\n</emr-skeleton>\n\n@if (noFilteredResults) {\n  @if (loading()) {\n    <div class=\"flex flex-col items-center justify-center h-full\">\n      <emr-skeleton-circle class=\"size-32\"/>\n      <emr-skeleton-line class=\"w-1/2 mt-9\"/>\n      <emr-skeleton-line class=\"w-1/3 h-4 mt-5\"/>\n    </div>\n  } @else {\n    @if (hasFilterValue) {\n      <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n    }\n  }\n}\n", styles: [":host{--emr-data-view-row-bg: var(--color-background);--emr-data-view-hl-header-row-bg: var(--color-surface-container);--emr-data-view-hl-header-margin: calc(var(--spacing) * 1) 0;--emr-data-view-sticky-header-top: 0;--emr-data-view-selected-border-color: var(--color-primary);--emr-data-view-row-hover-bg: var(--color-surface-bright);--emr-data-view-bg: transparent;--mat-table-row-item-outline-width: 0;--mat-table-background-color: var(--emr-data-view-bg);--emr-content-fade-color: var(--emr-data-view-row-bg);--emr-data-view-header-bg: var(--color-background);display:flex;flex-direction:column;height:100%}:host mat-table{height:100%;padding-bottom:calc(var(--spacing) * 3)}:host ::ng-deep emr-block-state{--emr-block-state-padding: 0}:host ::ng-deep .mat-mdc-header-row{background:var(--emr-data-view-header-bg)}:host .mat-mdc-cell{background:var(--emr-data-view-row-bg)}:host .mat-mdc-cell.cell-action-bar{background:linear-gradient(to left,var(--emr-data-view-row-bg) 90%,transparent)}:host .emr-skeleton-block{z-index:1}:host .mdc-data-table__cell.mat-column-selection:first-child,:host .mdc-data-table__header-cell.mat-column-selection:first-child{max-width:calc(var(--spacing) * 16);padding:0;justify-content:center}:host .mat-mdc-header-cell{text-transform:uppercase;font-size:var(--text-xs);overflow:hidden}:host .mat-mdc-row.mdc-data-table__row{border:1px solid var(--color-border)!important;border-radius:.75rem;overflow:hidden;height:calc(var(--spacing) * 16)}:host .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:calc(var(--spacing) * 4)}:host .mdc-data-table__row{position:relative}:host .mdc-data-table__row.is-selected{border-color:var(--emr-data-view-selected-border-color)!important}:host.hover-rows .data-view-row:hover .mat-mdc-cell{--emr-data-view-row-bg: var(--emr-data-view-row-hover-bg)}:host .data-view-row:hover .cell-action-bar{opacity:100%;z-index:1}:host.is-loading .data-view-row .cell-action-bar{display:none}:host ::ng-deep .header-cell,:host ::ng-deep .cell{min-width:var(--emr-data-view-cell-width, auto);max-width:var(--emr-data-view-cell-width, auto)}:host ::ng-deep .cell{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}:host ::ng-deep .header-cell-action-bar,:host ::ng-deep .cell-action-bar{position:absolute;top:0;bottom:0;inset-inline-end:0;padding:0}:host ::ng-deep .header-cell-action-bar:not(:has(.force-visible)),:host ::ng-deep .cell-action-bar:not(:has(.force-visible)){opacity:0;z-index:-50}:host .mat-mdc-table .mat-mdc-header-cell{color:var(--sys-on-surface)}:host.highlight-header ::ng-deep .mat-mdc-header-row{position:relative;margin:var(--emr-data-view-hl-header-margin)}:host.highlight-header ::ng-deep .mat-mdc-header-row:before{content:\"\";position:absolute;left:0;right:0;background:var(--emr-data-view-hl-header-row-bg);height:calc(var(--spacing) * 10);border-radius:.5rem;z-index:0}:host.highlight-header ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-300);--emr-skeleton-to-bg: var(--color-neutral-400)}:host.highlight-header ::ng-deep .mat-mdc-table .mat-mdc-header-cell{background:transparent;color:var(--text-neutral-700)}:host ::ng-deep .mat-sort-header{z-index:1;position:relative}:host ::ng-deep .mat-sort-header-stem{width:1px}:host ::ng-deep .mat-sort-header-pointer-left,:host ::ng-deep .mat-sort-header-pointer-right{height:1px}:host ::ng-deep .mat-sort-header-pointer-middle{width:1px;height:1px}:host[data-view-variant=table]{--emr-data-view-hl-header-margin: 0}:host[data-view-variant=table] .mat-mdc-header-row:before{height:calc(var(--spacing) * 12)}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row{border:none!important;border-top:1px solid var(--color-border)!important;height:auto;border-radius:0}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:0}:host[data-view-variant=table].highlight-header .mat-mdc-row.mdc-data-table__row:first-of-type{border-top:none!important}:host-context(html.dark){--emr-data-view-row-hover-bg: var(--color-surface-container-low)}:host-context(html.dark) ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-700);--emr-skeleton-to-bg: var(--color-neutral-800)}:host-context(html.dark) ::ng-deep .mat-mdc-table .mat-mdc-header-cell{color:var(--text-neutral-400)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkeletonBlockComponent, selector: "emr-skeleton-block", exportAs: ["emrSkeletonBlock"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: SkeletonLineComponent, selector: "emr-skeleton-line", exportAs: ["emrSkeletonLine"] }, { kind: "component", type: SkeletonCircleComponent, selector: "emr-skeleton-circle", exportAs: ["emrSkeletonCircle"] }, { kind: "component", type: SkeletonComponent, selector: "emr-skeleton", inputs: ["direction"], exportAs: ["emrSkeleton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-data-view', exportAs: 'emrDataView', imports: [
                         MatCell,
@@ -261,13 +249,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[class.highlight-header]': 'highlightHeader()',
                         '[class.hover-rows]': 'hoverRows()',
                         '[class.is-loading]': 'loading()',
-                    }, template: "<emr-skeleton>\n  <mat-table matSort\n             [dataSource]=\"dataSource()\"\n             [matSortDisabled]=\"!withSorting() || (loading() && rowModelType() === 'serverSide')\"\n             (matSortChange)=\"onSortChange($event)\"\n             class=\"table\"\n             [class.hidden]=\"noFilteredResults\">\n    @if (withSelection()) {\n      <ng-container matColumnDef=\"selection\">\n        <mat-header-cell *matHeaderCellDef>\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6\"/>\n          } @else {\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n            </mat-checkbox>\n          }\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6 max-w-full\"/>\n          } @else {\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"rowSelectionToggle($event, row)\"\n                          [checked]=\"selection.isSelected(row)\">\n            </mat-checkbox>\n          }\n        </mat-cell>\n      </ng-container>\n    }\n\n    @for (columnDef of columnDefs(); track columnDef) {\n      @if (columnDef.visible) {\n        <ng-container [matColumnDef]=\"columnDef.dataField\">\n          <mat-header-cell *matHeaderCellDef mat-sort-header class=\"header-cell\"\n                           [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line class=\"w-24 max-w-full\"/>\n              } @else {\n                {{ columnDef.name }}\n              }\n            </div>\n          </mat-header-cell>\n          <mat-cell *matCellDef=\"let element\" class=\"cell\"\n                    [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line/>\n              } @else {\n                @if (columnDef.dataRenderer && hasCellRenderer(columnDef.dataRenderer)) {\n                  <ng-container [ngComponentOutlet]=\"getCellRenderer(columnDef.dataRenderer)\"\n                                [ngComponentOutletInputs]=\"{ element, columnDef, fieldData: element[columnDef.dataField] }\"\n                                [ngComponentOutletInjector]=\"injector\"/>\n                } @else {\n                  {{ element[columnDef.dataField] }}\n                }\n              }\n            </div>\n          </mat-cell>\n        </ng-container>\n      }\n    }\n\n    <ng-container matColumnDef=\"__actionBar\">\n      <mat-header-cell *matHeaderCellDef class=\"header-cell-action-bar\"/>\n      <mat-cell *matCellDef=\"let element\" class=\"cell-action-bar\">\n        @if (actionBarTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: element }\"/>\n        }\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: stickyHeader()\"/>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns()\" class=\"data-view-row\"\n             [class.is-selected]=\"selection.isSelected(row)\"/>\n  </mat-table>\n</emr-skeleton>\n\n@if (noFilteredResults) {\n  @if (loading()) {\n    <div class=\"flex flex-col items-center justify-center h-full\">\n      <emr-skeleton-circle class=\"size-32\"/>\n      <emr-skeleton-line class=\"w-1/2 mt-9\"/>\n      <emr-skeleton-line class=\"w-1/3 h-4 mt-5\"/>\n    </div>\n  } @else {\n    @if (hasFilterValue) {\n      <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n    }\n  }\n}\n", styles: [":host{--emr-data-view-row-bg: var(--color-background);--emr-data-view-hl-header-row-bg: var(--color-surface-container);--emr-data-view-hl-header-margin: calc(var(--spacing) * 1) 0;--emr-data-view-sticky-header-top: 0;--emr-data-view-selected-border-color: var(--color-primary);--emr-data-view-row-hover-bg: var(--color-surface-bright);--emr-data-view-bg: transparent;--mat-table-row-item-outline-width: 0;--mat-table-background-color: var(--emr-data-view-bg);--emr-content-fade-color: var(--emr-data-view-row-bg);--emr-data-view-header-bg: var(--color-background);display:flex;flex-direction:column;height:100%}:host mat-table{height:100%;padding-bottom:calc(var(--spacing) * 3)}:host ::ng-deep emr-block-state{--emr-block-state-padding: 0}:host ::ng-deep .mat-mdc-header-row{background:var(--emr-data-view-header-bg)}:host .mat-mdc-cell{background:var(--emr-data-view-row-bg)}:host .mat-mdc-cell.cell-action-bar{background:linear-gradient(to left,var(--emr-data-view-row-bg) 90%,transparent)}:host .emr-skeleton-block{z-index:1}:host .mdc-data-table__cell.mat-column-selection:first-child,:host .mdc-data-table__header-cell.mat-column-selection:first-child{max-width:calc(var(--spacing) * 16);padding:0;justify-content:center}:host .mat-mdc-header-cell{text-transform:uppercase;font-size:var(--text-xs);overflow:hidden}:host .mat-mdc-row.mdc-data-table__row{border:1px solid var(--color-border)!important;border-radius:.75rem;overflow:hidden;height:calc(var(--spacing) * 16)}:host .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:calc(var(--spacing) * 4)}:host .mdc-data-table__row{position:relative}:host .mdc-data-table__row.is-selected{border-color:var(--emr-data-view-selected-border-color)!important}:host.hover-rows .data-view-row:hover .mat-mdc-cell{--emr-data-view-row-bg: var(--emr-data-view-row-hover-bg)}:host .data-view-row:hover .cell-action-bar{opacity:100%;z-index:1}:host.is-loading .data-view-row .cell-action-bar{display:none}:host ::ng-deep .header-cell,:host ::ng-deep .cell{min-width:var(--emr-data-view-cell-width, auto);max-width:var(--emr-data-view-cell-width, auto)}:host ::ng-deep .cell{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}:host ::ng-deep .header-cell-action-bar,:host ::ng-deep .cell-action-bar{position:absolute;top:0;bottom:0;inset-inline-end:0;padding:0}:host ::ng-deep .header-cell-action-bar:not(:has(.force-visible)),:host ::ng-deep .cell-action-bar:not(:has(.force-visible)){opacity:0;z-index:-50}:host .mat-mdc-table .mat-mdc-header-cell{color:var(--sys-on-surface)}:host.highlight-header ::ng-deep .mat-mdc-header-row{position:relative;margin:var(--emr-data-view-hl-header-margin)}:host.highlight-header ::ng-deep .mat-mdc-header-row:before{content:\"\";position:absolute;left:0;right:0;background:var(--emr-data-view-hl-header-row-bg);height:calc(var(--spacing) * 10);border-radius:.5rem;z-index:0}:host.highlight-header ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-300);--emr-skeleton-to-bg: var(--color-neutral-400)}:host.highlight-header ::ng-deep .mat-mdc-table .mat-mdc-header-cell{background:transparent;color:var(--text-neutral-700)}:host ::ng-deep .mat-sort-header{z-index:1;position:relative}:host ::ng-deep .mat-sort-header-stem{width:1px}:host ::ng-deep .mat-sort-header-pointer-left,:host ::ng-deep .mat-sort-header-pointer-right{height:1px}:host ::ng-deep .mat-sort-header-pointer-middle{width:1px;height:1px}:host[data-view-variant=table]{--emr-data-view-hl-header-margin: 0}:host[data-view-variant=table] .mat-mdc-header-row:before{height:calc(var(--spacing) * 12)}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row{border:none!important;border-top:1px solid var(--color-border)!important;height:auto;border-radius:0}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:0}:host[data-view-variant=table].highlight-header .mat-mdc-row.mdc-data-table__row:first-of-type{border-top:none!important}:host-context(html.dark){--emr-data-view-row-hover-bg: var(--color-surface-container-low)}:host-context(html.dark) ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-700);--emr-skeleton-to-bg: var(--color-neutral-800)}:host-context(html.dark) ::ng-deep .mat-mdc-table .mat-mdc-header-cell{color:var(--text-neutral-400)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<emr-skeleton>\n  <mat-table matSort\n             [dataSource]=\"dataSource()\"\n             [matSortDisabled]=\"!withSorting() || (loading() && rowModelType() === 'serverSide')\"\n             (matSortChange)=\"onSortChange($event)\"\n             class=\"table\"\n             [class.hidden]=\"noFilteredResults\">\n    @if (withSelection()) {\n      <ng-container matColumnDef=\"selection\">\n        <mat-header-cell *matHeaderCellDef>\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6\"/>\n          } @else {\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n            </mat-checkbox>\n          }\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          @if (loadingCellRenderers || loading()) {\n            <emr-skeleton-block class=\"size-6 max-w-full\"/>\n          } @else {\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"rowSelectionToggle($event, row)\"\n                          [checked]=\"selection.isSelected(row)\">\n            </mat-checkbox>\n          }\n        </mat-cell>\n      </ng-container>\n    }\n\n    @for (columnDef of columnDefs(); track columnDef) {\n      @if (columnDef.visible) {\n        <ng-container [matColumnDef]=\"columnDef.dataField\">\n          <mat-header-cell *matHeaderCellDef mat-sort-header class=\"header-cell\"\n                           [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line class=\"w-24 max-w-full\"/>\n              } @else {\n                {{ columnDef.name }}\n              }\n            </div>\n          </mat-header-cell>\n          <mat-cell *matCellDef=\"let element\" class=\"cell\"\n                    [style.--emr-data-view-cell-width]=\"columnDef.width\">\n            <div class=\"overflow-hidden w-full\">\n              @if (loadingCellRenderers || loading()) {\n                <emr-skeleton-line/>\n              } @else {\n                @if (columnDef.dataRenderer && hasCellRenderer(columnDef.dataRenderer)) {\n                  <ng-container [ngComponentOutlet]=\"getCellRenderer(columnDef.dataRenderer)\"\n                                [ngComponentOutletInputs]=\"{ element, columnDef, fieldData: element[columnDef.dataField] }\"\n                                [ngComponentOutletInjector]=\"injector\"/>\n                } @else {\n                  {{ element[columnDef.dataField] }}\n                }\n              }\n            </div>\n          </mat-cell>\n        </ng-container>\n      }\n    }\n\n    <ng-container matColumnDef=\"__actionBar\">\n      <mat-header-cell *matHeaderCellDef class=\"header-cell-action-bar\"/>\n      <mat-cell *matCellDef=\"let element\" class=\"cell-action-bar\">\n        @if (actionBarTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: element }\"/>\n        }\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: stickyHeader()\"/>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns()\" class=\"data-view-row\"\n             [class.is-selected]=\"selection.isSelected(row)\"/>\n  </mat-table>\n</emr-skeleton>\n\n@if (noFilteredResults) {\n  @if (loading()) {\n    <div class=\"flex flex-col items-center justify-center h-full\">\n      <emr-skeleton-circle class=\"size-32\"/>\n      <emr-skeleton-line class=\"w-1/2 mt-9\"/>\n      <emr-skeleton-line class=\"w-1/3 h-4 mt-5\"/>\n    </div>\n  } @else {\n    @if (hasFilterValue) {\n      <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n    }\n  }\n}\n", styles: [":host{--emr-data-view-row-bg: var(--color-background);--emr-data-view-hl-header-row-bg: var(--color-surface-container);--emr-data-view-hl-header-margin: calc(var(--spacing) * 1) 0;--emr-data-view-sticky-header-top: 0;--emr-data-view-selected-border-color: var(--color-primary);--emr-data-view-row-hover-bg: var(--color-surface-bright);--emr-data-view-bg: transparent;--mat-table-row-item-outline-width: 0;--mat-table-background-color: var(--emr-data-view-bg);--emr-content-fade-color: var(--emr-data-view-row-bg);--emr-data-view-header-bg: var(--color-background);display:flex;flex-direction:column;height:100%}:host mat-table{height:100%;padding-bottom:calc(var(--spacing) * 3)}:host ::ng-deep emr-block-state{--emr-block-state-padding: 0}:host ::ng-deep .mat-mdc-header-row{background:var(--emr-data-view-header-bg)}:host .mat-mdc-cell{background:var(--emr-data-view-row-bg)}:host .mat-mdc-cell.cell-action-bar{background:linear-gradient(to left,var(--emr-data-view-row-bg) 90%,transparent)}:host .emr-skeleton-block{z-index:1}:host .mdc-data-table__cell.mat-column-selection:first-child,:host .mdc-data-table__header-cell.mat-column-selection:first-child{max-width:calc(var(--spacing) * 16);padding:0;justify-content:center}:host .mat-mdc-header-cell{text-transform:uppercase;font-size:var(--text-xs);overflow:hidden}:host .mat-mdc-row.mdc-data-table__row{border:1px solid var(--color-border)!important;border-radius:.75rem;overflow:hidden;height:calc(var(--spacing) * 16)}:host .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:calc(var(--spacing) * 4)}:host .mdc-data-table__row{position:relative}:host .mdc-data-table__row.is-selected{border-color:var(--emr-data-view-selected-border-color)!important}:host.hover-rows .data-view-row:hover .mat-mdc-cell{--emr-data-view-row-bg: var(--emr-data-view-row-hover-bg)}:host .data-view-row:hover .cell-action-bar{opacity:100%;z-index:1}:host.is-loading .data-view-row .cell-action-bar{display:none}:host ::ng-deep .header-cell,:host ::ng-deep .cell{min-width:var(--emr-data-view-cell-width, auto);max-width:var(--emr-data-view-cell-width, auto)}:host ::ng-deep .cell{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}:host ::ng-deep .header-cell-action-bar,:host ::ng-deep .cell-action-bar{position:absolute;top:0;bottom:0;inset-inline-end:0;padding:0}:host ::ng-deep .header-cell-action-bar:not(:has(.force-visible)),:host ::ng-deep .cell-action-bar:not(:has(.force-visible)){opacity:0;z-index:-50}:host .mat-mdc-table .mat-mdc-header-cell{color:var(--sys-on-surface)}:host.highlight-header ::ng-deep .mat-mdc-header-row{position:relative;margin:var(--emr-data-view-hl-header-margin)}:host.highlight-header ::ng-deep .mat-mdc-header-row:before{content:\"\";position:absolute;left:0;right:0;background:var(--emr-data-view-hl-header-row-bg);height:calc(var(--spacing) * 10);border-radius:.5rem;z-index:0}:host.highlight-header ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-300);--emr-skeleton-to-bg: var(--color-neutral-400)}:host.highlight-header ::ng-deep .mat-mdc-table .mat-mdc-header-cell{background:transparent;color:var(--text-neutral-700)}:host ::ng-deep .mat-sort-header{z-index:1;position:relative}:host ::ng-deep .mat-sort-header-stem{width:1px}:host ::ng-deep .mat-sort-header-pointer-left,:host ::ng-deep .mat-sort-header-pointer-right{height:1px}:host ::ng-deep .mat-sort-header-pointer-middle{width:1px;height:1px}:host[data-view-variant=table]{--emr-data-view-hl-header-margin: 0}:host[data-view-variant=table] .mat-mdc-header-row:before{height:calc(var(--spacing) * 12)}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row{border:none!important;border-top:1px solid var(--color-border)!important;height:auto;border-radius:0}:host[data-view-variant=table] .mat-mdc-row.mdc-data-table__row+.mdc-data-table__row{margin-top:0}:host[data-view-variant=table].highlight-header .mat-mdc-row.mdc-data-table__row:first-of-type{border-top:none!important}:host-context(html.dark){--emr-data-view-row-hover-bg: var(--color-surface-container-low)}:host-context(html.dark) ::ng-deep .mdc-data-table__header-cell{--emr-skeleton-from-bg: var(--color-neutral-700);--emr-skeleton-to-bg: var(--color-neutral-800)}:host-context(html.dark) ::ng-deep .mat-mdc-table .mat-mdc-header-cell{color:var(--text-neutral-400)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { _emptyDataRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewEmptyDataDirective), { isSignal: true }] }], _emptyFilterResults: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewEmptyFilterResultsDirective), { isSignal: true }] }], _actionBarRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewActionBarDirective), { isSignal: true }] }], _matTable: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }], _matSort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], withSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelection", required: false }] }], highlightHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightHeader", required: false }] }], rowModelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowModelType", required: false }] }], withSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSorting", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], hoverRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverRows", required: false }] }], cellRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderers", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], rowSelectionChanged: [{ type: i0.Output, args: ["rowSelectionChanged"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], allRowsSelectionChanged: [{ type: i0.Output, args: ["allRowsSelectionChanged"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
 class DataViewActionBarComponent {
-    forceVisible = input(false, ...(ngDevMode ? [{ debugName: "forceVisible", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
+    forceVisible = input(false, { ...(ngDevMode ? { debugName: "forceVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _forceVisible = false;
     get api() {
         return {
@@ -276,15 +262,15 @@ class DataViewActionBarComponent {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: DataViewActionBarComponent, isStandalone: true, selector: "emr-data-view-action-bar", inputs: { forceVisible: { classPropertyName: "forceVisible", publicName: "forceVisible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.force-visible": "forceVisible() || _forceVisible" }, classAttribute: "emr-data-view-action-bar" }, exportAs: ["emrDataViewActionBar"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{height:100%;padding-inline-start:calc(var(--spacing) * 4);padding-inline-end:calc(var(--spacing) * 4);display:flex;align-items:center;gap:calc(var(--spacing) * 3);position:relative}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: DataViewActionBarComponent, isStandalone: true, selector: "emr-data-view-action-bar", inputs: { forceVisible: { classPropertyName: "forceVisible", publicName: "forceVisible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.force-visible": "forceVisible() || _forceVisible" }, classAttribute: "emr-data-view-action-bar" }, exportAs: ["emrDataViewActionBar"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{height:100%;padding-inline-start:calc(var(--spacing) * 4);padding-inline-end:calc(var(--spacing) * 4);display:flex;align-items:center;gap:calc(var(--spacing) * 3);position:relative}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataViewActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DataViewActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-data-view-action-bar', exportAs: 'emrDataViewActionBar', host: {
                         'class': 'emr-data-view-action-bar',
                         '[class.force-visible]': 'forceVisible() || _forceVisible'
-                    }, template: "<ng-content/>\n", styles: [":host{height:100%;padding-inline-start:calc(var(--spacing) * 4);padding-inline-end:calc(var(--spacing) * 4);display:flex;align-items:center;gap:calc(var(--spacing) * 3);position:relative}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-content/>\n", styles: [":host{height:100%;padding-inline-start:calc(var(--spacing) * 4);padding-inline-end:calc(var(--spacing) * 4);display:flex;align-items:center;gap:calc(var(--spacing) * 3);position:relative}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { forceVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceVisible", required: false }] }] } });
 function cellRenderer(dataRenderer, component) {