@porscheinformatik/clr-addons 19.12.0 → 19.12.1
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 +79 -10
- package/fesm2022/clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/summary-area/summary-area-toggle/summary-area-toggle.d.ts +4 -1
- package/summary-area/summary-item-value/summary-item-value.d.ts +4 -0
- package/summary-area/summary-item-value-copy-button/summary-item-value-copy-button.d.ts +7 -2
package/fesm2022/clr-addons.mjs
CHANGED
|
@@ -15677,7 +15677,9 @@ class ClrSummaryItemValue {
|
|
|
15677
15677
|
this.hasProjectedContent = false;
|
|
15678
15678
|
this.isTextOverflowing = false;
|
|
15679
15679
|
this.tooltipSize = 'md';
|
|
15680
|
+
this.tooltipPosition = 'bottom-right';
|
|
15680
15681
|
this.contentCheckScheduled = false;
|
|
15682
|
+
this.elementRef = inject(ElementRef);
|
|
15681
15683
|
this.ngZone = inject(NgZone);
|
|
15682
15684
|
this.cdr = inject(ChangeDetectorRef);
|
|
15683
15685
|
// Watch for value changes and trigger overflow detection
|
|
@@ -15741,6 +15743,23 @@ class ClrSummaryItemValue {
|
|
|
15741
15743
|
if (this.hasIcon && this.hasText) {
|
|
15742
15744
|
throw new Error('SummaryItemValue: You cannot define both icon and value. Only one is allowed.');
|
|
15743
15745
|
}
|
|
15746
|
+
this.updateTooltipPosition();
|
|
15747
|
+
}
|
|
15748
|
+
updateTooltipPosition() {
|
|
15749
|
+
// Use double requestAnimationFrame to ensure CSS grid layout is complete
|
|
15750
|
+
requestAnimationFrame(() => {
|
|
15751
|
+
requestAnimationFrame(() => {
|
|
15752
|
+
const element = this.elementRef.nativeElement;
|
|
15753
|
+
const rect = element.getBoundingClientRect();
|
|
15754
|
+
const tooltipWidth = 200;
|
|
15755
|
+
const rightSpaceAvailable = window.innerWidth - rect.right;
|
|
15756
|
+
const newPosition = rightSpaceAvailable < tooltipWidth + 24 ? 'bottom-left' : 'bottom-right';
|
|
15757
|
+
if (this.tooltipPosition !== newPosition) {
|
|
15758
|
+
this.tooltipPosition = newPosition;
|
|
15759
|
+
this.cdr.markForCheck();
|
|
15760
|
+
}
|
|
15761
|
+
});
|
|
15762
|
+
});
|
|
15744
15763
|
}
|
|
15745
15764
|
ngAfterContentInit() {
|
|
15746
15765
|
this.scheduleContentCheck();
|
|
@@ -15750,6 +15769,16 @@ class ClrSummaryItemValue {
|
|
|
15750
15769
|
this.setupOverflowDetection();
|
|
15751
15770
|
this.setupMutationObserver();
|
|
15752
15771
|
this.scheduleContentCheck();
|
|
15772
|
+
this.updateTooltipPosition();
|
|
15773
|
+
// Listen for window resize to update tooltip position when grid layout changes
|
|
15774
|
+
this.ngZone.runOutsideAngular(() => {
|
|
15775
|
+
this.windowResizeListener = () => {
|
|
15776
|
+
this.ngZone.run(() => {
|
|
15777
|
+
this.updateTooltipPosition();
|
|
15778
|
+
});
|
|
15779
|
+
};
|
|
15780
|
+
window.addEventListener('resize', this.windowResizeListener);
|
|
15781
|
+
});
|
|
15753
15782
|
}
|
|
15754
15783
|
ngOnDestroy() {
|
|
15755
15784
|
if (this.resizeObserver) {
|
|
@@ -15760,6 +15789,10 @@ class ClrSummaryItemValue {
|
|
|
15760
15789
|
this.mutationObserver.disconnect();
|
|
15761
15790
|
this.mutationObserver = undefined;
|
|
15762
15791
|
}
|
|
15792
|
+
if (this.windowResizeListener) {
|
|
15793
|
+
window.removeEventListener('resize', this.windowResizeListener);
|
|
15794
|
+
this.windowResizeListener = undefined;
|
|
15795
|
+
}
|
|
15763
15796
|
}
|
|
15764
15797
|
setupMutationObserver() {
|
|
15765
15798
|
if (this.projectedContent?.nativeElement && !this.mutationObserver) {
|
|
@@ -15802,10 +15835,14 @@ class ClrSummaryItemValue {
|
|
|
15802
15835
|
this.resizeObserver = new ResizeObserver(() => {
|
|
15803
15836
|
this.ngZone.run(() => {
|
|
15804
15837
|
this.checkTextOverflowSync();
|
|
15838
|
+
this.updateTooltipPosition();
|
|
15805
15839
|
this.cdr.markForCheck();
|
|
15806
15840
|
});
|
|
15807
15841
|
});
|
|
15808
|
-
this.resizeObserver.observe(
|
|
15842
|
+
this.resizeObserver.observe(this.elementRef.nativeElement);
|
|
15843
|
+
if (el) {
|
|
15844
|
+
this.resizeObserver.observe(el);
|
|
15845
|
+
}
|
|
15809
15846
|
});
|
|
15810
15847
|
}
|
|
15811
15848
|
checkTextOverflowSync() {
|
|
@@ -15815,7 +15852,7 @@ class ClrSummaryItemValue {
|
|
|
15815
15852
|
}
|
|
15816
15853
|
const tooltip = this.effectiveTooltip;
|
|
15817
15854
|
// if the tooltip content is too short for medium size, size small should be used instead
|
|
15818
|
-
const newSize = tooltip && tooltip.length <
|
|
15855
|
+
const newSize = tooltip && tooltip.length < 15 ? 'sm' : 'md';
|
|
15819
15856
|
if (this.tooltipSize !== newSize) {
|
|
15820
15857
|
this.tooltipSize = newSize;
|
|
15821
15858
|
this.cdr.markForCheck();
|
|
@@ -15863,11 +15900,11 @@ class ClrSummaryItemValue {
|
|
|
15863
15900
|
return false;
|
|
15864
15901
|
}
|
|
15865
15902
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15866
|
-
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=\"
|
|
15903
|
+
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]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\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]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\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]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;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}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}: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 }] }); }
|
|
15867
15904
|
}
|
|
15868
15905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
|
|
15869
15906
|
type: Component,
|
|
15870
|
-
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=\"
|
|
15907
|
+
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]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\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]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\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]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;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}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}: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"] }]
|
|
15871
15908
|
}], ctorParameters: () => [], propDecorators: { projectedContent: [{
|
|
15872
15909
|
type: ViewChild,
|
|
15873
15910
|
args: ['projectedContent']
|
|
@@ -15897,21 +15934,32 @@ class ClrSummaryItemValueCopyButton {
|
|
|
15897
15934
|
this.tooltipText = input('Copy to clipboard');
|
|
15898
15935
|
this.showCopiedIcon = false;
|
|
15899
15936
|
this.tooltipSize = 'md';
|
|
15937
|
+
this.tooltipPosition = 'bottom-right';
|
|
15900
15938
|
this.cdr = inject(ChangeDetectorRef);
|
|
15939
|
+
this.elementRef = inject(ElementRef);
|
|
15901
15940
|
this.resetTimeout = null;
|
|
15902
15941
|
}
|
|
15903
15942
|
ngOnInit() {
|
|
15904
|
-
const newSize = this.tooltipText && this.tooltipText().length <
|
|
15943
|
+
const newSize = this.tooltipText && this.tooltipText().length < 15 ? 'sm' : 'md';
|
|
15905
15944
|
if (this.tooltipSize !== newSize) {
|
|
15906
15945
|
this.tooltipSize = newSize;
|
|
15907
15946
|
this.cdr.markForCheck();
|
|
15908
15947
|
}
|
|
15948
|
+
this.updateTooltipPosition();
|
|
15949
|
+
}
|
|
15950
|
+
ngAfterViewInit() {
|
|
15951
|
+
this.updateTooltipPosition();
|
|
15952
|
+
this.resizeListener = () => this.updateTooltipPosition();
|
|
15953
|
+
window.addEventListener('resize', this.resizeListener);
|
|
15909
15954
|
}
|
|
15910
15955
|
ngOnDestroy() {
|
|
15911
15956
|
if (this.resetTimeout) {
|
|
15912
15957
|
clearTimeout(this.resetTimeout);
|
|
15913
15958
|
this.resetTimeout = null;
|
|
15914
15959
|
}
|
|
15960
|
+
if (this.resizeListener) {
|
|
15961
|
+
window.removeEventListener('resize', this.resizeListener);
|
|
15962
|
+
}
|
|
15915
15963
|
}
|
|
15916
15964
|
/**
|
|
15917
15965
|
* Called when the clipboard copy operation completes.
|
|
@@ -15921,7 +15969,6 @@ class ClrSummaryItemValueCopyButton {
|
|
|
15921
15969
|
if (!success) {
|
|
15922
15970
|
return;
|
|
15923
15971
|
}
|
|
15924
|
-
// Clear any pending reset timeout to restart the timer
|
|
15925
15972
|
if (this.resetTimeout) {
|
|
15926
15973
|
clearTimeout(this.resetTimeout);
|
|
15927
15974
|
}
|
|
@@ -15933,12 +15980,28 @@ class ClrSummaryItemValueCopyButton {
|
|
|
15933
15980
|
this.cdr.markForCheck();
|
|
15934
15981
|
}, 1000);
|
|
15935
15982
|
}
|
|
15983
|
+
updateTooltipPosition() {
|
|
15984
|
+
// Use double requestAnimationFrame to ensure CSS grid layout is complete
|
|
15985
|
+
requestAnimationFrame(() => {
|
|
15986
|
+
requestAnimationFrame(() => {
|
|
15987
|
+
const element = this.elementRef.nativeElement;
|
|
15988
|
+
const rect = element.getBoundingClientRect();
|
|
15989
|
+
const tooltipWidth = 200;
|
|
15990
|
+
const rightSpaceAvailable = window.innerWidth - rect.right;
|
|
15991
|
+
const newPosition = rightSpaceAvailable < tooltipWidth + 24 ? 'bottom-left' : 'bottom-right';
|
|
15992
|
+
if (this.tooltipPosition !== newPosition) {
|
|
15993
|
+
this.tooltipPosition = newPosition;
|
|
15994
|
+
this.cdr.markForCheck();
|
|
15995
|
+
}
|
|
15996
|
+
});
|
|
15997
|
+
});
|
|
15998
|
+
}
|
|
15936
15999
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15937
|
-
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=\"
|
|
16000
|
+
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]=\"tooltipPosition\" *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 }); }
|
|
15938
16001
|
}
|
|
15939
16002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, decorators: [{
|
|
15940
16003
|
type: Component,
|
|
15941
|
-
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=\"
|
|
16004
|
+
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]=\"tooltipPosition\" *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"] }]
|
|
15942
16005
|
}] });
|
|
15943
16006
|
|
|
15944
16007
|
/*
|
|
@@ -16576,6 +16639,12 @@ class ClrSummaryAreaToggle {
|
|
|
16576
16639
|
this.collapsed = computed(() => {
|
|
16577
16640
|
return this.state.collapsed(this.localStorageKey())();
|
|
16578
16641
|
});
|
|
16642
|
+
this.suppressAnimation = true;
|
|
16643
|
+
}
|
|
16644
|
+
ngAfterViewInit() {
|
|
16645
|
+
setTimeout(() => {
|
|
16646
|
+
this.suppressAnimation = false;
|
|
16647
|
+
});
|
|
16579
16648
|
}
|
|
16580
16649
|
handleKeydown(event) {
|
|
16581
16650
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
@@ -16588,11 +16657,11 @@ class ClrSummaryAreaToggle {
|
|
|
16588
16657
|
this.summaryToggle.emit();
|
|
16589
16658
|
}
|
|
16590
16659
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryAreaToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.16", type: ClrSummaryAreaToggle, isStandalone: true, selector: "clr-summary-area-toggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { summaryToggle: "summaryToggle" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<button\n class=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrTooltipModule }] }); }
|
|
16660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.16", type: ClrSummaryAreaToggle, isStandalone: true, selector: "clr-summary-area-toggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { summaryToggle: "summaryToggle" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<button\n class=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n [class.no-animation]=\"suppressAnimation\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrTooltipModule }] }); }
|
|
16592
16661
|
}
|
|
16593
16662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryAreaToggle, decorators: [{
|
|
16594
16663
|
type: Component,
|
|
16595
|
-
args: [{ selector: 'clr-summary-area-toggle', standalone: true, imports: [ClrIconModule, ClrTooltipModule], template: "<button\n class=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"] }]
|
|
16664
|
+
args: [{ selector: 'clr-summary-area-toggle', standalone: true, imports: [ClrIconModule, ClrTooltipModule], template: "<button\n class=\"summary-area-toggle\"\n type=\"button\"\n [attr.aria-pressed]=\"!collapsed()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleToggle($event)\"\n>\n <cds-icon\n shape=\"angle-double\"\n size=\"20\"\n direction=\"up\"\n class=\"icon-rotate summary-area-icon\"\n [class.icon-rotated]=\"collapsed()\"\n [class.no-animation]=\"suppressAnimation\"\n ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"] }]
|
|
16596
16665
|
}], propDecorators: { handleKeydown: [{
|
|
16597
16666
|
type: HostListener,
|
|
16598
16667
|
args: ['keydown', ['$event']]
|