@porscheinformatik/clr-addons 21.0.1 → 21.0.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/porscheinformatik-clr-addons.mjs +6 -4
- package/fesm2022/porscheinformatik-clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/clr-addons-phs.css +7 -6
- 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/types/porscheinformatik-clr-addons.d.ts +3 -1
|
@@ -16259,6 +16259,8 @@ class ClrSummaryItemValue {
|
|
|
16259
16259
|
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
16260
16260
|
this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
16261
16261
|
this.clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
|
|
16262
|
+
this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
|
|
16263
|
+
this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
|
|
16262
16264
|
this.clicked = output();
|
|
16263
16265
|
this.hasProjectedContent = false;
|
|
16264
16266
|
this.isTextOverflowing = false;
|
|
@@ -16486,18 +16488,18 @@ class ClrSummaryItemValue {
|
|
|
16486
16488
|
return false;
|
|
16487
16489
|
}
|
|
16488
16490
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon\n [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 [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (hasClickHandler) {\n<clr-tooltip>\n <span\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n >\n {{ value() }}\n </span>\n @if (effectiveTooltip) {\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
|
|
16491
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n </a>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n <cds-icon [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 [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon\n [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 [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon [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 }}</clr-tooltip-content\n >\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 }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-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: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
|
|
16490
16492
|
}
|
|
16491
16493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
|
|
16492
16494
|
type: Component,
|
|
16493
|
-
args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [RouterModule, ClarityModule, ClrIcon], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n <cds-icon\n clrTooltipTrigger\n [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon\n [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 [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (hasClickHandler) {\n<clr-tooltip>\n <span\n #valueElement\n class=\"value value-link\"\n clrTooltipTrigger\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n >\n {{ value() }}\n </span>\n @if (effectiveTooltip) {\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"] }]
|
|
16495
|
+
args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [RouterModule, ClarityModule, ClrIcon], 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 [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n </a>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n <cds-icon [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 [shape]=\"icon()\"\n class=\"value-icon value-link\"\n tabindex=\"0\"\n (click)=\"handleClick()\"\n (keydown.enter)=\"handleClick()\"\n ></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon\n [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 [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ tooltip() }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<cds-icon [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 }}</clr-tooltip-content\n >\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 }}</clr-tooltip-content\n >\n }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n {{ effectiveTooltip }}</clr-tooltip-content\n >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-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"] }]
|
|
16494
16496
|
}], ctorParameters: () => [], propDecorators: { projectedContent: [{
|
|
16495
16497
|
type: ViewChild,
|
|
16496
16498
|
args: ['projectedContent']
|
|
16497
16499
|
}], valueElement: [{
|
|
16498
16500
|
type: ViewChild,
|
|
16499
16501
|
args: ['valueElement']
|
|
16500
|
-
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], hasIcon: [{
|
|
16502
|
+
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], hasIcon: [{
|
|
16501
16503
|
type: HostBinding,
|
|
16502
16504
|
args: ['class.has-icon']
|
|
16503
16505
|
}], hasText: [{
|
|
@@ -16698,7 +16700,7 @@ class ClrSummaryItem {
|
|
|
16698
16700
|
});
|
|
16699
16701
|
}
|
|
16700
16702
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16701
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: 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"] }] }); }
|
|
16703
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: 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"] }] }); }
|
|
16702
16704
|
}
|
|
16703
16705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItem, decorators: [{
|
|
16704
16706
|
type: Component,
|