@c8y/ngx-components 1023.0.0 → 1023.4.1

package/fesm2022/c8y-ngx-components-echart.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, SecurityContext, Input, Component, EventEmitter, inject, Output, ViewChild } from '@angular/core';
+import { Injectable, Input, Component, EventEmitter, inject, Output, ViewChild } from '@angular/core';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { from, merge, interval, BehaviorSubject, of, lastValueFrom, defer, forkJoin } from 'rxjs';
 import { mergeMap, map, tap, throttleTime, buffer, switchMap } from 'rxjs/operators';
@@ -13,7 +13,6 @@ import * as i4 from '@c8y/ngx-components/alarms';
 import { AlarmsModule, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe } from '@c8y/ngx-components/alarms';
 import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import * as i5 from '@ngx-translate/core';
-import * as i7 from '@angular/platform-browser';
 import * as i1$1 from '@angular/common';
 import { NgIf, NgForOf, CommonModule as CommonModule$1 } from '@angular/common';
 import * as i3$1 from 'ngx-echarts';
@@ -367,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const INDEX_HTML = '/index.html';
 class EchartsOptionsService {
-    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router, sanitizer) {
+    constructor(datePipe, yAxisService, chartTypesService, severityIconPipe, severityLabelPipe, translate, router) {
         this.datePipe = datePipe;
         this.yAxisService = yAxisService;
         this.chartTypesService = chartTypesService;
@@ -375,7 +374,6 @@ class EchartsOptionsService {
         this.severityLabelPipe = severityLabelPipe;
         this.translate = translate;
         this.router = router;
-        this.sanitizer = sanitizer;
         this.TOOLTIP_WIDTH = 300;
     }
     getChartOptions(datapointsWithValues, timeRange, showSplitLines, events, alarms, displayOptions, selectedTimeRange, aggregatedDatapoint, sliderZoomUsed = false) {
@@ -985,11 +983,11 @@ class EchartsOptionsService {
      */
     processEvent(event, XAxisValue) {
         let value = `<ul class="list-unstyled small separator-top text-default">`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${this.translate.instant(gettext('Event type'))}</label><code class="m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px; -webkit-line-clamp: 2;" title="${echarts.format.encodeHTML(event.type)}">${echarts.format.encodeHTML(event.type)}</code></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${this.translate.instant(gettext('Event text'))}</label><span class="m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px; -webkit-line-clamp: 5;" title="${echarts.format.encodeHTML(event.text)}">${echarts.format.encodeHTML(event.text)}</span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${this.translate.instant(gettext('Event time'))}</label><span class="m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(XAxisValue))}<span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event type')))}</label><code class="m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px; -webkit-line-clamp: 2;" title="${echarts.format.encodeHTML(event.type)}">${echarts.format.encodeHTML(event.type)}</code></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event text')))}</label><span class="m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px; -webkit-line-clamp: 5;" title="${echarts.format.encodeHTML(event.text)}">${echarts.format.encodeHTML(event.text)}</span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Event time')))}</label><span class="m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(XAxisValue))}<span></li>`;
         value += `</ul>`;
-        return this.sanitizer.sanitize(SecurityContext.HTML, value);
+        return value;
     }
     /**
      * This method is used to process the alarm tooltip.
@@ -998,21 +996,21 @@ class EchartsOptionsService {
      */
     async processAlarm(alarm) {
         let value = `<ul class="list-unstyled small separator-top text-default m-0">`;
-        value += `<li class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Alarm severity'))}</label>`;
+        value += `<li class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm severity')))}</label>`;
         value += `<span class="small d-inline-flex a-i-center gap-4 m-l-auto"><i class="stroked-icon icon-14 status dlt-c8y-icon-${echarts.format.encodeHTML(this.severityIconPipe.transform(alarm.severity))} ${alarm.severity.toLowerCase()}" > </i> ${this.severityLabelPipe.transform(alarm.severity)} </span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Alarm type'))}</label><span class="small m-l-auto"><code>${echarts.format.encodeHTML(alarm.type)}</code></span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Message'))}</label><span class="small m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px;" title="${echarts.format.encodeHTML(this.translate.instant(alarm.text))}">${echarts.format.encodeHTML(this.translate.instant(alarm.text))}</span></li>`;
-        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Last updated'))}</label><span class="small m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(alarm['lastUpdated']))}</span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm type')))}</label><span class="small m-l-auto"><code>${echarts.format.encodeHTML(alarm.type)}</code></span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Message')))}</label><span class="small m-l-auto" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 200px;" title="${echarts.format.encodeHTML(this.translate.instant(alarm.text))}">${echarts.format.encodeHTML(this.translate.instant(alarm.text))}</span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Last updated')))}</label><span class="small m-l-auto">${echarts.format.encodeHTML(this.datePipe.transform(alarm['lastUpdated']))}</span></li>`;
         const exists = await this.alarmRouteExists();
         if (exists) {
             const currentUrl = window.location.href;
             const baseUrlIndex = currentUrl.indexOf(INDEX_HTML);
             const baseUrl = currentUrl.substring(0, baseUrlIndex + INDEX_HTML.length);
-            value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Open details'))}</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}/details?showCleared=true">${this.translate.instant(gettext('Alarm details'))}</a></span></li>`;
+            value += `<li class="p-t-4 p-b-4 d-flex separator-bottom text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Open details')))}</label><span class="small m-l-auto"><a href="${baseUrl}#/alarms/${alarm.id}/details?showCleared=true">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm details')))}</a></span></li>`;
         }
-        value += `<li class="p-t-4 p-b-4 d-flex text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${this.translate.instant(gettext('Alarm count'))}</label><span class="small m-l-auto"><span class="badge badge-info">${alarm.count}</span></span></li>`;
+        value += `<li class="p-t-4 p-b-4 d-flex text-no-wrap"><label class="text-label-small m-b-0 m-r-8">${echarts.format.encodeHTML(this.translate.instant(gettext('Alarm count')))}</label><span class="small m-l-auto"><span class="badge badge-info">${alarm.count}</span></span></li>`;
         value += `</ul>`;
-        return this.sanitizer.sanitize(SecurityContext.HTML, value);
+        return value;
     }
     async alarmRouteExists() {
         const exists = this.router.config.some(route => {
@@ -1407,12 +1405,12 @@ class EchartsOptionsService {
             return acc;
         }, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.TranslateService }, { token: i6.Router }, { token: i7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EchartsOptionsService, deps: [{ token: i1.DatePipe }, { token: YAxisService }, { token: ChartTypesService }, { token: i4.AlarmSeverityToIconPipe }, { token: i4.AlarmSeverityToLabelPipe }, { token: i5.TranslateService }, { token: i6.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EchartsOptionsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: EchartsOptionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.TranslateService }, { type: i6.Router }, { type: i7.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1.DatePipe }, { type: YAxisService }, { type: ChartTypesService }, { type: i4.AlarmSeverityToIconPipe }, { type: i4.AlarmSeverityToLabelPipe }, { type: i5.TranslateService }, { type: i6.Router }] });
 
 class ChartRealtimeService {
     constructor(measurementRealtime, alarmRealtimeService, eventRealtimeService, echartsOptionsService) {