@reforgium/data-grid 2.3.3 → 2.3.5

package/README.md

@@ -593,84 +593,84 @@ import { DataGridColumnManager } from '@reforgium/data-grid/column-manager';
 <re-data-grid [columns]="managedColumns()" ... />
 ```
 
-Custom trigger via content projection:
-
-```html
-
-<re-data-grid-column-manager
-  triggerLabel="Columns"
-  [columns]="managedColumns()"
-  (columnsChange)="managedColumns.set($event)"
->
-  <ng-template reDataGridColumnManagerTrigger>Manage columns</ng-template>
-</re-data-grid-column-manager>
-```
-
-Custom column title template (controls stay built-in):
-
-```html
-<re-data-grid-column-manager
-  [columns]="managedColumns()"
-  (columnsChange)="managedColumns.set($event)"
->
-  <ng-template reDataGridColumnManagerColumnTitle let-title let-column="column">
-    <span class="font-medium">{{ title }}</span>
-  </ng-template>
-</re-data-grid-column-manager>
-```
-
-`reDataGridColumnManagerColumnTitle` context:
-
-- `$implicit` / `title` - resolved column title (`header || key`)
-- `column` - current `GridColumn<T>`
-
-Standalone imports for custom trigger/title markers:
-
-```ts
-import {
-  DataGridColumnManager,
-  DataGridColumnManagerColumnTitleDirective,
-  DataGridColumnManagerTriggerDirective,
-} from '@reforgium/data-grid/column-manager';
-```
-
-```ts
-@Component({
-  imports: [
-    DataGridColumnManager,
-    DataGridColumnManagerTriggerDirective,
-    DataGridColumnManagerColumnTitleDirective,
-  ],
-})
-export class ExampleComponent {}
-```
-
-Example with both trigger and column title customizations:
-
-```html
-<re-data-grid-column-manager [columns]="managedColumns()" (columnsChange)="managedColumns.set($event)">
-  <ng-template reDataGridColumnManagerTrigger>Manage columns</ng-template>
-  <ng-template reDataGridColumnManagerColumnTitle let-title>
-    <span>{{ title }}</span>
-  </ng-template>
-</re-data-grid-column-manager>
-```
-
-Inputs:
-
-- `columns: GridColumn<T>[]`
-- `triggerLabel?: string`
-- `showAllLabel?: string`
-- `hideAllLabel?: string`
-- `controlsVisible?: boolean` - hides search and "show all / hide optional" panel
-- `searchable?: boolean`
-- `allowReorder?: boolean`
-- `allowPin?: boolean`
-- `allowVisibility?: boolean`
-
-Outputs:
-
-- `columnsChange: GridColumn<T>[]`
+Custom trigger via content projection:
+
+```html
+
+<re-data-grid-column-manager
+  triggerLabel="Columns"
+  [columns]="managedColumns()"
+  (columnsChange)="managedColumns.set($event)"
+>
+  <ng-template reDataGridColumnManagerTrigger>Manage columns</ng-template>
+</re-data-grid-column-manager>
+```
+
+Custom column title template (controls stay built-in):
+
+```html
+<re-data-grid-column-manager
+  [columns]="managedColumns()"
+  (columnsChange)="managedColumns.set($event)"
+>
+  <ng-template reDataGridColumnManagerColumnTitle let-title let-column="column">
+    <span class="font-medium">{{ title }}</span>
+  </ng-template>
+</re-data-grid-column-manager>
+```
+
+`reDataGridColumnManagerColumnTitle` context:
+
+- `$implicit` / `title` - resolved column title (`header || key`)
+- `column` - current `GridColumn<T>`
+
+Standalone imports for custom trigger/title markers:
+
+```ts
+import {
+  DataGridColumnManager,
+  DataGridColumnManagerColumnTitleDirective,
+  DataGridColumnManagerTriggerDirective,
+} from '@reforgium/data-grid/column-manager';
+```
+
+```ts
+@Component({
+  imports: [
+    DataGridColumnManager,
+    DataGridColumnManagerTriggerDirective,
+    DataGridColumnManagerColumnTitleDirective,
+  ],
+})
+export class ExampleComponent {}
+```
+
+Example with both trigger and column title customizations:
+
+```html
+<re-data-grid-column-manager [columns]="managedColumns()" (columnsChange)="managedColumns.set($event)">
+  <ng-template reDataGridColumnManagerTrigger>Manage columns</ng-template>
+  <ng-template reDataGridColumnManagerColumnTitle let-title>
+    <span>{{ title }}</span>
+  </ng-template>
+</re-data-grid-column-manager>
+```
+
+Inputs:
+
+- `columns: GridColumn<T>[]`
+- `triggerLabel?: string`
+- `showAllLabel?: string`
+- `hideAllLabel?: string`
+- `controlsVisible?: boolean` - hides search and "show all / hide optional" panel
+- `searchable?: boolean`
+- `allowReorder?: boolean`
+- `allowPin?: boolean`
+- `allowVisibility?: boolean`
+
+Outputs:
+
+- `columnsChange: GridColumn<T>[]`
 
 ### Column manager CSS Variables
 

package/fesm2022/reforgium-data-grid-column-manager.mjs

@@ -439,14 +439,14 @@ class DataGridColumnManager {
         this.panelLeft.set(Number.isFinite(nextLeft) ? nextLeft : 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridColumnManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridColumnManager, isStandalone: true, selector: "re-data-grid-column-manager", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, showAllLabel: { classPropertyName: "showAllLabel", publicName: "showAllLabel", isSignal: true, isRequired: false, transformFunction: null }, hideAllLabel: { classPropertyName: "hideAllLabel", publicName: "hideAllLabel", isSignal: true, isRequired: false, transformFunction: null }, controlsVisible: { classPropertyName: "controlsVisible", publicName: "controlsVisible", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, allowPin: { classPropertyName: "allowPin", publicName: "allowPin", isSignal: true, isRequired: false, transformFunction: null }, allowVisibility: { classPropertyName: "allowVisibility", publicName: "allowVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChange: "columnsChange" }, host: { attributes: { "document:mousedown": "onDocumentMouseDown($event.target)", "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DataGridColumnManagerTriggerDirective, descendants: true, isSignal: true }, { propertyName: "columnTitleTemplate", first: true, predicate: (DataGridColumnManagerColumnTitleDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"re-dg-cm\" #root>\n  <button\n    type=\"button\"\n    [attr.aria-expanded]=\"opened()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerTemplate(); as template) {\n      <ng-container [ngTemplateOutlet]=\"template\" />\n    } @else {\n      <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\n        <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\n        <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\n      </div>\n    }\n  </button>\n\n  @if (opened()) {\n    <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\n      @let list = filteredColumns();\n\n      @if (controlsVisible() && searchable()) {\n        <label class=\"re-dg-cm__search\">\n          <input\n            type=\"search\"\n            [value]=\"searchQuery()\"\n            [placeholder]=\"searchPlaceholder()\"\n            (input)=\"onSearch($event)\"\n          />\n        </label>\n      }\n\n      <div class=\"re-dg-cm__title-row\">\n        @if (controlsVisible()) {\n          <div class=\"re-dg-cm__tools\">\n            <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\n            <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\n          </div>\n        } @else {\n          <span></span>\n        }\n\n        <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\n      </div>\n\n      <div class=\"re-dg-cm__list\">\n        @for (column of list; track column.key) {\n          @let currentPin = pin(column.key);\n          @let disabled = !!column.disabled;\n          @let canHideValue = canHideColumn(column.key);\n\n          <div\n            class=\"re-dg-cm__row\"\n            [attr.draggable]=\"allowReorder() && !disabled\"\n            [class.re-dg-cm__row--disabled]=\"disabled\"\n            [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\n            (dragstart)=\"onDragStart($event, column.key)\"\n            (dragover)=\"onDragOver($event)\"\n            (drop)=\"onDrop($event, column.key)\"\n            (dragend)=\"draggingKey.set(null)\"\n          >\n            <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\n\n            <div class=\"re-dg-cm__checkbox\">\n              <button\n                type=\"button\"\n                [class.active]=\"column.visible !== false\"\n                [disabled]=\"disabled || !canHideValue\"\n                (click)=\"onVisibleChange(column.key)\"\n              >\n                <re-eye-ic [open]=\"column.visible !== false\" />\n              </button>\n              @if (columnTitleTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\n                  [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\n                />\n              } @else {\n                <span>{{ column.header || column.key }}</span>\n              }\n            </div>\n\n            <div class=\"re-dg-cm__actions\">\n              @if (allowPin()) {\n                <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\n                  <button\n                    type=\"button\"\n                    class=\"re-dg-cm__pin-current\"\n                    [disabled]=\"disabled\"\n                    [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\n                    [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\n                    (click)=\"togglePinMenu($event, column.key)\"\n                    [title]=\"pinLabel(currentPin)\"\n                  >\n                    @if (currentPin === 'left') {\n                      <re-pin-ic />\n                    } @else if (currentPin === 'right') {\n                      <re-pin-ic toRight />\n                    } @else {\n                      <re-cross-ic />\n                    }\n                  </button>\n\n                  @if (openedPinMenuKey() === column.key && !disabled) {\n                    <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\n                      <button\n                        type=\"button\"\n                        class=\"pin-button\"\n                        [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\n                        (click)=\"selectPin(column.key, 'left')\"\n                        title=\"Pin left\"\n                      >\n                        <re-pin-ic />\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        class=\"pin-button\"\n                        [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\n                        (click)=\"selectPin(column.key, 'none')\"\n                        title=\"Unpin\"\n                      >\n                        <re-cross-ic />\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        class=\"pin-button\"\n                        [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\n                        (click)=\"selectPin(column.key, 'right')\"\n                        title=\"Pin right\"\n                      >\n                        <re-pin-ic toRight />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EyeIcon, selector: "re-eye-ic", inputs: ["open"] }, { kind: "component", type: CrossIcon, selector: "re-cross-ic" }, { kind: "component", type: PinIcon, selector: "re-pin-ic", inputs: ["toRight"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridColumnManager, isStandalone: true, selector: "re-data-grid-column-manager", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, showAllLabel: { classPropertyName: "showAllLabel", publicName: "showAllLabel", isSignal: true, isRequired: false, transformFunction: null }, hideAllLabel: { classPropertyName: "hideAllLabel", publicName: "hideAllLabel", isSignal: true, isRequired: false, transformFunction: null }, controlsVisible: { classPropertyName: "controlsVisible", publicName: "controlsVisible", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, allowPin: { classPropertyName: "allowPin", publicName: "allowPin", isSignal: true, isRequired: false, transformFunction: null }, allowVisibility: { classPropertyName: "allowVisibility", publicName: "allowVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChange: "columnsChange" }, host: { attributes: { "document:mousedown": "onDocumentMouseDown($event.target)", "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DataGridColumnManagerTriggerDirective, descendants: true, isSignal: true }, { propertyName: "columnTitleTemplate", first: true, predicate: (DataGridColumnManagerColumnTitleDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"re-dg-cm\" #root>\r\n  <button\r\n    type=\"button\"\r\n    [attr.aria-expanded]=\"opened()\"\r\n    [attr.aria-haspopup]=\"'dialog'\"\r\n    (click)=\"toggleOpen()\"\r\n  >\r\n    @if (triggerTemplate(); as template) {\r\n      <ng-container [ngTemplateOutlet]=\"template\" />\r\n    } @else {\r\n      <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\r\n        <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\r\n        <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\r\n      </div>\r\n    }\r\n  </button>\r\n\r\n  @if (opened()) {\r\n    <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\r\n      @let list = filteredColumns();\r\n\r\n      @if (controlsVisible() && searchable()) {\r\n        <label class=\"re-dg-cm__search\">\r\n          <input\r\n            type=\"search\"\r\n            [value]=\"searchQuery()\"\r\n            [placeholder]=\"searchPlaceholder()\"\r\n            (input)=\"onSearch($event)\"\r\n          />\r\n        </label>\r\n      }\r\n\r\n      <div class=\"re-dg-cm__title-row\">\r\n        @if (controlsVisible()) {\r\n          <div class=\"re-dg-cm__tools\">\r\n            <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\r\n            <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\r\n          </div>\r\n        } @else {\r\n          <span></span>\r\n        }\r\n\r\n        <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\r\n      </div>\r\n\r\n      <div class=\"re-dg-cm__list\">\r\n        @for (column of list; track column.key) {\r\n          @let currentPin = pin(column.key);\r\n          @let disabled = !!column.disabled;\r\n          @let canHideValue = canHideColumn(column.key);\r\n\r\n          <div\r\n            class=\"re-dg-cm__row\"\r\n            [attr.draggable]=\"allowReorder() && !disabled\"\r\n            [class.re-dg-cm__row--disabled]=\"disabled\"\r\n            [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\r\n            (dragstart)=\"onDragStart($event, column.key)\"\r\n            (dragover)=\"onDragOver($event)\"\r\n            (drop)=\"onDrop($event, column.key)\"\r\n            (dragend)=\"draggingKey.set(null)\"\r\n          >\r\n            <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\r\n\r\n            <div class=\"re-dg-cm__checkbox\">\r\n              <button\r\n                type=\"button\"\r\n                [class.active]=\"column.visible !== false\"\r\n                [disabled]=\"disabled || !canHideValue\"\r\n                (click)=\"onVisibleChange(column.key)\"\r\n              >\r\n                <re-eye-ic [open]=\"column.visible !== false\" />\r\n              </button>\r\n              @if (columnTitleTemplate()) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\r\n                  [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\r\n                />\r\n              } @else {\r\n                <span>{{ column.header || column.key }}</span>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"re-dg-cm__actions\">\r\n              @if (allowPin()) {\r\n                <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"re-dg-cm__pin-current\"\r\n                    [disabled]=\"disabled\"\r\n                    [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\r\n                    [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\r\n                    (click)=\"togglePinMenu($event, column.key)\"\r\n                    [title]=\"pinLabel(currentPin)\"\r\n                  >\r\n                    @if (currentPin === 'left') {\r\n                      <re-pin-ic />\r\n                    } @else if (currentPin === 'right') {\r\n                      <re-pin-ic toRight />\r\n                    } @else {\r\n                      <re-cross-ic />\r\n                    }\r\n                  </button>\r\n\r\n                  @if (openedPinMenuKey() === column.key && !disabled) {\r\n                    <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"pin-button\"\r\n                        [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\r\n                        (click)=\"selectPin(column.key, 'left')\"\r\n                        title=\"Pin left\"\r\n                      >\r\n                        <re-pin-ic />\r\n                      </button>\r\n\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"pin-button\"\r\n                        [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\r\n                        (click)=\"selectPin(column.key, 'none')\"\r\n                        title=\"Unpin\"\r\n                      >\r\n                        <re-cross-ic />\r\n                      </button>\r\n\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"pin-button\"\r\n                        [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\r\n                        (click)=\"selectPin(column.key, 'right')\"\r\n                        title=\"Pin right\"\r\n                      >\r\n                        <re-pin-ic toRight />\r\n                      </button>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EyeIcon, selector: "re-eye-ic", inputs: ["open"] }, { kind: "component", type: CrossIcon, selector: "re-cross-ic" }, { kind: "component", type: PinIcon, selector: "re-pin-ic", inputs: ["toRight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridColumnManager, decorators: [{
             type: Component,
             args: [{ selector: 're-data-grid-column-manager', standalone: true, host: {
                         'document:mousedown': 'onDocumentMouseDown($event.target)',
                         'window:resize': 'onWindowResize()',
-                    }, imports: [NgTemplateOutlet, EyeIcon, CrossIcon, PinIcon], template: "<div class=\"re-dg-cm\" #root>\n  <button\n    type=\"button\"\n    [attr.aria-expanded]=\"opened()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerTemplate(); as template) {\n      <ng-container [ngTemplateOutlet]=\"template\" />\n    } @else {\n      <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\n        <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\n        <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\n      </div>\n    }\n  </button>\n\n  @if (opened()) {\n    <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\n      @let list = filteredColumns();\n\n      @if (controlsVisible() && searchable()) {\n        <label class=\"re-dg-cm__search\">\n          <input\n            type=\"search\"\n            [value]=\"searchQuery()\"\n            [placeholder]=\"searchPlaceholder()\"\n            (input)=\"onSearch($event)\"\n          />\n        </label>\n      }\n\n      <div class=\"re-dg-cm__title-row\">\n        @if (controlsVisible()) {\n          <div class=\"re-dg-cm__tools\">\n            <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\n            <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\n          </div>\n        } @else {\n          <span></span>\n        }\n\n        <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\n      </div>\n\n      <div class=\"re-dg-cm__list\">\n        @for (column of list; track column.key) {\n          @let currentPin = pin(column.key);\n          @let disabled = !!column.disabled;\n          @let canHideValue = canHideColumn(column.key);\n\n          <div\n            class=\"re-dg-cm__row\"\n            [attr.draggable]=\"allowReorder() && !disabled\"\n            [class.re-dg-cm__row--disabled]=\"disabled\"\n            [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\n            (dragstart)=\"onDragStart($event, column.key)\"\n            (dragover)=\"onDragOver($event)\"\n            (drop)=\"onDrop($event, column.key)\"\n            (dragend)=\"draggingKey.set(null)\"\n          >\n            <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\n\n            <div class=\"re-dg-cm__checkbox\">\n              <button\n                type=\"button\"\n                [class.active]=\"column.visible !== false\"\n                [disabled]=\"disabled || !canHideValue\"\n                (click)=\"onVisibleChange(column.key)\"\n              >\n                <re-eye-ic [open]=\"column.visible !== false\" />\n              </button>\n              @if (columnTitleTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\n                  [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\n                />\n              } @else {\n                <span>{{ column.header || column.key }}</span>\n              }\n            </div>\n\n            <div class=\"re-dg-cm__actions\">\n              @if (allowPin()) {\n                <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\n                  <button\n                    type=\"button\"\n                    class=\"re-dg-cm__pin-current\"\n                    [disabled]=\"disabled\"\n                    [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\n                    [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\n                    (click)=\"togglePinMenu($event, column.key)\"\n                    [title]=\"pinLabel(currentPin)\"\n                  >\n                    @if (currentPin === 'left') {\n                      <re-pin-ic />\n                    } @else if (currentPin === 'right') {\n                      <re-pin-ic toRight />\n                    } @else {\n                      <re-cross-ic />\n                    }\n                  </button>\n\n                  @if (openedPinMenuKey() === column.key && !disabled) {\n                    <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\n                      <button\n                        type=\"button\"\n                        class=\"pin-button\"\n                        [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\n                        (click)=\"selectPin(column.key, 'left')\"\n                        title=\"Pin left\"\n                      >\n                        <re-pin-ic />\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        class=\"pin-button\"\n                        [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\n                        (click)=\"selectPin(column.key, 'none')\"\n                        title=\"Unpin\"\n                      >\n                        <re-cross-ic />\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        class=\"pin-button\"\n                        [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\n                        (click)=\"selectPin(column.key, 'right')\"\n                        title=\"Pin right\"\n                      >\n                        <re-pin-ic toRight />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"] }]
+                    }, imports: [NgTemplateOutlet, EyeIcon, CrossIcon, PinIcon], template: "<div class=\"re-dg-cm\" #root>\r\n  <button\r\n    type=\"button\"\r\n    [attr.aria-expanded]=\"opened()\"\r\n    [attr.aria-haspopup]=\"'dialog'\"\r\n    (click)=\"toggleOpen()\"\r\n  >\r\n    @if (triggerTemplate(); as template) {\r\n      <ng-container [ngTemplateOutlet]=\"template\" />\r\n    } @else {\r\n      <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\r\n        <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\r\n        <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\r\n      </div>\r\n    }\r\n  </button>\r\n\r\n  @if (opened()) {\r\n    <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\r\n      @let list = filteredColumns();\r\n\r\n      @if (controlsVisible() && searchable()) {\r\n        <label class=\"re-dg-cm__search\">\r\n          <input\r\n            type=\"search\"\r\n            [value]=\"searchQuery()\"\r\n            [placeholder]=\"searchPlaceholder()\"\r\n            (input)=\"onSearch($event)\"\r\n          />\r\n        </label>\r\n      }\r\n\r\n      <div class=\"re-dg-cm__title-row\">\r\n        @if (controlsVisible()) {\r\n          <div class=\"re-dg-cm__tools\">\r\n            <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\r\n            <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\r\n          </div>\r\n        } @else {\r\n          <span></span>\r\n        }\r\n\r\n        <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\r\n      </div>\r\n\r\n      <div class=\"re-dg-cm__list\">\r\n        @for (column of list; track column.key) {\r\n          @let currentPin = pin(column.key);\r\n          @let disabled = !!column.disabled;\r\n          @let canHideValue = canHideColumn(column.key);\r\n\r\n          <div\r\n            class=\"re-dg-cm__row\"\r\n            [attr.draggable]=\"allowReorder() && !disabled\"\r\n            [class.re-dg-cm__row--disabled]=\"disabled\"\r\n            [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\r\n            (dragstart)=\"onDragStart($event, column.key)\"\r\n            (dragover)=\"onDragOver($event)\"\r\n            (drop)=\"onDrop($event, column.key)\"\r\n            (dragend)=\"draggingKey.set(null)\"\r\n          >\r\n            <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\r\n\r\n            <div class=\"re-dg-cm__checkbox\">\r\n              <button\r\n                type=\"button\"\r\n                [class.active]=\"column.visible !== false\"\r\n                [disabled]=\"disabled || !canHideValue\"\r\n                (click)=\"onVisibleChange(column.key)\"\r\n              >\r\n                <re-eye-ic [open]=\"column.visible !== false\" />\r\n              </button>\r\n              @if (columnTitleTemplate()) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\r\n                  [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\r\n                />\r\n              } @else {\r\n                <span>{{ column.header || column.key }}</span>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"re-dg-cm__actions\">\r\n              @if (allowPin()) {\r\n                <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"re-dg-cm__pin-current\"\r\n                    [disabled]=\"disabled\"\r\n                    [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\r\n                    [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\r\n                    (click)=\"togglePinMenu($event, column.key)\"\r\n                    [title]=\"pinLabel(currentPin)\"\r\n                  >\r\n                    @if (currentPin === 'left') {\r\n                      <re-pin-ic />\r\n                    } @else if (currentPin === 'right') {\r\n                      <re-pin-ic toRight />\r\n                    } @else {\r\n                      <re-cross-ic />\r\n                    }\r\n                  </button>\r\n\r\n                  @if (openedPinMenuKey() === column.key && !disabled) {\r\n                    <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"pin-button\"\r\n                        [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\r\n                        (click)=\"selectPin(column.key, 'left')\"\r\n                        title=\"Pin left\"\r\n                      >\r\n                        <re-pin-ic />\r\n                      </button>\r\n\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"pin-button\"\r\n                        [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\r\n                        (click)=\"selectPin(column.key, 'none')\"\r\n                        title=\"Unpin\"\r\n                      >\r\n                        <re-cross-ic />\r\n                      </button>\r\n\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"pin-button\"\r\n                        [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\r\n                        (click)=\"selectPin(column.key, 'right')\"\r\n                        title=\"Pin right\"\r\n                      >\r\n                        <re-pin-ic toRight />\r\n                      </button>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], showAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllLabel", required: false }] }], hideAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAllLabel", required: false }] }], controlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsVisible", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], allowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReorder", required: false }] }], allowPin: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPin", required: false }] }], allowVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowVisibility", required: false }] }], columnsChange: [{ type: i0.Output, args: ["columnsChange"] }], triggerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridColumnManagerTriggerDirective), { isSignal: true }] }], columnTitleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridColumnManagerColumnTitleDirective), { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**

package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-C-_Cnt4M.mjs → reforgium-data-grid-grid-overlay-scroll.feature-BnLB5Ny4.mjs}

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

package/fesm2022/{reforgium-data-grid-reforgium-data-grid-YSzBRJ5h.mjs → reforgium-data-grid-reforgium-data-grid-DK84fYFQ.mjs}

@@ -1415,7 +1415,7 @@ function createGridExpanderFeature(ctx) {
             return map;
         });
         const columns = ctx
-            .getExtendedColumns()
+            .getVmColumns()
             .map((col) => (col.expandBy === column.key ? { ...col, visible: expanded } : col));
         ctx.setVmColumns(columns);
     };
@@ -2825,6 +2825,7 @@ class DataGrid {
                 },
                 () => {
                     this.pinnedRows();
+                    this.vm.pinnedRows.set(this.pinnedRows());
                     this.vm.containerWidth();
                     this.onVerticalScroll();
                 },
@@ -3072,7 +3073,6 @@ class DataGrid {
     initVm() {
         this.vm.scrollEl.set(this.scrollEl());
         this.vm.columns.set(this.extendedColumns());
-        this.vm.pinnedRows.set(this.pinnedRows());
         this.headerGroupsFeature.syncHeaderGroups();
         this.headerMeasureFeature.scheduleMeasure();
     }
@@ -3159,7 +3159,7 @@ class DataGrid {
         if (this.overlayScrollFeaturePromise) {
             return this.overlayScrollFeaturePromise;
         }
-        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-C-_Cnt4M.mjs').then(({ createGridOverlayScrollFeature }) => {
+        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-BnLB5Ny4.mjs').then(({ createGridOverlayScrollFeature }) => {
             const feature = createGridOverlayScrollFeature({
                 getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
                 getThumbTop: () => this.vm.thumbTopPx(),
@@ -3284,4 +3284,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, DEFAULT_DATA_GRID_DEFAULTS as p, provideDataGridDefaults as q, DataGrid as r };
-//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-YSzBRJ5h.mjs.map
+//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-DK84fYFQ.mjs.map

package/fesm2022/reforgium-data-grid.mjs

@@ -1,2 +1,2 @@
-export { o as DATA_GRID_CONFIG, p as DEFAULT_DATA_GRID_DEFAULTS, r 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, q as provideDataGridDefaults } from './reforgium-data-grid-reforgium-data-grid-YSzBRJ5h.mjs';
+export { o as DATA_GRID_CONFIG, p as DEFAULT_DATA_GRID_DEFAULTS, r 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, q as provideDataGridDefaults } from './reforgium-data-grid-reforgium-data-grid-DK84fYFQ.mjs';
 //# sourceMappingURL=reforgium-data-grid.mjs.map

package/package.json

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