@clr/angular 16.3.5 → 16.3.7

package/fesm2020/clr-angular.mjs

@@ -2939,15 +2939,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrExpandableAnimation {
-    constructor(element, domAdapter) {
+    constructor(element, domAdapter, renderer) {
         this.element = element;
         this.domAdapter = domAdapter;
+        this.renderer = renderer;
         this.startHeight = 0;
     }
     get expandAnimation() {
         return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
     }
+    animationStart() {
+        this.renderer.setStyle(this.element.nativeElement, 'overflow', 'hidden');
+    }
     animationDone() {
+        this.renderer.removeStyle(this.element.nativeElement, 'overflow');
         // A "safe" auto-update of the height ensuring basic OOTB user experience .
         // Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
         // For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.
@@ -2957,8 +2962,8 @@ class ClrExpandableAnimation {
         this.startHeight = this.domAdapter.computedHeight(this.element.nativeElement) || 0;
     }
 }
-ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
-ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;overflow:hidden}\n"], animations: [
+ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.start": "animationStart()", "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], animations: [
         trigger('expandAnimation', [
             transition('true <=> false', [
                 style({ height: '{{startHeight}}px' }),
@@ -2975,12 +2980,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                                 animate('0.2s ease-in-out', style({ height: '*' })),
                             ]),
                         ]),
-                    ], providers: [DomAdapter], styles: [":host{display:block;overflow:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }]; }, propDecorators: { clrExpandTrigger: [{
+                    ], providers: [DomAdapter], styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }, { type: i0.Renderer2 }]; }, propDecorators: { clrExpandTrigger: [{
                 type: Input
             }], expandAnimation: [{
                 type: HostBinding,
                 args: ['@expandAnimation']
+            }], animationStart: [{
+                type: HostListener,
+                args: ['@expandAnimation.start']
             }], animationDone: [{
                 type: HostListener,
                 args: ['@expandAnimation.done']
@@ -3855,10 +3863,10 @@ class ClrButtonGroup {
     }
 }
 ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: ClrCommonStringsService }, { token: ClrDestroyService }, { token: ButtonGroupFocusHandler }], target: i0.ɵɵFactoryTarget.Component });
-ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrButtonGroup, selector: "clr-button-group", inputs: { clrToggleButtonAriaLabel: "clrToggleButtonAriaLabel", menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], queries: [{ propertyName: "buttons", predicate: ClrButton }], viewQueries: [{ propertyName: "menuToggle", first: true, predicate: ["menuToggle"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-container *ngFor=\"let inlineButton of inlineButtons\">\n  <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n  <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n    <button\n      #menuToggle\n      class=\"btn dropdown-toggle\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\n      (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-label]=\"clrToggleButtonAriaLabel\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n    </button>\n    <div\n      #menu\n      role=\"menu\"\n      class=\"dropdown-menu clr-button-group-menu\"\n      [id]=\"popoverId\"\n      [attr.id]=\"popoverId\"\n      [attr.aria-hidden]=\"!open\"\n      *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n    </div>\n  </div>\n</ng-container>\n<ng-template #ref>\n  <ng-container *ngFor=\"let menuButton of menuButtons\">\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
+ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrButtonGroup, selector: "clr-button-group", inputs: { clrToggleButtonAriaLabel: "clrToggleButtonAriaLabel", menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], queries: [{ propertyName: "buttons", predicate: ClrButton }], viewQueries: [{ propertyName: "menuToggle", first: true, predicate: ["menuToggle"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-template *ngFor=\"let inlineButton of inlineButtons\" [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n\n<div *ngIf=\"menuButtons.length > 0\" class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\">\n  <button\n    #menuToggle\n    class=\"btn dropdown-toggle\"\n    clrPopoverAnchor\n    clrPopoverOpenCloseButton\n    (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\n    (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\n    [attr.aria-controls]=\"popoverId\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-label]=\"clrToggleButtonAriaLabel\"\n  >\n    <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n  </button>\n  <div\n    #menu\n    role=\"menu\"\n    class=\"dropdown-menu clr-button-group-menu\"\n    [id]=\"popoverId\"\n    [attr.id]=\"popoverId\"\n    [attr.aria-hidden]=\"!open\"\n    *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n  >\n    <ng-template *ngFor=\"let menuButton of menuButtons\" [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrButtonGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-button-group', providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], hostDirectives: [ClrPopoverHostDirective], host: { '[class.btn-group]': 'true' }, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-container *ngFor=\"let inlineButton of inlineButtons\">\n  <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n  <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n    <button\n      #menuToggle\n      class=\"btn dropdown-toggle\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\n      (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-label]=\"clrToggleButtonAriaLabel\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n    </button>\n    <div\n      #menu\n      role=\"menu\"\n      class=\"dropdown-menu clr-button-group-menu\"\n      [id]=\"popoverId\"\n      [attr.id]=\"popoverId\"\n      [attr.aria-hidden]=\"!open\"\n      *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n    </div>\n  </div>\n</ng-container>\n<ng-template #ref>\n  <ng-container *ngFor=\"let menuButton of menuButtons\">\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'clr-button-group', providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], hostDirectives: [ClrPopoverHostDirective], host: { '[class.btn-group]': 'true' }, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-template *ngFor=\"let inlineButton of inlineButtons\" [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n\n<div *ngIf=\"menuButtons.length > 0\" class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\">\n  <button\n    #menuToggle\n    class=\"btn dropdown-toggle\"\n    clrPopoverAnchor\n    clrPopoverOpenCloseButton\n    (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\n    (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\n    [attr.aria-controls]=\"popoverId\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-label]=\"clrToggleButtonAriaLabel\"\n  >\n    <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n  </button>\n  <div\n    #menu\n    role=\"menu\"\n    class=\"dropdown-menu clr-button-group-menu\"\n    [id]=\"popoverId\"\n    [attr.id]=\"popoverId\"\n    [attr.aria-hidden]=\"!open\"\n    *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n  >\n    <ng-template *ngFor=\"let menuButton of menuButtons\" [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ButtonInGroupService }, { type: ClrPopoverToggleService }, { type: ClrCommonStringsService }, { type: ClrDestroyService }, { type: ButtonGroupFocusHandler }]; }, propDecorators: { clrToggleButtonAriaLabel: [{
                 type: Input,
                 args: ['clrToggleButtonAriaLabel']
@@ -12265,6 +12273,9 @@ class ModalStackService {
     }
     onKeyUp(event) {
         if (this.modalStack.length && normalizeKey(event.key) === Keys.Escape) {
+            // We blur the active element because escaping with an input element in focus could cause
+            // an ExpressionChangedAfterItHasBeenCheckedError for the touched state. (CDE-1662)
+            document.activeElement.blur();
             this.modalStack[0].close();
         }
     }