@porscheinformatik/clr-addons 19.21.2 → 19.21.3
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
CHANGED
|
@@ -16597,6 +16597,8 @@ class ClrSummaryItemValue {
|
|
|
16597
16597
|
this.icon = input();
|
|
16598
16598
|
this.tooltip = input();
|
|
16599
16599
|
this.clickable = input(false);
|
|
16600
|
+
this.href = input();
|
|
16601
|
+
this.target = input();
|
|
16600
16602
|
this.clicked = output();
|
|
16601
16603
|
this.hasProjectedContent = false;
|
|
16602
16604
|
this.isTextOverflowing = false;
|
|
@@ -16824,11 +16826,11 @@ class ClrSummaryItemValue {
|
|
|
16824
16826
|
return false;
|
|
16825
16827
|
}
|
|
16826
16828
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [attr.shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content
|
|
16829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n <a clrTooltipTrigger class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n <cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n </a>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n <cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [attr.shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon\n [attr.shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon clrTooltipTrigger [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n <a\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n >\n {{ value() }}\n </a>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<a #valueElement class=\"value value-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n <span\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n >\n {{ value() }}\n </span>\n @if (effectiveTooltip) {\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}\n </clr-tooltip-content>\n }\n</clr-tooltip>\n} @else if (effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "ngmodule", type: ClrIconModule }] }); }
|
|
16828
16830
|
}
|
|
16829
16831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
|
|
16830
16832
|
type: Component,
|
|
16831
|
-
args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [CommonModule, RouterModule, ClarityModule, ClrIconModule], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [attr.shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content
|
|
16833
|
+
args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [CommonModule, RouterModule, ClarityModule, ClrIconModule], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n <a clrTooltipTrigger class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n <cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n </a>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n <cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [attr.shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon\n [attr.shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon clrTooltipTrigger [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<cds-icon [attr.shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n <a\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n [href]=\"href()\"\n [attr.target]=\"target() ?? null\"\n (click)=\"handleClick()\"\n >\n {{ value() }}\n </a>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<a #valueElement class=\"value value-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n <span\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n >\n {{ value() }}\n </span>\n @if (effectiveTooltip) {\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}\n </clr-tooltip-content>\n }\n</clr-tooltip>\n} @else if (effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}\n </clr-tooltip-content>\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"] }]
|
|
16832
16834
|
}], ctorParameters: () => [], propDecorators: { projectedContent: [{
|
|
16833
16835
|
type: ViewChild,
|
|
16834
16836
|
args: ['projectedContent']
|
|
@@ -17036,7 +17038,7 @@ class ClrSummaryItem {
|
|
|
17036
17038
|
});
|
|
17037
17039
|
}
|
|
17038
17040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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-copy-to-clipboard [value]=\"copyableValue\" [tooltipText]=\"copyButtonTooltip()\"></clr-copy-to-clipboard>\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-copy-to-clipboard{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: ClrCopyToClipboard, selector: "clr-copy-to-clipboard", inputs: ["value", "tooltipText", "hiddenUntilHovered"] }] }); }
|
|
17041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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-copy-to-clipboard [value]=\"copyableValue\" [tooltipText]=\"copyButtonTooltip()\"></clr-copy-to-clipboard>\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-copy-to-clipboard{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", "href", "target"], outputs: ["clicked"] }, { kind: "component", type: ClrCopyToClipboard, selector: "clr-copy-to-clipboard", inputs: ["value", "tooltipText", "hiddenUntilHovered"] }] }); }
|
|
17040
17042
|
}
|
|
17041
17043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ClrSummaryItem, decorators: [{
|
|
17042
17044
|
type: Component,
|