@clr/angular 12.0.8 → 12.0.12

package/bundles/clr-angular.umd.js

@@ -1424,10 +1424,10 @@
         comboboxNoResults: 'No results',
         comboboxOpen: 'Show options',
         // Datagrid expandable rows
-        dategridExpandableBeginningOf: 'Beginning of',
-        dategridExpandableEndOf: 'End of',
-        dategridExpandableRowContent: 'Expandable row content',
-        dategridExpandableRowsHelperText: "Screen reader table commands may not work for viewing expanded content, please use your screen reader's browse mode to read the content exposed by this button",
+        datagridExpandableBeginningOf: 'Beginning of',
+        datagridExpandableEndOf: 'End of',
+        datagridExpandableRowContent: 'Expandable row content',
+        datagridExpandableRowsHelperText: "Screen reader table commands may not work for viewing expanded content, please use your screen reader's browse mode to read the content exposed by this button",
     };
 
     /*
@@ -15169,7 +15169,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.
      */
@@ -15208,7 +15208,7 @@
         Object.defineProperty(ClrDatagridRowDetail.prototype, "beginningOfExpandableContentAriaText", {
             get: function () {
                 return (this._beginningOfExpandableContentAriaText ||
-                    this.commonStrings.keys.dategridExpandableBeginningOf + " " + this.commonStrings.keys.dategridExpandableRowContent);
+                    (this.commonStrings.keys.dategridExpandableBeginningOf || this.commonStrings.keys.datagridExpandableBeginningOf) + " \n      " + (this.commonStrings.keys.dategridExpandableRowContent || this.commonStrings.keys.datagridExpandableRowContent));
             },
             enumerable: false,
             configurable: true
@@ -15216,7 +15216,7 @@
         Object.defineProperty(ClrDatagridRowDetail.prototype, "endOfExpandableContentAriaText", {
             get: function () {
                 return (this._endOfExpandableContentAriaText ||
-                    this.commonStrings.keys.dategridExpandableEndOf + " " + this.commonStrings.keys.dategridExpandableRowContent);
+                    (this.commonStrings.keys.dategridExpandableEndOf || this.commonStrings.keys.datagridExpandableEndOf) + " \n      " + (this.commonStrings.keys.dategridExpandableRowContent || this.commonStrings.keys.datagridExpandableRowContent));
             },
             enumerable: false,
             configurable: true
@@ -15226,7 +15226,8 @@
     ClrDatagridRowDetail.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dg-row-detail',
-                    template: "\n    <div class=\"clr-sr-only\">\n      {{ beginningOfExpandableContentAriaText }} {{ commonStrings.keys.dategridExpandableRowsHelperText }}\n    </div>\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\">{{ endOfExpandableContentAriaText }}</div>\n  ",
+                    // TODO: @deprecated - dategrid* keys are deprecated. Remove in v14.
+                    template: "\n    <div class=\"clr-sr-only\">\n      {{ beginningOfExpandableContentAriaText }}\n      {{ commonStrings.keys.dategridExpandableRowsHelperText || commonStrings.keys.datagridExpandableRowsHelperText }}\n    </div>\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\">{{ endOfExpandableContentAriaText }}</div>\n  ",
                     host: {
                         '[class.datagrid-row-flex]': 'true',
                         '[class.datagrid-row-detail]': 'true',
@@ -16527,7 +16528,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.
      */
@@ -16756,7 +16757,6 @@
                         ]),
                     ],
                     host: {
-                        '[attr.role]': '"treeitem"',
                         '[class.clr-tree-node]': 'true',
                     }
                 },] }
@@ -17849,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
@@ -17865,6 +17866,7 @@
                 if (change) {
                     _this.anchor();
                     _this.attachESCListener();
+                    _this.setRecentlyOpened();
                 }
                 else {
                     _this.release();
@@ -17874,6 +17876,7 @@
             if (this.toggleService.open) {
                 this.anchor();
                 this.attachESCListener();
+                this.setRecentlyOpened();
             }
         }
         AbstractPopover.prototype.anchor = function () {
@@ -17939,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 {
@@ -17964,6 +17967,13 @@
                 }
             }
         };
+        AbstractPopover.prototype.setRecentlyOpened = function () {
+            var _this = this;
+            this.recentlyOpened = true;
+            setTimeout(function () {
+                _this.recentlyOpened = false;
+            });
+        };
         return AbstractPopover;
     }());
     AbstractPopover.decorators = [
@@ -18448,7 +18458,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.
      */
@@ -18461,7 +18471,7 @@
     ClrAlertItem.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-alert-item',
-                    template: "\n    <div class=\"alert-icon-wrapper\">\n      <cds-icon\n        class=\"alert-icon\"\n        [attr.shape]=\"iconService.alertIconShape\"\n        [attr.title]=\"iconService.alertIconTitle\"\n      ></cds-icon>\n    </div>\n    <ng-content></ng-content>\n  ",
+                    template: "\n    <div class=\"alert-icon-wrapper\">\n      <cds-icon\n        class=\"alert-icon\"\n        role=\"img\"\n        [attr.shape]=\"iconService.alertIconShape\"\n        [attr.aria-label]=\"iconService.alertIconTitle\"\n      ></cds-icon>\n    </div>\n    <ng-content></ng-content>\n  ",
                     host: { class: 'alert-item' }
                 },] }
     ];
@@ -20368,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')]),
@@ -20403,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.
      */
@@ -20414,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();
                 }));
             });
         }
@@ -20435,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 }
     ]; };
 
     /*
@@ -23752,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;
@@ -23951,7 +23979,7 @@
     ClrAccordionPanel.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-accordion-panel',
-                    template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div role=\"group\" [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
+                    template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
                     host: { '[class.clr-accordion-panel]': 'true' },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: panelAnimation,
@@ -24381,7 +24409,7 @@
     ClrStepperPanel.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-stepper-panel',
-                    template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div role=\"group\" [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
+                    template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
                     host: { '[class.clr-accordion-panel]': 'true' },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: stepAnimation,