@porscheinformatik/clr-addons 19.11.2 → 19.11.4

package/fesm2022/clr-addons.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, output, viewChild, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, NgZone, ChangeDetectorRef } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, output, viewChild, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, NgZone, ChangeDetectorRef, Injector, untracked, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgForOf, NgClass } from '@angular/common';
 import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, filterGridCircleIcon, filterGridIcon, pencilIcon, historyIcon as historyIcon$1, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon, exclamationTriangleIcon, copyToClipboardIcon, successStandardIcon, angleDoubleIcon } from '@cds/core/icon';
@@ -15610,6 +15610,15 @@ class ClrSummaryItemValue {
         this.contentCheckScheduled = false;
         this.ngZone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
+        // Watch for value changes and trigger overflow detection
+        effect(() => {
+            // Access the value signal to track changes
+            const currentValue = this.value();
+            if (currentValue !== undefined && currentValue !== null && currentValue !== '') {
+                // Schedule overflow check after view updates
+                this.scheduleOverflowCheck();
+            }
+        });
     }
     get hasIcon() {
         return !!this.icon()?.trim();
@@ -15645,17 +15654,18 @@ class ClrSummaryItemValue {
     }
     /**
      * Returns true if this component has any meaningful content to display.
-     * This includes: a value, an icon, or projected content.
+     * This includes: a value or projected content.
+     * An icon is considered special content and does not count as meaningful content alone.
      */
     get hasMeaningfulContent() {
-        return this.hasIcon || this.hasText || this.hasProjectedContent;
+        return this.hasText || this.hasProjectedContent;
     }
     /**
      * Returns true if this component should be hidden.
      * This happens when there's no meaningful content.
      */
     get shouldHide() {
-        return !this.hasMeaningfulContent;
+        return !this.hasIcon && !this.hasMeaningfulContent;
     }
     ngOnInit() {
         if (this.hasIcon && this.hasText) {
@@ -15709,27 +15719,23 @@ class ClrSummaryItemValue {
         });
     }
     setupOverflowDetection() {
-        // Use ResizeObserver to detect when the element size changes
+        const el = this.valueElement?.nativeElement;
+        if (!el) {
+            return;
+        }
+        // Defer initial check to next tick to avoid ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => {
+            this.checkTextOverflowSync();
+            this.cdr.markForCheck();
+        });
         this.ngZone.runOutsideAngular(() => {
             this.resizeObserver = new ResizeObserver(() => {
-                const prevOverflowing = this.isTextOverflowing;
-                const prevTooltipSize = this.tooltipSize;
-                this.checkTextOverflowSync();
-                // Trigger change detection if overflow state or tooltip size changed
-                if (prevOverflowing !== this.isTextOverflowing || prevTooltipSize !== this.tooltipSize) {
-                    this.ngZone.run(() => {
-                        this.cdr.markForCheck();
-                    });
-                }
+                this.ngZone.run(() => {
+                    this.checkTextOverflowSync();
+                    this.cdr.markForCheck();
+                });
             });
-            // Observe the host element for size changes
-            if (this.valueElement?.nativeElement) {
-                this.resizeObserver.observe(this.valueElement.nativeElement);
-            }
-        });
-        // Defer initial check to avoid ExpressionChangedAfterItHasBeenCheckedError
-        Promise.resolve().then(() => {
-            this.checkTextOverflowSync();
+            this.resizeObserver.observe(el);
         });
     }
     checkTextOverflowSync() {
@@ -15739,12 +15745,23 @@ class ClrSummaryItemValue {
         }
         const tooltip = this.effectiveTooltip;
         // if the tooltip content is too short for medium size, size small should be used instead
-        const newSize = tooltip && tooltip.length < 34 ? 'sm' : 'md';
+        const newSize = tooltip && tooltip.length < 30 ? 'sm' : 'md';
         if (this.tooltipSize !== newSize) {
             this.tooltipSize = newSize;
             this.cdr.markForCheck();
         }
     }
+    /**
+     * Schedule an overflow check after the DOM has been updated.
+     * Uses setTimeout to ensure the check runs outside of change detection.
+     */
+    scheduleOverflowCheck() {
+        // Use setTimeout to ensure the check runs outside of Angular's change detection
+        setTimeout(() => {
+            this.checkTextOverflowSync();
+            this.cdr.markForCheck();
+        });
+    }
     /** @internal - Manually trigger projected content check. Useful for testing. */
     checkProjectedContent() {
         if (this.projectedContent?.nativeElement) {
@@ -15776,12 +15793,12 @@ class ClrSummaryItemValue {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [attr.shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon\n  [attr.shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (hasClickHandler) { @if\n(effectiveTooltip) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value value-link\" (click)=\"handleClick()\" (keydown.enter)=\"handleClick()\"\n  >{{ value() }}</span\n>\n} } @else { @if (effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host.has-icon{flex:0 0 auto;max-width:none;min-width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "ngmodule", type: ClrIconModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [attr.shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon\n  [attr.shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (hasClickHandler) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "ngmodule", type: ClrIconModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [CommonModule, RouterModule, ClarityModule, ClrIconModule], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [attr.shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon\n  [attr.shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (hasClickHandler) { @if\n(effectiveTooltip) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value value-link\" (click)=\"handleClick()\" (keydown.enter)=\"handleClick()\"\n  >{{ value() }}</span\n>\n} } @else { @if (effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host.has-icon{flex:0 0 auto;max-width:none;min-width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"] }]
-        }], propDecorators: { projectedContent: [{
+            args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [CommonModule, RouterModule, ClarityModule, ClrIconModule], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [attr.shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon\n  [attr.shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen> {{ tooltip() }}</clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (hasClickHandler) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { projectedContent: [{
                 type: ViewChild,
                 args: ['projectedContent']
             }], valueElement: [{
@@ -15807,25 +15824,51 @@ ClarityIcons.addIcons(copyToClipboardIcon, successStandardIcon);
 class ClrSummaryItemValueCopyButton {
     constructor() {
         this.value = input.required();
-        this.showValueCopiedIcon = new Set();
+        this.tooltipText = input('Copy to clipboard');
+        this.showCopiedIcon = false;
+        this.tooltipSize = 'md';
         this.cdr = inject(ChangeDetectorRef);
+        this.resetTimeout = null;
     }
-    copyValueClicked(value) {
-        if (this.showValueCopiedIcon.has(value)) {
+    ngOnInit() {
+        const newSize = this.tooltipText && this.tooltipText().length < 30 ? 'sm' : 'md';
+        if (this.tooltipSize !== newSize) {
+            this.tooltipSize = newSize;
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        if (this.resetTimeout) {
+            clearTimeout(this.resetTimeout);
+            this.resetTimeout = null;
+        }
+    }
+    /**
+     * Called when the clipboard copy operation completes.
+     * @param success Whether the copy was successful
+     */
+    onCopied(success) {
+        if (!success) {
             return;
         }
-        this.showValueCopiedIcon.add(value);
-        setTimeout(() => {
-            this.showValueCopiedIcon.delete(value);
-            this.cdr.detectChanges();
-        }, 400);
+        // Clear any pending reset timeout to restart the timer
+        if (this.resetTimeout) {
+            clearTimeout(this.resetTimeout);
+        }
+        this.showCopiedIcon = true;
+        this.cdr.markForCheck();
+        this.resetTimeout = setTimeout(() => {
+            this.showCopiedIcon = false;
+            this.resetTimeout = null;
+            this.cdr.markForCheck();
+        }, 1000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.16", type: ClrSummaryItemValueCopyButton, isStandalone: true, selector: "clr-summary-area-value-copy-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cds-icon\n  class=\"summary-item-copy-value-icon\"\n  [cdkCopyToClipboard]=\"value()\"\n  (mousedown)=\"copyValueClicked(value())\"\n  [attr.shape]=\"showValueCopiedIcon.has(value()) ? 'success-standard' : 'copy-to-clipboard'\"\n  [ngClass]=\"{ 'attribute-was-copied-color': showValueCopiedIcon.has(value()) }\"\n></cds-icon>\n", styles: [":host{display:flex;align-items:center}.summary-item-copy-value-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)}.summary-item-copy-value-icon:hover{color:var(--cds-alias-typography-link-color)}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.16", type: ClrSummaryItemValueCopyButton, isStandalone: true, selector: "clr-summary-area-value-copy-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"summary-item-copy-value-icon\"\n    [cdkCopyToClipboard]=\"value()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [attr.shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.summary-item-copy-value-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.summary-item-copy-value-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-summary-area-value-copy-button', imports: [CdkCopyToClipboard, NgClass, ClrIconModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<cds-icon\n  class=\"summary-item-copy-value-icon\"\n  [cdkCopyToClipboard]=\"value()\"\n  (mousedown)=\"copyValueClicked(value())\"\n  [attr.shape]=\"showValueCopiedIcon.has(value()) ? 'success-standard' : 'copy-to-clipboard'\"\n  [ngClass]=\"{ 'attribute-was-copied-color': showValueCopiedIcon.has(value()) }\"\n></cds-icon>\n", styles: [":host{display:flex;align-items:center}.summary-item-copy-value-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)}.summary-item-copy-value-icon:hover{color:var(--cds-alias-typography-link-color)}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}\n"] }]
+            args: [{ selector: 'clr-summary-area-value-copy-button', imports: [CdkCopyToClipboard, NgClass, ClrIconModule, ClrTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"summary-item-copy-value-icon\"\n    [cdkCopyToClipboard]=\"value()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [attr.shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" clrPosition=\"top-right\" *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.summary-item-copy-value-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.summary-item-copy-value-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}\n"] }]
         }] });
 
 /*
@@ -15842,6 +15885,7 @@ class ClrSummaryItem {
         this.editConfig = input();
         this.showOnEmptyValue = input(true);
         this.valueCopyable = input(false);
+        this.copyButtonTooltip = input('Copy to clipboard');
         this.hasProjectedContent = false;
         this.cdr = inject(ChangeDetectorRef);
         this.contentCheckScheduled = false;
@@ -15876,7 +15920,8 @@ class ClrSummaryItem {
         return this.warning()?.click;
     }
     get showEditButton() {
-        return (!this.hasLoading &&
+        return (!this.hasNonIconTextValue() &&
+            !this.hasLoading &&
             !this.hasError &&
             !this.hasWarning &&
             !this.hasProjectedContent &&
@@ -16003,22 +16048,24 @@ class ClrSummaryItem {
                     return false;
                 }
                 // Skip internal elements by class
-                if (element.classList.contains('edit-link') ||
+                return !(element.classList.contains('edit-link') ||
                     element.classList.contains('value-placeholder') ||
-                    element.classList.contains('summary-item-loading')) {
-                    return false;
-                }
-                return true;
+                    element.classList.contains('summary-item-loading'));
             }
             return false;
         });
     }
+    hasNonIconTextValue() {
+        return this.valueChildren.toArray().some(child => {
+            return !child.hasIcon && !!child.value()?.trim();
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <span class=\"value value-link edit-link\" (click)=\"editClick?.()\" (keydown.enter)=\"editClick?.()\"\n        >{{ editText }}</span\n      >\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } @if (showCopyButton) {\n      <clr-summary-area-value-copy-button [value]=\"copyableValue\"></clr-summary-area-value-copy-button>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;overflow:visible}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable"], outputs: ["clicked"] }, { kind: "component", type: ClrSummaryItemValueCopyButton, selector: "clr-summary-area-value-copy-button", inputs: ["value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-summary-area-value-copy-button\n        [value]=\"copyableValue\"\n        [tooltipText]=\"copyButtonTooltip()\"\n      ></clr-summary-area-value-copy-button>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-summary-area-value-copy-button{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable"], outputs: ["clicked"] }, { kind: "component", type: ClrSummaryItemValueCopyButton, selector: "clr-summary-area-value-copy-button", inputs: ["value", "tooltipText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-summary-item', standalone: true, imports: [CommonModule, ClarityModule, ClrSummaryItemValue, ClrSummaryItemValueCopyButton], template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <span class=\"value value-link edit-link\" (click)=\"editClick?.()\" (keydown.enter)=\"editClick?.()\"\n        >{{ editText }}</span\n      >\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } @if (showCopyButton) {\n      <clr-summary-area-value-copy-button [value]=\"copyableValue\"></clr-summary-area-value-copy-button>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;overflow:visible}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"] }]
+            args: [{ selector: 'clr-summary-item', standalone: true, imports: [CommonModule, ClarityModule, ClrSummaryItemValue, ClrSummaryItemValueCopyButton], template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-summary-area-value-copy-button\n        [value]=\"copyableValue\"\n        [tooltipText]=\"copyButtonTooltip()\"\n      ></clr-summary-area-value-copy-button>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-summary-area-value-copy-button{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"] }]
         }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['itemTemplate', { static: true }]
@@ -16039,36 +16086,54 @@ const defaultSummaryAreaCollapsedKey = 'clrSummaryAreaCollapsed';
 class ClrSummaryAreaStateService {
     constructor() {
         this.collapsedMap = new Map();
+        this.effectsInitialized = new Set();
+        this.injector = inject(Injector);
     }
     collapsed(key) {
         const storageKey = key || defaultSummaryAreaCollapsedKey;
-        return this.getOrCreateEntry(storageKey).signal;
+        // Use untracked to avoid reactive context issues when getting/creating the signal
+        return untracked(() => {
+            if (!this.collapsedMap.has(storageKey)) {
+                const collapsedSignal = signal(this.readInitialState(storageKey));
+                this.collapsedMap.set(storageKey, collapsedSignal);
+                // Schedule effect creation outside of any reactive context
+                this.scheduleEffectCreation(storageKey, collapsedSignal);
+            }
+            return this.collapsedMap.get(storageKey);
+        });
+    }
+    scheduleEffectCreation(storageKey, collapsedSignal) {
+        if (this.effectsInitialized.has(storageKey)) {
+            return;
+        }
+        this.effectsInitialized.add(storageKey);
+        // Use setTimeout to ensure effect is created outside of any reactive context
+        setTimeout(() => {
+            runInInjectionContext(this.injector, () => {
+                effect(() => {
+                    const value = collapsedSignal();
+                    try {
+                        localStorage.setItem(storageKey, String(value));
+                    }
+                    catch (e) {
+                        // Ignore storage errors
+                    }
+                });
+            });
+        });
     }
     toggle(key) {
         const storageKey = key || defaultSummaryAreaCollapsedKey;
-        const entry = this.getOrCreateEntry(storageKey);
-        const newValue = !entry.signal();
-        entry.signal.set(newValue);
-        this.persistToStorage(storageKey, newValue);
-    }
-    setCollapsed(key, value) {
-        const entry = this.getOrCreateEntry(key);
-        entry.signal.set(value);
-        this.persistToStorage(key, value);
-    }
-    getOrCreateEntry(storageKey) {
-        if (!this.collapsedMap.has(storageKey)) {
-            const collapsedSignal = signal(this.readInitialState(storageKey));
-            this.collapsedMap.set(storageKey, { signal: collapsedSignal, storageKey });
+        const collapsedSignal = this.collapsedMap.get(storageKey);
+        if (collapsedSignal) {
+            collapsedSignal.update(value => !value);
         }
-        return this.collapsedMap.get(storageKey);
     }
-    persistToStorage(key, value) {
-        try {
-            localStorage.setItem(key, String(value));
-        }
-        catch (e) {
-            // Ignore storage errors
+    setCollapsed(key, value) {
+        const storageKey = key || defaultSummaryAreaCollapsedKey;
+        const collapsedSignal = this.collapsedMap.get(storageKey);
+        if (collapsedSignal) {
+            collapsedSignal.set(value);
         }
     }
     readInitialState(storageKey) {
@@ -16100,24 +16165,102 @@ class ClrSummaryArea {
         this.warning = input();
         this.loading = input();
         this.currentColumns = 5;
-        this.currentRows = 3;
+        this.currentRows = this.rows();
+        this.panelHeight = '0px';
+        this.loadingPanelHeight = '0px';
+        this.loadingVisible = false;
+        this.prevErrorActive = false;
+        this.prevWarningActive = false;
+        this.prevCollapsed = true;
+        this.prevHasLoading = false;
+        this.loadingVisibleTimeout = null;
         this.state = inject(ClrSummaryAreaStateService);
         this.cdr = inject(ChangeDetectorRef);
         this.defaultLoadingText = 'Loading...';
         this.defaultErrorText = 'Error';
         this.defaultWarningText = 'Warning';
         this.maxColumns = 5;
-        this.isCollapsed = computed(() => {
-            return this.state.collapsed(this.localStorageKey())();
+        this.errorActive = computed(() => this.error()?.active() ?? false);
+        this.warningActive = computed(() => this.warning()?.active() ?? false);
+        // Effect to handle expand/collapse with smooth height transition
+        effect(() => {
+            const collapsed = this.isCollapsed();
+            if (!collapsed) {
+                // Expanding: update grid first, then measure and set height
+                this.updateGrid();
+                requestAnimationFrame(() => {
+                    this.updateGrid();
+                    this.updatePanelHeight();
+                });
+            }
+            else if (!this.prevCollapsed && collapsed) {
+                // Collapsing: set current height first, then animate to 0
+                this.animateCollapse();
+            }
+            this.prevCollapsed = collapsed;
         });
-        this.currentRows = this.rows();
+        // Effect for tracking changes in the error state (using computed signal)
         effect(() => {
-            if (!this.isCollapsed()) {
+            const errorActive = this.errorActive();
+            const collapsed = this.isCollapsed();
+            // If error active state changed and area is NOT collapsed, recalculate panel height
+            if (errorActive !== this.prevErrorActive && !collapsed) {
+                this.updateGrid();
+                this.cdr.detectChanges();
+                requestAnimationFrame(() => {
+                    this.recalculatePanelHeight();
+                });
+            }
+            this.prevErrorActive = errorActive;
+        });
+        // Effect for tracking changes in the warning state (using computed signal)
+        effect(() => {
+            const warningActive = this.warningActive();
+            const collapsed = this.isCollapsed();
+            // If error active state changed and area is NOT collapsed, recalculate panel height
+            if (warningActive !== this.prevWarningActive && !collapsed) {
+                this.updateGrid();
+                this.cdr.detectChanges();
+                requestAnimationFrame(() => {
+                    this.recalculatePanelHeight();
+                });
+            }
+            this.prevWarningActive = warningActive;
+        });
+        // Effect to delay loading indicator visibility for smooth fade-in animation
+        effect(() => {
+            const loading = this.hasLoading;
+            const collapsed = this.isCollapsed();
+            // Clear any pending timeout
+            if (this.loadingVisibleTimeout) {
+                clearTimeout(this.loadingVisibleTimeout);
+                this.loadingVisibleTimeout = null;
+            }
+            if (loading && !collapsed) {
+                // Delay showing loading indicator to allow parent panel to become visible first
+                this.loadingVisibleTimeout = setTimeout(() => {
+                    this.loadingVisible = true;
+                    this.cdr.markForCheck();
+                }, 50);
+            }
+            else {
+                this.loadingVisible = false;
+                this.loadingPanelHeight = '0px';
+                this.cdr.markForCheck();
+            }
+            if (this.prevHasLoading !== loading && !collapsed) {
                 this.updateGrid();
-                requestAnimationFrame(() => this.updateGrid());
+                this.cdr.detectChanges();
+                requestAnimationFrame(() => {
+                    this.recalculatePanelHeight();
+                });
             }
+            this.prevHasLoading = loading;
         });
     }
+    ngOnInit() {
+        this.isCollapsed = this.state.collapsed(this.localStorageKey());
+    }
     /**
      * Depending on the current rows input only a specific amount of items can be visible to the user.
      * The summary area only supports up to 5 columns.
@@ -16136,7 +16279,7 @@ class ClrSummaryArea {
         return this.loading()?.text || this.defaultLoadingText;
     }
     get hasError() {
-        return !this.hasLoading && !!this.error() && this.error().active;
+        return !this.hasLoading && !!this.error() && this.error().active();
     }
     get errorText() {
         return this.error()?.text || this.defaultErrorText;
@@ -16148,7 +16291,7 @@ class ClrSummaryArea {
         return this.error()?.click;
     }
     get hasWarning() {
-        return !this.hasLoading && !this.hasError && !!this.warning() && this.warning().active;
+        return !this.hasLoading && !this.hasError && !!this.warning() && this.warning().active();
     }
     get warningText() {
         return this.warning()?.text || this.defaultWarningText;
@@ -16162,11 +16305,51 @@ class ClrSummaryArea {
     onResize() {
         if (!this.isCollapsed()) {
             this.updateGrid();
+            this.cdr.detectChanges();
+            // Recalculate height after grid update for responsive changes
+            // Use setTimeout to ensure DOM is updated with new grid layout
+            setTimeout(() => {
+                this.recalculatePanelHeight();
+            }, 0);
         }
     }
     ngAfterViewInit() {
         this.updateGrid();
         this.cdr.detectChanges();
+        // Set initial height after content is rendered
+        if (!this.isCollapsed()) {
+            // Use setTimeout to ensure DOM is fully painted
+            setTimeout(() => {
+                // If loading, calculate height immediately based on rows
+                if (this.hasLoading || this.hasError || this.hasWarning) {
+                    const calculatedHeight = this.calculateGridHeight();
+                    this.panelHeight = calculatedHeight + 'px';
+                    this.cdr.detectChanges();
+                }
+                else {
+                    this.recalculatePanelHeight();
+                }
+            }, 0);
+        }
+        // Subscribe to content changes (when items get dynamically added/removed)
+        this.itemsSubscription = this.items.changes.subscribe(() => {
+            // Force layout recalculation after DOM update
+            setTimeout(() => {
+                this.updateGrid();
+                this.cdr.detectChanges();
+                if (!this.isCollapsed()) {
+                    setTimeout(() => {
+                        this.recalculatePanelHeight();
+                    }, 0);
+                }
+            }, 0);
+        });
+    }
+    ngOnDestroy() {
+        this.itemsSubscription?.unsubscribe();
+        if (this.loadingVisibleTimeout) {
+            clearTimeout(this.loadingVisibleTimeout);
+        }
     }
     updateGrid() {
         if (this.items && this.items.length > 0) {
@@ -16188,15 +16371,121 @@ class ClrSummaryArea {
             this.cdr.detectChanges();
         }
     }
+    updatePanelHeight() {
+        if (this.panelsRef?.nativeElement) {
+            const el = this.panelsRef.nativeElement;
+            // For loading/error/warning states, use calculated height
+            if (this.hasLoading || this.hasError || this.hasWarning) {
+                const calculatedHeight = this.calculateGridHeight();
+                // Set to 0 first for animation start
+                this.panelHeight = '0px';
+                this.cdr.detectChanges();
+                void el.offsetHeight;
+                // Animate to calculated height
+                requestAnimationFrame(() => {
+                    this.panelHeight = calculatedHeight + 'px';
+                    this.cdr.markForCheck();
+                });
+                return;
+            }
+            // For grid state, measure the DOM
+            // Set to 0 first for animation start
+            this.panelHeight = '0px';
+            this.cdr.detectChanges();
+            // Force reflow
+            void el.offsetHeight;
+            // Temporarily set to auto to measure the full content height
+            el.style.height = 'auto';
+            const scrollHeight = el.scrollHeight;
+            // Reset to 0 to prepare for animation
+            el.style.height = '0px';
+            // Force reflow again
+            void el.offsetHeight;
+            // Animate to measured height
+            requestAnimationFrame(() => {
+                this.panelHeight = scrollHeight + 'px';
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    recalculatePanelHeight() {
+        if (this.panelsRef?.nativeElement && !this.isCollapsed()) {
+            // If specific states are active, use calculated height
+            if (this.hasLoading || this.hasError || this.hasWarning) {
+                const calculatedHeight = this.calculateGridHeight();
+                this.panelHeight = calculatedHeight + 'px';
+                this.cdr.detectChanges();
+                return;
+            }
+            const el = this.panelsRef.nativeElement;
+            // Set height to auto temporarily to measure true content height
+            const currentHeight = el.style.height;
+            el.style.height = 'auto';
+            // Force reflow to ensure measurement is accurate
+            void el.offsetHeight;
+            // Measure the actual content height
+            const scrollHeight = el.scrollHeight;
+            // Restore height and set new value
+            el.style.height = currentHeight;
+            this.panelHeight = scrollHeight + 'px';
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.cdr.markForCheck();
+            }, 0);
+        }
+    }
+    /**
+     * Calculate the expected grid height based on currentRows.
+     * This is used when the grid isn't rendered (e.g., during loading state).
+     * The loading container should match the grid height exactly.
+     *
+     * Grid structure:
+     * - .summary-area-container: margin 0 24px 9px 24px
+     * - .summary-grid: padding 3px 0, row-gap 6px
+     * - .summary-item: height 20px
+     *
+     * Formula: (rows * itemHeight) + ((rows - 1) * rowGap) + gridPadding + containerMargin
+     */
+    calculateGridHeight() {
+        const itemHeight = 20; // .summary-item height
+        const rowGap = 6; // .summary-grid row-gap
+        const gridPadding = 6; // .summary-grid padding (3px top + 3px bottom)
+        // For error/warning states, use a smaller fixed height
+        if (this.hasError || this.hasWarning) {
+            const alertHeight = itemHeight + 2 * rowGap;
+            return alertHeight + gridPadding;
+        }
+        // For loading state, calculate based on current rows
+        const gridHeight = this.currentRows * itemHeight + (this.currentRows - 1) * rowGap;
+        return gridHeight + gridPadding;
+    }
+    animateCollapse() {
+        if (this.panelsRef?.nativeElement) {
+            const el = this.panelsRef.nativeElement;
+            // Set current height explicitly first
+            this.panelHeight = el.scrollHeight + 'px';
+            this.cdr.detectChanges();
+            // Force reflow
+            void el.offsetHeight;
+            // Then animate to 0
+            requestAnimationFrame(() => {
+                this.panelHeight = '0px';
+                this.cdr.markForCheck();
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], ngImport: i0, template: "@if (!isCollapsed()) {\n<div class=\"summary-area-panels\" [class.is-active]=\"!isCollapsed()\">\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"hasLoading || hasError || hasWarning\"\n    [class.is-loading]=\"hasLoading\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [attr.aria-hidden]=\"hasLoading || hasError || hasWarning ? 'false' : 'true'\"\n    [attr.inert]=\"hasLoading || hasError || hasWarning ? null : ''\"\n  >\n    <div class=\"summary-area-panel__body\">\n      @if (hasLoading) {\n      <div class=\"summary-area-loading\">\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningLinkText }}</span\n            >\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows\">\n          <ng-container *ngFor=\"let item of visibleItems\">\n            <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}.summary-area-state{display:flex;align-items:center;padding:1rem;justify-content:left;width:100%}.error-alert{display:flex;width:100%;justify-content:left}clr-alert-item{display:flex;align-items:center;gap:.5rem}clr-alert-item .alert-text,clr-alert-item .alert-action{flex:0 0 auto;white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}.summary-area-state.error{color:var(--cds-alias-status-danger)}.summary-area-state.error cds-icon{color:var(--cds-alias-status-danger)}.summary-area-state.warning{color:var(--cds-alias-status-warning)}.summary-area-state.warning cds-icon{color:var(--cds-alias-status-warning)}.summary-area-panels{position:relative;max-height:0;opacity:0;transform:scaleY(.95);pointer-events:none;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.summary-area-panel{transform-origin:top center;transform:scaleY(.95);transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out;max-height:0;opacity:0;pointer-events:none;overflow:visible}.summary-area-panel__body{will-change:opacity,transform,max-height}.summary-area-panels.is-active,.summary-area-panel.is-active{max-height:700px;opacity:1;pointer-events:auto;transform:unset;overflow:visible}.summary-area-panel--state.is-active{margin-bottom:.5rem}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;min-height:80px}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}.summary-area-panel:not(.is-active){transform:scaleY(.9)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i1$1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1$1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1$1.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i1$1.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #panelsRef\n  class=\"summary-area-panels\"\n  [class.is-active]=\"!isCollapsed()\"\n  [class.loading-active]=\"hasLoading\"\n  [style.height]=\"panelHeight\"\n>\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [style.--rows]=\"currentRows\"\n    [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div\n        class=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningLinkText }}</span\n            >\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows\">\n          <ng-container *ngFor=\"let item of visibleItems\">\n            <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i1$1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1$1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1$1.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i1$1.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "@if (!isCollapsed()) {\n<div class=\"summary-area-panels\" [class.is-active]=\"!isCollapsed()\">\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"hasLoading || hasError || hasWarning\"\n    [class.is-loading]=\"hasLoading\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [attr.aria-hidden]=\"hasLoading || hasError || hasWarning ? 'false' : 'true'\"\n    [attr.inert]=\"hasLoading || hasError || hasWarning ? null : ''\"\n  >\n    <div class=\"summary-area-panel__body\">\n      @if (hasLoading) {\n      <div class=\"summary-area-loading\">\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningLinkText }}</span\n            >\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows\">\n          <ng-container *ngFor=\"let item of visibleItems\">\n            <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}.summary-area-state{display:flex;align-items:center;padding:1rem;justify-content:left;width:100%}.error-alert{display:flex;width:100%;justify-content:left}clr-alert-item{display:flex;align-items:center;gap:.5rem}clr-alert-item .alert-text,clr-alert-item .alert-action{flex:0 0 auto;white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}.summary-area-state.error{color:var(--cds-alias-status-danger)}.summary-area-state.error cds-icon{color:var(--cds-alias-status-danger)}.summary-area-state.warning{color:var(--cds-alias-status-warning)}.summary-area-state.warning cds-icon{color:var(--cds-alias-status-warning)}.summary-area-panels{position:relative;max-height:0;opacity:0;transform:scaleY(.95);pointer-events:none;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.summary-area-panel{transform-origin:top center;transform:scaleY(.95);transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out;max-height:0;opacity:0;pointer-events:none;overflow:visible}.summary-area-panel__body{will-change:opacity,transform,max-height}.summary-area-panels.is-active,.summary-area-panel.is-active{max-height:700px;opacity:1;pointer-events:auto;transform:unset;overflow:visible}.summary-area-panel--state.is-active{margin-bottom:.5rem}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;min-height:80px}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}.summary-area-panel:not(.is-active){transform:scaleY(.9)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}\n"] }]
+            args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div\n  #panelsRef\n  class=\"summary-area-panels\"\n  [class.is-active]=\"!isCollapsed()\"\n  [class.loading-active]=\"hasLoading\"\n  [style.height]=\"panelHeight\"\n>\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [style.--rows]=\"currentRows\"\n    [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div\n        class=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningLinkText }}</span\n            >\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows\">\n          <ng-container *ngFor=\"let item of visibleItems\">\n            <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{
                 type: ContentChildren,
                 args: [ClrSummaryItem, { descendants: true }]
+            }], panelsRef: [{
+                type: ViewChild,
+                args: ['panelsRef', { static: true }]
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']