@siemens/charts-ng 48.4.0 → 48.5.1
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.
|
@@ -630,11 +630,11 @@ class SiCustomLegendComponent {
|
|
|
630
630
|
this.legendClickEvent.emit(legend);
|
|
631
631
|
}
|
|
632
632
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCustomLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
633
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiCustomLegendComponent, isStandalone: true, selector: "si-custom-legend", inputs: { customLegend: { classPropertyName: "customLegend", publicName: "customLegend", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, titleColor: { classPropertyName: "titleColor", publicName: "titleColor", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { legendIconClickEvent: "legendIconClickEvent", legendClickEvent: "legendClickEvent", legendHoverStartEvent: "legendHoverStartEvent", legendHoverEndEvent: "legendHoverEndEvent" }, viewQueries: [{ propertyName: "customLegendContainer", first: true, predicate: ["customLegendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body\">\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"left-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"both-scenario-left-unit-container\"\n [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n >\n <span class=\"text-secondary\">{{ leg.unit }}</span>\n </div>\n <div\n class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n <div\n class=\"me-
|
|
633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiCustomLegendComponent, isStandalone: true, selector: "si-custom-legend", inputs: { customLegend: { classPropertyName: "customLegend", publicName: "customLegend", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, titleColor: { classPropertyName: "titleColor", publicName: "titleColor", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { legendIconClickEvent: "legendIconClickEvent", legendClickEvent: "legendClickEvent", legendHoverStartEvent: "legendHoverStartEvent", legendHoverEndEvent: "legendHoverEndEvent" }, viewQueries: [{ propertyName: "customLegendContainer", first: true, predicate: ["customLegendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body\">\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"left-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"both-scenario-left-unit-container\"\n [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n >\n <span class=\"text-secondary\">{{ leg.unit }}</span>\n </div>\n <div\n class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n <div\n class=\"me-4 d-flex align-items-center justify-content-center\"\n (click)=\"legendIconClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 1 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"right-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'right' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'right'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"legend-item-container custom-legend-right legend-item-container-right-floating-inner\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div\n class=\"legend-item legend-item-right\"\n [class.hidden-legend]=\"!legendItem.selected\"\n >\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n <div\n class=\"right-legend-circle d-flex align-items-center justify-content-center\"\n (click)=\"legendIconClick(legendItem)\"\n >\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n <div\n class=\"both-scenario-right-unit-container\"\n [class.right-scenario-unit-container]=\"customLegend()?.legendAxis === 'right'\"\n >\n <span class=\"right-unit-text text-secondary\">{{ leg.unit }}</span>\n </div>\n </div>\n }\n }\n </div>\n}\n", styles: [":host{--flex-dir1: row;--flex-dir2: row-reverse;margin:12px;display:flex;flex-direction:column}:host-context(:dir(rtl)){--flex-dir1: row-reverse;--flex-dir2: row}:host-context([dir=rtl]){--flex-dir1: row-reverse;--flex-dir2: row}.legend-container{display:flex;flex-direction:var(--flex-dir1);max-height:40px;flex:1 1 auto}.legend-item-container{width:50%;vertical-align:top;display:flex;flex-wrap:wrap;flex:1 1 100%;flex-direction:var(--flex-dir1);height:fit-content;max-height:40px;max-width:50%;min-width:50%;overflow-y:auto;scrollbar-width:thin}.legend-item-container::-webkit-scrollbar{width:4px;height:6px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container::-webkit-scrollbar-thumb{border-radius:12px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.legend-item-container::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:12px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container .custom-legend-left{flex-direction:var(--flex-dir1);flex:1 1 50%}.legend-item-container .custom-legend-right{flex-direction:var(--flex-dir2);flex:1 1 50%}.legend-item-container-right-floating-inner{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-right:12px;float:left}.legend-single-axis{max-width:100%;min-width:100%}.legend-empty{width:0%}.tooltip{display:none;max-width:375px;word-break:break-word;margin-top:16px;inset-block-start:0;margin-inline-start:-6px}.tooltip-arrow{left:12px}.legend-item{cursor:pointer;margin-right:12px;display:flex;flex-direction:var(--flex-dir1);align-items:center;height:20px;position:initial;width:calc(100% - 12px);max-width:fit-content}.legend-item:hover .tooltip{display:block}.legend-item-right{margin-right:0;margin-left:12px}.right-legend-circle{margin-right:0;margin-left:8px}.legend-text{box-sizing:inherit;display:inline;cursor:pointer}.hidden-legend .right-legend-circle,.hidden-legend div:first-child,.hidden-legend .legend-text{opacity:.4}.both-scenario-left-unit-container,.both-scenario-right-unit-container{min-width:32px;max-width:32px;overflow:hidden}.both-scenario-right-unit-container{max-height:100%}.both-scenario-left-unit-container{min-height:100%}.both-scenario-legend-container{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-left:12px}.right-unit-text{min-width:100%;min-height:100%;padding-left:2px}.left-legends{padding-right:36px}.right-legends{padding-left:28px}.both-legend-container{padding-right:0;padding-left:0}\n"] });
|
|
634
634
|
}
|
|
635
635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCustomLegendComponent, decorators: [{
|
|
636
636
|
type: Component,
|
|
637
|
-
args: [{ selector: 'si-custom-legend', template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body\">\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"left-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"both-scenario-left-unit-container\"\n [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n >\n <span class=\"text-secondary\">{{ leg.unit }}</span>\n </div>\n <div\n class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n <div\n class=\"me-
|
|
637
|
+
args: [{ selector: 'si-custom-legend', template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body\">\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"left-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"both-scenario-left-unit-container\"\n [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n >\n <span class=\"text-secondary\">{{ leg.unit }}</span>\n </div>\n <div\n class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n <div\n class=\"me-4 d-flex align-items-center justify-content-center\"\n (click)=\"legendIconClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 1 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"right-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'right' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'right'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"legend-item-container custom-legend-right legend-item-container-right-floating-inner\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div\n class=\"legend-item legend-item-right\"\n [class.hidden-legend]=\"!legendItem.selected\"\n >\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n <div\n class=\"right-legend-circle d-flex align-items-center justify-content-center\"\n (click)=\"legendIconClick(legendItem)\"\n >\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n <div\n class=\"both-scenario-right-unit-container\"\n [class.right-scenario-unit-container]=\"customLegend()?.legendAxis === 'right'\"\n >\n <span class=\"right-unit-text text-secondary\">{{ leg.unit }}</span>\n </div>\n </div>\n }\n }\n </div>\n}\n", styles: [":host{--flex-dir1: row;--flex-dir2: row-reverse;margin:12px;display:flex;flex-direction:column}:host-context(:dir(rtl)){--flex-dir1: row-reverse;--flex-dir2: row}:host-context([dir=rtl]){--flex-dir1: row-reverse;--flex-dir2: row}.legend-container{display:flex;flex-direction:var(--flex-dir1);max-height:40px;flex:1 1 auto}.legend-item-container{width:50%;vertical-align:top;display:flex;flex-wrap:wrap;flex:1 1 100%;flex-direction:var(--flex-dir1);height:fit-content;max-height:40px;max-width:50%;min-width:50%;overflow-y:auto;scrollbar-width:thin}.legend-item-container::-webkit-scrollbar{width:4px;height:6px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container::-webkit-scrollbar-thumb{border-radius:12px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.legend-item-container::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:12px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container .custom-legend-left{flex-direction:var(--flex-dir1);flex:1 1 50%}.legend-item-container .custom-legend-right{flex-direction:var(--flex-dir2);flex:1 1 50%}.legend-item-container-right-floating-inner{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-right:12px;float:left}.legend-single-axis{max-width:100%;min-width:100%}.legend-empty{width:0%}.tooltip{display:none;max-width:375px;word-break:break-word;margin-top:16px;inset-block-start:0;margin-inline-start:-6px}.tooltip-arrow{left:12px}.legend-item{cursor:pointer;margin-right:12px;display:flex;flex-direction:var(--flex-dir1);align-items:center;height:20px;position:initial;width:calc(100% - 12px);max-width:fit-content}.legend-item:hover .tooltip{display:block}.legend-item-right{margin-right:0;margin-left:12px}.right-legend-circle{margin-right:0;margin-left:8px}.legend-text{box-sizing:inherit;display:inline;cursor:pointer}.hidden-legend .right-legend-circle,.hidden-legend div:first-child,.hidden-legend .legend-text{opacity:.4}.both-scenario-left-unit-container,.both-scenario-right-unit-container{min-width:32px;max-width:32px;overflow:hidden}.both-scenario-right-unit-container{max-height:100%}.both-scenario-left-unit-container{min-height:100%}.both-scenario-legend-container{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-left:12px}.right-unit-text{min-width:100%;min-height:100%;padding-left:2px}.left-legends{padding-right:36px}.right-legends{padding-left:28px}.both-legend-container{padding-right:0;padding-left:0}\n"] }]
|
|
638
638
|
}] });
|
|
639
639
|
|
|
640
640
|
/**
|
|
@@ -2842,16 +2842,19 @@ class SiChartGaugeComponent extends SiChartComponent {
|
|
|
2842
2842
|
numberOfDecimals = input();
|
|
2843
2843
|
/**
|
|
2844
2844
|
* Min number of decimals.
|
|
2845
|
+
* Possible values are from 0 to 100.
|
|
2845
2846
|
* @defaultValue 0
|
|
2846
2847
|
*/
|
|
2847
2848
|
minNumberOfDecimals = input(0);
|
|
2848
2849
|
/**
|
|
2849
2850
|
* Max number of decimals.
|
|
2851
|
+
* Possible values are from 0 to 100.
|
|
2850
2852
|
* @defaultValue 0
|
|
2851
2853
|
*/
|
|
2852
2854
|
maxNumberOfDecimals = input(0);
|
|
2853
2855
|
/**
|
|
2854
2856
|
* Number of decimals on the axis.
|
|
2857
|
+
* Possible values are from 0 to 100.
|
|
2855
2858
|
* @defaultValue 0
|
|
2856
2859
|
*/
|
|
2857
2860
|
axisNumberOfDecimals = input(0);
|