@clr/angular 15.0.0-beta.5 → 15.0.0-beta.7

package/fesm2020/clr-angular.mjs

@@ -2617,7 +2617,7 @@ class StopEscapePropagationDirective {
         });
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
+        this.subscription?.unsubscribe();
     }
     onEscapeKey(event) {
         if (this.lastOpenChange !== null) {
@@ -5640,6 +5640,9 @@ class PseudoFocusModel extends SingleSelectComboboxModel {
 class OptionSelectionService {
     constructor() {
         this.loading = false;
+        // Display all options on first open, even if filter text exists.
+        // https://github.com/vmware-clarity/ng-clarity/issues/386
+        this.showAllOptions = true;
         this._currentInput = '';
         this._inputChanged = new BehaviorSubject('');
         this.inputChanged = this._inputChanged.asObservable();
@@ -6199,10 +6202,16 @@ class ClrCombobox extends WrappedFormControl {
     set searchText(text) {
         // if input text has changed since last time, fire a change event so application can react to it
         if (text !== this._searchText) {
+            if (this.toggleService.open) {
+                this.optionSelectionService.showAllOptions = false;
+            }
             this._searchText = text;
             this.clrInputChange.emit(this.searchText);
-            this.optionSelectionService.currentInput = this.searchText;
         }
+        // We need to trigger this even if unchanged, so the option-items directive will update its list
+        // based on the "showAllOptions" variable which may have changed in the openChange subscription below.
+        // The option-items directive does not listen to openChange, but it listens to currentInput changes.
+        this.optionSelectionService.currentInput = this.searchText;
     }
     get searchText() {
         return this._searchText;
@@ -6298,6 +6307,9 @@ class ClrCombobox extends WrappedFormControl {
             if (open) {
                 this.focusFirstActive();
             }
+            else {
+                this.optionSelectionService.showAllOptions = true;
+            }
             if (this.multiSelect) {
                 this.searchText = '';
             }
@@ -6486,7 +6498,10 @@ class ClrOptionItems {
         if (!this._rawItems || this.filter === undefined || this.filter === null) {
             return;
         }
-        if (this._filterField) {
+        if (this.optionService.showAllOptions) {
+            this.filteredItems = this._rawItems;
+        }
+        else if (this._filterField) {
             this.filteredItems = this._rawItems.filter(item => {
                 const objValue = item[this._filterField];
                 return objValue ? objValue.toString().toLowerCase().indexOf(this.filter.toLowerCase().toString()) > -1 : false;
@@ -8768,10 +8783,12 @@ class ClrDateContainer extends ClrAbstractContainer {
         return this.dateNavigationService.selectedDayChange
             .pipe(startWith(this.dateNavigationService.selectedDay))
             .subscribe(day => {
-            const label = this.getToggleButtonLabel(day);
-            const toggleEl = this.toggleButton.nativeElement;
-            this.renderer.setAttribute(toggleEl, 'aria-label', label);
-            this.renderer.setAttribute(toggleEl, 'title', label);
+            if (this.isEnabled) {
+                const label = this.getToggleButtonLabel(day);
+                const toggleEl = this.toggleButton.nativeElement;
+                this.renderer.setAttribute(toggleEl, 'aria-label', label);
+                this.renderer.setAttribute(toggleEl, 'title', label);
+            }
         });
     }
     /**
@@ -12575,7 +12592,7 @@ ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
 
       <clr-dg-column-separator *ngIf="showSeparator"></clr-dg-column-separator>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMaxPlaceholder", "clrFilterMinPlaceholder", "clrDgNumericFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMaxPlaceholder", "clrFilterMinPlaceholder", "clrDgNumericFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumn, decorators: [{
             type: Component,
             args: [{
@@ -13708,6 +13725,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: DatagridRenderOrganizer }]; } });
 
+/*
+ * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrDatagridSelectionCellDirective {
+    constructor(selection) {
+        this.selection = selection;
+    }
+    onSelectionCellClick(event) {
+        // We want to effectively expand the selection click target to the entire selection cell.
+        // If row selection is enabled, do nothing because the entire selection cell is already clickable.
+        if (this.selection.rowSelectionMode) {
+            return;
+        }
+        // If click was outside the label/input, forward the click to the input.
+        if (event.target.tagName !== 'LABEL' && event.target.tagName !== 'INPUT') {
+            event.target.querySelector('input').click();
+        }
+    }
+}
+ClrDatagridSelectionCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridSelectionCellDirective, deps: [{ token: Selection }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDatagridSelectionCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select", host: { listeners: { "click": "onSelectionCellClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridSelectionCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '.datagrid-select',
+                }]
+        }], ctorParameters: function () { return [{ type: Selection }]; }, propDecorators: { onSelectionCellClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -13924,7 +13974,7 @@ ClrDatagridRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         DatagridIfExpandService,
         { provide: IfExpandService, useExisting: DatagridIfExpandService },
         { provide: LoadingListener, useExisting: DatagridIfExpandService },
-    ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, 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 }], ngImport: i0, template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable clr-col-null\" *ngIf=\"selection.rowSelectionMode\" (mousedown)=\"clearRanges($event)\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending 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-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\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        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\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              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"clrDgRowAriaLabel\"\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\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"clrDgRowAriaLabel\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\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]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.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        </div>\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      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrRadio, selector: "[clrRadio]" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] });
+    ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, 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 }], ngImport: i0, template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable clr-col-null\" *ngIf=\"selection.rowSelectionMode\" (mousedown)=\"clearRanges($event)\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending 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-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\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        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\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              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"clrDgRowAriaLabel\"\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\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"clrDgRowAriaLabel\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\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]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.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        </div>\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      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrRadio, selector: "[clrRadio]" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridRow, decorators: [{
             type: Component,
             args: [{ selector: 'clr-dg-row', host: {
@@ -13936,7 +13986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         DatagridIfExpandService,
                         { provide: IfExpandService, useExisting: DatagridIfExpandService },
                         { provide: LoadingListener, useExisting: DatagridIfExpandService },
-                    ], template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable clr-col-null\" *ngIf=\"selection.rowSelectionMode\" (mousedown)=\"clearRanges($event)\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending 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-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\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        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\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              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"clrDgRowAriaLabel\"\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\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"clrDgRowAriaLabel\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\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]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.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        </div>\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      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n" }]
+                    ], template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable clr-col-null\" *ngIf=\"selection.rowSelectionMode\" (mousedown)=\"clearRanges($event)\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending 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-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\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        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\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              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"clrDgRowAriaLabel\"\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\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"clrDgRowAriaLabel\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\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]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.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        </div>\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      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: Selection }, { type: RowActionService }, { type: ExpandableRowsCount }, { type: DatagridIfExpandService }, { type: DetailService }, { type: DisplayModeService }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: ClrCommonStringsService }, { type: Items }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -14528,7 +14578,7 @@ ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
         ColumnsService,
         DisplayModeService,
         KeyNavigationGridController,
-    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { 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 }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\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\">\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                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n                  >\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                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\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                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\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", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }] });
+    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { 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 }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\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\">\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                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n                  >\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                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\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                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\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", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagrid, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datagrid', providers: [
@@ -14791,9 +14841,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-/** @deprecated since 2.0, remove in 3.0 */
+class ClrDatagridItemsTrackBy {
+    constructor(_items) {
+        this._items = _items;
+    }
+    set trackBy(value) {
+        if (this._items) {
+            this._items.trackBy = value;
+        }
+    }
+}
+ClrDatagridItemsTrackBy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridItemsTrackBy, deps: [{ token: Items, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDatagridItemsTrackBy.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: { trackBy: ["ngForTrackBy", "trackBy"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridItemsTrackBy, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngForTrackBy]',
+                }]
+        }], ctorParameters: function () { return [{ type: Items, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { trackBy: [{
+                type: Input,
+                args: ['ngForTrackBy']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
 class ClrDatagridColumnToggleButton {
-    constructor(columnsService) {
+    constructor(commonStrings, columnsService) {
+        this.commonStrings = commonStrings;
         this.columnsService = columnsService;
         this.allSelected = new EventEmitter();
     }
@@ -14814,7 +14893,7 @@ class ClrDatagridColumnToggleButton {
         this.allSelected.next(true);
     }
 }
-ClrDatagridColumnToggleButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggleButton, deps: [{ token: ColumnsService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridColumnToggleButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggleButton, deps: [{ token: ClrCommonStringsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridColumnToggleButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: { clrAllSelected: "clrAllSelected" }, ngImport: i0, template: `
     <button
       class="btn btn-sm btn-link switch-button"
@@ -14822,7 +14901,7 @@ ClrDatagridColumnToggleButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
       [disabled]="allHideablesVisible"
       type="button"
     >
-      <ng-content></ng-content>
+      {{ commonStrings.keys.selectAll }}
     </button>
   `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggleButton, decorators: [{
@@ -14836,11 +14915,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
       [disabled]="allHideablesVisible"
       type="button"
     >
-      <ng-content></ng-content>
+      {{ commonStrings.keys.selectAll }}
     </button>
   `,
                 }]
-        }], ctorParameters: function () { return [{ type: ColumnsService }]; }, propDecorators: { clrAllSelected: [{
+        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ColumnsService }]; }, propDecorators: { clrAllSelected: [{
                 type: Output,
                 args: ['clrAllSelected']
             }] } });
@@ -14850,54 +14929,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-/** @deprecated since 2.0, remove in 3.0 */
-class ClrDatagridColumnToggleTitle {
-}
-ClrDatagridColumnToggleTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggleTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridColumnToggleTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridColumnToggleTitle, selector: "clr-dg-column-toggle-title", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggleTitle, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clr-dg-column-toggle-title',
-                    template: `<ng-content></ng-content>`,
-                }]
-        }] });
-
-/*
- * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrDatagridItemsTrackBy {
-    constructor(_items) {
-        this._items = _items;
-    }
-    set trackBy(value) {
-        if (this._items) {
-            this._items.trackBy = value;
-        }
-    }
-}
-ClrDatagridItemsTrackBy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridItemsTrackBy, deps: [{ token: Items, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDatagridItemsTrackBy.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: { trackBy: ["ngForTrackBy", "trackBy"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridItemsTrackBy, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngForTrackBy]',
-                }]
-        }], ctorParameters: function () { return [{ type: Items, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { trackBy: [{
-                type: Input,
-                args: ['ngForTrackBy']
-            }] } });
-
-/*
- * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-/** @deprecated since 2.0, remove in 3.0 */
 class ClrDatagridColumnToggle {
     constructor(commonStrings, columnsService, popoverToggleService) {
         this.commonStrings = commonStrings;
@@ -14950,7 +14981,7 @@ class ClrDatagridColumnToggle {
     }
 }
 ClrDatagridColumnToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggle, deps: [{ token: ClrCommonStringsService }, { token: ColumnsService }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, queries: [{ propertyName: "customToggleTitle", first: true, predicate: ClrDatagridColumnToggleTitle, descendants: true }, { propertyName: "customToggleButton", first: true, predicate: ClrDatagridColumnToggleButton, descendants: true }], viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: PopoverHostDirective }], ngImport: i0, template: `
+ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridColumnToggle, 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: PopoverHostDirective }], ngImport: i0, template: `
     <button
       role="button"
       type="button"
@@ -14973,10 +15004,7 @@ ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
     >
       <div class="switch-header">
         <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
-        <ng-container *ngIf="!customToggleTitle">
-          <h2>{{ commonStrings.keys.showColumns }}</h2>
-        </ng-container>
-        <ng-content select="clr-dg-column-toggle-title"></ng-content>
+        <h2>{{ commonStrings.keys.showColumns }}</h2>
         <button
           class="btn btn-sm btn-link toggle-switch-close-button"
           clrPopoverCloseButton
@@ -15004,13 +15032,10 @@ ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </li>
       </ul>
       <div class="switch-footer">
-        <ng-content select="clr-dg-column-toggle-button"></ng-content>
-        <clr-dg-column-toggle-button *ngIf="!customToggleButton" (clrAllSelected)="allColumnsSelected()">
-          {{ commonStrings.keys.selectAll }}
-        </clr-dg-column-toggle-button>
+        <clr-dg-column-toggle-button (clrAllSelected)="allColumnsSelected()"></clr-dg-column-toggle-button>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "directive", type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "component", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "directive", type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "component", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggle, decorators: [{
             type: Component,
             args: [{
@@ -15038,10 +15063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
     >
       <div class="switch-header">
         <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
-        <ng-container *ngIf="!customToggleTitle">
-          <h2>{{ commonStrings.keys.showColumns }}</h2>
-        </ng-container>
-        <ng-content select="clr-dg-column-toggle-title"></ng-content>
+        <h2>{{ commonStrings.keys.showColumns }}</h2>
         <button
           class="btn btn-sm btn-link toggle-switch-close-button"
           clrPopoverCloseButton
@@ -15069,23 +15091,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
         </li>
       </ul>
       <div class="switch-footer">
-        <ng-content select="clr-dg-column-toggle-button"></ng-content>
-        <clr-dg-column-toggle-button *ngIf="!customToggleButton" (clrAllSelected)="allColumnsSelected()">
-          {{ commonStrings.keys.selectAll }}
-        </clr-dg-column-toggle-button>
+        <clr-dg-column-toggle-button (clrAllSelected)="allColumnsSelected()"></clr-dg-column-toggle-button>
       </div>
     </div>
   `,
                     host: { '[class.column-switch-wrapper]': 'true', '[class.active]': 'openState' },
                     hostDirectives: [PopoverHostDirective],
                 }]
-        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ColumnsService }, { type: ClrPopoverToggleService }]; }, propDecorators: { customToggleTitle: [{
-                type: ContentChild,
-                args: [ClrDatagridColumnToggleTitle]
-            }], customToggleButton: [{
-                type: ContentChild,
-                args: [ClrDatagridColumnToggleButton]
-            }], allSelectedElement: [{
+        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ColumnsService }, { type: ClrPopoverToggleService }]; }, propDecorators: { allSelectedElement: [{
                 type: ViewChild,
                 args: ['allSelected', { read: ElementRef }]
             }] } });
@@ -15570,7 +15583,7 @@ class ClrDatagridFooter {
     }
 }
 ClrDatagridFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridFooter, deps: [{ token: Selection }, { token: DetailService }, { token: ColumnsService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridFooter, selector: "clr-dg-footer", host: { properties: { "class.datagrid-footer": "true" } }, queries: [{ propertyName: "toggle", first: true, predicate: ClrDatagridColumnToggle, descendants: true }], ngImport: i0, template: `
+ClrDatagridFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridFooter, selector: "clr-dg-footer", host: { properties: { "class.datagrid-footer": "true" } }, ngImport: i0, template: `
     <ng-container *ngIf="selection.selectionType === SELECTION_TYPE.Multi && selection.current.length > 0">
       <div class="clr-form-control-disabled">
         <clr-checkbox-wrapper class="datagrid-footer-select">
@@ -15581,8 +15594,7 @@ ClrDatagridFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
       </div>
     </ng-container>
     <ng-container *ngIf="!detailService.isOpen">
-      <ng-content select="clr-dg-column-toggle"></ng-content>
-      <clr-dg-column-toggle *ngIf="hasHideableColumns && !toggle"></clr-dg-column-toggle>
+      <clr-dg-column-toggle *ngIf="hasHideableColumns"></clr-dg-column-toggle>
       <div class="datagrid-footer-description">
         <ng-content></ng-content>
       </div>
@@ -15604,8 +15616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
       </div>
     </ng-container>
     <ng-container *ngIf="!detailService.isOpen">
-      <ng-content select="clr-dg-column-toggle"></ng-content>
-      <clr-dg-column-toggle *ngIf="hasHideableColumns && !toggle"></clr-dg-column-toggle>
+      <clr-dg-column-toggle *ngIf="hasHideableColumns"></clr-dg-column-toggle>
       <div class="datagrid-footer-description">
         <ng-content></ng-content>
       </div>
@@ -15616,10 +15627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         '[class.datagrid-footer]': 'true',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: Selection }, { type: DetailService }, { type: ColumnsService }, { type: ClrCommonStringsService }]; }, propDecorators: { toggle: [{
-                type: ContentChild,
-                args: [ClrDatagridColumnToggle]
-            }] } });
+        }], ctorParameters: function () { return [{ type: Selection }, { type: DetailService }, { type: ColumnsService }, { type: ClrCommonStringsService }]; } });
 
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
@@ -16820,43 +16828,42 @@ const CLR_DATAGRID_DIRECTIVES = [
     ClrDatagrid,
     ClrDatagridActionBar,
     ClrDatagridActionOverflow,
+    ClrDatagridCell,
     ClrDatagridColumn,
     ClrDatagridColumnSeparator,
-    ClrDatagridColumnToggle,
-    ClrDatagridHideableColumn,
+    ClrDatagridDetail,
+    ClrDatagridDetailBody,
+    ClrDatagridDetailHeader,
     ClrDatagridFilter,
+    ClrDatagridFooter,
+    ClrDatagridHideableColumn,
     ClrDatagridItems,
     ClrDatagridItemsTrackBy,
-    ClrDatagridRow,
-    ClrDatagridRowDetail,
-    DatagridDetailRegisterer,
-    ClrDatagridCell,
-    ClrDatagridFooter,
-    ClrDatagridPagination,
     ClrDatagridPageSize,
+    ClrDatagridPagination,
     ClrDatagridPlaceholder,
-    ClrDatagridColumnToggleButton,
-    ClrDatagridColumnToggleTitle,
-    ClrDatagridDetail,
+    ClrDatagridRow,
+    ClrDatagridRowDetail,
+    ClrDatagridSelectionCellDirective,
     ClrIfDetail,
-    ClrDatagridDetailHeader,
-    ClrDatagridDetailBody,
+    DatagridDetailRegisterer,
     WrappedCell,
     WrappedColumn,
     WrappedRow,
     // Renderers
-    DatagridMainRenderer,
+    DatagridCellRenderer,
     DatagridHeaderRenderer,
+    DatagridMainRenderer,
     DatagridRowRenderer,
-    DatagridCellRenderer,
     // Chocolate
-    DatagridWillyWonka,
     ActionableOompaLoompa,
+    DatagridWillyWonka,
     ExpandableOompaLoompa,
     // Built-in shortcuts
-    DatagridStringFilter,
     DatagridNumericFilter,
+    DatagridStringFilter,
 ];
+const CLR_DATAGRID_INTERNAL_DIRECTIVES = [ClrDatagridColumnToggle, ClrDatagridColumnToggleButton];
 class ClrDatagridModule {
     constructor() {
         ClarityIcons.addIcons(ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon);
@@ -16868,42 +16875,40 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ClrDatagrid,
         ClrDatagridActionBar,
         ClrDatagridActionOverflow,
+        ClrDatagridCell,
         ClrDatagridColumn,
         ClrDatagridColumnSeparator,
-        ClrDatagridColumnToggle,
-        ClrDatagridHideableColumn,
+        ClrDatagridDetail,
+        ClrDatagridDetailBody,
+        ClrDatagridDetailHeader,
         ClrDatagridFilter,
+        ClrDatagridFooter,
+        ClrDatagridHideableColumn,
         ClrDatagridItems,
         ClrDatagridItemsTrackBy,
-        ClrDatagridRow,
-        ClrDatagridRowDetail,
-        DatagridDetailRegisterer,
-        ClrDatagridCell,
-        ClrDatagridFooter,
-        ClrDatagridPagination,
         ClrDatagridPageSize,
+        ClrDatagridPagination,
         ClrDatagridPlaceholder,
-        ClrDatagridColumnToggleButton,
-        ClrDatagridColumnToggleTitle,
-        ClrDatagridDetail,
+        ClrDatagridRow,
+        ClrDatagridRowDetail,
+        ClrDatagridSelectionCellDirective,
         ClrIfDetail,
-        ClrDatagridDetailHeader,
-        ClrDatagridDetailBody,
+        DatagridDetailRegisterer,
         WrappedCell,
         WrappedColumn,
         WrappedRow,
         // Renderers
-        DatagridMainRenderer,
+        DatagridCellRenderer,
         DatagridHeaderRenderer,
+        DatagridMainRenderer,
         DatagridRowRenderer,
-        DatagridCellRenderer,
         // Chocolate
-        DatagridWillyWonka,
         ActionableOompaLoompa,
+        DatagridWillyWonka,
         ExpandableOompaLoompa,
         // Built-in shortcuts
-        DatagridStringFilter,
-        DatagridNumericFilter], imports: [CommonModule,
+        DatagridNumericFilter,
+        DatagridStringFilter, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton], imports: [CommonModule,
         CdkDragModule,
         CdkTrapFocusModule,
         ClrIconModule,
@@ -16920,42 +16925,40 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ClrDatagrid,
         ClrDatagridActionBar,
         ClrDatagridActionOverflow,
+        ClrDatagridCell,
         ClrDatagridColumn,
         ClrDatagridColumnSeparator,
-        ClrDatagridColumnToggle,
-        ClrDatagridHideableColumn,
+        ClrDatagridDetail,
+        ClrDatagridDetailBody,
+        ClrDatagridDetailHeader,
         ClrDatagridFilter,
+        ClrDatagridFooter,
+        ClrDatagridHideableColumn,
         ClrDatagridItems,
         ClrDatagridItemsTrackBy,
-        ClrDatagridRow,
-        ClrDatagridRowDetail,
-        DatagridDetailRegisterer,
-        ClrDatagridCell,
-        ClrDatagridFooter,
-        ClrDatagridPagination,
         ClrDatagridPageSize,
+        ClrDatagridPagination,
         ClrDatagridPlaceholder,
-        ClrDatagridColumnToggleButton,
-        ClrDatagridColumnToggleTitle,
-        ClrDatagridDetail,
+        ClrDatagridRow,
+        ClrDatagridRowDetail,
+        ClrDatagridSelectionCellDirective,
         ClrIfDetail,
-        ClrDatagridDetailHeader,
-        ClrDatagridDetailBody,
+        DatagridDetailRegisterer,
         WrappedCell,
         WrappedColumn,
         WrappedRow,
         // Renderers
-        DatagridMainRenderer,
+        DatagridCellRenderer,
         DatagridHeaderRenderer,
+        DatagridMainRenderer,
         DatagridRowRenderer,
-        DatagridCellRenderer,
         // Chocolate
-        DatagridWillyWonka,
         ActionableOompaLoompa,
+        DatagridWillyWonka,
         ExpandableOompaLoompa,
         // Built-in shortcuts
-        DatagridStringFilter,
-        DatagridNumericFilter] });
+        DatagridNumericFilter,
+        DatagridStringFilter] });
 ClrDatagridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridModule, imports: [CommonModule,
         CdkDragModule,
         CdkTrapFocusModule,
@@ -16987,7 +16990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ClrPopoverModuleNext,
                         ClrKeyFocusModule,
                     ],
-                    declarations: [CLR_DATAGRID_DIRECTIVES],
+                    declarations: [CLR_DATAGRID_DIRECTIVES, CLR_DATAGRID_INTERNAL_DIRECTIVES],
                     exports: [CLR_DATAGRID_DIRECTIVES],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -21422,7 +21425,7 @@ class ClrVerticalNav {
     }
 }
 ClrVerticalNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrVerticalNav, deps: [{ token: VerticalNavService }, { token: VerticalNavIconService }, { token: VerticalNavGroupRegistrationService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\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<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<!-- Click handler on .nav-content is bad but required :-( -->\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
+ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\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<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<div class=\"nav-content\">\n  <div role=\"list\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrVerticalNav, decorators: [{
             type: Component,
             args: [{ selector: 'clr-vertical-nav', providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], host: {
@@ -21430,7 +21433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         '[class.is-collapsed]': 'collapsed',
                         '[class.has-nav-groups]': 'hasNavGroups',
                         '[class.has-icons]': 'hasIcons',
-                    }, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\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<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<!-- Click handler on .nav-content is bad but required :-( -->\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n" }]
+                    }, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\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<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<div class=\"nav-content\">\n  <div role=\"list\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: VerticalNavService }, { type: VerticalNavIconService }, { type: VerticalNavGroupRegistrationService }, { type: ClrCommonStringsService }]; }, propDecorators: { collapsible: [{
                 type: Input,
                 args: ['clrVerticalNavCollapsible']
@@ -21679,7 +21682,7 @@ class ClrVerticalNavLink {
     }
 }
 ClrVerticalNavLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrVerticalNavLink, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: VerticalNavGroupService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNavLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNavLink, selector: "[clrVerticalNavLink]", host: { classAttribute: "nav-link" }, ngImport: i0, template: `
+ClrVerticalNavLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNavLink, selector: "[clrVerticalNavLink]", host: { attributes: { "role": "listitem" }, classAttribute: "nav-link" }, ngImport: i0, template: `
     <ng-content select="[clrVerticalNavIcon]"></ng-content>
     <span class="nav-text">
       <ng-content></ng-content>
@@ -21695,7 +21698,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
       <ng-content></ng-content>
     </span>
   `,
-                    host: { class: 'nav-link' },
+                    host: {
+                        class: 'nav-link',
+                        role: 'listitem',
+                    },
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: VerticalNavGroupService, decorators: [{
                     type: Optional
@@ -26054,5 +26060,5 @@ const CLR_MENU_POSITIONS = [
  * Generated bundle index. Do not edit.
  */
 
-export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
+export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, ClrDatagridSelectionCellDirective as ÇlrDatagridSelectionCellDirective, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
 //# sourceMappingURL=clr-angular.mjs.map