@clr/angular 13.9.1 → 13.10.1

package/fesm2020/clr-angular.mjs

@@ -304,8 +304,8 @@ const commonStringsDefault = {
     singleSelectionAriaLabel: 'Single selection header',
     singleActionableAriaLabel: 'Single actionable header',
     detailExpandableAriaLabel: 'Toggle more row content',
-    datagridFilterAriaLabel: 'Filter dialog',
-    datagridFilterDialogAriaLabel: 'Toggle column filter',
+    datagridFilterAriaLabel: 'Toggle {COLUMN} filter',
+    datagridFilterDialogAriaLabel: 'Filter dialog',
     columnSeparatorAriaLabel: 'Column resize handle',
     columnSeparatorDescription: 'Use left or right key to resize the column',
     // Alert
@@ -11977,11 +11977,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * since it can be anything (not just a text input).
  */
 class ClrDatagridFilter extends DatagridFilterRegistrar {
-    constructor(_filters, commonStrings, smartToggleService, platformId) {
+    constructor(_filters, commonStrings, smartToggleService, platformId, elementRef) {
         super(_filters);
         this.commonStrings = commonStrings;
         this.smartToggleService = smartToggleService;
         this.platformId = platformId;
+        this.elementRef = elementRef;
         this.subs = [];
         this.ariaExpanded = false;
         this.popoverId = uniqueIdFactory();
@@ -12023,18 +12024,33 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
     get active() {
         return !!this.filter && this.filter.isActive();
     }
+    ngOnChanges() {
+        this.setToggleButtonAriaLabel();
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.subs.forEach(sub => sub.unsubscribe());
     }
+    /**
+     * This is not in a getter to prevent "expression has changed after it was checked" errors.
+     * And it's more performant this way since it only runs on change.
+     */
+    setToggleButtonAriaLabel() {
+        const columnElement = this.elementRef.nativeElement?.closest('clr-dg-column');
+        const columnTitleElement = columnElement?.querySelector('.datagrid-column-title');
+        const columnTitle = columnTitleElement?.textContent.trim().toLocaleLowerCase();
+        this.toggleButtonAriaLabel = this.commonStrings.parse(this.commonStrings.keys.datagridFilterAriaLabel, {
+            COLUMN: columnTitle || '',
+        });
+    }
 }
-ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open"], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open"], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <button
       class="datagrid-filter-toggle"
       type="button"
       #anchor
-      [attr.aria-label]="commonStrings.keys.datagridFilterAriaLabel"
+      [attr.aria-label]="toggleButtonAriaLabel"
       [attr.aria-expanded]="ariaExpanded"
       [attr.aria-controls]="popoverId"
       clrPopoverAnchor
@@ -12077,7 +12093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
       class="datagrid-filter-toggle"
       type="button"
       #anchor
-      [attr.aria-label]="commonStrings.keys.datagridFilterAriaLabel"
+      [attr.aria-label]="toggleButtonAriaLabel"
       [attr.aria-expanded]="ariaExpanded"
       [attr.aria-controls]="popoverId"
       clrPopoverAnchor
@@ -12113,7 +12129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }]; }, propDecorators: { anchor: [{
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { anchor: [{
                 type: ViewChild,
                 args: ['anchor', { read: ElementRef }]
             }], open: [{
@@ -18713,8 +18729,8 @@ class ClrStackHeader {
 }
 ClrStackHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackHeader, deps: [{ token: ClrStackView }], target: i0.ɵɵFactoryTarget.Component });
 ClrStackHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStackHeader, selector: "clr-stack-header", ngImport: i0, template: `
-    <h4 class="stack-header">
-      <span class="stack-title"><ng-content></ng-content></span>
+    <div class="stack-header">
+      <h4 class="stack-title"><ng-content></ng-content></h4>
 
       <span class="stack-actions">
         <ng-content select=".stack-action"></ng-content>
@@ -18729,15 +18745,15 @@ ClrStackHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         </button>
         <!-- End of undocumented experimental feature. -->
       </span>
-    </h4>
+    </div>
   `, isInline: true, styles: [":host{display:block}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-stack-header',
                     template: `
-    <h4 class="stack-header">
-      <span class="stack-title"><ng-content></ng-content></span>
+    <div class="stack-header">
+      <h4 class="stack-title"><ng-content></ng-content></h4>
 
       <span class="stack-actions">
         <ng-content select=".stack-action"></ng-content>
@@ -18752,7 +18768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </button>
         <!-- End of undocumented experimental feature. -->
       </span>
-    </h4>
+    </div>
   `,
                     // Custom elements are inline by default
                     styles: [
@@ -19504,6 +19520,9 @@ class ClrTreeNodeLink {
     constructor(el) {
         this.el = el;
     }
+    get active() {
+        return this.el.nativeElement.classList.contains('active');
+    }
     activate() {
         if (this.el.nativeElement && this.el.nativeElement.click) {
             this.el.nativeElement.click();
@@ -19595,7 +19614,15 @@ class ClrTreeNode {
         this.skipEmitChange = false;
     }
     get ariaSelected() {
-        return this.isSelectable() ? this._model.selected.value === ClrSelectedState.SELECTED : null;
+        if (this.isSelectable()) {
+            return this._model.selected.value === ClrSelectedState.SELECTED;
+        }
+        else if (this.treeNodeLink?.active) {
+            return true;
+        }
+        else {
+            return null;
+        }
     }
     // I'm caving on this, for tree nodes I think we can tolerate having a two-way binding on the component
     // rather than enforce the clrIfExpanded structural directive for dynamic cases. Mostly because for the smart
@@ -19755,7 +19782,7 @@ class ClrTreeNode {
     }
 }
 ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTreeNode, deps: [{ token: PLATFORM_ID }, { token: ClrTreeNode, optional: true, skipSelf: true }, { token: ForTypeAheadProvider, optional: true, self: true }, { token: TreeFeaturesService }, { token: IfExpandService }, { token: ClrCommonStringsService }, { token: TreeFocusManagerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], expanded: ["clrExpanded", "expanded"] }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: 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\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\">selected</span>\n      <span *ngIf=\"!ariaSelected\">unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
+ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], expanded: ["clrExpanded", "expanded"] }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: 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\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span *ngIf=\"ariaSelected\"> selected</span>\n      <span *ngIf=\"!ariaSelected\"> unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
         trigger('toggleChildrenAnim', [
             transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
             transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
@@ -19774,7 +19801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         ]),
                     ], host: {
                         '[class.clr-tree-node]': 'true',
-                    }, 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\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\">selected</span>\n      <span *ngIf=\"!ariaSelected\">unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n" }]
+                    }, 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\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span *ngIf=\"ariaSelected\"> selected</span>\n      <span *ngIf=\"!ariaSelected\"> unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -23262,7 +23289,7 @@ ClrVerticalNavGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 ClrVerticalNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrVerticalNavGroup, selector: "clr-vertical-nav-group", inputs: { groupLabel: ["clrVerticalNavGroupLabel", "groupLabel"], userExpandedInput: ["clrVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "clrVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], 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 class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    ></cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n", directives: [{ type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
         trigger('clrExpand', [
             state(EXPANDED_STATE, style({ height: '*' })),
-            state(COLLAPSED_STATE, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
+            state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
             transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
         ]),
     ] });
@@ -23271,7 +23298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{ selector: 'clr-vertical-nav-group', providers: [IfExpandService, VerticalNavGroupService], animations: [
                         trigger('clrExpand', [
                             state(EXPANDED_STATE, style({ height: '*' })),
-                            state(COLLAPSED_STATE, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
+                            state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
                             transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
                         ]),
                     ], host: { class: 'nav-group' }, 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 class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    ></cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n" }]
@@ -23642,7 +23669,7 @@ class ClrModalBody {
     }
     addOrRemoveTabIndex() {
         const modalBody = this.host.nativeElement.parentElement;
-        if (modalBody.clientHeight < modalBody.scrollHeight) {
+        if (modalBody && modalBody.clientHeight < modalBody.scrollHeight) {
             this.addTabIndex();
         }
         else {
@@ -23954,8 +23981,6 @@ class ClrTooltipContent extends AbstractPopover {
     constructor(injector, parentHost, tooltipIdService) {
         super(injector, parentHost);
         this.tooltipIdService = tooltipIdService;
-        this._position = defaultPosition;
-        this._size = defaultSize;
         if (!parentHost) {
             throw new Error('clr-tooltip-content should only be used inside of a clr-tooltip');
         }
@@ -24017,6 +24042,10 @@ class ClrTooltipContent extends AbstractPopover {
         this._size = newSize;
         this.updateCssClass({ oldClass: `tooltip-${oldSize}`, newClass: `tooltip-${newSize}` });
     }
+    ngOnInit() {
+        this.size = this.size || defaultSize;
+        this.position = this.position || defaultPosition;
+    }
     updateCssClass({ oldClass, newClass }) {
         this.renderer.removeClass(this.el.nativeElement, oldClass);
         this.renderer.addClass(this.el.nativeElement, newClass);