@clr/angular 15.0.0-beta.2 → 15.0.0-beta.3

package/fesm2020/clr-angular.mjs

@@ -9,8 +9,9 @@ import { Subject, BehaviorSubject, Observable, fromEvent, isObservable, of, Repl
 import { trigger, transition, style, animate, keyframes, state } from '@angular/animations';
 import * as i1 from '@angular/forms';
 import { FormControl, FormGroup, FormsModule, NG_VALIDATORS, SelectMultipleControlValueAccessor } from '@angular/forms';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { CdkDrag } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/router';
-import { FocusTrapTrackerService, createId, isFocusable, isHTMLElement } from '@cds/core/internal';
 import '@cds/core/internal-components/close-button/register.js';
 import '@cds/core/icon/register';
 
@@ -332,7 +333,6 @@ const commonStringsDefault = {
     responsiveNavOverflowOpen: 'Navigation overflow menu',
     responsiveNavOverflowClose: 'Navigation overflow menu',
     //Vertical Nav
-    verticalNavGroupToggle: 'Toggle vertical navigation group',
     verticalNavToggle: 'Toggle vertical navigation',
     // Timeline steps
     timelineStepNotStarted: 'Not started',
@@ -596,10 +596,10 @@ class ClrAccordionPanel {
     }
 }
 ClrAccordionPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAccordionPanel, deps: [{ token: ClrCommonStringsService }, { token: AccordionService }, { token: IfExpandService }], target: i0.ɵɵFactoryTarget.Component });
-ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</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: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</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: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAccordionPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: AccordionService }, { type: IfExpandService }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['clrAccordionPanelDisabled']
@@ -1091,10 +1091,10 @@ class ClrStepperPanel extends ClrAccordionPanel {
     }
 }
 ClrStepperPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStepperPanel, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: i1.FormGroupName, optional: true }, { token: i1.NgModelGroup, optional: true }, { token: StepperService }, { token: IfExpandService }], target: i0.ɵɵFactoryTarget.Component });
-ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</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: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</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: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStepperPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -6985,202 +6985,32 @@ 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.
  */
-class FocusTrapTracker {
-    constructor() {
-        this._previousFocusTraps = [];
-    }
-    get current() {
-        return this._current;
-    }
-    set current(value) {
-        this._previousFocusTraps.push(this._current);
-        this._current = value;
-    }
-    get nbFocusTrappers() {
-        return this._previousFocusTraps.length;
-    }
-    activatePreviousTrapper() {
-        this._current = this._previousFocusTraps.pop();
-    }
-}
-FocusTrapTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrapTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FocusTrapTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrapTracker, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrapTracker, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/*
- * Copyright (c) 2016-2022 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.
+/**
+ * This is just a copy of CdkTrapFocus so it can be used independent of the rest of the A11yModule.
  */
-const FOCUSABLES = '[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), [contenteditable="true"]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]) ';
-class FocusTrapDirective {
-    constructor(el, injector, focusTrapsTracker, renderer, platformId) {
-        this.el = el;
-        this.injector = injector;
-        this.focusTrapsTracker = focusTrapsTracker;
-        this.renderer = renderer;
-        this.platformId = platformId;
-        this.localFocusEscaped = false;
-        this._config = {
-            strict: true,
-        };
-        this.document = this.injector.get(DOCUMENT);
-        this.focusTrapsTracker.current = this;
-    }
-    set config(config) {
-        this._config = Object.assign(this._config, config === '' ? {} : config);
-    }
-    onFocusIn(event) {
-        const nativeElement = this.el.nativeElement;
-        if (this.focusTrapsTracker.current !== this ||
-            !isPlatformBrowser(this.platformId) ||
-            this.localFocusEscaped ||
-            nativeElement.contains(event.target)) {
-            return;
-        }
-        if (event.target === this.topReboundEl && nativeElement.contains(event.relatedTarget)) {
-            this.focusLastFocusable();
-            // if it fails to focus element inside the trap, focus the trap element.
-            this.focusTrapElIfOutside();
-        }
-        else if (event.target === this.bottomReboundEl && nativeElement.contains(event.relatedTarget)) {
-            this.focusFirstFocusable();
-            // if it fails to focus element inside the trap, focus the trap element.
-            this.focusTrapElIfOutside();
-        }
-        else {
-            this._config.strict ? this.el.nativeElement.focus() : (this.localFocusEscaped = true);
-        }
-    }
-    createFocusableOffScreenEl() {
-        // Not using Renderer2's createElement method because that leads to DOM leakage.
-        // https://github.com/angular/angular/issues/26954
-        const offScreenSpan = this.document.createElement('span');
-        this.renderer.setAttribute(offScreenSpan, 'tabindex', '0');
-        this.renderer.addClass(offScreenSpan, 'offscreen-focus-rebounder');
-        return offScreenSpan;
-    }
-    addReboundEls() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.topReboundEl = this.createFocusableOffScreenEl();
-            this.bottomReboundEl = this.createFocusableOffScreenEl();
-            const hostElement = this.el.nativeElement;
-            // Add reboundBeforeTrapEl right outside of host element
-            this.renderer.insertBefore(hostElement.parentElement, this.topReboundEl, hostElement);
-            // Add reboundAfterTrapEl right after host element
-            if (hostElement.nextSibling) {
-                this.renderer.insertBefore(hostElement.parentNode, this.bottomReboundEl, hostElement.nextSibling);
-            }
-            else {
-                this.renderer.appendChild(hostElement.parentNode, this.bottomReboundEl);
-            }
-        }
-    }
-    removeReboundEls() {
-        if (isPlatformBrowser(this.platformId) && this.topReboundEl && this.bottomReboundEl) {
-            this.parentElement.removeChild(this.topReboundEl);
-            this.parentElement.removeChild(this.bottomReboundEl);
-            // These are here to to make sure that
-            // we completely delete all traces of the removed DOM objects.
-            delete this.topReboundEl;
-            delete this.bottomReboundEl;
-        }
-    }
-    setPreviousFocus() {
-        if (this.previousActiveElement && this.previousActiveElement.focus) {
-            this.previousActiveElement.focus();
-        }
-    }
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.renderer.setAttribute(this.el.nativeElement, 'tabindex', '-1');
-            this.el.nativeElement.focus();
-        }
-    }
-    ngAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.previousActiveElement = this.document.activeElement;
-            this.parentElement = this.el.nativeElement.parentElement;
-        }
-        this.addReboundEls();
-    }
-    get potentiallyFocusableEls() {
-        return [...this.el.nativeElement.querySelectorAll(FOCUSABLES)];
-    }
-    focusFirstFocusable() {
-        for (let i = 0; i < this.potentiallyFocusableEls.length; i++) {
-            this.firstFocusableEl = this.focusElement(this.potentiallyFocusableEls[i]);
-            if (this.firstFocusableEl) {
-                break;
-            }
-        }
-    }
-    focusLastFocusable() {
-        for (let i = this.potentiallyFocusableEls.length - 1; i >= 0; i--) {
-            this.lastFocusableEl = this.focusElement(this.potentiallyFocusableEls[i]);
-            if (this.lastFocusableEl) {
-                break;
-            }
-        }
-    }
-    focusTrapElIfOutside() {
-        if (!this.el.nativeElement.contains(document.activeElement)) {
-            this.el.nativeElement.focus();
-        }
-    }
-    focusElement(el) {
-        if (el && el.focus) {
-            el.focus();
-            if (document.activeElement === el) {
-                return el;
-            }
-        }
-        return null;
-    }
-    ngOnDestroy() {
-        this.removeReboundEls();
-        this.setPreviousFocus();
-        this.focusTrapsTracker.activatePreviousTrapper();
-    }
+class CdkTrapFocusModule_CdkTrapFocus extends CdkTrapFocus {
 }
-FocusTrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrapDirective, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: FocusTrapTracker }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
-FocusTrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: { config: ["clrFocusTrap", "config"] }, host: { listeners: { "document:focusin": "onFocusIn($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrapDirective, decorators: [{
+CdkTrapFocusModule_CdkTrapFocus.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkTrapFocusModule_CdkTrapFocus, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkTrapFocusModule_CdkTrapFocus.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkTrapFocusModule_CdkTrapFocus, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[clrFocusTrap]',
+                    selector: '[cdkTrapFocus]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: FocusTrapTracker }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }]; }, propDecorators: { config: [{
-                type: Input,
-                args: ['clrFocusTrap']
-            }], onFocusIn: [{
-                type: HostListener,
-                args: ['document:focusin', ['$event']]
-            }] } });
-
-/*
- * Copyright (c) 2016-2022 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.
+        }] });
+/**
+ * This module allows us to avoid importing all of A11yModule which results in a smaller application bundle.
  */
-const FOCUS_TRAP_DIRECTIVES = [FocusTrapDirective];
-class ClrFocusTrapModule {
+class CdkTrapFocusModule {
 }
-ClrFocusTrapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrFocusTrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrFocusTrapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ClrFocusTrapModule, declarations: [FocusTrapDirective], imports: [CommonModule], exports: [FocusTrapDirective] });
-ClrFocusTrapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrFocusTrapModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrFocusTrapModule, decorators: [{
+CdkTrapFocusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkTrapFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CdkTrapFocusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: CdkTrapFocusModule, declarations: [CdkTrapFocusModule_CdkTrapFocus], exports: [CdkTrapFocusModule_CdkTrapFocus] });
+CdkTrapFocusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkTrapFocusModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkTrapFocusModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [FOCUS_TRAP_DIRECTIVES],
-                    exports: [FOCUS_TRAP_DIRECTIVES],
+                    declarations: [CdkTrapFocusModule_CdkTrapFocus],
+                    exports: [CdkTrapFocusModule_CdkTrapFocus],
                 }]
         }] });
 
@@ -8965,7 +8795,7 @@ ClrDateContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
           </button>
           <clr-datepicker-view-manager
             *clrPopoverContent="open; at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
-            clrFocusTrap
+            cdkTrapFocus
           ></clr-datepicker-view-manager>
         </div>
         <cds-icon
@@ -8987,7 +8817,7 @@ ClrDateContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, 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: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager" }] });
+  `, isInline: true, 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: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDateContainer, decorators: [{
             type: Component,
             args: [{
@@ -9011,7 +8841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
           </button>
           <clr-datepicker-view-manager
             *clrPopoverContent="open; at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
-            clrFocusTrap
+            cdkTrapFocus
           ></clr-datepicker-view-manager>
         </div>
         <cds-icon
@@ -9401,11 +9231,11 @@ ClrDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         ClrYearpicker,
         ClrDaypicker,
         ClrCalendar], imports: [CommonModule,
+        CdkTrapFocusModule,
         ClrHostWrappingModule,
         ClrConditionalModule,
         ClrPopoverModuleNext,
         ClrIconModule,
-        ClrFocusTrapModule,
         ClrCommonFormsModule], exports: [ClrDay,
         ClrDateContainer,
         ClrDateInput,
@@ -9416,22 +9246,22 @@ ClrDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         ClrDaypicker,
         ClrCalendar] });
 ClrDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatepickerModule, imports: [CommonModule,
+        CdkTrapFocusModule,
         ClrHostWrappingModule,
         ClrConditionalModule,
         ClrPopoverModuleNext,
         ClrIconModule,
-        ClrFocusTrapModule,
         ClrCommonFormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
+                        CdkTrapFocusModule,
                         ClrHostWrappingModule,
                         ClrConditionalModule,
                         ClrPopoverModuleNext,
                         ClrIconModule,
-                        ClrFocusTrapModule,
                         ClrCommonFormsModule,
                     ],
                     declarations: [CLR_DATEPICKER_DIRECTIVES],
@@ -10399,972 +10229,45 @@ class ClrExpandableAnimation {
         this.startHeight = 0;
     }
     get expandAnimation() {
-        return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
-    }
-    animationDone() {
-        // A "safe" auto-update of the height ensuring basic OOTB user experience .
-        // Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
-        // For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.
-        this.updateStartHeight();
-    }
-    updateStartHeight() {
-        this.startHeight = this.domAdapter.computedHeight(this.element.nativeElement) || 0;
-    }
-}
-ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
-ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], animations: [
-        trigger('expandAnimation', [
-            transition('true <=> false', [
-                style({ height: '{{startHeight}}px', overflow: 'hidden' }),
-                animate('0.2s ease-in-out', style({ height: '*' })),
-            ]),
-        ]),
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimation, decorators: [{
-            type: Component,
-            args: [{ selector: 'clr-expandable-animation', template: `<ng-content></ng-content>`, animations: [
-                        trigger('expandAnimation', [
-                            transition('true <=> false', [
-                                style({ height: '{{startHeight}}px', overflow: 'hidden' }),
-                                animate('0.2s ease-in-out', style({ height: '*' })),
-                            ]),
-                        ]),
-                    ], providers: [DomAdapter], styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }]; }, propDecorators: { clrExpandTrigger: [{
-                type: Input
-            }], expandAnimation: [{
-                type: HostBinding,
-                args: ['@expandAnimation']
-            }], animationDone: [{
-                type: HostListener,
-                args: ['@expandAnimation.done']
-            }] } });
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-const EXPANDABLE_ANIMATION_DIRECTIVES = [ClrExpandableAnimation];
-
-/*
- * Copyright (c) 2016-2022 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 ClrExpandableAnimationModule {
-}
-ClrExpandableAnimationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrExpandableAnimationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, declarations: [ClrExpandableAnimation], imports: [CommonModule], exports: [ClrExpandableAnimation] });
-ClrExpandableAnimationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [EXPANDABLE_ANIMATION_DIRECTIVES],
-                    exports: [EXPANDABLE_ANIMATION_DIRECTIVES],
-                }]
-        }] });
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-var DragEventType;
-(function (DragEventType) {
-    DragEventType[DragEventType["DRAG_START"] = 0] = "DRAG_START";
-    DragEventType[DragEventType["DRAG_MOVE"] = 1] = "DRAG_MOVE";
-    DragEventType[DragEventType["DRAG_END"] = 2] = "DRAG_END";
-    DragEventType[DragEventType["DRAG_ENTER"] = 3] = "DRAG_ENTER";
-    DragEventType[DragEventType["DRAG_LEAVE"] = 4] = "DRAG_LEAVE";
-    DragEventType[DragEventType["DROP"] = 5] = "DROP";
-})(DragEventType || (DragEventType = {}));
-
-/*
- * Copyright (c) 2016-2022 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 DragAndDropEventBusService {
-    constructor() {
-        this.dragStart = new Subject();
-        this.dragMove = new Subject();
-        this.dragEnd = new Subject();
-        this.drop = new Subject();
-    }
-    get dragStarted() {
-        return this.dragStart.asObservable();
-    }
-    get dragMoved() {
-        return this.dragMove.asObservable();
-    }
-    get dragEnded() {
-        return this.dragEnd.asObservable();
-    }
-    get dropped() {
-        return this.drop.asObservable();
-    }
-    broadcast(event) {
-        switch (event.type) {
-            case DragEventType.DRAG_START:
-                this.dragStart.next(event);
-                break;
-            case DragEventType.DRAG_MOVE:
-                this.dragMove.next(event);
-                break;
-            case DragEventType.DRAG_END:
-                this.dragEnd.next(event);
-                break;
-            case DragEventType.DROP:
-                this.drop.next(event);
-                break;
-            default:
-                break;
-        }
-    }
-}
-DragAndDropEventBusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragAndDropEventBusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DragAndDropEventBusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragAndDropEventBusService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragAndDropEventBusService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/*
- * Copyright (c) 2016-2022 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 DragEventListenerService {
-    constructor(ngZone, renderer, eventBus) {
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.eventBus = eventBus;
-        // contains listeners for the starting events such as mousedown and touchstart
-        this.listeners = [];
-        this.dragStart = new Subject();
-        this.dragMove = new Subject();
-        this.dragEnd = new Subject();
-        this.hasDragStarted = false;
-        this.dragStartDelay = 0;
-    }
-    get dragStarted() {
-        return this.dragStart.asObservable();
-    }
-    get dragMoved() {
-        return this.dragMove.asObservable();
-    }
-    get dragEnded() {
-        return this.dragEnd.asObservable();
-    }
-    get dragStartPosition() {
-        return this.initialPosition;
-    }
-    attachDragListeners(draggableEl) {
-        this.draggableEl = draggableEl;
-        this.listeners.push(this.customDragEvent(this.draggableEl, 'mousedown', 'mousemove', 'mouseup'));
-        this.listeners.push(this.customDragEvent(this.draggableEl, 'touchstart', 'touchmove', 'touchend'));
-    }
-    detachDragListeners() {
-        if (this.listeners) {
-            this.listeners.map(event => event());
-        }
-        // In most cases, once users start dragging with mousedown/touchstart events,
-        // they will end dragging at one point with mouseup/touchend.
-        // However, there might be a few cases where mousedown/touchstart events get registered,
-        // but the draggable element gets removed before user ends dragging.
-        // In that case, we need to remove the attached listeners that happened during the mousedown/touchstart events.
-        if (this.nestedListeners) {
-            this.nestedListeners.map(event => event());
-        }
-        if (this.checkDragStartBoundaryListener) {
-            this.checkDragStartBoundaryListener();
-        }
-    }
-    getNativeEventObject(event) {
-        if (Object.prototype.hasOwnProperty.call(event, 'changedTouches')) {
-            return event.changedTouches[0];
-        }
-        else {
-            return event;
-        }
-    }
-    customDragEvent(element, startOnEvent, moveOnEvent, endOnEvent) {
-        return this.renderer.listen(element, startOnEvent, (startEvent) => {
-            // save the initial point to initialPosition
-            // this will be used to calculate how far the draggable has been dragged from its initial position
-            this.initialPosition = {
-                pageX: this.getNativeEventObject(startEvent).pageX,
-                pageY: this.getNativeEventObject(startEvent).pageY,
-            };
-            // Initialize nested listeners' property with a new empty array;
-            this.nestedListeners = [];
-            // Listen to selectstart/mousemove/touchmove events outside of angular zone.
-            this.ngZone.runOutsideAngular(() => {
-                // This is needed to disable selection during dragging (especially in EDGE/IE11).
-                this.nestedListeners.push(this.renderer.listen('document', 'selectstart', (selectEvent) => {
-                    selectEvent.preventDefault();
-                    selectEvent.stopImmediatePropagation();
-                }));
-                // During the drag start delay, pointer should stay within the boundary.
-                this.checkDragStartBoundary(moveOnEvent);
-                this.dragStartDelayTimeout = setTimeout(() => {
-                    if (this.checkDragStartBoundaryListener) {
-                        this.checkDragStartBoundaryListener();
-                    }
-                    this.hasDragStarted = true;
-                    // Fire "dragstart"
-                    this.broadcast(startEvent, DragEventType.DRAG_START);
-                    this.nestedListeners.push(this.renderer.listen('document', moveOnEvent, (moveEvent) => {
-                        // Event.stopImmediatePropagation() is needed here to prevent nested draggables from getting dragged
-                        // altogether. We shouldn't use Event.stopPropagation() here as we are listening to the events
-                        // on the global element level.
-                        // With Event.stopImmediatePropagation(), it registers the events sent from the inner most draggable
-                        // first. Then immediately after that, it stops listening to the same type of events on the same
-                        // element. So this will help us to not register the same events that would come from the parent
-                        // level draggables eventually.
-                        moveEvent.stopImmediatePropagation();
-                        if (this.hasDragStarted) {
-                            // Fire "dragmove"
-                            this.broadcast(moveEvent, DragEventType.DRAG_MOVE);
-                        }
-                    }));
-                }, this.dragStartDelay);
-            });
-            // Listen to mouseup/touchend events.
-            this.nestedListeners.push(this.renderer.listen('document', endOnEvent, (endEvent) => {
-                if (this.hasDragStarted) {
-                    // Fire "dragend" only if dragstart is registered
-                    this.hasDragStarted = false;
-                    this.broadcast(endEvent, DragEventType.DRAG_END);
-                }
-                clearTimeout(this.dragStartDelayTimeout);
-                // We must remove the the nested listeners every time drag completes.
-                this.nestedListeners.map(event => event());
-                // We must remove the event listener from checkDragStartBoundary
-                if (this.checkDragStartBoundaryListener) {
-                    this.checkDragStartBoundaryListener();
-                }
-            }));
-        });
-    }
-    checkDragStartBoundary(eventType) {
-        this.checkDragStartBoundaryListener = this.renderer.listen('document', eventType, (moveEvent) => {
-            const deltaX = Math.abs(this.getNativeEventObject(moveEvent).pageX - this.initialPosition.pageX);
-            const deltaY = Math.abs(this.getNativeEventObject(moveEvent).pageY - this.initialPosition.pageY);
-            // If pointer move delta exceeds horizontal or vertical threshold,
-            // we should cancel drag initiation.
-            if (deltaX > 1 || deltaY > 1) {
-                clearTimeout(this.dragStartDelayTimeout);
-                if (this.checkDragStartBoundaryListener) {
-                    this.checkDragStartBoundaryListener();
-                }
-            }
-        });
-    }
-    broadcast(event, eventType) {
-        const dragEvent = this.generateDragEvent(event, eventType);
-        switch (dragEvent.type) {
-            case DragEventType.DRAG_START:
-                this.dragStart.next(dragEvent);
-                break;
-            case DragEventType.DRAG_MOVE:
-                this.dragMove.next(dragEvent);
-                break;
-            case DragEventType.DRAG_END:
-                this.dragEnd.next(dragEvent);
-                break;
-            default:
-                break;
-        }
-        // The following properties are set after they are broadcasted to the DraggableGhost component.
-        dragEvent.ghostElement = this.ghostElement;
-        dragEvent.dropPointPosition = this.dropPointPosition;
-        this.eventBus.broadcast(dragEvent);
-    }
-    generateDragEvent(event, eventType) {
-        const nativeEvent = this.getNativeEventObject(event);
-        return {
-            type: eventType,
-            dragPosition: {
-                pageX: nativeEvent.pageX,
-                pageY: nativeEvent.pageY,
-                moveX: nativeEvent.pageX - this.initialPosition.pageX,
-                moveY: nativeEvent.pageY - this.initialPosition.pageY,
-            },
-            group: this.group,
-            dragDataTransfer: this.dragDataTransfer,
-            ghostElement: this.ghostElement,
-        };
-    }
-}
-DragEventListenerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragEventListenerService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: DragAndDropEventBusService }], target: i0.ɵɵFactoryTarget.Injectable });
-DragEventListenerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragEventListenerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragEventListenerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: DragAndDropEventBusService }]; } });
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-// This provider registers the drag handle element.
-// When it registers a element as a drag handle, it attaches that element to the listeners from ClrDragEventListener.
-// Also, it adds the "drag-handle" css class to the registered element through Renderer.
-class DragHandleRegistrarService {
-    constructor(dragEventListener, renderer) {
-        this.dragEventListener = dragEventListener;
-        this.renderer = renderer;
-    }
-    get defaultHandleEl() {
-        return this._defaultHandleEl;
-    }
-    set defaultHandleEl(el) {
-        this._defaultHandleEl = el; // defaultHandleEl will be usually the clrDraggable element.
-        // If the customHandleEl has been registered,
-        // don't make the defaultHandleEl the drag handle yet until the customHandleEl is unregistered.
-        if (!this._customHandleEl) {
-            this.makeElementHandle(this._defaultHandleEl);
-        }
-    }
-    makeElementHandle(el) {
-        if (this._defaultHandleEl && this._defaultHandleEl !== el) {
-            // Before making an element the custom handle element,
-            // we should remove the existing drag-handle class from the draggable element.
-            this.renderer.removeClass(this._defaultHandleEl, 'drag-handle');
-        }
-        this.dragEventListener.attachDragListeners(el);
-        this.renderer.addClass(el, 'drag-handle');
-    }
-    get customHandleEl() {
-        return this._customHandleEl;
-    }
-    registerCustomHandle(el) {
-        this.dragEventListener.detachDragListeners(); // removes the existing listeners
-        this._customHandleEl = el;
-        this.makeElementHandle(this._customHandleEl);
-    }
-    unregisterCustomHandle() {
-        this.dragEventListener.detachDragListeners(); // removes the existing listeners
-        this.renderer.removeClass(this._customHandleEl, 'drag-handle');
-        delete this._customHandleEl;
-        // if default handle is set, make that handle
-        if (this._defaultHandleEl) {
-            this.makeElementHandle(this._defaultHandleEl);
-        }
-    }
-}
-DragHandleRegistrarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragHandleRegistrarService, deps: [{ token: DragEventListenerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-DragHandleRegistrarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragHandleRegistrarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DragHandleRegistrarService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: DragEventListenerService }, { type: i0.Renderer2 }]; } });
-
-/*
- * Copyright (c) 2016-2022 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 ClrDragHandle {
-    constructor(el, dragHandleRegistrar) {
-        this.el = el;
-        this.dragHandleRegistrar = dragHandleRegistrar;
-        if (!this.dragHandleRegistrar) {
-            // ClrDragHandleRegistrar is provided in ClrDraggable so we expect it to be present here
-            // as clrDragHandle is required to be used only inside of a clrDraggable directive.
-            throw new Error('The clrDragHandle directive can only be used inside of a clrDraggable directive.');
-        }
-        this.dragHandleRegistrar.registerCustomHandle(this.el.nativeElement);
-    }
-    ngOnDestroy() {
-        this.dragHandleRegistrar.unregisterCustomHandle();
-    }
-}
-ClrDragHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDragHandle, deps: [{ token: i0.ElementRef }, { token: DragHandleRegistrarService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDragHandle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDragHandle, selector: "[clrDragHandle]", host: { properties: { "class.drag-handle": "true" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDragHandle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clrDragHandle]',
-                    host: { '[class.drag-handle]': 'true' },
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragHandleRegistrarService, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-// This service is used to capture the state of clrDraggable element
-// at a certain event and passes it to clrDraggableGhost component.
-class DraggableSnapshotService {
-    constructor(domAdapter) {
-        this.domAdapter = domAdapter;
-    }
-    capture(el, event) {
-        this.draggableElClientRect = this.domAdapter.clientRect(el);
-        this.snapshotDragEvent = event;
-    }
-    discard() {
-        delete this.draggableElClientRect;
-        delete this.snapshotDragEvent;
-    }
-    get hasDraggableState() {
-        return !!this.snapshotDragEvent && !!this.draggableElClientRect;
-    }
-    get clientRect() {
-        return this.draggableElClientRect;
-    }
-    get dragEvent() {
-        return this.snapshotDragEvent;
-    }
-}
-DraggableSnapshotService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DraggableSnapshotService, deps: [{ token: DomAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
-DraggableSnapshotService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DraggableSnapshotService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DraggableSnapshotService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: DomAdapter }]; } });
-
-/*
- * Copyright (c) 2016-2022 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 ClrDraggableGhost {
-    constructor(el, dragEventListener, draggableSnapshot, renderer, ngZone) {
-        this.el = el;
-        this.dragEventListener = dragEventListener;
-        this.draggableSnapshot = draggableSnapshot;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.subscriptions = [];
-        this.leaveAnimConfig = { value: 0, params: { top: '0px', left: '0px' } };
-        if (!this.dragEventListener || !this.draggableSnapshot) {
-            throw new Error('The clr-draggable-ghost component can only be used inside of a clrDraggable directive.');
-        }
-        this.draggableGhostEl = this.el.nativeElement;
-        // Need to use Renderer2 as it runs outside of NgZone
-        this.renderer.addClass(this.draggableGhostEl, 'draggable-ghost');
-        // Register the ghost element in DragEventListener to pass in a ClrDragEvent.
-        this.dragEventListener.ghostElement = this.draggableGhostEl;
-        // Default ghost size gets the size of ClrDraggable element.
-        this.setDefaultGhostSize(this.draggableGhostEl);
-        const offset = {
-            top: this.draggableSnapshot.hasDraggableState
-                ? this.draggableSnapshot.dragEvent.dragPosition.pageY - this.draggableSnapshot.clientRect.top
-                : 0,
-            left: this.draggableSnapshot.hasDraggableState
-                ? this.draggableSnapshot.dragEvent.dragPosition.pageX - this.draggableSnapshot.clientRect.left
-                : 0,
-        };
-        let isAnimationConfigured = false;
-        this.subscriptions.push(this.dragEventListener.dragMoved.subscribe((event) => {
-            // On the first drag move event, we configure the animation as it's dependent on the first drag event.
-            if (!isAnimationConfigured) {
-                if (this.draggableSnapshot.hasDraggableState) {
-                    this.animateToOnLeave(`${this.draggableSnapshot.clientRect.top}px`, `${this.draggableSnapshot.clientRect.left}px`);
-                }
-                else {
-                    this.animateToOnLeave(`${this.dragEventListener.dragStartPosition.pageY}px`, `${this.dragEventListener.dragStartPosition.pageY}px`);
-                }
-                isAnimationConfigured = true;
-            }
-            // Position the draggable ghost.
-            const topLeftPosition = this.findTopLeftPosition(event.dragPosition, offset);
-            this.setPositionStyle(this.draggableGhostEl, topLeftPosition.pageX, topLeftPosition.pageY);
-            this.dragEventListener.dropPointPosition = this.findDropPointPosition(topLeftPosition);
-        }));
-    }
-    setDefaultGhostSize(el) {
-        if (this.draggableSnapshot.hasDraggableState) {
-            this.setSizeStyle(el, this.draggableSnapshot.clientRect.width, this.draggableSnapshot.clientRect.height);
-        }
-    }
-    animateToOnLeave(top, left) {
-        this.ngZone.run(() => {
-            this.leaveAnimConfig = { value: 0, params: { top: top, left: left } };
-        });
-    }
-    findTopLeftPosition(dragPosition, offset) {
-        return { pageX: dragPosition.pageX - offset.left, pageY: dragPosition.pageY - offset.top };
-    }
-    findDropPointPosition(topLeftPosition) {
-        if (this.draggableSnapshot.hasDraggableState) {
-            return {
-                pageX: topLeftPosition.pageX + this.draggableSnapshot.clientRect.width / 2,
-                pageY: topLeftPosition.pageY + this.draggableSnapshot.clientRect.height / 2,
-            };
-        }
-        else {
-            return topLeftPosition;
-        }
-    }
-    setSizeStyle(el, width, height) {
-        this.renderer.setStyle(el, 'width', `${width}px`);
-        this.renderer.setStyle(el, 'height', `${height}px`);
-    }
-    setPositionStyle(el, left, top) {
-        this.renderer.setStyle(el, 'left', `${left}px`);
-        this.renderer.setStyle(el, 'top', `${top}px`);
-        this.renderer.setStyle(el, 'visibility', 'visible');
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
-    }
-}
-ClrDraggableGhost.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDraggableGhost, deps: [{ token: i0.ElementRef }, { token: DragEventListenerService, optional: true }, { token: DraggableSnapshotService, optional: true }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ClrDraggableGhost.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDraggableGhost, selector: "clr-draggable-ghost", host: { properties: { "@leaveAnimation": "this.leaveAnimConfig" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, animations: [
-        trigger('leaveAnimation', [
-            transition(':leave', [
-                style({ left: '*', top: '*' }),
-                animate('0.2s ease-in-out', style({ top: '{{top}}', left: '{{left}}' })),
-            ]),
-        ]),
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDraggableGhost, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clr-draggable-ghost',
-                    template: `<ng-content></ng-content>`,
-                    animations: [
-                        trigger('leaveAnimation', [
-                            transition(':leave', [
-                                style({ left: '*', top: '*' }),
-                                animate('0.2s ease-in-out', style({ top: '{{top}}', left: '{{left}}' })),
-                            ]),
-                        ]),
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragEventListenerService, decorators: [{
-                    type: Optional
-                }] }, { type: DraggableSnapshotService, decorators: [{
-                    type: Optional
-                }] }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { leaveAnimConfig: [{
-                type: HostBinding,
-                args: ['@leaveAnimation']
-            }] } });
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-// This class is used to convert an internal event
-// to an external event to be emitted.
-class ClrDragEvent {
-    constructor(dragEvent) {
-        this.dragPosition = dragEvent.dragPosition;
-        this.group = dragEvent.group;
-        this.dragDataTransfer = dragEvent.dragDataTransfer;
-        this.dropPointPosition = dragEvent.dropPointPosition;
-    }
-}
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-// This structural directive will be used mainly together with `clr-draggable-ghost` directive inside of clrDraggable
-// directive. The directive is responsible for instantiating `clr-draggable-ghost` directive only during dragging so
-// that Angular Change Detection is prevented from running if a component or directive is placed inside of the
-// `clr-draggable-ghost` directive.
-class ClrIfDragged {
-    constructor(template, container, dragEventListener) {
-        this.template = template;
-        this.container = container;
-        this.dragEventListener = dragEventListener;
-        this.subscriptions = [];
-        if (!this.dragEventListener || !this.container) {
-            throw new Error('The *clrIfDragged directive can only be used inside of a clrDraggable directive.');
-        }
-        this.subscriptions.push(this.dragEventListener.dragStarted.subscribe(() => {
-            this.container.createEmbeddedView(this.template);
-        }));
-        this.subscriptions.push(this.dragEventListener.dragEnded.subscribe(() => {
-            this.container.clear();
-        }));
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
-    }
-}
-ClrIfDragged.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrIfDragged, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef, optional: true, skipSelf: true }, { token: DragEventListenerService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ClrIfDragged.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrIfDragged, selector: "[clrIfDragged]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrIfDragged, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clrIfDragged]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: DragEventListenerService, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-// This service class adds and removes the "in-drag" class to the document body element
-// through its public enter() and exit() methods.
-class GlobalDragModeService {
-    constructor(renderer) {
-        this.renderer = renderer;
-    }
-    enter() {
-        this.renderer.addClass(document.body, 'in-drag');
-    }
-    exit() {
-        this.renderer.removeClass(document.body, 'in-drag');
-    }
-}
-GlobalDragModeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: GlobalDragModeService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-GlobalDragModeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: GlobalDragModeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: GlobalDragModeService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
-
-/*
- * Copyright (c) 2016-2022 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 ClrDraggable {
-    constructor(el, dragEventListener, dragHandleRegistrar, viewContainerRef, cfr, injector, draggableSnapshot, globalDragMode) {
-        this.el = el;
-        this.dragEventListener = dragEventListener;
-        this.dragHandleRegistrar = dragHandleRegistrar;
-        this.viewContainerRef = viewContainerRef;
-        this.cfr = cfr;
-        this.injector = injector;
-        this.draggableSnapshot = draggableSnapshot;
-        this.globalDragMode = globalDragMode;
-        this.subscriptions = [];
-        this.dragOn = false;
-        this.dragStartEmitter = new EventEmitter();
-        this.dragMoveEmitter = new EventEmitter();
-        this.dragEndEmitter = new EventEmitter();
-        this.draggableEl = this.el.nativeElement;
-        this.componentFactory = this.cfr.resolveComponentFactory(ClrDraggableGhost);
-    }
-    set dataTransfer(value) {
-        this.dragEventListener.dragDataTransfer = value;
-    }
-    set group(value) {
-        this.dragEventListener.group = value;
-    }
-    set dragStartDelay(value) {
-        if (typeof value === 'number') {
-            this.dragEventListener.dragStartDelay = value;
-        }
-        else if (typeof value === 'string') {
-            this.dragEventListener.dragStartDelay = parseInt(value, 10) || 0;
-        }
-    }
-    createDefaultGhost(event) {
-        this.draggableSnapshot.capture(this.draggableEl, event);
-        // NOTE: The default ghost element will appear
-        // next to the clrDraggable in the DOM as a sibling element.
-        this.viewContainerRef.createComponent(this.componentFactory, 0, this.injector, [
-            [this.draggableEl.cloneNode(true)],
-        ]);
-    }
-    destroyDefaultGhost() {
-        this.viewContainerRef.clear();
-        this.draggableSnapshot.discard();
-    }
-    ngAfterContentInit() {
-        this.dragHandleRegistrar.defaultHandleEl = this.draggableEl;
-        this.subscriptions.push(this.dragEventListener.dragStarted.subscribe((event) => {
-            this.globalDragMode.enter();
-            this.dragOn = true;
-            if (!this.customGhost) {
-                this.createDefaultGhost(event);
-            }
-            this.dragStartEmitter.emit(new ClrDragEvent(event));
-        }));
-        this.subscriptions.push(this.dragEventListener.dragMoved.subscribe((event) => {
-            this.dragMoveEmitter.emit(new ClrDragEvent(event));
-        }));
-        this.subscriptions.push(this.dragEventListener.dragEnded.subscribe((event) => {
-            this.globalDragMode.exit();
-            this.dragOn = false;
-            if (!this.customGhost) {
-                this.destroyDefaultGhost();
-            }
-            this.dragEndEmitter.emit(new ClrDragEvent(event));
-        }));
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
-        this.dragEventListener.detachDragListeners();
-    }
-}
-ClrDraggable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDraggable, deps: [{ token: i0.ElementRef }, { token: DragEventListenerService }, { token: DragHandleRegistrarService }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: DraggableSnapshotService }, { token: GlobalDragModeService }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDraggable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDraggable, selector: "[clrDraggable]", inputs: { dataTransfer: ["clrDraggable", "dataTransfer"], group: ["clrGroup", "group"], dragStartDelay: ["clrDragStartDelay", "dragStartDelay"] }, outputs: { dragStartEmitter: "clrDragStart", dragMoveEmitter: "clrDragMove", dragEndEmitter: "clrDragEnd" }, host: { properties: { "class.draggable": "true", "class.being-dragged": "dragOn" } }, providers: [
-        DragEventListenerService,
-        DragHandleRegistrarService,
-        DraggableSnapshotService,
-        GlobalDragModeService,
-        DomAdapter,
-    ], queries: [{ propertyName: "customGhost", first: true, predicate: ClrIfDragged, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDraggable, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clrDraggable]',
-                    providers: [
-                        DragEventListenerService,
-                        DragHandleRegistrarService,
-                        DraggableSnapshotService,
-                        GlobalDragModeService,
-                        DomAdapter,
-                    ],
-                    host: { '[class.draggable]': 'true', '[class.being-dragged]': 'dragOn' },
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragEventListenerService }, { type: DragHandleRegistrarService }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: DraggableSnapshotService }, { type: GlobalDragModeService }]; }, propDecorators: { customGhost: [{
-                type: ContentChild,
-                args: [ClrIfDragged]
-            }], dataTransfer: [{
-                type: Input,
-                args: ['clrDraggable']
-            }], group: [{
-                type: Input,
-                args: ['clrGroup']
-            }], dragStartDelay: [{
-                type: Input,
-                args: ['clrDragStartDelay']
-            }], dragStartEmitter: [{
-                type: Output,
-                args: ['clrDragStart']
-            }], dragMoveEmitter: [{
-                type: Output,
-                args: ['clrDragMove']
-            }], dragEndEmitter: [{
-                type: Output,
-                args: ['clrDragEnd']
-            }] } });
-
-/*
- * Copyright (c) 2016-2022 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 ClrDroppable {
-    constructor(el, eventBus, domAdapter, renderer) {
-        this.el = el;
-        this.eventBus = eventBus;
-        this.domAdapter = domAdapter;
-        this.renderer = renderer;
-        this.isDraggableMatch = false;
-        this._isDraggableOver = false;
-        this._dropTolerance = { top: 0, right: 0, bottom: 0, left: 0 };
-        this.dragStartEmitter = new EventEmitter();
-        this.dragMoveEmitter = new EventEmitter();
-        this.dragEndEmitter = new EventEmitter();
-        this.dragLeaveEmitter = new EventEmitter();
-        this.dragEnterEmitter = new EventEmitter();
-        this.dropEmitter = new EventEmitter();
-        this.droppableEl = this.el.nativeElement;
-    }
-    set isDraggableOver(value) {
-        // We need to add/remove this draggable-over class via Renderer2
-        // because isDraggableOver is set outside of NgZone.
-        if (value) {
-            this.renderer.addClass(this.droppableEl, 'draggable-over');
-        }
-        else {
-            this.renderer.removeClass(this.droppableEl, 'draggable-over');
-        }
-        this._isDraggableOver = value;
-    }
-    set group(value) {
-        this._group = value;
-    }
-    dropToleranceGenerator(top = 0, right = top, bottom = top, left = right) {
-        return { top, right, bottom, left };
-    }
-    set dropTolerance(value) {
-        // If user provides an object here and wants to manipulate/update properties individually,
-        // the object must be immutable as we generate new object based user's given object.
-        if (typeof value === 'number') {
-            this._dropTolerance = this.dropToleranceGenerator(value);
-        }
-        else if (typeof value === 'string') {
-            const toleranceValues = value
-                .trim()
-                .split(/\s+/)
-                .map(tolerance => parseInt(tolerance, 10));
-            this._dropTolerance = this.dropToleranceGenerator(...toleranceValues);
-        }
-        else if (value) {
-            // The value could be passed in as {left: 20, top: 30 }
-            // In this case, the rest of the direction properties should be 0.
-            // That's why we initialize properties with 0 first, then override with user's given value.
-            this._dropTolerance = { ...this.dropToleranceGenerator(0), ...value };
-        }
-    }
-    unsubscribeFrom(subscription) {
-        if (subscription) {
-            subscription.unsubscribe();
-        }
-    }
-    checkGroupMatch(draggableGroup) {
-        // Both Draggable and Droppable have clrGroup input.
-        // The clrGroup input can be both a string key or array of string keys in Draggable and Droppable.
-        // It's not match if Draggable has no defined value assigned to clrGroup, but Droppable has a defined clrGroup.
-        if (!draggableGroup && this._group) {
-            return false;
-        }
-        // The same is true the other way round.
-        if (!this._group && draggableGroup) {
-            return false;
-        }
-        // It's match if both Draggable and Droppable have no assigned value for clrGroup.
-        if (!this._group && !draggableGroup) {
-            return true;
-        }
-        // It's match if both Draggable and Droppable have simple string keys that are matching.
-        // It's match if Draggable's simple clrGroup key is matching with one of the clrGroup keys of Droppable. The
-        // same is true the other way round.
-        // it's match if one of the clrGroup keys of Droppable is matching with one of the clrGroup keys of Draggable.
-        if (typeof draggableGroup === 'string') {
-            if (typeof this._group === 'string') {
-                return this._group === draggableGroup;
-            }
-            else {
-                return this._group.indexOf(draggableGroup) > -1;
-            }
-        }
-        else {
-            if (typeof this._group === 'string') {
-                return draggableGroup.indexOf(this._group) > -1;
-            }
-            else {
-                return this._group.some(groupKey => draggableGroup.indexOf(groupKey) > -1);
-            }
-        }
-    }
-    isInDropArea(point) {
-        if (!point) {
-            return false;
-        }
-        if (!this.clientRect) {
-            this.clientRect = this.domAdapter.clientRect(this.droppableEl);
-        }
-        if (point.pageX >= this.clientRect.left - this._dropTolerance.left &&
-            point.pageX <= this.clientRect.right + this._dropTolerance.right &&
-            point.pageY >= this.clientRect.top - this._dropTolerance.top &&
-            point.pageY <= this.clientRect.bottom + this._dropTolerance.bottom) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    onDragStart(dragStartEvent) {
-        // Check draggable and droppable have a matching group key.
-        this.isDraggableMatch = this.checkGroupMatch(dragStartEvent.group);
-        // Subscribe to dragMoved and dragEnded only if draggable and droppable have a matching group key.
-        if (this.isDraggableMatch) {
-            this.dragStartEmitter.emit(new ClrDragEvent(dragStartEvent));
-            this.dragMoveSubscription = this.eventBus.dragMoved.subscribe((dragMoveEvent) => {
-                this.onDragMove(dragMoveEvent);
-            });
-            this.dragEndSubscription = this.eventBus.dragEnded.subscribe((dragEndEvent) => {
-                this.onDragEnd(dragEndEvent);
-            });
-        }
-    }
-    onDragMove(dragMoveEvent) {
-        const isInDropArea = this.isInDropArea(dragMoveEvent.dropPointPosition);
-        if (!this._isDraggableOver && isInDropArea) {
-            this.isDraggableOver = true;
-            const dragEnterEvent = { ...dragMoveEvent, type: DragEventType.DRAG_ENTER };
-            this.eventBus.broadcast(dragEnterEvent);
-            this.dragEnterEmitter.emit(new ClrDragEvent(dragEnterEvent));
-        }
-        else if (this._isDraggableOver && !isInDropArea) {
-            this.isDraggableOver = false;
-            const dragLeaveEvent = { ...dragMoveEvent, type: DragEventType.DRAG_LEAVE };
-            this.eventBus.broadcast(dragLeaveEvent);
-            this.dragLeaveEmitter.emit(new ClrDragEvent(dragLeaveEvent));
-        }
-        this.dragMoveEmitter.emit(new ClrDragEvent(dragMoveEvent));
-    }
-    onDragEnd(dragEndEvent) {
-        if (this._isDraggableOver) {
-            if (dragEndEvent.ghostElement) {
-                // By this point, the draggable ghost component is destroyed,
-                // but the element would be active until its animation completes.
-                // As such, once the ghost is dropped over, we will give it "dropped" class.
-                // This process cannot be done in the ghost component
-                // because any subscription to the drop event is ineffective or invalid
-                // as the component had been already destroyed.
-                this.renderer.addClass(dragEndEvent.ghostElement, 'dropped');
-            }
-            const dropEvent = { ...dragEndEvent, type: DragEventType.DROP };
-            this.eventBus.broadcast(dropEvent);
-            this.dropEmitter.emit(new ClrDragEvent(dropEvent));
-            this.isDraggableOver = false;
-        }
-        this.dragEndEmitter.emit(new ClrDragEvent(dragEndEvent));
-        this.unsubscribeFrom(this.dragMoveSubscription);
-        this.unsubscribeFrom(this.dragEndSubscription);
-        this.isDraggableMatch = false;
-        delete this.clientRect;
+        return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
     }
-    ngOnInit() {
-        this.dragStartSubscription = this.eventBus.dragStarted.subscribe((dragStartEvent) => {
-            this.onDragStart(dragStartEvent);
-        });
+    animationDone() {
+        // A "safe" auto-update of the height ensuring basic OOTB user experience .
+        // Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
+        // For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.
+        this.updateStartHeight();
     }
-    ngOnDestroy() {
-        this.unsubscribeFrom(this.dragStartSubscription);
-        this.unsubscribeFrom(this.dragMoveSubscription);
-        this.unsubscribeFrom(this.dragEndSubscription);
+    updateStartHeight() {
+        this.startHeight = this.domAdapter.computedHeight(this.element.nativeElement) || 0;
     }
 }
-ClrDroppable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDroppable, deps: [{ token: i0.ElementRef }, { token: DragAndDropEventBusService }, { token: DomAdapter }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDroppable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDroppable, selector: "[clrDroppable]", inputs: { group: ["clrGroup", "group"], dropTolerance: ["clrDropTolerance", "dropTolerance"] }, outputs: { dragStartEmitter: "clrDragStart", dragMoveEmitter: "clrDragMove", dragEndEmitter: "clrDragEnd", dragLeaveEmitter: "clrDragLeave", dragEnterEmitter: "clrDragEnter", dropEmitter: "clrDrop" }, host: { properties: { "class.droppable": "true", "class.draggable-match": "isDraggableMatch" } }, providers: [DomAdapter], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDroppable, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clrDroppable]',
-                    providers: [DomAdapter],
-                    host: { '[class.droppable]': 'true', '[class.draggable-match]': 'isDraggableMatch' },
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragAndDropEventBusService }, { type: DomAdapter }, { type: i0.Renderer2 }]; }, propDecorators: { group: [{
-                type: Input,
-                args: ['clrGroup']
-            }], dropTolerance: [{
-                type: Input,
-                args: ['clrDropTolerance']
-            }], dragStartEmitter: [{
-                type: Output,
-                args: ['clrDragStart']
-            }], dragMoveEmitter: [{
-                type: Output,
-                args: ['clrDragMove']
-            }], dragEndEmitter: [{
-                type: Output,
-                args: ['clrDragEnd']
-            }], dragLeaveEmitter: [{
-                type: Output,
-                args: ['clrDragLeave']
-            }], dragEnterEmitter: [{
-                type: Output,
-                args: ['clrDragEnter']
-            }], dropEmitter: [{
-                type: Output,
-                args: ['clrDrop']
+ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
+ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], animations: [
+        trigger('expandAnimation', [
+            transition('true <=> false', [
+                style({ height: '{{startHeight}}px', overflow: 'hidden' }),
+                animate('0.2s ease-in-out', style({ height: '*' })),
+            ]),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimation, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-expandable-animation', template: `<ng-content></ng-content>`, animations: [
+                        trigger('expandAnimation', [
+                            transition('true <=> false', [
+                                style({ height: '{{startHeight}}px', overflow: 'hidden' }),
+                                animate('0.2s ease-in-out', style({ height: '*' })),
+                            ]),
+                        ]),
+                    ], providers: [DomAdapter], styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }]; }, propDecorators: { clrExpandTrigger: [{
+                type: Input
+            }], expandAnimation: [{
+                type: HostBinding,
+                args: ['@expandAnimation']
+            }], animationDone: [{
+                type: HostListener,
+                args: ['@expandAnimation.done']
             }] } });
 
 /*
@@ -11372,32 +10275,58 @@ 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.
  */
-const CLR_DRAG_AND_DROP_DIRECTIVES = [
-    ClrDraggable,
-    ClrDroppable,
-    ClrIfDragged,
-    ClrDragHandle,
-    ClrDraggableGhost,
-];
-class ClrDragAndDropModule {
-}
-ClrDragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrDragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ClrDragAndDropModule, declarations: [ClrDraggable,
-        ClrDroppable,
-        ClrIfDragged,
-        ClrDragHandle,
-        ClrDraggableGhost], imports: [CommonModule], exports: [ClrDraggable,
-        ClrDroppable,
-        ClrIfDragged,
-        ClrDragHandle,
-        ClrDraggableGhost] });
-ClrDragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDragAndDropModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDragAndDropModule, decorators: [{
+const EXPANDABLE_ANIMATION_DIRECTIVES = [ClrExpandableAnimation];
+
+/*
+ * Copyright (c) 2016-2022 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 ClrExpandableAnimationModule {
+}
+ClrExpandableAnimationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrExpandableAnimationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, declarations: [ClrExpandableAnimation], imports: [CommonModule], exports: [ClrExpandableAnimation] });
+ClrExpandableAnimationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrExpandableAnimationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [CLR_DRAG_AND_DROP_DIRECTIVES],
-                    exports: [CLR_DRAG_AND_DROP_DIRECTIVES],
+                    declarations: [EXPANDABLE_ANIMATION_DIRECTIVES],
+                    exports: [EXPANDABLE_ANIMATION_DIRECTIVES],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2022 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.
+ */
+/**
+ * This is just a copy of CdkDrag so it can be used independent of the rest of the CdkDragDropModule.
+ */
+class CdkDragModule_CdkDrag extends CdkDrag {
+}
+CdkDragModule_CdkDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkDragModule_CdkDrag, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkDragModule_CdkDrag.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: CdkDragModule_CdkDrag, selector: "[cdkDrag]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkDragModule_CdkDrag, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkDrag]',
+                }]
+        }] });
+/**
+ * This module allows us to avoid importing all of CdkDragDropModule which results in a smaller application bundle.
+ */
+class CdkDragModule {
+}
+CdkDragModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkDragModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CdkDragModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: CdkDragModule, declarations: [CdkDragModule_CdkDrag], exports: [CdkDragModule_CdkDrag] });
+CdkDragModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkDragModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: CdkDragModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CdkDragModule_CdkDrag],
+                    exports: [CdkDragModule_CdkDrag],
                 }]
         }] });
 
@@ -12054,7 +10983,7 @@ ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
     <div
       class="datagrid-filter"
       [id]="popoverId"
-      clrFocusTrap
+      cdkTrapFocus
       *clrPopoverContent="open; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
       role="dialog"
       [attr.aria-label]="commonStrings.keys.datagridFilterDialogAriaLabel"
@@ -12067,7 +10996,7 @@ ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
 
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { 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: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridFilter, decorators: [{
             type: Component,
             args: [{
@@ -12097,7 +11026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
     <div
       class="datagrid-filter"
       [id]="popoverId"
-      clrFocusTrap
+      cdkTrapFocus
       *clrPopoverContent="open; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
       role="dialog"
       [attr.aria-label]="commonStrings.keys.datagridFilterDialogAriaLabel"
@@ -13252,8 +12181,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
 // Default resize length on each keyboard move event
 const KEYBOARD_RESIZE_LENGTH = 12;
 class ClrDatagridColumnSeparator {
-    // Every column draggable separator should have its own unique ID
-    // in order to not conflict with other draggables/droppables.
     constructor(columnResizerService, renderer, ngZone, tableSizeService, commonString, document) {
         this.columnResizerService = columnResizerService;
         this.renderer = renderer;
@@ -13301,6 +12228,7 @@ class ClrDatagridColumnSeparator {
         this.columnResizerService.endResize();
         this.renderer.setStyle(this.resizeTrackerEl, 'display', 'none');
         this.renderer.setStyle(this.resizeTrackerEl, 'transform', `translateX(0px)`);
+        this.renderer.setStyle(this.columnHandleEl, 'transform', `translateX(0px)`);
         this.renderer.setStyle(this.document.body, 'cursor', 'auto');
     }
     showTrackerOnFirstKeyDown(event) {
@@ -13312,9 +12240,11 @@ class ClrDatagridColumnSeparator {
     }
     moveTrackerOnKeyDown(event) {
         if (this.isArrowLeftKeyEvent(event)) {
+            event.stopPropagation();
             this.moveTracker(this.columnResizerService.resizedBy - KEYBOARD_RESIZE_LENGTH);
         }
         else if (this.isArrowRightKeyEvent(event)) {
+            event.stopPropagation();
             this.moveTracker(this.columnResizerService.resizedBy + KEYBOARD_RESIZE_LENGTH);
         }
     }
@@ -13354,18 +12284,18 @@ ClrDatagridColumnSeparator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
       class="datagrid-column-handle"
       [attr.aria-label]="commonString.keys.columnSeparatorAriaLabel"
       [attr.aria-describedby]="descriptionId"
-      clrDraggable
-      [clrGroup]="columnSeparatorId"
-      (clrDragStart)="showTracker()"
-      (clrDragMove)="moveTracker($event.dragPosition.moveX)"
-      (clrDragEnd)="hideTracker()"
+      cdkDrag
+      cdkDragLockAxis="x"
+      (cdkDragStarted)="showTracker()"
+      (cdkDragMoved)="moveTracker($event.distance.x)"
+      (cdkDragEnded)="hideTracker(); $event.source._dragRef.reset()"
       #columnHandle
     ></button>
     <span class="clr-sr-only" [attr.id]="descriptionId">
       {{ commonString.keys.columnSeparatorDescription }}
     </span>
     <div class="datagrid-column-resize-tracker" #resizeTracker></div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ClrDraggable, selector: "[clrDraggable]", inputs: ["clrDraggable", "clrGroup", "clrDragStartDelay"], outputs: ["clrDragStart", "clrDragMove", "clrDragEnd"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkDragModule_CdkDrag, selector: "[cdkDrag]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnSeparator, decorators: [{
             type: Component,
             args: [{
@@ -13376,11 +12306,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
       class="datagrid-column-handle"
       [attr.aria-label]="commonString.keys.columnSeparatorAriaLabel"
       [attr.aria-describedby]="descriptionId"
-      clrDraggable
-      [clrGroup]="columnSeparatorId"
-      (clrDragStart)="showTracker()"
-      (clrDragMove)="moveTracker($event.dragPosition.moveX)"
-      (clrDragEnd)="hideTracker()"
+      cdkDrag
+      cdkDragLockAxis="x"
+      (cdkDragStarted)="showTracker()"
+      (cdkDragMoved)="moveTracker($event.distance.x)"
+      (cdkDragEnded)="hideTracker(); $event.source._dragRef.reset()"
       #columnHandle
     ></button>
     <span class="clr-sr-only" [attr.id]="descriptionId">
@@ -13427,18 +12357,6 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
          * via the [clrDgColType] input by setting it to 'string' or 'number'.
          */
         this._colType = 'string';
-        // deprecated: to be removed - START
-        /**
-         * Indicates if the column is currently sorted
-         *
-         * @deprecated This will be removed soon, in favor of the sortOrder mechanism
-         */
-        this._sorted = false;
-        /**
-         * @deprecated This will be removed soon, in favor of the sortOrder mechanism
-         */
-        this.sortedChange = new EventEmitter();
-        // deprecated: to be removed - END
         /**
          * Indicates how the column is currently sorted
          */
@@ -13474,16 +12392,8 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
             if (this.sortOrder !== ClrDatagridSortOrder.UNSORTED && sort.comparator !== this._sortBy) {
                 this._sortOrder = ClrDatagridSortOrder.UNSORTED;
                 this.sortOrderChange.emit(this._sortOrder);
-                // removes the sortIcon when column becomes unsorted
-                this.sortIcon = null;
                 this._sortDirection = null;
             }
-            // deprecated: to be removed - START
-            if (this.sorted && sort.comparator !== this._sortBy) {
-                this._sorted = false;
-                this.sortedChange.emit(false);
-            }
-            // deprecated: to be removed - END
         });
     }
     get colType() {
@@ -13560,21 +12470,6 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
     get sortable() {
         return !!this._sortBy;
     }
-    get sorted() {
-        return this._sorted;
-    }
-    /**
-     * @deprecated This will be removed soon, in favor of the sortOrder mechanism
-     */
-    set sorted(value) {
-        if (!value && this.sorted) {
-            this._sorted = false;
-            this._sort.clear();
-        }
-        else if (value && !this.sorted) {
-            this.sort();
-        }
-    }
     get sortOrder() {
         return this._sortOrder;
     }
@@ -13626,12 +12521,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         this._sortOrder = this._sort.reverse ? ClrDatagridSortOrder.DESC : ClrDatagridSortOrder.ASC;
         // Sets the correct icon for current sort order
         this._sortDirection = this._sortOrder === ClrDatagridSortOrder.DESC ? 'down' : 'up';
-        this.sortIcon = this._sortOrder === ClrDatagridSortOrder.DESC ? 'arrow down' : 'arrow'; // Backward compatibility
         this.sortOrderChange.emit(this._sortOrder);
-        // deprecated: to be removed - START
-        this._sorted = true;
-        this.sortedChange.emit(true);
-        // deprecated: to be removed - END
     }
     set projectedFilter(custom) {
         if (custom) {
@@ -13699,7 +12589,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
     }
 }
 ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridColumn, selector: "clr-dg-column", inputs: { colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sorted: ["clrDgSorted", "sorted"], sortOrder: ["clrDgSortOrder", "sortOrder"], filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortedChange: "clrDgSortedChange", sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, providers: [ClrPopoverPositionService, ClrPopoverEventsService, ClrPopoverToggleService], queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridColumn, selector: "clr-dg-column", inputs: { colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sortOrder: ["clrDgSortOrder", "sortOrder"], filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, providers: [ClrPopoverPositionService, ClrPopoverEventsService, ClrPopoverToggleService], queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <div class="datagrid-column-flex">
       <button class="datagrid-column-title" *ngIf="sortable" (click)="sort()" type="button">
         <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
@@ -13802,12 +12692,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             }], sortBy: [{
                 type: Input,
                 args: ['clrDgSortBy']
-            }], sorted: [{
-                type: Input,
-                args: ['clrDgSorted']
-            }], sortedChange: [{
-                type: Output,
-                args: ['clrDgSortedChange']
             }], sortOrder: [{
                 type: Input,
                 args: ['clrDgSortOrder']
@@ -15909,13 +14793,13 @@ ClrDatagridActionOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
       [attr.aria-hidden]="!open"
       [attr.id]="popoverId"
       clrKeyFocus
-      clrFocusTrap
+      cdkTrapFocus
       (click)="closeOverflowContent($event)"
       *clrPopoverContent="open; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
     >
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "component", type: ClrKeyFocus, selector: "[clrKeyFocus]", inputs: ["clrDirection", "clrFocusOnLoad", "clrKeyFocus"], outputs: ["clrFocusChange"] }, { kind: "directive", type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "component", type: ClrKeyFocus, selector: "[clrKeyFocus]", inputs: ["clrDirection", "clrFocusOnLoad", "clrKeyFocus"], outputs: ["clrFocusChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridActionOverflow, decorators: [{
             type: Component,
             args: [{
@@ -15943,7 +14827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
       [attr.aria-hidden]="!open"
       [attr.id]="popoverId"
       clrKeyFocus
-      clrFocusTrap
+      cdkTrapFocus
       (click)="closeOverflowContent($event)"
       *clrPopoverContent="open; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
     >
@@ -16147,7 +15031,7 @@ ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
       role="dialog"
       [attr.aria-label]="commonStrings.keys.showColumnsMenuDescription"
       [id]="popoverId"
-      clrFocusTrap
+      cdkTrapFocus
       *clrPopoverContent="openState; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
     >
       <div class="switch-header">
@@ -16189,7 +15073,7 @@ ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </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: 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: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { 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.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggle, decorators: [{
             type: Component,
             args: [{
@@ -16212,7 +15096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
       role="dialog"
       [attr.aria-label]="commonStrings.keys.showColumnsMenuDescription"
       [id]="popoverId"
-      clrFocusTrap
+      cdkTrapFocus
       *clrPopoverContent="openState; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
     >
       <div class="switch-header">
@@ -16341,7 +15225,8 @@ class ClrDatagridDetail {
 ClrDatagridDetail.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridDetail, deps: [{ token: DetailService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridDetail, selector: "clr-dg-detail", host: { listeners: { "document:keyup.esc": "closeCheck()" }, properties: { "class.datagrid-detail-pane": "true" } }, queries: [{ propertyName: "header", first: true, predicate: ClrDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
     <div
-      [clrFocusTrap]="{ strict: false }"
+      cdkTrapFocus
+      [cdkTrapFocusAutoCapture]="true"
       class="datagrid-detail-pane-content"
       *ngIf="detailService.isOpen"
       role="dialog"
@@ -16353,7 +15238,7 @@ ClrDatagridDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
       <ng-content></ng-content>
       <div class="clr-sr-only">{{ commonStrings.keys.detailPaneEnd }}</div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridDetail, decorators: [{
             type: Component,
             args: [{
@@ -16361,11 +15246,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                     host: {
                         '[class.datagrid-detail-pane]': 'true',
                     },
-                    // We put the *ngIf on the clrFocusTrap so it doesn't always exist on the page
+                    // We put the *ngIf on the cdkTrapFocus so it doesn't always exist on the page
                     // have to test for presence of header for aria-describedby because it was causing unit tests to crash
                     template: `
     <div
-      [clrFocusTrap]="{ strict: false }"
+      cdkTrapFocus
+      [cdkTrapFocusAutoCapture]="true"
       class="datagrid-detail-pane-content"
       *ngIf="detailService.isOpen"
       role="dialog"
@@ -16491,256 +15377,28 @@ function fade(opacity = 1) {
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-function fadeSlide(direction) {
-    let transform = null;
-    if (direction === 'up') {
-        transform = 'translate(0, 25%)';
-    }
-    else if (direction === 'down') {
-        transform = 'translate(0, -25%)';
-    }
-    else if (direction === 'left') {
-        transform = 'translate(25%, 0)';
-    }
-    else if (direction === 'right') {
-        transform = 'translate(-25%, 0)';
-    }
-    else {
-        throw new Error('Unknown direction ' + direction + ' for slide animation.');
-    }
-    return [
-        transition('void => *', [style({ opacity: 0, transform: transform }), animate(defaultAnimationTiming)]),
-        transition('* => void', [animate(defaultAnimationTiming, style({ opacity: 0, transform: transform }))]),
-    ];
-}
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-function slide(direction) {
-    let transform = null;
-    if (direction === 'up') {
-        transform = 'translate(0, 25%)';
-    }
-    else if (direction === 'down') {
-        transform = 'translate(0, -25%)';
-    }
-    else if (direction === 'left') {
-        transform = 'translate(25%, 0)';
-    }
-    else if (direction === 'right') {
-        transform = 'translate(-25%, 0)';
-    }
-    else {
-        throw new Error('Unknown direction ' + direction + ' for slide animation.');
-    }
-    return [
-        transition('void => *', [style({ transform: transform }), animate(defaultAnimationTiming)]),
-        transition('* => void', [animate(defaultAnimationTiming, style({ transform: transform }))]),
-    ];
-}
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-
-/*
- * Copyright (c) 2016-2022 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.
- */
-var ClrAriaLivePoliteness;
-(function (ClrAriaLivePoliteness) {
-    ClrAriaLivePoliteness["off"] = "off";
-    ClrAriaLivePoliteness["polite"] = "polite";
-    ClrAriaLivePoliteness["assertive"] = "assertive";
-})(ClrAriaLivePoliteness || (ClrAriaLivePoliteness = {}));
-/**
- * Time in milliseconds before inserting the content into the container
- */
-const ARIA_LIVE_TICK = 100;
-/**
- * @deprecated
- *
- * -- ClrAriaLiveService is deprecated in 5.0 to be removed in 6.0 --
- * Please consider using the LiveAnnouncer in the Angular Material CDK
- * if your project needs this functionality.
- * More info: https://material.angular.io/cdk/a11y/overview#example-1
- *
- * This service handle `aria-live` accessibility attribute. The issue is that you need
- * to have the DOM Element with attribute `aria-live` before you could insert content
- * and SR (Screen Reader) pick the change and announce it.
- *
- * ```typescript
- * import { ClrAriaLiveService } from 'src/clr-angular/utils/a11y/aria-live.service';
- *
- * @Component({
- * selector: 'clr-demo-component',
- * providers: [ClrAriaLiveService],
- * template: `
- *   <ng-content></ng-content>
- * `,
- * })
- * export class DemoComponent {
- *  constructor(ariaLiveService: ClrAriaLiveService) {}
- *
- *  public actionThatWillTriggerChange() {
- *    this.ariaLiveService.announce('message that I want to announce to SR');
- *  }
- * }
- * ```
- *
- */
-class ClrAriaLiveService {
-    constructor(ngZone, _document, platformId) {
-        this.ngZone = ngZone;
-        this.platformId = platformId;
-        this._id = `clr-aria-live-element-${uniqueIdFactory()}`;
-        this.document = _document;
-    }
-    /**
-     * get access to the internal HTML `id` that gonna be used for the AriaLive container.
-     * @return ID of the DOM Element as string.
-     */
-    get id() {
-        return this._id;
-    }
-    /**
-     * Append text content inside the AriaLive Container. This method will check if the
-     * DOM Element is existing if not it will create one for us and the will apply the text.
-     *
-     * ```typescript
-     * this.ariaLiveService.announce(this.el.nativeElement);
-     * // or
-     * this.ariaLiveService.announce('Message to announce to SR');
-     * ```
-     *
-     * @remark
-     * When second argument is `AriaLivePoliteness.off` we won't create aria container or update it.
-     * The reason for that is that we don't want to do additional work if the SR will ignore it.
-     *
-     * @param message - This could be simple string or HTMLElement
-     * @param politeness - 'polite', 'assertive' or 'off'
-     */
-    announce(message, politeness = ClrAriaLivePoliteness.polite) {
-        if (politeness === ClrAriaLivePoliteness.off) {
-            return;
-        }
-        if (!this.ariaLiveElement && isPlatformBrowser(this.platformId)) {
-            this.ariaLiveElement = this.createContainer();
-        }
-        message = typeof message !== 'string' && isPlatformBrowser(this.platformId) ? message.textContent : message;
-        // when there is no message do NOTHING!
-        if (!message) {
-            return;
-        }
-        this.ariaLiveElement.setAttribute('aria-live', politeness);
-        // This 100ms timeout is necessary for some browser + screen-reader combinations:
-        // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.
-        // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
-        //   second time without clearing and then using a non-zero delay.
-        // (using JAWS 17 at time of this writing).
-        this.ngZone.runOutsideAngular(() => {
-            // This clearTimeout will stop all older messages from announcing
-            // in the case where the messages are comming too fast we gonna try to append only
-            // the last one. That's what the SR will try to do anyway.
-            clearTimeout(this.previousTimeout);
-            this.previousTimeout = setTimeout(() => {
-                this.ariaLiveElement.textContent = message;
-            }, ARIA_LIVE_TICK);
-        });
-    }
-    /**
-     * onDestroy life cycle - must stop all active setTimeouts and remove the AriaLive
-     * container from the document.
-     */
-    ngOnDestroy() {
-        clearTimeout(this.previousTimeout);
-        if (isPlatformBrowser(this.platformId) && this.ariaLiveElement) {
-            this.document.body.removeChild(this.ariaLiveElement);
-            this.ariaLiveElement = null;
-        }
-    }
-    /**
-     * Create AriaLive DOM element as a last child of the document.
-     * After the element is created, we gonna apply Clarity class to hide it from
-     * the screen and set the `aria-live` politness.
-     *
-     * `clr-sr-only` is the CSS class that is used to hide the element from the screen.
-     *
-     * @remark
-     * Calling this method multiple times will create multiple DOM Elements, that
-     * won't be tracked and will be GC after the service is destroyed.
-     *
-     * @return AriaLive container as HTMLElement
-     *
-     */
-    createContainer() {
-        const ariaLiveElement = this.document.createElement('div');
-        ariaLiveElement.setAttribute('id', this.id);
-        // Use clarity screen reader class to hide the dom element
-        // and fix the scrollbar shake
-        ariaLiveElement.classList.add('clr-sr-only');
-        ariaLiveElement.setAttribute('aria-atomic', 'true');
-        ariaLiveElement.setAttribute('aria-live', ClrAriaLivePoliteness.polite);
-        this.document.body.appendChild(ariaLiveElement);
-        return ariaLiveElement;
-    }
-}
-ClrAriaLiveService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAriaLiveService, deps: [{ token: i0.NgZone }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-ClrAriaLiveService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAriaLiveService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAriaLiveService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }]; } });
+function fadeSlide(direction) {
+    let transform = null;
+    if (direction === 'up') {
+        transform = 'translate(0, 25%)';
+    }
+    else if (direction === 'down') {
+        transform = 'translate(0, -25%)';
+    }
+    else if (direction === 'left') {
+        transform = 'translate(25%, 0)';
+    }
+    else if (direction === 'right') {
+        transform = 'translate(-25%, 0)';
+    }
+    else {
+        throw new Error('Unknown direction ' + direction + ' for slide animation.');
+    }
+    return [
+        transition('void => *', [style({ opacity: 0, transform: transform }), animate(defaultAnimationTiming)]),
+        transition('* => void', [animate(defaultAnimationTiming, style({ opacity: 0, transform: transform }))]),
+    ];
+}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -16753,6 +15411,28 @@ 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.
  */
+function slide(direction) {
+    let transform = null;
+    if (direction === 'up') {
+        transform = 'translate(0, 25%)';
+    }
+    else if (direction === 'down') {
+        transform = 'translate(0, -25%)';
+    }
+    else if (direction === 'left') {
+        transform = 'translate(25%, 0)';
+    }
+    else if (direction === 'right') {
+        transform = 'translate(-25%, 0)';
+    }
+    else {
+        throw new Error('Unknown direction ' + direction + ' for slide animation.');
+    }
+    return [
+        transition('void => *', [style({ transform: transform }), animate(defaultAnimationTiming)]),
+        transition('* => void', [animate(defaultAnimationTiming, style({ transform: transform }))]),
+    ];
+}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -16795,95 +15475,18 @@ 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.
  */
-class ForTypeAheadProvider {
-    constructor() {
-        this._textContentChange = new Subject();
-    }
-    get textContentChange() {
-        return this._textContentChange.asObservable();
-    }
-    get textContent() {
-        return this._textContent;
-    }
-    set textContent(value) {
-        this._textContent = value;
-        this._textContentChange.next(value);
-    }
-}
-ForTypeAheadProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ForTypeAheadProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ForTypeAheadProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ForTypeAheadProvider });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ForTypeAheadProvider, decorators: [{
-            type: Injectable
-        }] });
 
 /*
  * Copyright (c) 2016-2022 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.
  */
-// The purpose of this directive is to provide the text content of its host element
-// or text content that's passed to its input.
-// This directive must stay optional. So do not embed this directive in a component module by default.
-// If users need to use this directive, they should import its module on their side.
-class ClrForTypeAhead {
-    constructor(el, forTypeAheadProvider) {
-        this.el = el;
-        this.forTypeAheadProvider = forTypeAheadProvider;
-    }
-    trimAndLowerCase(value) {
-        return value.toLocaleLowerCase().trim();
-    }
-    get content() {
-        return this._content;
-    }
-    set content(value) {
-        if (value) {
-            this._content = this.trimAndLowerCase(value);
-            this.forTypeAheadProvider.textContent = this._content;
-        }
-        else {
-            this._content = this.trimAndLowerCase(this.el.nativeElement.textContent);
-            this.forTypeAheadProvider.textContent = this._content;
-        }
-    }
-    ngOnInit() {
-        if (!this._content) {
-            this._content = this.trimAndLowerCase(this.el.nativeElement.textContent);
-            this.forTypeAheadProvider.textContent = this._content;
-        }
-    }
-}
-ClrForTypeAhead.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrForTypeAhead, deps: [{ token: i0.ElementRef }, { token: ForTypeAheadProvider }], target: i0.ɵɵFactoryTarget.Directive });
-ClrForTypeAhead.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrForTypeAhead, selector: "[clrForTypeAhead]", inputs: { content: ["clrForTypeAhead", "content"] }, providers: [ForTypeAheadProvider], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrForTypeAhead, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [ForTypeAheadProvider],
-                    selector: '[clrForTypeAhead]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ForTypeAheadProvider }]; }, propDecorators: { content: [{
-                type: Input,
-                args: ['clrForTypeAhead']
-            }] } });
 
 /*
  * Copyright (c) 2016-2022 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 ClrForTypeAheadModule {
-}
-ClrForTypeAheadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrForTypeAheadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrForTypeAheadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ClrForTypeAheadModule, declarations: [ClrForTypeAhead], imports: [CommonModule], exports: [ClrForTypeAhead] });
-ClrForTypeAheadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrForTypeAheadModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrForTypeAheadModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [ClrForTypeAhead],
-                    exports: [ClrForTypeAhead],
-                }]
-        }] });
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -17314,9 +15917,14 @@ class ClrDatagridPagination {
         }
         return middlePages;
     }
+    verifyCurrentPage(event) {
+        const parsed = parseInt(event.target.value, 10);
+        if (parsed !== this.page.current) {
+            event.target.value = this.page.current;
+        }
+    }
     /**
-     * We only update the pagination's current page on blur of the input field, or
-     * when they press enter.
+     * We only update the pagination's current page on enter.
      */
     updateCurrentPage(event) {
         const parsed = parseInt(event.target.value, 10);
@@ -17377,7 +15985,7 @@ ClrDatagridPagination.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
           [size]="page.last.toString().length"
           [value]="page.current"
           (keydown.enter)="updateCurrentPage($event)"
-          (blur)="updateCurrentPage($event)"
+          (blur)="verifyCurrentPage($event)"
           [attr.aria-label]="commonStrings.keys.currentPage"
         />
         <ng-template #readOnly>
@@ -17477,7 +16085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
           [size]="page.last.toString().length"
           [value]="page.current"
           (keydown.enter)="updateCurrentPage($event)"
-          (blur)="updateCurrentPage($event)"
+          (blur)="verifyCurrentPage($event)"
           [attr.aria-label]="commonStrings.keys.currentPage"
         />
         <ng-template #readOnly>
@@ -17598,20 +16206,20 @@ class ClrDatagridRowDetail {
     }
     get beginningOfExpandableContentAriaText() {
         return (this._beginningOfExpandableContentAriaText ||
-            `${this.commonStrings.keys.dategridExpandableBeginningOf || this.commonStrings.keys.datagridExpandableBeginningOf} 
-      ${this.commonStrings.keys.dategridExpandableRowContent || this.commonStrings.keys.datagridExpandableRowContent}`);
+            `${this.commonStrings.keys.datagridExpandableBeginningOf} 
+      ${this.commonStrings.keys.datagridExpandableRowContent}`);
     }
     get endOfExpandableContentAriaText() {
         return (this._endOfExpandableContentAriaText ||
-            `${this.commonStrings.keys.dategridExpandableEndOf || this.commonStrings.keys.datagridExpandableEndOf} 
-      ${this.commonStrings.keys.dategridExpandableRowContent || this.commonStrings.keys.datagridExpandableRowContent}`);
+            `${this.commonStrings.keys.datagridExpandableEndOf} 
+      ${this.commonStrings.keys.datagridExpandableRowContent}`);
     }
 }
 ClrDatagridRowDetail.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridRowDetail, deps: [{ token: Selection }, { token: RowActionService }, { token: DatagridIfExpandService }, { token: ExpandableRowsCount }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridRowDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridRowDetail, selector: "clr-dg-row-detail", inputs: { replace: ["clrDgReplace", "replace"], _beginningOfExpandableContentAriaText: ["clrRowDetailBeginningAriaText", "_beginningOfExpandableContentAriaText"], _endOfExpandableContentAriaText: ["clrRowDetailEndAriaText", "_endOfExpandableContentAriaText"] }, host: { attributes: { "role": "gridcell" }, properties: { "class.datagrid-row-flex": "true", "class.datagrid-row-detail": "true", "class.datagrid-container": "cells.length === 0", "attr.id": "expand.expandableId" } }, queries: [{ propertyName: "cells", predicate: ClrDatagridCell }], ngImport: i0, template: `
     <div class="clr-sr-only">
       {{ beginningOfExpandableContentAriaText }}
-      {{ commonStrings.keys.dategridExpandableRowsHelperText || commonStrings.keys.datagridExpandableRowsHelperText }}
+      {{ commonStrings.keys.datagridExpandableRowsHelperText }}
     </div>
     <ng-content></ng-content>
     <div class="clr-sr-only">{{ endOfExpandableContentAriaText }}</div>
@@ -17620,11 +16228,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             type: Component,
             args: [{
                     selector: 'clr-dg-row-detail',
-                    // TODO: @deprecated - dategrid* keys are deprecated. Remove in v14.
                     template: `
     <div class="clr-sr-only">
       {{ beginningOfExpandableContentAriaText }}
-      {{ commonStrings.keys.dategridExpandableRowsHelperText || commonStrings.keys.datagridExpandableRowsHelperText }}
+      {{ commonStrings.keys.datagridExpandableRowsHelperText }}
     </div>
     <ng-content></ng-content>
     <div class="clr-sr-only">{{ endOfExpandableContentAriaText }}</div>
@@ -18246,6 +16853,8 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         // Built-in shortcuts
         DatagridStringFilter,
         DatagridNumericFilter], imports: [CommonModule,
+        CdkDragModule,
+        CdkTrapFocusModule,
         ClrIconModule,
         ClrFormsModule,
         FormsModule,
@@ -18253,11 +16862,9 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ClrConditionalModule,
         ClrOutsideClickModule,
         ClrExpandableAnimationModule,
-        ClrDragAndDropModule,
         ClrSpinnerModule,
         ClrPopoverModuleNext,
         ClrKeyFocusModule,
-        ClrFocusTrapModule,
         ClrFocusOnViewInitModule], exports: [
         // Core
         ClrDatagrid,
@@ -18300,6 +16907,8 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         DatagridStringFilter,
         DatagridNumericFilter] });
 ClrDatagridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridModule, imports: [CommonModule,
+        CdkDragModule,
+        CdkTrapFocusModule,
         ClrIconModule,
         ClrFormsModule,
         FormsModule,
@@ -18307,17 +16916,17 @@ ClrDatagridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
         ClrConditionalModule,
         ClrOutsideClickModule,
         ClrExpandableAnimationModule,
-        ClrDragAndDropModule,
         ClrSpinnerModule,
         ClrPopoverModuleNext,
         ClrKeyFocusModule,
-        ClrFocusTrapModule,
         ClrFocusOnViewInitModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
+                        CdkDragModule,
+                        CdkTrapFocusModule,
                         ClrIconModule,
                         ClrFormsModule,
                         FormsModule,
@@ -18325,11 +16934,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ClrConditionalModule,
                         ClrOutsideClickModule,
                         ClrExpandableAnimationModule,
-                        ClrDragAndDropModule,
                         ClrSpinnerModule,
                         ClrPopoverModuleNext,
                         ClrKeyFocusModule,
-                        ClrFocusTrapModule,
                         ClrFocusOnViewInitModule,
                     ],
                     declarations: [CLR_DATAGRID_DIRECTIVES],
@@ -18478,7 +17085,7 @@ class ClrStackBlock {
     }
 }
 ClrStackBlock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackBlock, deps: [{ token: ClrStackBlock, optional: true, skipSelf: true }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrStackBlock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStackBlock, selector: "clr-stack-block", inputs: { expanded: ["clrSbExpanded", "expanded"], expandable: ["clrSbExpandable", "expandable"], setChangedValue: ["clrSbNotifyChange", "setChangedValue"], ariaLevel: ["clrStackViewLevel", "ariaLevel"], ariaSetsize: ["clrStackViewSetsize", "ariaSetsize"], ariaPosinset: ["clrStackViewPosinset", "ariaPosinset"] }, outputs: { expandedChange: "clrSbExpandedChange" }, host: { properties: { "class.stack-block": "true", "attr.role": "\"heading\"", "attr.aria-level": "headingLevel", "class.stack-block-expanded": "this.expanded", "class.stack-block-expandable": "this.expandable", "class.stack-block-changed": "this.getChangedValue", "class.on-focus": "this.onStackLabelFocus" } }, queries: [{ propertyName: "stackBlockTitle", first: true, predicate: ClrStackViewLabel, descendants: true }], ngImport: i0, template: `
+ClrStackBlock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStackBlock, selector: "clr-stack-block", inputs: { expanded: ["clrSbExpanded", "expanded"], expandable: ["clrSbExpandable", "expandable"], setChangedValue: ["clrSbNotifyChange", "setChangedValue"], ariaLevel: ["clrStackViewLevel", "ariaLevel"] }, outputs: { expandedChange: "clrSbExpandedChange" }, host: { properties: { "class.stack-block": "true", "attr.role": "\"heading\"", "attr.aria-level": "headingLevel", "class.stack-block-expanded": "this.expanded", "class.stack-block-expandable": "this.expandable", "class.stack-block-changed": "this.getChangedValue", "class.on-focus": "this.onStackLabelFocus" } }, queries: [{ propertyName: "stackBlockTitle", first: true, predicate: ClrStackViewLabel, descendants: true }], ngImport: i0, template: `
     <!-- The 'preventDefault' for the space keydown event prevents the page
          from scrolling when a stack block is toggled via the space key. -->
     <div
@@ -18597,12 +17204,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             }], ariaLevel: [{
                 type: Input,
                 args: ['clrStackViewLevel']
-            }], ariaSetsize: [{
-                type: Input,
-                args: ['clrStackViewSetsize']
-            }], ariaPosinset: [{
-                type: Input,
-                args: ['clrStackViewPosinset']
             }], onStackLabelFocus: [{
                 type: HostBinding,
                 args: ['class.on-focus']
@@ -18637,30 +17238,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrStackView {
-    constructor() {
-        /**
-         * Undocumented experimental feature: inline editing.
-         */
-        this.editable = false;
-        this.save = new EventEmitter(false);
-        this._editMode = false;
-        this.editingChange = new EventEmitter(false);
-    }
-    get editing() {
-        return this.editable && this._editMode;
-    }
-    set editing(value) {
-        if (this.editable) {
-            this._editMode = value;
-            this.editingChange.emit(value);
-            if (!value) {
-                this.save.emit(null);
-            }
-        }
-    }
 }
 ClrStackView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrStackView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStackView, selector: "clr-stack-view", outputs: { save: "clrStackSave" }, ngImport: i0, template: `
+ClrStackView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStackView, selector: "clr-stack-view", ngImport: i0, template: `
     <ng-content select="clr-stack-header"></ng-content>
     <div class="stack-view"><ng-content></ng-content></div>
   `, isInline: true, styles: [":host{display:block}\n"] });
@@ -18670,10 +17250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
     <ng-content select="clr-stack-header"></ng-content>
     <div class="stack-view"><ng-content></ng-content></div>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { save: [{
-                type: Output,
-                args: ['clrStackSave']
-            }] } });
+        }] });
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -18692,19 +17269,9 @@ ClrStackHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
 
       <span class="stack-actions">
         <ng-content select=".stack-action"></ng-content>
-        <!-- Undocumented experimental feature: inline editing. -->
-        <button
-          *ngIf="stackView.editable"
-          class="stack-action btn btn-sm btn-link"
-          (click)="stackView.editing = !stackView.editing"
-          type="button"
-        >
-          Edit
-        </button>
-        <!-- End of undocumented experimental feature. -->
       </span>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [":host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackHeader, decorators: [{
             type: Component,
             args: [{ selector: 'clr-stack-header', template: `
@@ -18713,116 +17280,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
 
       <span class="stack-actions">
         <ng-content select=".stack-action"></ng-content>
-        <!-- Undocumented experimental feature: inline editing. -->
-        <button
-          *ngIf="stackView.editable"
-          class="stack-action btn btn-sm btn-link"
-          (click)="stackView.editing = !stackView.editing"
-          type="button"
-        >
-          Edit
-        </button>
-        <!-- End of undocumented experimental feature. -->
       </span>
     </div>
   `, styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: ClrStackView }]; } });
 
-/*
- * Copyright (c) 2016-2022 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 StackControl {
-    constructor(stackView) {
-        this.stackView = stackView;
-        this.modelChange = new EventEmitter(false);
-        // Make the ClrStackView editable, since it contains a StackControl
-        this.stackView.editable = true;
-        this.subscription = this.stackView.editingChange.subscribe((editing) => {
-            // Edit mode was closed
-            if (!editing) {
-                this.modelChange.emit(this.model);
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-}
-StackControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StackControl, deps: [{ token: ClrStackView }], target: i0.ɵɵFactoryTarget.Directive });
-StackControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: StackControl, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StackControl, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: ClrStackView }]; } });
-
-/*
- * Copyright (c) 2016-2022 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 ClrStackInput extends StackControl {
-    constructor(stackView) {
-        super(stackView);
-        this.stackView = stackView;
-        this.type = 'text';
-    }
-}
-ClrStackInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackInput, deps: [{ token: ClrStackView }], target: i0.ɵɵFactoryTarget.Component });
-ClrStackInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStackInput, selector: "clr-stack-input", inputs: { model: ["clrModel", "model"], type: "type" }, outputs: { modelChange: "clrModelChange" }, usesInheritance: true, ngImport: i0, template: `
-    <span *ngIf="!stackView.editing">{{ model }}</span>
-    <input [type]="type" *ngIf="stackView.editing" [(ngModel)]="model" />
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clr-stack-input',
-                    inputs: ['model: clrModel', 'type'],
-                    outputs: ['modelChange: clrModelChange'],
-                    template: `
-    <span *ngIf="!stackView.editing">{{ model }}</span>
-    <input [type]="type" *ngIf="stackView.editing" [(ngModel)]="model" />
-  `,
-                }]
-        }], ctorParameters: function () { return [{ type: ClrStackView }]; } });
-
-/*
- * Copyright (c) 2016-2022 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 ClrStackSelect extends StackControl {
-    constructor(stackView) {
-        super(stackView);
-        this.stackView = stackView;
-    }
-}
-ClrStackSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackSelect, deps: [{ token: ClrStackView }], target: i0.ɵɵFactoryTarget.Component });
-ClrStackSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrStackSelect, selector: "clr-stack-select", inputs: { model: ["clrModel", "model"] }, outputs: { modelChange: "clrModelChange" }, usesInheritance: true, ngImport: i0, template: `
-    <span *ngIf="!stackView.editing">{{ model }}</span>
-    <div class="select" *ngIf="stackView.editing">
-      <select [(ngModel)]="model">
-        <ng-content></ng-content>
-      </select>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackSelect, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clr-stack-select',
-                    inputs: ['model: clrModel'],
-                    outputs: ['modelChange: clrModelChange'],
-                    template: `
-    <span *ngIf="!stackView.editing">{{ model }}</span>
-    <div class="select" *ngIf="stackView.editing">
-      <select [(ngModel)]="model">
-        <ng-content></ng-content>
-      </select>
-    </div>
-  `,
-                }]
-        }], ctorParameters: function () { return [{ type: ClrStackView }]; } });
-
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -18835,14 +17297,6 @@ const CLR_STACK_VIEW_DIRECTIVES = [
     ClrStackContentInput,
     ClrStackViewLabel,
     ClrStackViewCustomTags,
-    /**
-     * Undocumented experimental feature: inline editing.
-     */
-    ClrStackInput,
-    ClrStackSelect,
-    /**
-     * End of undocumented experimental feature.
-     */
 ];
 class ClrStackViewModule {
     constructor() {
@@ -18855,22 +17309,12 @@ ClrStackViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         ClrStackBlock,
         ClrStackContentInput,
         ClrStackViewLabel,
-        ClrStackViewCustomTags,
-        /**
-         * Undocumented experimental feature: inline editing.
-         */
-        ClrStackInput,
-        ClrStackSelect], imports: [CommonModule, FormsModule, ClrIconModule, ClrExpandableAnimationModule], exports: [ClrStackView,
+        ClrStackViewCustomTags], imports: [CommonModule, FormsModule, ClrIconModule, ClrExpandableAnimationModule], exports: [ClrStackView,
         ClrStackHeader,
         ClrStackBlock,
         ClrStackContentInput,
         ClrStackViewLabel,
-        ClrStackViewCustomTags,
-        /**
-         * Undocumented experimental feature: inline editing.
-         */
-        ClrStackInput,
-        ClrStackSelect] });
+        ClrStackViewCustomTags] });
 ClrStackViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackViewModule, imports: [CommonModule, FormsModule, ClrIconModule, ClrExpandableAnimationModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrStackViewModule, decorators: [{
             type: NgModule,
@@ -19495,13 +17939,13 @@ const LVIEW_CONTEXT_INDEX = 8;
 // then those keys are sent together in one request.
 const TREE_TYPE_AHEAD_TIMEOUT = 200;
 class ClrTreeNode {
-    constructor(platformId, parent, forTypeAheadProvider, featuresService, expandService, commonStrings, focusManager, injector) {
+    constructor(platformId, parent, featuresService, expandService, commonStrings, focusManager, elementRef, injector) {
         this.platformId = platformId;
-        this.forTypeAheadProvider = forTypeAheadProvider;
         this.featuresService = featuresService;
         this.expandService = expandService;
         this.commonStrings = commonStrings;
         this.focusManager = focusManager;
+        this.elementRef = elementRef;
         this.STATES = ClrSelectedState;
         this.skipEmitChange = false;
         this.isModelLoading = false;
@@ -19580,6 +18024,9 @@ class ClrTreeNode {
     set expanded(value) {
         this.expandService.expanded = value;
     }
+    set clrForTypeAhead(value) {
+        this._model.textContent = trimAndLowerCase(value || this.elementRef.nativeElement.textContent);
+    }
     ngOnInit() {
         this._model.expanded = this.expanded;
         this.subscriptions.push(this._model.selected.pipe(filter(() => !this.skipEmitChange)).subscribe(value => {
@@ -19599,14 +18046,14 @@ class ClrTreeNode {
         this.subscriptions.push(this._model.loading$.pipe(debounceTime(0)).subscribe(isLoading => (this.isModelLoading = isLoading)));
     }
     ngAfterContentInit() {
-        if (this.forTypeAheadProvider) {
-            this._model.textContent = this.forTypeAheadProvider.textContent;
-            this.subscriptions.push(this.typeAheadKeyEvent.pipe(debounceTime(TREE_TYPE_AHEAD_TIMEOUT)).subscribe((bufferedKeys) => {
-                this.focusManager.focusNodeStartsWith(bufferedKeys, this._model);
-                // reset once bufferedKeys are used
-                this.typeAheadKeyBuffer = '';
-            }));
+        if (!this._model.textContent) {
+            this._model.textContent = trimAndLowerCase(this.elementRef.nativeElement.textContent);
         }
+        this.subscriptions.push(this.typeAheadKeyEvent.pipe(debounceTime(TREE_TYPE_AHEAD_TIMEOUT)).subscribe((bufferedKeys) => {
+            this.focusManager.focusNodeStartsWith(bufferedKeys, this._model);
+            // reset once bufferedKeys are used
+            this.typeAheadKeyBuffer = '';
+        }));
     }
     ngOnDestroy() {
         this._model.destroy();
@@ -19728,8 +18175,8 @@ class ClrTreeNode {
         }
     }
 }
-ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTreeNode, deps: [{ token: PLATFORM_ID }, { token: ClrTreeNode, optional: true, skipSelf: true }, { token: ForTypeAheadProvider, optional: true, self: true }, { token: TreeFeaturesService }, { token: IfExpandService }, { token: ClrCommonStringsService }, { token: TreeFocusManagerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], expanded: ["clrExpanded", "expanded"] }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], 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<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span *ngIf=\"ariaSelected\"> selected</span>\n      <span *ngIf=\"!ariaSelected\"> unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], animations: [
+ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTreeNode, deps: [{ token: PLATFORM_ID }, { token: ClrTreeNode, optional: true, skipSelf: true }, { token: TreeFeaturesService }, { token: IfExpandService }, { token: ClrCommonStringsService }, { token: TreeFocusManagerService }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], expanded: ["clrExpanded", "expanded"], clrForTypeAhead: "clrForTypeAhead" }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], 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<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span *ngIf=\"ariaSelected\"> selected</span>\n      <span *ngIf=\"!ariaSelected\"> unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], animations: [
         trigger('toggleChildrenAnim', [
             transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
             transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
@@ -19756,11 +18203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: ForTypeAheadProvider, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: TreeFeaturesService }, { type: IfExpandService }, { type: ClrCommonStringsService }, { type: TreeFocusManagerService }, { type: i0.Injector }]; }, propDecorators: { selected: [{
+                }] }, { type: TreeFeaturesService }, { type: IfExpandService }, { type: ClrCommonStringsService }, { type: TreeFocusManagerService }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { selected: [{
                 type: Input,
                 args: ['clrSelected']
             }], selectedChange: [{
@@ -19772,6 +18215,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             }], expanded: [{
                 type: Input,
                 args: ['clrExpanded']
+            }], clrForTypeAhead: [{
+                type: Input,
+                args: ['clrForTypeAhead']
             }], expandedChange: [{
                 type: Output,
                 args: ['clrExpandedChange']
@@ -19782,6 +18228,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 type: ContentChildren,
                 args: [ClrTreeNodeLink, { descendants: false }]
             }] } });
+function trimAndLowerCase(value) {
+    return value.toLocaleLowerCase().trim();
+}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -20264,13 +18713,10 @@ const BASIC_FOCUSABLE_ITEM_PROVIDER = [
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDropdownItem {
-    constructor(dropdown, el, _dropdownService, renderer, focusableItem) {
+    constructor(dropdown, _dropdownService, focusableItem) {
         this.dropdown = dropdown;
-        this.el = el;
         this._dropdownService = _dropdownService;
-        this.renderer = renderer;
         this.focusableItem = focusableItem;
-        this.setByDeprecatedDisabled = false;
     }
     set disabled(value) {
         // Empty string attribute evaluates to false but should disable the item, so we need to add a special case for it.
@@ -20279,17 +18725,6 @@ class ClrDropdownItem {
     get disabled() {
         return this.focusableItem.disabled;
     }
-    /*
-     * @deprecated since 3.0, remove in 4.0. the presence of this attribute makes it not-focusable in IE11. Use [clrDisabled] input instead.
-     */
-    set disabledDeprecated(value) {
-        // Empty string attribute evaluates to false but should disable the item, so we need to add a special case for it.
-        this.focusableItem.disabled = !!value || value === '';
-        this.setByDeprecatedDisabled = true;
-    }
-    get disabledDeprecated() {
-        return this.focusableItem.disabled;
-    }
     /**
      * Let you overwrite the focusable auto increment id.
      */
@@ -20299,22 +18734,28 @@ class ClrDropdownItem {
     get dropdownItemId() {
         return this.focusableItem.id;
     }
-    ngAfterViewInit() {
-        this.unlisten = this.renderer.listen(this.el.nativeElement, 'click', () => this.onDropdownItemClick());
-    }
     onDropdownItemClick() {
-        if (this.dropdown.isMenuClosable && !this.el.nativeElement.classList.contains('disabled')) {
-            this._dropdownService.closeMenus();
-        }
+        // Ensure that the dropdown is closed after custom dropdown item click event handlers have run.
+        setTimeout(() => {
+            if (this.dropdown.isMenuClosable && !this.disabled) {
+                this._dropdownService.closeMenus();
+            }
+        });
     }
-    ngOnDestroy() {
-        if (this.unlisten) {
-            this.unlisten();
+    onSpaceKeydown($event) {
+        this.stopImmediatePropagationIfDisabled($event);
+    }
+    onEnterKeydown($event) {
+        this.stopImmediatePropagationIfDisabled($event);
+    }
+    stopImmediatePropagationIfDisabled($event) {
+        if (this.disabled) {
+            $event.stopImmediatePropagation();
         }
     }
 }
-ClrDropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDropdownItem, deps: [{ token: ClrDropdown }, { token: i0.ElementRef }, { token: RootDropdownService }, { token: i0.Renderer2 }, { token: FocusableItem }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDropdownItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDropdownItem, selector: "[clrDropdownItem]", inputs: { disabled: ["clrDisabled", "disabled"], disabledDeprecated: ["disabled", "disabledDeprecated"], dropdownItemId: ["id", "dropdownItemId"] }, host: { properties: { "class.disabled": "disabled", "class.dropdown-item": "true", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled", "attr.disabled": "(disabled && setByDeprecatedDisabled)? '' : null", "attr.id": "dropdownItemId" } }, providers: [BASIC_FOCUSABLE_ITEM_PROVIDER], ngImport: i0 });
+ClrDropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDropdownItem, deps: [{ token: ClrDropdown }, { token: RootDropdownService }, { token: FocusableItem }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDropdownItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrDropdownItem, selector: "[clrDropdownItem]", inputs: { disabled: ["clrDisabled", "disabled"], dropdownItemId: ["id", "dropdownItemId"] }, host: { listeners: { "click": "onDropdownItemClick()", "keydown.space": "onSpaceKeydown($event)", "keydown.enter": "onEnterKeydown($event)" }, properties: { "class.disabled": "disabled", "class.dropdown-item": "true", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled", "attr.id": "dropdownItemId" } }, providers: [BASIC_FOCUSABLE_ITEM_PROVIDER], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDropdownItem, decorators: [{
             type: Directive,
             args: [{
@@ -20324,20 +18765,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         '[class.dropdown-item]': 'true',
                         '[attr.role]': '"menuitem"',
                         '[attr.aria-disabled]': 'disabled',
-                        '[attr.disabled]': "(disabled && setByDeprecatedDisabled)? '' : null",
                         '[attr.id]': 'dropdownItemId',
                     },
                     providers: [BASIC_FOCUSABLE_ITEM_PROVIDER],
                 }]
-        }], ctorParameters: function () { return [{ type: ClrDropdown }, { type: i0.ElementRef }, { type: RootDropdownService }, { type: i0.Renderer2 }, { type: FocusableItem }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: ClrDropdown }, { type: RootDropdownService }, { type: FocusableItem }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['clrDisabled']
-            }], disabledDeprecated: [{
-                type: Input,
-                args: ['disabled']
             }], dropdownItemId: [{
                 type: Input,
                 args: ['id']
+            }], onDropdownItemClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onSpaceKeydown: [{
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }], onEnterKeydown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
             }] } });
 
 /*
@@ -21833,143 +20279,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: ResponsiveNavigationService }, { type: ClrCommonStringsService }]; } });
 
-/*
- * Copyright (c) 2016-2022 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.
- */
-function refocusIfOutsideFocusTrapElement(focusedElement, focusTrapElement, elementToRefocus) {
-    const focusTrapIsCurrent = FocusTrapTrackerService.getCurrent() === focusTrapElement;
-    const elementToFocusIsOutsideFocusTrap = elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement);
-    if (focusTrapIsCurrent && elementToFocusIsOutsideFocusTrap) {
-        elementToRefocus = elementToRefocus || focusTrapElement;
-        elementToRefocus.focus();
-    }
-    else {
-        focusedElement.focus();
-    }
-}
-function elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement) {
-    if (focusedElement === focusTrapElement.topReboundElement ||
-        focusedElement === focusTrapElement.bottomReboundElement) {
-        return true;
-    }
-    const elementIsInFocusTrapLightDom = focusTrapElement.contains(focusedElement);
-    if (elementIsInFocusTrapLightDom) {
-        return false;
-    }
-    if (focusTrapElement !== null && focusTrapElement.contains(focusedElement)) {
-        return false;
-    }
-    return true;
-}
-function createFocusTrapReboundElement(document) {
-    const offScreenSpan = document.createElement('span');
-    offScreenSpan.setAttribute('tabindex', '0');
-    offScreenSpan.classList.add('offscreen-focus-rebounder');
-    return offScreenSpan;
-}
-function addReboundElementsToFocusTrapElement(document, focusTrapElement) {
-    if (focusTrapElement && !focusTrapElement.topReboundElement && !focusTrapElement.bottomReboundElement) {
-        focusTrapElement.topReboundElement = createFocusTrapReboundElement(document);
-        focusTrapElement.bottomReboundElement = createFocusTrapReboundElement(document);
-        const parent = focusTrapElement.parentElement;
-        const sibling = focusTrapElement.nextSibling;
-        if (parent) {
-            parent.insertBefore(focusTrapElement.topReboundElement, focusTrapElement);
-            if (sibling) {
-                parent.insertBefore(focusTrapElement.bottomReboundElement, sibling);
-            }
-            else {
-                parent.appendChild(focusTrapElement.bottomReboundElement);
-            }
-        }
-    }
-}
-function removeReboundElementsFromFocusTrapElement(focusTrapElement) {
-    if (focusTrapElement) {
-        const parent = focusTrapElement.parentElement;
-        if (parent) {
-            const topRebound = focusTrapElement.topReboundElement;
-            const bottomRebound = focusTrapElement.bottomReboundElement;
-            if (topRebound) {
-                parent.removeChild(topRebound);
-            }
-            if (bottomRebound) {
-                parent.removeChild(bottomRebound);
-            }
-        }
-        // These are here to to make sure that we completely delete all traces of the removed DOM objects.
-        delete focusTrapElement.topReboundElement;
-        delete focusTrapElement.bottomReboundElement;
-    }
-}
-// this helper exists to enable the focus trap class to handle vanilla html elements
-// it's primary concern is to keep TS happy.
-function castHtmlElementToFocusTrapElement(el) {
-    return el;
-}
-class FocusTrap {
-    constructor(renderer, injector, platformId, hostElement) {
-        this.renderer = renderer;
-        this.active = false;
-        if (isPlatformBrowser(platformId)) {
-            this._document = injector.get(DOCUMENT);
-        }
-        hostElement = castHtmlElementToFocusTrapElement(hostElement);
-        if (!hostElement.focusTrapId) {
-            hostElement.focusTrapId = createId();
-        }
-        this.focusTrapElement = hostElement;
-    }
-    enableFocusTrap() {
-        const fte = this.focusTrapElement;
-        const firstFocusElement = fte.querySelector('[cds-first-focus]');
-        const activeEl = this._document.activeElement;
-        if (FocusTrapTrackerService.getCurrent() === fte) {
-            throw new Error('Focus trap is already enabled for this instance.');
-        }
-        this.firstFocusElement = firstFocusElement || this.focusTrapElement;
-        addReboundElementsToFocusTrapElement(this._document, fte);
-        if (!isFocusable(fte)) {
-            fte.setAttribute('tabindex', '-1');
-        }
-        if (activeEl && isHTMLElement(activeEl)) {
-            this.previousFocus = activeEl;
-        }
-        FocusTrapTrackerService.setCurrent(fte);
-        // setTimeout here is required for Safari which may try to set focus on
-        // element before it is visible...
-        const focusTimer = setTimeout(() => {
-            this.firstFocusElement.focus();
-            clearTimeout(focusTimer);
-        }, 10);
-        this.onFocusInEvent = this.onFocusIn.bind(this);
-        this.unlisten = this.renderer.listen(this._document, 'focusin', this.onFocusInEvent);
-        this.active = true;
-    }
-    removeFocusTrap() {
-        if (this.unlisten) {
-            this.unlisten();
-        }
-        removeReboundElementsFromFocusTrapElement(this.focusTrapElement);
-        this.renderer.removeAttribute(this.focusTrapElement, 'tabindex');
-        FocusTrapTrackerService.activatePreviousCurrent();
-        this.active = false;
-        if (this.previousFocus) {
-            this.previousFocus.focus();
-        }
-    }
-    onFocusIn(event) {
-        refocusIfOutsideFocusTrapElement(event.composedPath()[0], this.focusTrapElement, this.firstFocusElement);
-    }
-}
-FocusTrap.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrap, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
-FocusTrap.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrap });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: FocusTrap, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.Injector }, { type: undefined }, { type: undefined }]; } });
-
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -21988,11 +20297,22 @@ const createCdsCloseButton = (document, ariaLabel) => {
     cdsCloseButton.className = 'clr-nav-close';
     return cdsCloseButton;
 };
-class ClrNavLevel extends FocusTrap {
-    constructor(platformId, responsiveNavService, elementRef, renderer, injector) {
-        super(renderer, injector, platformId, elementRef.nativeElement);
+class StandaloneCdkTrapFocus extends CdkTrapFocus {
+}
+StandaloneCdkTrapFocus.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StandaloneCdkTrapFocus, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+StandaloneCdkTrapFocus.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: StandaloneCdkTrapFocus, isStandalone: true, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StandaloneCdkTrapFocus, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                }]
+        }] });
+class ClrNavLevel {
+    constructor(platformId, cdkTrapFocus, responsiveNavService, elementRef, renderer, injector) {
+        this.cdkTrapFocus = cdkTrapFocus;
         this.responsiveNavService = responsiveNavService;
         this.elementRef = elementRef;
+        this.renderer = renderer;
         this._isOpen = false;
         if (isPlatformBrowser(platformId)) {
             this._document = injector.get(DOCUMENT);
@@ -22012,6 +20332,7 @@ class ClrNavLevel extends FocusTrap {
             .subscribe(() => this.close()));
     }
     ngOnInit() {
+        this.cdkTrapFocus.enabled = false;
         if (!this.closeButtonAriaLabel) {
             this.closeButtonAriaLabel =
                 this._level === ResponsiveNavCodes.NAV_LEVEL_1
@@ -22069,14 +20390,14 @@ class ClrNavLevel extends FocusTrap {
     open() {
         this._isOpen = true;
         this.showNavigation();
-        this.enableFocusTrap();
+        this.cdkTrapFocus.enabled = true;
         this.showCloseButton();
         this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, this.level);
     }
     close() {
         this._isOpen = false;
         this.hideNavigation();
-        this.removeFocusTrap();
+        this.cdkTrapFocus.enabled = false;
         this.hideCloseButton();
         this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, this.level);
     }
@@ -22121,17 +20442,18 @@ class ClrNavLevel extends FocusTrap {
         this._subscription.unsubscribe();
     }
 }
-ClrNavLevel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrNavLevel, deps: [{ token: PLATFORM_ID }, { token: ResponsiveNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-ClrNavLevel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrNavLevel, selector: "[clr-nav-level]", inputs: { _level: ["clr-nav-level", "_level"], closeButtonAriaLabel: ["closeAriaLabel", "closeButtonAriaLabel"] }, host: { listeners: { "window:resize": "onResize($event)", "click": "onMouseClick($event.target)" } }, usesInheritance: true, ngImport: i0 });
+ClrNavLevel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrNavLevel, deps: [{ token: PLATFORM_ID }, { token: StandaloneCdkTrapFocus }, { token: ResponsiveNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrNavLevel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrNavLevel, selector: "[clr-nav-level]", inputs: { _level: ["clr-nav-level", "_level"], closeButtonAriaLabel: ["closeAriaLabel", "closeButtonAriaLabel"] }, host: { listeners: { "window:resize": "onResize($event)", "click": "onMouseClick($event.target)" } }, hostDirectives: [{ directive: StandaloneCdkTrapFocus }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrNavLevel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clr-nav-level]',
+                    hostDirectives: [StandaloneCdkTrapFocus],
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: ResponsiveNavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { _level: [{
+                }] }, { type: StandaloneCdkTrapFocus }, { type: ResponsiveNavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { _level: [{
                 type: Input,
                 args: ['clr-nav-level']
             }], closeButtonAriaLabel: [{
@@ -23123,7 +21445,6 @@ class ClrVerticalNavGroup {
         this._navService = _navService;
         this.commonStrings = commonStrings;
         this.wasExpanded = false;
-        this.groupLabel = this.commonStrings.keys.verticalNavGroupToggle;
         this.expandedChange = new EventEmitter(true);
         this._subscriptions = [];
         this._expandAnimationState = COLLAPSED_STATE;
@@ -23233,7 +21554,7 @@ class ClrVerticalNavGroup {
     }
 }
 ClrVerticalNavGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrVerticalNavGroup, deps: [{ token: IfExpandService }, { token: VerticalNavGroupRegistrationService }, { token: VerticalNavGroupService }, { token: VerticalNavService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNavGroup, selector: "clr-vertical-nav-group", inputs: { groupLabel: ["clrVerticalNavGroupLabel", "groupLabel"], userExpandedInput: ["clrVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "clrVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    ></cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
+ClrVerticalNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNavGroup, selector: "clr-vertical-nav-group", inputs: { userExpandedInput: ["clrVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "clrVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    ></cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
         trigger('clrExpand', [
             state(EXPANDED_STATE, style({ height: '*' })),
             state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
@@ -23248,13 +21569,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                             state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
                             transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
                         ]),
-                    ], host: { class: 'nav-group' }, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    ></cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n" }]
+                    ], host: { class: 'nav-group' }, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    ></cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: IfExpandService }, { type: VerticalNavGroupRegistrationService }, { type: VerticalNavGroupService }, { type: VerticalNavService }, { type: ClrCommonStringsService }]; }, propDecorators: { expanded: [{
                 type: HostBinding,
                 args: ['class.is-expanded']
-            }], groupLabel: [{
-                type: Input,
-                args: ['clrVerticalNavGroupLabel']
             }], userExpandedInput: [{
                 type: Input,
                 args: ['clrVerticalNavGroupExpanded']
@@ -23449,15 +21767,13 @@ class ClrModal {
         this.closeButtonAriaLabel = this.commonStrings.keys.close;
         this.staticBackdrop = true;
         this.skipAnimation = 'false';
-        // presently this is only used by wizards
-        this.bypassScrollService = false;
         this.stopClose = false;
         this.altClose = new EventEmitter(false);
         this.labelledBy = this.modalId;
     }
     // Detect when _open is set to true and set no-scrolling to true
     ngOnChanges(changes) {
-        if (!this.bypassScrollService && changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
+        if (changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
             if (changes._open.currentValue) {
                 this._scrollingService.stopScrolling();
             }
@@ -23485,8 +21801,6 @@ class ClrModal {
             return;
         }
         this._open = false;
-        // SPECME
-        this.focusTrap.setPreviousFocus(); // Handles moving focus back to the element that had it before.
     }
     fadeDone(e) {
         if (e.toState === 'void') {
@@ -23496,7 +21810,7 @@ class ClrModal {
     }
 }
 ClrModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrModal, deps: [{ token: ScrollingService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], closeButtonAriaLabel: ["clrModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: FocusTrapDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { kind: "directive", type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }], viewProviders: [ScrollingService], animations: [
+ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], closeButtonAriaLabel: ["clrModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div cdkTrapFocus class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }], viewProviders: [ScrollingService], animations: [
         trigger('fadeDown', [
             transition('* => false', [style({ opacity: 0, transform: 'translate(0, -25%)' }), animate('0.2s ease-in-out')]),
             transition('false => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, -25%)' }))]),
@@ -23517,11 +21831,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                             transition('void => *', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
                             transition('* => void', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
                         ]),
-                    ], template: "<!--\n  ~ Copyright (c) 2016-2022 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<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScrollingService }, { type: ClrCommonStringsService }]; }, propDecorators: { focusTrap: [{
-                type: ViewChild,
-                args: [FocusTrapDirective]
-            }], _open: [{
+                    ], template: "<!--\n  ~ Copyright (c) 2016-2022 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<div cdkTrapFocus class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"] }]
+        }], ctorParameters: function () { return [{ type: ScrollingService }, { type: ClrCommonStringsService }]; }, propDecorators: { _open: [{
                 type: HostBinding,
                 args: ['class.open']
             }, {
@@ -23545,9 +21856,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             }], skipAnimation: [{
                 type: Input,
                 args: ['clrModalSkipAnimation']
-            }], bypassScrollService: [{
-                type: Input,
-                args: ['clrModalOverrideScrollService']
             }], stopClose: [{
                 type: Input,
                 args: ['clrModalPreventClose']
@@ -23636,12 +21944,12 @@ class ClrModalModule {
     }
 }
 ClrModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ClrModalModule, declarations: [ClrModal, ClrModalBody], imports: [CommonModule, ClrIconModule, ClrFocusTrapModule, ClrFocusOnViewInitModule], exports: [ClrModal, ClrModalBody, ClrIconModule, ClrFocusOnViewInitModule] });
-ClrModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrModalModule, imports: [CommonModule, ClrIconModule, ClrFocusTrapModule, ClrFocusOnViewInitModule, ClrIconModule, ClrFocusOnViewInitModule] });
+ClrModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ClrModalModule, declarations: [ClrModal, ClrModalBody], imports: [CommonModule, CdkTrapFocusModule, ClrIconModule, ClrFocusOnViewInitModule], exports: [ClrModal, ClrModalBody, ClrIconModule, ClrFocusOnViewInitModule] });
+ClrModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrModalModule, imports: [CommonModule, CdkTrapFocusModule, ClrIconModule, ClrFocusOnViewInitModule, ClrIconModule, ClrFocusOnViewInitModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClrIconModule, ClrFocusTrapModule, ClrFocusOnViewInitModule],
+                    imports: [CommonModule, CdkTrapFocusModule, ClrIconModule, ClrFocusOnViewInitModule],
                     declarations: [CLR_MODAL_DIRECTIVES],
                     exports: [CLR_MODAL_DIRECTIVES, ClrIconModule, ClrFocusOnViewInitModule],
                 }]
@@ -26605,13 +24913,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrWizard {
-    constructor(platformId, navService, pageCollection, buttonService, headerActionService, elementRef, differs) {
+    constructor(platformId, navService, pageCollection, buttonService, headerActionService, differs) {
         this.platformId = platformId;
         this.navService = navService;
         this.pageCollection = pageCollection;
         this.buttonService = buttonService;
         this.headerActionService = headerActionService;
-        this.elementRef = elementRef;
         /**
          * Set the modal size of the wizard. Set using `[clrWizardSize]` input.
          */
@@ -26627,13 +24934,6 @@ class ClrWizard {
         this._stopCancel = false;
         this._stopNavigation = false;
         this._disableStepnav = false;
-        /**
-         * Used to communicate to the underlying modal that animations are not
-         * wanted. Primary use is for the display of static/inline wizards.
-         * Set using `[clrWizardPreventModalAnimation]` input.
-         */
-        /** @deprecated since 3.0, input should be removed in 4.0 because is only related to inline wizards */
-        this._stopModalAnimations = false;
         /**
          * Emits when the wizard is opened or closed.
          * Listen via `(clrWizardOpenChange)` event.
@@ -26754,9 +25054,6 @@ class ClrWizard {
     get disableStepnav() {
         return this._disableStepnav;
     }
-    get stopModalAnimations() {
-        return this._stopModalAnimations ? 'true' : 'false';
-    }
     get currentPage() {
         return this.navService.currentPage;
     }
@@ -26769,13 +25066,9 @@ class ClrWizard {
     get isFirst() {
         return this.navService.currentPageIsFirst;
     }
-    get isStatic() {
-        return this.elementRef.nativeElement.classList.contains('clr-wizard--inline');
-    }
     ngAfterContentInit() {
         this.pageCollection.pages = this.pages;
         this.headerActionService.wizardHeaderActions = this.headerActions;
-        this.initializeButtons();
     }
     ngDoCheck() {
         this.updateNavOnPageChanges();
@@ -26977,12 +25270,6 @@ class ClrWizard {
             changes.forEachRemovedItem(() => this.navService.updateNavigation());
         }
     }
-    initializeButtons() {
-        // Only trigger buttons ready if default is open (inlined)
-        if (this._open) {
-            this.buttonService.buttonsReady = true;
-        }
-    }
     emitWizardFinished() {
         if (!this.stopNext) {
             this.forceFinish();
@@ -26990,8 +25277,8 @@ class ClrWizard {
         this.wizardFinished.emit();
     }
 }
-ClrWizard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrWizard, deps: [{ token: PLATFORM_ID }, { token: WizardNavigationService }, { token: PageCollectionService }, { token: ButtonHubService }, { token: HeaderActionService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrWizard, selector: "clr-wizard", inputs: { size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"], _stopModalAnimations: ["clrWizardPreventModalAnimation", "_stopModalAnimations"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], queries: [{ propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "wizardTitle", first: true, predicate: ["wizardTitle"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isStatic\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalOverrideScrollService", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: ClrModalBody, selector: ".modal-body" }, { kind: "component", type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }] });
+ClrWizard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrWizard, deps: [{ token: PLATFORM_ID }, { token: WizardNavigationService }, { token: PageCollectionService }, { token: ButtonHubService }, { token: HeaderActionService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrWizard, selector: "clr-wizard", inputs: { size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], queries: [{ propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "wizardTitle", first: true, predicate: ["wizardTitle"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: ClrModalBody, selector: ".modal-body" }, { kind: "component", type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrWizard, decorators: [{
             type: Component,
             args: [{ selector: 'clr-wizard', providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], host: {
@@ -27000,11 +25287,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         '[class.wizard-lg]': "size == 'lg'",
                         '[class.wizard-xl]': "size == 'xl'",
                         '[class.lastPage]': 'navService.currentPageIsLast',
-                    }, template: "<!--\n  ~ Copyright (c) 2016-2022 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isStatic\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n" }]
+                    }, template: "<!--\n  ~ Copyright (c) 2016-2022 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: WizardNavigationService }, { type: PageCollectionService }, { type: ButtonHubService }, { type: HeaderActionService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { size: [{
+                }] }, { type: WizardNavigationService }, { type: PageCollectionService }, { type: ButtonHubService }, { type: HeaderActionService }, { type: i0.IterableDiffers }]; }, propDecorators: { size: [{
                 type: Input,
                 args: ['clrWizardSize']
             }], closable: [{
@@ -27028,9 +25315,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             }], disableStepnav: [{
                 type: Input,
                 args: ['clrWizardDisableStepnav']
-            }], _stopModalAnimations: [{
-                type: Input,
-                args: ['clrWizardPreventModalAnimation']
             }], _openChanged: [{
                 type: Output,
                 args: ['clrWizardOpenChange']
@@ -27331,15 +25615,12 @@ ClarityModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         ClrModalModule,
         ClrLoadingModule,
         ClrConditionalModule,
-        ClrFocusTrapModule,
         ClrFocusOnViewInitModule,
-        ClrForTypeAheadModule,
         ClrButtonModule,
         ClrFormsModule,
         ClrLayoutModule,
         ClrPopoverModule,
         ClrWizardModule,
-        ClrDragAndDropModule,
         ClrStepperModule,
         ClrSpinnerModule,
         ClrProgressBarModule,
@@ -27351,15 +25632,12 @@ ClarityModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         ClrModalModule,
         ClrLoadingModule,
         ClrConditionalModule,
-        ClrFocusTrapModule,
         ClrFocusOnViewInitModule,
-        ClrForTypeAheadModule,
         ClrButtonModule,
         ClrFormsModule,
         ClrLayoutModule,
         ClrPopoverModule,
         ClrWizardModule,
-        ClrDragAndDropModule,
         ClrStepperModule,
         ClrSpinnerModule,
         ClrProgressBarModule,
@@ -27375,15 +25653,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ClrModalModule,
                         ClrLoadingModule,
                         ClrConditionalModule,
-                        ClrFocusTrapModule,
                         ClrFocusOnViewInitModule,
-                        ClrForTypeAheadModule,
                         ClrButtonModule,
                         ClrFormsModule,
                         ClrLayoutModule,
                         ClrPopoverModule,
                         ClrWizardModule,
-                        ClrDragAndDropModule,
                         ClrStepperModule,
                         ClrSpinnerModule,
                         ClrProgressBarModule,
@@ -27683,5 +25958,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_DRAG_AND_DROP_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, ClrAriaLivePoliteness, ClrAriaLiveService, 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, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForTypeAhead, ClrForTypeAheadModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, 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, ClrStackInput, ClrStackSelect, 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, ClrFocusTrapModule as ÇlrClrFocusTrapModule, 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, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, 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, 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 };
 //# sourceMappingURL=clr-angular.mjs.map