@clr/angular 18.2.2 → 18.4.0

package/fesm2022/clr-angular-data-datagrid.mjs

@@ -1,35 +1,37 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, ViewChild, Component, PLATFORM_ID, Inject, DOCUMENT, EventEmitter, ElementRef, booleanAttribute, Input, Output, Optional, ContentChild, ChangeDetectionStrategy, ContentChildren, forwardRef, HostListener, ViewContainerRef, runInInjectionContext, Injector, ChangeDetectorRef, NgZone, Renderer2, inject, EnvironmentInjector, TemplateRef, IterableDiffers, afterNextRender, ViewChildren, InjectionToken, NgModule } from '@angular/core';
+import { signal, Injectable, InjectionToken, Directive, ViewChild, Component, PLATFORM_ID, Inject, DOCUMENT, EventEmitter, ElementRef, booleanAttribute, Input, Output, Optional, inject, ContentChild, ChangeDetectionStrategy, ContentChildren, forwardRef, HostListener, ViewContainerRef, runInInjectionContext, createEnvironmentInjector, ChangeDetectorRef, NgZone, Renderer2, EnvironmentInjector, TemplateRef, IterableDiffers, afterNextRender, RendererStyleFlags2, ViewChildren, SkipSelf, NgModule } from '@angular/core';
 import * as i2 from '@clr/angular/utils';
-import { uniqueIdFactory, Keys, HostWrapper, IfExpandService, ClrLoadingState, ClrExpandableAnimationDirective, LoadingListener, WillyWonka, OompaLoompa, ClrKeyFocus, DomAdapter, ClrIfExpanded, CdkDragModule, CdkTrapFocusModule, ClrLoadingModule, ClrConditionalModule, ClrOutsideClickModule, ClrExpandableAnimationModule, ClrKeyFocusModule } from '@clr/angular/utils';
-import * as i2$2 from 'rxjs';
+import { uniqueIdFactory, Keys, HostWrapper, IfExpandService, ClrLoadingState, ClrExpandableAnimationDirective, LoadingListener, WillyWonka, OompaLoompa, ClrKeyFocus, FocusableItem, FOCUS_SERVICE_PROVIDER, BASIC_FOCUSABLE_ITEM_PROVIDER, DomAdapter, ClrIfExpanded, CdkDragModule, CdkTrapFocusModule, ClrLoadingModule, ClrConditionalModule, ClrOutsideClickModule, ClrExpandableAnimationModule, ClrKeyFocusModule } from '@clr/angular/utils';
+import * as i12 from 'rxjs';
 import { Subject, BehaviorSubject, fromEvent, ReplaySubject, combineLatest, merge, of } from 'rxjs';
 import { filter, takeUntil, delay, debounceTime, map, switchMap } from 'rxjs/operators';
 import * as i3 from '@clr/angular/popover/common';
-import { ClrPopoverPosition, ClrPopoverType, ClrPopoverHostDirective, mapPopoverKeyToPosition, ClrPopoverModuleNext } from '@clr/angular/popover/common';
+import { ClrPopoverPosition, ClrPopoverType, ClrPopoverHostDirective, mapPopoverKeyToPosition, ClrPopoverContent, ClrPopoverModuleNext } from '@clr/angular/popover/common';
 import * as i1 from '@clr/angular/modal';
-import * as i9 from '@angular/common';
+import * as i10 from '@angular/common';
 import { isPlatformBrowser, NgForOf, CommonModule } from '@angular/common';
-import * as i5 from '@clr/angular/icon';
-import { ClarityIcons, ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, ClrIcon } from '@clr/angular/icon';
-import * as i4 from '@clr/angular/forms/common';
+import * as i4 from '@clr/angular/icon';
+import { ClarityIcons, ellipsisVerticalIcon, ellipsisGridCircleIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, pinIcon, unpinIcon, ClrIcon } from '@clr/angular/icon';
+import * as i4$1 from '@clr/angular/forms/common';
 import { ClrControlLabel } from '@clr/angular/forms/common';
-import * as i5$1 from '@clr/angular/forms/number-input';
+import * as i5 from '@clr/angular/forms/number-input';
 import { ClrNumberInputModule } from '@clr/angular/forms/number-input';
-import * as i13 from '@angular/forms';
+import * as i14 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i5$2 from '@clr/angular/forms/input';
+import * as i5$1 from '@clr/angular/forms/input';
 import { ClrInputModule } from '@clr/angular/forms/input';
 import { ClrSignpost } from '@clr/angular/popover/signpost';
-import * as i12 from '@clr/angular/forms/radio';
+import * as i13 from '@clr/angular/forms/radio';
 import { ClrRadioModule } from '@clr/angular/forms/radio';
-import * as i14 from '@clr/angular/progress/spinner';
+import * as i15 from '@clr/angular/progress/spinner';
 import { ClrSpinnerModule } from '@clr/angular/progress/spinner';
 import * as i2$1 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/cdk/scrolling';
-import { FixedSizeVirtualScrollStrategy, VIRTUAL_SCROLL_STRATEGY, ScrollDispatcher, ViewportRuler, CdkVirtualScrollable, CdkVirtualScrollViewport, CDK_VIRTUAL_SCROLL_VIEWPORT, CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { FixedSizeVirtualScrollStrategy, VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollable, CdkVirtualScrollViewport, ScrollDispatcher, ViewportRuler, CDK_VIRTUAL_SCROLL_VIEWPORT, CdkVirtualForOf } from '@angular/cdk/scrolling';
+import * as i6 from '@clr/angular/popover/dropdown';
+import { DropdownFocusHandler, ClrDropdown, ClrDropdownMenu, ROOT_DROPDOWN_PROVIDER, ClrDropdownItem, ClrDropdownModule } from '@clr/angular/popover/dropdown';
 import * as i7 from '@clr/angular/forms/checkbox';
 import { ClrCheckboxModule } from '@clr/angular/forms/checkbox';
 import { ClrSelectModule } from '@clr/angular/forms/select';
@@ -341,6 +343,23 @@ class DatagridStringFilterImpl {
     }
 }
 
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+var DatagridColumnChanges;
+(function (DatagridColumnChanges) {
+    DatagridColumnChanges[DatagridColumnChanges["WIDTH"] = 0] = "WIDTH";
+    DatagridColumnChanges[DatagridColumnChanges["HIDDEN"] = 1] = "HIDDEN";
+    DatagridColumnChanges[DatagridColumnChanges["INITIALIZE"] = 2] = "INITIALIZE";
+    DatagridColumnChanges[DatagridColumnChanges["PINNED"] = 3] = "PINNED";
+})(DatagridColumnChanges || (DatagridColumnChanges = {}));
+const ALL_COLUMN_CHANGES = Object.keys(DatagridColumnChanges)
+    .map(key => DatagridColumnChanges[key])
+    .filter(key => key === parseInt(key, 10) && key !== DatagridColumnChanges.INITIALIZE); // extracts only integer keys
+
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -367,6 +386,63 @@ var ClrDatagridAriaSortOrder;
     ClrDatagridAriaSortOrder["DESC"] = "descending";
 })(ClrDatagridAriaSortOrder || (ClrDatagridAriaSortOrder = {}));
 
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Lets `clr-dg-column-actions` and the filter of the same column find each other without either
+ * importing the other, and without depending on the order they are declared in.
+ *
+ * It is provided by `ClrDatagridColumn`, so every filter flavour resolves the same instance - a
+ * projected `clr-dg-filter` is a content child of the column, and the `clr-dg-string-filter` and
+ * `clr-dg-numeric-filter` the column creates for `clrDgField` live in its view.
+ */
+class ColumnActionsService {
+    constructor() {
+        /**
+         * Whether the filter keeps its own toggle in the column header. An actions menu turns this off and
+         * opens the filter itself, so the header keeps a single control per column - unless
+         * `clrDgKeepFilterInHeader` asks to keep the toggle.
+         *
+         * A signal rather than a plain flag because the menu and the filter are siblings: either can be
+         * created first, and the filter has to react whenever the answer changes.
+         */
+        this.filterInHeader = signal(true, ...(ngDevMode ? [{ debugName: "filterInHeader" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the column has an actions menu at all, whatever it does with the filter. While it does,
+         * the column drops its own pin toggle, because the menu offers Pin Column instead.
+         */
+        this.menuPresent = signal(false, ...(ngDevMode ? [{ debugName: "menuPresent" }] : /* istanbul ignore next */ []));
+        /** The filter rendered for this column, if it has one. */
+        this.filter = signal(null, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnActionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnActionsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnActionsService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const COLUMN_STATE = new InjectionToken('COLUMN_STATE');
+function columnStateFactory() {
+    return new BehaviorSubject({
+        changes: [],
+    });
+}
+const COLUMN_STATE_PROVIDER = {
+    provide: COLUMN_STATE,
+    useFactory: columnStateFactory,
+};
+
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -384,6 +460,7 @@ class CustomFilter {
  */
 const STRICT_WIDTH_CLASS = 'datagrid-fixed-width';
 const HIDDEN_COLUMN_CLASS = 'datagrid-hidden-column';
+const PINNED_COLUMN_CLASS = 'datagrid-pinned-column';
 
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
@@ -418,10 +495,10 @@ class StateDebouncer {
             this._change.next();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StateDebouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StateDebouncer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: StateDebouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: StateDebouncer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StateDebouncer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: StateDebouncer, decorators: [{
             type: Injectable
         }] });
 
@@ -570,10 +647,10 @@ class Page {
         this.preventEmit = preventEmit;
         this.size = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Page, deps: [{ token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Page }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Page, deps: [{ token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Page }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Page, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Page, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: StateDebouncer }] });
 
@@ -671,10 +748,10 @@ class FiltersProvider {
         this._change.next(filters);
         this.stateDebouncer.changeDone();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FiltersProvider, deps: [{ token: Page }, { token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FiltersProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FiltersProvider, deps: [{ token: Page }, { token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FiltersProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FiltersProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FiltersProvider, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Page }, { type: StateDebouncer }] });
 class RegisteredFilter {
@@ -716,10 +793,10 @@ class DatagridFilterRegistrar {
             delete this.registered;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridFilterRegistrar, deps: [{ token: FiltersProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridFilterRegistrar, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridFilterRegistrar, deps: [{ token: FiltersProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridFilterRegistrar, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridFilterRegistrar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridFilterRegistrar, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: FiltersProvider }] });
 
@@ -737,14 +814,14 @@ class WrappedColumn {
     ngOnDestroy() {
         this.columnView.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: WrappedColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: WrappedColumn, isStandalone: false, selector: "dg-wrapped-column", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["columnPortal"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WrappedColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: WrappedColumn, isStandalone: false, selector: "dg-wrapped-column", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["columnPortal"], descendants: true }], ngImport: i0, template: `
     <ng-template #columnPortal>
       <ng-content></ng-content>
     </ng-template>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: WrappedColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WrappedColumn, decorators: [{
             type: Component,
             args: [{
                     selector: 'dg-wrapped-column',
@@ -835,10 +912,10 @@ class Sort {
     emitChange() {
         this._change.next(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Sort, deps: [{ token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Sort }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Sort, deps: [{ token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Sort }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Sort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Sort, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: StateDebouncer }] });
 
@@ -848,9 +925,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+const MAX_DETAIL_WIDTH = 100;
+const DEFAULT_DETAIL_WIDTH = 66;
+const MIN_DETAIL_WIDTH = 0;
 class DetailService {
     constructor(modalStackService) {
         this.modalStackService = modalStackService;
+        this.detailWidth = DEFAULT_DETAIL_WIDTH;
         this.preventScroll = false;
         this.toggleState = false;
         this._enabled = false;
@@ -907,13 +988,83 @@ class DetailService {
     isRowOpen(item) {
         return !!(this.toggleState && this.cache === item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DetailService, deps: [{ token: i1.ModalStackService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DetailService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DetailService, deps: [{ token: i1.ModalStackService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DetailService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DetailService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DetailService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.ModalStackService }] });
 
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ColumnsService {
+    constructor() {
+        this.columns = [];
+        this.columnsStateChange = new BehaviorSubject(null);
+        this._cache = [];
+    }
+    get columnStates() {
+        return this.columns.map(column => column.value);
+    }
+    get hasHideableColumns() {
+        return this.columnStates.filter(state => state.hideable).length > 0;
+    }
+    get visibleColumns() {
+        return this.columnStates.filter(state => !state.hidden);
+    }
+    get hasPinnedColumns() {
+        return this.columnStates.some(state => state.pinned);
+    }
+    /**
+     * Tells whether the column at the given index is pinned (static). Columns and cells are
+     * matched by their declaration index, so this is what the header, the rows and a column aligned
+     * row detail use to decide which views belong in the static container.
+     */
+    isPinned(columnIndex) {
+        return !!this.columns[columnIndex]?.value.pinned;
+    }
+    cache() {
+        this._cache = this.columns.map(subject => {
+            const value = { ...subject.value };
+            delete value.changes;
+            return value;
+        });
+    }
+    hasCache() {
+        return !!this._cache.length;
+    }
+    resetToLastCache() {
+        this._cache.forEach((state, index) => {
+            // Just emit the exact value from the cache
+            const cachedState = { ...state, changes: ALL_COLUMN_CHANGES };
+            this.columns[index].next(cachedState);
+            this.columnsStateChange.next(cachedState);
+        });
+        this._cache = [];
+    }
+    // Helper method to emit a change to a column only when there is an actual diff to process for that column
+    emitStateChangeAt(columnIndex, diff) {
+        if (!this.columns[columnIndex]) {
+            return;
+        }
+        this.emitStateChange(this.columns[columnIndex], diff);
+    }
+    emitStateChange(column, diff) {
+        const changedState = { ...column.value, ...diff };
+        column.next(changedState);
+        this.columnsStateChange.next(changedState);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnsService, decorators: [{
+            type: Injectable
+        }] });
+
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -956,10 +1107,10 @@ class DatagridRenderOrganizer {
         this.alreadySized = true;
         this._renderStep.next(DatagridRenderStep.CALCULATE_MODE_OFF);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridRenderOrganizer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridRenderOrganizer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridRenderOrganizer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridRenderOrganizer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridRenderOrganizer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridRenderOrganizer, decorators: [{
             type: Injectable
         }] });
 
@@ -1010,10 +1161,10 @@ class ColumnResizerService {
             this.isWithinMaxResizeRange = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnResizerService, deps: [{ token: i0.ElementRef }, { token: i2.DomAdapter }, { token: DatagridRenderOrganizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnResizerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnResizerService, deps: [{ token: i0.ElementRef }, { token: i2.DomAdapter }, { token: DatagridRenderOrganizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnResizerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnResizerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnResizerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.DomAdapter }, { type: DatagridRenderOrganizer }] });
 
@@ -1049,10 +1200,10 @@ class TableSizeService {
         }
         return `${this.tableRef.clientHeight}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TableSizeService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TableSizeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableSizeService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableSizeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TableSizeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableSizeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1163,8 +1314,8 @@ class ClrDatagridColumnSeparator {
     isArrowRightKeyEvent(event) {
         return event.key === Keys.ArrowRight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumnSeparator, deps: [{ token: ColumnResizerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TableSizeService }, { token: i2.ClrCommonStringsService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridColumnSeparator, isStandalone: false, selector: "clr-dg-column-separator", host: { properties: { "class.datagrid-column-separator": "true" } }, viewQueries: [{ propertyName: "resizeTrackerRef", first: true, predicate: ["resizeTracker"], descendants: true }, { propertyName: "columnHandleRef", first: true, predicate: ["columnHandle"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnSeparator, deps: [{ token: ColumnResizerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TableSizeService }, { token: i2.ClrCommonStringsService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridColumnSeparator, isStandalone: false, selector: "clr-dg-column-separator", host: { properties: { "class.datagrid-column-separator": "true" } }, viewQueries: [{ propertyName: "resizeTrackerRef", first: true, predicate: ["resizeTracker"], descendants: true }, { propertyName: "columnHandleRef", first: true, predicate: ["columnHandle"], descendants: true }], ngImport: i0, template: `
     <button
       type="button"
       class="datagrid-column-handle"
@@ -1183,7 +1334,7 @@ class ClrDatagridColumnSeparator {
     <div class="datagrid-column-resize-tracker" #resizeTracker></div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkDragModule_CdkDrag, selector: "[cdkDrag]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumnSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnSeparator, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-column-separator',
@@ -1904,10 +2055,10 @@ class KeyNavigationGridController {
         }
         elementToFocus.focus(options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: KeyNavigationGridController, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: KeyNavigationGridController }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KeyNavigationGridController, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KeyNavigationGridController }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: KeyNavigationGridController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KeyNavigationGridController, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -1923,11 +2074,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * since it can be anything (not just a text input).
  */
 class ClrDatagridFilter extends DatagridFilterRegistrar {
-    constructor(_filters, commonStrings, popoverService, keyNavigation) {
+    constructor(_filters, commonStrings, popoverService, keyNavigation, columnActions) {
         super(_filters);
         this.commonStrings = commonStrings;
         this.popoverService = popoverService;
         this.keyNavigation = keyNavigation;
+        this.columnActions = columnActions;
         this.openChange = new EventEmitter(false);
         this.ariaExpanded = false;
         this.popoverId = uniqueIdFactory();
@@ -1938,7 +2090,14 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
         this.subs.push(popoverService.openChange.subscribe(change => {
             this.ariaExpanded = change;
             this.openChange.emit(change);
+            // Set here rather than in the open setter, so it applies however the filter is opened - its
+            // own toggle, clrDgFilterOpen, or the column actions menu.
+            if (keyNavigation) {
+                keyNavigation.skipItemFocus = change;
+            }
         }));
+        // Optional so the filter keeps working outside a column, e.g. in isolated tests.
+        columnActions?.filter.set(this);
     }
     get open() {
         return this.popoverService.open;
@@ -1947,9 +2106,6 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
         if (this.popoverService.open !== open) {
             this.popoverService.open = open;
             this.openChange.emit(open);
-            if (this.keyNavigation) {
-                this.keyNavigation.skipItemFocus = open;
-            }
         }
     }
     set customFilter(filter) {
@@ -1964,26 +2120,36 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.subs.forEach(sub => sub.unsubscribe());
+        if (this.columnActions?.filter() === this) {
+            this.columnActions.filter.set(null);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: i2.ClrCommonStringsService }, { token: i3.ClrPopoverService }, { token: KeyNavigationGridController, optional: true }, { token: ColumnActionsService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridFilter, isStandalone: false, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open", booleanAttribute], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+    <!--
+      The toggle stands down when the column has a clr-dg-column-actions menu, which then owns
+      opening this filter. Nothing else here changes: the popover is still driven through the
+      column's ClrPopoverService, the menu just points its origin at its own trigger instead.
+    -->
+    @if (columnActions?.filterInHeader() ?? true) {
+      <button
+        class="datagrid-filter-toggle"
+        type="button"
+        #anchor
+        [attr.aria-expanded]="ariaExpanded"
+        [attr.aria-controls]="popoverId"
+        clrPopoverOrigin
+        clrPopoverOpenCloseButton
+        [class.datagrid-filter-open]="open"
+        [class.datagrid-filtered]="active"
+      >
+        <cds-icon
+          [status]="active ? 'info' : null"
+          [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
+          solid
+        ></cds-icon>
+      </button>
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: i2.ClrCommonStringsService }, { token: i3.ClrPopoverService }, { token: KeyNavigationGridController, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.3", type: ClrDatagridFilter, isStandalone: false, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open", booleanAttribute], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-    <button
-      class="datagrid-filter-toggle"
-      type="button"
-      #anchor
-      [attr.aria-expanded]="ariaExpanded"
-      [attr.aria-controls]="popoverId"
-      clrPopoverOrigin
-      clrPopoverOpenCloseButton
-      [class.datagrid-filter-open]="open"
-      [class.datagrid-filtered]="active"
-    >
-      <cds-icon
-        [status]="active ? 'info' : null"
-        [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
-        solid
-      ></cds-icon>
-    </button>
 
     <div
       class="datagrid-filter"
@@ -2001,32 +2167,39 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
 
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }, { kind: "directive", type: i3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-filter',
                     // We register this component as a CustomFilter, for the parent column to detect it.
                     providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }],
                     template: `
-    <button
-      class="datagrid-filter-toggle"
-      type="button"
-      #anchor
-      [attr.aria-expanded]="ariaExpanded"
-      [attr.aria-controls]="popoverId"
-      clrPopoverOrigin
-      clrPopoverOpenCloseButton
-      [class.datagrid-filter-open]="open"
-      [class.datagrid-filtered]="active"
-    >
-      <cds-icon
-        [status]="active ? 'info' : null"
-        [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
-        solid
-      ></cds-icon>
-    </button>
+    <!--
+      The toggle stands down when the column has a clr-dg-column-actions menu, which then owns
+      opening this filter. Nothing else here changes: the popover is still driven through the
+      column's ClrPopoverService, the menu just points its origin at its own trigger instead.
+    -->
+    @if (columnActions?.filterInHeader() ?? true) {
+      <button
+        class="datagrid-filter-toggle"
+        type="button"
+        #anchor
+        [attr.aria-expanded]="ariaExpanded"
+        [attr.aria-controls]="popoverId"
+        clrPopoverOrigin
+        clrPopoverOpenCloseButton
+        [class.datagrid-filter-open]="open"
+        [class.datagrid-filtered]="active"
+      >
+        <cds-icon
+          [status]="active ? 'info' : null"
+          [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
+          solid
+        ></cds-icon>
+      </button>
+    }
 
     <div
       class="datagrid-filter"
@@ -2049,6 +2222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [{ type: FiltersProvider }, { type: i2.ClrCommonStringsService }, { type: i3.ClrPopoverService }, { type: KeyNavigationGridController, decorators: [{
                     type: Optional
+                }] }, { type: ColumnActionsService, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { openChange: [{
                 type: Output,
                 args: ['clrDgFilterOpenChange']
@@ -2201,8 +2376,8 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
             sub.unsubscribe();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridNumericFilter, deps: [{ token: FiltersProvider }, { token: i2.DomAdapter }, { token: i2.ClrCommonStringsService }, { token: i3.ClrPopoverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: DatagridNumericFilter, isStandalone: false, selector: "clr-dg-numeric-filter", inputs: { minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], fromLabel: ["clrFilterFromLabel", "fromLabel"], toLabel: ["clrFilterToLabel", "toLabel"], value: ["clrFilterValue", "value"], customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridNumericFilter, deps: [{ token: FiltersProvider }, { token: i2.DomAdapter }, { token: i2.ClrCommonStringsService }, { token: i3.ClrPopoverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: DatagridNumericFilter, isStandalone: false, selector: "clr-dg-numeric-filter", inputs: { minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], fromLabel: ["clrFilterFromLabel", "fromLabel"], toLabel: ["clrFilterToLabel", "toLabel"], value: ["clrFilterValue", "value"], customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
       <div class="datagrid-numeric-filter-form">
         <clr-number-input-container>
@@ -2235,9 +2410,9 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
         </clr-number-input-container>
       </div>
     </clr-dg-filter>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i5$1.ClrNumberInput, selector: "input[type=\"number\"][clrNumberInput]" }, { kind: "component", type: i5$1.ClrNumberInputContainer, selector: "clr-number-input-container" }, { kind: "directive", type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i13.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i5.ClrNumberInput, selector: "input[type=\"number\"][clrNumberInput]" }, { kind: "component", type: i5.ClrNumberInputContainer, selector: "clr-number-input-container" }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridNumericFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridNumericFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-numeric-filter',
@@ -2411,8 +2586,8 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
             COLUMN: columnTitleElement?.textContent.trim() || '',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridStringFilter, deps: [{ token: FiltersProvider }, { token: i2.DomAdapter }, { token: i2.ClrCommonStringsService }, { token: i3.ClrPopoverService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: DatagridStringFilter, isStandalone: false, selector: "clr-dg-string-filter", inputs: { placeholder: ["clrFilterPlaceholder", "placeholder"], label: ["clrFilterLabel", "label"], customStringFilter: ["clrDgStringFilter", "customStringFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridStringFilter, deps: [{ token: FiltersProvider }, { token: i2.DomAdapter }, { token: i2.ClrCommonStringsService }, { token: i3.ClrPopoverService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: DatagridStringFilter, isStandalone: false, selector: "clr-dg-string-filter", inputs: { placeholder: ["clrFilterPlaceholder", "placeholder"], label: ["clrFilterLabel", "label"], customStringFilter: ["clrDgStringFilter", "customStringFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
       <clr-input-container>
         <label>{{ labelValue }}</label>
@@ -2428,9 +2603,9 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
         />
       </clr-input-container>
     </clr-dg-filter>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i5$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i5$2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i5$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i5$1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridStringFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridStringFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-string-filter',
@@ -2484,7 +2659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagridColumn extends DatagridFilterRegistrar {
-    constructor(el, _sort, filters, vcr, detailService, changeDetectorRef, commonStrings) {
+    constructor(el, _sort, filters, vcr, detailService, changeDetectorRef, commonStrings, columnsService, columnState) {
         super(filters);
         this.el = el;
         this._sort = _sort;
@@ -2492,13 +2667,25 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         this.detailService = detailService;
         this.changeDetectorRef = changeDetectorRef;
         this.commonStrings = commonStrings;
+        this.columnsService = columnsService;
+        this.columnState = columnState;
         this.disableUnsort = false;
+        /**
+         * Lets the user pin and unpin the column from within the datagrid. It only offers the control - the
+         * pinned state itself stays on `clrDgPinned`.
+         * The control is a pin toggle in the column header, or Pin Column in the column's
+         * `clr-dg-column-actions` when it has one - never both, so the header keeps one control per action.
+         */
+        this.pinnable = false;
         this.sortOrderChange = new EventEmitter();
+        this.pinnedChange = new EventEmitter();
         this.filterValueChange = new EventEmitter();
         /**
          * A custom filter for this column that can be provided in the projected content
          */
         this.customFilter = false;
+        // Provided by this column itself, and shared with its actions menu and filter.
+        this.columnActions = inject(ColumnActionsService);
         /*
          * What type is this column?  This defaults to STRING, but can also be
          * set to NUMBER.  Unsupported types default to STRING. Users can set it
@@ -2514,12 +2701,21 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
          */
         this.subscriptions = [];
         this._showSeparator = true;
+        this._pinned = false;
         this.subscriptions.push(this.listenForSortingChanges());
         this.subscriptions.push(this.listenForDetailPaneChanges());
     }
     get isHidden() {
         return this.el.nativeElement.classList.contains(HIDDEN_COLUMN_CLASS);
     }
+    /**
+     * Whether the column is currently rendered as pinned. This can differ from the `pinned` input
+     * while the detail pane is open, because pinning is suspended for as long as it shows a single
+     * column.
+     */
+    get isPinned() {
+        return this.el.nativeElement.classList.contains(PINNED_COLUMN_CLASS);
+    }
     get showSeparator() {
         return this._showSeparator;
     }
@@ -2527,6 +2723,29 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         this._showSeparator = value;
         this.changeDetectorRef.markForCheck();
     }
+    /**
+     * Pins the column to the left of the datagrid, so it stays visible while the remaining
+     * columns are scrolled horizontally. Pinned columns keep their declaration order and are
+     * rendered before the scrollable ones, right after the built-in row controls.
+     */
+    get pinned() {
+        return this._pinned;
+    }
+    set pinned(value) {
+        if (this._pinned === value) {
+            return;
+        }
+        this._pinned = value;
+        // The column state is what the header and the rows read to decide where to project the
+        // column and its cells. It is optional only so the column keeps working when it is used
+        // outside the render directives, e.g. in isolated tests.
+        if (this.columnState) {
+            this.columnsService.emitStateChange(this.columnState, {
+                pinned: value,
+                changes: [DatagridColumnChanges.PINNED],
+            });
+        }
+    }
     // TODO: We might want to make this an enum in the future
     get colType() {
         return this._colType;
@@ -2692,10 +2911,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
             return;
         }
         if (!this.disableUnsort && reverse === undefined && this.sortOrder === ClrDatagridSortOrder.DESC) {
-            this._sortOrder = ClrDatagridSortOrder.UNSORTED;
-            this._sort.clear();
-            this._sortDirection = null;
-            this.sortOrderChange.emit(this._sortOrder);
+            this.clearSort();
             return;
         }
         this._sort.toggle(this._sortBy, reverse);
@@ -2705,6 +2921,34 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         this._sortDirection = this._sortOrder === ClrDatagridSortOrder.DESC ? 'down' : 'up';
         this.sortOrderChange.emit(this._sortOrder);
     }
+    /**
+     * Returns the datagrid to its unsorted state. Both the tri-state title button and the sort actions
+     * in `clr-dg-column-actions` go through here, so the two cannot drift apart.
+     */
+    clearSort() {
+        if (!this.sortable || this._sortOrder === ClrDatagridSortOrder.UNSORTED) {
+            return;
+        }
+        this._sortOrder = ClrDatagridSortOrder.UNSORTED;
+        this._sort.clear();
+        this._sortDirection = null;
+        this.sortOrderChange.emit(this._sortOrder);
+    }
+    /**
+     * Pins or unpins the column. Going through the `pinned` setter keeps the rendering in sync, and the
+     * output lets the application follow a change it did not initiate - without it a one-way
+     * [clrDgPinned] binding would write the old value straight back.
+     */
+    togglePinned() {
+        this.pinned = !this.pinned;
+        this.pinnedChange.emit(this.pinned);
+    }
+    onPinToggleClick(event) {
+        // The header is a drop target for the column ordering addon and a click target for the sort
+        // button next to the toggle, so the toggle keeps its click to itself.
+        event.stopPropagation();
+        this.togglePinned();
+    }
     listenForDetailPaneChanges() {
         return this.detailService.stateChange.subscribe(state => {
             if (this.showSeparator !== !state) {
@@ -2748,8 +2992,8 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
             delete this.initFilterValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: i0.ElementRef }, { token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridColumn, isStandalone: false, selector: "clr-dg-column", inputs: { filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], disableUnsort: ["clrDgDisableUnsort", "disableUnsort"], colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sortOrder: ["clrDgSortOrder", "sortOrder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], viewQueries: [{ propertyName: "titleContainer", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i3.ClrPopoverHostDirective }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: i0.ElementRef }, { token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }, { token: i2.ClrCommonStringsService }, { token: ColumnsService }, { token: COLUMN_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridColumn, isStandalone: false, selector: "clr-dg-column", inputs: { filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], disableUnsort: ["clrDgDisableUnsort", "disableUnsort"], pinnable: ["clrDgPinnable", "pinnable", booleanAttribute], pinned: ["clrDgPinned", "pinned", booleanAttribute], colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sortOrder: ["clrDgSortOrder", "sortOrder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "clrDgSortOrderChange", pinnedChange: "clrDgPinnedChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, providers: [ColumnActionsService], queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], viewQueries: [{ propertyName: "titleContainer", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i3.ClrPopoverHostDirective }], ngImport: i0, template: `
     <div class="datagrid-column-flex">
       @if (sortable) {
         <button class="datagrid-column-title" (click)="sort()" type="button" #titleContainer>
@@ -2790,13 +3034,32 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
           <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
         </span>
       }
+
+      <!--
+        The actions menu needs its own slot: the default ng-content lives inside the #columnTitle
+        template, which is rendered inside the sort button, so an unselected clr-dg-column-actions
+        would end up as a button within a button.
+      -->
+      <ng-content select="clr-dg-column-actions"></ng-content>
+
+      @if (pinnable && !columnActions.menuPresent()) {
+        <button
+          class="datagrid-column-pin"
+          type="button"
+          [attr.aria-label]="pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn"
+          (click)="onPinToggleClick($event)"
+        >
+          <cds-icon [size]="'12'" [shape]="pinned ? 'unpin' : 'pin'" solid aria-hidden="true"></cds-icon>
+        </button>
+      }
+
       @if (showSeparator) {
         <clr-dg-column-separator></clr-dg-column-separator>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMinPlaceholder", "clrFilterMaxPlaceholder", "clrFilterFromLabel", "clrFilterToLabel", "clrFilterValue", "clrDgNumericFilter"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrFilterLabel", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMinPlaceholder", "clrFilterMaxPlaceholder", "clrFilterFromLabel", "clrFilterToLabel", "clrFilterValue", "clrDgNumericFilter"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrFilterLabel", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumn, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-column',
@@ -2841,12 +3104,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
         </span>
       }
+
+      <!--
+        The actions menu needs its own slot: the default ng-content lives inside the #columnTitle
+        template, which is rendered inside the sort button, so an unselected clr-dg-column-actions
+        would end up as a button within a button.
+      -->
+      <ng-content select="clr-dg-column-actions"></ng-content>
+
+      @if (pinnable && !columnActions.menuPresent()) {
+        <button
+          class="datagrid-column-pin"
+          type="button"
+          [attr.aria-label]="pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn"
+          (click)="onPinToggleClick($event)"
+        >
+          <cds-icon [size]="'12'" [shape]="pinned ? 'unpin' : 'pin'" solid aria-hidden="true"></cds-icon>
+        </button>
+      }
+
       @if (showSeparator) {
         <clr-dg-column-separator></clr-dg-column-separator>
       }
     </div>
   `,
                     hostDirectives: [ClrPopoverHostDirective],
+                    // Shared by clr-dg-column-actions and this column's filter, whichever order they are created in.
+                    providers: [ColumnActionsService],
                     host: {
                         '[class.datagrid-column]': 'true',
                         '[attr.aria-sort]': 'ariaSort',
@@ -2855,7 +3139,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }, { type: i2.ClrCommonStringsService }], propDecorators: { filterStringPlaceholder: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }, { type: i2.ClrCommonStringsService }, { type: ColumnsService }, { type: i12.BehaviorSubject, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [COLUMN_STATE]
+                }] }], propDecorators: { filterStringPlaceholder: [{
                 type: Input,
                 args: ['clrFilterStringPlaceholder']
             }], filterNumberMaxPlaceholder: [{
@@ -2867,15 +3156,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], disableUnsort: [{
                 type: Input,
                 args: ['clrDgDisableUnsort']
+            }], pinnable: [{
+                type: Input,
+                args: [{ alias: 'clrDgPinnable', transform: booleanAttribute }]
             }], sortOrderChange: [{
                 type: Output,
                 args: ['clrDgSortOrderChange']
+            }], pinnedChange: [{
+                type: Output,
+                args: ['clrDgPinnedChange']
             }], filterValueChange: [{
                 type: Output,
                 args: ['clrFilterValueChange']
             }], titleContainer: [{
                 type: ViewChild,
                 args: ['titleContainer', { read: ElementRef }]
+            }], pinned: [{
+                type: Input,
+                args: [{ alias: 'clrDgPinned', transform: booleanAttribute }]
             }], colType: [{
                 type: Input,
                 args: ['clrDgColType']
@@ -3060,10 +3358,10 @@ class Items {
         }
         this.emitChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Items, deps: [{ token: FiltersProvider }, { token: Sort }, { token: Page }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Items }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Items, deps: [{ token: FiltersProvider }, { token: Sort }, { token: Page }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Items }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Items, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Items, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FiltersProvider }, { type: Sort }, { type: Page }] });
 
@@ -3118,11 +3416,12 @@ class ClrDatagridItems {
     }
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.items.smartenDown();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridItems, deps: [{ token: i0.TemplateRef }, { token: i0.IterableDiffers }, { token: Items }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridItems, isStandalone: false, selector: "[clrDgItems][clrDgItemsOf]", inputs: { rawItems: ["clrDgItemsOf", "rawItems"], trackBy: ["clrDgItemsTrackBy", "trackBy"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridItems, deps: [{ token: i0.TemplateRef }, { token: i0.IterableDiffers }, { token: Items }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridItems, isStandalone: false, selector: "[clrDgItems][clrDgItemsOf]", inputs: { rawItems: ["clrDgItemsOf", "rawItems"], trackBy: ["clrDgItemsTrackBy", "trackBy"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridItems, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridItems, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDgItems][clrDgItemsOf]',
@@ -3152,8 +3451,8 @@ class ClrDatagridPlaceholder {
     get emptyDatagrid() {
         return !this.items.loading && (!this.items.displayed || this.items.displayed.length === 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridPlaceholder, deps: [{ token: Items }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridPlaceholder, isStandalone: false, selector: "clr-dg-placeholder", host: { properties: { "class.datagrid-placeholder-container": "true" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridPlaceholder, deps: [{ token: Items }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridPlaceholder, isStandalone: false, selector: "clr-dg-placeholder", host: { properties: { "class.datagrid-placeholder-container": "true" } }, ngImport: i0, template: `
     <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid">
       @if (emptyDatagrid) {
         <div class="datagrid-placeholder-image"></div>
@@ -3166,7 +3465,7 @@ class ClrDatagridPlaceholder {
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridPlaceholder, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-placeholder',
@@ -3200,14 +3499,14 @@ class WrappedCell {
     ngOnDestroy() {
         this.cellView.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: WrappedCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: WrappedCell, isStandalone: false, selector: "dg-wrapped-cell", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["cellPortal"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WrappedCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: WrappedCell, isStandalone: false, selector: "dg-wrapped-cell", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["cellPortal"], descendants: true }], ngImport: i0, template: `
     <ng-template #cellPortal>
       <ng-content></ng-content>
     </ng-template>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: WrappedCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WrappedCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'dg-wrapped-cell',
@@ -3239,10 +3538,10 @@ class ClrDatagridCell {
     ngOnInit() {
         this.wrappedInjector = new HostWrapper(WrappedCell, this.vcr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridCell, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridCell, isStandalone: false, selector: "clr-dg-cell", host: { attributes: { "role": "gridcell" }, properties: { "class.datagrid-cell": "true", "class.datagrid-signpost-trigger": "signpost.length > 0" } }, queries: [{ propertyName: "signpost", predicate: ClrSignpost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridCell, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridCell, isStandalone: false, selector: "clr-dg-cell", host: { attributes: { "role": "gridcell" }, properties: { "class.datagrid-cell": "true", "class.datagrid-signpost-trigger": "signpost.length > 0" } }, queries: [{ propertyName: "signpost", predicate: ClrSignpost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-cell',
@@ -3302,10 +3601,10 @@ class DatagridIfExpandService extends IfExpandService {
     setReplace(replaceValue) {
         this._replace.next(replaceValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridIfExpandService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridIfExpandService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridIfExpandService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridIfExpandService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridIfExpandService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridIfExpandService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3364,14 +3663,14 @@ class WrappedRow {
     ngOnDestroy() {
         this.rowView.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: WrappedRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: WrappedRow, isStandalone: false, selector: "dg-wrapped-row", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["rowPortal"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WrappedRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: WrappedRow, isStandalone: false, selector: "dg-wrapped-row", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["rowPortal"], descendants: true }], ngImport: i0, template: `
     <ng-template #rowPortal>
       <ng-content></ng-content>
     </ng-template>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: WrappedRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WrappedRow, decorators: [{
             type: Component,
             args: [{
                     selector: 'dg-wrapped-row',
@@ -3721,10 +4020,10 @@ class Selection {
     updateCurrentSelectionRefs() {
         this._currentSelectionRefs = this._current?.map(item => this._items.identifyBy(item)) || [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Selection, deps: [{ token: Items }, { token: FiltersProvider }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Selection }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Selection, deps: [{ token: Items }, { token: FiltersProvider }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Selection }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Selection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: Selection, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Items }, { type: FiltersProvider }, { type: i0.IterableDiffers }] });
 
@@ -3750,10 +4049,10 @@ class RowActionService {
     unregister() {
         this.actionableCount--;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RowActionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RowActionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RowActionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RowActionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RowActionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RowActionService, decorators: [{
             type: Injectable
         }] });
 
@@ -3781,10 +4080,10 @@ class ExpandableRowsCount {
     unregister() {
         this.expandableCount--;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ExpandableRowsCount, deps: [{ token: DetailService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ExpandableRowsCount }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ExpandableRowsCount, deps: [{ token: DetailService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ExpandableRowsCount }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ExpandableRowsCount, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ExpandableRowsCount, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DetailService }] });
 
@@ -3811,10 +4110,10 @@ class DisplayModeService {
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DisplayModeService, deps: [{ token: DatagridRenderOrganizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DisplayModeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DisplayModeService, deps: [{ token: DatagridRenderOrganizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DisplayModeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DisplayModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DisplayModeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DatagridRenderOrganizer }] });
 
@@ -3862,8 +4161,8 @@ class ClrDatagridSingleSelectionValueAccessor {
         const value = this.keyOf(this.value);
         this.renderer.setProperty(this.elementRef.nativeElement, 'checked', state === value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridSingleSelectionValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridSingleSelectionValueAccessor, isStandalone: true, selector: "input[type=radio][clrDgSingleSelectionRadio]", inputs: { value: "value", clrDgIdentityFn: "clrDgIdentityFn" }, host: { listeners: { "change": "onChange(value)", "blur": "onTouched()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridSingleSelectionValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridSingleSelectionValueAccessor, isStandalone: true, selector: "input[type=radio][clrDgSingleSelectionRadio]", inputs: { value: "value", clrDgIdentityFn: "clrDgIdentityFn" }, host: { listeners: { "change": "onChange(value)", "blur": "onTouched()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrDatagridSingleSelectionValueAccessor),
@@ -3871,7 +4170,7 @@ class ClrDatagridSingleSelectionValueAccessor {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridSingleSelectionValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridSingleSelectionValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[type=radio][clrDgSingleSelectionRadio]',
@@ -3914,10 +4213,10 @@ class ClrDatagridSelectionCellDirective {
             event.target.querySelector('input')?.click();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridSelectionCellDirective, deps: [{ token: Selection }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridSelectionCellDirective, isStandalone: false, selector: ".datagrid-select", host: { listeners: { "click": "onSelectionCellClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridSelectionCellDirective, deps: [{ token: Selection }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridSelectionCellDirective, isStandalone: false, selector: ".datagrid-select", host: { listeners: { "click": "onSelectionCellClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridSelectionCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridSelectionCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '.datagrid-select',
@@ -3936,7 +4235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 let nbRow = 0;
 class ClrDatagridRow {
-    constructor(selection, rowActionService, globalExpandable, expand, detailService, displayMode, vcr, renderer, el, commonStrings, items, document) {
+    constructor(selection, rowActionService, globalExpandable, expand, detailService, displayMode, vcr, renderer, el, commonStrings, items, columnsService, document) {
         this.selection = selection;
         this.rowActionService = rowActionService;
         this.globalExpandable = globalExpandable;
@@ -3947,6 +4246,7 @@ class ClrDatagridRow {
         this.el = el;
         this.commonStrings = commonStrings;
         this.items = items;
+        this.columnsService = columnsService;
         this.document = document;
         this.selectedChanged = new EventEmitter(false);
         this.expandedChange = new EventEmitter(false);
@@ -3966,6 +4266,13 @@ class ClrDatagridRow {
         this._detailCloseLabel = '';
         this._rowSelectionLabel = '';
         this.subscriptions = [];
+        /**
+         * The placeholder cells we create from `fixedCellTemplate` for the calculate pass. Unlike the
+         * cell views, which belong to their `WrappedCell`, these are created here on every pass, so
+         * they are ours to destroy. Detaching them from the container only unlinks them - the views
+         * themselves would stay alive and keep the whole row, and the datagrid with it, in memory.
+         */
+        this.fixedCellViews = [];
         // By default, every item is selectable; it becomes not selectable only if it's explicitly set to false
         this._selectable = true;
         nbRow++;
@@ -4074,11 +4381,7 @@ class ClrDatagridRow {
     }
     ngAfterContentInit() {
         this.dgCells.changes.subscribe(() => {
-            this.dgCells.forEach(cell => {
-                if (!cell._view.destroyed) {
-                    this._scrollableCells.insert(cell._view);
-                }
-            });
+            this.insertCellViews();
         });
     }
     ngAfterViewInit() {
@@ -4088,7 +4391,12 @@ class ClrDatagridRow {
             for (let i = this._scrollableCells.length; i > 0; i--) {
                 this._scrollableCells.detach();
             }
+            // remove cell views of pinned columns from their static container
+            for (let i = this._pinnedCells.length; i > 0; i--) {
+                this._pinnedCells.detach();
+            }
             // remove cell views from calculated view
+            this.destroyFixedCellViews();
             for (let i = this._calculatedCells.length; i > 0; i--) {
                 this._calculatedCells.detach();
             }
@@ -4101,9 +4409,11 @@ class ClrDatagridRow {
                     this.globalExpandable.hasExpandableRow,
                     this.detailService.enabled,
                 ];
-                fixedCellConditions
-                    .filter(Boolean)
-                    .forEach(() => this._calculatedCells.insert(this._fixedCellTemplate.createEmbeddedView(null)));
+                fixedCellConditions.filter(Boolean).forEach(() => {
+                    const fixedCellView = this._fixedCellTemplate.createEmbeddedView(null);
+                    this.fixedCellViews.push(fixedCellView);
+                    this._calculatedCells.insert(fixedCellView);
+                });
                 this.dgCells.forEach(cell => {
                     if (!cell._view.destroyed) {
                         this._calculatedCells.insert(cell._view);
@@ -4112,17 +4422,14 @@ class ClrDatagridRow {
             }
             else {
                 this.displayCells = true;
-                this.dgCells.forEach(cell => {
-                    if (!cell._view.destroyed) {
-                        this._scrollableCells.insert(cell._view);
-                    }
-                });
+                this.insertCellViews();
             }
         }), this.expand.animate.subscribe(() => {
             this.expandAnimationTrigger = !this.expandAnimationTrigger;
         }));
     }
     ngOnDestroy() {
+        this.destroyFixedCellViews();
         this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
     toggle(selected = !this.selected) {
@@ -4173,6 +4480,31 @@ class ClrDatagridRow {
             this.toggle(selected);
         }
     }
+    destroyFixedCellViews() {
+        // On teardown Angular has already destroyed the views in our container by the time it runs our
+        // `ngOnDestroy`, so only the calculate/display transition has live ones to release here.
+        this.fixedCellViews.forEach(view => {
+            if (!view.destroyed) {
+                view.destroy();
+            }
+        });
+        this.fixedCellViews = [];
+    }
+    /**
+     * Projects the cells into the display containers. Cells of pinned columns go into their static
+     * container so they stay visible during horizontal scroll; the rest stay scrollable. Cells are
+     * matched with their column by declaration index, and iterating in that order keeps both groups
+     * aligned with the header.
+     */
+    insertCellViews() {
+        this.dgCells.forEach((cell, index) => {
+            if (cell._view.destroyed) {
+                return;
+            }
+            const container = this.columnsService.isPinned(index) ? this._pinnedCells : this._scrollableCells;
+            container.insert(cell._view);
+        });
+    }
     rangeSelect() {
         const items = this.items.displayed;
         if (!items) {
@@ -4195,14 +4527,14 @@ class ClrDatagridRow {
             this.selection.rangeStart = this.item;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridRow, deps: [{ token: Selection }, { token: RowActionService }, { token: ExpandableRowsCount }, { token: DatagridIfExpandService }, { token: DetailService }, { token: DisplayModeService }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.ClrCommonStringsService }, { token: Items }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridRow, isStandalone: false, selector: "clr-dg-row", inputs: { detailDisabled: ["clrDgDetailDisabled", "detailDisabled"], detailHidden: ["clrDgDetailHidden", "detailHidden"], skeletonLoading: ["clrDgSkeletonLoading", "skeletonLoading"], item: ["clrDgItem", "item"], clrDgSelectable: "clrDgSelectable", selected: ["clrDgSelected", "selected"], expanded: ["clrDgExpanded", "expanded"], clrDgDetailOpenLabel: "clrDgDetailOpenLabel", clrDgDetailCloseLabel: "clrDgDetailCloseLabel", clrDgRowSelectionLabel: "clrDgRowSelectionLabel" }, outputs: { selectedChanged: "clrDgSelectedChange", expandedChange: "clrDgExpandedChange" }, host: { attributes: { "role": "rowgroup" }, properties: { "class.datagrid-row": "true", "class.datagrid-row-skeleton": "skeletonLoading", "class.datagrid-selected": "selected", "attr.aria-owns": "id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridRow, deps: [{ token: Selection }, { token: RowActionService }, { token: ExpandableRowsCount }, { token: DatagridIfExpandService }, { token: DetailService }, { token: DisplayModeService }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.ClrCommonStringsService }, { token: Items }, { token: ColumnsService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridRow, isStandalone: false, selector: "clr-dg-row", inputs: { detailDisabled: ["clrDgDetailDisabled", "detailDisabled"], detailHidden: ["clrDgDetailHidden", "detailHidden"], skeletonLoading: ["clrDgSkeletonLoading", "skeletonLoading"], item: ["clrDgItem", "item"], clrDgSelectable: "clrDgSelectable", selected: ["clrDgSelected", "selected"], expanded: ["clrDgExpanded", "expanded"], clrDgDetailOpenLabel: "clrDgDetailOpenLabel", clrDgDetailCloseLabel: "clrDgDetailCloseLabel", clrDgRowSelectionLabel: "clrDgRowSelectionLabel" }, outputs: { selectedChanged: "clrDgSelectedChange", expandedChange: "clrDgExpandedChange" }, host: { attributes: { "role": "rowgroup" }, properties: { "class.datagrid-row": "true", "class.datagrid-row-skeleton": "skeletonLoading", "class.datagrid-selected": "selected", "attr.aria-owns": "id" } }, providers: [
             DatagridIfExpandService,
             { provide: IfExpandService, useExisting: DatagridIfExpandService },
             { provide: LoadingListener, useExisting: DatagridIfExpandService },
-        ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimationDirective, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_fixedCellTemplate", first: true, predicate: ["fixedCellTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n<div\n  role=\"row\"\n  [id]=\"id\"\n  class=\"datagrid-row-master datagrid-row-flex\"\n  [clrExpandableAnimation]=\"expandAnimationTrigger\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n  [class.datagrid-row-clickable]=\"selection.rowSelectionMode\"\n  [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n>\n  <div class=\"datagrid-row-sticky\">\n    <!-- Sticky elements here -->\n    <ng-container #stickyCells>\n      @if (selection.selectionType === SELECTION_TYPE.Multi) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            tabindex=\"-1\"\n            type=\"checkbox\"\n            [ngModel]=\"selected\"\n            (ngModelChange)=\"toggle($event)\"\n            [id]=\"checkboxId\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n          <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n            <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n          </label>\n        </div>\n      </div>\n      } @if (selection.selectionType === SELECTION_TYPE.Single) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <clr-radio-wrapper>\n          <input\n            tabindex=\"-1\"\n            type=\"radio\"\n            clrRadio\n            clrDgSingleSelectionRadio\n            [clrDgIdentityFn]=\"identifyBy\"\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [ngModel]=\"selection.currentSingle\"\n            (ngModelChange)=\"selection.current = [$event]\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n            <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n          </label>\n        </clr-radio-wrapper>\n      </div>\n      } @if (rowActionService.hasActionableRow) {\n      <div class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n      </div>\n      } @if (globalExpandable.hasExpandableRow) {\n      <div class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (expand.expandable) { @if (!expand.loading) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"toggleExpand($event)\"\n          type=\"button\"\n          class=\"datagrid-expandable-caret-button\"\n          [attr.aria-expanded]=\"expand.expanded\"\n          [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-controls]=\"expand.hasExpandTemplate && !expand.expanded ? null : expandableId\"\n        >\n          <cds-icon\n            shape=\"angle\"\n            class=\"datagrid-expandable-caret-icon\"\n            [direction]=\"expand.expanded ? 'down' : 'right'\"\n            [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n          ></cds-icon>\n        </button>\n        } @if (expand.loading) {\n        <clr-spinner clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n        } }\n      </div>\n      } @if (detailService.enabled) {\n      <div class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (!detailHidden) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"openDetails($event, detailButton)\"\n          type=\"button\"\n          #detailButton\n          class=\"datagrid-detail-caret-button\"\n          [disabled]=\"detailDisabled\"\n          [class.is-open]=\"detailService.isRowOpen(item)\"\n          [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n          [attr.aria-controls]=\"detailService.id\"\n          aria-haspopup=\"dialog\"\n        >\n          <cds-icon\n            shape=\"angle-double\"\n            [direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n            class=\"datagrid-detail-caret-icon\"\n            [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n          ></cds-icon>\n        </button>\n        }\n      </div>\n      }\n    </ng-container>\n    <!-- placeholder for projecting other sticky cells as pinned-->\n  </div>\n  <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n    <div class=\"datagrid-scrolling-cells\">\n      <ng-content select=\"clr-dg-cell\"></ng-content>\n      <ng-container #scrollableCells></ng-container>\n    </div>\n    <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n    @if (replaced && !expand.loading) {\n    <ng-template [ngTemplateOutlet]=\"detail\"></ng-template>\n    } @if (!replaced && !expand.loading) {\n    <ng-template [ngTemplateOutlet]=\"detail\"></ng-template>\n    }\n  </div>\n</div>\n<!--\nWe need the \"project into template\" hacks because we need this in 2 different places\ndepending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n\n<ng-template #fixedCellTemplate>\n  <div class=\"datagrid-fixed-column datagrid-cell\" role=\"gridcell\"></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i4.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i12.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i12.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i13.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i13.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ClrExpandableAnimationDirective, selector: "[clrExpandableAnimation]", inputs: ["clrExpandableAnimation"] }, { kind: "component", type: i14.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: ClrDatagridSingleSelectionValueAccessor, selector: "input[type=radio][clrDgSingleSelectionRadio]", inputs: ["value", "clrDgIdentityFn"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] }); }
+        ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimationDirective, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_pinnedCells", first: true, predicate: ["pinnedCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_fixedCellTemplate", first: true, predicate: ["fixedCellTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n<div\n  role=\"row\"\n  [id]=\"id\"\n  class=\"datagrid-row-master datagrid-row-flex\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n  [class.datagrid-row-clickable]=\"selection.rowSelectionMode\"\n  [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n>\n  <div class=\"datagrid-row-sticky\">\n    <!-- Sticky elements here -->\n    <ng-container #stickyCells>\n      @if (selection.selectionType === SELECTION_TYPE.Multi) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            tabindex=\"-1\"\n            type=\"checkbox\"\n            [ngModel]=\"selected\"\n            (ngModelChange)=\"toggle($event)\"\n            [id]=\"checkboxId\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n          <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n            <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n          </label>\n        </div>\n      </div>\n      } @if (selection.selectionType === SELECTION_TYPE.Single) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <clr-radio-wrapper>\n          <input\n            tabindex=\"-1\"\n            type=\"radio\"\n            clrRadio\n            clrDgSingleSelectionRadio\n            [clrDgIdentityFn]=\"identifyBy\"\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [ngModel]=\"selection.currentSingle\"\n            (ngModelChange)=\"selection.current = [$event]\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n            <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n          </label>\n        </clr-radio-wrapper>\n      </div>\n      } @if (rowActionService.hasActionableRow) {\n      <div class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n      </div>\n      } @if (globalExpandable.hasExpandableRow) {\n      <div class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (expand.expandable) { @if (!expand.loading) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"toggleExpand($event)\"\n          type=\"button\"\n          class=\"datagrid-expandable-caret-button\"\n          [attr.aria-expanded]=\"expand.expanded\"\n          [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-controls]=\"expand.hasExpandTemplate && !expand.expanded ? null : expandableId\"\n        >\n          <cds-icon\n            shape=\"angle\"\n            class=\"datagrid-expandable-caret-icon\"\n            [direction]=\"expand.expanded ? 'down' : 'right'\"\n            [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n          ></cds-icon>\n        </button>\n        } @if (expand.loading) {\n        <clr-spinner clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n        } }\n      </div>\n      } @if (detailService.enabled) {\n      <div class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (!detailHidden) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"openDetails($event, detailButton)\"\n          type=\"button\"\n          #detailButton\n          class=\"datagrid-detail-caret-button\"\n          [disabled]=\"detailDisabled\"\n          [class.is-open]=\"detailService.isRowOpen(item)\"\n          [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n          [attr.aria-controls]=\"detailService.id\"\n          aria-haspopup=\"dialog\"\n        >\n          <cds-icon\n            shape=\"angle-double\"\n            [direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n            class=\"datagrid-detail-caret-icon\"\n            [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n          ></cds-icon>\n        </button>\n        }\n      </div>\n      }\n    </ng-container>\n  </div>\n  <div\n    class=\"datagrid-row-scrollable\"\n    [ngClass]=\"{'is-replaced': replaced && expanded}\"\n    [clrExpandableAnimation]=\"expandAnimationTrigger\"\n  >\n    <div class=\"datagrid-scrolling-cells\">\n      <div class=\"datagrid-pinned-cells\">\n        <ng-container #pinnedCells></ng-container>\n      </div>\n      <ng-content select=\"clr-dg-cell\"></ng-content>\n      <ng-container #scrollableCells></ng-container>\n    </div>\n\n    @if (!expand.loading) {\n    <ng-template [ngTemplateOutlet]=\"detail\"></ng-template>\n    }\n  </div>\n</div>\n<!--\nWe need the \"project into template\" hacks because we need this in 2 different places\ndepending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n\n<ng-template #fixedCellTemplate>\n  <div class=\"datagrid-fixed-column datagrid-cell\" role=\"gridcell\"></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }, { kind: "directive", type: i4$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i13.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i13.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i14.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ClrExpandableAnimationDirective, selector: "[clrExpandableAnimation]", inputs: ["clrExpandableAnimation"] }, { kind: "component", type: i15.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: ClrDatagridSingleSelectionValueAccessor, selector: "input[type=radio][clrDgSingleSelectionRadio]", inputs: ["value", "clrDgIdentityFn"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridRow, decorators: [{
             type: Component,
             args: [{ selector: 'clr-dg-row', host: {
                         '[class.datagrid-row]': 'true',
@@ -4214,8 +4546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         DatagridIfExpandService,
                         { provide: IfExpandService, useExisting: DatagridIfExpandService },
                         { provide: LoadingListener, useExisting: DatagridIfExpandService },
-                    ], standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n<div\n  role=\"row\"\n  [id]=\"id\"\n  class=\"datagrid-row-master datagrid-row-flex\"\n  [clrExpandableAnimation]=\"expandAnimationTrigger\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n  [class.datagrid-row-clickable]=\"selection.rowSelectionMode\"\n  [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n>\n  <div class=\"datagrid-row-sticky\">\n    <!-- Sticky elements here -->\n    <ng-container #stickyCells>\n      @if (selection.selectionType === SELECTION_TYPE.Multi) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            tabindex=\"-1\"\n            type=\"checkbox\"\n            [ngModel]=\"selected\"\n            (ngModelChange)=\"toggle($event)\"\n            [id]=\"checkboxId\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n          <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n            <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n          </label>\n        </div>\n      </div>\n      } @if (selection.selectionType === SELECTION_TYPE.Single) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <clr-radio-wrapper>\n          <input\n            tabindex=\"-1\"\n            type=\"radio\"\n            clrRadio\n            clrDgSingleSelectionRadio\n            [clrDgIdentityFn]=\"identifyBy\"\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [ngModel]=\"selection.currentSingle\"\n            (ngModelChange)=\"selection.current = [$event]\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n            <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n          </label>\n        </clr-radio-wrapper>\n      </div>\n      } @if (rowActionService.hasActionableRow) {\n      <div class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n      </div>\n      } @if (globalExpandable.hasExpandableRow) {\n      <div class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (expand.expandable) { @if (!expand.loading) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"toggleExpand($event)\"\n          type=\"button\"\n          class=\"datagrid-expandable-caret-button\"\n          [attr.aria-expanded]=\"expand.expanded\"\n          [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-controls]=\"expand.hasExpandTemplate && !expand.expanded ? null : expandableId\"\n        >\n          <cds-icon\n            shape=\"angle\"\n            class=\"datagrid-expandable-caret-icon\"\n            [direction]=\"expand.expanded ? 'down' : 'right'\"\n            [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n          ></cds-icon>\n        </button>\n        } @if (expand.loading) {\n        <clr-spinner clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n        } }\n      </div>\n      } @if (detailService.enabled) {\n      <div class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (!detailHidden) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"openDetails($event, detailButton)\"\n          type=\"button\"\n          #detailButton\n          class=\"datagrid-detail-caret-button\"\n          [disabled]=\"detailDisabled\"\n          [class.is-open]=\"detailService.isRowOpen(item)\"\n          [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n          [attr.aria-controls]=\"detailService.id\"\n          aria-haspopup=\"dialog\"\n        >\n          <cds-icon\n            shape=\"angle-double\"\n            [direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n            class=\"datagrid-detail-caret-icon\"\n            [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n          ></cds-icon>\n        </button>\n        }\n      </div>\n      }\n    </ng-container>\n    <!-- placeholder for projecting other sticky cells as pinned-->\n  </div>\n  <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n    <div class=\"datagrid-scrolling-cells\">\n      <ng-content select=\"clr-dg-cell\"></ng-content>\n      <ng-container #scrollableCells></ng-container>\n    </div>\n    <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n    @if (replaced && !expand.loading) {\n    <ng-template [ngTemplateOutlet]=\"detail\"></ng-template>\n    } @if (!replaced && !expand.loading) {\n    <ng-template [ngTemplateOutlet]=\"detail\"></ng-template>\n    }\n  </div>\n</div>\n<!--\nWe need the \"project into template\" hacks because we need this in 2 different places\ndepending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n\n<ng-template #fixedCellTemplate>\n  <div class=\"datagrid-fixed-column datagrid-cell\" role=\"gridcell\"></div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: Selection }, { type: RowActionService }, { type: ExpandableRowsCount }, { type: DatagridIfExpandService }, { type: DetailService }, { type: DisplayModeService }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.ClrCommonStringsService }, { type: Items }, { type: undefined, decorators: [{
+                    ], standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n<div\n  role=\"row\"\n  [id]=\"id\"\n  class=\"datagrid-row-master datagrid-row-flex\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n  [class.datagrid-row-clickable]=\"selection.rowSelectionMode\"\n  [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n>\n  <div class=\"datagrid-row-sticky\">\n    <!-- Sticky elements here -->\n    <ng-container #stickyCells>\n      @if (selection.selectionType === SELECTION_TYPE.Multi) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            tabindex=\"-1\"\n            type=\"checkbox\"\n            [ngModel]=\"selected\"\n            (ngModelChange)=\"toggle($event)\"\n            [id]=\"checkboxId\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n          <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n            <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n          </label>\n        </div>\n      </div>\n      } @if (selection.selectionType === SELECTION_TYPE.Single) {\n      <div\n        class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n        [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        role=\"gridcell\"\n      >\n        <clr-radio-wrapper>\n          <input\n            tabindex=\"-1\"\n            type=\"radio\"\n            clrRadio\n            clrDgSingleSelectionRadio\n            [clrDgIdentityFn]=\"identifyBy\"\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [ngModel]=\"selection.currentSingle\"\n            (ngModelChange)=\"selection.current = [$event]\"\n            [disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n          />\n          <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n            <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n          </label>\n        </clr-radio-wrapper>\n      </div>\n      } @if (rowActionService.hasActionableRow) {\n      <div class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n      </div>\n      } @if (globalExpandable.hasExpandableRow) {\n      <div class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (expand.expandable) { @if (!expand.loading) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"toggleExpand($event)\"\n          type=\"button\"\n          class=\"datagrid-expandable-caret-button\"\n          [attr.aria-expanded]=\"expand.expanded\"\n          [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-controls]=\"expand.hasExpandTemplate && !expand.expanded ? null : expandableId\"\n        >\n          <cds-icon\n            shape=\"angle\"\n            class=\"datagrid-expandable-caret-icon\"\n            [direction]=\"expand.expanded ? 'down' : 'right'\"\n            [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n          ></cds-icon>\n        </button>\n        } @if (expand.loading) {\n        <clr-spinner clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n        } }\n      </div>\n      } @if (detailService.enabled) {\n      <div class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\" role=\"gridcell\">\n        @if (!detailHidden) {\n        <button\n          tabindex=\"-1\"\n          (click)=\"openDetails($event, detailButton)\"\n          type=\"button\"\n          #detailButton\n          class=\"datagrid-detail-caret-button\"\n          [disabled]=\"detailDisabled\"\n          [class.is-open]=\"detailService.isRowOpen(item)\"\n          [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n          [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n          [attr.aria-controls]=\"detailService.id\"\n          aria-haspopup=\"dialog\"\n        >\n          <cds-icon\n            shape=\"angle-double\"\n            [direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n            class=\"datagrid-detail-caret-icon\"\n            [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n          ></cds-icon>\n        </button>\n        }\n      </div>\n      }\n    </ng-container>\n  </div>\n  <div\n    class=\"datagrid-row-scrollable\"\n    [ngClass]=\"{'is-replaced': replaced && expanded}\"\n    [clrExpandableAnimation]=\"expandAnimationTrigger\"\n  >\n    <div class=\"datagrid-scrolling-cells\">\n      <div class=\"datagrid-pinned-cells\">\n        <ng-container #pinnedCells></ng-container>\n      </div>\n      <ng-content select=\"clr-dg-cell\"></ng-content>\n      <ng-container #scrollableCells></ng-container>\n    </div>\n\n    @if (!expand.loading) {\n    <ng-template [ngTemplateOutlet]=\"detail\"></ng-template>\n    }\n  </div>\n</div>\n<!--\nWe need the \"project into template\" hacks because we need this in 2 different places\ndepending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n\n<ng-template #fixedCellTemplate>\n  <div class=\"datagrid-fixed-column datagrid-cell\" role=\"gridcell\"></div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: Selection }, { type: RowActionService }, { type: ExpandableRowsCount }, { type: DatagridIfExpandService }, { type: DetailService }, { type: DisplayModeService }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.ClrCommonStringsService }, { type: Items }, { type: ColumnsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }], propDecorators: { selectedChanged: [{
@@ -4245,6 +4577,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], _stickyCells: [{
                 type: ViewChild,
                 args: ['stickyCells', { read: ViewContainerRef }]
+            }], _pinnedCells: [{
+                type: ViewChild,
+                args: ['pinnedCells', { read: ViewContainerRef }]
             }], _scrollableCells: [{
                 type: ViewChild,
                 args: ['scrollableCells', { read: ViewContainerRef }]
@@ -4303,6 +4638,14 @@ class ClrDatagridVirtualScrollDirective {
         this.shouldUpdateAriaRowIndexes = false;
         this.subscriptions = [];
         this.topIndex = 0;
+        /**
+         * Injectors for the CDK virtual scroll instances we create by hand, in the order they have to be
+         * destroyed. Destroying them is what runs the CDK teardown: their `ngOnDestroy` and, importantly,
+         * the `DestroyRef` cleanup `CdkVirtualScrollViewport` registers for the effect it creates on the
+         * application injector. Leaving them alive keeps that effect registered, which retains the
+         * viewport and the entire datagrid view tree for as long as the application lives.
+         */
+        this.cdkInjectors = [];
         // @deprecated remove the mutation observer when `datagrid-compact` class is deleted
         this.mutationChanges = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
@@ -4410,7 +4753,7 @@ class ClrDatagridVirtualScrollDirective {
     ngAfterViewInit() {
         runInInjectionContext(this.injector, () => {
             this.virtualScrollViewport = this.createVirtualScrollViewportForDatagrid(this.changeDetectorRef, this.ngZone, this.renderer2, this.directionality, this.scrollDispatcher, this.viewportRuler, this.datagridElementRef, this.virtualScrollStrategy);
-            this.cdkVirtualFor = createCdkVirtualForOfDirective(this.viewContainerRef, this.templateRef, this.iterableDiffers, this.virtualScrollViewport, this.ngZone);
+            this.cdkVirtualFor = this.createCdkVirtualForOfDirective(this.viewContainerRef, this.templateRef, this.iterableDiffers, this.virtualScrollViewport, this.ngZone);
             this.virtualScrollViewport.ngOnInit();
         });
         this.gridRoleElement = this.datagridElementRef.nativeElement.querySelector('[role="grid"]');
@@ -4441,12 +4784,21 @@ class ClrDatagridVirtualScrollDirective {
         }
     }
     ngOnDestroy() {
-        this.cdkVirtualFor?.ngOnDestroy();
-        this.virtualScrollViewport?.ngOnDestroy();
+        // Ours first: CDK teardown emits on the streams we subscribe to, and third-party teardown that
+        // throws must not be able to leave our own observer and subscriptions behind.
         this.mutationChanges?.disconnect();
         this.subscriptions.forEach(subscription => {
             subscription.unsubscribe();
         });
+        try {
+            // Destroying the injectors calls `ngOnDestroy` on the CDK instances they created and runs the
+            // `DestroyRef` cleanup CDK registered for them, so we must not call those hooks ourselves.
+            this.cdkInjectors.forEach(injector => injector.destroy());
+        }
+        finally {
+            // An injector cannot be destroyed twice, so drop them even if one of them threw.
+            this.cdkInjectors.length = 0;
+        }
     }
     scrollUp(offset, behavior = 'auto') {
         this.scrollToIndex(this.topIndex - offset, behavior);
@@ -4502,13 +4854,62 @@ class ClrDatagridVirtualScrollDirective {
     createVirtualScrollViewportForDatagrid(changeDetectorRef, ngZone, renderer2, directionality, scrollDispatcher, viewportRuler, datagridElementRef, virtualScrollStrategy) {
         const datagridContentElement = datagridElementRef.nativeElement.querySelector('.datagrid-content');
         const datagridRowsElement = datagridElementRef.nativeElement.querySelector('.datagrid-rows');
-        const virtualScrollViewport = createCdkVirtualScrollViewport(new ElementRef(datagridContentElement), new ElementRef(datagridRowsElement), changeDetectorRef, ngZone, renderer2, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, null);
+        return this.createCdkVirtualScrollViewport(new ElementRef(datagridContentElement), new ElementRef(datagridRowsElement), changeDetectorRef, ngZone, renderer2, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, null);
+    }
+    createCdkVirtualScrollViewport(datagridDivElementRef, contentWrapper, changeDetectorRef, ngZone, renderer2, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, scrollable) {
+        const injector = createEnvironmentInjector([
+            { provide: ElementRef, useValue: datagridDivElementRef },
+            { provide: ChangeDetectorRef, useValue: changeDetectorRef },
+            { provide: NgZone, useValue: ngZone },
+            { provide: Renderer2, useValue: renderer2 },
+            { provide: VIRTUAL_SCROLL_STRATEGY, useValue: virtualScrollStrategy },
+            { provide: CdkVirtualScrollable, useValue: scrollable },
+            { provide: CdkVirtualScrollViewport, useClass: CdkVirtualScrollViewport },
+        ], this.createApplicationInjector(directionality, scrollDispatcher, viewportRuler));
+        const virtualScrollViewport = injector.get(CdkVirtualScrollViewport);
+        virtualScrollViewport._contentWrapper = contentWrapper;
+        // Registered before the caller creates anything else, so a half-finished init still tears down
+        // what it did manage to create.
+        this.cdkInjectors.push(injector);
         return virtualScrollViewport;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridVirtualScrollDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: Items }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i2$1.Directionality }, { token: i3$1.ScrollDispatcher }, { token: i3$1.ViewportRuler }, { token: forwardRef(() => ClrDatagrid) }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridVirtualScrollDirective, isStandalone: false, selector: "[clrVirtualScroll],[ClrVirtualScroll]", inputs: { persistItems: ["clrVirtualPersistItems", "persistItems"], cdkVirtualForOf: ["clrVirtualRowsOf", "cdkVirtualForOf"], cdkVirtualForTrackBy: ["clrVirtualRowsTrackBy", "cdkVirtualForTrackBy"], cdkVirtualForTemplate: ["clrVirtualRowsTemplate", "cdkVirtualForTemplate"], cdkVirtualForTemplateCacheSize: ["clrVirtualRowsTemplateCacheSize", "cdkVirtualForTemplateCacheSize"], itemSize: ["clrVirtualRowsItemSize", "itemSize"], minBufferPx: ["clrVirtualRowsMinBufferPx", "minBufferPx"], maxBufferPx: ["clrVirtualRowsMaxBufferPx", "maxBufferPx"], dataRange: ["clrVirtualDataRange", "dataRange"] }, outputs: { renderedRangeChange: "renderedRangeChange" }, providers: [Items], ngImport: i0 }); }
+    /**
+     * `Directionality`, `ScrollDispatcher` and `ViewportRuler` belong to the application, not to us.
+     * Angular registers every value an injector hands out that has an `ngOnDestroy` - `useValue`
+     * providers included - and calls it from `injector.destroy()`, so putting them in an injector we
+     * destroy would end scroll, resize and text-direction notification for the whole application the
+     * first time a virtual scroll datagrid goes away. They live in this parent, which nothing destroys,
+     * so the viewport still resolves the very instances our host injector gave us - including a
+     * `Directionality` overridden by an ancestor `[dir]`.
+     */
+    createApplicationInjector(directionality, scrollDispatcher, viewportRuler) {
+        return createEnvironmentInjector([
+            { provide: Directionality, useValue: directionality },
+            { provide: ScrollDispatcher, useValue: scrollDispatcher },
+            { provide: ViewportRuler, useValue: viewportRuler },
+        ], inject(EnvironmentInjector));
+    }
+    createCdkVirtualForOfDirective(viewContainerRef, templateRef, iterableDiffers, virtualScrollViewport, ngZone) {
+        // `CdkVirtualForOf` resolves the viewport with `skipSelf`, so it has to come from a parent
+        // injector rather than the one that provides `CdkVirtualForOf` itself. That parent holds nothing
+        // but the value provider, and destroying it would run the viewport's `ngOnDestroy` a second time
+        // on top of the one its own injector already runs, so it is left to be garbage collected.
+        const virtualScrollViewportInjector = createEnvironmentInjector([{ provide: CDK_VIRTUAL_SCROLL_VIEWPORT, useValue: virtualScrollViewport }], inject(EnvironmentInjector));
+        const cdkVirtualForInjector = createEnvironmentInjector([
+            { provide: ViewContainerRef, useValue: viewContainerRef },
+            { provide: TemplateRef, useValue: templateRef },
+            { provide: IterableDiffers, useValue: iterableDiffers },
+            { provide: NgZone, useValue: ngZone },
+            { provide: CdkVirtualForOf, useClass: CdkVirtualForOf },
+        ], virtualScrollViewportInjector);
+        // `CdkVirtualForOf` reads from the viewport, so it has to go away first.
+        this.cdkInjectors.unshift(cdkVirtualForInjector);
+        return cdkVirtualForInjector.get(CdkVirtualForOf);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridVirtualScrollDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: Items }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i2$1.Directionality }, { token: i3$1.ScrollDispatcher }, { token: i3$1.ViewportRuler }, { token: forwardRef(() => ClrDatagrid) }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridVirtualScrollDirective, isStandalone: false, selector: "[clrVirtualScroll],[ClrVirtualScroll]", inputs: { persistItems: ["clrVirtualPersistItems", "persistItems"], cdkVirtualForOf: ["clrVirtualRowsOf", "cdkVirtualForOf"], cdkVirtualForTrackBy: ["clrVirtualRowsTrackBy", "cdkVirtualForTrackBy"], cdkVirtualForTemplate: ["clrVirtualRowsTemplate", "cdkVirtualForTemplate"], cdkVirtualForTemplateCacheSize: ["clrVirtualRowsTemplateCacheSize", "cdkVirtualForTemplateCacheSize"], itemSize: ["clrVirtualRowsItemSize", "itemSize"], minBufferPx: ["clrVirtualRowsMinBufferPx", "minBufferPx"], maxBufferPx: ["clrVirtualRowsMaxBufferPx", "maxBufferPx"], dataRange: ["clrVirtualDataRange", "dataRange"] }, outputs: { renderedRangeChange: "renderedRangeChange" }, providers: [Items], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridVirtualScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridVirtualScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrVirtualScroll],[ClrVirtualScroll]',
@@ -4548,118 +4949,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Input,
                 args: ['clrVirtualDataRange']
             }] } });
-function createCdkVirtualScrollViewport(datagridDivElementRef, contentWrapper, changeDetectorRef, ngZone, renderer2, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, scrollable) {
-    const virtualScrollViewportInjector = Injector.create({
-        parent: inject(EnvironmentInjector),
-        providers: [
-            { provide: ElementRef, useValue: datagridDivElementRef },
-            { provide: ChangeDetectorRef, useValue: changeDetectorRef },
-            { provide: NgZone, useValue: ngZone },
-            { provide: Renderer2, useValue: renderer2 },
-            { provide: VIRTUAL_SCROLL_STRATEGY, useValue: virtualScrollStrategy },
-            { provide: Directionality, useValue: directionality },
-            { provide: ScrollDispatcher, useValue: scrollDispatcher },
-            { provide: ViewportRuler, useValue: viewportRuler },
-            { provide: CdkVirtualScrollable, useValue: scrollable },
-            { provide: CdkVirtualScrollViewport, useClass: CdkVirtualScrollViewport },
-        ],
-    });
-    const viewPort = virtualScrollViewportInjector.get(CdkVirtualScrollViewport);
-    viewPort._contentWrapper = contentWrapper;
-    return viewPort;
-}
-function createCdkVirtualForOfDirective(viewContainerRef, templateRef, iterableDiffers, virtualScrollViewport, ngZone) {
-    const virtualScrollViewportInjector = Injector.create({
-        parent: inject(EnvironmentInjector),
-        providers: [{ provide: CDK_VIRTUAL_SCROLL_VIEWPORT, useValue: virtualScrollViewport }],
-    });
-    const cdkVirtualForInjector = Injector.create({
-        parent: virtualScrollViewportInjector,
-        providers: [
-            { provide: ViewContainerRef, useValue: viewContainerRef },
-            { provide: TemplateRef, useValue: templateRef },
-            { provide: IterableDiffers, useValue: iterableDiffers },
-            { provide: NgZone, useValue: ngZone },
-            { provide: CdkVirtualForOf, useClass: CdkVirtualForOf },
-        ],
-    });
-    return cdkVirtualForInjector.get(CdkVirtualForOf);
-}
-
-/*
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-var DatagridColumnChanges;
-(function (DatagridColumnChanges) {
-    DatagridColumnChanges[DatagridColumnChanges["WIDTH"] = 0] = "WIDTH";
-    DatagridColumnChanges[DatagridColumnChanges["HIDDEN"] = 1] = "HIDDEN";
-    DatagridColumnChanges[DatagridColumnChanges["INITIALIZE"] = 2] = "INITIALIZE";
-})(DatagridColumnChanges || (DatagridColumnChanges = {}));
-const ALL_COLUMN_CHANGES = Object.keys(DatagridColumnChanges)
-    .map(key => DatagridColumnChanges[key])
-    .filter(key => key === parseInt(key, 10) && key !== DatagridColumnChanges.INITIALIZE); // extracts only integer keys
-
-/*
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ColumnsService {
-    constructor() {
-        this.columns = [];
-        this.columnsStateChange = new BehaviorSubject(null);
-        this._cache = [];
-    }
-    get columnStates() {
-        return this.columns.map(column => column.value);
-    }
-    get hasHideableColumns() {
-        return this.columnStates.filter(state => state.hideable).length > 0;
-    }
-    get visibleColumns() {
-        return this.columnStates.filter(state => !state.hidden);
-    }
-    cache() {
-        this._cache = this.columns.map(subject => {
-            const value = { ...subject.value };
-            delete value.changes;
-            return value;
-        });
-    }
-    hasCache() {
-        return !!this._cache.length;
-    }
-    resetToLastCache() {
-        this._cache.forEach((state, index) => {
-            // Just emit the exact value from the cache
-            const cachedState = { ...state, changes: ALL_COLUMN_CHANGES };
-            this.columns[index].next(cachedState);
-            this.columnsStateChange.next(cachedState);
-        });
-        this._cache = [];
-    }
-    // Helper method to emit a change to a column only when there is an actual diff to process for that column
-    emitStateChangeAt(columnIndex, diff) {
-        if (!this.columns[columnIndex]) {
-            return;
-        }
-        this.emitStateChange(this.columns[columnIndex], diff);
-    }
-    emitStateChange(column, diff) {
-        const changedState = { ...column.value, ...diff };
-        column.next(changedState);
-        this.columnsStateChange.next(changedState);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnsService, decorators: [{
-            type: Injectable
-        }] });
 
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
@@ -4721,10 +5010,10 @@ class StateProvider {
         }
         return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StateProvider, deps: [{ token: FiltersProvider }, { token: Sort }, { token: Page }, { token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StateProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: StateProvider, deps: [{ token: FiltersProvider }, { token: Sort }, { token: Page }, { token: StateDebouncer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: StateProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: StateProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: StateProvider, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FiltersProvider }, { type: Sort }, { type: Page }, { type: StateDebouncer }] });
 
@@ -4750,6 +5039,7 @@ class DatagridCellRenderer {
     resetState(state) {
         this.setWidth(state);
         this.setHidden(state);
+        this.setPinned(state);
     }
     setWidth(state) {
         if (state.strictWidth) {
@@ -4768,14 +5058,22 @@ class DatagridCellRenderer {
             this.renderer.removeClass(this.el.nativeElement, HIDDEN_COLUMN_CLASS);
         }
     }
+    setPinned(state) {
+        if (state.pinned) {
+            this.renderer.addClass(this.el.nativeElement, PINNED_COLUMN_CLASS);
+        }
+        else {
+            this.renderer.removeClass(this.el.nativeElement, PINNED_COLUMN_CLASS);
+        }
+    }
     clearWidth() {
         this.renderer.removeClass(this.el.nativeElement, STRICT_WIDTH_CLASS);
         this.renderer.setStyle(this.el.nativeElement, 'width', null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridCellRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DatagridRenderOrganizer }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridCellRenderer, isStandalone: false, selector: "clr-dg-cell", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridCellRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DatagridRenderOrganizer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridCellRenderer, isStandalone: false, selector: "clr-dg-cell", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridCellRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridCellRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-dg-cell',
@@ -4842,10 +5140,10 @@ class DatagridRowRenderer {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridRowRenderer, deps: [{ token: ColumnsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridRowRenderer, isStandalone: false, selector: "clr-dg-row", queries: [{ propertyName: "cells", predicate: DatagridCellRenderer }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridRowRenderer, deps: [{ token: ColumnsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridRowRenderer, isStandalone: false, selector: "clr-dg-row", queries: [{ propertyName: "cells", predicate: DatagridCellRenderer }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridRowRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridRowRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-dg-row',
@@ -4863,10 +5161,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class DatagridWillyWonka extends WillyWonka {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridWillyWonka, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridWillyWonka, isStandalone: false, selector: "clr-datagrid", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridWillyWonka, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridWillyWonka, isStandalone: false, selector: "clr-datagrid", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridWillyWonka, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridWillyWonka, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-datagrid',
@@ -4891,10 +5189,10 @@ class ActionableOompaLoompa extends OompaLoompa {
     get flavor() {
         return this.rowActions.hasActionableRow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionableOompaLoompa, deps: [{ token: i0.ChangeDetectorRef }, { token: DatagridWillyWonka, optional: true }, { token: RowActionService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ActionableOompaLoompa, isStandalone: false, selector: "clr-datagrid, clr-dg-row", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ActionableOompaLoompa, deps: [{ token: i0.ChangeDetectorRef }, { token: DatagridWillyWonka, optional: true }, { token: RowActionService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ActionableOompaLoompa, isStandalone: false, selector: "clr-datagrid, clr-dg-row", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionableOompaLoompa, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ActionableOompaLoompa, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-datagrid, clr-dg-row',
@@ -4921,10 +5219,10 @@ class ExpandableOompaLoompa extends OompaLoompa {
     get flavor() {
         return this.expandableCount.hasExpandableRow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ExpandableOompaLoompa, deps: [{ token: i0.ChangeDetectorRef }, { token: DatagridWillyWonka, optional: true }, { token: ExpandableRowsCount }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ExpandableOompaLoompa, isStandalone: false, selector: "clr-datagrid, clr-dg-row", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ExpandableOompaLoompa, deps: [{ token: i0.ChangeDetectorRef }, { token: DatagridWillyWonka, optional: true }, { token: ExpandableRowsCount }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ExpandableOompaLoompa, isStandalone: false, selector: "clr-datagrid, clr-dg-row", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ExpandableOompaLoompa, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ExpandableOompaLoompa, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-datagrid, clr-dg-row',
@@ -4941,7 +5239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagrid {
-    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, document, el, page, commonStrings, keyNavigation, zone) {
+    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, document, el, page, commonStrings, keyNavigation, zone, columnsService) {
         this.organizer = organizer;
         this.items = items;
         this.expandableRows = expandableRows;
@@ -4957,6 +5255,7 @@ class ClrDatagrid {
         this.commonStrings = commonStrings;
         this.keyNavigation = keyNavigation;
         this.zone = zone;
+        this.columnsService = columnsService;
         this.clrDgSingleSelectionAriaLabel = this.commonStrings.keys.singleSelectionAriaLabel;
         this.clrDgSingleActionableAriaLabel = this.commonStrings.keys.singleActionableAriaLabel;
         this.clrDetailExpandableAriaLabel = this.commonStrings.keys.detailExpandableAriaLabel;
@@ -4980,6 +5279,13 @@ class ClrDatagrid {
          */
         this._subscriptions = [];
         this._virtualScrollSubscriptions = [];
+        /**
+         * The placeholder columns we create from `fixedColumnTemplate` for the calculate pass. Unlike
+         * the column views, which belong to their `WrappedColumn`, these are created here on every
+         * pass, so they are ours to destroy. Detaching them from the container only unlinks them - the
+         * views themselves would stay alive and keep the whole datagrid in memory.
+         */
+        this.fixedColumnViews = [];
         this.cachedRowsHeight = 0;
         this.cachedContentHeight = 0;
         this.resizeObserver = new ResizeObserver(entries => {
@@ -4987,6 +5293,11 @@ class ClrDatagrid {
                 this.handleResizeChanges(entries);
             });
         });
+        /**
+         * Watches the row controls for anything that changes their width without going through a render
+         * cycle - a density change, or an application restyling them.
+         */
+        this.rowControlsObserver = new ResizeObserver(() => this.updateRowControlsWidth());
         const datagridId = uniqueIdFactory();
         this.selectAllId = 'clr-dg-select-all-' + datagridId;
         detailService.id = datagridId;
@@ -5060,6 +5371,9 @@ class ClrDatagrid {
     get virtualScroll() {
         return this._virtualScroll?.get(0);
     }
+    get isDetailOverlay() {
+        return this.detailService.detailWidth === MAX_DETAIL_WIDTH;
+    }
     ngAfterContentInit() {
         if (!this.items.smart) {
             this.items.all = this.rows.map((row) => row.item);
@@ -5109,6 +5423,7 @@ class ClrDatagrid {
     ngAfterViewInit() {
         this.keyNavigation.initializeKeyGrid(this.el.nativeElement);
         this.updateDetailState();
+        this.zone.runOutsideAngular(() => this.rowControlsObserver.observe(this.rowControls.nativeElement));
         // Emit the state only if it is not an empty object.
         // Default state of `ClrDatagridStateInterface` is an empty object.
         // The refresh emit is needed in Server-driven datagrid when pagination is set, but the data is still not requested.
@@ -5135,7 +5450,12 @@ class ClrDatagrid {
             for (let i = this._projectedDisplayColumns.length; i > 0; i--) {
                 this._projectedDisplayColumns.detach();
             }
+            // Remove any projected columns from the projectedStickyColumns container
+            for (let i = this._projectedStickyColumns.length; i > 0; i--) {
+                this._projectedStickyColumns.detach();
+            }
             // Remove any projected columns from the projectedCalculationColumns container
+            this.destroyFixedColumnViews();
             for (let i = this._projectedCalculationColumns.length; i > 0; i--) {
                 this._projectedCalculationColumns.detach();
             }
@@ -5150,12 +5470,21 @@ class ClrDatagrid {
             if (viewChange === DatagridDisplayMode.DISPLAY) {
                 // Set state, style for the datagrid to DISPLAY and insert row & columns into containers
                 this.renderer.removeClass(this.el.nativeElement, 'datagrid-calculate-mode');
-                this.columns.forEach(column => {
-                    this._projectedDisplayColumns.insert(column._view);
+                // Pinned columns go into the pinned container so they stay visible during horizontal
+                // scroll. Iterating in declaration order keeps both groups in their original order,
+                // which is what matches them with the cells of every row.
+                this.columns.forEach((column, index) => {
+                    const container = this.columnsService.isPinned(index)
+                        ? this._projectedStickyColumns
+                        : this._projectedDisplayColumns;
+                    container.insert(column._view);
                 });
                 this.rows.forEach(row => {
                     this._displayedRows.insert(row._view);
                 });
+                // The row controls are only laid out in this mode, and this is also the point where
+                // their number can have changed.
+                this.updateRowControlsWidth();
             }
             else {
                 // Set state, style for the datagrid to CALCULATE and insert row & columns into containers
@@ -5166,9 +5495,11 @@ class ClrDatagrid {
                     this.selection.selectionType !== this.SELECTION_TYPE.None,
                     this.expandableRows.hasExpandableRow || this.detailService.enabled,
                 ];
-                fixedColumnConditions
-                    .filter(Boolean)
-                    .forEach(() => this._projectedCalculationColumns.insert(this._fixedColumnTemplate.createEmbeddedView(null)));
+                fixedColumnConditions.filter(Boolean).forEach(() => {
+                    const fixedColumnView = this._fixedColumnTemplate.createEmbeddedView(null);
+                    this.fixedColumnViews.push(fixedColumnView);
+                    this._projectedCalculationColumns.insert(fixedColumnView);
+                });
                 this.columns.forEach(column => {
                     this._projectedCalculationColumns.insert(column._view);
                 });
@@ -5200,9 +5531,16 @@ class ClrDatagrid {
         this.selection.checkForChanges();
     }
     ngOnDestroy() {
+        this.destroyFixedColumnViews();
         this._subscriptions.forEach((sub) => sub.unsubscribe());
         this._virtualScrollSubscriptions.forEach((sub) => sub.unsubscribe());
         this.resizeObserver.disconnect();
+        this.rowControlsObserver.disconnect();
+        // If the detail pane is left open, close it so the DetailService unregisters itself from the
+        // root ModalStackService instead of staying referenced there after this datagrid is gone.
+        if (this.detailService.isOpen) {
+            this.detailService.close();
+        }
     }
     toggleAllSelected($event) {
         $event.preventDefault();
@@ -5240,6 +5578,16 @@ class ClrDatagrid {
     dataChanged() {
         this.items.refresh();
     }
+    destroyFixedColumnViews() {
+        // On teardown Angular has already destroyed the views in our container by the time it runs our
+        // `ngOnDestroy`, so only the calculate/display transition has live ones to release here.
+        this.fixedColumnViews.forEach(view => {
+            if (!view.destroyed) {
+                view.destroy();
+            }
+        });
+        this.fixedColumnViews = [];
+    }
     toggleVirtualScrollSubscriptions() {
         const hasVirtualScroll = !!this.virtualScroll;
         // the virtual scroll will handle the scrolling
@@ -5277,6 +5625,42 @@ class ClrDatagrid {
             this._virtualScrollSubscriptions = [];
         }
     }
+    /**
+     * Publishes the width of the row controls - the static container holding the select, action and
+     * caret cells - as a custom property, which is where the pinned columns read the offset they
+     * became static at. They are static right after the controls rather than at the edge of the datagrid,
+     * and `position: sticky` always measures its offsets from that edge, so the distance between the
+     * two has to be measured and handed to the stylesheet.
+     *
+     * The header and the rows get their own value: the header renders one caret column for both
+     * kinds of caret where a row renders one cell per caret, so the two containers are not
+     * necessarily the same width.
+     *
+     * Nothing reads this property unless a column is pinned - `.datagrid-pinned-cells` is the only
+     * consumer, and it is `display: none` while empty - so the measurement is skipped entirely
+     * otherwise. It matters on a datagrid with many rows: `getBoundingClientRect()` forces the
+     * browser to resolve any pending layout first, and on a large datagrid that resolution is not
+     * cheap. Both boxes are read before either write for the same reason - writing the custom
+     * property is itself layout-affecting (`.datagrid-pinned-cells` reads it back for its own
+     * position and width), so reading again in between would force that resolution twice.
+     */
+    updateRowControlsWidth() {
+        const headerControls = this.rowControls?.nativeElement;
+        if (!headerControls || !this.datagridHeader || !this.columnsService.hasPinnedColumns) {
+            return;
+        }
+        const rowControls = this.rowsWrapper.nativeElement.querySelector('.datagrid-row-master > .datagrid-row-sticky:not(.datagrid-row-sticky-scroll)');
+        // Measured from the box rather than from offsetWidth, which is rounded to whole pixels and
+        // would leave the pinned columns off by up to a pixel.
+        const headerWidth = headerControls.getBoundingClientRect().width;
+        // Without a row there is nothing to line up with, so the header is a good enough stand-in.
+        const rowWidth = (rowControls || headerControls).getBoundingClientRect().width;
+        this.setRowControlsWidth(this.datagridHeader.nativeElement, headerWidth);
+        this.setRowControlsWidth(this.rowsWrapper.nativeElement, rowWidth);
+    }
+    setRowControlsWidth(target, width) {
+        this.renderer.setStyle(target, '--clr-datagrid-row-controls-width', `${width}px`, RendererStyleFlags2.DashCase);
+    }
     handleResizeChanges(entries) {
         const rowsWrapper = this.rowsWrapper.nativeElement;
         for (const entry of entries) {
@@ -5295,8 +5679,8 @@ class ClrDatagrid {
             this.renderer.removeClass(rowsWrapper, scrollClass);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: Page }, { token: i2.ClrCommonStringsService }, { token: KeyNavigationGridController }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagrid, isStandalone: false, selector: "clr-datagrid", inputs: { loadingMoreItems: ["clrLoadingMoreItems", "loadingMoreItems"], clrDgSingleSelectionAriaLabel: "clrDgSingleSelectionAriaLabel", clrDgSingleActionableAriaLabel: "clrDgSingleActionableAriaLabel", clrDetailExpandableAriaLabel: "clrDetailExpandableAriaLabel", clrDgDisablePageFocus: "clrDgDisablePageFocus", customSelectAllEnabled: ["clrDgCustomSelectAllEnabled", "customSelectAllEnabled"], selectAllDisabled: ["clrDgSelectAllDisabled", "selectAllDisabled"], loading: ["clrDgLoading", "loading"], selectionType: ["clrDgSelectionType", "selectionType", selectionTypeAttribute], selected: ["clrDgSelected", "selected"], clrDgPreserveSelection: "clrDgPreserveSelection", rowSelectionMode: ["clrDgRowSelection", "rowSelectionMode"], identityFn: ["clrDgItemsIdentityFn", "identityFn"] }, outputs: { selectedChanged: "clrDgSelectedChange", refresh: "clrDgRefresh", customSelectAll: "clrDgCustomSelectAll" }, host: { properties: { "class.datagrid-host": "true", "class.datagrid-detail-open": "detailService.isOpen", "class.datagrid-virtual-scroll": "!!virtualScroll" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: Page }, { token: i2.ClrCommonStringsService }, { token: KeyNavigationGridController }, { token: i0.NgZone }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagrid, isStandalone: false, selector: "clr-datagrid", inputs: { loadingMoreItems: ["clrLoadingMoreItems", "loadingMoreItems"], clrDgSingleSelectionAriaLabel: "clrDgSingleSelectionAriaLabel", clrDgSingleActionableAriaLabel: "clrDgSingleActionableAriaLabel", clrDetailExpandableAriaLabel: "clrDetailExpandableAriaLabel", clrDgDisablePageFocus: "clrDgDisablePageFocus", customSelectAllEnabled: ["clrDgCustomSelectAllEnabled", "customSelectAllEnabled"], selectAllDisabled: ["clrDgSelectAllDisabled", "selectAllDisabled"], loading: ["clrDgLoading", "loading"], selectionType: ["clrDgSelectionType", "selectionType", selectionTypeAttribute], selected: ["clrDgSelected", "selected"], clrDgPreserveSelection: "clrDgPreserveSelection", rowSelectionMode: ["clrDgRowSelection", "rowSelectionMode"], identityFn: ["clrDgItemsIdentityFn", "identityFn"] }, outputs: { selectedChanged: "clrDgSelectedChange", refresh: "clrDgRefresh", customSelectAll: "clrDgCustomSelectAll" }, host: { properties: { "class.datagrid-host": "true", "class.datagrid-detail-open": "detailService.isOpen", "class.datagrid-detail-overlay": "isDetailOverlay", "class.datagrid-virtual-scroll": "!!virtualScroll" } }, providers: [
             Selection,
             Sort,
             FiltersProvider,
@@ -5312,9 +5696,9 @@ class ClrDatagrid {
             ColumnsService,
             DisplayModeService,
             KeyNavigationGridController,
-        ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "_virtualScroll", predicate: i0.forwardRef(() => ClrDatagridVirtualScrollDirective) }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow, emitDistinctChangesOnly: false }], viewQueries: [{ propertyName: "datagrid", first: true, predicate: ["datagrid"], descendants: true, read: ElementRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "datagridHeader", first: true, predicate: ["datagridHeader"], descendants: true, read: ElementRef }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "rowsWrapper", first: true, predicate: ["rowsWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_fixedColumnTemplate", first: true, predicate: ["fixedColumnTemplate"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\" #datagridHeader>\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  @if (selection.selectionType === SELECTION_TYPE.Multi) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    (keydown.space)=\"toggleAllSelected($event)\"\n                  >\n                    @if (!virtualScroll || customSelectAllEnabled) {\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                          which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        #selectAllCheckbox\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                        [attr.disabled]=\"selectAllDisabled ? true : null\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n                    }\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for datagrid where you can select one row only -->\n                  @if (selection.selectionType === SELECTION_TYPE.Single) {\n                  <div #stickyHeader role=\"columnheader\" class=\"datagrid-column datagrid-select datagrid-fixed-column\">\n                    <div class=\"clr-sr-only\">{{clrDgSingleSelectionAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  @if (rowActionService.hasActionableRow) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleActionableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  @if (expandableRows.hasExpandableRow || detailService.enabled) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDetailExpandableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n                @if (virtualScroll) {\n                <div class=\"datagrid-row-sticky datagrid-row-sticky-scroll\">\n                  <div class=\"datagrid-column\"></div>\n                </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <div class=\"datagrid-content\" [class.datagrid-content-virtual]=\"virtualScroll\" #contentWrapper>\n            @if (virtualScroll) {\n            <div class=\"datagrid-content-virtual-spacer\" [style.height]=\"virtualScroll?.totalContentHeight\"></div>\n            }\n            <div role=\"presentation\" #rowsWrapper class=\"datagrid-rows\">\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <ng-container #displayedRows></ng-container>\n\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <!-- Custom placeholder overrides the default empty one -->\n              <ng-content select=\"clr-dg-placeholder\"></ng-content>\n              @if (!placeholder) {\n              <clr-dg-placeholder></clr-dg-placeholder>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    @if (loading) {\n    <div class=\"datagrid-spinner\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n    }\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n\n<ng-template #fixedColumnTemplate>\n  <div class=\"datagrid-column datagrid-fixed-column\"></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i13.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridCell, selector: "clr-dg-cell" }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { kind: "component", type: ClrDatagridRow, selector: "clr-dg-row", inputs: ["clrDgDetailDisabled", "clrDgDetailHidden", "clrDgSkeletonLoading", "clrDgItem", "clrDgSelectable", "clrDgSelected", "clrDgExpanded", "clrDgDetailOpenLabel", "clrDgDetailCloseLabel", "clrDgRowSelectionLabel"], outputs: ["clrDgSelectedChange", "clrDgExpandedChange"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }, { kind: "directive", type: DatagridCellRenderer, selector: "clr-dg-cell" }, { kind: "directive", type: DatagridRowRenderer, selector: "clr-dg-row" }, { kind: "directive", type: ActionableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }, { kind: "directive", type: ExpandableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }] }); }
+        ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "_virtualScroll", predicate: i0.forwardRef(() => ClrDatagridVirtualScrollDirective) }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow, emitDistinctChangesOnly: false }], viewQueries: [{ propertyName: "datagrid", first: true, predicate: ["datagrid"], descendants: true, read: ElementRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "datagridHeader", first: true, predicate: ["datagridHeader"], descendants: true, read: ElementRef }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "rowsWrapper", first: true, predicate: ["rowsWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedStickyColumns", first: true, predicate: ["projectedStickyColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_fixedColumnTemplate", first: true, predicate: ["fixedColumnTemplate"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "rowControls", first: true, predicate: ["rowControls"], descendants: true, read: ElementRef }, { propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\" #datagridHeader>\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\" #rowControls>\n                  <!--header for datagrid where you can select multiple rows -->\n                  @if (selection.selectionType === SELECTION_TYPE.Multi) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    (keydown.space)=\"toggleAllSelected($event)\"\n                  >\n                    @if (!virtualScroll || customSelectAllEnabled) {\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                          which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        #selectAllCheckbox\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                        [attr.disabled]=\"selectAllDisabled ? true : null\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n                    }\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for datagrid where you can select one row only -->\n                  @if (selection.selectionType === SELECTION_TYPE.Single) {\n                  <div #stickyHeader role=\"columnheader\" class=\"datagrid-column datagrid-select datagrid-fixed-column\">\n                    <div class=\"clr-sr-only\">{{clrDgSingleSelectionAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  @if (rowActionService.hasActionableRow) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleActionableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  @if (expandableRows.hasExpandableRow || detailService.enabled) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDetailExpandableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <div class=\"datagrid-pinned-cells\">\n                    <ng-container #projectedStickyColumns></ng-container>\n                  </div>\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n                @if (virtualScroll) {\n                <div class=\"datagrid-row-sticky datagrid-row-sticky-scroll\">\n                  <div class=\"datagrid-column\"></div>\n                </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <div class=\"datagrid-content\" [class.datagrid-content-virtual]=\"virtualScroll\" #contentWrapper>\n            @if (virtualScroll) {\n            <div class=\"datagrid-content-virtual-spacer\" [style.height]=\"virtualScroll?.totalContentHeight\"></div>\n            }\n            <div role=\"presentation\" #rowsWrapper class=\"datagrid-rows\">\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <ng-container #displayedRows></ng-container>\n\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <!-- Custom placeholder overrides the default empty one -->\n              <ng-content select=\"clr-dg-placeholder\"></ng-content>\n              @if (!placeholder) {\n              <clr-dg-placeholder></clr-dg-placeholder>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    @if (loading) {\n    <div class=\"datagrid-spinner\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n    }\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n\n<ng-template #fixedColumnTemplate>\n  <div class=\"datagrid-column datagrid-fixed-column\"></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i14.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i15.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridCell, selector: "clr-dg-cell" }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { kind: "component", type: ClrDatagridRow, selector: "clr-dg-row", inputs: ["clrDgDetailDisabled", "clrDgDetailHidden", "clrDgSkeletonLoading", "clrDgItem", "clrDgSelectable", "clrDgSelected", "clrDgExpanded", "clrDgDetailOpenLabel", "clrDgDetailCloseLabel", "clrDgRowSelectionLabel"], outputs: ["clrDgSelectedChange", "clrDgExpandedChange"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }, { kind: "directive", type: DatagridCellRenderer, selector: "clr-dg-cell" }, { kind: "directive", type: DatagridRowRenderer, selector: "clr-dg-row" }, { kind: "directive", type: ActionableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }, { kind: "directive", type: ExpandableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagrid, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datagrid', providers: [
                         Selection,
@@ -5335,12 +5719,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     ], host: {
                         '[class.datagrid-host]': 'true',
                         '[class.datagrid-detail-open]': 'detailService.isOpen',
+                        '[class.datagrid-detail-overlay]': 'isDetailOverlay',
                         '[class.datagrid-virtual-scroll]': '!!virtualScroll',
-                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\" #datagridHeader>\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  @if (selection.selectionType === SELECTION_TYPE.Multi) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    (keydown.space)=\"toggleAllSelected($event)\"\n                  >\n                    @if (!virtualScroll || customSelectAllEnabled) {\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                          which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        #selectAllCheckbox\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                        [attr.disabled]=\"selectAllDisabled ? true : null\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n                    }\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for datagrid where you can select one row only -->\n                  @if (selection.selectionType === SELECTION_TYPE.Single) {\n                  <div #stickyHeader role=\"columnheader\" class=\"datagrid-column datagrid-select datagrid-fixed-column\">\n                    <div class=\"clr-sr-only\">{{clrDgSingleSelectionAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  @if (rowActionService.hasActionableRow) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleActionableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  @if (expandableRows.hasExpandableRow || detailService.enabled) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDetailExpandableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n                @if (virtualScroll) {\n                <div class=\"datagrid-row-sticky datagrid-row-sticky-scroll\">\n                  <div class=\"datagrid-column\"></div>\n                </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <div class=\"datagrid-content\" [class.datagrid-content-virtual]=\"virtualScroll\" #contentWrapper>\n            @if (virtualScroll) {\n            <div class=\"datagrid-content-virtual-spacer\" [style.height]=\"virtualScroll?.totalContentHeight\"></div>\n            }\n            <div role=\"presentation\" #rowsWrapper class=\"datagrid-rows\">\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <ng-container #displayedRows></ng-container>\n\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <!-- Custom placeholder overrides the default empty one -->\n              <ng-content select=\"clr-dg-placeholder\"></ng-content>\n              @if (!placeholder) {\n              <clr-dg-placeholder></clr-dg-placeholder>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    @if (loading) {\n    <div class=\"datagrid-spinner\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n    }\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n\n<ng-template #fixedColumnTemplate>\n  <div class=\"datagrid-column datagrid-fixed-column\"></div>\n</ng-template>\n" }]
+                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\" #datagridHeader>\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\" #rowControls>\n                  <!--header for datagrid where you can select multiple rows -->\n                  @if (selection.selectionType === SELECTION_TYPE.Multi) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    (keydown.space)=\"toggleAllSelected($event)\"\n                  >\n                    @if (!virtualScroll || customSelectAllEnabled) {\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                          which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        #selectAllCheckbox\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                        [attr.disabled]=\"selectAllDisabled ? true : null\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n                    }\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for datagrid where you can select one row only -->\n                  @if (selection.selectionType === SELECTION_TYPE.Single) {\n                  <div #stickyHeader role=\"columnheader\" class=\"datagrid-column datagrid-select datagrid-fixed-column\">\n                    <div class=\"clr-sr-only\">{{clrDgSingleSelectionAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  @if (rowActionService.hasActionableRow) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleActionableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  @if (expandableRows.hasExpandableRow || detailService.enabled) {\n                  <div\n                    #stickyHeader\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDetailExpandableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  }\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <div class=\"datagrid-pinned-cells\">\n                    <ng-container #projectedStickyColumns></ng-container>\n                  </div>\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n                @if (virtualScroll) {\n                <div class=\"datagrid-row-sticky datagrid-row-sticky-scroll\">\n                  <div class=\"datagrid-column\"></div>\n                </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <div class=\"datagrid-content\" [class.datagrid-content-virtual]=\"virtualScroll\" #contentWrapper>\n            @if (virtualScroll) {\n            <div class=\"datagrid-content-virtual-spacer\" [style.height]=\"virtualScroll?.totalContentHeight\"></div>\n            }\n            <div role=\"presentation\" #rowsWrapper class=\"datagrid-rows\">\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <ng-container #displayedRows></ng-container>\n\n              @if (loadingMoreItems) {\n              <clr-dg-row class=\"datagrid-row-loading\">\n                <clr-dg-cell>\n                  <clr-spinner clrMedium></clr-spinner>\n                  <span>{{ commonStrings.keys.loading }}</span>\n                </clr-dg-cell>\n              </clr-dg-row>\n              }\n\n              <!-- Custom placeholder overrides the default empty one -->\n              <ng-content select=\"clr-dg-placeholder\"></ng-content>\n              @if (!placeholder) {\n              <clr-dg-placeholder></clr-dg-placeholder>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    @if (loading) {\n    <div class=\"datagrid-spinner\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n    }\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n\n<ng-template #fixedColumnTemplate>\n  <div class=\"datagrid-column datagrid-fixed-column\"></div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: DatagridRenderOrganizer }, { type: Items }, { type: ExpandableRowsCount }, { type: Selection }, { type: RowActionService }, { type: StateProvider }, { type: DisplayModeService }, { type: i0.Renderer2 }, { type: DetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: Page }, { type: i2.ClrCommonStringsService }, { type: KeyNavigationGridController }, { type: i0.NgZone }], propDecorators: { loadingMoreItems: [{
+                }] }, { type: i0.ElementRef }, { type: Page }, { type: i2.ClrCommonStringsService }, { type: KeyNavigationGridController }, { type: i0.NgZone }, { type: ColumnsService }], propDecorators: { loadingMoreItems: [{
                 type: Input,
                 args: ['clrLoadingMoreItems']
             }], clrDgSingleSelectionAriaLabel: [{
@@ -5402,6 +5787,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], _projectedDisplayColumns: [{
                 type: ViewChild,
                 args: ['projectedDisplayColumns', { read: ViewContainerRef }]
+            }], _projectedStickyColumns: [{
+                type: ViewChild,
+                args: ['projectedStickyColumns', { read: ViewContainerRef }]
             }], _projectedCalculationColumns: [{
                 type: ViewChild,
                 args: ['projectedCalculationColumns', { read: ViewContainerRef }]
@@ -5420,6 +5808,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], selectAllCheckbox: [{
                 type: ViewChild,
                 args: ['selectAllCheckbox']
+            }], rowControls: [{
+                type: ViewChild,
+                args: ['rowControls', { read: ElementRef }]
             }], loading: [{
                 type: Input,
                 args: ['clrDgLoading']
@@ -5446,10 +5837,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagridActionBar {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridActionBar, isStandalone: false, selector: "clr-dg-action-bar", host: { properties: { "class.datagrid-action-bar": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridActionBar, isStandalone: false, selector: "clr-dg-action-bar", host: { properties: { "class.datagrid-action-bar": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridActionBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridActionBar, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-action-bar',
@@ -5520,8 +5911,8 @@ class ClrDatagridActionOverflow {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridActionOverflow, deps: [{ token: RowActionService }, { token: i2.ClrCommonStringsService }, { token: PLATFORM_ID }, { token: i3.ClrPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridActionOverflow, isStandalone: false, selector: "clr-dg-action-overflow", inputs: { buttonLabel: ["clrDgActionOverflowButtonLabel", "buttonLabel"], open: ["clrDgActionOverflowOpen", "open"] }, outputs: { openChange: "clrDgActionOverflowOpenChange" }, viewQueries: [{ propertyName: "keyFocus", first: true, predicate: ClrKeyFocus, descendants: true }], hostDirectives: [{ directive: i3.ClrPopoverHostDirective }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridActionOverflow, deps: [{ token: RowActionService }, { token: i2.ClrCommonStringsService }, { token: PLATFORM_ID }, { token: i3.ClrPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridActionOverflow, isStandalone: false, selector: "clr-dg-action-overflow", inputs: { buttonLabel: ["clrDgActionOverflowButtonLabel", "buttonLabel"], open: ["clrDgActionOverflowOpen", "open"] }, outputs: { openChange: "clrDgActionOverflowOpenChange" }, viewQueries: [{ propertyName: "keyFocus", first: true, predicate: ClrKeyFocus, descendants: true }], hostDirectives: [{ directive: i3.ClrPopoverHostDirective }], ngImport: i0, template: `
     <button
       tabindex="-1"
       class="datagrid-action-toggle"
@@ -5557,9 +5948,9 @@ class ClrDatagridActionOverflow {
     >
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: i2.ClrKeyFocus, selector: "[clrKeyFocus]", inputs: ["clrDirection", "clrFocusOnLoad", "clrKeyFocus"], outputs: ["clrFocusChange"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }, { kind: "directive", type: i3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: i2.ClrKeyFocus, selector: "[clrKeyFocus]", inputs: ["clrDirection", "clrFocusOnLoad", "clrKeyFocus"], outputs: ["clrFocusChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridActionOverflow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridActionOverflow, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-action-overflow',
@@ -5620,6 +6011,591 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ['clrDgActionOverflowOpen']
             }] } });
 
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * The focus handler of the `clr-dg-column-actions` menu, with the items projected into the menu
+ * appended to the ones it declares. ClrDropdownMenu only hands over its own content query, which
+ * cannot see projected items, and it hands it over again whenever that query changes - so the
+ * projected ones are added here, where every one of those hand-overs passes through.
+ */
+class ColumnActionsFocusHandler extends DropdownFocusHandler {
+    constructor() {
+        super(...arguments);
+        this.ownItems = [];
+        this.projectedItems = [];
+    }
+    addChildren(children) {
+        this.ownItems = children;
+        super.addChildren([...children, ...this.projectedItems]);
+    }
+    // The menu resets its children when it closes, and the items it declared go with it.
+    resetChildren() {
+        this.ownItems = [];
+        super.resetChildren();
+    }
+    setProjectedItems(items) {
+        this.projectedItems = items;
+        this.addChildren(this.ownItems);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnActionsFocusHandler, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnActionsFocusHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ColumnActionsFocusHandler, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Groups the actions of a single column behind one menu in the column header. It only gathers
+ * controls that already exist on the column - the behavior itself stays on `ClrDatagridColumn`,
+ * so the menu and the header controls can never drift apart.
+ *
+ * Each item is rendered only when the column can actually perform it, so the menu never offers a
+ * dead option - that covers both what the column can never do, such as sorting when it is not
+ * sortable, and what it cannot do right now, such as clearing a sort while nothing is sorted.
+ * Anything projected into the component is appended after the built-in items.
+ *
+ * A column that has a filter gets a filter action automatically, and the filter drops its own toggle
+ * for as long as this menu is present - the header keeps one control per column rather than two. The
+ * trigger also takes over showing that the column is filtered, which the toggle used to do.
+ * `clrDgKeepFilterInHeader` opts back into the toggle, and then the menu drops the filter action in
+ * exchange: a column offers one way to reach its filter, never both at once.
+ *
+ * Projected items can be `clrDgColumnAction`s, plain `clrDropdownItem`s, or a nested `clr-dropdown`.
+ * They join the arrow key order after the built-in items as long as they are projected directly -
+ * an item wrapped in an element of its own is not found. A nested dropdown's own items stay in its
+ * own menu.
+ *
+ * The component is the dropdown itself rather than wrapping one, so that a projected item can reach
+ * it: injection resolves from where a node is declared, and an item declared outside this component
+ * would sit outside the injector of any `clr-dropdown` in its template.
+ */
+class ClrDatagridColumnActions extends ClrDropdown {
+    constructor(column, commonStrings, columnActions, 
+    // The column's own popover service, shared with its filter. This component brings its own for
+    // the menu, so the menu and the filter never fight over one overlay - which is also why this one
+    // has to be resolved from the column rather than from here.
+    columnPopover, changeDetectorRef, injector, filters, parent, popoverService, focusHandler, dropdownService) {
+        super(parent, popoverService, focusHandler, changeDetectorRef, dropdownService);
+        this.column = column;
+        this.commonStrings = commonStrings;
+        this.columnActions = columnActions;
+        this.columnPopover = columnPopover;
+        this.changeDetectorRef = changeDetectorRef;
+        this.injector = injector;
+        this.filters = filters;
+        // Exposed so the template can compare against the enum.
+        this.ClrDatagridSortOrder = ClrDatagridSortOrder;
+        this._keepFilterInHeader = false;
+        // Named for this component rather than inherited: ClrDropdown keeps its own private list.
+        this.subs = [];
+        this.columnActionsFocusHandler = inject(ColumnActionsFocusHandler);
+        this.isMenuClosable = false;
+        // Tells the filter to drop its own toggle - from here on this menu is the only way to open it,
+        // unless clrDgKeepFilterInHeader asked to keep both. Reading the backing field rather than the
+        // getter covers the default: Angular only invokes the setter above when the input is actually
+        // bound, and by then the field initializer has already run.
+        columnActions.filterInHeader.set(this._keepFilterInHeader);
+        // Tells the column to drop its pin toggle, since Pin Column is offered here instead.
+        columnActions.menuPresent.set(true);
+    }
+    /**
+     * Keeps the filter's own toggle in the column header instead of moving it into this menu, and the
+     * menu drops its filter action in exchange - a column offers one way to reach its filter at a
+     * time, never two.
+     */
+    get keepFilterInHeader() {
+        return this._keepFilterInHeader;
+    }
+    set keepFilterInHeader(value) {
+        this._keepFilterInHeader = value;
+        this.columnActions.filterInHeader.set(value);
+    }
+    /**
+     * The menu is a live view of the column, so the label has to be read at render time rather than
+     * cached - the column title can change, and so can the sort state it reports.
+     */
+    get triggerLabel() {
+        const title = this.column.titleContainer?.nativeElement.textContent.trim();
+        return title
+            ? this.commonStrings.parse(this.commonStrings.keys.datagridColumnActionsAriaLabel, { COLUMN: title })
+            : this.commonStrings.keys.columnActions;
+    }
+    get sortOrder() {
+        return this.column.sortOrder;
+    }
+    get canClearSort() {
+        return this.sortOrder !== ClrDatagridSortOrder.UNSORTED && !this.column.disableUnsort;
+    }
+    get hasFilter() {
+        return !!this.columnActions.filter();
+    }
+    /**
+     * Hiding the filter toggle also hides the only sign that a column is filtered, so the trigger and
+     * the filter action carry that state instead.
+     */
+    get filterActive() {
+        return !!this.columnActions.filter()?.active && !this.keepFilterInHeader;
+    }
+    /**
+     * Whether the filter this menu opens is open, for the filter action to report the same way the
+     * toggle it replaced did. Read from the column's popover service rather than from the filter,
+     * because that service is what the action opens.
+     */
+    get filterOpen() {
+        return this.columnPopover.open;
+    }
+    /**
+     * The popover the filter action opens, so it can point at what it controls - again the same thing
+     * the replaced toggle pointed at.
+     */
+    get filterPopoverId() {
+        return this.columnActions.filter()?.popoverId ?? null;
+    }
+    /**
+     * The items projected into the menu. The menu's own content query cannot see them, so they are
+     * handed to the focus handler from here.
+     *
+     * Only direct children are queried, not descendants: a nested `clr-dropdown` is one item here - its
+     * focus handler - and the items inside it belong to its own menu, not to this one.
+     */
+    set projectedItems(items) {
+        this.projectedItemsSubscription?.unsubscribe();
+        this.projectedItemsSubscription = items.changes.subscribe(() => this.columnActionsFocusHandler.setProjectedItems(items.toArray()));
+        this.columnActionsFocusHandler.setProjectedItems(items.toArray());
+    }
+    set menuPopoverContent(popoverContent) {
+        this._menuPopoverContent = popoverContent;
+        // A dropdown menu closes on scroll by default. This one stays open so that pinning or
+        // reordering a column - which can itself move the page under the menu - does not also close it.
+        if (popoverContent) {
+            popoverContent.scrollToClose = false;
+        }
+    }
+    ngAfterViewInit() {
+        // The trigger and the filter action show whether the column is filtered, and this component is
+        // OnPush, so it has to be told when a filter value changes.
+        if (this.filters) {
+            this.subs.push(this.filters.change.subscribe(() => this.changeDetectorRef.markForCheck()));
+        }
+        // Same for the filter action reporting whether the filter is open: opening it goes through this
+        // template and refreshes the view on its own, but closing it does not - that is an outside click
+        // or an escape key handled by the overlay, and the item would be left announcing itself expanded.
+        this.subs.push(this.columnPopover.openChange.subscribe(open => {
+            this.changeDetectorRef.markForCheck();
+            // openFilter() links the filter's popover to this menu's so they scroll together.
+            // Clearing it here keeps the link scoped to one filter opening.
+            if (!open) {
+                this.columnPopover.parent = null;
+            }
+        }));
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.subs.forEach(sub => sub.unsubscribe());
+        this.projectedItemsSubscription?.unsubscribe();
+        // Hands the filter and the pin their own toggles back, in case the menu is removed while the
+        // column stays.
+        this.columnActions.filterInHeader.set(true);
+        this.columnActions.menuPresent.set(false);
+        // doesn't really matter who the current column popover parent is. The original value is null returning it to that.
+        this.columnPopover.parent = null;
+    }
+    /**
+     * Returns focus to the trigger before closing, the same order `clrDropdownItem` uses - moving focus
+     * first means it lands correctly even when the action opens a modal.
+     */
+    closeMenu() {
+        this.focusHandler.focus();
+        this.popoverService.open = false;
+    }
+    /**
+     * Re-anchors the open menu to the trigger, for an action that moves the column it belongs to
+     * instead of closing the menu behind it.
+     *
+     * Deferred to after the next render rather than run straight away, because the action that asked
+     * for this has only just been clicked - the column is relocated by the change detection that
+     * follows, so measuring the trigger now would re-anchor the menu to where it already is.
+     */
+    repositionMenu() {
+        afterNextRender(() => this.popoverService.updatePosition(), { injector: this.injector });
+    }
+    /**
+     * Moves focus to one of the projected actions, keeping the menu's keyboard handling in step with
+     * it.
+     *
+     * Called by `clrDgColumnAction` when the item takes focus, so that focusing an item by any means -
+     * including a plain `focus()` from outside, after an action rebuilt the menu - leaves space and
+     * enter acting on that same item rather than on whatever the menu focused when it opened.
+     */
+    focusAction(item) {
+        this.focusHandler.moveTo(item);
+    }
+    /**
+     * The menu states a direction rather than cycling through them, so asking for the direction the
+     * column already has is a no-op.
+     *
+     * The guard is needed because `Sort.toggle()` reads `forceReverse: false` as "toggle" rather than
+     * "ascending" - `forceReverse || !this._reverse` falls through to the toggle for a falsy value - so
+     * `sort(false)` on an already ascending column would flip it to descending. The tri-state title
+     * button never hits that path, because it always calls `sort()` without an argument.
+     */
+    sort(descending) {
+        const requested = descending ? ClrDatagridSortOrder.DESC : ClrDatagridSortOrder.ASC;
+        if (this.sortOrder !== requested) {
+            this.column.sort(descending);
+        }
+    }
+    /**
+     * Pins or unpins the column, then re-anchors this menu to the trigger.
+     *
+     * Pinning moves the column between the datagrid's static and scrollable containers, and the
+     * trigger this menu is anchored to travels with it - far enough that the menu would otherwise be
+     * left hanging next to where the column used to be. The menu stays open on purpose, so the action
+     * it now offers is the one that undoes the pin the user just applied.
+     *
+     * The columns are relocated on the render cycle the pinned state change schedules, not while this
+     * runs, so the overlay can only be re-anchored once that has happened - which `repositionMenu`
+     * takes care of.
+     */
+    togglePinned() {
+        this.column.togglePinned();
+        this.repositionMenu();
+    }
+    /**
+     * Opens the filter of this column, anchored to the "Filter Column" menu item itself (`#trigger`
+     * above), so the popover positions off the item that was actually clicked rather than the kebab.
+     *
+     * The popover is driven through the column's ClrPopoverService rather than through
+     * `ClrDatagridFilter.open`, because that is the one thing every filter flavour has in common - a
+     * projected clr-dg-filter, and the string and numeric filters the column builds for clrDgField,
+     * all share this service. Setting `origin` is all it takes to re-anchor it: `clrPopoverOrigin` is
+     * itself only an assignment to that property, and with the toggle gone nothing else claims it.
+     *
+     * `parent` links the filter's popover to this menu's, so that scrolling while both are open closes
+     * or repositions them together rather than leaving one behind. It is cleared again once the filter
+     * closes, in the `openChange` subscription below, so it never outlives the menu session that set it.
+     */
+    openFilter(event) {
+        // reroute filter popover origin to filter trigger and set dropdown menu as parent.
+        this.columnPopover.origin = this.trigger;
+        this.columnPopover.parent = this._menuPopoverContent;
+        // The popover closes on an outside click, and ignores exactly one event while doing so: the one
+        // that opened it. Without this, the very click on this menu item would close the filter again.
+        this.columnPopover.openEvent = event;
+        this.columnPopover.open = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnActions, deps: [{ token: ClrDatagridColumn }, { token: i2.ClrCommonStringsService }, { token: ColumnActionsService }, { token: i3.ClrPopoverService, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: FiltersProvider, optional: true }, { token: i6.ClrDropdown, optional: true, skipSelf: true }, { token: i3.ClrPopoverService }, { token: i6.DropdownFocusHandler }, { token: i6.RootDropdownService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridColumnActions, isStandalone: false, selector: "clr-dg-column-actions", inputs: { keepFilterInHeader: ["clrDgKeepFilterInHeader", "keepFilterInHeader", booleanAttribute] }, host: { properties: { "class.datagrid-column-actions": "true" } }, providers: [
+            ROOT_DROPDOWN_PROVIDER,
+            FOCUS_SERVICE_PROVIDER,
+            ColumnActionsFocusHandler,
+            { provide: DropdownFocusHandler, useExisting: ColumnActionsFocusHandler },
+            { provide: FocusableItem, useExisting: ColumnActionsFocusHandler },
+            { provide: ClrDropdown, useExisting: ClrDatagridColumnActions },
+        ], queries: [{ propertyName: "projectedItems", predicate: FocusableItem }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menuPopoverContent", first: true, predicate: ClrDropdownMenu, descendants: true, read: ClrPopoverContent }], usesInheritance: true, ngImport: i0, template: `
+    <button
+      class="datagrid-column-actions-toggle"
+      type="button"
+      clrDropdownTrigger
+      [class.datagrid-column-actions-filtered]="filterActive"
+      [attr.aria-label]="triggerLabel"
+    >
+      <cds-icon
+        [size]="filterActive ? '16' : '12'"
+        [shape]="filterActive ? 'ellipsis-grid-circle' : 'ellipsis-vertical'"
+        [status]="filterActive ? 'info' : null"
+        aria-hidden="true"
+      />
+    </button>
+
+    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+      @if (column.sortable) {
+        <!--
+          The two directions are one exclusive setting rather than two commands, so they are radio
+          items: the applied one is then announced as such. The active class alone would leave it
+          visible only to a sighted user - the column header's aria-sort is not read from in here.
+        -->
+        <button
+          type="button"
+          clrDropdownItem
+          role="menuitemradio"
+          [attr.aria-checked]="sortOrder === ClrDatagridSortOrder.ASC"
+          [class.active]="sortOrder === ClrDatagridSortOrder.ASC"
+          (click)="sort(false)"
+        >
+          <cds-icon shape="arrow" direction="up" aria-hidden="true"></cds-icon>
+          {{ commonStrings.keys.sortColumnAscending }}
+        </button>
+        <button
+          type="button"
+          clrDropdownItem
+          role="menuitemradio"
+          [attr.aria-checked]="sortOrder === ClrDatagridSortOrder.DESC"
+          [class.active]="sortOrder === ClrDatagridSortOrder.DESC"
+          (click)="sort(true)"
+        >
+          <cds-icon shape="arrow" direction="down" aria-hidden="true"></cds-icon>
+          {{ commonStrings.keys.sortColumnDescending }}
+        </button>
+        @if (canClearSort) {
+          <button type="button" clrDropdownItem (click)="column.clearSort()">
+            <cds-icon shape="times" aria-hidden="true"></cds-icon>
+            {{ commonStrings.keys.clearColumnSort }}
+          </button>
+        }
+      }
+
+      @if (column.pinnable) {
+        @if (column.sortable) {
+          <div class="dropdown-divider" role="separator"></div>
+        }
+        <button type="button" clrDropdownItem (click)="togglePinned()">
+          <cds-icon
+            [shape]="column.pinned ? 'unpin' : 'pin'"
+            solid
+            size="12"
+            style="margin: 2px;"
+            aria-hidden="true"
+          ></cds-icon>
+          {{ column.pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn }}
+        </button>
+      }
+
+      @if (hasFilter && !keepFilterInHeader) {
+        @if (column.sortable || column.pinnable) {
+          <div class="dropdown-divider" role="separator"></div>
+        }
+        <!--
+          This item stands in for the filter's own toggle, so it takes over the state that toggle
+          announced: that it opens a dialog, and whether that dialog is open right now.
+        -->
+        <button
+          type="button"
+          #trigger
+          clrDropdownItem
+          aria-haspopup="dialog"
+          [attr.aria-expanded]="filterOpen"
+          [attr.aria-controls]="filterPopoverId"
+          (click)="openFilter($event)"
+        >
+          <cds-icon [shape]="filterActive ? 'filter-grid-circle' : 'filter-grid'" solid aria-hidden="true"></cds-icon>
+          {{ commonStrings.keys.filterColumn }}
+        </button>
+      }
+
+      <ng-content></ng-content>
+    </clr-dropdown-menu>
+  `, isInline: true, dependencies: [{ kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }, { kind: "directive", type: i3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i6.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i6.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i6.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["role", "clrDisabled", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnActions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-dg-column-actions',
+                    template: `
+    <button
+      class="datagrid-column-actions-toggle"
+      type="button"
+      clrDropdownTrigger
+      [class.datagrid-column-actions-filtered]="filterActive"
+      [attr.aria-label]="triggerLabel"
+    >
+      <cds-icon
+        [size]="filterActive ? '16' : '12'"
+        [shape]="filterActive ? 'ellipsis-grid-circle' : 'ellipsis-vertical'"
+        [status]="filterActive ? 'info' : null"
+        aria-hidden="true"
+      />
+    </button>
+
+    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+      @if (column.sortable) {
+        <!--
+          The two directions are one exclusive setting rather than two commands, so they are radio
+          items: the applied one is then announced as such. The active class alone would leave it
+          visible only to a sighted user - the column header's aria-sort is not read from in here.
+        -->
+        <button
+          type="button"
+          clrDropdownItem
+          role="menuitemradio"
+          [attr.aria-checked]="sortOrder === ClrDatagridSortOrder.ASC"
+          [class.active]="sortOrder === ClrDatagridSortOrder.ASC"
+          (click)="sort(false)"
+        >
+          <cds-icon shape="arrow" direction="up" aria-hidden="true"></cds-icon>
+          {{ commonStrings.keys.sortColumnAscending }}
+        </button>
+        <button
+          type="button"
+          clrDropdownItem
+          role="menuitemradio"
+          [attr.aria-checked]="sortOrder === ClrDatagridSortOrder.DESC"
+          [class.active]="sortOrder === ClrDatagridSortOrder.DESC"
+          (click)="sort(true)"
+        >
+          <cds-icon shape="arrow" direction="down" aria-hidden="true"></cds-icon>
+          {{ commonStrings.keys.sortColumnDescending }}
+        </button>
+        @if (canClearSort) {
+          <button type="button" clrDropdownItem (click)="column.clearSort()">
+            <cds-icon shape="times" aria-hidden="true"></cds-icon>
+            {{ commonStrings.keys.clearColumnSort }}
+          </button>
+        }
+      }
+
+      @if (column.pinnable) {
+        @if (column.sortable) {
+          <div class="dropdown-divider" role="separator"></div>
+        }
+        <button type="button" clrDropdownItem (click)="togglePinned()">
+          <cds-icon
+            [shape]="column.pinned ? 'unpin' : 'pin'"
+            solid
+            size="12"
+            style="margin: 2px;"
+            aria-hidden="true"
+          ></cds-icon>
+          {{ column.pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn }}
+        </button>
+      }
+
+      @if (hasFilter && !keepFilterInHeader) {
+        @if (column.sortable || column.pinnable) {
+          <div class="dropdown-divider" role="separator"></div>
+        }
+        <!--
+          This item stands in for the filter's own toggle, so it takes over the state that toggle
+          announced: that it opens a dialog, and whether that dialog is open right now.
+        -->
+        <button
+          type="button"
+          #trigger
+          clrDropdownItem
+          aria-haspopup="dialog"
+          [attr.aria-expanded]="filterOpen"
+          [attr.aria-controls]="filterPopoverId"
+          (click)="openFilter($event)"
+        >
+          <cds-icon [shape]="filterActive ? 'filter-grid-circle' : 'filter-grid'" solid aria-hidden="true"></cds-icon>
+          {{ commonStrings.keys.filterColumn }}
+        </button>
+      }
+
+      <ng-content></ng-content>
+    </clr-dropdown-menu>
+  `,
+                    host: {
+                        '[class.datagrid-column-actions]': 'true',
+                    },
+                    // ClrDropdown's providers are not inherited, so they have to be repeated for this component to be
+                    // one. Its host directives and host bindings - the popover host, and the dropdown classes - are
+                    // inherited, and must not be repeated.
+                    providers: [
+                        ROOT_DROPDOWN_PROVIDER,
+                        FOCUS_SERVICE_PROVIDER,
+                        ColumnActionsFocusHandler,
+                        { provide: DropdownFocusHandler, useExisting: ColumnActionsFocusHandler },
+                        { provide: FocusableItem, useExisting: ColumnActionsFocusHandler },
+                        { provide: ClrDropdown, useExisting: ClrDatagridColumnActions },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: ClrDatagridColumn }, { type: i2.ClrCommonStringsService }, { type: ColumnActionsService }, { type: i3.ClrPopoverService, decorators: [{
+                    type: SkipSelf
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: FiltersProvider, decorators: [{
+                    type: Optional
+                }] }, { type: i6.ClrDropdown, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }] }, { type: i3.ClrPopoverService }, { type: i6.DropdownFocusHandler }, { type: i6.RootDropdownService }], propDecorators: { trigger: [{
+                type: ViewChild,
+                args: ['trigger', { read: ElementRef }]
+            }], keepFilterInHeader: [{
+                type: Input,
+                args: [{ alias: 'clrDgKeepFilterInHeader', transform: booleanAttribute }]
+            }], projectedItems: [{
+                type: ContentChildren,
+                args: [FocusableItem]
+            }], menuPopoverContent: [{
+                type: ViewChild,
+                args: [ClrDropdownMenu, { read: ClrPopoverContent }]
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * An application provided item in a `clr-dg-column-actions` menu. It is the dropdown item - same
+ * inputs, styling and arrow key order - with what a column action needs on top: it closes the menu
+ * when picked, or re-anchors it after an action that leaves it open.
+ */
+class ClrDatagridColumnAction extends ClrDropdownItem {
+    constructor(columnActions, item, dropdownService, el, renderer) {
+        super(columnActions, dropdownService, item, el, renderer);
+        this.columnActions = columnActions;
+        /**
+         * Whether activating this item should close the menu.
+         */
+        this.canClosePopover = true;
+    }
+    // Space and enter both turn into a click, so this covers the keyboard as well.
+    onColumnActionClick() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.canClosePopover) {
+            this.columnActions.closeMenu();
+        }
+        else {
+            this.columnActions.repositionMenu();
+        }
+    }
+    /**
+     * Focus can arrive from anywhere - the arrow keys, or a plain `focus()` from an application that
+     * moved the column this action belongs to and rebuilt the menu. Reporting it keeps space and enter
+     * acting on this item rather than on whatever the menu focused when it opened.
+     */
+    onFocus() {
+        this.columnActions.focusAction(this.focusableItem);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnAction, deps: [{ token: ClrDatagridColumnActions }, { token: i2.FocusableItem }, { token: i6.RootDropdownService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.25", type: ClrDatagridColumnAction, isStandalone: false, selector: "[clrDgColumnAction]", inputs: { canClosePopover: ["clrCanClosePopover", "canClosePopover", booleanAttribute] }, host: { listeners: { "click": "onColumnActionClick()", "focus": "onFocus()" } }, providers: [BASIC_FOCUSABLE_ITEM_PROVIDER], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrDgColumnAction]',
+                    providers: [BASIC_FOCUSABLE_ITEM_PROVIDER],
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: ClrDatagridColumnActions }, { type: i2.FocusableItem }, { type: i6.RootDropdownService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { canClosePopover: [{
+                type: Input,
+                args: [{ alias: 'clrCanClosePopover', transform: booleanAttribute }]
+            }], onColumnActionClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -5656,8 +6632,8 @@ class ClrDatagridColumnToggleButton {
     hideableColumns() {
         return this.columnsService.columns.filter(column => column.value.hideable);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumnToggleButton, deps: [{ token: i2.ClrCommonStringsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridColumnToggleButton, isStandalone: false, selector: "clr-dg-column-toggle-button", outputs: { clrAllSelected: "clrAllSelected" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnToggleButton, deps: [{ token: i2.ClrCommonStringsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridColumnToggleButton, isStandalone: false, selector: "clr-dg-column-toggle-button", outputs: { clrAllSelected: "clrAllSelected" }, ngImport: i0, template: `
     <button
       class="btn btn-sm btn-link switch-button"
       (click)="selectAll()"
@@ -5668,7 +6644,7 @@ class ClrDatagridColumnToggleButton {
     </button>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumnToggleButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnToggleButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-column-toggle-button',
@@ -5740,8 +6716,8 @@ class ClrDatagridColumnToggle {
     allColumnsSelected() {
         this.allSelectedElement.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumnToggle, deps: [{ token: i2.ClrCommonStringsService }, { token: ColumnsService }, { token: i3.ClrPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridColumnToggle, isStandalone: false, selector: "clr-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i3.ClrPopoverHostDirective }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnToggle, deps: [{ token: i2.ClrCommonStringsService }, { token: ColumnsService }, { token: i3.ClrPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridColumnToggle, isStandalone: false, selector: "clr-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i3.ClrPopoverHostDirective }], ngImport: i0, template: `
     <button
       role="button"
       type="button"
@@ -5804,9 +6780,9 @@ class ClrDatagridColumnToggle {
         <clr-dg-column-toggle-button (clrAllSelected)="allColumnsSelected()"></clr-dg-column-toggle-button>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i4.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i7.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i7.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i13.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }, { kind: "directive", type: i4$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i7.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i7.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i14.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridColumnToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridColumnToggle, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-column-toggle',
@@ -5900,8 +6876,8 @@ class ClrDatagridDetailHeader {
     ngAfterViewInit() {
         this.title.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridDetailHeader, deps: [{ token: DetailService }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridDetailHeader, isStandalone: false, selector: "clr-dg-detail-header", host: { properties: { "class.datagrid-detail-header": "true" } }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridDetailHeader, deps: [{ token: DetailService }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridDetailHeader, isStandalone: false, selector: "clr-dg-detail-header", host: { properties: { "class.datagrid-detail-header": "true" } }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: `
     <div #title class="datagrid-detail-header-title" tabindex="-1" [id]="titleId">
       <ng-content></ng-content>
     </div>
@@ -5915,9 +6891,9 @@ class ClrDatagridDetailHeader {
         <cds-icon shape="times"></cds-icon>
       </button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridDetailHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridDetailHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-detail-header',
@@ -5957,6 +6933,32 @@ class ClrDatagridDetail {
         this.detailService = detailService;
         this.commonStrings = commonStrings;
     }
+    get detailWidth() {
+        return this.detailService.detailWidth;
+    }
+    set detailWidth(value) {
+        if (value === null || value === undefined) {
+            this.detailService.detailWidth = DEFAULT_DETAIL_WIDTH;
+            return;
+        }
+        if (value < MIN_DETAIL_WIDTH) {
+            this.detailService.detailWidth = MIN_DETAIL_WIDTH;
+            return;
+        }
+        if (value > MAX_DETAIL_WIDTH) {
+            this.detailService.detailWidth = MAX_DETAIL_WIDTH;
+            return;
+        }
+        this.detailService.detailWidth = value;
+    }
+    get isCustomWidth() {
+        return this.detailWidth !== DEFAULT_DETAIL_WIDTH;
+    }
+    get width() {
+        // Skip the inline style at 100% so the .datagrid-detail-overlay CSS rule takes over
+        // without needing !important to override an inline style.
+        return this.detailWidth !== MAX_DETAIL_WIDTH ? this.detailWidth : null;
+    }
     get labelledBy() {
         if (this.ariaLabelledBy) {
             return this.header ? `${this.header.titleId} ${this.ariaLabelledBy}` : this.ariaLabelledBy;
@@ -5980,8 +6982,8 @@ class ClrDatagridDetail {
     close() {
         this.detailService.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridDetail, deps: [{ token: DetailService }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridDetail, isStandalone: false, selector: "clr-dg-detail", inputs: { ariaLabelledBy: ["clrDetailAriaLabelledBy", "ariaLabelledBy"], ariaLabel: ["clrDetailAriaLabel", "ariaLabel"] }, host: { properties: { "class.datagrid-detail-pane": "true" } }, queries: [{ propertyName: "header", first: true, predicate: ClrDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridDetail, deps: [{ token: DetailService }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridDetail, isStandalone: false, selector: "clr-dg-detail", inputs: { ariaLabelledBy: ["clrDetailAriaLabelledBy", "ariaLabelledBy"], ariaLabel: ["clrDetailAriaLabel", "ariaLabel"], detailWidth: ["clrDetailWidth", "detailWidth"] }, host: { properties: { "class.datagrid-detail-pane": "true", "class.datagrid-detail-custom-width": "isCustomWidth", "style.width.%": "width" } }, queries: [{ propertyName: "header", first: true, predicate: ClrDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
     @if (detailService.isOpen) {
       <div
         cdkTrapFocus
@@ -6000,12 +7002,14 @@ class ClrDatagridDetail {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridDetail, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridDetail, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-detail',
                     host: {
                         '[class.datagrid-detail-pane]': 'true',
+                        '[class.datagrid-detail-custom-width]': 'isCustomWidth',
+                        '[style.width.%]': 'width',
                     },
                     // We put the @if on the cdkTrapFocus so it doesn't always exist on the page
                     // have to test for presence of header for aria-describedby because it was causing unit tests to crash
@@ -6038,6 +7042,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], header: [{
                 type: ContentChild,
                 args: [ClrDatagridDetailHeader]
+            }], detailWidth: [{
+                type: Input,
+                args: ['clrDetailWidth']
             }] } });
 
 /*
@@ -6047,14 +7054,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagridDetailBody {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridDetailBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridDetailBody, isStandalone: false, selector: "clr-dg-detail-body", host: { properties: { "class.datagrid-detail-body": "true" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridDetailBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridDetailBody, isStandalone: false, selector: "clr-dg-detail-body", host: { properties: { "class.datagrid-detail-body": "true" } }, ngImport: i0, template: `
     <div class="clr-dg-detail-body-wrapper">
       <ng-content></ng-content>
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridDetailBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridDetailBody, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-detail-body',
@@ -6070,23 +7077,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-/*
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-const COLUMN_STATE = new InjectionToken('COLUMN_STATE');
-function columnStateFactory() {
-    return new BehaviorSubject({
-        changes: [],
-    });
-}
-const COLUMN_STATE_PROVIDER = {
-    provide: COLUMN_STATE,
-    useFactory: columnStateFactory,
-};
-
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -6163,16 +7153,16 @@ class ClrDatagridHideableColumn {
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridHideableColumn, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ColumnsService }, { token: COLUMN_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrDatagridHideableColumn, isStandalone: false, selector: "[clrDgHideableColumn]", inputs: { clrDgHideableColumn: "clrDgHideableColumn", clrDgHidden: "clrDgHidden" }, outputs: { hiddenChange: "clrDgHiddenChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridHideableColumn, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ColumnsService }, { token: COLUMN_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ClrDatagridHideableColumn, isStandalone: false, selector: "[clrDgHideableColumn]", inputs: { clrDgHideableColumn: "clrDgHideableColumn", clrDgHidden: "clrDgHidden" }, outputs: { hiddenChange: "clrDgHiddenChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridHideableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridHideableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDgHideableColumn]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ColumnsService }, { type: i2$2.BehaviorSubject, decorators: [{
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ColumnsService }, { type: i12.BehaviorSubject, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -6265,10 +7255,10 @@ class ClrIfDetail {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrIfDetail, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DetailService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrIfDetail, isStandalone: false, selector: "[clrIfDetail]", inputs: { state: ["clrIfDetail", "state"] }, outputs: { stateChange: "clrIfDetailChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrIfDetail, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DetailService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: ClrIfDetail, isStandalone: false, selector: "[clrIfDetail]", inputs: { state: ["clrIfDetail", "state"] }, outputs: { stateChange: "clrIfDetailChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrIfDetail, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrIfDetail, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrIfDetail]',
@@ -6293,16 +7283,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * For instance, it can help span a text over multiple rows in detail view.
  */
 class ClrDatagridRowDetail {
-    constructor(selection, rowActionService, expand, expandableRows, commonStrings) {
+    constructor(selection, rowActionService, expand, expandableRows, commonStrings, columnsService, displayMode) {
         this.selection = selection;
         this.rowActionService = rowActionService;
         this.expand = expand;
         this.expandableRows = expandableRows;
         this.commonStrings = commonStrings;
+        this.columnsService = columnsService;
+        this.displayMode = displayMode;
         this.replacedRow = false;
+        /**
+         * Whether the detail lays its cells out in the same columns as the row, which it does when it
+         * holds one cell per column and at least one of those columns is pinned. The cells of the pinned
+         * columns are then static alongside the ones in the row above.
+         */
+        this.columnAligned = false;
         /* reference to the enum so that template can access it */
         this.SELECTION_TYPE = SelectionType;
         this.subscriptions = [];
+        this.cellsMoved = false;
     }
     set replace(value) {
         this.expand.setReplace(!!value);
@@ -6318,19 +7317,93 @@ class ClrDatagridRowDetail {
     ngAfterContentInit() {
         this.subscriptions.push(this.expand.replace.subscribe(replaceChange => {
             this.replacedRow = replaceChange;
-        }));
+        }), 
+        // New cells have to be moved even when the columns did not change.
+        this.cells.changes.subscribe(() => this.syncColumnAlignment(true)));
+    }
+    ngAfterViewInit() {
+        this.subscriptions.push(
+        // The columns are set up after the detail's content, and pinning one happens later still.
+        // Both land as a new render cycle, which is where the cells are moved.
+        this.displayMode.view.subscribe(() => this.syncColumnAlignment()));
+        this.syncColumnAlignment(true);
+        this.hadCells = this.cells?.length > 0;
+    }
+    ngAfterViewChecked() {
+        // The template holds the content in one of two places, depending on whether the detail has cells
+        // of its own, and creating either of them projects the content into it - which takes the cells
+        // back out of the containers they were moved into. That happens when a detail turns up with no
+        // cells and receives them later, as it does when its content is behind a `clrLoading` template.
+        // By this point the swap has happened, so the move can be repeated for good.
+        const hasCells = this.cells?.length > 0;
+        if (hasCells !== this.hadCells) {
+            this.hadCells = hasCells;
+            this.syncColumnAlignment(true);
+        }
     }
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridRowDetail, deps: [{ token: Selection }, { token: RowActionService }, { token: DatagridIfExpandService }, { token: ExpandableRowsCount }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridRowDetail, isStandalone: false, selector: "clr-dg-row-detail", inputs: { _beginningOfExpandableContentAriaText: ["clrRowDetailBeginningAriaText", "_beginningOfExpandableContentAriaText"], _endOfExpandableContentAriaText: ["clrRowDetailEndAriaText", "_endOfExpandableContentAriaText"], replace: ["clrDgReplace", "replace"] }, host: { attributes: { "role": "row" }, properties: { "class.datagrid-row-flex": "true", "class.datagrid-row-detail": "true", "attr.id": "expand.expandableId" } }, queries: [{ propertyName: "cells", predicate: ClrDatagridCell }], ngImport: i0, template: `
+    /**
+     * Moves the cells into the containers that lay them out in the same columns as the row, or back
+     * out of them once that stops making sense.
+     */
+    syncColumnAlignment(force = false) {
+        if (!this._pinnedCells || !this._scrollableCells) {
+            return;
+        }
+        const columns = this.columnsService.columnStates;
+        const cells = this.cells ? this.cells.toArray() : [];
+        // One cell per column is what makes the two comparable. Pinning is what makes the split worth
+        // doing at all: with nothing pinned there is nothing to line up with, and the detail is left
+        // exactly as it was authored.
+        const columnAligned = cells.length > 0 && cells.length === columns.length && columns.some(column => column.pinned);
+        const layout = columnAligned ? columns.map(column => (column.pinned ? '1' : '0')).join('') : '';
+        if (!force && layout === this.lastLayout) {
+            return;
+        }
+        this.lastLayout = layout;
+        this.columnAligned = columnAligned;
+        if (!columnAligned) {
+            // Only worth doing if the cells were moved in the first place. Leaving an untouched detail
+            // alone keeps whatever the author wrote between the cells where they wrote it.
+            if (this.cellsMoved) {
+                cells.forEach(cell => this.moveCell(this._plainCells, cell));
+                this.cellsMoved = false;
+            }
+            return;
+        }
+        cells.forEach((cell, index) => this.moveCell(this.columnsService.isPinned(index) ? this._pinnedCells : this._scrollableCells, cell));
+        this.cellsMoved = true;
+    }
+    moveCell(container, cell) {
+        if (container && !cell._view.destroyed) {
+            container.insert(cell._view);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridRowDetail, deps: [{ token: Selection }, { token: RowActionService }, { token: DatagridIfExpandService }, { token: ExpandableRowsCount }, { token: i2.ClrCommonStringsService }, { token: ColumnsService }, { token: DisplayModeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridRowDetail, isStandalone: false, selector: "clr-dg-row-detail", inputs: { _beginningOfExpandableContentAriaText: ["clrRowDetailBeginningAriaText", "_beginningOfExpandableContentAriaText"], _endOfExpandableContentAriaText: ["clrRowDetailEndAriaText", "_endOfExpandableContentAriaText"], replace: ["clrDgReplace", "replace"] }, host: { attributes: { "role": "row" }, properties: { "class.datagrid-row-flex": "true", "class.datagrid-row-detail": "true", "attr.id": "expand.expandableId" } }, queries: [{ propertyName: "cells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "_pinnedCells", first: true, predicate: ["pinnedCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_plainCells", first: true, predicate: ["plainCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
     <div class="clr-sr-only">
       {{ beginningOfExpandableContentAriaText }}
       {{ commonStrings.keys.datagridExpandableRowsHelperText }}
     </div>
+    <!--
+      These two containers mirror the ones in the row above and are only used while the detail is
+      column aligned - see columnAligned. They are always rendered so the cells always have
+      somewhere to be moved into, and the pinned one takes itself out of the layout while empty.
+    -->
+    <div class="datagrid-pinned-cells">
+      <ng-container #pinnedCells></ng-container>
+    </div>
+    <ng-container #scrollableCells></ng-container>
     @if (this.cells?.length > 0) {
       <ng-container [ngTemplateOutlet]="noCells"></ng-container>
+      <!--
+        Where the cells go back to when the detail stops being column aligned, because a column was
+        unpinned. A view that has been moved into a container cannot be handed back to the content
+        projection it came from, so it needs a container of its own in the same place.
+      -->
+      <ng-container #plainCells></ng-container>
     }
     @if (this.cells?.length === 0) {
       <clr-dg-cell class="datagrid-container">
@@ -6342,9 +7415,9 @@ class ClrDatagridRowDetail {
       <ng-content></ng-content>
     </ng-template>
     <div class="clr-sr-only">{{ endOfExpandableContentAriaText }}</div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrDatagridCell, selector: "clr-dg-cell" }, { kind: "directive", type: DatagridCellRenderer, selector: "clr-dg-cell" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrDatagridCell, selector: "clr-dg-cell" }, { kind: "directive", type: DatagridCellRenderer, selector: "clr-dg-cell" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridRowDetail, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridRowDetail, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-row-detail',
@@ -6353,8 +7426,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       {{ beginningOfExpandableContentAriaText }}
       {{ commonStrings.keys.datagridExpandableRowsHelperText }}
     </div>
+    <!--
+      These two containers mirror the ones in the row above and are only used while the detail is
+      column aligned - see columnAligned. They are always rendered so the cells always have
+      somewhere to be moved into, and the pinned one takes itself out of the layout while empty.
+    -->
+    <div class="datagrid-pinned-cells">
+      <ng-container #pinnedCells></ng-container>
+    </div>
+    <ng-container #scrollableCells></ng-container>
     @if (this.cells?.length > 0) {
       <ng-container [ngTemplateOutlet]="noCells"></ng-container>
+      <!--
+        Where the cells go back to when the detail stops being column aligned, because a column was
+        unpinned. A view that has been moved into a container cannot be handed back to the content
+        projection it came from, so it needs a container of its own in the same place.
+      -->
+      <ng-container #plainCells></ng-container>
     }
     @if (this.cells?.length === 0) {
       <clr-dg-cell class="datagrid-container">
@@ -6375,7 +7463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     },
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: Selection }, { type: RowActionService }, { type: DatagridIfExpandService }, { type: ExpandableRowsCount }, { type: i2.ClrCommonStringsService }], propDecorators: { _beginningOfExpandableContentAriaText: [{
+        }], ctorParameters: () => [{ type: Selection }, { type: RowActionService }, { type: DatagridIfExpandService }, { type: ExpandableRowsCount }, { type: i2.ClrCommonStringsService }, { type: ColumnsService }, { type: DisplayModeService }], propDecorators: { _beginningOfExpandableContentAriaText: [{
                 type: Input,
                 args: ['clrRowDetailBeginningAriaText']
             }], _endOfExpandableContentAriaText: [{
@@ -6384,6 +7472,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], cells: [{
                 type: ContentChildren,
                 args: [ClrDatagridCell]
+            }], _pinnedCells: [{
+                type: ViewChild,
+                args: ['pinnedCells', { read: ViewContainerRef }]
+            }], _scrollableCells: [{
+                type: ViewChild,
+                args: ['scrollableCells', { read: ViewContainerRef }]
+            }], _plainCells: [{
+                type: ViewChild,
+                args: ['plainCells', { read: ViewContainerRef }]
             }], replace: [{
                 type: Input,
                 args: ['clrDgReplace']
@@ -6407,8 +7504,8 @@ class ClrDatagridFooter {
     get hasHideableColumns() {
         return this.columnsService.hasHideableColumns;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridFooter, deps: [{ token: Selection }, { token: DetailService }, { token: ColumnsService }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridFooter, isStandalone: false, selector: "clr-dg-footer", host: { properties: { "class.datagrid-footer": "true" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridFooter, deps: [{ token: Selection }, { token: DetailService }, { token: ColumnsService }, { token: i2.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridFooter, isStandalone: false, selector: "clr-dg-footer", host: { properties: { "class.datagrid-footer": "true" } }, ngImport: i0, template: `
     @if (selection.selectionType === SELECTION_TYPE.Multi && selection.current?.length > 0) {
       <div class="clr-form-control-disabled">
         <clr-checkbox-wrapper class="datagrid-footer-select">
@@ -6427,9 +7524,9 @@ class ClrDatagridFooter {
       </div>
     }
     <ng-content select="clr-dg-pagination"></ng-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i7.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i7.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "component", type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i7.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i7.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "component", type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-footer',
@@ -6481,8 +7578,8 @@ class ClrDatagridPageSize {
             this.pageSizeOptions = [this.page.size];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridPageSize, deps: [{ token: Page }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridPageSize, isStandalone: false, selector: "clr-dg-page-size", inputs: { pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeOptionsId: ["clrPageSizeOptionsId", "pageSizeOptionsId"] }, viewQueries: [{ propertyName: "label", first: true, predicate: ClrControlLabel, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridPageSize, deps: [{ token: Page }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridPageSize, isStandalone: false, selector: "clr-dg-page-size", inputs: { pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeOptionsId: ["clrPageSizeOptionsId", "pageSizeOptionsId"] }, viewQueries: [{ propertyName: "label", first: true, predicate: ClrControlLabel, descendants: true, static: true }], ngImport: i0, template: `
     <label [for]="pageSizeOptionsId"><ng-content></ng-content></label>
     <div class="clr-select-wrapper">
       <select [id]="pageSizeOptionsId" [class.clr-page-size-select]="true" [(ngModel)]="page.size">
@@ -6491,9 +7588,9 @@ class ClrDatagridPageSize {
         }
       </select>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i13.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i13.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i13.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i14.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i14.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i14.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridPageSize, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridPageSize, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-page-size',
@@ -6670,8 +7767,8 @@ class ClrDatagridPagination {
          */
         this.currentPageInputRef.nativeElement.value = this.page.current.toString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridPagination, deps: [{ token: Page }, { token: i2.ClrCommonStringsService }, { token: DetailService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrDatagridPagination, isStandalone: false, selector: "clr-dg-pagination", inputs: { disableCurrentPageInput: ["clrDgPageInputDisabled", "disableCurrentPageInput"], pageSize: ["clrDgPageSize", "pageSize"], totalItems: ["clrDgTotalItems", "totalItems"], lastPage: ["clrDgLastPage", "lastPage"], currentPage: ["clrDgPage", "currentPage"] }, outputs: { currentChanged: "clrDgPageChange" }, host: { properties: { "class.pagination": "true" } }, queries: [{ propertyName: "_pageSizeComponent", first: true, predicate: ClrDatagridPageSize, descendants: true }], viewQueries: [{ propertyName: "currentPageInputRef", first: true, predicate: ["currentPageInput"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridPagination, deps: [{ token: Page }, { token: i2.ClrCommonStringsService }, { token: DetailService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ClrDatagridPagination, isStandalone: false, selector: "clr-dg-pagination", inputs: { disableCurrentPageInput: ["clrDgPageInputDisabled", "disableCurrentPageInput"], pageSize: ["clrDgPageSize", "pageSize"], totalItems: ["clrDgTotalItems", "totalItems"], lastPage: ["clrDgLastPage", "lastPage"], currentPage: ["clrDgPage", "currentPage"] }, outputs: { currentChanged: "clrDgPageChange" }, host: { properties: { "class.pagination": "true" } }, queries: [{ propertyName: "_pageSizeComponent", first: true, predicate: ClrDatagridPageSize, descendants: true }], viewQueries: [{ propertyName: "currentPageInputRef", first: true, predicate: ["currentPageInput"], descendants: true }], ngImport: i0, template: `
     @if (!detailService.isOpen) {
       @if (_pageSizeComponent) {
         <div class="pagination-size">
@@ -6771,9 +7868,9 @@ class ClrDatagridPagination {
         </button>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i4.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge", "innerOffset"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridPagination, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-pagination',
@@ -6971,10 +8068,10 @@ class DatagridDetailRegisterer {
             this.expandableRowsCount.unregister();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridDetailRegisterer, deps: [{ token: ExpandableRowsCount, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridDetailRegisterer, isStandalone: false, selector: "[clrIfExpanded]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridDetailRegisterer, deps: [{ token: ExpandableRowsCount, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridDetailRegisterer, isStandalone: false, selector: "[clrIfExpanded]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridDetailRegisterer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridDetailRegisterer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrIfExpanded]',
@@ -7046,6 +8143,14 @@ class DatagridHeaderRenderer {
             this.renderer.removeClass(this.el.nativeElement, HIDDEN_COLUMN_CLASS);
         }
     }
+    setPinned(state) {
+        if (state.pinned) {
+            this.renderer.addClass(this.el.nativeElement, PINNED_COLUMN_CLASS);
+        }
+        else {
+            this.renderer.removeClass(this.el.nativeElement, PINNED_COLUMN_CLASS);
+        }
+    }
     clearWidth() {
         // remove the width only if we set it, and it is not changed by dragging.
         if (this.widthSet && !this.columnResizerService.resizedBy) {
@@ -7073,17 +8178,17 @@ class DatagridHeaderRenderer {
         }
         return width;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridHeaderRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DatagridRenderOrganizer }, { token: i2.DomAdapter }, { token: ColumnResizerService }, { token: ColumnsService }, { token: COLUMN_STATE }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridHeaderRenderer, isStandalone: false, selector: "clr-dg-column", outputs: { resizeEmitter: "clrDgColumnResize" }, providers: [ColumnResizerService, COLUMN_STATE_PROVIDER], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridHeaderRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DatagridRenderOrganizer }, { token: i2.DomAdapter }, { token: ColumnResizerService }, { token: ColumnsService }, { token: COLUMN_STATE }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridHeaderRenderer, isStandalone: false, selector: "clr-dg-column", outputs: { resizeEmitter: "clrDgColumnResize" }, providers: [ColumnResizerService, COLUMN_STATE_PROVIDER], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridHeaderRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridHeaderRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-dg-column',
                     providers: [ColumnResizerService, COLUMN_STATE_PROVIDER],
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DatagridRenderOrganizer }, { type: i2.DomAdapter }, { type: ColumnResizerService }, { type: ColumnsService }, { type: i2$2.BehaviorSubject, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DatagridRenderOrganizer }, { type: i2.DomAdapter }, { type: ColumnResizerService }, { type: ColumnsService }, { type: i12.BehaviorSubject, decorators: [{
                     type: Inject,
                     args: [COLUMN_STATE]
                 }] }], propDecorators: { resizeEmitter: [{
@@ -7130,10 +8235,10 @@ class NoopDomAdapter {
     focus(_element) {
         // Do nothing
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NoopDomAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NoopDomAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NoopDomAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NoopDomAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NoopDomAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: NoopDomAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -7237,13 +8342,27 @@ class DatagridMainRenderer {
         if (this.headers) {
             if (state && !this.columnsService.hasCache()) {
                 this.columnsService.cache();
-                this.columnsService.visibleColumns.forEach((header, index) => {
-                    if (index > 0) {
+                // The pane leaves room for a single column, and it should be the one the user was already
+                // looking at on the left of the row. Pinned columns are rendered before the rest, so that
+                // is the first pinned column whenever anything is pinned, and the first declared one
+                // otherwise.
+                const keptColumn = this.columnsService.visibleColumns.find(column => column.pinned) || this.columnsService.visibleColumns[0];
+                this.columnsService.visibleColumns.forEach(header => {
+                    if (header !== keptColumn) {
                         this.columnsService.emitStateChangeAt(header.columnIndex, {
                             changes: [DatagridColumnChanges.HIDDEN],
                             hidden: state,
                         });
                     }
+                    // That single column is full width, so there is nothing to scroll and nothing to pin
+                    // against - the column that stays included. Pinning is suspended while the pane is open
+                    // and restored from the cache when it closes.
+                    if (header.pinned) {
+                        this.columnsService.emitStateChangeAt(header.columnIndex, {
+                            changes: [DatagridColumnChanges.PINNED],
+                            pinned: false,
+                        });
+                    }
                 });
             }
             else if (!state) {
@@ -7336,15 +8455,47 @@ class DatagridMainRenderer {
                         this.updateColumnSeparatorsVisibility();
                         this.keyNavigation.resetKeyGrid();
                         break;
+                    case DatagridColumnChanges.PINNED: {
+                        // Read before the class is updated below. The state can be re-emitted with the same
+                        // value, e.g. by resetToLastCache, and relocating the views then is pure overhead.
+                        const wasPinned = this.datagrid.columns.get(columnIndex)?.isPinned;
+                        this.headers.get(columnIndex).setPinned(state);
+                        this.rows.forEach(row => {
+                            if (row.cells && row.cells.length) {
+                                row.cells.get(columnIndex)?.setPinned(state);
+                                row.expandableRows.forEach(expandableRow => {
+                                    expandableRow.cells.get(columnIndex)?.setPinned(state);
+                                });
+                            }
+                        });
+                        if (wasPinned !== !!state.pinned) {
+                            this.updateColumnSeparatorsVisibility();
+                            this.keyNavigation.resetKeyGrid();
+                            // The column and its cells have to move between the static and the scrollable
+                            // containers, which happens on the next CALCULATE/DISPLAY cycle. Widths are
+                            // recomputed there as well, since the flex context of the column changes.
+                            // Deferring to ngAfterViewChecked keeps us out of the change detection pass that
+                            // the `clrDgPinned` input setter runs in.
+                            this.columnsSizesStable = false;
+                            this.shouldStabilizeColumns = true;
+                        }
+                        break;
+                    }
                     case DatagridColumnChanges.INITIALIZE:
+                        if (state.pinned) {
+                            this.headers.get(columnIndex).setPinned(state);
+                        }
                         if (state.hideable && state.hidden) {
                             this.headers.get(columnIndex).setHidden(state);
+                        }
+                        if (state.pinned || (state.hideable && state.hidden)) {
                             this.rows.forEach(row => {
                                 row.setCellsState();
                                 row.expandableRows.forEach(expandableRow => {
                                     expandableRow.setCellsState();
                                 });
                             });
+                            this.updateColumnSeparatorsVisibility();
                         }
                         break;
                     default:
@@ -7369,19 +8520,22 @@ class DatagridMainRenderer {
     }
     updateColumnSeparatorsVisibility() {
         const visibleColumns = this.datagrid.columns.filter(column => !column.isHidden);
-        visibleColumns.forEach((column, index) => {
-            if (index === visibleColumns.length - 1) {
-                column.showSeparator = false;
-            }
-            else if (!column.showSeparator) {
-                column.showSeparator = true;
+        // Pinned columns are rendered in the static container, so they always have something after
+        // them and keep their separator - it is what marks the boundary with the scrollable columns.
+        // Only the last scrollable column has nothing after it and must hide its separator.
+        const scrollableColumns = visibleColumns.filter(column => !column.isPinned);
+        const lastScrollableColumn = scrollableColumns[scrollableColumns.length - 1];
+        visibleColumns.forEach(column => {
+            const showSeparator = column !== lastScrollableColumn;
+            if (column.showSeparator !== showSeparator) {
+                column.showSeparator = showSeparator;
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: ClrDatagrid }, { token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }, { token: i0.NgZone }, { token: KeyNavigationGridController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridMainRenderer, isStandalone: false, selector: "clr-datagrid", providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }], queries: [{ propertyName: "headers", predicate: DatagridHeaderRenderer }, { propertyName: "rows", predicate: DatagridRowRenderer }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: ClrDatagrid }, { token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }, { token: i0.NgZone }, { token: KeyNavigationGridController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridMainRenderer, isStandalone: false, selector: "clr-datagrid", providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }], queries: [{ propertyName: "headers", predicate: DatagridHeaderRenderer }, { propertyName: "rows", predicate: DatagridRowRenderer }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridMainRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridMainRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-datagrid',
@@ -7412,10 +8566,10 @@ class DatagridRowDetailRenderer extends DatagridRowRenderer {
         this.parentRow.expandableRows = [];
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridRowDetailRenderer, deps: [{ token: DatagridRowRenderer }, { token: ColumnsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: DatagridRowDetailRenderer, isStandalone: false, selector: "clr-dg-row-detail", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridRowDetailRenderer, deps: [{ token: DatagridRowRenderer }, { token: ColumnsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DatagridRowDetailRenderer, isStandalone: false, selector: "clr-dg-row-detail", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DatagridRowDetailRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DatagridRowDetailRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-dg-row-detail',
@@ -7436,6 +8590,8 @@ const CLR_DATAGRID_DIRECTIVES = [
     ClrDatagridActionOverflow,
     ClrDatagridCell,
     ClrDatagridColumn,
+    ClrDatagridColumnAction,
+    ClrDatagridColumnActions,
     ClrDatagridColumnSeparator,
     ClrDatagridDetail,
     ClrDatagridDetailBody,
@@ -7475,16 +8631,18 @@ const CLR_DATAGRID_STANDALONE_DIRECTIVES = [ClrDatagridSingleSelectionValueAcces
 const CLR_DATAGRID_SHARED_DIRECTIVES = [ClrIfExpanded];
 class ClrDatagridModule {
     constructor() {
-        ClarityIcons.addIcons(ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon);
+        ClarityIcons.addIcons(ellipsisVerticalIcon, ellipsisGridCircleIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, pinIcon, unpinIcon);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridModule, declarations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridModule, declarations: [
             // Core
             ClrDatagrid,
             ClrDatagridActionBar,
             ClrDatagridActionOverflow,
             ClrDatagridCell,
             ClrDatagridColumn,
+            ClrDatagridColumnAction,
+            ClrDatagridColumnActions,
             ClrDatagridColumnSeparator,
             ClrDatagridDetail,
             ClrDatagridDetailBody,
@@ -7533,6 +8691,7 @@ class ClrDatagridModule {
             ClrExpandableAnimationModule,
             ClrSpinnerModule,
             ClrPopoverModuleNext,
+            ClrDropdownModule,
             ClrKeyFocusModule, ClrDatagridSingleSelectionValueAccessor, ClrIfExpanded], exports: [
             // Core
             ClrDatagrid,
@@ -7540,6 +8699,8 @@ class ClrDatagridModule {
             ClrDatagridActionOverflow,
             ClrDatagridCell,
             ClrDatagridColumn,
+            ClrDatagridColumnAction,
+            ClrDatagridColumnActions,
             ClrDatagridColumnSeparator,
             ClrDatagridDetail,
             ClrDatagridDetailBody,
@@ -7573,7 +8734,7 @@ class ClrDatagridModule {
             // Built-in shortcuts
             DatagridNumericFilter,
             DatagridStringFilter, ClrDatagridSingleSelectionValueAccessor, ClrIfExpanded] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridModule, imports: [CommonModule,
             CdkDragModule,
             CdkTrapFocusModule,
             ClrIcon,
@@ -7589,9 +8750,10 @@ class ClrDatagridModule {
             ClrExpandableAnimationModule,
             ClrSpinnerModule,
             ClrPopoverModuleNext,
+            ClrDropdownModule,
             ClrKeyFocusModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrDatagridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ClrDatagridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7611,6 +8773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         ClrExpandableAnimationModule,
                         ClrSpinnerModule,
                         ClrPopoverModuleNext,
+                        ClrDropdownModule,
                         ClrKeyFocusModule,
                         CLR_DATAGRID_STANDALONE_DIRECTIVES,
                         CLR_DATAGRID_SHARED_DIRECTIVES,
@@ -7631,5 +8794,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionableOompaLoompa, CLR_DATAGRID_DIRECTIVES, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridAriaSortOrder, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSelectionCellDirective, ClrDatagridSingleSelectionValueAccessor, ClrDatagridSortOrder, ClrDatagridVirtualScrollDirective, ClrIfDetail, DatagridCellRenderer, DatagridDetailRegisterer, DatagridHeaderRenderer, DatagridMainRenderer, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridRowDetailRenderer, DatagridRowRenderer, DatagridStringFilter, DatagridWillyWonka, ExpandableOompaLoompa, Selection, SelectionType, WrappedCell, WrappedColumn, WrappedRow, selectionTypeAttribute };
+export { ActionableOompaLoompa, CLR_DATAGRID_DIRECTIVES, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridAriaSortOrder, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnAction, ClrDatagridColumnActions, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSelectionCellDirective, ClrDatagridSingleSelectionValueAccessor, ClrDatagridSortOrder, ClrDatagridVirtualScrollDirective, ClrIfDetail, DatagridCellRenderer, DatagridDetailRegisterer, DatagridHeaderRenderer, DatagridMainRenderer, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridRowDetailRenderer, DatagridRowRenderer, DatagridStringFilter, DatagridWillyWonka, ExpandableOompaLoompa, Selection, SelectionType, WrappedCell, WrappedColumn, WrappedRow, selectionTypeAttribute };
 //# sourceMappingURL=clr-angular-data-datagrid.mjs.map