@porscheinformatik/clr-addons 19.11.1 → 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/export-datagrid-button/export-datagrid-button.component.d.ts +5 -2
- package/fesm2022/clr-addons.mjs +144 -77
- 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
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { ElementRef, EventEmitter } from '@angular/core';
|
|
1
|
+
import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
|
|
2
2
|
import { ClrDatagrid } from '@clr/angular';
|
|
3
3
|
import { ExportDatagridService } from './export-datagrid.service';
|
|
4
4
|
import { ExportType, ExportTypeEnum } from './export-type.model';
|
|
5
|
+
import { Subject } from 'rxjs';
|
|
5
6
|
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class ExportDatagridButtonComponent {
|
|
7
|
+
export declare class ExportDatagridButtonComponent implements OnDestroy {
|
|
7
8
|
private readonly exportService;
|
|
8
9
|
datagrid: import("@angular/core").InputSignal<ClrDatagrid<any>>;
|
|
9
10
|
datagridRef: import("@angular/core").InputSignal<ElementRef<any>>;
|
|
@@ -13,6 +14,7 @@ export declare class ExportDatagridButtonComponent {
|
|
|
13
14
|
exportButtonPosition: import("@angular/core").InputSignal<"right" | "left">;
|
|
14
15
|
possibleExportTypes: import("@angular/core").WritableSignal<ExportTypeEnum[]>;
|
|
15
16
|
exportButtonText: import("@angular/core").InputSignal<string>;
|
|
17
|
+
destroy$: Subject<void>;
|
|
16
18
|
readonly backendExport: EventEmitter<ExportTypeEnum>;
|
|
17
19
|
readonly exportTypes: ExportType[];
|
|
18
20
|
readonly exportTypesFiltered: import("@angular/core").Signal<{
|
|
@@ -20,6 +22,7 @@ export declare class ExportDatagridButtonComponent {
|
|
|
20
22
|
value: string;
|
|
21
23
|
}[]>;
|
|
22
24
|
constructor(exportService: ExportDatagridService);
|
|
25
|
+
ngOnDestroy(): void;
|
|
23
26
|
private exportExcel;
|
|
24
27
|
onExport(type: ExportTypeEnum): void;
|
|
25
28
|
/**
|
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';
|
|
@@ -15458,6 +15458,7 @@ class ExportDatagridButtonComponent {
|
|
|
15458
15458
|
this.exportButtonPosition = input('right');
|
|
15459
15459
|
this.possibleExportTypes = signal([ExportTypeEnum.ALL]);
|
|
15460
15460
|
this.exportButtonText = input('EXPORT');
|
|
15461
|
+
this.destroy$ = new Subject();
|
|
15461
15462
|
/* outputs */
|
|
15462
15463
|
this.backendExport = new EventEmitter();
|
|
15463
15464
|
this.exportTypes = [
|
|
@@ -15466,23 +15467,10 @@ class ExportDatagridButtonComponent {
|
|
|
15466
15467
|
{ type: ExportTypeEnum.SELECTED, value: 'Selected entries' },
|
|
15467
15468
|
];
|
|
15468
15469
|
this.exportTypesFiltered = computed(() => {
|
|
15469
|
-
this.possibleExportTypes();
|
|
15470
15470
|
let exportTypesToShowVal = this.exportTypesToShow();
|
|
15471
15471
|
if (!exportTypesToShowVal || exportTypesToShowVal.length === 0) {
|
|
15472
15472
|
exportTypesToShowVal = this.exportTypes;
|
|
15473
15473
|
}
|
|
15474
|
-
for (const column of this.datagrid().columns) {
|
|
15475
|
-
// if a column filter is applied, show the FILTERED export type
|
|
15476
|
-
column.filterValueChange.subscribe((col) => {
|
|
15477
|
-
this.updateExportType(ExportTypeEnum.FILTERED, !!col, exportTypesToShowVal);
|
|
15478
|
-
});
|
|
15479
|
-
}
|
|
15480
|
-
this.datagrid().selectedChanged.subscribe(() => {
|
|
15481
|
-
const hasSelection = this.datagrid().selection.current.length > 0;
|
|
15482
|
-
// if a row is selected, show the SELECTED export type
|
|
15483
|
-
this.updateExportType(ExportTypeEnum.SELECTED, hasSelection, exportTypesToShowVal);
|
|
15484
|
-
});
|
|
15485
|
-
// Map to translated value, falling back to default if value is not provided
|
|
15486
15474
|
return exportTypesToShowVal
|
|
15487
15475
|
.filter(showType => this.possibleExportTypes().some(et => et === showType.type))
|
|
15488
15476
|
.map(showType => {
|
|
@@ -15493,6 +15481,25 @@ class ExportDatagridButtonComponent {
|
|
|
15493
15481
|
};
|
|
15494
15482
|
});
|
|
15495
15483
|
});
|
|
15484
|
+
effect(() => {
|
|
15485
|
+
const datagrid = this.datagrid();
|
|
15486
|
+
if (!datagrid) {
|
|
15487
|
+
return undefined;
|
|
15488
|
+
}
|
|
15489
|
+
this.destroy$.next();
|
|
15490
|
+
datagrid.refresh.pipe(delay(0), takeUntil(this.destroy$)).subscribe(dgState => {
|
|
15491
|
+
const hasFilter = dgState.filters && dgState.filters.length > 0;
|
|
15492
|
+
this.updateExportType(ExportTypeEnum.FILTERED, hasFilter, this.exportTypesToShow() || this.exportTypes);
|
|
15493
|
+
});
|
|
15494
|
+
datagrid.selectedChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
15495
|
+
const hasSelection = datagrid.selection.current.length > 0;
|
|
15496
|
+
this.updateExportType(ExportTypeEnum.SELECTED, hasSelection, this.exportTypesToShow() || this.exportTypes);
|
|
15497
|
+
});
|
|
15498
|
+
});
|
|
15499
|
+
}
|
|
15500
|
+
ngOnDestroy() {
|
|
15501
|
+
this.destroy$.next();
|
|
15502
|
+
this.destroy$.complete();
|
|
15496
15503
|
}
|
|
15497
15504
|
exportExcel(type) {
|
|
15498
15505
|
if (!this.datagrid() || !this.datagridRef()) {
|
|
@@ -15603,6 +15610,15 @@ class ClrSummaryItemValue {
|
|
|
15603
15610
|
this.contentCheckScheduled = false;
|
|
15604
15611
|
this.ngZone = inject(NgZone);
|
|
15605
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
|
+
});
|
|
15606
15622
|
}
|
|
15607
15623
|
get hasIcon() {
|
|
15608
15624
|
return !!this.icon()?.trim();
|
|
@@ -15702,27 +15718,23 @@ class ClrSummaryItemValue {
|
|
|
15702
15718
|
});
|
|
15703
15719
|
}
|
|
15704
15720
|
setupOverflowDetection() {
|
|
15705
|
-
|
|
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
|
+
});
|
|
15706
15730
|
this.ngZone.runOutsideAngular(() => {
|
|
15707
15731
|
this.resizeObserver = new ResizeObserver(() => {
|
|
15708
|
-
|
|
15709
|
-
|
|
15710
|
-
|
|
15711
|
-
|
|
15712
|
-
if (prevOverflowing !== this.isTextOverflowing || prevTooltipSize !== this.tooltipSize) {
|
|
15713
|
-
this.ngZone.run(() => {
|
|
15714
|
-
this.cdr.markForCheck();
|
|
15715
|
-
});
|
|
15716
|
-
}
|
|
15732
|
+
this.ngZone.run(() => {
|
|
15733
|
+
this.checkTextOverflowSync();
|
|
15734
|
+
this.cdr.markForCheck();
|
|
15735
|
+
});
|
|
15717
15736
|
});
|
|
15718
|
-
|
|
15719
|
-
if (this.valueElement?.nativeElement) {
|
|
15720
|
-
this.resizeObserver.observe(this.valueElement.nativeElement);
|
|
15721
|
-
}
|
|
15722
|
-
});
|
|
15723
|
-
// Defer initial check to avoid ExpressionChangedAfterItHasBeenCheckedError
|
|
15724
|
-
Promise.resolve().then(() => {
|
|
15725
|
-
this.checkTextOverflowSync();
|
|
15737
|
+
this.resizeObserver.observe(el);
|
|
15726
15738
|
});
|
|
15727
15739
|
}
|
|
15728
15740
|
checkTextOverflowSync() {
|
|
@@ -15732,12 +15744,23 @@ class ClrSummaryItemValue {
|
|
|
15732
15744
|
}
|
|
15733
15745
|
const tooltip = this.effectiveTooltip;
|
|
15734
15746
|
// if the tooltip content is too short for medium size, size small should be used instead
|
|
15735
|
-
const newSize = tooltip && tooltip.length <
|
|
15747
|
+
const newSize = tooltip && tooltip.length < 30 ? 'sm' : 'md';
|
|
15736
15748
|
if (this.tooltipSize !== newSize) {
|
|
15737
15749
|
this.tooltipSize = newSize;
|
|
15738
15750
|
this.cdr.markForCheck();
|
|
15739
15751
|
}
|
|
15740
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
|
+
}
|
|
15741
15764
|
/** @internal - Manually trigger projected content check. Useful for testing. */
|
|
15742
15765
|
checkProjectedContent() {
|
|
15743
15766
|
if (this.projectedContent?.nativeElement) {
|
|
@@ -15769,12 +15792,12 @@ class ClrSummaryItemValue {
|
|
|
15769
15792
|
return false;
|
|
15770
15793
|
}
|
|
15771
15794
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15772
|
-
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 }] }); }
|
|
15773
15796
|
}
|
|
15774
15797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
|
|
15775
15798
|
type: Component,
|
|
15776
|
-
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) {
|
|
15777
|
-
}], 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: [{
|
|
15778
15801
|
type: ViewChild,
|
|
15779
15802
|
args: ['projectedContent']
|
|
15780
15803
|
}], valueElement: [{
|
|
@@ -15800,25 +15823,51 @@ ClarityIcons.addIcons(copyToClipboardIcon, successStandardIcon);
|
|
|
15800
15823
|
class ClrSummaryItemValueCopyButton {
|
|
15801
15824
|
constructor() {
|
|
15802
15825
|
this.value = input.required();
|
|
15803
|
-
this.
|
|
15826
|
+
this.tooltipText = input('Copy to clipboard');
|
|
15827
|
+
this.showCopiedIcon = false;
|
|
15828
|
+
this.tooltipSize = 'md';
|
|
15804
15829
|
this.cdr = inject(ChangeDetectorRef);
|
|
15830
|
+
this.resetTimeout = null;
|
|
15805
15831
|
}
|
|
15806
|
-
|
|
15807
|
-
|
|
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) {
|
|
15808
15851
|
return;
|
|
15809
15852
|
}
|
|
15810
|
-
|
|
15811
|
-
|
|
15812
|
-
this.
|
|
15813
|
-
|
|
15814
|
-
|
|
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);
|
|
15815
15864
|
}
|
|
15816
15865
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15817
|
-
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 }); }
|
|
15818
15867
|
}
|
|
15819
15868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, decorators: [{
|
|
15820
15869
|
type: Component,
|
|
15821
|
-
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"] }]
|
|
15822
15871
|
}] });
|
|
15823
15872
|
|
|
15824
15873
|
/*
|
|
@@ -15835,6 +15884,7 @@ class ClrSummaryItem {
|
|
|
15835
15884
|
this.editConfig = input();
|
|
15836
15885
|
this.showOnEmptyValue = input(true);
|
|
15837
15886
|
this.valueCopyable = input(false);
|
|
15887
|
+
this.copyButtonTooltip = input('Copy to clipboard');
|
|
15838
15888
|
this.hasProjectedContent = false;
|
|
15839
15889
|
this.cdr = inject(ChangeDetectorRef);
|
|
15840
15890
|
this.contentCheckScheduled = false;
|
|
@@ -16007,11 +16057,11 @@ class ClrSummaryItem {
|
|
|
16007
16057
|
});
|
|
16008
16058
|
}
|
|
16009
16059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16010
|
-
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"] }] }); }
|
|
16011
16061
|
}
|
|
16012
16062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, decorators: [{
|
|
16013
16063
|
type: Component,
|
|
16014
|
-
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"] }]
|
|
16015
16065
|
}], propDecorators: { template: [{
|
|
16016
16066
|
type: ViewChild,
|
|
16017
16067
|
args: ['itemTemplate', { static: true }]
|
|
@@ -16032,36 +16082,54 @@ const defaultSummaryAreaCollapsedKey = 'clrSummaryAreaCollapsed';
|
|
|
16032
16082
|
class ClrSummaryAreaStateService {
|
|
16033
16083
|
constructor() {
|
|
16034
16084
|
this.collapsedMap = new Map();
|
|
16085
|
+
this.effectsInitialized = new Set();
|
|
16086
|
+
this.injector = inject(Injector);
|
|
16035
16087
|
}
|
|
16036
16088
|
collapsed(key) {
|
|
16037
16089
|
const storageKey = key || defaultSummaryAreaCollapsedKey;
|
|
16038
|
-
|
|
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
|
+
});
|
|
16039
16120
|
}
|
|
16040
16121
|
toggle(key) {
|
|
16041
16122
|
const storageKey = key || defaultSummaryAreaCollapsedKey;
|
|
16042
|
-
const
|
|
16043
|
-
|
|
16044
|
-
|
|
16045
|
-
this.persistToStorage(storageKey, newValue);
|
|
16046
|
-
}
|
|
16047
|
-
setCollapsed(key, value) {
|
|
16048
|
-
const entry = this.getOrCreateEntry(key);
|
|
16049
|
-
entry.signal.set(value);
|
|
16050
|
-
this.persistToStorage(key, value);
|
|
16051
|
-
}
|
|
16052
|
-
getOrCreateEntry(storageKey) {
|
|
16053
|
-
if (!this.collapsedMap.has(storageKey)) {
|
|
16054
|
-
const collapsedSignal = signal(this.readInitialState(storageKey));
|
|
16055
|
-
this.collapsedMap.set(storageKey, { signal: collapsedSignal, storageKey });
|
|
16123
|
+
const collapsedSignal = this.collapsedMap.get(storageKey);
|
|
16124
|
+
if (collapsedSignal) {
|
|
16125
|
+
collapsedSignal.update(value => !value);
|
|
16056
16126
|
}
|
|
16057
|
-
return this.collapsedMap.get(storageKey);
|
|
16058
16127
|
}
|
|
16059
|
-
|
|
16060
|
-
|
|
16061
|
-
|
|
16062
|
-
|
|
16063
|
-
|
|
16064
|
-
// 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);
|
|
16065
16133
|
}
|
|
16066
16134
|
}
|
|
16067
16135
|
readInitialState(storageKey) {
|
|
@@ -16093,17 +16161,13 @@ class ClrSummaryArea {
|
|
|
16093
16161
|
this.warning = input();
|
|
16094
16162
|
this.loading = input();
|
|
16095
16163
|
this.currentColumns = 5;
|
|
16096
|
-
this.currentRows =
|
|
16164
|
+
this.currentRows = this.rows();
|
|
16097
16165
|
this.state = inject(ClrSummaryAreaStateService);
|
|
16098
16166
|
this.cdr = inject(ChangeDetectorRef);
|
|
16099
16167
|
this.defaultLoadingText = 'Loading...';
|
|
16100
16168
|
this.defaultErrorText = 'Error';
|
|
16101
16169
|
this.defaultWarningText = 'Warning';
|
|
16102
16170
|
this.maxColumns = 5;
|
|
16103
|
-
this.isCollapsed = computed(() => {
|
|
16104
|
-
return this.state.collapsed(this.localStorageKey())();
|
|
16105
|
-
});
|
|
16106
|
-
this.currentRows = this.rows();
|
|
16107
16171
|
effect(() => {
|
|
16108
16172
|
if (!this.isCollapsed()) {
|
|
16109
16173
|
this.updateGrid();
|
|
@@ -16111,6 +16175,9 @@ class ClrSummaryArea {
|
|
|
16111
16175
|
}
|
|
16112
16176
|
});
|
|
16113
16177
|
}
|
|
16178
|
+
ngOnInit() {
|
|
16179
|
+
this.isCollapsed = this.state.collapsed(this.localStorageKey());
|
|
16180
|
+
}
|
|
16114
16181
|
/**
|
|
16115
16182
|
* Depending on the current rows input only a specific amount of items can be visible to the user.
|
|
16116
16183
|
* The summary area only supports up to 5 columns.
|
|
@@ -16182,11 +16249,11 @@ class ClrSummaryArea {
|
|
|
16182
16249
|
}
|
|
16183
16250
|
}
|
|
16184
16251
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16185
|
-
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"] }] }); }
|
|
16186
16253
|
}
|
|
16187
16254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, decorators: [{
|
|
16188
16255
|
type: Component,
|
|
16189
|
-
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"] }]
|
|
16190
16257
|
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
16191
16258
|
type: ContentChildren,
|
|
16192
16259
|
args: [ClrSummaryItem, { descendants: true }]
|