@clr/angular 13.11.0 → 13.11.2

package/fesm2015/clr-angular.mjs

@@ -1328,69 +1328,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * 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 = {}));
-
-/*
- * 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;
-    }
-    else if (key === KeyCodes.ArrowDown || key === IEKeyCodes.ArrowDown) {
-        return KeyCodes.ArrowDown;
-    }
-    else if (key === KeyCodes.ArrowRight || key === IEKeyCodes.ArrowRight) {
-        return KeyCodes.ArrowRight;
-    }
-    else if (key === KeyCodes.ArrowLeft || key === IEKeyCodes.ArrowLeft) {
-        return KeyCodes.ArrowLeft;
-    }
-    else if (key === KeyCodes.Space || key === IEKeyCodes.Space) {
-        return KeyCodes.Space;
-    }
-    else if (key === KeyCodes.Escape || key === IEKeyCodes.Escape) {
-        return KeyCodes.Escape;
+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 normalizeKey(key) {
+    if (key === Keys.ArrowUp || key === IEKeys.ArrowUp) {
+        return Keys.ArrowUp;
+    }
+    else if (key === Keys.ArrowDown || key === IEKeys.ArrowDown) {
+        return Keys.ArrowDown;
+    }
+    else if (key === Keys.ArrowRight || key === IEKeys.ArrowRight) {
+        return Keys.ArrowRight;
+    }
+    else if (key === Keys.ArrowLeft || key === IEKeys.ArrowLeft) {
+        return Keys.ArrowLeft;
+    }
+    else if (key === Keys.Space || key === IEKeys.Space) {
+        return Keys.Space;
+    }
+    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
@@ -5002,10 +4995,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);
@@ -5053,27 +5046,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;
         }
@@ -5141,10 +5134,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);
@@ -5338,22 +5331,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.
@@ -5807,10 +5784,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);
@@ -5821,27 +5798,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;
                     }
@@ -6294,7 +6271,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];
@@ -8250,20 +8227,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;
@@ -8448,23 +8425,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);
@@ -8668,20 +8645,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);
             }
@@ -13464,10 +13441,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());
@@ -16482,7 +16459,7 @@ class ClrDatagridDetail {
     }
 }
 ClrDatagridDetail.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridDetail, deps: [{ token: DetailService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: ClrDatagridDetail, selector: "clr-dg-detail", host: { listeners: { "document:keyup.escape": "closeCheck()" }, properties: { "class.datagrid-detail-pane": "true" } }, queries: [{ propertyName: "header", first: true, predicate: ClrDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
     <div
       [clrFocusTrap]="{ strict: false }"
       class="datagrid-detail-pane-content"
@@ -16527,7 +16504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [ClrDatagridDetailHeader]
             }], closeCheck: [{
                 type: HostListener,
-                args: ['document:keyup.esc']
+                args: ['document:keyup.escape']
             }] } });
 
 /*
@@ -19816,32 +19793,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();
@@ -20210,10 +20187,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();
             }));
@@ -20221,8 +20198,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
@@ -20446,11 +20423,9 @@ 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;
     }
@@ -20481,22 +20456,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: "13.3.11", 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: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClrDropdownItem, deps: [{ token: ClrDropdown }, { token: RootDropdownService }, { token: FocusableItem }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDropdownItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClrDropdownItem, selector: "[clrDropdownItem]", inputs: { disabled: ["clrDisabled", "disabled"], disabledDeprecated: ["disabled", "disabledDeprecated"], 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.disabled": "(disabled && setByDeprecatedDisabled)? '' : null", "attr.id": "dropdownItemId" } }, providers: [BASIC_FOCUSABLE_ITEM_PROVIDER], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDropdownItem, decorators: [{
             type: Directive,
             args: [{
@@ -20511,7 +20492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     },
                     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: [{
@@ -20520,6 +20501,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], dropdownItemId: [{
                 type: Input,
                 args: ['id']
+            }], onDropdownItemClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onSpaceKeydown: [{
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }], onEnterKeydown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
             }] } });
 
 /*
@@ -20792,7 +20782,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;
@@ -20871,7 +20860,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();
@@ -22975,7 +22964,7 @@ ClrTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3
           <!--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)"
           >
@@ -23039,7 +23028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           <!--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)"
           >
@@ -24096,6 +24085,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             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: "13.3.11", ngImport: i0, type: TooltipMouseService, deps: [{ token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Injectable });
+TooltipMouseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TooltipMouseService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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.
@@ -24104,7 +24133,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class ClrTooltip {
 }
 ClrTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClrTooltip, decorators: [{
             type: Component,
             args: [{
@@ -24113,7 +24147,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     host: {
                         '[class.tooltip]': 'true',
                     },
-                    providers: [ClrPopoverToggleService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }, TooltipIdService],
+                    providers: [
+                        ClrPopoverToggleService,
+                        { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
+                        TooltipIdService,
+                        TooltipMouseService,
+                    ],
                 }]
         }] });
 
@@ -24136,9 +24175,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');
         }
@@ -24204,13 +24244,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: "13.3.11", 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: "12.0.0", version: "13.3.11", 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: "13.3.11", 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: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClrTooltipContent, decorators: [{
             type: Component,
             args: [{
@@ -24229,7 +24275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }, {
                         type: Inject,
                         args: [POPOVER_HOST_ANCHOR]
-                    }] }, { type: TooltipIdService }];
+                    }] }, { type: TooltipIdService }, { type: TooltipMouseService }];
     }, propDecorators: { id: [{
                 type: Input
             }], position: [{
@@ -24238,6 +24284,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], size: [{
                 type: Input,
                 args: ['clrSize']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
 /*
@@ -24246,25 +24298,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * 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: "13.3.11", ngImport: i0, type: ClrTooltipTrigger, deps: [{ token: ClrPopoverToggleService }, { token: TooltipIdService }], target: i0.ɵɵFactoryTarget.Directive });
-ClrTooltipTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClrTooltipTrigger, deps: [{ token: ClrPopoverToggleService }, { token: TooltipIdService }, { token: TooltipMouseService }], target: i0.ɵɵFactoryTarget.Directive });
+ClrTooltipTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ClrTooltipTrigger, decorators: [{
             type: Directive,
             args: [{
@@ -24276,18 +24335,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[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']
             }] } });
 
 /*