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

package/fesm2020/clr-angular.mjs

@@ -313,7 +313,6 @@ const commonStringsDefault = {
     alertCloseButtonAriaLabel: 'Close alert',
     // Date Picker
     datepickerDialogLabel: 'Choose date',
-    datepickerToggle: 'Toggle datepicker',
     datepickerToggleChooseDateLabel: 'Choose date',
     datepickerToggleChangeDateLabel: 'Change date, {SELECTED_DATE}',
     datepickerPreviousMonth: 'Previous month',
@@ -1318,69 +1317,62 @@ 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.
  */
-var KeyCodes;
-(function (KeyCodes) {
-    KeyCodes["ArrowLeft"] = "ArrowLeft";
-    KeyCodes["ArrowUp"] = "ArrowUp";
-    KeyCodes["ArrowRight"] = "ArrowRight";
-    KeyCodes["ArrowDown"] = "ArrowDown";
-    KeyCodes["Backspace"] = "Backspace";
-    KeyCodes["Tab"] = "Tab";
-    KeyCodes["Enter"] = "Enter";
-    KeyCodes["Escape"] = "Escape";
-    KeyCodes["Space"] = "Space";
-    KeyCodes["Spacebar"] = " ";
-    KeyCodes["Home"] = "Home";
-    KeyCodes["End"] = "End";
-})(KeyCodes || (KeyCodes = {}));
-var IEKeyCodes;
-(function (IEKeyCodes) {
-    IEKeyCodes["ArrowUp"] = "Up";
-    IEKeyCodes["ArrowDown"] = "Down";
-    IEKeyCodes["ArrowRight"] = "Right";
-    IEKeyCodes["ArrowLeft"] = "Left";
-    IEKeyCodes["Space"] = "Spacebar";
-    IEKeyCodes["Escape"] = "Esc";
-    IEKeyCodes["Home"] = "Home";
-    IEKeyCodes["End"] = "End";
-    IEKeyCodes["Enter"] = "Enter";
-    IEKeyCodes["Tab"] = "Tab";
-})(IEKeyCodes || (IEKeyCodes = {}));
+var Keys;
+(function (Keys) {
+    Keys["ArrowLeft"] = "ArrowLeft";
+    Keys["ArrowUp"] = "ArrowUp";
+    Keys["ArrowRight"] = "ArrowRight";
+    Keys["ArrowDown"] = "ArrowDown";
+    Keys["Backspace"] = "Backspace";
+    Keys["Tab"] = "Tab";
+    Keys["Enter"] = "Enter";
+    Keys["Escape"] = "Escape";
+    Keys["Space"] = "Space";
+    Keys["Spacebar"] = " ";
+    Keys["Home"] = "Home";
+    Keys["End"] = "End";
+})(Keys || (Keys = {}));
+var IEKeys;
+(function (IEKeys) {
+    IEKeys["ArrowUp"] = "Up";
+    IEKeys["ArrowDown"] = "Down";
+    IEKeys["ArrowRight"] = "Right";
+    IEKeys["ArrowLeft"] = "Left";
+    IEKeys["Space"] = "Spacebar";
+    IEKeys["Escape"] = "Esc";
+})(IEKeys || (IEKeys = {}));
 
 /*
  * 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 keyValidator(key) {
-    if (key === KeyCodes.ArrowUp || key === IEKeyCodes.ArrowUp) {
-        return KeyCodes.ArrowUp;
+function normalizeKey(key) {
+    if (key === Keys.ArrowUp || key === IEKeys.ArrowUp) {
+        return Keys.ArrowUp;
     }
-    else if (key === KeyCodes.ArrowDown || key === IEKeyCodes.ArrowDown) {
-        return KeyCodes.ArrowDown;
+    else if (key === Keys.ArrowDown || key === IEKeys.ArrowDown) {
+        return Keys.ArrowDown;
     }
-    else if (key === KeyCodes.ArrowRight || key === IEKeyCodes.ArrowRight) {
-        return KeyCodes.ArrowRight;
+    else if (key === Keys.ArrowRight || key === IEKeys.ArrowRight) {
+        return Keys.ArrowRight;
     }
-    else if (key === KeyCodes.ArrowLeft || key === IEKeyCodes.ArrowLeft) {
-        return KeyCodes.ArrowLeft;
+    else if (key === Keys.ArrowLeft || key === IEKeys.ArrowLeft) {
+        return Keys.ArrowLeft;
     }
-    else if (key === KeyCodes.Space || key === IEKeyCodes.Space) {
-        return KeyCodes.Space;
+    else if (key === Keys.Space || key === IEKeys.Space) {
+        return Keys.Space;
     }
-    else if (key === KeyCodes.Escape || key === IEKeyCodes.Escape) {
-        return KeyCodes.Escape;
+    else if (key === Keys.Escape || key === IEKeys.Escape) {
+        return Keys.Escape;
     }
     else {
         return key;
     }
 }
 function preventArrowKeyScroll(event) {
-    const validKey = keyValidator(event.key);
-    if (validKey === KeyCodes.ArrowUp ||
-        validKey === KeyCodes.ArrowDown ||
-        validKey === KeyCodes.ArrowLeft ||
-        validKey === KeyCodes.ArrowRight) {
+    const key = normalizeKey(event.key);
+    if (key === Keys.ArrowUp || key === Keys.ArrowDown || key === Keys.ArrowLeft || key === Keys.ArrowRight) {
         // prevent element container scroll
         // MDN references this is really the only way to prevent native browser interactions
         // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
@@ -4959,10 +4951,10 @@ class ClrKeyFocus {
         else if (this.nextKeyPressed(event) && this.currentFocusIsNotLastItem()) {
             this.moveTo(this.current + 1);
         }
-        else if (event.code === KeyCodes.Home) {
+        else if (event.code === Keys.Home) {
             this.moveTo(0);
         }
-        else if (event.code === KeyCodes.End) {
+        else if (event.code === Keys.End) {
             this.moveTo(this.focusableItems.length - 1);
         }
         preventArrowKeyScroll(event);
@@ -5010,27 +5002,27 @@ class ClrKeyFocus {
         });
     }
     nextKeyPressed(event) {
-        const key = keyValidator(event.key);
+        const key = normalizeKey(event.key);
         switch (this.direction) {
             case ClrFocusDirection.VERTICAL:
-                return key === KeyCodes.ArrowDown;
+                return key === Keys.ArrowDown;
             case ClrFocusDirection.HORIZONTAL:
-                return key === KeyCodes.ArrowRight;
+                return key === Keys.ArrowRight;
             case ClrFocusDirection.BOTH:
-                return key === KeyCodes.ArrowDown || key === KeyCodes.ArrowRight;
+                return key === Keys.ArrowDown || key === Keys.ArrowRight;
             default:
                 return false;
         }
     }
     prevKeyPressed(event) {
-        const key = keyValidator(event.key);
+        const key = normalizeKey(event.key);
         switch (this.direction) {
             case ClrFocusDirection.VERTICAL:
-                return key === KeyCodes.ArrowUp;
+                return key === Keys.ArrowUp;
             case ClrFocusDirection.HORIZONTAL:
-                return key === KeyCodes.ArrowLeft;
+                return key === Keys.ArrowLeft;
             case ClrFocusDirection.BOTH:
-                return key === KeyCodes.ArrowUp || key === KeyCodes.ArrowLeft;
+                return key === Keys.ArrowUp || key === Keys.ArrowLeft;
             default:
                 return false;
         }
@@ -5098,10 +5090,10 @@ class ClrRovingTabindex extends ClrKeyFocus {
         else if (this.nextKeyPressed(event) && this.currentFocusIsNotLastItem()) {
             this.updateTabindex(this.current + 1);
         }
-        else if (event.code === KeyCodes.Home) {
+        else if (event.code === Keys.Home) {
             this.updateTabindex(0);
         }
-        else if (event.code === KeyCodes.End) {
+        else if (event.code === Keys.End) {
             this.updateTabindex(this.focusableItems.length - 1);
         }
         super.handleKeyboardEvent(event);
@@ -5295,22 +5287,6 @@ const FOCUS_SERVICE_PROVIDER = {
     deps: [[new Optional(), new SkipSelf(), FocusService$1], 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.
- */
-const UP_ARROW = 38;
-const DOWN_ARROW = 40;
-const RIGHT_ARROW = 39;
-const LEFT_ARROW = 37;
-const ENTER = 13;
-const SPACE = 32;
-const SHIFT = 16;
-const TAB = 9;
-const ESC = 27;
-const BACKSPACE = 8;
-
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -5762,10 +5738,10 @@ class ComboboxFocusHandler {
     // this service is only interested in keys that may move the focus
     handleTextInput(event) {
         let preventDefault = false;
-        const key = keyValidator(event.key);
+        const key = normalizeKey(event.key);
         if (event) {
             switch (key) {
-                case KeyCodes.Enter:
+                case Keys.Enter:
                     if (this.toggleService.open && this.pseudoFocus.model) {
                         if (this.selectionService.multiselectable) {
                             this.selectionService.toggle(this.pseudoFocus.model.value);
@@ -5776,27 +5752,27 @@ class ComboboxFocusHandler {
                         preventDefault = true;
                     }
                     break;
-                case KeyCodes.Space:
+                case Keys.Space:
                     if (!this.toggleService.open) {
                         this.toggleService.open = true;
                         preventDefault = true;
                     }
                     break;
-                case KeyCodes.ArrowUp:
+                case Keys.ArrowUp:
                     this.preventViewportScrolling(event);
                     this.openAndMoveTo(ArrowKeyDirection.UP);
                     preventDefault = true;
                     break;
-                case KeyCodes.ArrowDown:
+                case Keys.ArrowDown:
                     this.preventViewportScrolling(event);
                     this.openAndMoveTo(ArrowKeyDirection.DOWN);
                     preventDefault = true;
                     break;
                 default:
                     // Any other keypress
-                    if (event.key !== KeyCodes.Tab &&
-                        !(this.selectionService.multiselectable && event.key === KeyCodes.Backspace) &&
-                        !(event.key === KeyCodes.Escape) &&
+                    if (event.key !== Keys.Tab &&
+                        !(this.selectionService.multiselectable && event.key === Keys.Backspace) &&
+                        !(event.key === Keys.Escape) &&
                         !this.toggleService.open) {
                         this.toggleService.open = true;
                     }
@@ -6243,7 +6219,7 @@ class ClrCombobox extends WrappedFormControl {
     }
     onKeyUp(event) {
         // if BACKSPACE in multiselect mode, delete the last pill if text is empty
-        if (event.keyCode === BACKSPACE && this.multiSelect && this._searchText.length === 0) {
+        if (event.key === Keys.Backspace && this.multiSelect && this._searchText.length === 0) {
             const multiModel = this.optionSelectionService.selectionModel.model;
             if (multiModel && multiModel.length > 0) {
                 const lastItem = multiModel[multiModel.length - 1];
@@ -8011,20 +7987,20 @@ class ClrCalendar {
      */
     onKeyDown(event) {
         if (event && this.focusedDay) {
-            switch (event.keyCode) {
-                case UP_ARROW:
+            switch (normalizeKey(event.key)) {
+                case Keys.ArrowUp:
                     event.preventDefault();
                     this._dateNavigationService.incrementFocusDay(-1 * NO_OF_DAYS_IN_A_WEEK);
                     break;
-                case DOWN_ARROW:
+                case Keys.ArrowDown:
                     event.preventDefault();
                     this._dateNavigationService.incrementFocusDay(NO_OF_DAYS_IN_A_WEEK);
                     break;
-                case LEFT_ARROW:
+                case Keys.ArrowLeft:
                     event.preventDefault();
                     this._dateNavigationService.incrementFocusDay(-1);
                     break;
-                case RIGHT_ARROW:
+                case Keys.ArrowRight:
                     event.preventDefault();
                     this._dateNavigationService.incrementFocusDay(1);
                     break;
@@ -8207,23 +8183,23 @@ class ClrMonthpicker {
         // the logic is fairly simple and it didn't make sense for me
         // to create extra observables just to move this logic to the service.
         if (event) {
-            const keyCode = event.keyCode;
-            if (keyCode === UP_ARROW && this._focusedMonthIndex > 0) {
+            const key = normalizeKey(event.key);
+            if (key === Keys.ArrowUp && this._focusedMonthIndex > 0) {
                 event.preventDefault();
                 this._focusedMonthIndex--;
                 this._datepickerFocusService.focusCell(this._elRef);
             }
-            else if (keyCode === DOWN_ARROW && this._focusedMonthIndex < 11) {
+            else if (key === Keys.ArrowDown && this._focusedMonthIndex < 11) {
                 event.preventDefault();
                 this._focusedMonthIndex++;
                 this._datepickerFocusService.focusCell(this._elRef);
             }
-            else if (keyCode === RIGHT_ARROW && this._focusedMonthIndex < 6) {
+            else if (key === Keys.ArrowRight && this._focusedMonthIndex < 6) {
                 event.preventDefault();
                 this._focusedMonthIndex = this._focusedMonthIndex + 6;
                 this._datepickerFocusService.focusCell(this._elRef);
             }
-            else if (keyCode === LEFT_ARROW && this._focusedMonthIndex > 5) {
+            else if (key === Keys.ArrowLeft && this._focusedMonthIndex > 5) {
                 event.preventDefault();
                 this._focusedMonthIndex = this._focusedMonthIndex - 6;
                 this._datepickerFocusService.focusCell(this._elRef);
@@ -8427,20 +8403,20 @@ class ClrYearpicker {
         // the logic is fairly simple and it didn't make sense for me
         // to create extra observables just to move this logic to the service.
         if (event) {
-            const keyCode = event.keyCode;
-            if (keyCode === UP_ARROW) {
+            const key = normalizeKey(event.key);
+            if (key === Keys.ArrowUp) {
                 event.preventDefault();
                 this.incrementFocusYearBy(-1);
             }
-            else if (keyCode === DOWN_ARROW) {
+            else if (key === Keys.ArrowDown) {
                 event.preventDefault();
                 this.incrementFocusYearBy(1);
             }
-            else if (keyCode === RIGHT_ARROW) {
+            else if (key === Keys.ArrowRight) {
                 event.preventDefault();
                 this.incrementFocusYearBy(5);
             }
-            else if (keyCode === LEFT_ARROW) {
+            else if (key === Keys.ArrowLeft) {
                 event.preventDefault();
                 this.incrementFocusYearBy(-5);
             }
@@ -8734,11 +8710,11 @@ class ClrDateContainer extends ClrAbstractContainer {
     getToggleButtonLabel(day) {
         if (day) {
             const formattedDate = this.dateIOService.toLocaleDisplayFormatString(day.toDate());
-            return (this.commonStrings.parse(this.commonStrings.keys.datepickerToggleChangeDateLabel, {
+            return this.commonStrings.parse(this.commonStrings.keys.datepickerToggleChangeDateLabel, {
                 SELECTED_DATE: formattedDate,
-            }) || this.commonStrings.keys.datepickerToggle);
+            });
         }
-        return this.commonStrings.keys.datepickerToggleChooseDateLabel || this.commonStrings.keys.datepickerToggle;
+        return this.commonStrings.keys.datepickerToggleChooseDateLabel;
     }
     listenForDateChanges() {
         // because date-input.ts initializes the input in ngAfterViewInit,
@@ -12268,10 +12244,10 @@ class ClrDatagridColumnSeparator {
         }
     }
     isArrowLeftKeyEvent(event) {
-        return event.key === KeyCodes.ArrowLeft || event.key === IEKeyCodes.ArrowLeft;
+        return normalizeKey(event.key) === Keys.ArrowLeft;
     }
     isArrowRightKeyEvent(event) {
-        return event.key === KeyCodes.ArrowRight || event.key === IEKeyCodes.ArrowRight;
+        return normalizeKey(event.key) === Keys.ArrowRight;
     }
     ngOnDestroy() {
         this.unlisteners.forEach(unlistener => unlistener());
@@ -15218,12 +15194,12 @@ class ClrDatagridDetail {
         this.detailService = detailService;
         this.commonStrings = commonStrings;
     }
-    closeCheck() {
+    close() {
         this.detailService.close();
     }
 }
 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: `
+ClrDatagridDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridDetail, selector: "clr-dg-detail", host: { listeners: { "document:keyup.escape": "close()" }, properties: { "class.datagrid-detail-pane": "true" } }, queries: [{ propertyName: "header", first: true, predicate: ClrDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
     <div
       cdkTrapFocus
       [cdkTrapFocusAutoCapture]="true"
@@ -15268,9 +15244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: DetailService }, { type: ClrCommonStringsService }]; }, propDecorators: { header: [{
                 type: ContentChild,
                 args: [ClrDatagridDetailHeader]
-            }], closeCheck: [{
+            }], close: [{
                 type: HostListener,
-                args: ['document:keyup.esc']
+                args: ['document:keyup.escape']
             }] } });
 
 /*
@@ -15773,19 +15749,19 @@ class ClrDatagridPageSize {
 }
 ClrDatagridPageSize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridPageSize, deps: [{ token: Page }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridPageSize.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridPageSize, selector: "clr-dg-page-size", inputs: { pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeOptionsId: ["clrPageSizeOptionsId", "pageSizeOptionsId"] }, ngImport: i0, template: `
-    <ng-content></ng-content>
+    <label [for]="pageSizeOptionsId"><ng-content></ng-content></label>
     <div class="clr-select-wrapper">
       <select [id]="pageSizeOptionsId" [class.clr-page-size-select]="true" [(ngModel)]="page.size">
         <option *ngFor="let option of pageSizeOptions" [ngValue]="option">{{ option }}</option>
       </select>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: ClrDatagridPageSize, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-page-size',
                     template: `
-    <ng-content></ng-content>
+    <label [for]="pageSizeOptionsId"><ng-content></ng-content></label>
     <div class="clr-select-wrapper">
       <select [id]="pageSizeOptionsId" [class.clr-page-size-select]="true" [(ngModel)]="page.size">
         <option *ngFor="let option of pageSizeOptions" [ngValue]="option">{{ option }}</option>
@@ -18046,15 +18022,17 @@ class ClrTreeNode {
         this.subscriptions.push(this._model.loading$.pipe(debounceTime(0)).subscribe(isLoading => (this.isModelLoading = isLoading)));
     }
     ngAfterContentInit() {
-        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 = '';
         }));
     }
+    ngAfterViewInit() {
+        if (!this._model.textContent) {
+            this._model.textContent = trimAndLowerCase(this.elementRef.nativeElement.textContent);
+        }
+    }
     ngOnDestroy() {
         this._model.destroy();
         this.subscriptions.forEach(sub => sub.unsubscribe());
@@ -18089,32 +18067,32 @@ class ClrTreeNode {
         //    By default, pressing arrow key makes AT focus go into the nested content of the item.
         preventArrowKeyScroll(event);
         // https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-22
-        switch (keyValidator(event.key)) {
-            case KeyCodes.ArrowUp:
+        switch (normalizeKey(event.key)) {
+            case Keys.ArrowUp:
                 this.focusManager.focusNodeAbove(this._model);
                 break;
-            case KeyCodes.ArrowDown:
+            case Keys.ArrowDown:
                 this.focusManager.focusNodeBelow(this._model);
                 break;
-            case KeyCodes.ArrowRight:
+            case Keys.ArrowRight:
                 this.expandOrFocusFirstChild();
                 break;
-            case KeyCodes.ArrowLeft:
+            case Keys.ArrowLeft:
                 this.collapseOrFocusParent();
                 break;
-            case KeyCodes.Home:
+            case Keys.Home:
                 event.preventDefault();
                 this.focusManager.focusFirstVisibleNode();
                 break;
-            case KeyCodes.End:
+            case Keys.End:
                 event.preventDefault();
                 this.focusManager.focusLastVisibleNode();
                 break;
-            case KeyCodes.Enter:
+            case Keys.Enter:
                 this.toggleExpandOrTriggerDefault();
                 break;
-            case KeyCodes.Space:
-            case KeyCodes.Spacebar:
+            case Keys.Space:
+            case Keys.Spacebar:
                 // to prevent scrolling on space key in this specific case
                 event.preventDefault();
                 this.toggleExpandOrTriggerDefault();
@@ -18176,7 +18154,7 @@ 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: 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: [
+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\">\n      <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n    </label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\" *ngIf=\"!featuresService.selectable\">\n    <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n  </div>\n\n  <ng-template #treenodeContent>\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  </ng-template>\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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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 }))]),
@@ -18195,7 +18173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         ]),
                     ], host: {
                         '[class.clr-tree-node]': 'true',
-                    }, 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" }]
+                    }, 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\">\n      <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n    </label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\" *ngIf=\"!featuresService.selectable\">\n    <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n  </div>\n\n  <ng-template #treenodeContent>\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  </ng-template>\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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -18483,10 +18461,10 @@ class DropdownFocusHandler {
         // whether root container or not, tab key should always toggle (i.e. close) the container
         this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.tab', event => this.toggleService.toggleWithEvent(event)));
         if (this.parent) {
-            // if it's a nested container, pressing esc has the same effect as pressing left key, which closes the current
+            // if it's a nested container, pressing escape has the same effect as pressing left key, which closes the current
             // popup and moves up to its parent. Here, we stop propagation so that the parent container
-            // doesn't receive the esc keydown
-            this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.esc', event => {
+            // doesn't receive the escape keydown
+            this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.escape', event => {
                 this.focusService.move(ArrowKeyDirection.LEFT);
                 event.stopPropagation();
             }));
@@ -18494,8 +18472,8 @@ class DropdownFocusHandler {
         else {
             // The root container is the only one we register to the focus service, others do not need focus
             this.focusService.registerContainer(el);
-            // The root container will simply close the container when esc key is pressed
-            this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.esc', event => this.toggleService.toggleWithEvent(event)));
+            // The root container will simply close the container when escape key is pressed
+            this._unlistenFuncs.push(this.renderer.listen(el, 'keydown.escape', event => this.toggleService.toggleWithEvent(event)));
             // When the user moves focus outside of the menu, we close the dropdown
             this._unlistenFuncs.push(this.renderer.listen(el, 'blur', event => {
                 // we clear out any existing focus on the items
@@ -19056,7 +19034,6 @@ class Popover {
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-// Literally any annotation would work here, but writing our own @HoneyBadger annotation feels overkill.
 class AbstractPopover {
     constructor(injector, parentHost) {
         this.parentHost = parentHost;
@@ -19135,7 +19112,7 @@ class AbstractPopover {
         this.ngZone.runOutsideAngular(() => {
             this.documentESCListener = this.renderer.listen('document', 'keydown', event => {
                 if (event && event.key) {
-                    if (event.key === 'Escape' || event.key === 'Esc') {
+                    if (normalizeKey(event.key) === Keys.Escape) {
                         this.ngZone.run(() => {
                             this.toggleService.open = false;
                             this.ref.markForCheck();
@@ -21094,7 +21071,7 @@ ClrTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0
           <!--tab links in overflow menu-->
           <clr-tab-overflow-content
             *ngIf="toggleService.open"
-            (document:keydown.esc)="closeOnEscapeKey()"
+            (document:keydown.escape)="closeOnEscapeKey()"
             (document:click)="closeOnOutsideClick($event, tabOverflowTrigger)"
             (focusout)="closeOnFocusOut($event)"
           >
@@ -21158,7 +21135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
           <!--tab links in overflow menu-->
           <clr-tab-overflow-content
             *ngIf="toggleService.open"
-            (document:keydown.esc)="closeOnEscapeKey()"
+            (document:keydown.escape)="closeOnEscapeKey()"
             (document:click)="closeOnOutsideClick($event, tabOverflowTrigger)"
             (focusout)="closeOnFocusOut($event)"
           >
@@ -21810,7 +21787,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"], 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: [
+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 [cdkTrapFocusAutoCapture]=\"true\" 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%)' }))]),
@@ -21831,7 +21808,7 @@ 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 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"] }]
+                    ], 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 [cdkTrapFocusAutoCapture]=\"true\" 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']
@@ -22184,6 +22161,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             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.
+ */
+class TooltipMouseService {
+    constructor(toggleService) {
+        this.toggleService = toggleService;
+    }
+    onMouseEnterTrigger() {
+        this.mouseOverTrigger = true;
+        this.toggleService.open = true;
+    }
+    onMouseLeaveTrigger() {
+        this.mouseOverTrigger = false;
+        this.hideIfMouseOut();
+    }
+    onMouseEnterContent() {
+        this.mouseOverContent = true;
+    }
+    onMouseLeaveContent() {
+        this.mouseOverContent = false;
+        this.hideIfMouseOut();
+    }
+    hideIfMouseOut() {
+        // A zero timeout is used so that the code has a chance to update
+        // the `mouseOverContent` property after the user moves the mouse from the trigger to the content.
+        setTimeout(() => {
+            if (!this.mouseOverTrigger && !this.mouseOverContent) {
+                this.toggleService.open = false;
+            }
+        }, 0);
+    }
+}
+TooltipMouseService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TooltipMouseService, deps: [{ token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Injectable });
+TooltipMouseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TooltipMouseService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TooltipMouseService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ClrPopoverToggleService }]; } });
+
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -22192,7 +22209,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
 class ClrTooltip {
 }
 ClrTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTooltip, selector: "clr-tooltip", host: { properties: { "class.tooltip": "true" } }, providers: [ClrPopoverToggleService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }, TooltipIdService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+ClrTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTooltip, selector: "clr-tooltip", host: { properties: { "class.tooltip": "true" } }, providers: [
+        ClrPopoverToggleService,
+        { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
+        TooltipIdService,
+        TooltipMouseService,
+    ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltip, decorators: [{
             type: Component,
             args: [{
@@ -22201,7 +22223,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                     host: {
                         '[class.tooltip]': 'true',
                     },
-                    providers: [ClrPopoverToggleService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }, TooltipIdService],
+                    providers: [
+                        ClrPopoverToggleService,
+                        { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
+                        TooltipIdService,
+                        TooltipMouseService,
+                    ],
                 }]
         }] });
 
@@ -22224,9 +22251,10 @@ const SIZES = ['xs', 'sm', 'md', 'lg'];
 const defaultPosition = 'right';
 const defaultSize = 'sm';
 class ClrTooltipContent extends AbstractPopover {
-    constructor(injector, parentHost, tooltipIdService) {
+    constructor(injector, parentHost, tooltipIdService, tooltipMouseService) {
         super(injector, parentHost);
         this.tooltipIdService = tooltipIdService;
+        this.tooltipMouseService = tooltipMouseService;
         if (!parentHost) {
             throw new Error('clr-tooltip-content should only be used inside of a clr-tooltip');
         }
@@ -22292,13 +22320,19 @@ class ClrTooltipContent extends AbstractPopover {
         this.size = this.size || defaultSize;
         this.position = this.position || defaultPosition;
     }
+    onMouseEnter() {
+        this.tooltipMouseService.onMouseEnterContent();
+    }
+    onMouseLeave() {
+        this.tooltipMouseService.onMouseLeaveContent();
+    }
     updateCssClass({ oldClass, newClass }) {
         this.renderer.removeClass(this.el.nativeElement, oldClass);
         this.renderer.addClass(this.el.nativeElement, newClass);
     }
 }
-ClrTooltipContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltipContent, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: TooltipIdService }], target: i0.ɵɵFactoryTarget.Component });
-ClrTooltipContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTooltipContent, selector: "clr-tooltip-content", inputs: { id: "id", position: ["clrPosition", "position"], size: ["clrSize", "size"] }, host: { properties: { "class.tooltip-content": "true", "style.opacity": "1", "attr.role": "\"tooltip\"", "id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+ClrTooltipContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltipContent, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: TooltipIdService }, { token: TooltipMouseService }], target: i0.ɵɵFactoryTarget.Component });
+ClrTooltipContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTooltipContent, selector: "clr-tooltip-content", inputs: { id: "id", position: ["clrPosition", "position"], size: ["clrSize", "size"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.tooltip-content": "true", "style.opacity": "1", "attr.role": "\"tooltip\"", "id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltipContent, decorators: [{
             type: Component,
             args: [{
@@ -22316,7 +22350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 }, {
                     type: Inject,
                     args: [POPOVER_HOST_ANCHOR]
-                }] }, { type: TooltipIdService }]; }, propDecorators: { id: [{
+                }] }, { type: TooltipIdService }, { type: TooltipMouseService }]; }, propDecorators: { id: [{
                 type: Input
             }], position: [{
                 type: Input,
@@ -22324,6 +22358,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
             }], size: [{
                 type: Input,
                 args: ['clrSize']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
 /*
@@ -22332,25 +22372,32 @@ 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 ClrTooltipTrigger {
-    constructor(toggleService, tooltipIdService) {
+    constructor(toggleService, tooltipIdService, tooltipMouseService) {
         this.toggleService = toggleService;
         this.tooltipIdService = tooltipIdService;
+        this.tooltipMouseService = tooltipMouseService;
         this.subs = [];
         // The aria-described by comes from the id of content. It
         this.subs.push(this.tooltipIdService.id.subscribe(tooltipId => (this.ariaDescribedBy = tooltipId)));
     }
+    ngOnDestroy() {
+        this.subs.forEach(sub => sub.unsubscribe());
+    }
     showTooltip() {
         this.toggleService.open = true;
     }
     hideTooltip() {
         this.toggleService.open = false;
     }
-    ngOnDestroy() {
-        this.subs.forEach(sub => sub.unsubscribe());
+    onMouseEnter() {
+        this.tooltipMouseService.onMouseEnterTrigger();
+    }
+    onMouseLeave() {
+        this.tooltipMouseService.onMouseLeaveTrigger();
     }
 }
-ClrTooltipTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltipTrigger, deps: [{ token: ClrPopoverToggleService }, { token: TooltipIdService }], target: i0.ɵɵFactoryTarget.Directive });
-ClrTooltipTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrTooltipTrigger, selector: "[clrTooltipTrigger]", host: { attributes: { "tabindex": "0" }, listeners: { "mouseenter": "showTooltip()", "focus": "showTooltip()", "mouseleave": "hideTooltip()", "blur": "hideTooltip()" }, properties: { "class.tooltip-trigger": "true", "attr.aria-describedby": "ariaDescribedBy", "attr.role": "\"button\"" } }, ngImport: i0 });
+ClrTooltipTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltipTrigger, deps: [{ token: ClrPopoverToggleService }, { token: TooltipIdService }, { token: TooltipMouseService }], target: i0.ɵɵFactoryTarget.Directive });
+ClrTooltipTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClrTooltipTrigger, selector: "[clrTooltipTrigger]", host: { attributes: { "tabindex": "0" }, listeners: { "focus": "showTooltip()", "blur": "hideTooltip()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.tooltip-trigger": "true", "attr.aria-describedby": "ariaDescribedBy", "attr.role": "\"button\"" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrTooltipTrigger, decorators: [{
             type: Directive,
             args: [{
@@ -22362,18 +22409,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         '[attr.role]': '"button"',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: ClrPopoverToggleService }, { type: TooltipIdService }]; }, propDecorators: { showTooltip: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }, {
+        }], ctorParameters: function () { return [{ type: ClrPopoverToggleService }, { type: TooltipIdService }, { type: TooltipMouseService }]; }, propDecorators: { showTooltip: [{
                 type: HostListener,
                 args: ['focus']
             }], hideTooltip: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }, {
                 type: HostListener,
                 args: ['blur']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
 /*