@porscheinformatik/clr-addons 19.11.3 → 19.11.5
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 +250 -18
- package/fesm2022/clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/clr-addons-phs.css +3 -0
- package/styles/clr-addons-phs.css.map +1 -1
- package/styles/clr-addons-phs.min.css +1 -1
- package/styles/clr-addons-phs.min.css.map +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
|
@@ -1085,7 +1085,7 @@ class ClrGenericQuickList {
|
|
|
1085
1085
|
clearTimeout(this.timeout);
|
|
1086
1086
|
}
|
|
1087
1087
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1088
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ClrGenericQuickList, isStandalone: false, selector: "clr-generic-quick-list", inputs: { allItems: ["clrAllItems", "allItems"], addLabel: ["clrAddLabel", "addLabel"], addPossible: ["clrAddPossible", "addPossible"], blankItem: ["clrBlankItem", "blankItem"], controlClasses: ["clrControlClasses", "controlClasses"], required: ["clrMandatory", "required"], readonly: "readonly", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true" } }, queries: [{ propertyName: "itemTemplate", predicate: TemplateRef }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n <ng-container *ngFor=\"let item of allItems; index as i\">\n <div class=\"controls-wrapper\">\n <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n <button\n *ngIf=\"!(readonly || readonly === '')\"\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && compactMode && i === allItems.length - 1\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n </div>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && allItems.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n {{addLabel}}\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
1088
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ClrGenericQuickList, isStandalone: false, selector: "clr-generic-quick-list", inputs: { allItems: ["clrAllItems", "allItems"], addLabel: ["clrAddLabel", "addLabel"], addPossible: ["clrAddPossible", "addPossible"], blankItem: ["clrBlankItem", "blankItem"], controlClasses: ["clrControlClasses", "controlClasses"], required: ["clrMandatory", "required"], readonly: "readonly", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true", "class.readonly-list": "this.readonly" } }, queries: [{ propertyName: "itemTemplate", predicate: TemplateRef }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n <ng-container *ngFor=\"let item of allItems; index as i\">\n <div class=\"controls-wrapper\">\n <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n <button\n *ngIf=\"!(readonly || readonly === '')\"\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && compactMode && i === allItems.length - 1\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n </div>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && allItems.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n {{addLabel}}\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }] }); }
|
|
1089
1089
|
}
|
|
1090
1090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrGenericQuickList, decorators: [{
|
|
1091
1091
|
type: Component,
|
|
@@ -1109,6 +1109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
1109
1109
|
type: Input,
|
|
1110
1110
|
args: ['clrMandatory']
|
|
1111
1111
|
}], readonly: [{
|
|
1112
|
+
type: HostBinding,
|
|
1113
|
+
args: ['class.readonly-list']
|
|
1114
|
+
}, {
|
|
1112
1115
|
type: Input
|
|
1113
1116
|
}], compactMode: [{
|
|
1114
1117
|
type: Input
|
|
@@ -15654,17 +15657,18 @@ class ClrSummaryItemValue {
|
|
|
15654
15657
|
}
|
|
15655
15658
|
/**
|
|
15656
15659
|
* Returns true if this component has any meaningful content to display.
|
|
15657
|
-
* This includes: a value
|
|
15660
|
+
* This includes: a value or projected content.
|
|
15661
|
+
* An icon is considered special content and does not count as meaningful content alone.
|
|
15658
15662
|
*/
|
|
15659
15663
|
get hasMeaningfulContent() {
|
|
15660
|
-
return this.
|
|
15664
|
+
return this.hasText || this.hasProjectedContent;
|
|
15661
15665
|
}
|
|
15662
15666
|
/**
|
|
15663
15667
|
* Returns true if this component should be hidden.
|
|
15664
15668
|
* This happens when there's no meaningful content.
|
|
15665
15669
|
*/
|
|
15666
15670
|
get shouldHide() {
|
|
15667
|
-
return !this.hasMeaningfulContent;
|
|
15671
|
+
return !this.hasIcon && !this.hasMeaningfulContent;
|
|
15668
15672
|
}
|
|
15669
15673
|
ngOnInit() {
|
|
15670
15674
|
if (this.hasIcon && this.hasText) {
|
|
@@ -15919,7 +15923,8 @@ class ClrSummaryItem {
|
|
|
15919
15923
|
return this.warning()?.click;
|
|
15920
15924
|
}
|
|
15921
15925
|
get showEditButton() {
|
|
15922
|
-
return (!this.
|
|
15926
|
+
return (!this.hasNonIconTextValue() &&
|
|
15927
|
+
!this.hasLoading &&
|
|
15923
15928
|
!this.hasError &&
|
|
15924
15929
|
!this.hasWarning &&
|
|
15925
15930
|
!this.hasProjectedContent &&
|
|
@@ -16046,22 +16051,24 @@ class ClrSummaryItem {
|
|
|
16046
16051
|
return false;
|
|
16047
16052
|
}
|
|
16048
16053
|
// Skip internal elements by class
|
|
16049
|
-
|
|
16054
|
+
return !(element.classList.contains('edit-link') ||
|
|
16050
16055
|
element.classList.contains('value-placeholder') ||
|
|
16051
|
-
element.classList.contains('summary-item-loading'))
|
|
16052
|
-
return false;
|
|
16053
|
-
}
|
|
16054
|
-
return true;
|
|
16056
|
+
element.classList.contains('summary-item-loading'));
|
|
16055
16057
|
}
|
|
16056
16058
|
return false;
|
|
16057
16059
|
});
|
|
16058
16060
|
}
|
|
16061
|
+
hasNonIconTextValue() {
|
|
16062
|
+
return this.valueChildren.toArray().some(child => {
|
|
16063
|
+
return !child.hasIcon && !!child.value()?.trim();
|
|
16064
|
+
});
|
|
16065
|
+
}
|
|
16059
16066
|
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 <
|
|
16067
|
+
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
16068
|
}
|
|
16062
16069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryItem, decorators: [{
|
|
16063
16070
|
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 <
|
|
16071
|
+
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
16072
|
}], propDecorators: { template: [{
|
|
16066
16073
|
type: ViewChild,
|
|
16067
16074
|
args: ['itemTemplate', { static: true }]
|
|
@@ -16162,17 +16169,96 @@ class ClrSummaryArea {
|
|
|
16162
16169
|
this.loading = input();
|
|
16163
16170
|
this.currentColumns = 5;
|
|
16164
16171
|
this.currentRows = this.rows();
|
|
16172
|
+
this.panelHeight = '0px';
|
|
16173
|
+
this.loadingPanelHeight = '0px';
|
|
16174
|
+
this.loadingVisible = false;
|
|
16175
|
+
this.prevErrorActive = false;
|
|
16176
|
+
this.prevWarningActive = false;
|
|
16177
|
+
this.prevCollapsed = true;
|
|
16178
|
+
this.prevHasLoading = false;
|
|
16179
|
+
this.loadingVisibleTimeout = null;
|
|
16165
16180
|
this.state = inject(ClrSummaryAreaStateService);
|
|
16166
16181
|
this.cdr = inject(ChangeDetectorRef);
|
|
16167
16182
|
this.defaultLoadingText = 'Loading...';
|
|
16168
16183
|
this.defaultErrorText = 'Error';
|
|
16169
16184
|
this.defaultWarningText = 'Warning';
|
|
16170
16185
|
this.maxColumns = 5;
|
|
16186
|
+
this.errorActive = computed(() => this.error()?.active() ?? false);
|
|
16187
|
+
this.warningActive = computed(() => this.warning()?.active() ?? false);
|
|
16188
|
+
// Effect to handle expand/collapse with smooth height transition
|
|
16171
16189
|
effect(() => {
|
|
16172
|
-
|
|
16190
|
+
const collapsed = this.isCollapsed();
|
|
16191
|
+
if (!collapsed) {
|
|
16192
|
+
// Expanding: update grid first, then measure and set height
|
|
16173
16193
|
this.updateGrid();
|
|
16174
|
-
requestAnimationFrame(() =>
|
|
16194
|
+
requestAnimationFrame(() => {
|
|
16195
|
+
this.updateGrid();
|
|
16196
|
+
this.updatePanelHeight();
|
|
16197
|
+
});
|
|
16198
|
+
}
|
|
16199
|
+
else if (!this.prevCollapsed && collapsed) {
|
|
16200
|
+
// Collapsing: set current height first, then animate to 0
|
|
16201
|
+
this.animateCollapse();
|
|
16175
16202
|
}
|
|
16203
|
+
this.prevCollapsed = collapsed;
|
|
16204
|
+
});
|
|
16205
|
+
// Effect for tracking changes in the error state (using computed signal)
|
|
16206
|
+
effect(() => {
|
|
16207
|
+
const errorActive = this.errorActive();
|
|
16208
|
+
const collapsed = this.isCollapsed();
|
|
16209
|
+
// If error active state changed and area is NOT collapsed, recalculate panel height
|
|
16210
|
+
if (errorActive !== this.prevErrorActive && !collapsed) {
|
|
16211
|
+
this.updateGrid();
|
|
16212
|
+
this.cdr.detectChanges();
|
|
16213
|
+
requestAnimationFrame(() => {
|
|
16214
|
+
this.recalculatePanelHeight();
|
|
16215
|
+
});
|
|
16216
|
+
}
|
|
16217
|
+
this.prevErrorActive = errorActive;
|
|
16218
|
+
});
|
|
16219
|
+
// Effect for tracking changes in the warning state (using computed signal)
|
|
16220
|
+
effect(() => {
|
|
16221
|
+
const warningActive = this.warningActive();
|
|
16222
|
+
const collapsed = this.isCollapsed();
|
|
16223
|
+
// If error active state changed and area is NOT collapsed, recalculate panel height
|
|
16224
|
+
if (warningActive !== this.prevWarningActive && !collapsed) {
|
|
16225
|
+
this.updateGrid();
|
|
16226
|
+
this.cdr.detectChanges();
|
|
16227
|
+
requestAnimationFrame(() => {
|
|
16228
|
+
this.recalculatePanelHeight();
|
|
16229
|
+
});
|
|
16230
|
+
}
|
|
16231
|
+
this.prevWarningActive = warningActive;
|
|
16232
|
+
});
|
|
16233
|
+
// Effect to delay loading indicator visibility for smooth fade-in animation
|
|
16234
|
+
effect(() => {
|
|
16235
|
+
const loading = this.hasLoading;
|
|
16236
|
+
const collapsed = this.isCollapsed();
|
|
16237
|
+
// Clear any pending timeout
|
|
16238
|
+
if (this.loadingVisibleTimeout) {
|
|
16239
|
+
clearTimeout(this.loadingVisibleTimeout);
|
|
16240
|
+
this.loadingVisibleTimeout = null;
|
|
16241
|
+
}
|
|
16242
|
+
if (loading && !collapsed) {
|
|
16243
|
+
// Delay showing loading indicator to allow parent panel to become visible first
|
|
16244
|
+
this.loadingVisibleTimeout = setTimeout(() => {
|
|
16245
|
+
this.loadingVisible = true;
|
|
16246
|
+
this.cdr.markForCheck();
|
|
16247
|
+
}, 50);
|
|
16248
|
+
}
|
|
16249
|
+
else {
|
|
16250
|
+
this.loadingVisible = false;
|
|
16251
|
+
this.loadingPanelHeight = '0px';
|
|
16252
|
+
this.cdr.markForCheck();
|
|
16253
|
+
}
|
|
16254
|
+
if (this.prevHasLoading !== loading && !collapsed) {
|
|
16255
|
+
this.updateGrid();
|
|
16256
|
+
this.cdr.detectChanges();
|
|
16257
|
+
requestAnimationFrame(() => {
|
|
16258
|
+
this.recalculatePanelHeight();
|
|
16259
|
+
});
|
|
16260
|
+
}
|
|
16261
|
+
this.prevHasLoading = loading;
|
|
16176
16262
|
});
|
|
16177
16263
|
}
|
|
16178
16264
|
ngOnInit() {
|
|
@@ -16196,7 +16282,7 @@ class ClrSummaryArea {
|
|
|
16196
16282
|
return this.loading()?.text || this.defaultLoadingText;
|
|
16197
16283
|
}
|
|
16198
16284
|
get hasError() {
|
|
16199
|
-
return !this.hasLoading && !!this.error() && this.error().active;
|
|
16285
|
+
return !this.hasLoading && !!this.error() && this.error().active();
|
|
16200
16286
|
}
|
|
16201
16287
|
get errorText() {
|
|
16202
16288
|
return this.error()?.text || this.defaultErrorText;
|
|
@@ -16208,7 +16294,7 @@ class ClrSummaryArea {
|
|
|
16208
16294
|
return this.error()?.click;
|
|
16209
16295
|
}
|
|
16210
16296
|
get hasWarning() {
|
|
16211
|
-
return !this.hasLoading && !this.hasError && !!this.warning() && this.warning().active;
|
|
16297
|
+
return !this.hasLoading && !this.hasError && !!this.warning() && this.warning().active();
|
|
16212
16298
|
}
|
|
16213
16299
|
get warningText() {
|
|
16214
16300
|
return this.warning()?.text || this.defaultWarningText;
|
|
@@ -16222,11 +16308,51 @@ class ClrSummaryArea {
|
|
|
16222
16308
|
onResize() {
|
|
16223
16309
|
if (!this.isCollapsed()) {
|
|
16224
16310
|
this.updateGrid();
|
|
16311
|
+
this.cdr.detectChanges();
|
|
16312
|
+
// Recalculate height after grid update for responsive changes
|
|
16313
|
+
// Use setTimeout to ensure DOM is updated with new grid layout
|
|
16314
|
+
setTimeout(() => {
|
|
16315
|
+
this.recalculatePanelHeight();
|
|
16316
|
+
}, 0);
|
|
16225
16317
|
}
|
|
16226
16318
|
}
|
|
16227
16319
|
ngAfterViewInit() {
|
|
16228
16320
|
this.updateGrid();
|
|
16229
16321
|
this.cdr.detectChanges();
|
|
16322
|
+
// Set initial height after content is rendered
|
|
16323
|
+
if (!this.isCollapsed()) {
|
|
16324
|
+
// Use setTimeout to ensure DOM is fully painted
|
|
16325
|
+
setTimeout(() => {
|
|
16326
|
+
// If loading, calculate height immediately based on rows
|
|
16327
|
+
if (this.hasLoading || this.hasError || this.hasWarning) {
|
|
16328
|
+
const calculatedHeight = this.calculateGridHeight();
|
|
16329
|
+
this.panelHeight = calculatedHeight + 'px';
|
|
16330
|
+
this.cdr.detectChanges();
|
|
16331
|
+
}
|
|
16332
|
+
else {
|
|
16333
|
+
this.recalculatePanelHeight();
|
|
16334
|
+
}
|
|
16335
|
+
}, 0);
|
|
16336
|
+
}
|
|
16337
|
+
// Subscribe to content changes (when items get dynamically added/removed)
|
|
16338
|
+
this.itemsSubscription = this.items.changes.subscribe(() => {
|
|
16339
|
+
// Force layout recalculation after DOM update
|
|
16340
|
+
setTimeout(() => {
|
|
16341
|
+
this.updateGrid();
|
|
16342
|
+
this.cdr.detectChanges();
|
|
16343
|
+
if (!this.isCollapsed()) {
|
|
16344
|
+
setTimeout(() => {
|
|
16345
|
+
this.recalculatePanelHeight();
|
|
16346
|
+
}, 0);
|
|
16347
|
+
}
|
|
16348
|
+
}, 0);
|
|
16349
|
+
});
|
|
16350
|
+
}
|
|
16351
|
+
ngOnDestroy() {
|
|
16352
|
+
this.itemsSubscription?.unsubscribe();
|
|
16353
|
+
if (this.loadingVisibleTimeout) {
|
|
16354
|
+
clearTimeout(this.loadingVisibleTimeout);
|
|
16355
|
+
}
|
|
16230
16356
|
}
|
|
16231
16357
|
updateGrid() {
|
|
16232
16358
|
if (this.items && this.items.length > 0) {
|
|
@@ -16248,15 +16374,121 @@ class ClrSummaryArea {
|
|
|
16248
16374
|
this.cdr.detectChanges();
|
|
16249
16375
|
}
|
|
16250
16376
|
}
|
|
16377
|
+
updatePanelHeight() {
|
|
16378
|
+
if (this.panelsRef?.nativeElement) {
|
|
16379
|
+
const el = this.panelsRef.nativeElement;
|
|
16380
|
+
// For loading/error/warning states, use calculated height
|
|
16381
|
+
if (this.hasLoading || this.hasError || this.hasWarning) {
|
|
16382
|
+
const calculatedHeight = this.calculateGridHeight();
|
|
16383
|
+
// Set to 0 first for animation start
|
|
16384
|
+
this.panelHeight = '0px';
|
|
16385
|
+
this.cdr.detectChanges();
|
|
16386
|
+
void el.offsetHeight;
|
|
16387
|
+
// Animate to calculated height
|
|
16388
|
+
requestAnimationFrame(() => {
|
|
16389
|
+
this.panelHeight = calculatedHeight + 'px';
|
|
16390
|
+
this.cdr.markForCheck();
|
|
16391
|
+
});
|
|
16392
|
+
return;
|
|
16393
|
+
}
|
|
16394
|
+
// For grid state, measure the DOM
|
|
16395
|
+
// Set to 0 first for animation start
|
|
16396
|
+
this.panelHeight = '0px';
|
|
16397
|
+
this.cdr.detectChanges();
|
|
16398
|
+
// Force reflow
|
|
16399
|
+
void el.offsetHeight;
|
|
16400
|
+
// Temporarily set to auto to measure the full content height
|
|
16401
|
+
el.style.height = 'auto';
|
|
16402
|
+
const scrollHeight = el.scrollHeight;
|
|
16403
|
+
// Reset to 0 to prepare for animation
|
|
16404
|
+
el.style.height = '0px';
|
|
16405
|
+
// Force reflow again
|
|
16406
|
+
void el.offsetHeight;
|
|
16407
|
+
// Animate to measured height
|
|
16408
|
+
requestAnimationFrame(() => {
|
|
16409
|
+
this.panelHeight = scrollHeight + 'px';
|
|
16410
|
+
this.cdr.markForCheck();
|
|
16411
|
+
});
|
|
16412
|
+
}
|
|
16413
|
+
}
|
|
16414
|
+
recalculatePanelHeight() {
|
|
16415
|
+
if (this.panelsRef?.nativeElement && !this.isCollapsed()) {
|
|
16416
|
+
// If specific states are active, use calculated height
|
|
16417
|
+
if (this.hasLoading || this.hasError || this.hasWarning) {
|
|
16418
|
+
const calculatedHeight = this.calculateGridHeight();
|
|
16419
|
+
this.panelHeight = calculatedHeight + 'px';
|
|
16420
|
+
this.cdr.detectChanges();
|
|
16421
|
+
return;
|
|
16422
|
+
}
|
|
16423
|
+
const el = this.panelsRef.nativeElement;
|
|
16424
|
+
// Set height to auto temporarily to measure true content height
|
|
16425
|
+
const currentHeight = el.style.height;
|
|
16426
|
+
el.style.height = 'auto';
|
|
16427
|
+
// Force reflow to ensure measurement is accurate
|
|
16428
|
+
void el.offsetHeight;
|
|
16429
|
+
// Measure the actual content height
|
|
16430
|
+
const scrollHeight = el.scrollHeight;
|
|
16431
|
+
// Restore height and set new value
|
|
16432
|
+
el.style.height = currentHeight;
|
|
16433
|
+
this.panelHeight = scrollHeight + 'px';
|
|
16434
|
+
this.cdr.detectChanges();
|
|
16435
|
+
setTimeout(() => {
|
|
16436
|
+
this.cdr.markForCheck();
|
|
16437
|
+
}, 0);
|
|
16438
|
+
}
|
|
16439
|
+
}
|
|
16440
|
+
/**
|
|
16441
|
+
* Calculate the expected grid height based on currentRows.
|
|
16442
|
+
* This is used when the grid isn't rendered (e.g., during loading state).
|
|
16443
|
+
* The loading container should match the grid height exactly.
|
|
16444
|
+
*
|
|
16445
|
+
* Grid structure:
|
|
16446
|
+
* - .summary-area-container: margin 0 24px 9px 24px
|
|
16447
|
+
* - .summary-grid: padding 3px 0, row-gap 6px
|
|
16448
|
+
* - .summary-item: height 20px
|
|
16449
|
+
*
|
|
16450
|
+
* Formula: (rows * itemHeight) + ((rows - 1) * rowGap) + gridPadding + containerMargin
|
|
16451
|
+
*/
|
|
16452
|
+
calculateGridHeight() {
|
|
16453
|
+
const itemHeight = 20; // .summary-item height
|
|
16454
|
+
const rowGap = 6; // .summary-grid row-gap
|
|
16455
|
+
const gridPadding = 6; // .summary-grid padding (3px top + 3px bottom)
|
|
16456
|
+
// For error/warning states, use a smaller fixed height
|
|
16457
|
+
if (this.hasError || this.hasWarning) {
|
|
16458
|
+
const alertHeight = itemHeight + 2 * rowGap;
|
|
16459
|
+
return alertHeight + gridPadding;
|
|
16460
|
+
}
|
|
16461
|
+
// For loading state, calculate based on current rows
|
|
16462
|
+
const gridHeight = this.currentRows * itemHeight + (this.currentRows - 1) * rowGap;
|
|
16463
|
+
return gridHeight + gridPadding;
|
|
16464
|
+
}
|
|
16465
|
+
animateCollapse() {
|
|
16466
|
+
if (this.panelsRef?.nativeElement) {
|
|
16467
|
+
const el = this.panelsRef.nativeElement;
|
|
16468
|
+
// Set current height explicitly first
|
|
16469
|
+
this.panelHeight = el.scrollHeight + 'px';
|
|
16470
|
+
this.cdr.detectChanges();
|
|
16471
|
+
// Force reflow
|
|
16472
|
+
void el.offsetHeight;
|
|
16473
|
+
// Then animate to 0
|
|
16474
|
+
requestAnimationFrame(() => {
|
|
16475
|
+
this.panelHeight = '0px';
|
|
16476
|
+
this.cdr.markForCheck();
|
|
16477
|
+
});
|
|
16478
|
+
}
|
|
16479
|
+
}
|
|
16251
16480
|
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
|
|
16481
|
+
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
16482
|
}
|
|
16254
16483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ClrSummaryArea, decorators: [{
|
|
16255
16484
|
type: Component,
|
|
16256
|
-
args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div
|
|
16485
|
+
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
16486
|
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
16258
16487
|
type: ContentChildren,
|
|
16259
16488
|
args: [ClrSummaryItem, { descendants: true }]
|
|
16489
|
+
}], panelsRef: [{
|
|
16490
|
+
type: ViewChild,
|
|
16491
|
+
args: ['panelsRef', { static: true }]
|
|
16260
16492
|
}], onResize: [{
|
|
16261
16493
|
type: HostListener,
|
|
16262
16494
|
args: ['window:resize']
|