@porscheinformatik/clr-addons 19.11.3 → 19.11.4
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 +246 -17
- package/fesm2022/clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/summary-area/summary-area/summary-area.d.ts +31 -2
- package/summary-area/summary-area/summary-area.model.d.ts +3 -2
- package/summary-area/summary-item/summary-item.d.ts +1 -0
- package/summary-area/summary-item-value/summary-item-value.d.ts +2 -1
package/fesm2022/clr-addons.mjs
CHANGED
|
@@ -15654,17 +15654,18 @@ class ClrSummaryItemValue {
|
|
|
15654
15654
|
}
|
|
15655
15655
|
/**
|
|
15656
15656
|
* Returns true if this component has any meaningful content to display.
|
|
15657
|
-
* This includes: a value
|
|
15657
|
+
* This includes: a value or projected content.
|
|
15658
|
+
* An icon is considered special content and does not count as meaningful content alone.
|
|
15658
15659
|
*/
|
|
15659
15660
|
get hasMeaningfulContent() {
|
|
15660
|
-
return this.
|
|
15661
|
+
return this.hasText || this.hasProjectedContent;
|
|
15661
15662
|
}
|
|
15662
15663
|
/**
|
|
15663
15664
|
* Returns true if this component should be hidden.
|
|
15664
15665
|
* This happens when there's no meaningful content.
|
|
15665
15666
|
*/
|
|
15666
15667
|
get shouldHide() {
|
|
15667
|
-
return !this.hasMeaningfulContent;
|
|
15668
|
+
return !this.hasIcon && !this.hasMeaningfulContent;
|
|
15668
15669
|
}
|
|
15669
15670
|
ngOnInit() {
|
|
15670
15671
|
if (this.hasIcon && this.hasText) {
|
|
@@ -15919,7 +15920,8 @@ class ClrSummaryItem {
|
|
|
15919
15920
|
return this.warning()?.click;
|
|
15920
15921
|
}
|
|
15921
15922
|
get showEditButton() {
|
|
15922
|
-
return (!this.
|
|
15923
|
+
return (!this.hasNonIconTextValue() &&
|
|
15924
|
+
!this.hasLoading &&
|
|
15923
15925
|
!this.hasError &&
|
|
15924
15926
|
!this.hasWarning &&
|
|
15925
15927
|
!this.hasProjectedContent &&
|
|
@@ -16046,22 +16048,24 @@ class ClrSummaryItem {
|
|
|
16046
16048
|
return false;
|
|
16047
16049
|
}
|
|
16048
16050
|
// Skip internal elements by class
|
|
16049
|
-
|
|
16051
|
+
return !(element.classList.contains('edit-link') ||
|
|
16050
16052
|
element.classList.contains('value-placeholder') ||
|
|
16051
|
-
element.classList.contains('summary-item-loading'))
|
|
16052
|
-
return false;
|
|
16053
|
-
}
|
|
16054
|
-
return true;
|
|
16053
|
+
element.classList.contains('summary-item-loading'));
|
|
16055
16054
|
}
|
|
16056
16055
|
return false;
|
|
16057
16056
|
});
|
|
16058
16057
|
}
|
|
16058
|
+
hasNonIconTextValue() {
|
|
16059
|
+
return this.valueChildren.toArray().some(child => {
|
|
16060
|
+
return !child.hasIcon && !!child.value()?.trim();
|
|
16061
|
+
});
|
|
16062
|
+
}
|
|
16059
16063
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 <
|
|
16064
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n <div\n class=\"summary-item\"\n [class.hidden]=\"\n !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n \"\n >\n <span class=\"summary-item-label\">{{ label() }}:</span>\n <div class=\"summary-item-values\" #valuesContainer>\n @if (hasLoading) {\n <div class=\"summary-item-loading\">\n <span class=\"spinner spinner-inline\"></span>\n <span>{{ loadingText }}</span>\n </div>\n } @else if (hasError) {\n <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"errorText\"\n [clickable]=\"true\"\n (clicked)=\"errorClick()\"\n class=\"error\"\n ></clr-summary-item-value>\n } @else if (hasWarning) {\n <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"warningText\"\n [clickable]=\"true\"\n (clicked)=\"warningClick()\"\n class=\"warning\"\n ></clr-summary-item-value>\n } @else {\n <ng-content select=\"clr-summary-item-value\"></ng-content>\n @if (showCopyButton) {\n <clr-summary-area-value-copy-button\n [value]=\"copyableValue\"\n [tooltipText]=\"copyButtonTooltip()\"\n ></clr-summary-area-value-copy-button>\n }\n <ng-content></ng-content>\n @if (showEditButton) {\n <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n } @else if (!hasProjectedContent) {\n <span class=\"value value-placeholder\">—</span>\n } }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-summary-area-value-copy-button{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable"], outputs: ["clicked"] }, { kind: "component", type: ClrSummaryItemValueCopyButton, selector: "clr-summary-area-value-copy-button", inputs: ["value", "tooltipText"] }] }); }
|
|
16061
16065
|
}
|
|
16062
16066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, decorators: [{
|
|
16063
16067
|
type: Component,
|
|
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 <
|
|
16068
|
+
args: [{ selector: 'clr-summary-item', standalone: true, imports: [CommonModule, ClarityModule, ClrSummaryItemValue, ClrSummaryItemValueCopyButton], template: "<ng-template #itemTemplate>\n <div\n class=\"summary-item\"\n [class.hidden]=\"\n !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n \"\n >\n <span class=\"summary-item-label\">{{ label() }}:</span>\n <div class=\"summary-item-values\" #valuesContainer>\n @if (hasLoading) {\n <div class=\"summary-item-loading\">\n <span class=\"spinner spinner-inline\"></span>\n <span>{{ loadingText }}</span>\n </div>\n } @else if (hasError) {\n <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"errorText\"\n [clickable]=\"true\"\n (clicked)=\"errorClick()\"\n class=\"error\"\n ></clr-summary-item-value>\n } @else if (hasWarning) {\n <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n <clr-summary-item-value\n [value]=\"warningText\"\n [clickable]=\"true\"\n (clicked)=\"warningClick()\"\n class=\"warning\"\n ></clr-summary-item-value>\n } @else {\n <ng-content select=\"clr-summary-item-value\"></ng-content>\n @if (showCopyButton) {\n <clr-summary-area-value-copy-button\n [value]=\"copyableValue\"\n [tooltipText]=\"copyButtonTooltip()\"\n ></clr-summary-area-value-copy-button>\n }\n <ng-content></ng-content>\n @if (showEditButton) {\n <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n } @else if (!hasProjectedContent) {\n <span class=\"value value-placeholder\">—</span>\n } }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-summary-area-value-copy-button{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"] }]
|
|
16065
16069
|
}], propDecorators: { template: [{
|
|
16066
16070
|
type: ViewChild,
|
|
16067
16071
|
args: ['itemTemplate', { static: true }]
|
|
@@ -16162,17 +16166,96 @@ class ClrSummaryArea {
|
|
|
16162
16166
|
this.loading = input();
|
|
16163
16167
|
this.currentColumns = 5;
|
|
16164
16168
|
this.currentRows = this.rows();
|
|
16169
|
+
this.panelHeight = '0px';
|
|
16170
|
+
this.loadingPanelHeight = '0px';
|
|
16171
|
+
this.loadingVisible = false;
|
|
16172
|
+
this.prevErrorActive = false;
|
|
16173
|
+
this.prevWarningActive = false;
|
|
16174
|
+
this.prevCollapsed = true;
|
|
16175
|
+
this.prevHasLoading = false;
|
|
16176
|
+
this.loadingVisibleTimeout = null;
|
|
16165
16177
|
this.state = inject(ClrSummaryAreaStateService);
|
|
16166
16178
|
this.cdr = inject(ChangeDetectorRef);
|
|
16167
16179
|
this.defaultLoadingText = 'Loading...';
|
|
16168
16180
|
this.defaultErrorText = 'Error';
|
|
16169
16181
|
this.defaultWarningText = 'Warning';
|
|
16170
16182
|
this.maxColumns = 5;
|
|
16183
|
+
this.errorActive = computed(() => this.error()?.active() ?? false);
|
|
16184
|
+
this.warningActive = computed(() => this.warning()?.active() ?? false);
|
|
16185
|
+
// Effect to handle expand/collapse with smooth height transition
|
|
16186
|
+
effect(() => {
|
|
16187
|
+
const collapsed = this.isCollapsed();
|
|
16188
|
+
if (!collapsed) {
|
|
16189
|
+
// Expanding: update grid first, then measure and set height
|
|
16190
|
+
this.updateGrid();
|
|
16191
|
+
requestAnimationFrame(() => {
|
|
16192
|
+
this.updateGrid();
|
|
16193
|
+
this.updatePanelHeight();
|
|
16194
|
+
});
|
|
16195
|
+
}
|
|
16196
|
+
else if (!this.prevCollapsed && collapsed) {
|
|
16197
|
+
// Collapsing: set current height first, then animate to 0
|
|
16198
|
+
this.animateCollapse();
|
|
16199
|
+
}
|
|
16200
|
+
this.prevCollapsed = collapsed;
|
|
16201
|
+
});
|
|
16202
|
+
// Effect for tracking changes in the error state (using computed signal)
|
|
16203
|
+
effect(() => {
|
|
16204
|
+
const errorActive = this.errorActive();
|
|
16205
|
+
const collapsed = this.isCollapsed();
|
|
16206
|
+
// If error active state changed and area is NOT collapsed, recalculate panel height
|
|
16207
|
+
if (errorActive !== this.prevErrorActive && !collapsed) {
|
|
16208
|
+
this.updateGrid();
|
|
16209
|
+
this.cdr.detectChanges();
|
|
16210
|
+
requestAnimationFrame(() => {
|
|
16211
|
+
this.recalculatePanelHeight();
|
|
16212
|
+
});
|
|
16213
|
+
}
|
|
16214
|
+
this.prevErrorActive = errorActive;
|
|
16215
|
+
});
|
|
16216
|
+
// Effect for tracking changes in the warning state (using computed signal)
|
|
16217
|
+
effect(() => {
|
|
16218
|
+
const warningActive = this.warningActive();
|
|
16219
|
+
const collapsed = this.isCollapsed();
|
|
16220
|
+
// If error active state changed and area is NOT collapsed, recalculate panel height
|
|
16221
|
+
if (warningActive !== this.prevWarningActive && !collapsed) {
|
|
16222
|
+
this.updateGrid();
|
|
16223
|
+
this.cdr.detectChanges();
|
|
16224
|
+
requestAnimationFrame(() => {
|
|
16225
|
+
this.recalculatePanelHeight();
|
|
16226
|
+
});
|
|
16227
|
+
}
|
|
16228
|
+
this.prevWarningActive = warningActive;
|
|
16229
|
+
});
|
|
16230
|
+
// Effect to delay loading indicator visibility for smooth fade-in animation
|
|
16171
16231
|
effect(() => {
|
|
16172
|
-
|
|
16232
|
+
const loading = this.hasLoading;
|
|
16233
|
+
const collapsed = this.isCollapsed();
|
|
16234
|
+
// Clear any pending timeout
|
|
16235
|
+
if (this.loadingVisibleTimeout) {
|
|
16236
|
+
clearTimeout(this.loadingVisibleTimeout);
|
|
16237
|
+
this.loadingVisibleTimeout = null;
|
|
16238
|
+
}
|
|
16239
|
+
if (loading && !collapsed) {
|
|
16240
|
+
// Delay showing loading indicator to allow parent panel to become visible first
|
|
16241
|
+
this.loadingVisibleTimeout = setTimeout(() => {
|
|
16242
|
+
this.loadingVisible = true;
|
|
16243
|
+
this.cdr.markForCheck();
|
|
16244
|
+
}, 50);
|
|
16245
|
+
}
|
|
16246
|
+
else {
|
|
16247
|
+
this.loadingVisible = false;
|
|
16248
|
+
this.loadingPanelHeight = '0px';
|
|
16249
|
+
this.cdr.markForCheck();
|
|
16250
|
+
}
|
|
16251
|
+
if (this.prevHasLoading !== loading && !collapsed) {
|
|
16173
16252
|
this.updateGrid();
|
|
16174
|
-
|
|
16253
|
+
this.cdr.detectChanges();
|
|
16254
|
+
requestAnimationFrame(() => {
|
|
16255
|
+
this.recalculatePanelHeight();
|
|
16256
|
+
});
|
|
16175
16257
|
}
|
|
16258
|
+
this.prevHasLoading = loading;
|
|
16176
16259
|
});
|
|
16177
16260
|
}
|
|
16178
16261
|
ngOnInit() {
|
|
@@ -16196,7 +16279,7 @@ class ClrSummaryArea {
|
|
|
16196
16279
|
return this.loading()?.text || this.defaultLoadingText;
|
|
16197
16280
|
}
|
|
16198
16281
|
get hasError() {
|
|
16199
|
-
return !this.hasLoading && !!this.error() && this.error().active;
|
|
16282
|
+
return !this.hasLoading && !!this.error() && this.error().active();
|
|
16200
16283
|
}
|
|
16201
16284
|
get errorText() {
|
|
16202
16285
|
return this.error()?.text || this.defaultErrorText;
|
|
@@ -16208,7 +16291,7 @@ class ClrSummaryArea {
|
|
|
16208
16291
|
return this.error()?.click;
|
|
16209
16292
|
}
|
|
16210
16293
|
get hasWarning() {
|
|
16211
|
-
return !this.hasLoading && !this.hasError && !!this.warning() && this.warning().active;
|
|
16294
|
+
return !this.hasLoading && !this.hasError && !!this.warning() && this.warning().active();
|
|
16212
16295
|
}
|
|
16213
16296
|
get warningText() {
|
|
16214
16297
|
return this.warning()?.text || this.defaultWarningText;
|
|
@@ -16222,11 +16305,51 @@ class ClrSummaryArea {
|
|
|
16222
16305
|
onResize() {
|
|
16223
16306
|
if (!this.isCollapsed()) {
|
|
16224
16307
|
this.updateGrid();
|
|
16308
|
+
this.cdr.detectChanges();
|
|
16309
|
+
// Recalculate height after grid update for responsive changes
|
|
16310
|
+
// Use setTimeout to ensure DOM is updated with new grid layout
|
|
16311
|
+
setTimeout(() => {
|
|
16312
|
+
this.recalculatePanelHeight();
|
|
16313
|
+
}, 0);
|
|
16225
16314
|
}
|
|
16226
16315
|
}
|
|
16227
16316
|
ngAfterViewInit() {
|
|
16228
16317
|
this.updateGrid();
|
|
16229
16318
|
this.cdr.detectChanges();
|
|
16319
|
+
// Set initial height after content is rendered
|
|
16320
|
+
if (!this.isCollapsed()) {
|
|
16321
|
+
// Use setTimeout to ensure DOM is fully painted
|
|
16322
|
+
setTimeout(() => {
|
|
16323
|
+
// If loading, calculate height immediately based on rows
|
|
16324
|
+
if (this.hasLoading || this.hasError || this.hasWarning) {
|
|
16325
|
+
const calculatedHeight = this.calculateGridHeight();
|
|
16326
|
+
this.panelHeight = calculatedHeight + 'px';
|
|
16327
|
+
this.cdr.detectChanges();
|
|
16328
|
+
}
|
|
16329
|
+
else {
|
|
16330
|
+
this.recalculatePanelHeight();
|
|
16331
|
+
}
|
|
16332
|
+
}, 0);
|
|
16333
|
+
}
|
|
16334
|
+
// Subscribe to content changes (when items get dynamically added/removed)
|
|
16335
|
+
this.itemsSubscription = this.items.changes.subscribe(() => {
|
|
16336
|
+
// Force layout recalculation after DOM update
|
|
16337
|
+
setTimeout(() => {
|
|
16338
|
+
this.updateGrid();
|
|
16339
|
+
this.cdr.detectChanges();
|
|
16340
|
+
if (!this.isCollapsed()) {
|
|
16341
|
+
setTimeout(() => {
|
|
16342
|
+
this.recalculatePanelHeight();
|
|
16343
|
+
}, 0);
|
|
16344
|
+
}
|
|
16345
|
+
}, 0);
|
|
16346
|
+
});
|
|
16347
|
+
}
|
|
16348
|
+
ngOnDestroy() {
|
|
16349
|
+
this.itemsSubscription?.unsubscribe();
|
|
16350
|
+
if (this.loadingVisibleTimeout) {
|
|
16351
|
+
clearTimeout(this.loadingVisibleTimeout);
|
|
16352
|
+
}
|
|
16230
16353
|
}
|
|
16231
16354
|
updateGrid() {
|
|
16232
16355
|
if (this.items && this.items.length > 0) {
|
|
@@ -16248,15 +16371,121 @@ class ClrSummaryArea {
|
|
|
16248
16371
|
this.cdr.detectChanges();
|
|
16249
16372
|
}
|
|
16250
16373
|
}
|
|
16374
|
+
updatePanelHeight() {
|
|
16375
|
+
if (this.panelsRef?.nativeElement) {
|
|
16376
|
+
const el = this.panelsRef.nativeElement;
|
|
16377
|
+
// For loading/error/warning states, use calculated height
|
|
16378
|
+
if (this.hasLoading || this.hasError || this.hasWarning) {
|
|
16379
|
+
const calculatedHeight = this.calculateGridHeight();
|
|
16380
|
+
// Set to 0 first for animation start
|
|
16381
|
+
this.panelHeight = '0px';
|
|
16382
|
+
this.cdr.detectChanges();
|
|
16383
|
+
void el.offsetHeight;
|
|
16384
|
+
// Animate to calculated height
|
|
16385
|
+
requestAnimationFrame(() => {
|
|
16386
|
+
this.panelHeight = calculatedHeight + 'px';
|
|
16387
|
+
this.cdr.markForCheck();
|
|
16388
|
+
});
|
|
16389
|
+
return;
|
|
16390
|
+
}
|
|
16391
|
+
// For grid state, measure the DOM
|
|
16392
|
+
// Set to 0 first for animation start
|
|
16393
|
+
this.panelHeight = '0px';
|
|
16394
|
+
this.cdr.detectChanges();
|
|
16395
|
+
// Force reflow
|
|
16396
|
+
void el.offsetHeight;
|
|
16397
|
+
// Temporarily set to auto to measure the full content height
|
|
16398
|
+
el.style.height = 'auto';
|
|
16399
|
+
const scrollHeight = el.scrollHeight;
|
|
16400
|
+
// Reset to 0 to prepare for animation
|
|
16401
|
+
el.style.height = '0px';
|
|
16402
|
+
// Force reflow again
|
|
16403
|
+
void el.offsetHeight;
|
|
16404
|
+
// Animate to measured height
|
|
16405
|
+
requestAnimationFrame(() => {
|
|
16406
|
+
this.panelHeight = scrollHeight + 'px';
|
|
16407
|
+
this.cdr.markForCheck();
|
|
16408
|
+
});
|
|
16409
|
+
}
|
|
16410
|
+
}
|
|
16411
|
+
recalculatePanelHeight() {
|
|
16412
|
+
if (this.panelsRef?.nativeElement && !this.isCollapsed()) {
|
|
16413
|
+
// If specific states are active, use calculated height
|
|
16414
|
+
if (this.hasLoading || this.hasError || this.hasWarning) {
|
|
16415
|
+
const calculatedHeight = this.calculateGridHeight();
|
|
16416
|
+
this.panelHeight = calculatedHeight + 'px';
|
|
16417
|
+
this.cdr.detectChanges();
|
|
16418
|
+
return;
|
|
16419
|
+
}
|
|
16420
|
+
const el = this.panelsRef.nativeElement;
|
|
16421
|
+
// Set height to auto temporarily to measure true content height
|
|
16422
|
+
const currentHeight = el.style.height;
|
|
16423
|
+
el.style.height = 'auto';
|
|
16424
|
+
// Force reflow to ensure measurement is accurate
|
|
16425
|
+
void el.offsetHeight;
|
|
16426
|
+
// Measure the actual content height
|
|
16427
|
+
const scrollHeight = el.scrollHeight;
|
|
16428
|
+
// Restore height and set new value
|
|
16429
|
+
el.style.height = currentHeight;
|
|
16430
|
+
this.panelHeight = scrollHeight + 'px';
|
|
16431
|
+
this.cdr.detectChanges();
|
|
16432
|
+
setTimeout(() => {
|
|
16433
|
+
this.cdr.markForCheck();
|
|
16434
|
+
}, 0);
|
|
16435
|
+
}
|
|
16436
|
+
}
|
|
16437
|
+
/**
|
|
16438
|
+
* Calculate the expected grid height based on currentRows.
|
|
16439
|
+
* This is used when the grid isn't rendered (e.g., during loading state).
|
|
16440
|
+
* The loading container should match the grid height exactly.
|
|
16441
|
+
*
|
|
16442
|
+
* Grid structure:
|
|
16443
|
+
* - .summary-area-container: margin 0 24px 9px 24px
|
|
16444
|
+
* - .summary-grid: padding 3px 0, row-gap 6px
|
|
16445
|
+
* - .summary-item: height 20px
|
|
16446
|
+
*
|
|
16447
|
+
* Formula: (rows * itemHeight) + ((rows - 1) * rowGap) + gridPadding + containerMargin
|
|
16448
|
+
*/
|
|
16449
|
+
calculateGridHeight() {
|
|
16450
|
+
const itemHeight = 20; // .summary-item height
|
|
16451
|
+
const rowGap = 6; // .summary-grid row-gap
|
|
16452
|
+
const gridPadding = 6; // .summary-grid padding (3px top + 3px bottom)
|
|
16453
|
+
// For error/warning states, use a smaller fixed height
|
|
16454
|
+
if (this.hasError || this.hasWarning) {
|
|
16455
|
+
const alertHeight = itemHeight + 2 * rowGap;
|
|
16456
|
+
return alertHeight + gridPadding;
|
|
16457
|
+
}
|
|
16458
|
+
// For loading state, calculate based on current rows
|
|
16459
|
+
const gridHeight = this.currentRows * itemHeight + (this.currentRows - 1) * rowGap;
|
|
16460
|
+
return gridHeight + gridPadding;
|
|
16461
|
+
}
|
|
16462
|
+
animateCollapse() {
|
|
16463
|
+
if (this.panelsRef?.nativeElement) {
|
|
16464
|
+
const el = this.panelsRef.nativeElement;
|
|
16465
|
+
// Set current height explicitly first
|
|
16466
|
+
this.panelHeight = el.scrollHeight + 'px';
|
|
16467
|
+
this.cdr.detectChanges();
|
|
16468
|
+
// Force reflow
|
|
16469
|
+
void el.offsetHeight;
|
|
16470
|
+
// Then animate to 0
|
|
16471
|
+
requestAnimationFrame(() => {
|
|
16472
|
+
this.panelHeight = '0px';
|
|
16473
|
+
this.cdr.markForCheck();
|
|
16474
|
+
});
|
|
16475
|
+
}
|
|
16476
|
+
}
|
|
16251
16477
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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
|
|
16478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n #panelsRef\n class=\"summary-area-panels\"\n [class.is-active]=\"!isCollapsed()\"\n [class.loading-active]=\"hasLoading\"\n [style.height]=\"panelHeight\"\n>\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\n [style.--rows]=\"currentRows\"\n [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div\n class=\"summary-area-loading\"\n [class.is-visible]=\"loadingVisible\"\n [attr.aria-hidden]=\"!hasLoading\"\n [style.height]=\"loadingPanelHeight\"\n >\n <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n <span class=\"loading-text\">{{ loadingText }}</span>\n </div>\n @if (hasError) {\n <div class=\"summary-area-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n <clr-alert-item>\n @if (errorLinkText && errorClick) {\n <span class=\"alert-text\">{{ errorText }}</span>\n <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n } @else if (errorClick) {\n <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n } @else {\n <span class=\"alert-text\">{{ errorText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n } @else if (hasWarning) {\n <div class=\"summary-area-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n <clr-alert-item>\n @if (warningLinkText && warningClick) {\n <span class=\"alert-text\">{{ warningText }}</span>\n <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n >{{ warningLinkText }}</span\n >\n } @else if (warningClick) {\n <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n >{{ warningText }}</span\n >\n } @else {\n <span class=\"alert-text\">{{ warningText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n }\n </div>\n </div>\n\n <div\n class=\"summary-area-panel summary-area-panel--grid\"\n [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div class=\"summary-area-container\">\n <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows\">\n <ng-container *ngFor=\"let item of visibleItems\">\n <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i1$1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1$1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1$1.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i1$1.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
|
|
16253
16479
|
}
|
|
16254
16480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, decorators: [{
|
|
16255
16481
|
type: Component,
|
|
16256
|
-
args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div
|
|
16482
|
+
args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div\n #panelsRef\n class=\"summary-area-panels\"\n [class.is-active]=\"!isCollapsed()\"\n [class.loading-active]=\"hasLoading\"\n [style.height]=\"panelHeight\"\n>\n <div\n class=\"summary-area-panel summary-area-panel--state\"\n [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n [class.is-error]=\"hasError\"\n [class.is-warning]=\"hasWarning\"\n [style.--rows]=\"currentRows\"\n [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div\n class=\"summary-area-loading\"\n [class.is-visible]=\"loadingVisible\"\n [attr.aria-hidden]=\"!hasLoading\"\n [style.height]=\"loadingPanelHeight\"\n >\n <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n <span class=\"loading-text\">{{ loadingText }}</span>\n </div>\n @if (hasError) {\n <div class=\"summary-area-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n <clr-alert-item>\n @if (errorLinkText && errorClick) {\n <span class=\"alert-text\">{{ errorText }}</span>\n <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n } @else if (errorClick) {\n <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n } @else {\n <span class=\"alert-text\">{{ errorText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n } @else if (hasWarning) {\n <div class=\"summary-area-alert\">\n <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n <clr-alert-item>\n @if (warningLinkText && warningClick) {\n <span class=\"alert-text\">{{ warningText }}</span>\n <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n >{{ warningLinkText }}</span\n >\n } @else if (warningClick) {\n <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n >{{ warningText }}</span\n >\n } @else {\n <span class=\"alert-text\">{{ warningText }}</span>\n }\n </clr-alert-item>\n </clr-alert>\n </div>\n }\n </div>\n </div>\n\n <div\n class=\"summary-area-panel summary-area-panel--grid\"\n [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n >\n <div class=\"summary-area-panel__body\">\n <div class=\"summary-area-container\">\n <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows\">\n <ng-container *ngFor=\"let item of visibleItems\">\n <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"] }]
|
|
16257
16483
|
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
16258
16484
|
type: ContentChildren,
|
|
16259
16485
|
args: [ClrSummaryItem, { descendants: true }]
|
|
16486
|
+
}], panelsRef: [{
|
|
16487
|
+
type: ViewChild,
|
|
16488
|
+
args: ['panelsRef', { static: true }]
|
|
16260
16489
|
}], onResize: [{
|
|
16261
16490
|
type: HostListener,
|
|
16262
16491
|
args: ['window:resize']
|