@clr/angular 15.0.0-beta.6 → 15.0.0-rc.1

package/fesm2020/clr-angular.mjs

@@ -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;
@@ -14826,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();
     }
@@ -14849,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"
@@ -14857,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: [{
@@ -14871,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']
             }] } });
@@ -14885,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;
@@ -14985,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"
@@ -15008,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
@@ -15039,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: "component", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }, { kind: "directive", type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }] });
+  `, 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: [{
@@ -15073,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
@@ -15104,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 }]
             }] } });
@@ -15605,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">
@@ -15616,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>
@@ -15639,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>
@@ -15651,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.
@@ -16858,9 +16831,6 @@ const CLR_DATAGRID_DIRECTIVES = [
     ClrDatagridCell,
     ClrDatagridColumn,
     ClrDatagridColumnSeparator,
-    ClrDatagridColumnToggle,
-    ClrDatagridColumnToggleButton,
-    ClrDatagridColumnToggleTitle,
     ClrDatagridDetail,
     ClrDatagridDetailBody,
     ClrDatagridDetailHeader,
@@ -16893,6 +16863,7 @@ const CLR_DATAGRID_DIRECTIVES = [
     DatagridNumericFilter,
     DatagridStringFilter,
 ];
+const CLR_DATAGRID_INTERNAL_DIRECTIVES = [ClrDatagridColumnToggle, ClrDatagridColumnToggleButton];
 class ClrDatagridModule {
     constructor() {
         ClarityIcons.addIcons(ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon);
@@ -16907,9 +16878,6 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ClrDatagridCell,
         ClrDatagridColumn,
         ClrDatagridColumnSeparator,
-        ClrDatagridColumnToggle,
-        ClrDatagridColumnToggleButton,
-        ClrDatagridColumnToggleTitle,
         ClrDatagridDetail,
         ClrDatagridDetailBody,
         ClrDatagridDetailHeader,
@@ -16940,7 +16908,7 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ExpandableOompaLoompa,
         // Built-in shortcuts
         DatagridNumericFilter,
-        DatagridStringFilter], imports: [CommonModule,
+        DatagridStringFilter, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton], imports: [CommonModule,
         CdkDragModule,
         CdkTrapFocusModule,
         ClrIconModule,
@@ -16960,9 +16928,6 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ClrDatagridCell,
         ClrDatagridColumn,
         ClrDatagridColumnSeparator,
-        ClrDatagridColumnToggle,
-        ClrDatagridColumnToggleButton,
-        ClrDatagridColumnToggleTitle,
         ClrDatagridDetail,
         ClrDatagridDetailBody,
         ClrDatagridDetailHeader,
@@ -17025,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 []; } });
@@ -26095,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, 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 };
+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