@clr/angular 12.0.5 → 12.0.9

package/bundles/clr-angular.umd.js

@@ -1389,7 +1389,8 @@
         singleSelectionAriaLabel: 'Single selection header',
         singleActionableAriaLabel: 'Single actionable header',
         detailExpandableAriaLabel: 'Toggle more row content',
-        datagridFilterAriaLabel: 'Toggle column filter',
+        datagridFilterAriaLabel: 'Filter dialog',
+        datagridFilterDialogAriaLabel: 'Toggle column filter',
         columnSeparatorAriaLabel: 'Column resize handle',
         columnSeparatorDescription: 'Not necessary to use this button',
         // Alert
@@ -10802,7 +10803,7 @@
                     selector: 'clr-dg-filter',
                     // We register this component as a CustomFilter, for the parent column to detect it.
                     providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }, UNIQUE_ID_PROVIDER],
-                    template: "\n    <button\n      class=\"datagrid-filter-toggle\"\n      type=\"button\"\n      #anchor\n      [attr.aria-label]=\"commonStrings.keys.datagridFilterAriaLabel\"\n      [attr.aria-expanded]=\"ariaExpanded\"\n      [attr.aria-controls]=\"popoverId\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [class.datagrid-filter-open]=\"open\"\n      [class.datagrid-filtered]=\"active\"\n    >\n      <cds-icon\n        [attr.status]=\"active ? 'info' : null\"\n        [attr.shape]=\"active ? 'filter-grid-circle' : 'filter-grid'\"\n        solid\n      ></cds-icon>\n    </button>\n\n    <div\n      class=\"datagrid-filter\"\n      [id]=\"popoverId\"\n      clrFocusTrap\n      *clrPopoverContent=\"open; at: smartPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <div class=\"datagrid-filter-close-wrapper\">\n        <button type=\"button\" class=\"close\" clrPopoverCloseButton>\n          <cds-icon shape=\"window-close\" [attr.title]=\"commonStrings.keys.close\"></cds-icon>\n        </button>\n      </div>\n\n      <ng-content></ng-content>\n    </div>\n  "
+                    template: "\n    <button\n      class=\"datagrid-filter-toggle\"\n      type=\"button\"\n      #anchor\n      [attr.aria-label]=\"commonStrings.keys.datagridFilterAriaLabel\"\n      [attr.aria-expanded]=\"ariaExpanded\"\n      [attr.aria-controls]=\"popoverId\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [class.datagrid-filter-open]=\"open\"\n      [class.datagrid-filtered]=\"active\"\n    >\n      <cds-icon\n        [attr.status]=\"active ? 'info' : null\"\n        [attr.shape]=\"active ? 'filter-grid-circle' : 'filter-grid'\"\n        solid\n      ></cds-icon>\n    </button>\n\n    <div\n      class=\"datagrid-filter\"\n      [id]=\"popoverId\"\n      clrFocusTrap\n      *clrPopoverContent=\"open; at: smartPosition; outsideClickToClose: true; scrollToClose: true\"\n      role=\"dialog\"\n      [attr.aria-label]=\"commonStrings.keys.datagridFilterDialogAriaLabel\"\n    >\n      <div class=\"datagrid-filter-close-wrapper\">\n        <button type=\"button\" class=\"close\" clrPopoverCloseButton>\n          <cds-icon shape=\"window-close\" [attr.title]=\"commonStrings.keys.close\"></cds-icon>\n        </button>\n      </div>\n\n      <ng-content></ng-content>\n    </div>\n  "
                 },] }
     ];
     ClrDatagridFilter.ctorParameters = function () { return [
@@ -12589,6 +12590,12 @@
                     _this.focusOnClose();
                 }
             }), this.signpostIdService.id.subscribe(function (idChange) { return (_this.ariaControl = idChange); }));
+            this.addDefaultAriaLabel(this.el.nativeElement);
+        };
+        ClrSignpostTrigger.prototype.addDefaultAriaLabel = function (el) {
+            if (!el.hasAttribute('aria-label')) {
+                el.setAttribute('aria-label', this.commonStrings.keys.signpostToggle);
+            }
         };
         ClrSignpostTrigger.prototype.focusOnClose = function () {
             if (!i1.isPlatformBrowser(this.platformId)) {
@@ -12618,7 +12625,6 @@
                     selector: '[clrSignpostTrigger]',
                     host: {
                         class: 'signpost-trigger',
-                        '[attr.aria-label]': 'commonStrings.keys.signpostToggle',
                         '[attr.aria-expanded]': 'ariaExpanded',
                         '[attr.aria-controls]': 'ariaControl',
                         '[class.active]': 'isOpen',
@@ -17843,6 +17849,7 @@
             var _this = this;
             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
@@ -17859,6 +17866,7 @@
                 if (change) {
                     _this.anchor();
                     _this.attachESCListener();
+                    _this.setRecentlyOpened();
                 }
                 else {
                     _this.release();
@@ -17868,6 +17876,7 @@
             if (this.toggleService.open) {
                 this.anchor();
                 this.attachESCListener();
+                this.setRecentlyOpened();
             }
         }
         AbstractPopover.prototype.anchor = function () {
@@ -17933,7 +17942,7 @@
                     this.ignoredElementClickListener = this.renderer.listen(this.ignoredElement, 'click', function (event) { return (_this.ignore = event); });
                 }
                 this.documentClickListener = this.renderer.listen('document', 'click', function (event) {
-                    if (event === _this.ignore) {
+                    if (event === _this.ignore || _this.recentlyOpened) {
                         delete _this.ignore;
                     }
                     else {
@@ -17958,6 +17967,13 @@
                 }
             }
         };
+        AbstractPopover.prototype.setRecentlyOpened = function () {
+            var _this = this;
+            this.recentlyOpened = true;
+            setTimeout(function () {
+                _this.recentlyOpened = false;
+            });
+        };
         return AbstractPopover;
     }());
     AbstractPopover.decorators = [
@@ -20362,7 +20378,7 @@
         { type: i0.Component, args: [{
                     selector: 'clr-modal',
                     viewProviders: [ScrollingService],
-                    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",
+                    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",
                     animations: [
                         animations.trigger('fadeDown', [
                             animations.transition('* => false', [animations.style({ opacity: 0, transform: 'translate(0, -25%)' }), animations.animate('0.2s ease-in-out')]),
@@ -20397,7 +20413,7 @@
     };
 
     /*
-     * 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.
      */
@@ -20408,19 +20424,21 @@
      * the overflow scroll being focused.
      */
     var ClrModalBody = /** @class */ (function () {
-        function ClrModalBody(ngZone, renderer, host) {
+        function ClrModalBody(renderer, host, ngZone) {
             var _this = this;
+            this.renderer = renderer;
+            this.host = host;
             this.tabindex = '0';
             this.unlisteners = [];
-            renderer.setAttribute(host.nativeElement, 'tabindex', this.tabindex);
             ngZone.runOutsideAngular(function () {
-                _this.unlisteners.push(renderer.listen(host.nativeElement, 'mouseup', function () {
+                new ResizeObserver(function () { return _this.addOrRemoveTabIndex(); }).observe(_this.host.nativeElement);
+                _this.unlisteners.push(_this.renderer.listen(_this.host.nativeElement, 'mouseup', function () {
                     // set the tabindex binding back when click is completed with mouseup
-                    renderer.setAttribute(host.nativeElement, 'tabindex', _this.tabindex);
-                }), renderer.listen(host.nativeElement, 'mousedown', function () {
+                    _this.addOrRemoveTabIndex();
+                }), _this.renderer.listen(_this.host.nativeElement, 'mousedown', function () {
                     // tabindex = 0 binding should be removed
                     // so it won't be focused when click starts with mousedown
-                    renderer.removeAttribute(host.nativeElement, 'tabindex');
+                    _this.removeTabIndex();
                 }));
             });
         }
@@ -20429,15 +20447,30 @@
                 this.unlisteners.pop()();
             }
         };
+        ClrModalBody.prototype.addTabIndex = function () {
+            this.renderer.setAttribute(this.host.nativeElement, 'tabindex', this.tabindex);
+        };
+        ClrModalBody.prototype.removeTabIndex = function () {
+            this.renderer.removeAttribute(this.host.nativeElement, 'tabindex');
+        };
+        ClrModalBody.prototype.addOrRemoveTabIndex = function () {
+            var modalBody = this.host.nativeElement.parentElement;
+            if (modalBody.clientHeight < modalBody.scrollHeight) {
+                this.addTabIndex();
+            }
+            else {
+                this.removeTabIndex();
+            }
+        };
         return ClrModalBody;
     }());
     ClrModalBody.decorators = [
         { type: i0.Directive, args: [{ selector: '.modal-body' },] }
     ];
     ClrModalBody.ctorParameters = function () { return [
-        { type: i0.NgZone },
         { type: i0.Renderer2 },
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
     ]; };
 
     /*
@@ -23746,10 +23779,11 @@
         };
         AccordionModel.prototype.togglePanel = function (panelId, open) {
             var panelIsOpen = this._panels[panelId].open;
-            if (this.strategy === AccordionStrategy.Default) {
+            var 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;
         };
         AccordionModel.prototype.disablePanel = function (panelId, disabled) {
             this._panels[panelId].disabled = disabled;