@porscheinformatik/clr-addons 19.12.0 → 19.12.2
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 +80 -12
- 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
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
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
|
-
import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon,
|
|
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';
|
|
6
6
|
import * as i1$1 from '@clr/angular';
|
|
7
7
|
import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIconModule, ClrForm, ClrAlert, ClrAlignment, ClrSide, ClrAxis, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverHostDirective, ClrCommonStringsService, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrTooltipModule } from '@clr/angular';
|
|
8
8
|
import * as i3$1 from '@angular/forms';
|
|
@@ -1159,7 +1159,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
1159
1159
|
* This software is released under MIT license.
|
|
1160
1160
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
1161
1161
|
*/
|
|
1162
|
-
ClarityIcons.addIcons(...coreCollectionIcons, ...essentialCollectionIcons, ...commerceCollectionIcons);
|
|
1163
1162
|
class ClrIconAvatar {
|
|
1164
1163
|
constructor(renderer) {
|
|
1165
1164
|
this.renderer = renderer;
|
|
@@ -15677,7 +15676,9 @@ class ClrSummaryItemValue {
|
|
|
15677
15676
|
this.hasProjectedContent = false;
|
|
15678
15677
|
this.isTextOverflowing = false;
|
|
15679
15678
|
this.tooltipSize = 'md';
|
|
15679
|
+
this.tooltipPosition = 'bottom-right';
|
|
15680
15680
|
this.contentCheckScheduled = false;
|
|
15681
|
+
this.elementRef = inject(ElementRef);
|
|
15681
15682
|
this.ngZone = inject(NgZone);
|
|
15682
15683
|
this.cdr = inject(ChangeDetectorRef);
|
|
15683
15684
|
// Watch for value changes and trigger overflow detection
|
|
@@ -15741,6 +15742,23 @@ class ClrSummaryItemValue {
|
|
|
15741
15742
|
if (this.hasIcon && this.hasText) {
|
|
15742
15743
|
throw new Error('SummaryItemValue: You cannot define both icon and value. Only one is allowed.');
|
|
15743
15744
|
}
|
|
15745
|
+
this.updateTooltipPosition();
|
|
15746
|
+
}
|
|
15747
|
+
updateTooltipPosition() {
|
|
15748
|
+
// Use double requestAnimationFrame to ensure CSS grid layout is complete
|
|
15749
|
+
requestAnimationFrame(() => {
|
|
15750
|
+
requestAnimationFrame(() => {
|
|
15751
|
+
const element = this.elementRef.nativeElement;
|
|
15752
|
+
const rect = element.getBoundingClientRect();
|
|
15753
|
+
const tooltipWidth = 200;
|
|
15754
|
+
const rightSpaceAvailable = window.innerWidth - rect.right;
|
|
15755
|
+
const newPosition = rightSpaceAvailable < tooltipWidth + 24 ? 'bottom-left' : 'bottom-right';
|
|
15756
|
+
if (this.tooltipPosition !== newPosition) {
|
|
15757
|
+
this.tooltipPosition = newPosition;
|
|
15758
|
+
this.cdr.markForCheck();
|
|
15759
|
+
}
|
|
15760
|
+
});
|
|
15761
|
+
});
|
|
15744
15762
|
}
|
|
15745
15763
|
ngAfterContentInit() {
|
|
15746
15764
|
this.scheduleContentCheck();
|
|
@@ -15750,6 +15768,16 @@ class ClrSummaryItemValue {
|
|
|
15750
15768
|
this.setupOverflowDetection();
|
|
15751
15769
|
this.setupMutationObserver();
|
|
15752
15770
|
this.scheduleContentCheck();
|
|
15771
|
+
this.updateTooltipPosition();
|
|
15772
|
+
// Listen for window resize to update tooltip position when grid layout changes
|
|
15773
|
+
this.ngZone.runOutsideAngular(() => {
|
|
15774
|
+
this.windowResizeListener = () => {
|
|
15775
|
+
this.ngZone.run(() => {
|
|
15776
|
+
this.updateTooltipPosition();
|
|
15777
|
+
});
|
|
15778
|
+
};
|
|
15779
|
+
window.addEventListener('resize', this.windowResizeListener);
|
|
15780
|
+
});
|
|
15753
15781
|
}
|
|
15754
15782
|
ngOnDestroy() {
|
|
15755
15783
|
if (this.resizeObserver) {
|
|
@@ -15760,6 +15788,10 @@ class ClrSummaryItemValue {
|
|
|
15760
15788
|
this.mutationObserver.disconnect();
|
|
15761
15789
|
this.mutationObserver = undefined;
|
|
15762
15790
|
}
|
|
15791
|
+
if (this.windowResizeListener) {
|
|
15792
|
+
window.removeEventListener('resize', this.windowResizeListener);
|
|
15793
|
+
this.windowResizeListener = undefined;
|
|
15794
|
+
}
|
|
15763
15795
|
}
|
|
15764
15796
|
setupMutationObserver() {
|
|
15765
15797
|
if (this.projectedContent?.nativeElement && !this.mutationObserver) {
|
|
@@ -15802,10 +15834,14 @@ class ClrSummaryItemValue {
|
|
|
15802
15834
|
this.resizeObserver = new ResizeObserver(() => {
|
|
15803
15835
|
this.ngZone.run(() => {
|
|
15804
15836
|
this.checkTextOverflowSync();
|
|
15837
|
+
this.updateTooltipPosition();
|
|
15805
15838
|
this.cdr.markForCheck();
|
|
15806
15839
|
});
|
|
15807
15840
|
});
|
|
15808
|
-
this.resizeObserver.observe(
|
|
15841
|
+
this.resizeObserver.observe(this.elementRef.nativeElement);
|
|
15842
|
+
if (el) {
|
|
15843
|
+
this.resizeObserver.observe(el);
|
|
15844
|
+
}
|
|
15809
15845
|
});
|
|
15810
15846
|
}
|
|
15811
15847
|
checkTextOverflowSync() {
|
|
@@ -15815,7 +15851,7 @@ class ClrSummaryItemValue {
|
|
|
15815
15851
|
}
|
|
15816
15852
|
const tooltip = this.effectiveTooltip;
|
|
15817
15853
|
// if the tooltip content is too short for medium size, size small should be used instead
|
|
15818
|
-
const newSize = tooltip && tooltip.length <
|
|
15854
|
+
const newSize = tooltip && tooltip.length < 15 ? 'sm' : 'md';
|
|
15819
15855
|
if (this.tooltipSize !== newSize) {
|
|
15820
15856
|
this.tooltipSize = newSize;
|
|
15821
15857
|
this.cdr.markForCheck();
|
|
@@ -15863,11 +15899,11 @@ class ClrSummaryItemValue {
|
|
|
15863
15899
|
return false;
|
|
15864
15900
|
}
|
|
15865
15901
|
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=\"
|
|
15902
|
+
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
15903
|
}
|
|
15868
15904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
|
|
15869
15905
|
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=\"
|
|
15906
|
+
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
15907
|
}], ctorParameters: () => [], propDecorators: { projectedContent: [{
|
|
15872
15908
|
type: ViewChild,
|
|
15873
15909
|
args: ['projectedContent']
|
|
@@ -15897,21 +15933,32 @@ class ClrSummaryItemValueCopyButton {
|
|
|
15897
15933
|
this.tooltipText = input('Copy to clipboard');
|
|
15898
15934
|
this.showCopiedIcon = false;
|
|
15899
15935
|
this.tooltipSize = 'md';
|
|
15936
|
+
this.tooltipPosition = 'bottom-right';
|
|
15900
15937
|
this.cdr = inject(ChangeDetectorRef);
|
|
15938
|
+
this.elementRef = inject(ElementRef);
|
|
15901
15939
|
this.resetTimeout = null;
|
|
15902
15940
|
}
|
|
15903
15941
|
ngOnInit() {
|
|
15904
|
-
const newSize = this.tooltipText && this.tooltipText().length <
|
|
15942
|
+
const newSize = this.tooltipText && this.tooltipText().length < 15 ? 'sm' : 'md';
|
|
15905
15943
|
if (this.tooltipSize !== newSize) {
|
|
15906
15944
|
this.tooltipSize = newSize;
|
|
15907
15945
|
this.cdr.markForCheck();
|
|
15908
15946
|
}
|
|
15947
|
+
this.updateTooltipPosition();
|
|
15948
|
+
}
|
|
15949
|
+
ngAfterViewInit() {
|
|
15950
|
+
this.updateTooltipPosition();
|
|
15951
|
+
this.resizeListener = () => this.updateTooltipPosition();
|
|
15952
|
+
window.addEventListener('resize', this.resizeListener);
|
|
15909
15953
|
}
|
|
15910
15954
|
ngOnDestroy() {
|
|
15911
15955
|
if (this.resetTimeout) {
|
|
15912
15956
|
clearTimeout(this.resetTimeout);
|
|
15913
15957
|
this.resetTimeout = null;
|
|
15914
15958
|
}
|
|
15959
|
+
if (this.resizeListener) {
|
|
15960
|
+
window.removeEventListener('resize', this.resizeListener);
|
|
15961
|
+
}
|
|
15915
15962
|
}
|
|
15916
15963
|
/**
|
|
15917
15964
|
* Called when the clipboard copy operation completes.
|
|
@@ -15921,7 +15968,6 @@ class ClrSummaryItemValueCopyButton {
|
|
|
15921
15968
|
if (!success) {
|
|
15922
15969
|
return;
|
|
15923
15970
|
}
|
|
15924
|
-
// Clear any pending reset timeout to restart the timer
|
|
15925
15971
|
if (this.resetTimeout) {
|
|
15926
15972
|
clearTimeout(this.resetTimeout);
|
|
15927
15973
|
}
|
|
@@ -15933,12 +15979,28 @@ class ClrSummaryItemValueCopyButton {
|
|
|
15933
15979
|
this.cdr.markForCheck();
|
|
15934
15980
|
}, 1000);
|
|
15935
15981
|
}
|
|
15982
|
+
updateTooltipPosition() {
|
|
15983
|
+
// Use double requestAnimationFrame to ensure CSS grid layout is complete
|
|
15984
|
+
requestAnimationFrame(() => {
|
|
15985
|
+
requestAnimationFrame(() => {
|
|
15986
|
+
const element = this.elementRef.nativeElement;
|
|
15987
|
+
const rect = element.getBoundingClientRect();
|
|
15988
|
+
const tooltipWidth = 200;
|
|
15989
|
+
const rightSpaceAvailable = window.innerWidth - rect.right;
|
|
15990
|
+
const newPosition = rightSpaceAvailable < tooltipWidth + 24 ? 'bottom-left' : 'bottom-right';
|
|
15991
|
+
if (this.tooltipPosition !== newPosition) {
|
|
15992
|
+
this.tooltipPosition = newPosition;
|
|
15993
|
+
this.cdr.markForCheck();
|
|
15994
|
+
}
|
|
15995
|
+
});
|
|
15996
|
+
});
|
|
15997
|
+
}
|
|
15936
15998
|
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=\"
|
|
15999
|
+
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
16000
|
}
|
|
15939
16001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItemValueCopyButton, decorators: [{
|
|
15940
16002
|
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=\"
|
|
16003
|
+
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
16004
|
}] });
|
|
15943
16005
|
|
|
15944
16006
|
/*
|
|
@@ -16576,6 +16638,12 @@ class ClrSummaryAreaToggle {
|
|
|
16576
16638
|
this.collapsed = computed(() => {
|
|
16577
16639
|
return this.state.collapsed(this.localStorageKey())();
|
|
16578
16640
|
});
|
|
16641
|
+
this.suppressAnimation = true;
|
|
16642
|
+
}
|
|
16643
|
+
ngAfterViewInit() {
|
|
16644
|
+
setTimeout(() => {
|
|
16645
|
+
this.suppressAnimation = false;
|
|
16646
|
+
});
|
|
16579
16647
|
}
|
|
16580
16648
|
handleKeydown(event) {
|
|
16581
16649
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
@@ -16588,11 +16656,11 @@ class ClrSummaryAreaToggle {
|
|
|
16588
16656
|
this.summaryToggle.emit();
|
|
16589
16657
|
}
|
|
16590
16658
|
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 }] }); }
|
|
16659
|
+
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
16660
|
}
|
|
16593
16661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryAreaToggle, decorators: [{
|
|
16594
16662
|
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"] }]
|
|
16663
|
+
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
16664
|
}], propDecorators: { handleKeydown: [{
|
|
16597
16665
|
type: HostListener,
|
|
16598
16666
|
args: ['keydown', ['$event']]
|