@porscheinformatik/clr-addons 19.11.2 → 19.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/clr-addons.mjs +124 -64
- package/fesm2022/clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/summary-area/summary-area/summary-area-state.service.d.ts +3 -2
- package/summary-area/summary-area/summary-area.d.ts +9 -8
- package/summary-area/summary-item/summary-item.d.ts +2 -1
- package/summary-area/summary-item-value/summary-item-value.d.ts +6 -0
- package/summary-area/summary-item-value-copy-button/summary-item-value-copy-button.d.ts +14 -4
package/fesm2022/clr-addons.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
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';
|
|
2
|
+
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';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DOCUMENT, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgForOf, NgClass } from '@angular/common';
|
|
5
5
|
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 {
|
|
|
15610
15610
|
this.contentCheckScheduled = false;
|
|
15611
15611
|
this.ngZone = inject(NgZone);
|
|
15612
15612
|
this.cdr = inject(ChangeDetectorRef);
|
|
15613
|
+
// Watch for value changes and trigger overflow detection
|
|
15614
|
+
effect(() => {
|
|
15615
|
+
// Access the value signal to track changes
|
|
15616
|
+
const currentValue = this.value();
|
|
15617
|
+
if (currentValue !== undefined && currentValue !== null && currentValue !== '') {
|
|
15618
|
+
// Schedule overflow check after view updates
|
|
15619
|
+
this.scheduleOverflowCheck();
|
|
15620
|
+
}
|
|
15621
|
+
});
|
|
15613
15622
|
}
|
|
15614
15623
|
get hasIcon() {
|
|
15615
15624
|
return !!this.icon()?.trim();
|
|
@@ -15709,27 +15718,23 @@ class ClrSummaryItemValue {
|
|
|
15709
15718
|
});
|
|
15710
15719
|
}
|
|
15711
15720
|
setupOverflowDetection() {
|
|
15712
|
-
|
|
15721
|
+
const el = this.valueElement?.nativeElement;
|
|
15722
|
+
if (!el) {
|
|
15723
|
+
return;
|
|
15724
|
+
}
|
|
15725
|
+
// Defer initial check to next tick to avoid ExpressionChangedAfterItHasBeenCheckedError
|
|
15726
|
+
setTimeout(() => {
|
|
15727
|
+
this.checkTextOverflowSync();
|
|
15728
|
+
this.cdr.markForCheck();
|
|
15729
|
+
});
|
|
15713
15730
|
this.ngZone.runOutsideAngular(() => {
|
|
15714
15731
|
this.resizeObserver = new ResizeObserver(() => {
|
|
15715
|
-
|
|
15716
|
-
|
|
15717
|
-
|
|
15718
|
-
|
|
15719
|
-
if (prevOverflowing !== this.isTextOverflowing || prevTooltipSize !== this.tooltipSize) {
|
|
15720
|
-
this.ngZone.run(() => {
|
|
15721
|
-
this.cdr.markForCheck();
|
|
15722
|
-
});
|
|
15723
|
-
}
|
|
15732
|
+
this.ngZone.run(() => {
|
|
15733
|
+
this.checkTextOverflowSync();
|
|
15734
|
+
this.cdr.markForCheck();
|
|
15735
|
+
});
|
|
15724
15736
|
});
|
|
15725
|
-
|
|
15726
|
-
if (this.valueElement?.nativeElement) {
|
|
15727
|
-
this.resizeObserver.observe(this.valueElement.nativeElement);
|
|
15728
|
-
}
|
|
15729
|
-
});
|
|
15730
|
-
// Defer initial check to avoid ExpressionChangedAfterItHasBeenCheckedError
|
|
15731
|
-
Promise.resolve().then(() => {
|
|
15732
|
-
this.checkTextOverflowSync();
|
|
15737
|
+
this.resizeObserver.observe(el);
|
|
15733
15738
|
});
|
|
15734
15739
|
}
|
|
15735
15740
|
checkTextOverflowSync() {
|
|
@@ -15739,12 +15744,23 @@ class ClrSummaryItemValue {
|
|
|
15739
15744
|
}
|
|
15740
15745
|
const tooltip = this.effectiveTooltip;
|
|
15741
15746
|
// if the tooltip content is too short for medium size, size small should be used instead
|
|
15742
|
-
const newSize = tooltip && tooltip.length <
|
|
15747
|
+
const newSize = tooltip && tooltip.length < 30 ? 'sm' : 'md';
|
|
15743
15748
|
if (this.tooltipSize !== newSize) {
|
|
15744
15749
|
this.tooltipSize = newSize;
|
|
15745
15750
|
this.cdr.markForCheck();
|
|
15746
15751
|
}
|
|
15747
15752
|
}
|
|
15753
|
+
/**
|
|
15754
|
+
* Schedule an overflow check after the DOM has been updated.
|
|
15755
|
+
* Uses setTimeout to ensure the check runs outside of change detection.
|
|
15756
|
+
*/
|
|
15757
|
+
scheduleOverflowCheck() {
|
|
15758
|
+
// Use setTimeout to ensure the check runs outside of Angular's change detection
|
|
15759
|
+
setTimeout(() => {
|
|
15760
|
+
this.checkTextOverflowSync();
|
|
15761
|
+
this.cdr.markForCheck();
|
|
15762
|
+
});
|
|
15763
|
+
}
|
|
15748
15764
|
/** @internal - Manually trigger projected content check. Useful for testing. */
|
|
15749
15765
|
checkProjectedContent() {
|
|
15750
15766
|
if (this.projectedContent?.nativeElement) {
|
|
@@ -15776,12 +15792,12 @@ class ClrSummaryItemValue {
|
|
|
15776
15792
|
return false;
|
|
15777
15793
|
}
|
|
15778
15794
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15779
|
-
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) {
|
|
15795
|
+
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 }] }); }
|
|
15780
15796
|
}
|
|
15781
15797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
|
|
15782
15798
|
type: Component,
|
|
15783
|
-
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) {
|
|
15784
|
-
}], propDecorators: { projectedContent: [{
|
|
15799
|
+
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"] }]
|
|
15800
|
+
}], ctorParameters: () => [], propDecorators: { projectedContent: [{
|
|
15785
15801
|
type: ViewChild,
|
|
15786
15802
|
args: ['projectedContent']
|
|
15787
15803
|
}], valueElement: [{
|
|
@@ -15807,25 +15823,51 @@ ClarityIcons.addIcons(copyToClipboardIcon, successStandardIcon);
|
|
|
15807
15823
|
class ClrSummaryItemValueCopyButton {
|
|
15808
15824
|
constructor() {
|
|
15809
15825
|
this.value = input.required();
|
|
15810
|
-
this.
|
|
15826
|
+
this.tooltipText = input('Copy to clipboard');
|
|
15827
|
+
this.showCopiedIcon = false;
|
|
15828
|
+
this.tooltipSize = 'md';
|
|
15811
15829
|
this.cdr = inject(ChangeDetectorRef);
|
|
15830
|
+
this.resetTimeout = null;
|
|
15812
15831
|
}
|
|
15813
|
-
|
|
15814
|
-
|
|
15832
|
+
ngOnInit() {
|
|
15833
|
+
const newSize = this.tooltipText && this.tooltipText().length < 30 ? 'sm' : 'md';
|
|
15834
|
+
if (this.tooltipSize !== newSize) {
|
|
15835
|
+
this.tooltipSize = newSize;
|
|
15836
|
+
this.cdr.markForCheck();
|
|
15837
|
+
}
|
|
15838
|
+
}
|
|
15839
|
+
ngOnDestroy() {
|
|
15840
|
+
if (this.resetTimeout) {
|
|
15841
|
+
clearTimeout(this.resetTimeout);
|
|
15842
|
+
this.resetTimeout = null;
|
|
15843
|
+
}
|
|
15844
|
+
}
|
|
15845
|
+
/**
|
|
15846
|
+
* Called when the clipboard copy operation completes.
|
|
15847
|
+
* @param success Whether the copy was successful
|
|
15848
|
+
*/
|
|
15849
|
+
onCopied(success) {
|
|
15850
|
+
if (!success) {
|
|
15815
15851
|
return;
|
|
15816
15852
|
}
|
|
15817
|
-
|
|
15818
|
-
|
|
15819
|
-
this.
|
|
15820
|
-
|
|
15821
|
-
|
|
15853
|
+
// Clear any pending reset timeout to restart the timer
|
|
15854
|
+
if (this.resetTimeout) {
|
|
15855
|
+
clearTimeout(this.resetTimeout);
|
|
15856
|
+
}
|
|
15857
|
+
this.showCopiedIcon = true;
|
|
15858
|
+
this.cdr.markForCheck();
|
|
15859
|
+
this.resetTimeout = setTimeout(() => {
|
|
15860
|
+
this.showCopiedIcon = false;
|
|
15861
|
+
this.resetTimeout = null;
|
|
15862
|
+
this.cdr.markForCheck();
|
|
15863
|
+
}, 1000);
|
|
15822
15864
|
}
|
|
15823
15865
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15824
|
-
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
|
|
15866
|
+
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 }); }
|
|
15825
15867
|
}
|
|
15826
15868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, decorators: [{
|
|
15827
15869
|
type: Component,
|
|
15828
|
-
args: [{ selector: 'clr-summary-area-value-copy-button', imports: [CdkCopyToClipboard, NgClass, ClrIconModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<cds-icon\n
|
|
15870
|
+
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"] }]
|
|
15829
15871
|
}] });
|
|
15830
15872
|
|
|
15831
15873
|
/*
|
|
@@ -15842,6 +15884,7 @@ class ClrSummaryItem {
|
|
|
15842
15884
|
this.editConfig = input();
|
|
15843
15885
|
this.showOnEmptyValue = input(true);
|
|
15844
15886
|
this.valueCopyable = input(false);
|
|
15887
|
+
this.copyButtonTooltip = input('Copy to clipboard');
|
|
15845
15888
|
this.hasProjectedContent = false;
|
|
15846
15889
|
this.cdr = inject(ChangeDetectorRef);
|
|
15847
15890
|
this.contentCheckScheduled = false;
|
|
@@ -16014,11 +16057,11 @@ class ClrSummaryItem {
|
|
|
16014
16057
|
});
|
|
16015
16058
|
}
|
|
16016
16059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16017
|
-
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\">—</span>\n }
|
|
16060
|
+
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 <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\">—</span>\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}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"] }] }); }
|
|
16018
16061
|
}
|
|
16019
16062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, decorators: [{
|
|
16020
16063
|
type: Component,
|
|
16021
|
-
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\">—</span>\n }
|
|
16064
|
+
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 <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\">—</span>\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}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"] }]
|
|
16022
16065
|
}], propDecorators: { template: [{
|
|
16023
16066
|
type: ViewChild,
|
|
16024
16067
|
args: ['itemTemplate', { static: true }]
|
|
@@ -16039,36 +16082,54 @@ const defaultSummaryAreaCollapsedKey = 'clrSummaryAreaCollapsed';
|
|
|
16039
16082
|
class ClrSummaryAreaStateService {
|
|
16040
16083
|
constructor() {
|
|
16041
16084
|
this.collapsedMap = new Map();
|
|
16085
|
+
this.effectsInitialized = new Set();
|
|
16086
|
+
this.injector = inject(Injector);
|
|
16042
16087
|
}
|
|
16043
16088
|
collapsed(key) {
|
|
16044
16089
|
const storageKey = key || defaultSummaryAreaCollapsedKey;
|
|
16045
|
-
|
|
16090
|
+
// Use untracked to avoid reactive context issues when getting/creating the signal
|
|
16091
|
+
return untracked(() => {
|
|
16092
|
+
if (!this.collapsedMap.has(storageKey)) {
|
|
16093
|
+
const collapsedSignal = signal(this.readInitialState(storageKey));
|
|
16094
|
+
this.collapsedMap.set(storageKey, collapsedSignal);
|
|
16095
|
+
// Schedule effect creation outside of any reactive context
|
|
16096
|
+
this.scheduleEffectCreation(storageKey, collapsedSignal);
|
|
16097
|
+
}
|
|
16098
|
+
return this.collapsedMap.get(storageKey);
|
|
16099
|
+
});
|
|
16100
|
+
}
|
|
16101
|
+
scheduleEffectCreation(storageKey, collapsedSignal) {
|
|
16102
|
+
if (this.effectsInitialized.has(storageKey)) {
|
|
16103
|
+
return;
|
|
16104
|
+
}
|
|
16105
|
+
this.effectsInitialized.add(storageKey);
|
|
16106
|
+
// Use setTimeout to ensure effect is created outside of any reactive context
|
|
16107
|
+
setTimeout(() => {
|
|
16108
|
+
runInInjectionContext(this.injector, () => {
|
|
16109
|
+
effect(() => {
|
|
16110
|
+
const value = collapsedSignal();
|
|
16111
|
+
try {
|
|
16112
|
+
localStorage.setItem(storageKey, String(value));
|
|
16113
|
+
}
|
|
16114
|
+
catch (e) {
|
|
16115
|
+
// Ignore storage errors
|
|
16116
|
+
}
|
|
16117
|
+
});
|
|
16118
|
+
});
|
|
16119
|
+
});
|
|
16046
16120
|
}
|
|
16047
16121
|
toggle(key) {
|
|
16048
16122
|
const storageKey = key || defaultSummaryAreaCollapsedKey;
|
|
16049
|
-
const
|
|
16050
|
-
|
|
16051
|
-
|
|
16052
|
-
this.persistToStorage(storageKey, newValue);
|
|
16053
|
-
}
|
|
16054
|
-
setCollapsed(key, value) {
|
|
16055
|
-
const entry = this.getOrCreateEntry(key);
|
|
16056
|
-
entry.signal.set(value);
|
|
16057
|
-
this.persistToStorage(key, value);
|
|
16058
|
-
}
|
|
16059
|
-
getOrCreateEntry(storageKey) {
|
|
16060
|
-
if (!this.collapsedMap.has(storageKey)) {
|
|
16061
|
-
const collapsedSignal = signal(this.readInitialState(storageKey));
|
|
16062
|
-
this.collapsedMap.set(storageKey, { signal: collapsedSignal, storageKey });
|
|
16123
|
+
const collapsedSignal = this.collapsedMap.get(storageKey);
|
|
16124
|
+
if (collapsedSignal) {
|
|
16125
|
+
collapsedSignal.update(value => !value);
|
|
16063
16126
|
}
|
|
16064
|
-
return this.collapsedMap.get(storageKey);
|
|
16065
16127
|
}
|
|
16066
|
-
|
|
16067
|
-
|
|
16068
|
-
|
|
16069
|
-
|
|
16070
|
-
|
|
16071
|
-
// Ignore storage errors
|
|
16128
|
+
setCollapsed(key, value) {
|
|
16129
|
+
const storageKey = key || defaultSummaryAreaCollapsedKey;
|
|
16130
|
+
const collapsedSignal = this.collapsedMap.get(storageKey);
|
|
16131
|
+
if (collapsedSignal) {
|
|
16132
|
+
collapsedSignal.set(value);
|
|
16072
16133
|
}
|
|
16073
16134
|
}
|
|
16074
16135
|
readInitialState(storageKey) {
|
|
@@ -16100,17 +16161,13 @@ class ClrSummaryArea {
|
|
|
16100
16161
|
this.warning = input();
|
|
16101
16162
|
this.loading = input();
|
|
16102
16163
|
this.currentColumns = 5;
|
|
16103
|
-
this.currentRows =
|
|
16164
|
+
this.currentRows = this.rows();
|
|
16104
16165
|
this.state = inject(ClrSummaryAreaStateService);
|
|
16105
16166
|
this.cdr = inject(ChangeDetectorRef);
|
|
16106
16167
|
this.defaultLoadingText = 'Loading...';
|
|
16107
16168
|
this.defaultErrorText = 'Error';
|
|
16108
16169
|
this.defaultWarningText = 'Warning';
|
|
16109
16170
|
this.maxColumns = 5;
|
|
16110
|
-
this.isCollapsed = computed(() => {
|
|
16111
|
-
return this.state.collapsed(this.localStorageKey())();
|
|
16112
|
-
});
|
|
16113
|
-
this.currentRows = this.rows();
|
|
16114
16171
|
effect(() => {
|
|
16115
16172
|
if (!this.isCollapsed()) {
|
|
16116
16173
|
this.updateGrid();
|
|
@@ -16118,6 +16175,9 @@ class ClrSummaryArea {
|
|
|
16118
16175
|
}
|
|
16119
16176
|
});
|
|
16120
16177
|
}
|
|
16178
|
+
ngOnInit() {
|
|
16179
|
+
this.isCollapsed = this.state.collapsed(this.localStorageKey());
|
|
16180
|
+
}
|
|
16121
16181
|
/**
|
|
16122
16182
|
* Depending on the current rows input only a specific amount of items can be visible to the user.
|
|
16123
16183
|
* The summary area only supports up to 5 columns.
|
|
@@ -16189,11 +16249,11 @@ class ClrSummaryArea {
|
|
|
16189
16249
|
}
|
|
16190
16250
|
}
|
|
16191
16251
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16192
|
-
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: "
|
|
16252
|
+
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: "<div class=\"summary-area-panels\" [class.is-active]=\"!isCollapsed()\">\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-loading]=\"hasLoading\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\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 @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]=\"!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}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)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;max-height:0;height:0;opacity:0;transform:scaleY(.95);pointer-events:none;visibility:hidden;overflow:hidden;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out,visibility 0s .2s}.summary-area-panels.is-active{max-height:700px;height:auto;opacity:1;pointer-events:auto;transform:unset;visibility:visible;overflow:visible;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out,visibility 0s 0s}.summary-area-panel{transform-origin:top center;transform:scaleY(.95);max-height:0;opacity:0;pointer-events:none;overflow:hidden;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.summary-area-panel__body{will-change:opacity,transform,max-height}.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)}\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"] }] }); }
|
|
16193
16253
|
}
|
|
16194
16254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, decorators: [{
|
|
16195
16255
|
type: Component,
|
|
16196
|
-
args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "
|
|
16256
|
+
args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div class=\"summary-area-panels\" [class.is-active]=\"!isCollapsed()\">\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-loading]=\"hasLoading\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\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 @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]=\"!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}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)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;max-height:0;height:0;opacity:0;transform:scaleY(.95);pointer-events:none;visibility:hidden;overflow:hidden;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out,visibility 0s .2s}.summary-area-panels.is-active{max-height:700px;height:auto;opacity:1;pointer-events:auto;transform:unset;visibility:visible;overflow:visible;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out,visibility 0s 0s}.summary-area-panel{transform-origin:top center;transform:scaleY(.95);max-height:0;opacity:0;pointer-events:none;overflow:hidden;transition:max-height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.summary-area-panel__body{will-change:opacity,transform,max-height}.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)}\n"] }]
|
|
16197
16257
|
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
16198
16258
|
type: ContentChildren,
|
|
16199
16259
|
args: [ClrSummaryItem, { descendants: true }]
|