@c8y/ngx-components 1024.18.9 → 1024.18.13

package/fesm2022/c8y-ngx-components-file-preview.mjs

@@ -133,6 +133,9 @@ class FilePreviewComponent {
             console.warn('Provided Managed object is not binary');
             return 'unsupported';
         }
+        if (!mo.contentType) {
+            return 'unsupported';
+        }
         if (mo.contentType.startsWith('image/')) {
             return 'image';
         }

package/fesm2022/c8y-ngx-components-file-preview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-file-preview.mjs","sources":["../../file-preview/file-preview-product-experience.constants.ts","../../file-preview/download-emitter.token.ts","../../file-preview/file-preview.component.ts","../../file-preview/file-preview.component.html","../../file-preview/file-preview.module.ts","../../file-preview/c8y-ngx-components-file-preview.ts"],"sourcesContent":["export const PRODUCT_EXPERIENCE_FILE_PREVIEW = {\n  EVENTS: {\n    FILE_PREVIEW: 'filePreview'\n  },\n  COMPONENTS: {\n    FILE_PREVIEW_COMPONENT: 'file-preview'\n  },\n  ACTIONS: {\n    OPEN_PREVIEW: 'openPreview'\n  }\n} as const;\n","import { EventEmitter, InjectionToken } from '@angular/core';\n\n/**\n * Provides InjectionToken used in FilePreviewModule. This token is used to inject EventEmitter instance, that is\n * shared among all instances of FilePreviewComponent. These components communicate between each other using this\n * emitter, which enables them to clear downloaded files from memory, if other instance of FilePreviewComponent\n * started downloading different file. Value emitted by this EventEmitter is ID of downloaded file.\n */\nexport const DOWNLOAD_EMITTER = new InjectionToken<EventEmitter<string>>('downloadEmitter');\n","import {\n  Component,\n  computed,\n  EventEmitter,\n  Inject,\n  input,\n  OnDestroy,\n  TemplateRef,\n  ChangeDetectionStrategy\n} from '@angular/core';\nimport { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';\nimport { IFetchResponse, IManagedObjectBinary } from '@c8y/client';\nimport { DomSanitizer, SafeUrl } from '@angular/platform-browser';\nimport { first, takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  FilesService,\n  IFetchWithProgress,\n  GainsightService,\n  IconDirective,\n  ModalComponent,\n  LoadingComponent,\n  C8yTranslatePipe,\n  BytesPipe\n} from '@c8y/ngx-components';\nimport { PRODUCT_EXPERIENCE_FILE_PREVIEW } from './file-preview-product-experience.constants';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\n\n/**\n * A component which shows a button that opens a modal with the preview of a binary managed object.\n * This component requires CSP 'blob:' rule for img-src and media-src to be set.\n *\n * ```html\n * <c8y-file-preview [mo]=\"managedObject\">\n *     <button customButton>Preview</button>\n * </c8y-file-preview>\n * ```\n * If no custom button provided, the component will use the default search icon button instead.\n *\n */\n@Component({\n  selector: 'c8y-file-preview',\n  templateUrl: './file-preview.component.html',\n  imports: [IconDirective, ModalComponent, LoadingComponent, C8yTranslatePipe, BytesPipe],\n  changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class FilePreviewComponent implements OnDestroy {\n  mo = input.required<IManagedObjectBinary>();\n  downloadFn = input<() => Promise<IFetchResponse>>();\n\n  contentType = computed(() => this.resolveContentType(this.mo()));\n  progress: IFetchWithProgress = {\n    totalBytes: 0,\n    bufferedBytes: 0,\n    percentage: 0,\n    bytesPerSecond: 0\n  };\n\n  dataUrl: string;\n  safeDataUrl: SafeUrl;\n  BUFFERING_STATUS_TEXT = gettext(\n    '{{speed}}/s - {{bufferedBytes}} of {{totalBytes}} buffered ({{percentage}}%)'\n  );\n\n  private destroy$: Subject<any> = new Subject();\n\n  constructor(\n    @Inject(DOWNLOAD_EMITTER) private downloadEmitter: EventEmitter<string>,\n    public modalRef: BsModalRef,\n    private modalService: BsModalService,\n    private sanitizer: DomSanitizer,\n    private filesService: FilesService,\n    private alertService: AlertService,\n    private gainsightService: GainsightService\n  ) {\n    downloadEmitter.pipe(takeUntil(this.destroy$)).subscribe(id => {\n      if (this.dataUrl && this.mo().id !== id) {\n        this.removeDownloadedFile();\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.removeDownloadedFile();\n    this.destroy$.next(true);\n    this.destroy$.complete();\n  }\n\n  async openModal(template: TemplateRef<any>) {\n    this.modalRef = this.modalService.show(template, {\n      ariaDescribedby: 'modal-body',\n      ariaLabelledBy: 'modal-title',\n      ignoreBackdropClick: true\n    });\n\n    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_FILE_PREVIEW.EVENTS.FILE_PREVIEW, {\n      component: PRODUCT_EXPERIENCE_FILE_PREVIEW.COMPONENTS.FILE_PREVIEW_COMPONENT,\n      action: PRODUCT_EXPERIENCE_FILE_PREVIEW.ACTIONS.OPEN_PREVIEW\n    });\n\n    if (this.dataUrl) {\n      return;\n    }\n\n    this.downloadEmitter.emit(this.mo().id);\n\n    if (this.downloadFn()) {\n      await this.fetchWithDownloadFn();\n      return;\n    }\n\n    const subscription = this.filesService\n      .fetchFileWithProgress$(this.mo())\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(\n        progress => {\n          this.progress = progress;\n          if (this.progress.blob) {\n            this.dataUrl = URL.createObjectURL(progress.blob);\n            this.safeDataUrl = this.sanitizer.bypassSecurityTrustUrl(this.dataUrl);\n          }\n        },\n        e => {\n          this.modalRef.hide();\n          this.alertService.addServerFailure(e);\n        }\n      );\n\n    this.modalRef.onHide.pipe(first(), takeUntil(this.destroy$)).subscribe(() => {\n      subscription.unsubscribe();\n    });\n  }\n\n  private async fetchWithDownloadFn(): Promise<void> {\n    try {\n      const fn = this.downloadFn();\n      if (!fn) {\n        return;\n      }\n      const response = await fn();\n      const blob = await response.blob();\n      this.dataUrl = URL.createObjectURL(blob);\n      this.safeDataUrl = this.sanitizer.bypassSecurityTrustUrl(this.dataUrl);\n    } catch (e) {\n      this.modalRef.hide();\n      this.alertService.addServerFailure(e);\n    }\n  }\n\n  private removeDownloadedFile(): void {\n    URL.revokeObjectURL(this.dataUrl);\n    delete this.dataUrl;\n    delete this.safeDataUrl;\n  }\n\n  private resolveContentType(\n    mo: IManagedObjectBinary\n  ): 'image' | 'video' | 'text' | 'json' | 'unsupported' {\n    if (!mo || !mo.hasOwnProperty('c8y_IsBinary')) {\n      // eslint-disable-next-line no-console\n      console.warn('Provided Managed object is not binary');\n      return 'unsupported';\n    }\n\n    if (mo.contentType.startsWith('image/')) {\n      return 'image';\n    } else if (mo.contentType.startsWith('video/')) {\n      return 'video';\n    } else if (mo.contentType.startsWith('text/')) {\n      // @TODO: Implement in future\n      return 'unsupported';\n    } else if (mo.contentType.startsWith('application/json')) {\n      // @TODO: Implement in future\n      return 'unsupported';\n    }\n    return 'unsupported';\n  }\n}\n","@if (contentType() !== 'unsupported') {\n  <div\n    class=\"d-inline-block\"\n    (click)=\"openModal(modalTemplate)\"\n  >\n    <div #customButtonRef>\n      <ng-content select=\"[customButton]\"></ng-content>\n    </div>\n\n    @if (!customButtonRef.children.length) {\n      <button\n        class=\"btn btn-default btn-icon\"\n        [title]=\"'Preview file' | translate\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"search\"></i>\n      </button>\n    }\n  </div>\n}\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    class=\"text-break-word\"\n    [title]=\"mo().name\"\n    [customFooter]=\"false\"\n    [flushBody]=\"true\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n  >\n    @if (!dataUrl) {\n      <div class=\"text-center d-block\">\n        <c8y-loading\n          layout=\"application\"\n          [progress]=\"progress.percentage\"\n        ></c8y-loading>\n        {{\n          BUFFERING_STATUS_TEXT\n            | translate\n              : {\n                  totalBytes: progress.totalBytes | bytes,\n                  bufferedBytes: progress.bufferedBytes | bytes,\n                  percentage: progress.percentage,\n                  speed: progress.bytesPerSecond | bytes\n                }\n        }}\n      </div>\n    }\n\n    @if (dataUrl) {\n      <div id=\"modal-body\">\n        @switch (contentType()) {\n          @case ('image') {\n            <img\n              class=\"fit-w\"\n              alt=\"safeDataUrl\"\n              [src]=\"safeDataUrl\"\n            />\n          }\n          @case ('video') {\n            <video\n              class=\"fit-w\"\n              controls\n              autoplay\n            >\n              <source [src]=\"safeDataUrl\" />\n              {{ 'Your browser does not support the video tag.' | translate }}\n            </video>\n          }\n          @case ('text') {\n            <!--        @TODO: Implement text viewer-->\n            text\n          }\n          @case ('json') {\n            <!--        @TODO: Implement json viewer-->\n            json\n          }\n        }\n      </div>\n    }\n  </c8y-modal>\n</ng-template>\n","import { EventEmitter, NgModule } from '@angular/core';\nimport { CoreModule, CommonModule } from '@c8y/ngx-components';\nimport { FilePreviewComponent } from './file-preview.component';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\n\nconst downloadEmitter = new EventEmitter<string>();\n\n@NgModule({\n  imports: [CoreModule, CommonModule, FilePreviewComponent],\n  exports: [FilePreviewComponent],\n  providers: [\n    {\n      provide: DOWNLOAD_EMITTER,\n      useValue: downloadEmitter\n    }\n  ]\n})\nexport class FilePreviewModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-file-preview.mjs","sources":["../../file-preview/file-preview-product-experience.constants.ts","../../file-preview/download-emitter.token.ts","../../file-preview/file-preview.component.ts","../../file-preview/file-preview.component.html","../../file-preview/file-preview.module.ts","../../file-preview/c8y-ngx-components-file-preview.ts"],"sourcesContent":["export const PRODUCT_EXPERIENCE_FILE_PREVIEW = {\n  EVENTS: {\n    FILE_PREVIEW: 'filePreview'\n  },\n  COMPONENTS: {\n    FILE_PREVIEW_COMPONENT: 'file-preview'\n  },\n  ACTIONS: {\n    OPEN_PREVIEW: 'openPreview'\n  }\n} as const;\n","import { EventEmitter, InjectionToken } from '@angular/core';\n\n/**\n * Provides InjectionToken used in FilePreviewModule. This token is used to inject EventEmitter instance, that is\n * shared among all instances of FilePreviewComponent. These components communicate between each other using this\n * emitter, which enables them to clear downloaded files from memory, if other instance of FilePreviewComponent\n * started downloading different file. Value emitted by this EventEmitter is ID of downloaded file.\n */\nexport const DOWNLOAD_EMITTER = new InjectionToken<EventEmitter<string>>('downloadEmitter');\n","import {\n  Component,\n  computed,\n  EventEmitter,\n  Inject,\n  input,\n  OnDestroy,\n  TemplateRef,\n  ChangeDetectionStrategy\n} from '@angular/core';\nimport { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';\nimport { IFetchResponse, IManagedObjectBinary } from '@c8y/client';\nimport { DomSanitizer, SafeUrl } from '@angular/platform-browser';\nimport { first, takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  FilesService,\n  IFetchWithProgress,\n  GainsightService,\n  IconDirective,\n  ModalComponent,\n  LoadingComponent,\n  C8yTranslatePipe,\n  BytesPipe\n} from '@c8y/ngx-components';\nimport { PRODUCT_EXPERIENCE_FILE_PREVIEW } from './file-preview-product-experience.constants';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\n\n/**\n * A component which shows a button that opens a modal with the preview of a binary managed object.\n * This component requires CSP 'blob:' rule for img-src and media-src to be set.\n *\n * ```html\n * <c8y-file-preview [mo]=\"managedObject\">\n *     <button customButton>Preview</button>\n * </c8y-file-preview>\n * ```\n * If no custom button provided, the component will use the default search icon button instead.\n *\n */\n@Component({\n  selector: 'c8y-file-preview',\n  templateUrl: './file-preview.component.html',\n  imports: [IconDirective, ModalComponent, LoadingComponent, C8yTranslatePipe, BytesPipe],\n  changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class FilePreviewComponent implements OnDestroy {\n  mo = input.required<IManagedObjectBinary>();\n  downloadFn = input<() => Promise<IFetchResponse>>();\n\n  contentType = computed(() => this.resolveContentType(this.mo()));\n  progress: IFetchWithProgress = {\n    totalBytes: 0,\n    bufferedBytes: 0,\n    percentage: 0,\n    bytesPerSecond: 0\n  };\n\n  dataUrl: string;\n  safeDataUrl: SafeUrl;\n  BUFFERING_STATUS_TEXT = gettext(\n    '{{speed}}/s - {{bufferedBytes}} of {{totalBytes}} buffered ({{percentage}}%)'\n  );\n\n  private destroy$: Subject<any> = new Subject();\n\n  constructor(\n    @Inject(DOWNLOAD_EMITTER) private downloadEmitter: EventEmitter<string>,\n    public modalRef: BsModalRef,\n    private modalService: BsModalService,\n    private sanitizer: DomSanitizer,\n    private filesService: FilesService,\n    private alertService: AlertService,\n    private gainsightService: GainsightService\n  ) {\n    downloadEmitter.pipe(takeUntil(this.destroy$)).subscribe(id => {\n      if (this.dataUrl && this.mo().id !== id) {\n        this.removeDownloadedFile();\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.removeDownloadedFile();\n    this.destroy$.next(true);\n    this.destroy$.complete();\n  }\n\n  async openModal(template: TemplateRef<any>) {\n    this.modalRef = this.modalService.show(template, {\n      ariaDescribedby: 'modal-body',\n      ariaLabelledBy: 'modal-title',\n      ignoreBackdropClick: true\n    });\n\n    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_FILE_PREVIEW.EVENTS.FILE_PREVIEW, {\n      component: PRODUCT_EXPERIENCE_FILE_PREVIEW.COMPONENTS.FILE_PREVIEW_COMPONENT,\n      action: PRODUCT_EXPERIENCE_FILE_PREVIEW.ACTIONS.OPEN_PREVIEW\n    });\n\n    if (this.dataUrl) {\n      return;\n    }\n\n    this.downloadEmitter.emit(this.mo().id);\n\n    if (this.downloadFn()) {\n      await this.fetchWithDownloadFn();\n      return;\n    }\n\n    const subscription = this.filesService\n      .fetchFileWithProgress$(this.mo())\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(\n        progress => {\n          this.progress = progress;\n          if (this.progress.blob) {\n            this.dataUrl = URL.createObjectURL(progress.blob);\n            this.safeDataUrl = this.sanitizer.bypassSecurityTrustUrl(this.dataUrl);\n          }\n        },\n        e => {\n          this.modalRef.hide();\n          this.alertService.addServerFailure(e);\n        }\n      );\n\n    this.modalRef.onHide.pipe(first(), takeUntil(this.destroy$)).subscribe(() => {\n      subscription.unsubscribe();\n    });\n  }\n\n  private async fetchWithDownloadFn(): Promise<void> {\n    try {\n      const fn = this.downloadFn();\n      if (!fn) {\n        return;\n      }\n      const response = await fn();\n      const blob = await response.blob();\n      this.dataUrl = URL.createObjectURL(blob);\n      this.safeDataUrl = this.sanitizer.bypassSecurityTrustUrl(this.dataUrl);\n    } catch (e) {\n      this.modalRef.hide();\n      this.alertService.addServerFailure(e);\n    }\n  }\n\n  private removeDownloadedFile(): void {\n    URL.revokeObjectURL(this.dataUrl);\n    delete this.dataUrl;\n    delete this.safeDataUrl;\n  }\n\n  private resolveContentType(\n    mo: IManagedObjectBinary\n  ): 'image' | 'video' | 'text' | 'json' | 'unsupported' {\n    if (!mo || !mo.hasOwnProperty('c8y_IsBinary')) {\n      // eslint-disable-next-line no-console\n      console.warn('Provided Managed object is not binary');\n      return 'unsupported';\n    }\n\n    if (!mo.contentType) {\n      return 'unsupported';\n    }\n\n    if (mo.contentType.startsWith('image/')) {\n      return 'image';\n    } else if (mo.contentType.startsWith('video/')) {\n      return 'video';\n    } else if (mo.contentType.startsWith('text/')) {\n      // @TODO: Implement in future\n      return 'unsupported';\n    } else if (mo.contentType.startsWith('application/json')) {\n      // @TODO: Implement in future\n      return 'unsupported';\n    }\n    return 'unsupported';\n  }\n}\n","@if (contentType() !== 'unsupported') {\n  <div\n    class=\"d-inline-block\"\n    (click)=\"openModal(modalTemplate)\"\n  >\n    <div #customButtonRef>\n      <ng-content select=\"[customButton]\"></ng-content>\n    </div>\n\n    @if (!customButtonRef.children.length) {\n      <button\n        class=\"btn btn-default btn-icon\"\n        [title]=\"'Preview file' | translate\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"search\"></i>\n      </button>\n    }\n  </div>\n}\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    class=\"text-break-word\"\n    [title]=\"mo().name\"\n    [customFooter]=\"false\"\n    [flushBody]=\"true\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n  >\n    @if (!dataUrl) {\n      <div class=\"text-center d-block\">\n        <c8y-loading\n          layout=\"application\"\n          [progress]=\"progress.percentage\"\n        ></c8y-loading>\n        {{\n          BUFFERING_STATUS_TEXT\n            | translate\n              : {\n                  totalBytes: progress.totalBytes | bytes,\n                  bufferedBytes: progress.bufferedBytes | bytes,\n                  percentage: progress.percentage,\n                  speed: progress.bytesPerSecond | bytes\n                }\n        }}\n      </div>\n    }\n\n    @if (dataUrl) {\n      <div id=\"modal-body\">\n        @switch (contentType()) {\n          @case ('image') {\n            <img\n              class=\"fit-w\"\n              alt=\"safeDataUrl\"\n              [src]=\"safeDataUrl\"\n            />\n          }\n          @case ('video') {\n            <video\n              class=\"fit-w\"\n              controls\n              autoplay\n            >\n              <source [src]=\"safeDataUrl\" />\n              {{ 'Your browser does not support the video tag.' | translate }}\n            </video>\n          }\n          @case ('text') {\n            <!--        @TODO: Implement text viewer-->\n            text\n          }\n          @case ('json') {\n            <!--        @TODO: Implement json viewer-->\n            json\n          }\n        }\n      </div>\n    }\n  </c8y-modal>\n</ng-template>\n","import { EventEmitter, NgModule } from '@angular/core';\nimport { CoreModule, CommonModule } from '@c8y/ngx-components';\nimport { FilePreviewComponent } from './file-preview.component';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\n\nconst downloadEmitter = new EventEmitter<string>();\n\n@NgModule({\n  imports: [CoreModule, CommonModule, FilePreviewComponent],\n  exports: [FilePreviewComponent],\n  providers: [\n    {\n      provide: DOWNLOAD_EMITTER,\n      useValue: downloadEmitter\n    }\n  ]\n})\nexport class FilePreviewModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs

@@ -273,11 +273,12 @@ class DatapointsGraphWidgetViewComponent {
     get config() {
         throw Error('"config" property should not be referenced in view component to avoid mutating data.');
     }
-    constructor(translate, dashboardContextComponent, widgetConfigMigrationService, widgetTimeContextDateRangeService, cdr) {
+    constructor(translate, dashboardContextComponent, widgetConfigMigrationService, widgetTimeContextDateRangeService, widgetTimeContextMediatorService, cdr) {
         this.translate = translate;
         this.dashboardContextComponent = dashboardContextComponent;
         this.widgetConfigMigrationService = widgetConfigMigrationService;
         this.widgetTimeContextDateRangeService = widgetTimeContextDateRangeService;
+        this.widgetTimeContextMediatorService = widgetTimeContextMediatorService;
         this.cdr = cdr;
         this.events = [];
         this.alarms = [];
@@ -389,6 +390,11 @@ class DatapointsGraphWidgetViewComponent {
         const { context, diff } = event;
         const { dateTimeContext } = context;
         const { dateFrom, dateTo, interval } = dateTimeContext;
+        // Captured before displayConfig is overwritten below, so the axis is only re-anchored
+        // when the time range genuinely changed. Switching the global context between live and
+        // history re-emits the range that is already applied; re-anchoring on such an echo
+        // resets the slider the user just dragged.
+        const previousDateTimeContext = this.displayConfig?.dateTimeContext;
         const isRealtimeEnabled = this.computeRealtimeFlag(context);
         if (this.displayConfig.displayMode !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
             const realtimeToggled = this.displayConfig?.realtime !== isRealtimeEnabled;
@@ -478,7 +484,8 @@ class DatapointsGraphWidgetViewComponent {
         };
         this.updateExportConfig();
         if (context.source === GLOBAL_CONTEXT_SOURCE.DASHBOARD &&
-            this.displayConfig.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+            this.displayConfig.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD &&
+            this.hasTimeRangeChanged(previousDateTimeContext, dateTimeContext)) {
             this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);
         }
     }
@@ -537,6 +544,11 @@ class DatapointsGraphWidgetViewComponent {
                 dateTimeContext: structuredClone(dateTimeContext),
                 isAutoRefreshEnabled: false
             });
+            // A zoom on a widget that is not linked to the global context never travels through
+            // the global context, so no other widget will consume — and thereby clear — this
+            // application-wide flag. Leaving it set would make the next global context change
+            // keep a stale axis extent in every widget on the dashboard.
+            this.widgetTimeContextMediatorService.isSliderZoomUpdate.set(false);
         }
     }
     /**
@@ -920,11 +932,20 @@ class DatapointsGraphWidgetViewComponent {
         this.loadedDatapoints = this.loadedDatapoints.filter(dp => dp.__active);
         this.loadedAlarmsOrEvents = this.loadedAlarmsOrEvents.filter(aOrE => aOrE.__active && !aOrE.__hidden);
     }
+    /** Compares two time ranges by instant, tolerating `Date` and ISO string representations. */
+    hasTimeRangeChanged(previous, next) {
+        if (!previous) {
+            return true;
+        }
+        const instant = (value) => value === undefined ? NaN : new Date(value).valueOf();
+        return (instant(previous.dateFrom) !== instant(next.dateFrom) ||
+            instant(previous.dateTo) !== instant(next.dateTo));
+    }
     computeRealtimeFlag(source) {
         return source?.refreshOption === REFRESH_OPTION.LIVE && !!source?.isAutoRefreshEnabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i1$1.TranslateService }, { token: i2$1.ContextDashboardComponent, optional: true }, { token: i3$1.WidgetConfigMigrationService }, { token: i1.WidgetTimeContextDateRangeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  ></c8y-local-controls>\n}\n\n<div\n  class=\"p-l-16 p-r-16\"\n  style=\"min-height: 34px\"\n>\n  <div class=\"d-flex gap-16 a-i-center\">\n    @if (hasAtLeastOneAlarmActive) {\n      <c8y-alarms-filter\n        class=\"d-contents form-group-sm min-width-0\"\n        (onFilterApplied)=\"filterSeverity($event)\"\n      ></c8y-alarms-filter>\n    }\n    @if (displayConfig?.datapoints.length > 0) {\n      <div class=\"d-flex a-i-center min-width-0\">\n        @if (\n          displayConfig.dataPointLegendDisplay === 'dropdown' ||\n          (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n        ) {\n          <c8y-select\n            class=\"min-width-0 c8y-select-v2--sm\"\n            aria-label=\"{{ 'Select data points, alarms or events' | translate }}\"\n            [placeholder]=\"'Select data points, alarms or events' | translate\"\n            [multi]=\"true\"\n            [filterItems]=\"true\"\n            [(ngModel)]=\"selectedItems\"\n            (onSelect)=\"onItemSelected($event)\"\n            (onDeselect)=\"onItemDeselected($event)\"\n          >\n            @for (item of selectableItems; track item.value) {\n              @let isDuplicate = isDuplicateDropdownItem(item);\n              <div\n                class=\"d-flex a-i-center gap-4\"\n                [style.opacity]=\"isDuplicate ? '0.5' : null\"\n                *c8ySelectItem=\"item.value; label: item.label\"\n              >\n                @if (\n                  !hasAtLeastOneDatapointActive &&\n                  item.value.type === 'DATAPOINT' &&\n                  (!item.value.renderTypeFn\n                    ? item.value.original.__active\n                    : isRenderTypeFunctionVisible(\n                        $any(item.value.original),\n                        item.value.renderTypeFn\n                      ))\n                ) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                    container=\"body\"\n                    data-cy=\"datapoint-warning-icon\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (isDuplicate) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"warning2\"\n                    [tooltip]=\"duplicateAggrWarning\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (item.value.type === 'DATAPOINT') {\n                  @let fnColor =\n                    item.value.renderTypeFn\n                      ? $any(item.value.original).renderTypeColors?.[item.value.renderTypeFn] ||\n                        item.value.original.color\n                      : item.value.original.color;\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"fnColor\"\n                  ></span>\n                }\n                @if (item.value.type === 'ALARM') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"bell\"\n                    ></i>\n                  </span>\n                }\n                @if (item.value.type === 'EVENT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"online1\"\n                    ></i>\n                  </span>\n                }\n                <span class=\"text-truncate d-col\">\n                  <small class=\"text-truncate\">{{ item.label }}</small>\n                  <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n                </span>\n              </div>\n            }\n            <span\n              class=\"tag tag--info chip\"\n              [style.opacity]=\"isDuplicateDropdownItem(selectedItem) ? '0.6' : null\"\n              title=\"{{ selectedItem.label }}\"\n              *c8ySelectedItems=\"let selectedItem\"\n            >\n              @let isDuplicateChip = isDuplicateDropdownItem(selectedItem);\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.label }}\"\n                type=\"button\"\n                (click)=\"\n                  $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n                \"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              @if (isLastActiveDatapoint(selectedItem)) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"exclamation-triangle\"\n                  [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                  container=\"body\"\n                  data-cy=\"datapoint-warning-icon\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (isDuplicateChip) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"warning2\"\n                  [tooltip]=\"duplicateAggrWarning\"\n                  container=\"body\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (selectedItem.value.type === 'DATAPOINT') {\n                @let fnColor =\n                  selectedItem.value.renderTypeFn\n                    ? $any(selectedItem.value.original).renderTypeColors?.[\n                        selectedItem.value.renderTypeFn\n                      ] || selectedItem.value.original.color\n                    : selectedItem.value?.original.color || '';\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"fnColor\"\n                ></span>\n              }\n              @if (selectedItem.value?.type === 'ALARM') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"bell\"\n                  ></i>\n                </span>\n              }\n              @if (selectedItem.value?.type === 'EVENT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [ngStyle]=\"{\n                    'background-color': selectedItem.value?.original.color || ''\n                  }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"online1\"\n                  ></i>\n                </span>\n              }\n            </span>\n          </c8y-select>\n        } @else {\n          <div class=\"inner-scroll\">\n            <div class=\"p-t-4 d-flex a-i-start gap-8\">\n              @for (datapoint of displayConfig.datapoints; track datapoint) {\n                @let rtColors = getAggregationFunctionColors(datapoint);\n                @let dpId = getDpId(datapoint);\n                @if (datapoint.retrievalError) {\n                  <i\n                    class=\"text-warning m-l-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'Data point no longer exists.' | translate\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                } @else if (\n                  rtColors.length > 0 &&\n                  datapointsWithDuplicateAggr.has(dpId) &&\n                  displayConfig?.aggregation\n                ) {\n                  <!-- All aggregation functions return the same value \u2014 collapse to a single muted pill -->\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    [class.active]=\"datapoint.__active\"\n                    style=\"opacity: 0.5\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                  >\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }}\"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [style.color]=\"datapoint.color\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [class.text-muted]=\"!datapoint.__active\"\n                      >\n                        <span class=\"text-truncate text-bold\">{{ datapoint.label }}</span>\n                        <small class=\"text-muted text-10\">{{ datapoint.__target.name }}</small>\n                      </span>\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"duplicateAggrWarning\"\n                        container=\"body\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    </div>\n                  </div>\n                } @else if (rtColors.length > 0) {\n                  @for (entry of rtColors; track entry.renderType) {\n                    @let isVisible = isRenderTypeFunctionVisible(datapoint, entry.renderType);\n                    <div\n                      class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                      [class.active]=\"isVisible\"\n                      title=\"{{ datapoint.label }} [{{ entry.renderType }}] - {{\n                        datapoint.__target.name\n                      }}\"\n                    >\n                      @if (!hasAtLeastOneDatapointActive && isVisible) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                          container=\"body\"\n                          data-cy=\"datapoint-warning-icon\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                      <button\n                        class=\"c8y-datapoint-pill__btn\"\n                        title=\"{{\n                          (isVisible ? hideDatapointLabel : showDatapointLabel) | translate\n                        }}\"\n                        type=\"button\"\n                        data-cy=\"datapoint-toggle-visibility-btn\"\n                        (click)=\"toggleRenderTypeFunction(datapoint, entry.renderType, !isVisible)\"\n                      >\n                        <i\n                          class=\"icon-14\"\n                          [c8yIcon]=\"isVisible ? 'eye text-primary' : 'eye-slash text-muted'\"\n                        ></i>\n                      </button>\n                      <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                        <i\n                          class=\"m-r-4 icon-14\"\n                          c8yIcon=\"circle\"\n                          [style.color]=\"entry.color\"\n                        ></i>\n                        <span\n                          class=\"text-truncate\"\n                          [class.text-muted]=\"!isVisible\"\n                        >\n                          <span class=\"text-truncate text-bold\">\n                            {{ datapoint.label }} [{{ entry.renderType }}]\n                          </span>\n                          <small class=\"text-muted text-10\">\n                            {{ datapoint.__target.name }}\n                          </small>\n                        </span>\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                    [ngClass]=\"{ active: datapoint.__active }\"\n                  >\n                    @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                        container=\"body\"\n                        data-cy=\"datapoint-warning-icon\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    }\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }} \"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [ngStyle]=\"{\n                          color: datapoint.color\n                        }\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n                      >\n                        <span class=\"text-truncate text-bold\">\n                          {{ datapoint.label }}\n                        </span>\n                        <small class=\"text-muted text-10\">\n                          {{ datapoint.__target.name }}\n                        </small>\n                      </span>\n                      @if (datapointsOutOfSync.get(datapoint)) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"\n                            'Measurements received for this data point may be out of sync.'\n                              | translate\n                          \"\n                          container=\"body\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n\n              @for (alarm of alarms; track alarm) {\n                <div\n                  class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n                  title=\"{{ alarm.filters.type }} \"\n                >\n                  @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n                    <i\n                      class=\"text-warning m-l-4\"\n                      c8yIcon=\"exclamation-triangle\"\n                      [tooltip]=\"\n                        'Alarm of this type is currently active and outside of the selected time range'\n                          | translate\n                      \"\n                      container=\"body\"\n                      [adaptivePosition]=\"false\"\n                    ></i>\n                  }\n                  <button\n                    class=\"c8y-alarm-pill__btn\"\n                    title=\"{{ alarm.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(alarm)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        alarm.__hidden || !alarm.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <button\n                    class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n                    (click)=\"toggleMarkedArea(alarm)\"\n                    [ngClass]=\"{\n                      active:\n                        !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n                    }\"\n                  >\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [style.background-color]=\"alarm.color\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"bell\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate\"\n                      [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n                    >\n                      <span class=\"text-truncate text-bold\">\n                        {{ alarm.label || alarm.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ alarm.__target.name }}\n                      </small>\n                    </span>\n                  </button>\n                </div>\n              }\n\n              @for (event of events; track event) {\n                <div\n                  class=\"c8y-event-pill pill--sm flex-no-shrink\"\n                  title=\"{{ event.filters.type }}\"\n                >\n                  <button\n                    class=\"c8y-event-pill__btn\"\n                    title=\"{{ event.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(event)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        event.__hidden || !event.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [ngStyle]=\"{ 'background-color': event.color }\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"online1\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate text-bold\"\n                      [ngClass]=\"{ 'text-muted': event.__hidden }\"\n                    >\n                      <span class=\"text-truncate\">\n                        {{ event.label || event.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ event.__target.name }}\n                      </small>\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-r-8\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"legendHelpTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (displayConfig !== null) {\n  <c8y-charts\n    #chart\n    [config]=\"displayConfig\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n    (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n    (finishLoading)=\"this.isLoading$.next($event)\"\n    (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    (duplicateAggregationsDetected)=\"onDuplicateAggregationsDetected($event)\"\n    (selectedChange)=\"onSelectedChange($event)\"\n  ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n\n<c8y-widget-action>\n  <c8y-datapoints-export-selector\n    [displayMode]=\"'icon-only'\"\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n  <button\n    class=\"btn btn-icon\"\n    [attr.aria-label]=\"'Save as image' | translate\"\n    tooltip=\"{{ 'Save as image' | translate }}\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"chartComponent.saveAsImage()\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      c8yIcon=\"image-file-checked\"\n    ></i>\n  </button>\n</c8y-widget-action>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "datapointBackInSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "selectedChange", "updateAggregatedSliderDatapoint", "duplicateAggregationsDetected"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i1.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "directive", type: i1.SelectItemDirective, selector: "[c8ySelectItem]", inputs: ["c8ySelectItem", "c8ySelectItemLabel"] }, { kind: "directive", type: i1.SelectedItemsDirective, selector: "[c8ySelectedItems]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i9.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "propagateAutoRefresh", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "propagateAutoRefresh", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WidgetActionWrapperComponent, selector: "c8y-widget-action" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i1$1.TranslateService }, { token: i2$1.ContextDashboardComponent, optional: true }, { token: i3$1.WidgetConfigMigrationService }, { token: i1.WidgetTimeContextDateRangeService }, { token: i1.WidgetTimeContextMediatorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (linkedChange)=\"isLinkedToGlobal.set($event)\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  ></c8y-local-controls>\n}\n\n<div\n  class=\"p-l-16 p-r-16\"\n  style=\"min-height: 34px\"\n>\n  <div class=\"d-flex gap-16 a-i-center\">\n    @if (hasAtLeastOneAlarmActive) {\n      <c8y-alarms-filter\n        class=\"d-contents form-group-sm min-width-0\"\n        (onFilterApplied)=\"filterSeverity($event)\"\n      ></c8y-alarms-filter>\n    }\n    @if (displayConfig?.datapoints.length > 0) {\n      <div class=\"d-flex a-i-center min-width-0\">\n        @if (\n          displayConfig.dataPointLegendDisplay === 'dropdown' ||\n          (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n        ) {\n          <c8y-select\n            class=\"min-width-0 c8y-select-v2--sm\"\n            aria-label=\"{{ 'Select data points, alarms or events' | translate }}\"\n            [placeholder]=\"'Select data points, alarms or events' | translate\"\n            [multi]=\"true\"\n            [filterItems]=\"true\"\n            [(ngModel)]=\"selectedItems\"\n            (onSelect)=\"onItemSelected($event)\"\n            (onDeselect)=\"onItemDeselected($event)\"\n          >\n            @for (item of selectableItems; track item.value) {\n              @let isDuplicate = isDuplicateDropdownItem(item);\n              <div\n                class=\"d-flex a-i-center gap-4\"\n                [style.opacity]=\"isDuplicate ? '0.5' : null\"\n                *c8ySelectItem=\"item.value; label: item.label\"\n              >\n                @if (\n                  !hasAtLeastOneDatapointActive &&\n                  item.value.type === 'DATAPOINT' &&\n                  (!item.value.renderTypeFn\n                    ? item.value.original.__active\n                    : isRenderTypeFunctionVisible(\n                        $any(item.value.original),\n                        item.value.renderTypeFn\n                      ))\n                ) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                    container=\"body\"\n                    data-cy=\"datapoint-warning-icon\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (isDuplicate) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"warning2\"\n                    [tooltip]=\"duplicateAggrWarning\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (item.value.type === 'DATAPOINT') {\n                  @let fnColor =\n                    item.value.renderTypeFn\n                      ? $any(item.value.original).renderTypeColors?.[item.value.renderTypeFn] ||\n                        item.value.original.color\n                      : item.value.original.color;\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"fnColor\"\n                  ></span>\n                }\n                @if (item.value.type === 'ALARM') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"bell\"\n                    ></i>\n                  </span>\n                }\n                @if (item.value.type === 'EVENT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"online1\"\n                    ></i>\n                  </span>\n                }\n                <span class=\"text-truncate d-col\">\n                  <small class=\"text-truncate\">{{ item.label }}</small>\n                  <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n                </span>\n              </div>\n            }\n            <span\n              class=\"tag tag--info chip\"\n              [style.opacity]=\"isDuplicateDropdownItem(selectedItem) ? '0.6' : null\"\n              title=\"{{ selectedItem.label }}\"\n              *c8ySelectedItems=\"let selectedItem\"\n            >\n              @let isDuplicateChip = isDuplicateDropdownItem(selectedItem);\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.label }}\"\n                type=\"button\"\n                (click)=\"\n                  $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n                \"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              @if (isLastActiveDatapoint(selectedItem)) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"exclamation-triangle\"\n                  [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                  container=\"body\"\n                  data-cy=\"datapoint-warning-icon\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (isDuplicateChip) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"warning2\"\n                  [tooltip]=\"duplicateAggrWarning\"\n                  container=\"body\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (selectedItem.value.type === 'DATAPOINT') {\n                @let fnColor =\n                  selectedItem.value.renderTypeFn\n                    ? $any(selectedItem.value.original).renderTypeColors?.[\n                        selectedItem.value.renderTypeFn\n                      ] || selectedItem.value.original.color\n                    : selectedItem.value?.original.color || '';\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"fnColor\"\n                ></span>\n              }\n              @if (selectedItem.value?.type === 'ALARM') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"bell\"\n                  ></i>\n                </span>\n              }\n              @if (selectedItem.value?.type === 'EVENT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [ngStyle]=\"{\n                    'background-color': selectedItem.value?.original.color || ''\n                  }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"online1\"\n                  ></i>\n                </span>\n              }\n            </span>\n          </c8y-select>\n        } @else {\n          <div class=\"inner-scroll\">\n            <div class=\"p-t-4 d-flex a-i-start gap-8\">\n              @for (datapoint of displayConfig.datapoints; track datapoint) {\n                @let rtColors = getAggregationFunctionColors(datapoint);\n                @let dpId = getDpId(datapoint);\n                @if (datapoint.retrievalError) {\n                  <i\n                    class=\"text-warning m-l-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'Data point no longer exists.' | translate\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                } @else if (\n                  rtColors.length > 0 &&\n                  datapointsWithDuplicateAggr.has(dpId) &&\n                  displayConfig?.aggregation\n                ) {\n                  <!-- All aggregation functions return the same value \u2014 collapse to a single muted pill -->\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    [class.active]=\"datapoint.__active\"\n                    style=\"opacity: 0.5\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                  >\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }}\"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [style.color]=\"datapoint.color\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [class.text-muted]=\"!datapoint.__active\"\n                      >\n                        <span class=\"text-truncate text-bold\">{{ datapoint.label }}</span>\n                        <small class=\"text-muted text-10\">{{ datapoint.__target.name }}</small>\n                      </span>\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"duplicateAggrWarning\"\n                        container=\"body\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    </div>\n                  </div>\n                } @else if (rtColors.length > 0) {\n                  @for (entry of rtColors; track entry.renderType) {\n                    @let isVisible = isRenderTypeFunctionVisible(datapoint, entry.renderType);\n                    <div\n                      class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                      [class.active]=\"isVisible\"\n                      title=\"{{ datapoint.label }} [{{ entry.renderType }}] - {{\n                        datapoint.__target.name\n                      }}\"\n                    >\n                      @if (!hasAtLeastOneDatapointActive && isVisible) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                          container=\"body\"\n                          data-cy=\"datapoint-warning-icon\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                      <button\n                        class=\"c8y-datapoint-pill__btn\"\n                        title=\"{{\n                          (isVisible ? hideDatapointLabel : showDatapointLabel) | translate\n                        }}\"\n                        type=\"button\"\n                        data-cy=\"datapoint-toggle-visibility-btn\"\n                        (click)=\"toggleRenderTypeFunction(datapoint, entry.renderType, !isVisible)\"\n                      >\n                        <i\n                          class=\"icon-14\"\n                          [c8yIcon]=\"isVisible ? 'eye text-primary' : 'eye-slash text-muted'\"\n                        ></i>\n                      </button>\n                      <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                        <i\n                          class=\"m-r-4 icon-14\"\n                          c8yIcon=\"circle\"\n                          [style.color]=\"entry.color\"\n                        ></i>\n                        <span\n                          class=\"text-truncate\"\n                          [class.text-muted]=\"!isVisible\"\n                        >\n                          <span class=\"text-truncate text-bold\">\n                            {{ datapoint.label }} [{{ entry.renderType }}]\n                          </span>\n                          <small class=\"text-muted text-10\">\n                            {{ datapoint.__target.name }}\n                          </small>\n                        </span>\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                    [ngClass]=\"{ active: datapoint.__active }\"\n                  >\n                    @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                        container=\"body\"\n                        data-cy=\"datapoint-warning-icon\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    }\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }} \"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [ngStyle]=\"{\n                          color: datapoint.color\n                        }\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n                      >\n                        <span class=\"text-truncate text-bold\">\n                          {{ datapoint.label }}\n                        </span>\n                        <small class=\"text-muted text-10\">\n                          {{ datapoint.__target.name }}\n                        </small>\n                      </span>\n                      @if (datapointsOutOfSync.get(datapoint)) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"\n                            'Measurements received for this data point may be out of sync.'\n                              | translate\n                          \"\n                          container=\"body\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n\n              @for (alarm of alarms; track alarm) {\n                <div\n                  class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n                  title=\"{{ alarm.filters.type }} \"\n                >\n                  @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n                    <i\n                      class=\"text-warning m-l-4\"\n                      c8yIcon=\"exclamation-triangle\"\n                      [tooltip]=\"\n                        'Alarm of this type is currently active and outside of the selected time range'\n                          | translate\n                      \"\n                      container=\"body\"\n                      [adaptivePosition]=\"false\"\n                    ></i>\n                  }\n                  <button\n                    class=\"c8y-alarm-pill__btn\"\n                    title=\"{{ alarm.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(alarm)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        alarm.__hidden || !alarm.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <button\n                    class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n                    (click)=\"toggleMarkedArea(alarm)\"\n                    [ngClass]=\"{\n                      active:\n                        !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n                    }\"\n                  >\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [style.background-color]=\"alarm.color\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"bell\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate\"\n                      [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n                    >\n                      <span class=\"text-truncate text-bold\">\n                        {{ alarm.label || alarm.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ alarm.__target.name }}\n                      </small>\n                    </span>\n                  </button>\n                </div>\n              }\n\n              @for (event of events; track event) {\n                <div\n                  class=\"c8y-event-pill pill--sm flex-no-shrink\"\n                  title=\"{{ event.filters.type }}\"\n                >\n                  <button\n                    class=\"c8y-event-pill__btn\"\n                    title=\"{{ event.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(event)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        event.__hidden || !event.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [ngStyle]=\"{ 'background-color': event.color }\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"online1\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate text-bold\"\n                      [ngClass]=\"{ 'text-muted': event.__hidden }\"\n                    >\n                      <span class=\"text-truncate\">\n                        {{ event.label || event.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ event.__target.name }}\n                      </small>\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-r-8\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"legendHelpTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (displayConfig !== null) {\n  <c8y-charts\n    #chart\n    [config]=\"displayConfig\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n    (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n    (finishLoading)=\"this.isLoading$.next($event)\"\n    (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    (duplicateAggregationsDetected)=\"onDuplicateAggregationsDetected($event)\"\n    (selectedChange)=\"onSelectedChange($event)\"\n  ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n\n<c8y-widget-action>\n  <c8y-datapoints-export-selector\n    [displayMode]=\"'icon-only'\"\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n  <button\n    class=\"btn btn-icon\"\n    [attr.aria-label]=\"'Save as image' | translate\"\n    tooltip=\"{{ 'Save as image' | translate }}\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"chartComponent.saveAsImage()\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      c8yIcon=\"image-file-checked\"\n    ></i>\n  </button>\n</c8y-widget-action>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "datapointBackInSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "selectedChange", "updateAggregatedSliderDatapoint", "duplicateAggregationsDetected"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i1.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "directive", type: i1.SelectItemDirective, selector: "[c8ySelectItem]", inputs: ["c8ySelectItem", "c8ySelectItemLabel"] }, { kind: "directive", type: i1.SelectedItemsDirective, selector: "[c8ySelectedItems]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i9.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "propagateAutoRefresh", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "propagateAutoRefresh", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WidgetActionWrapperComponent, selector: "c8y-widget-action" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
             type: Component,
@@ -944,10 +965,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         SelectItemDirective,
                         SelectedItemsDirective,
                         WidgetActionWrapperComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  ></c8y-local-controls>\n}\n\n<div\n  class=\"p-l-16 p-r-16\"\n  style=\"min-height: 34px\"\n>\n  <div class=\"d-flex gap-16 a-i-center\">\n    @if (hasAtLeastOneAlarmActive) {\n      <c8y-alarms-filter\n        class=\"d-contents form-group-sm min-width-0\"\n        (onFilterApplied)=\"filterSeverity($event)\"\n      ></c8y-alarms-filter>\n    }\n    @if (displayConfig?.datapoints.length > 0) {\n      <div class=\"d-flex a-i-center min-width-0\">\n        @if (\n          displayConfig.dataPointLegendDisplay === 'dropdown' ||\n          (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n        ) {\n          <c8y-select\n            class=\"min-width-0 c8y-select-v2--sm\"\n            aria-label=\"{{ 'Select data points, alarms or events' | translate }}\"\n            [placeholder]=\"'Select data points, alarms or events' | translate\"\n            [multi]=\"true\"\n            [filterItems]=\"true\"\n            [(ngModel)]=\"selectedItems\"\n            (onSelect)=\"onItemSelected($event)\"\n            (onDeselect)=\"onItemDeselected($event)\"\n          >\n            @for (item of selectableItems; track item.value) {\n              @let isDuplicate = isDuplicateDropdownItem(item);\n              <div\n                class=\"d-flex a-i-center gap-4\"\n                [style.opacity]=\"isDuplicate ? '0.5' : null\"\n                *c8ySelectItem=\"item.value; label: item.label\"\n              >\n                @if (\n                  !hasAtLeastOneDatapointActive &&\n                  item.value.type === 'DATAPOINT' &&\n                  (!item.value.renderTypeFn\n                    ? item.value.original.__active\n                    : isRenderTypeFunctionVisible(\n                        $any(item.value.original),\n                        item.value.renderTypeFn\n                      ))\n                ) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                    container=\"body\"\n                    data-cy=\"datapoint-warning-icon\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (isDuplicate) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"warning2\"\n                    [tooltip]=\"duplicateAggrWarning\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (item.value.type === 'DATAPOINT') {\n                  @let fnColor =\n                    item.value.renderTypeFn\n                      ? $any(item.value.original).renderTypeColors?.[item.value.renderTypeFn] ||\n                        item.value.original.color\n                      : item.value.original.color;\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"fnColor\"\n                  ></span>\n                }\n                @if (item.value.type === 'ALARM') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"bell\"\n                    ></i>\n                  </span>\n                }\n                @if (item.value.type === 'EVENT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"online1\"\n                    ></i>\n                  </span>\n                }\n                <span class=\"text-truncate d-col\">\n                  <small class=\"text-truncate\">{{ item.label }}</small>\n                  <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n                </span>\n              </div>\n            }\n            <span\n              class=\"tag tag--info chip\"\n              [style.opacity]=\"isDuplicateDropdownItem(selectedItem) ? '0.6' : null\"\n              title=\"{{ selectedItem.label }}\"\n              *c8ySelectedItems=\"let selectedItem\"\n            >\n              @let isDuplicateChip = isDuplicateDropdownItem(selectedItem);\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.label }}\"\n                type=\"button\"\n                (click)=\"\n                  $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n                \"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              @if (isLastActiveDatapoint(selectedItem)) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"exclamation-triangle\"\n                  [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                  container=\"body\"\n                  data-cy=\"datapoint-warning-icon\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (isDuplicateChip) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"warning2\"\n                  [tooltip]=\"duplicateAggrWarning\"\n                  container=\"body\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (selectedItem.value.type === 'DATAPOINT') {\n                @let fnColor =\n                  selectedItem.value.renderTypeFn\n                    ? $any(selectedItem.value.original).renderTypeColors?.[\n                        selectedItem.value.renderTypeFn\n                      ] || selectedItem.value.original.color\n                    : selectedItem.value?.original.color || '';\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"fnColor\"\n                ></span>\n              }\n              @if (selectedItem.value?.type === 'ALARM') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"bell\"\n                  ></i>\n                </span>\n              }\n              @if (selectedItem.value?.type === 'EVENT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [ngStyle]=\"{\n                    'background-color': selectedItem.value?.original.color || ''\n                  }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"online1\"\n                  ></i>\n                </span>\n              }\n            </span>\n          </c8y-select>\n        } @else {\n          <div class=\"inner-scroll\">\n            <div class=\"p-t-4 d-flex a-i-start gap-8\">\n              @for (datapoint of displayConfig.datapoints; track datapoint) {\n                @let rtColors = getAggregationFunctionColors(datapoint);\n                @let dpId = getDpId(datapoint);\n                @if (datapoint.retrievalError) {\n                  <i\n                    class=\"text-warning m-l-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'Data point no longer exists.' | translate\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                } @else if (\n                  rtColors.length > 0 &&\n                  datapointsWithDuplicateAggr.has(dpId) &&\n                  displayConfig?.aggregation\n                ) {\n                  <!-- All aggregation functions return the same value \u2014 collapse to a single muted pill -->\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    [class.active]=\"datapoint.__active\"\n                    style=\"opacity: 0.5\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                  >\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }}\"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [style.color]=\"datapoint.color\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [class.text-muted]=\"!datapoint.__active\"\n                      >\n                        <span class=\"text-truncate text-bold\">{{ datapoint.label }}</span>\n                        <small class=\"text-muted text-10\">{{ datapoint.__target.name }}</small>\n                      </span>\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"duplicateAggrWarning\"\n                        container=\"body\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    </div>\n                  </div>\n                } @else if (rtColors.length > 0) {\n                  @for (entry of rtColors; track entry.renderType) {\n                    @let isVisible = isRenderTypeFunctionVisible(datapoint, entry.renderType);\n                    <div\n                      class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                      [class.active]=\"isVisible\"\n                      title=\"{{ datapoint.label }} [{{ entry.renderType }}] - {{\n                        datapoint.__target.name\n                      }}\"\n                    >\n                      @if (!hasAtLeastOneDatapointActive && isVisible) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                          container=\"body\"\n                          data-cy=\"datapoint-warning-icon\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                      <button\n                        class=\"c8y-datapoint-pill__btn\"\n                        title=\"{{\n                          (isVisible ? hideDatapointLabel : showDatapointLabel) | translate\n                        }}\"\n                        type=\"button\"\n                        data-cy=\"datapoint-toggle-visibility-btn\"\n                        (click)=\"toggleRenderTypeFunction(datapoint, entry.renderType, !isVisible)\"\n                      >\n                        <i\n                          class=\"icon-14\"\n                          [c8yIcon]=\"isVisible ? 'eye text-primary' : 'eye-slash text-muted'\"\n                        ></i>\n                      </button>\n                      <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                        <i\n                          class=\"m-r-4 icon-14\"\n                          c8yIcon=\"circle\"\n                          [style.color]=\"entry.color\"\n                        ></i>\n                        <span\n                          class=\"text-truncate\"\n                          [class.text-muted]=\"!isVisible\"\n                        >\n                          <span class=\"text-truncate text-bold\">\n                            {{ datapoint.label }} [{{ entry.renderType }}]\n                          </span>\n                          <small class=\"text-muted text-10\">\n                            {{ datapoint.__target.name }}\n                          </small>\n                        </span>\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                    [ngClass]=\"{ active: datapoint.__active }\"\n                  >\n                    @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                        container=\"body\"\n                        data-cy=\"datapoint-warning-icon\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    }\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }} \"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [ngStyle]=\"{\n                          color: datapoint.color\n                        }\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n                      >\n                        <span class=\"text-truncate text-bold\">\n                          {{ datapoint.label }}\n                        </span>\n                        <small class=\"text-muted text-10\">\n                          {{ datapoint.__target.name }}\n                        </small>\n                      </span>\n                      @if (datapointsOutOfSync.get(datapoint)) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"\n                            'Measurements received for this data point may be out of sync.'\n                              | translate\n                          \"\n                          container=\"body\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n\n              @for (alarm of alarms; track alarm) {\n                <div\n                  class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n                  title=\"{{ alarm.filters.type }} \"\n                >\n                  @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n                    <i\n                      class=\"text-warning m-l-4\"\n                      c8yIcon=\"exclamation-triangle\"\n                      [tooltip]=\"\n                        'Alarm of this type is currently active and outside of the selected time range'\n                          | translate\n                      \"\n                      container=\"body\"\n                      [adaptivePosition]=\"false\"\n                    ></i>\n                  }\n                  <button\n                    class=\"c8y-alarm-pill__btn\"\n                    title=\"{{ alarm.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(alarm)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        alarm.__hidden || !alarm.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <button\n                    class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n                    (click)=\"toggleMarkedArea(alarm)\"\n                    [ngClass]=\"{\n                      active:\n                        !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n                    }\"\n                  >\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [style.background-color]=\"alarm.color\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"bell\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate\"\n                      [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n                    >\n                      <span class=\"text-truncate text-bold\">\n                        {{ alarm.label || alarm.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ alarm.__target.name }}\n                      </small>\n                    </span>\n                  </button>\n                </div>\n              }\n\n              @for (event of events; track event) {\n                <div\n                  class=\"c8y-event-pill pill--sm flex-no-shrink\"\n                  title=\"{{ event.filters.type }}\"\n                >\n                  <button\n                    class=\"c8y-event-pill__btn\"\n                    title=\"{{ event.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(event)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        event.__hidden || !event.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [ngStyle]=\"{ 'background-color': event.color }\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"online1\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate text-bold\"\n                      [ngClass]=\"{ 'text-muted': event.__hidden }\"\n                    >\n                      <span class=\"text-truncate\">\n                        {{ event.label || event.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ event.__target.name }}\n                      </small>\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-r-8\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"legendHelpTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (displayConfig !== null) {\n  <c8y-charts\n    #chart\n    [config]=\"displayConfig\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n    (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n    (finishLoading)=\"this.isLoading$.next($event)\"\n    (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    (duplicateAggregationsDetected)=\"onDuplicateAggregationsDetected($event)\"\n    (selectedChange)=\"onSelectedChange($event)\"\n  ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n\n<c8y-widget-action>\n  <c8y-datapoints-export-selector\n    [displayMode]=\"'icon-only'\"\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n  <button\n    class=\"btn btn-icon\"\n    [attr.aria-label]=\"'Save as image' | translate\"\n    tooltip=\"{{ 'Save as image' | translate }}\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"chartComponent.saveAsImage()\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      c8yIcon=\"image-file-checked\"\n    ></i>\n  </button>\n</c8y-widget-action>\n" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (linkedChange)=\"isLinkedToGlobal.set($event)\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [propagateAutoRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n  ></c8y-local-controls>\n}\n\n<div\n  class=\"p-l-16 p-r-16\"\n  style=\"min-height: 34px\"\n>\n  <div class=\"d-flex gap-16 a-i-center\">\n    @if (hasAtLeastOneAlarmActive) {\n      <c8y-alarms-filter\n        class=\"d-contents form-group-sm min-width-0\"\n        (onFilterApplied)=\"filterSeverity($event)\"\n      ></c8y-alarms-filter>\n    }\n    @if (displayConfig?.datapoints.length > 0) {\n      <div class=\"d-flex a-i-center min-width-0\">\n        @if (\n          displayConfig.dataPointLegendDisplay === 'dropdown' ||\n          (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n        ) {\n          <c8y-select\n            class=\"min-width-0 c8y-select-v2--sm\"\n            aria-label=\"{{ 'Select data points, alarms or events' | translate }}\"\n            [placeholder]=\"'Select data points, alarms or events' | translate\"\n            [multi]=\"true\"\n            [filterItems]=\"true\"\n            [(ngModel)]=\"selectedItems\"\n            (onSelect)=\"onItemSelected($event)\"\n            (onDeselect)=\"onItemDeselected($event)\"\n          >\n            @for (item of selectableItems; track item.value) {\n              @let isDuplicate = isDuplicateDropdownItem(item);\n              <div\n                class=\"d-flex a-i-center gap-4\"\n                [style.opacity]=\"isDuplicate ? '0.5' : null\"\n                *c8ySelectItem=\"item.value; label: item.label\"\n              >\n                @if (\n                  !hasAtLeastOneDatapointActive &&\n                  item.value.type === 'DATAPOINT' &&\n                  (!item.value.renderTypeFn\n                    ? item.value.original.__active\n                    : isRenderTypeFunctionVisible(\n                        $any(item.value.original),\n                        item.value.renderTypeFn\n                      ))\n                ) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                    container=\"body\"\n                    data-cy=\"datapoint-warning-icon\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (isDuplicate) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"warning2\"\n                    [tooltip]=\"duplicateAggrWarning\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (item.value.type === 'DATAPOINT') {\n                  @let fnColor =\n                    item.value.renderTypeFn\n                      ? $any(item.value.original).renderTypeColors?.[item.value.renderTypeFn] ||\n                        item.value.original.color\n                      : item.value.original.color;\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"fnColor\"\n                  ></span>\n                }\n                @if (item.value.type === 'ALARM') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"bell\"\n                    ></i>\n                  </span>\n                }\n                @if (item.value.type === 'EVENT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"online1\"\n                    ></i>\n                  </span>\n                }\n                <span class=\"text-truncate d-col\">\n                  <small class=\"text-truncate\">{{ item.label }}</small>\n                  <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n                </span>\n              </div>\n            }\n            <span\n              class=\"tag tag--info chip\"\n              [style.opacity]=\"isDuplicateDropdownItem(selectedItem) ? '0.6' : null\"\n              title=\"{{ selectedItem.label }}\"\n              *c8ySelectedItems=\"let selectedItem\"\n            >\n              @let isDuplicateChip = isDuplicateDropdownItem(selectedItem);\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.label }}\"\n                type=\"button\"\n                (click)=\"\n                  $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n                \"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              @if (isLastActiveDatapoint(selectedItem)) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"exclamation-triangle\"\n                  [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                  container=\"body\"\n                  data-cy=\"datapoint-warning-icon\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (isDuplicateChip) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"warning2\"\n                  [tooltip]=\"duplicateAggrWarning\"\n                  container=\"body\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (selectedItem.value.type === 'DATAPOINT') {\n                @let fnColor =\n                  selectedItem.value.renderTypeFn\n                    ? $any(selectedItem.value.original).renderTypeColors?.[\n                        selectedItem.value.renderTypeFn\n                      ] || selectedItem.value.original.color\n                    : selectedItem.value?.original.color || '';\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"fnColor\"\n                ></span>\n              }\n              @if (selectedItem.value?.type === 'ALARM') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"bell\"\n                  ></i>\n                </span>\n              }\n              @if (selectedItem.value?.type === 'EVENT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [ngStyle]=\"{\n                    'background-color': selectedItem.value?.original.color || ''\n                  }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"online1\"\n                  ></i>\n                </span>\n              }\n            </span>\n          </c8y-select>\n        } @else {\n          <div class=\"inner-scroll\">\n            <div class=\"p-t-4 d-flex a-i-start gap-8\">\n              @for (datapoint of displayConfig.datapoints; track datapoint) {\n                @let rtColors = getAggregationFunctionColors(datapoint);\n                @let dpId = getDpId(datapoint);\n                @if (datapoint.retrievalError) {\n                  <i\n                    class=\"text-warning m-l-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'Data point no longer exists.' | translate\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                } @else if (\n                  rtColors.length > 0 &&\n                  datapointsWithDuplicateAggr.has(dpId) &&\n                  displayConfig?.aggregation\n                ) {\n                  <!-- All aggregation functions return the same value \u2014 collapse to a single muted pill -->\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    [class.active]=\"datapoint.__active\"\n                    style=\"opacity: 0.5\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                  >\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }}\"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [style.color]=\"datapoint.color\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [class.text-muted]=\"!datapoint.__active\"\n                      >\n                        <span class=\"text-truncate text-bold\">{{ datapoint.label }}</span>\n                        <small class=\"text-muted text-10\">{{ datapoint.__target.name }}</small>\n                      </span>\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"duplicateAggrWarning\"\n                        container=\"body\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    </div>\n                  </div>\n                } @else if (rtColors.length > 0) {\n                  @for (entry of rtColors; track entry.renderType) {\n                    @let isVisible = isRenderTypeFunctionVisible(datapoint, entry.renderType);\n                    <div\n                      class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                      [class.active]=\"isVisible\"\n                      title=\"{{ datapoint.label }} [{{ entry.renderType }}] - {{\n                        datapoint.__target.name\n                      }}\"\n                    >\n                      @if (!hasAtLeastOneDatapointActive && isVisible) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                          container=\"body\"\n                          data-cy=\"datapoint-warning-icon\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                      <button\n                        class=\"c8y-datapoint-pill__btn\"\n                        title=\"{{\n                          (isVisible ? hideDatapointLabel : showDatapointLabel) | translate\n                        }}\"\n                        type=\"button\"\n                        data-cy=\"datapoint-toggle-visibility-btn\"\n                        (click)=\"toggleRenderTypeFunction(datapoint, entry.renderType, !isVisible)\"\n                      >\n                        <i\n                          class=\"icon-14\"\n                          [c8yIcon]=\"isVisible ? 'eye text-primary' : 'eye-slash text-muted'\"\n                        ></i>\n                      </button>\n                      <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                        <i\n                          class=\"m-r-4 icon-14\"\n                          c8yIcon=\"circle\"\n                          [style.color]=\"entry.color\"\n                        ></i>\n                        <span\n                          class=\"text-truncate\"\n                          [class.text-muted]=\"!isVisible\"\n                        >\n                          <span class=\"text-truncate text-bold\">\n                            {{ datapoint.label }} [{{ entry.renderType }}]\n                          </span>\n                          <small class=\"text-muted text-10\">\n                            {{ datapoint.__target.name }}\n                          </small>\n                        </span>\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                    [ngClass]=\"{ active: datapoint.__active }\"\n                  >\n                    @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                        container=\"body\"\n                        data-cy=\"datapoint-warning-icon\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    }\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }} \"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [ngStyle]=\"{\n                          color: datapoint.color\n                        }\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n                      >\n                        <span class=\"text-truncate text-bold\">\n                          {{ datapoint.label }}\n                        </span>\n                        <small class=\"text-muted text-10\">\n                          {{ datapoint.__target.name }}\n                        </small>\n                      </span>\n                      @if (datapointsOutOfSync.get(datapoint)) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"\n                            'Measurements received for this data point may be out of sync.'\n                              | translate\n                          \"\n                          container=\"body\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n\n              @for (alarm of alarms; track alarm) {\n                <div\n                  class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n                  title=\"{{ alarm.filters.type }} \"\n                >\n                  @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n                    <i\n                      class=\"text-warning m-l-4\"\n                      c8yIcon=\"exclamation-triangle\"\n                      [tooltip]=\"\n                        'Alarm of this type is currently active and outside of the selected time range'\n                          | translate\n                      \"\n                      container=\"body\"\n                      [adaptivePosition]=\"false\"\n                    ></i>\n                  }\n                  <button\n                    class=\"c8y-alarm-pill__btn\"\n                    title=\"{{ alarm.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(alarm)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        alarm.__hidden || !alarm.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <button\n                    class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n                    (click)=\"toggleMarkedArea(alarm)\"\n                    [ngClass]=\"{\n                      active:\n                        !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n                    }\"\n                  >\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [style.background-color]=\"alarm.color\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"bell\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate\"\n                      [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n                    >\n                      <span class=\"text-truncate text-bold\">\n                        {{ alarm.label || alarm.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ alarm.__target.name }}\n                      </small>\n                    </span>\n                  </button>\n                </div>\n              }\n\n              @for (event of events; track event) {\n                <div\n                  class=\"c8y-event-pill pill--sm flex-no-shrink\"\n                  title=\"{{ event.filters.type }}\"\n                >\n                  <button\n                    class=\"c8y-event-pill__btn\"\n                    title=\"{{ event.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(event)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        event.__hidden || !event.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [ngStyle]=\"{ 'background-color': event.color }\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"online1\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate text-bold\"\n                      [ngClass]=\"{ 'text-muted': event.__hidden }\"\n                    >\n                      <span class=\"text-truncate\">\n                        {{ event.label || event.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ event.__target.name }}\n                      </small>\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-r-8\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"legendHelpTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (displayConfig !== null) {\n  <c8y-charts\n    #chart\n    [config]=\"displayConfig\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n    (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n    (finishLoading)=\"this.isLoading$.next($event)\"\n    (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    (duplicateAggregationsDetected)=\"onDuplicateAggregationsDetected($event)\"\n    (selectedChange)=\"onSelectedChange($event)\"\n  ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n\n<c8y-widget-action>\n  <c8y-datapoints-export-selector\n    [displayMode]=\"'icon-only'\"\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n  <button\n    class=\"btn btn-icon\"\n    [attr.aria-label]=\"'Save as image' | translate\"\n    tooltip=\"{{ 'Save as image' | translate }}\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"chartComponent.saveAsImage()\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      c8yIcon=\"image-file-checked\"\n    ></i>\n  </button>\n</c8y-widget-action>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i2$1.ContextDashboardComponent, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.WidgetConfigMigrationService }, { type: i1.WidgetTimeContextDateRangeService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                }] }, { type: i3$1.WidgetConfigMigrationService }, { type: i1.WidgetTimeContextDateRangeService }, { type: i1.WidgetTimeContextMediatorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], chartComponent: [{
                 type: ViewChild,