@clr/angular 13.0.0-next.0 → 13.0.0-next.1

package/fesm2020/clr-angular.mjs

@@ -18523,6 +18523,7 @@ class AbstractPopover {
     constructor(injector, parentHost) {
         this.parentHost = parentHost;
         this.updateAnchor = false;
+        this.recentlyOpened = false;
         this.popoverOptions = {};
         /*
          * Until https://github.com/angular/angular/issues/8785 is supported, we don't have any way to instantiate
@@ -18539,6 +18540,7 @@ class AbstractPopover {
             if (change) {
                 this.anchor();
                 this.attachESCListener();
+                this.setRecentlyOpened();
             }
             else {
                 this.release();
@@ -18548,6 +18550,7 @@ class AbstractPopover {
         if (this.toggleService.open) {
             this.anchor();
             this.attachESCListener();
+            this.setRecentlyOpened();
         }
     }
     anchor() {
@@ -18606,7 +18609,7 @@ class AbstractPopover {
                 this.ignoredElementClickListener = this.renderer.listen(this.ignoredElement, 'click', event => (this.ignore = event));
             }
             this.documentClickListener = this.renderer.listen('document', 'click', event => {
-                if (event === this.ignore) {
+                if (event === this.ignore || this.recentlyOpened) {
                     delete this.ignore;
                 }
                 else {
@@ -18631,6 +18634,12 @@ class AbstractPopover {
             }
         }
     }
+    setRecentlyOpened() {
+        this.recentlyOpened = true;
+        setTimeout(() => {
+            this.recentlyOpened = false;
+        });
+    }
 }
 AbstractPopover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: AbstractPopover, deps: [{ token: i0.Injector }, { token: i0.ElementRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 AbstractPopover.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: AbstractPopover, host: { properties: { "class.is-off-screen": "this.isOffScreen" } }, ngImport: i0 });
@@ -21063,7 +21072,7 @@ class ClrModal {
     }
 }
 ClrModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ClrModal, deps: [{ token: ScrollingService }, { token: ClrCommonStringsService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"], stopClose: ["clrModalPreventClose", "stopClose"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, providers: [UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "focusTrap", first: true, predicate: FocusTrapDirective, descendants: true }], usesOnChanges: 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 clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"modalId\"\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]=\"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        <ng-content select=\".modal-body\"></ng-content>\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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
+ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"], stopClose: ["clrModalPreventClose", "stopClose"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, providers: [UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "focusTrap", first: true, predicate: FocusTrapDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"modalId\"\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]=\"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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], 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%)' }))]),
@@ -21093,7 +21102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", 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 }))]),
                         ]),
-                    ], providers: [UNIQUE_ID_PROVIDER], 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 clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"modalId\"\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]=\"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        <ng-content select=\".modal-body\"></ng-content>\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" }]
+                    ], providers: [UNIQUE_ID_PROVIDER], template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"modalId\"\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]=\"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" }]
         }], ctorParameters: function () { return [{ type: ScrollingService }, { type: ClrCommonStringsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [UNIQUE_ID]
@@ -21136,7 +21145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * 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.
  */
@@ -21147,18 +21156,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  * the overflow scroll being focused.
  */
 class ClrModalBody {
-    constructor(ngZone, renderer, host) {
+    constructor(renderer, host, ngZone) {
+        this.renderer = renderer;
+        this.host = host;
         this.tabindex = '0';
         this.unlisteners = [];
-        renderer.setAttribute(host.nativeElement, 'tabindex', this.tabindex);
         ngZone.runOutsideAngular(() => {
-            this.unlisteners.push(renderer.listen(host.nativeElement, 'mouseup', () => {
+            new ResizeObserver(() => this.addOrRemoveTabIndex()).observe(this.host.nativeElement);
+            this.unlisteners.push(this.renderer.listen(this.host.nativeElement, 'mouseup', () => {
                 // set the tabindex binding back when click is completed with mouseup
-                renderer.setAttribute(host.nativeElement, 'tabindex', this.tabindex);
-            }), renderer.listen(host.nativeElement, 'mousedown', () => {
+                this.addOrRemoveTabIndex();
+            }), this.renderer.listen(this.host.nativeElement, 'mousedown', () => {
                 // tabindex = 0 binding should be removed
                 // so it won't be focused when click starts with mousedown
-                renderer.removeAttribute(host.nativeElement, 'tabindex');
+                this.removeTabIndex();
             }));
         });
     }
@@ -21167,13 +21178,28 @@ class ClrModalBody {
             this.unlisteners.pop()();
         }
     }
+    addTabIndex() {
+        this.renderer.setAttribute(this.host.nativeElement, 'tabindex', this.tabindex);
+    }
+    removeTabIndex() {
+        this.renderer.removeAttribute(this.host.nativeElement, 'tabindex');
+    }
+    addOrRemoveTabIndex() {
+        const modalBody = this.host.nativeElement.parentElement;
+        if (modalBody.clientHeight < modalBody.scrollHeight) {
+            this.addTabIndex();
+        }
+        else {
+            this.removeTabIndex();
+        }
+    }
 }
-ClrModalBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ClrModalBody, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClrModalBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ClrModalBody, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 ClrModalBody.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: ClrModalBody, selector: ".modal-body", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ClrModalBody, decorators: [{
             type: Directive,
             args: [{ selector: '.modal-body' }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
 /*
  * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
@@ -24494,10 +24520,11 @@ class AccordionModel {
     }
     togglePanel(panelId, open) {
         const panelIsOpen = this._panels[panelId].open;
-        if (this.strategy === AccordionStrategy.Default) {
+        const newOpenState = open !== undefined ? open : !panelIsOpen;
+        if (newOpenState && this.strategy === AccordionStrategy.Default) {
             this.closeAllPanels();
         }
-        this._panels[panelId].open = open !== undefined ? open : !panelIsOpen;
+        this._panels[panelId].open = newOpenState;
     }
     disablePanel(panelId, disabled) {
         this._panels[panelId].disabled = disabled;