@porscheinformatik/clr-addons 19.20.0 → 19.20.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/charts/line-chart/line-chart.component.d.ts +3 -1
- package/fesm2022/clr-addons.mjs +5 -5
- package/fesm2022/clr-addons.mjs.map +1 -1
- package/fesm2022/porscheinformatik-clr-addons-charts.mjs +6 -3
- package/fesm2022/porscheinformatik-clr-addons-charts.mjs.map +1 -1
- package/package.json +1 -1
- package/summary-area/summary-area/summary-area.d.ts +2 -2
|
@@ -24,6 +24,8 @@ export declare class LineChartComponent extends ChartBase<LineChartSelectedPoint
|
|
|
24
24
|
readonly xAxisLabel: import("@angular/core").InputSignal<string>;
|
|
25
25
|
/** Optional label rendered rotated to the left of the Y axis. */
|
|
26
26
|
readonly yAxisLabel: import("@angular/core").InputSignal<string>;
|
|
27
|
+
readonly yMin: import("@angular/core").InputSignal<number>;
|
|
28
|
+
readonly autoscaleYAxis: import("@angular/core").InputSignal<boolean>;
|
|
27
29
|
readonly valueClicked: import("@angular/core").OutputEmitterRef<XYChartValue>;
|
|
28
30
|
private readonly MARGIN;
|
|
29
31
|
protected readonly hasData: import("@angular/core").Signal<boolean>;
|
|
@@ -37,5 +39,5 @@ export declare class LineChartComponent extends ChartBase<LineChartSelectedPoint
|
|
|
37
39
|
private drawSeries;
|
|
38
40
|
private openTooltip;
|
|
39
41
|
static ɵfac: i0.ɵɵFactoryDeclaration<LineChartComponent, never>;
|
|
40
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LineChartComponent, "clr-line-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "noItemsMessage": { "alias": "noItemsMessage"; "required": false; "isSignal": true; }; "tooltipPercentOfTotal": { "alias": "tooltipPercentOfTotal"; "required": false; "isSignal": true; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; "isSignal": true; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
|
|
42
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LineChartComponent, "clr-line-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "tooltipOrientation": { "alias": "tooltipOrientation"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "showExportButton": { "alias": "showExportButton"; "required": false; "isSignal": true; }; "exportButtonTitle": { "alias": "exportButtonTitle"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "noItemsMessage": { "alias": "noItemsMessage"; "required": false; "isSignal": true; }; "tooltipPercentOfTotal": { "alias": "tooltipPercentOfTotal"; "required": false; "isSignal": true; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; "isSignal": true; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "autoscaleYAxis": { "alias": "autoscaleYAxis"; "required": false; "isSignal": true; }; }, { "valueClicked": "valueClicked"; }, never, never, false, never>;
|
|
41
43
|
}
|
package/fesm2022/clr-addons.mjs
CHANGED
|
@@ -16939,7 +16939,7 @@ class ClrSummaryArea {
|
|
|
16939
16939
|
this.warning = input();
|
|
16940
16940
|
this.loading = input();
|
|
16941
16941
|
this.currentColumns = 5;
|
|
16942
|
-
this.currentRows = this.rows();
|
|
16942
|
+
this.currentRows = linkedSignal(() => this.rows());
|
|
16943
16943
|
this.panelHeight = '0px';
|
|
16944
16944
|
this.loadingPanelHeight = '0px';
|
|
16945
16945
|
this.loadingVisible = false;
|
|
@@ -17141,7 +17141,7 @@ class ClrSummaryArea {
|
|
|
17141
17141
|
// If enough space, use as many columns as needed for the row constraint
|
|
17142
17142
|
// If not enough space, reduce columns and allow more rows per column
|
|
17143
17143
|
this.currentColumns = Math.max(1, Math.min(neededColumns, maxColumnsByWidth));
|
|
17144
|
-
this.currentRows
|
|
17144
|
+
this.currentRows.set(Math.ceil(itemCount / this.currentColumns));
|
|
17145
17145
|
this.cdr.detectChanges();
|
|
17146
17146
|
}
|
|
17147
17147
|
}
|
|
@@ -17230,7 +17230,7 @@ class ClrSummaryArea {
|
|
|
17230
17230
|
return alertHeight + gridPadding;
|
|
17231
17231
|
}
|
|
17232
17232
|
// For loading state, calculate based on current rows
|
|
17233
|
-
const gridHeight = this.currentRows * itemHeight + (this.currentRows - 1) * rowGap;
|
|
17233
|
+
const gridHeight = this.currentRows() * itemHeight + (this.currentRows() - 1) * rowGap;
|
|
17234
17234
|
return gridHeight + gridPadding;
|
|
17235
17235
|
}
|
|
17236
17236
|
animateCollapse() {
|
|
@@ -17249,11 +17249,11 @@ class ClrSummaryArea {
|
|
|
17249
17249
|
}
|
|
17250
17250
|
}
|
|
17251
17251
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17252
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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()\"
|
|
17252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 }}\n </span>\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"] }] }); }
|
|
17253
17253
|
}
|
|
17254
17254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryArea, decorators: [{
|
|
17255
17255
|
type: Component,
|
|
17256
|
-
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()\"
|
|
17256
|
+
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 }}\n </span>\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"] }]
|
|
17257
17257
|
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
17258
17258
|
type: ContentChildren,
|
|
17259
17259
|
args: [ClrSummaryItem, { descendants: true }]
|