@reforgium/data-grid 2.5.1 → 2.5.3

package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-DlgNSvfN.mjs → reforgium-data-grid-grid-overlay-scroll.feature-Dvwc2nsE.mjs}

@@ -1,4 +1,4 @@
-import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-D_DDE2E7.mjs';
+import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-BOyAs6Bw.mjs';
 
 function createGridOverlayScrollFeature(ctx) {
     const showScrollbar = () => {
@@ -76,4 +76,4 @@ function createGridOverlayScrollFeature(ctx) {
 }
 
 export { createGridOverlayScrollFeature };
-//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-DlgNSvfN.mjs.map
+//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-Dvwc2nsE.mjs.map

package/fesm2022/{reforgium-data-grid-reforgium-data-grid-D_DDE2E7.mjs → reforgium-data-grid-reforgium-data-grid-BOyAs6Bw.mjs}

@@ -762,18 +762,16 @@ function computeHeaderGroups(headers = [], columns = []) {
     return normalized;
 }
 function normalizeRange(range, prefix, columns) {
+    const { align, title, titleTemplate } = range.header;
     const base = {
         key: range.header.key,
+        title,
+        titleTemplate,
+        align,
         widthPx: sumByRange(prefix, range.start, range.end),
         startKey: columns[range.start]?.key,
         endKey: columns[range.end]?.key,
     };
-    if ('titleTemplate' in range.header) {
-        base.titleTemplate = range.header.titleTemplate;
-        return base;
-    }
-    base.title = range.header.title;
-    base.align = range.header.align;
     return base;
 }
 function resolveColumnWidth(column) {
@@ -1360,6 +1358,7 @@ class DataGridCellComponent {
         }
         return displayValue;
     }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    resolvedAlign = computed(() => this.column().align ?? 'left', ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : []));
     resolveTypeTemplate(type) {
         if (!type) {
             return undefined;
@@ -1374,31 +1373,39 @@ class DataGridCellComponent {
     @let val = $any(value());
     @let pinned = isPinned();
 
-    @switch (type()) {
-      @case ('tpl') {
-        <ng-container
-          [ngTemplateOutlet]="col.renderTemplate"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
-      @case ('globalTypeTpl') {
-        <ng-container
-          [ngTemplateOutlet]="resolveTypeTemplate(col.type)"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
-      @case ('globalDataTpl') {
-        <ng-container
-          [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
-      @case ('globalRowTpl') {
-        <ng-container
-          [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
+    @switch (type()) {
+      @case ('tpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="col.renderTemplate"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
+      @case ('globalTypeTpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="resolveTypeTemplate(col.type)"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
+      @case ('globalDataTpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
+      @case ('globalRowTpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
       @case ('date') {
         <span class="re-dg-cell-text">{{ val | date: col?.typeParams }}</span>
       }
@@ -1412,7 +1419,7 @@ class DataGridCellComponent {
         <span class="re-dg-cell-text">{{ val }}</span>
       }
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}.re-dg-cell-template{display:flex;width:100%;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellComponent, decorators: [{
             type: Component,
@@ -1422,31 +1429,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
     @let val = $any(value());
     @let pinned = isPinned();
 
-    @switch (type()) {
-      @case ('tpl') {
-        <ng-container
-          [ngTemplateOutlet]="col.renderTemplate"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
-      @case ('globalTypeTpl') {
-        <ng-container
-          [ngTemplateOutlet]="resolveTypeTemplate(col.type)"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
-      @case ('globalDataTpl') {
-        <ng-container
-          [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
-      @case ('globalRowTpl') {
-        <ng-container
-          [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
-          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
-        />
-      }
+    @switch (type()) {
+      @case ('tpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="col.renderTemplate"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
+      @case ('globalTypeTpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="resolveTypeTemplate(col.type)"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
+      @case ('globalDataTpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
+      @case ('globalRowTpl') {
+        <div class="re-dg-cell-template" [style.justify-content]="resolvedAlign()" [style.text-align]="resolvedAlign()">
+          <ng-container
+            [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
+            [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index(), isPinned: pinned }"
+          />
+        </div>
+      }
       @case ('date') {
         <span class="re-dg-cell-text">{{ val | date: col?.typeParams }}</span>
       }
@@ -1460,7 +1475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         <span class="re-dg-cell-text">{{ val }}</span>
       }
     }
-  `, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}\n"] }]
+  `, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}.re-dg-cell-template{display:flex;width:100%;min-width:0}\n"] }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isPinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPinned", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 
 // noinspection ES6PreferShortImport
@@ -3377,7 +3392,7 @@ class DataGrid {
         if (this.overlayScrollFeaturePromise) {
             return this.overlayScrollFeaturePromise;
         }
-        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-DlgNSvfN.mjs').then(({ createGridOverlayScrollFeature }) => {
+        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-Dvwc2nsE.mjs').then(({ createGridOverlayScrollFeature }) => {
             const feature = createGridOverlayScrollFeature({
                 getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
                 getThumbTop: () => this.vm.thumbTopPx(),
@@ -3502,4 +3517,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  */
 
 export { DataGridTypeCellTemplateDirective as D, clampThumbTop as a, DataGridCellTemplateDirective as b, computeScrollbarState as c, DataGridHeaderTemplateDirective as d, DataGridRowDirective as e, DataGridDeclarativeColumn as f, DataGridDeclarativeHeaderDirective as g, DataGridDeclarativeCellDirective as h, DataGridCellEmptyDirective as i, DataGridCellLoadingDirective as j, DataGridStickyRowDirective as k, DataGridSortIconDirective as l, mapThumbTopToScrollTop as m, DataGridExpanderIconDirective as n, DATA_GRID_CONFIG as o, DATA_GRID_TYPE_RENDERERS as p, DATA_GRID_TYPE_TRANSFORMERS as q, DEFAULT_DATA_GRID_DEFAULTS as r, provideDataGridDefaults as s, provideDataGridTypeRenderers as t, provideDataGridTypeTransformers as u, DataGrid as v };
-//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-D_DDE2E7.mjs.map
+//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-BOyAs6Bw.mjs.map

package/fesm2022/reforgium-data-grid.mjs

@@ -1,2 +1,2 @@
-export { o as DATA_GRID_CONFIG, p as DATA_GRID_TYPE_RENDERERS, q as DATA_GRID_TYPE_TRANSFORMERS, r as DEFAULT_DATA_GRID_DEFAULTS, v as DataGrid, i as DataGridCellEmptyDirective, j as DataGridCellLoadingDirective, b as DataGridCellTemplateDirective, h as DataGridDeclarativeCellDirective, f as DataGridDeclarativeColumn, g as DataGridDeclarativeHeaderDirective, n as DataGridExpanderIconDirective, d as DataGridHeaderTemplateDirective, e as DataGridRowDirective, l as DataGridSortIconDirective, k as DataGridStickyRowDirective, D as DataGridTypeCellTemplateDirective, s as provideDataGridDefaults, t as provideDataGridTypeRenderers, u as provideDataGridTypeTransformers } from './reforgium-data-grid-reforgium-data-grid-D_DDE2E7.mjs';
+export { o as DATA_GRID_CONFIG, p as DATA_GRID_TYPE_RENDERERS, q as DATA_GRID_TYPE_TRANSFORMERS, r as DEFAULT_DATA_GRID_DEFAULTS, v as DataGrid, i as DataGridCellEmptyDirective, j as DataGridCellLoadingDirective, b as DataGridCellTemplateDirective, h as DataGridDeclarativeCellDirective, f as DataGridDeclarativeColumn, g as DataGridDeclarativeHeaderDirective, n as DataGridExpanderIconDirective, d as DataGridHeaderTemplateDirective, e as DataGridRowDirective, l as DataGridSortIconDirective, k as DataGridStickyRowDirective, D as DataGridTypeCellTemplateDirective, s as provideDataGridDefaults, t as provideDataGridTypeRenderers, u as provideDataGridTypeTransformers } from './reforgium-data-grid-reforgium-data-grid-BOyAs6Bw.mjs';
 //# sourceMappingURL=reforgium-data-grid.mjs.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.1",
+  "version": "2.5.3",
   "name": "@reforgium/data-grid",
   "description": "reforgium DataGrid component",
   "author": "rtommievich",

package/types/reforgium-data-grid.d.ts

@@ -885,11 +885,14 @@ type GridCellDoubleClickEvent<Data extends AnyDict = AnyDict> = {
     event: MouseEvent;
 };
 
-type TemplatedHeader = {
+type HeaderTitleContent = {
+    title: string;
+    titleTemplate?: TemplateRef<HeaderTemplateData>;
+} | {
+    title?: string;
     titleTemplate: TemplateRef<HeaderTemplateData>;
 };
-type PlainHeader = {
-    title: string;
+type HeaderPresentation = {
     align?: GridCellAlign;
 };
 /**
@@ -910,7 +913,7 @@ type GridHeaderGroup<Data extends AnyDict = AnyDict> = {
     key: string;
     from: DataKey<Data>;
     to?: DataKey<Data>;
-} & (TemplatedHeader | PlainHeader);
+} & HeaderTitleContent & HeaderPresentation;
 /**
  * Internal normalized representation of a header group after processing.
  * Used by the grid component to render header groups with calculated dimensions.