@siemens/charts-ng 51.4.0 → 51.5.0

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.
@@ -44,11 +44,11 @@ class SiCustomLegendComponent {
44
44
  this.legendClickEvent.emit(legend);
45
45
  }
46
46
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCustomLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
47
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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(--si-sys-color-background-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(--si-sys-color-background-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"], changeDetection: i0.ChangeDetectionStrategy.Eager });
47
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"left-legend-circle 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 tooltip-center-top\" 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 tooltip-center-top\" 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(--si-sys-color-background-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(--si-sys-color-background-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}.left-legend-circle{margin-right:8px}.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"], changeDetection: i0.ChangeDetectionStrategy.Eager });
48
48
  }
49
49
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCustomLegendComponent, decorators: [{
50
50
  type: Component,
51
- args: [{ selector: 'si-custom-legend', changeDetection: ChangeDetectionStrategy.Eager, 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(--si-sys-color-background-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(--si-sys-color-background-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"] }]
51
+ args: [{ selector: 'si-custom-legend', changeDetection: ChangeDetectionStrategy.Eager, 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=\"left-legend-circle 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 tooltip-center-top\" 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 tooltip-center-top\" 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(--si-sys-color-background-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(--si-sys-color-background-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}.left-legend-circle{margin-right:8px}.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"] }]
52
52
  }], propDecorators: { customLegendContainer: [{ type: i0.ViewChild, args: ['customLegendContainer', { isSignal: true }] }], customLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "customLegend", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], titleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleColor", required: false }] }], subTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitleColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], legendIconClickEvent: [{ type: i0.Output, args: ["legendIconClickEvent"] }], legendClickEvent: [{ type: i0.Output, args: ["legendClickEvent"] }], legendHoverStartEvent: [{ type: i0.Output, args: ["legendHoverStartEvent"] }], legendHoverEndEvent: [{ type: i0.Output, args: ["legendHoverEndEvent"] }] } });
53
53
 
54
54
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"siemens-charts-ng-custom-legend.mjs","sources":["../../../../projects/charts-ng/custom-legend/si-custom-legend.component.ts","../../../../projects/charts-ng/custom-legend/si-custom-legend.component.html","../../../../projects/charts-ng/custom-legend/index.ts","../../../../projects/charts-ng/custom-legend/siemens-charts-ng-custom-legend.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n viewChild\n} from '@angular/core';\n\nimport { CustomLegend, CustomLegendItem } from './si-custom-legend.interface';\n\n@Component({\n selector: 'si-custom-legend',\n templateUrl: './si-custom-legend.component.html',\n styleUrl: './si-custom-legend.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class SiCustomLegendComponent {\n /** @internal */\n readonly customLegendContainer = viewChild.required<ElementRef>('customLegendContainer');\n\n /** The data and configuration rendered by the custom legend. */\n readonly customLegend = input<CustomLegend>();\n /** The legend title. */\n readonly title = input<string>();\n /** The legend subtitle. */\n readonly subTitle = input<string>();\n /** The color of the legend title. */\n readonly titleColor = input<string>();\n /** The color of the legend subtitle. */\n readonly subTitleColor = input<string>();\n /** The color of the legend text. */\n readonly textColor = input<string>();\n /** The event emitted when a legend icon is clicked. */\n readonly legendIconClickEvent = output<CustomLegendItem>();\n /** The event emitted when a legend is clicked. */\n readonly legendClickEvent = output<CustomLegendItem>();\n /** The event emitted when the mouse enters a legend. */\n readonly legendHoverStartEvent = output<CustomLegendItem>();\n /** The event emitted when the mouse leaves a legend. */\n readonly legendHoverEndEvent = output<CustomLegendItem>();\n\n protected legendIconClick(legend: CustomLegendItem): void {\n legend.selected = !legend.selected;\n this.legendIconClickEvent.emit(legend);\n }\n\n protected legendClick(legend: CustomLegendItem): void {\n legend.selected = !legend.selected;\n this.legendClickEvent.emit(legend);\n }\n}\n","@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","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-custom-legend.component';\nexport * from './si-custom-legend.interface';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"siemens-charts-ng-custom-legend.mjs","sources":["../../../../projects/charts-ng/custom-legend/si-custom-legend.component.ts","../../../../projects/charts-ng/custom-legend/si-custom-legend.component.html","../../../../projects/charts-ng/custom-legend/index.ts","../../../../projects/charts-ng/custom-legend/siemens-charts-ng-custom-legend.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n viewChild\n} from '@angular/core';\n\nimport { CustomLegend, CustomLegendItem } from './si-custom-legend.interface';\n\n@Component({\n selector: 'si-custom-legend',\n templateUrl: './si-custom-legend.component.html',\n styleUrl: './si-custom-legend.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class SiCustomLegendComponent {\n /** @internal */\n readonly customLegendContainer = viewChild.required<ElementRef>('customLegendContainer');\n\n /** The data and configuration rendered by the custom legend. */\n readonly customLegend = input<CustomLegend>();\n /** The legend title. */\n readonly title = input<string>();\n /** The legend subtitle. */\n readonly subTitle = input<string>();\n /** The color of the legend title. */\n readonly titleColor = input<string>();\n /** The color of the legend subtitle. */\n readonly subTitleColor = input<string>();\n /** The color of the legend text. */\n readonly textColor = input<string>();\n /** The event emitted when a legend icon is clicked. */\n readonly legendIconClickEvent = output<CustomLegendItem>();\n /** The event emitted when a legend is clicked. */\n readonly legendClickEvent = output<CustomLegendItem>();\n /** The event emitted when the mouse enters a legend. */\n readonly legendHoverStartEvent = output<CustomLegendItem>();\n /** The event emitted when the mouse leaves a legend. */\n readonly legendHoverEndEvent = output<CustomLegendItem>();\n\n protected legendIconClick(legend: CustomLegendItem): void {\n legend.selected = !legend.selected;\n this.legendIconClickEvent.emit(legend);\n }\n\n protected legendClick(legend: CustomLegendItem): void {\n legend.selected = !legend.selected;\n this.legendClickEvent.emit(legend);\n }\n}\n","@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=\"left-legend-circle 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 tooltip-center-top\" 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 tooltip-center-top\" 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","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-custom-legend.component';\nexport * from './si-custom-legend.interface';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@siemens/charts-ng",
3
3
  "description": "Element Charts library.",
4
- "version": "51.4.0",
4
+ "version": "51.5.0",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -47,7 +47,12 @@ declare class SiChartCartesianComponent extends SiChartBaseComponent implements
47
47
  readonly yAxis: _angular_core.InputSignal<ChartYAxis | ChartYAxis[] | undefined>;
48
48
  /** The x axis in cartesian(rectangular) coordinate. */
49
49
  readonly xAxis: _angular_core.InputSignal<ChartXAxis | ChartXAxis[] | undefined>;
50
- /** The content formatter of tooltip's floating layer which supports string template and callback function (see (see {@link https://echarts.apache.org/en/option.html#tooltip.formatter }). */
50
+ /**
51
+ * The content formatter of the tooltip's floating layer, supporting string templates and callbacks.
52
+ * Custom formatters are responsible for escaping untrusted values with `echarts.format.encodeHTML`
53
+ * before inserting them into HTML. Built-in formatters display names and values as plain text.
54
+ * See {@link https://echarts.apache.org/en/option.html#tooltip.formatter}.
55
+ */
51
56
  readonly tooltipFormatter: _angular_core.InputSignal<string | echarts.TooltipComponentFormatterCallback<echarts.TooltipComponentFormatterCallbackParams> | undefined>;
52
57
  /**
53
58
  * Used to display the chart as a stacked one.