@c8y/ngx-components 1023.16.3 → 1023.17.2

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

@@ -9,9 +9,9 @@ import * as i1 from '@c8y/client';
 import { identity, isEmpty, last, first } from 'lodash-es';
 import { BehaviorSubject, Subject, combineLatest, pipe } from 'rxjs';
 import { map, share, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
-import * as i5 from '@angular/common';
 import * as i4 from '@c8y/ngx-components/map';
 import { MapModule, MapComponent } from '@c8y/ngx-components/map';
+import * as i5 from '@angular/common';
 import { gettext } from '@c8y/ngx-components/gettext';
 
 const LOCATION_UPDATE_EVENT_TYPE = 'c8y_LocationUpdate';
@@ -124,11 +124,11 @@ class TrackingMarkerPopupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrackingMarkerPopupComponent, deps: [{ token: TrackingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TrackingMarkerPopupComponent, isStandalone: true, selector: "c8y-tracking-marker-popup", inputs: { context: "context", showTrackingLink: "showTrackingLink" }, ngImport: i0, template: "<div class=\"map-marker\">\n  <a\n    class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n    [title]=\"context?.name\"\n    *ngIf=\"isDevice\"\n    [routerLink]=\"['/device/', context?.id]\"\n  >\n    {{ context?.name }}\n  </a>\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TrackingMarkerPopupComponent, isStandalone: true, selector: "c8y-tracking-marker-popup", inputs: { context: "context", showTrackingLink: "showTrackingLink" }, ngImport: i0, template: "<div class=\"map-marker\">\n  @if (isDevice) {\n    <a\n      class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n      [title]=\"context?.name\"\n      [routerLink]=\"['/device/', context?.id]\"\n    >\n      {{ context?.name }}\n    </a>\n  }\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrackingMarkerPopupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'c8y-tracking-marker-popup', imports: [CoreModule, RouterModule, FormsModule], template: "<div class=\"map-marker\">\n  <a\n    class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n    [title]=\"context?.name\"\n    *ngIf=\"isDevice\"\n    [routerLink]=\"['/device/', context?.id]\"\n  >\n    {{ context?.name }}\n  </a>\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n" }]
+            args: [{ standalone: true, selector: 'c8y-tracking-marker-popup', imports: [CoreModule, RouterModule, FormsModule], template: "<div class=\"map-marker\">\n  @if (isDevice) {\n    <a\n      class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n      [title]=\"context?.name\"\n      [routerLink]=\"['/device/', context?.id]\"\n    >\n      {{ context?.name }}\n    </a>\n  }\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: TrackingService }], propDecorators: { context: [{
                 type: Input
             }], showTrackingLink: [{
@@ -213,7 +213,7 @@ class TrackingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrackingComponent, deps: [{ token: TrackingService }, { token: i2.EventRealtimeService }, { token: i2.ContextRouteService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TrackingComponent, isStandalone: true, selector: "c8y-tracking", providers: [EventRealtimeService], viewQueries: [{ propertyName: "map", first: true, predicate: MapComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div class=\"bg-white p-relative\">\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      <c8y-ui-empty-state\n        icon=\"c8y-location\"\n        [title]=\"'No tracking events found.' | translate\"\n        [subtitle]=\"'Select another time range.' | translate\"\n        *ngIf=\"!service.hasEvents\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </ng-template>\n\n    <div *ngIf=\"loadMoreComponent?.hasMore\">\n      <button\n        class=\"btn btn-link fit-w sticky-bottom separator-top\"\n        [title]=\"'Load more' | translate\"\n        type=\"button\"\n        [disabled]=\"loadMoreComponent?.isLoading\"\n        (click)=\"loadMoreComponent.loadMore()\"\n        data-cy=\"c8y-tracking--load-more\"\n      >\n        {{ 'Load more' | translate }}\n      </button>\n    </div>\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapComponent, selector: "c8y-map", inputs: ["config", "assets", "polyline$", "polylineOptions"], outputs: ["onRealtimeUpdate", "onMove", "onMoveEnd", "onZoomStart", "onZoomEnd", "onMap", "onInit"] }, { kind: "directive", type: i4.MapPopupDirective, selector: "[c8yMapPopup]" }, { kind: "ngmodule", type: ActionBarModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "component", type: i2.TimeIntervalComponent, selector: "c8y-time-interval", inputs: ["minCustomDate", "maxCustomDate", "dateRangePickerConfig", "selectedInterval"], outputs: ["interval"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrackingMarkerPopupComponent, selector: "c8y-tracking-marker-popup", inputs: ["context", "showTrackingLink"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TrackingComponent, isStandalone: true, selector: "c8y-tracking", providers: [EventRealtimeService], viewQueries: [{ propertyName: "map", first: true, predicate: MapComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div\n    class=\"bg-white p-relative\"\n    style=\"min-height: 30vh\"\n  >\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      @if (!service.hasEvents) {\n        <c8y-ui-empty-state\n          icon=\"c8y-location\"\n          [title]=\"'No tracking events found.' | translate\"\n          [subtitle]=\"'Select another time range.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </ng-template>\n\n    @if (loadMoreComponent?.hasMore) {\n      <div>\n        <button\n          class=\"btn btn-link fit-w sticky-bottom separator-top\"\n          [title]=\"'Load more' | translate\"\n          type=\"button\"\n          [disabled]=\"loadMoreComponent?.isLoading\"\n          (click)=\"loadMoreComponent.loadMore()\"\n          data-cy=\"c8y-tracking--load-more\"\n        >\n          {{ 'Load more' | translate }}\n        </button>\n      </div>\n    }\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapComponent, selector: "c8y-map", inputs: ["config", "assets", "polyline$", "polylineOptions"], outputs: ["onRealtimeUpdate", "onMove", "onMoveEnd", "onZoomStart", "onZoomEnd", "onMap", "onInit"] }, { kind: "directive", type: i4.MapPopupDirective, selector: "[c8yMapPopup]" }, { kind: "ngmodule", type: ActionBarModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "component", type: i2.TimeIntervalComponent, selector: "c8y-time-interval", inputs: ["minCustomDate", "maxCustomDate", "dateRangePickerConfig", "selectedInterval"], outputs: ["interval"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrackingMarkerPopupComponent, selector: "c8y-tracking-marker-popup", inputs: ["context", "showTrackingLink"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrackingComponent, decorators: [{
             type: Component,
@@ -224,7 +224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         TimeIntervalComponent,
                         FormsModule,
                         TrackingMarkerPopupComponent
-                    ], providers: [EventRealtimeService], selector: 'c8y-tracking', template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div class=\"bg-white p-relative\">\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      <c8y-ui-empty-state\n        icon=\"c8y-location\"\n        [title]=\"'No tracking events found.' | translate\"\n        [subtitle]=\"'Select another time range.' | translate\"\n        *ngIf=\"!service.hasEvents\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </ng-template>\n\n    <div *ngIf=\"loadMoreComponent?.hasMore\">\n      <button\n        class=\"btn btn-link fit-w sticky-bottom separator-top\"\n        [title]=\"'Load more' | translate\"\n        type=\"button\"\n        [disabled]=\"loadMoreComponent?.isLoading\"\n        (click)=\"loadMoreComponent.loadMore()\"\n        data-cy=\"c8y-tracking--load-more\"\n      >\n        {{ 'Load more' | translate }}\n      </button>\n    </div>\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+                    ], providers: [EventRealtimeService], selector: 'c8y-tracking', template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div\n    class=\"bg-white p-relative\"\n    style=\"min-height: 30vh\"\n  >\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      @if (!service.hasEvents) {\n        <c8y-ui-empty-state\n          icon=\"c8y-location\"\n          [title]=\"'No tracking events found.' | translate\"\n          [subtitle]=\"'Select another time range.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </ng-template>\n\n    @if (loadMoreComponent?.hasMore) {\n      <div>\n        <button\n          class=\"btn btn-link fit-w sticky-bottom separator-top\"\n          [title]=\"'Load more' | translate\"\n          type=\"button\"\n          [disabled]=\"loadMoreComponent?.isLoading\"\n          (click)=\"loadMoreComponent.loadMore()\"\n          data-cy=\"c8y-tracking--load-more\"\n        >\n          {{ 'Load more' | translate }}\n        </button>\n      </div>\n    }\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TrackingService }, { type: i2.EventRealtimeService }, { type: i2.ContextRouteService }, { type: i3.ActivatedRoute }], propDecorators: { map: [{
                 type: ViewChild,
                 args: [MapComponent]

package/fesm2022/c8y-ngx-components-tracking.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-tracking.mjs","sources":["../../tracking/tracking.service.ts","../../tracking/tracking-marker-popup.component.ts","../../tracking/tracking-marker-popup.component.html","../../tracking/tracking-tab.guard.ts","../../tracking/tracking.component.ts","../../tracking/tracking.component.html","../../tracking/tracking.feature.ts","../../tracking/c8y-ngx-components-tracking.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { EventService, IEvent, IResultList } from '@c8y/client';\nimport { ForOfFilterPipe, GeoService, TimeInterval } from '@c8y/ngx-components';\nimport { PositionManagedObject } from '@c8y/ngx-components/map';\nimport { first, identity, isEmpty, last } from 'lodash-es';\nimport { BehaviorSubject, Observable, Subject, combineLatest, pipe } from 'rxjs';\nimport { distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';\n\nconst LOCATION_UPDATE_EVENT_TYPE = 'c8y_LocationUpdate';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TrackingService {\n  private static readonly BASE_FILTER = {\n    pageSize: 1000,\n    withTotalPages: true,\n    type: LOCATION_UPDATE_EVENT_TYPE\n  };\n\n  events$: Observable<IResultList<IEvent>>;\n  polyline$: Observable<L.LatLngExpression[]>;\n  pipe: ForOfFilterPipe;\n  trackVisible = true;\n  hasEvents = false;\n\n  private _polylineEventsSubject$ = new BehaviorSubject<IEvent[]>([]);\n\n  private deviceId$: Subject<string | number> = new Subject();\n  private timeInterval$: Subject<TimeInterval> = new Subject();\n  private reload$: BehaviorSubject<void> = new BehaviorSubject(null);\n\n  constructor(\n    private eventService: EventService,\n    private geo: GeoService\n  ) {\n    this.polyline$ = this._polylineEventsSubject$.asObservable().pipe(\n      map(events => (events || []).map(event => this.geo.getLatLong(event)).filter(identity)),\n      share()\n    );\n\n    this.events$ = combineLatest([\n      this.deviceId$.pipe(distinctUntilChanged()),\n      this.timeInterval$,\n      this.reload$\n    ]).pipe(\n      switchMap(([source, interval]) => {\n        const { dateFrom, dateTo } = interval;\n        return this.eventService.list({\n          ...TrackingService.BASE_FILTER,\n          source,\n          dateFrom: dateFrom.toISOString(),\n          dateTo: dateTo.toISOString()\n        });\n      }),\n      tap(() => this._polylineEventsSubject$.next([])),\n      share()\n    );\n\n    this.pipe = pipe(\n      tap(events => (this.hasEvents = !isEmpty(events))),\n      map((events: IEvent[]) => (events || []).filter(event => this.isMatchingEvent(event))),\n      tap((events: IEvent[]) => {\n        const prepend =\n          this.compareEvents(last(this._polylineEventsSubject$.value), first(events)) < 0;\n        const polyline: IEvent[] = prepend\n          ? [...events, ...this._polylineEventsSubject$.value]\n          : [...this._polylineEventsSubject$.value, ...events];\n\n        this._polylineEventsSubject$.next(polyline);\n      })\n    );\n  }\n\n  setDeviceId(deviceId: string | number) {\n    this.deviceId$.next(deviceId);\n  }\n\n  setInterval(interval: TimeInterval) {\n    this.timeInterval$.next(interval);\n  }\n\n  clearTrack() {\n    this._polylineEventsSubject$.next([]);\n  }\n\n  reload() {\n    this.reload$.next();\n  }\n\n  async latestPositionUpdate(mo: PositionManagedObject): Promise<Date> {\n    const dateTo = new Date();\n    dateTo.setDate(dateTo.getDate() + 1);\n\n    const filters = {\n      fragmentType: 'c8y_Position',\n      dateFrom: new Date(0).toISOString(),\n      dateTo: dateTo.toISOString(),\n      pageSize: 1,\n      source: mo.id\n    };\n    const events = await this.eventService.list(filters);\n    return events?.data?.length ? new Date(events.data[0].time) : undefined;\n  }\n\n  toggleTrack() {\n    if (this.trackVisible) {\n      this.clearTrack();\n    } else {\n      this.reload();\n    }\n    this.trackVisible = !this.trackVisible;\n  }\n\n  isLocationUpdateEvent(event: IEvent): boolean {\n    return event.type === LOCATION_UPDATE_EVENT_TYPE;\n  }\n\n  private isMatchingEvent(event: IEvent): boolean {\n    return this.isLocationUpdateEvent(event);\n  }\n\n  private compareEvents(a: IEvent, b: IEvent): number {\n    return Date.parse(a?.time) - Date.parse(b?.time);\n  }\n}\n","import { Component, Input, OnInit } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport { IEvent } from '@c8y/client';\nimport { CoreModule } from '@c8y/ngx-components';\nimport { PositionManagedObject } from '@c8y/ngx-components/map';\nimport { TrackingService } from './tracking.service';\n\n@Component({\n  standalone: true,\n  selector: 'c8y-tracking-marker-popup',\n  templateUrl: './tracking-marker-popup.component.html',\n  imports: [CoreModule, RouterModule, FormsModule]\n})\nexport class TrackingMarkerPopupComponent implements OnInit {\n  @Input()\n  context: PositionManagedObject | IEvent;\n\n  /**\n   * Displays link to device tracking tab.\n   */\n  @Input()\n  showTrackingLink = false;\n\n  isDevice: boolean;\n  date: Date;\n\n  constructor(public trackingService: TrackingService) {}\n\n  async ngOnInit() {\n    this.isDevice = !this.trackingService.isLocationUpdateEvent(this.context as unknown as IEvent);\n    if (this.isDevice) {\n      this.trackingService.setDeviceId(this.context.id);\n      this.date = await this.trackingService.latestPositionUpdate(\n        this.context as PositionManagedObject\n      );\n    } else {\n      this.date = this.context.time;\n    }\n  }\n}\n","<div class=\"map-marker\">\n  <a\n    class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n    [title]=\"context?.name\"\n    *ngIf=\"isDevice\"\n    [routerLink]=\"['/device/', context?.id]\"\n  >\n    {{ context?.name }}\n  </a>\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n","import { Injectable } from '@angular/core';\nimport { ActivatedRouteSnapshot, CanActivate } from '@angular/router';\nimport { IManagedObject } from '@c8y/client';\nimport { ContextRouteService, GeoService, ViewContext } from '@c8y/ngx-components';\nimport { isEmpty } from 'lodash-es';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TrackingTabFactory implements CanActivate {\n  constructor(\n    private contextRouteService: ContextRouteService,\n    private geoService: GeoService\n  ) {}\n\n  canActivate(snapshot: ActivatedRouteSnapshot): boolean {\n    const contextData = this.contextRouteService.getContextData(snapshot);\n    return (\n      contextData?.context === ViewContext.Device &&\n      !isEmpty(this.geoService.getLatLong(contextData?.contextData as IManagedObject))\n    );\n  }\n}\n","import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { IEvent } from '@c8y/client';\nimport {\n  ActionBarModule,\n  ContextRouteService,\n  CoreModule,\n  DateRangePickerConfig,\n  EventRealtimeService,\n  LoadMoreComponent,\n  TimeInterval,\n  TimeIntervalComponent\n} from '@c8y/ngx-components';\nimport { MapComponent, MapConfig, MapModule, PositionManagedObject } from '@c8y/ngx-components/map';\nimport { TrackingMarkerPopupComponent } from './tracking-marker-popup.component';\nimport { TrackingService } from './tracking.service';\n\n@Component({\n  standalone: true,\n  templateUrl: './tracking.component.html',\n  imports: [\n    MapModule,\n    ActionBarModule,\n    CoreModule,\n    TimeIntervalComponent,\n    FormsModule,\n    TrackingMarkerPopupComponent\n  ],\n  providers: [EventRealtimeService],\n  selector: 'c8y-tracking'\n})\nexport class TrackingComponent implements OnInit, AfterViewInit {\n  @ViewChild(MapComponent)\n  map: MapComponent;\n\n  dateRangePickerConfig: DateRangePickerConfig = {\n    adaptivePosition: true,\n    showPreviousMonth: true,\n    preventChangeToNextMonth: true\n  };\n\n  config: MapConfig = {\n    realtime: true,\n    follow: false,\n    zoomLevel: 12,\n    fitBoundsOptions: {\n      padding: [50, 50]\n    }\n  };\n\n  maxDate = new Date();\n  activeMarkers: { [key: string]: boolean } = {};\n  realtimeDisabled = false;\n  device: PositionManagedObject;\n  loadMoreComponent: LoadMoreComponent;\n\n  constructor(\n    public service: TrackingService,\n    public realtime: EventRealtimeService,\n    private contextRouteService: ContextRouteService,\n    private activatedRoute: ActivatedRoute\n  ) {}\n\n  async ngOnInit() {\n    const { contextData } = this.contextRouteService.getContextData(this.activatedRoute);\n    this.device = contextData as PositionManagedObject;\n  }\n\n  async ngAfterViewInit() {\n    this.service.setDeviceId(this.device.id);\n    this.togglePositionRealtime(this.realtime.active);\n  }\n\n  toggleMarker(event: IEvent) {\n    let marker = this.map.findMarker(event);\n\n    if (marker) {\n      this.map.removeMarker(marker);\n      delete this.activeMarkers[`p${event.id}`];\n    } else {\n      marker = this.map.getTrackingMarker(event);\n      this.map.addMarkerToMap(marker);\n      this.activeMarkers[`p${event.id}`] = true;\n    }\n  }\n\n  togglePositionRealtime(active: boolean) {\n    this.config = { ...this.config, realtime: active };\n  }\n\n  toggleRealtime(interval: TimeInterval) {\n    const currentTimeInRange = Date.now() <= interval?.dateTo?.getTime();\n    this.togglePositionRealtime(currentTimeInRange);\n    this.realtimeDisabled = !currentTimeInRange;\n\n    if (currentTimeInRange) {\n      this.realtime.start();\n    } else {\n      this.realtime.stop();\n    }\n  }\n}\n","<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div class=\"bg-white p-relative\">\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      <c8y-ui-empty-state\n        icon=\"c8y-location\"\n        [title]=\"'No tracking events found.' | translate\"\n        [subtitle]=\"'Select another time range.' | translate\"\n        *ngIf=\"!service.hasEvents\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </ng-template>\n\n    <div *ngIf=\"loadMoreComponent?.hasMore\">\n      <button\n        class=\"btn btn-link fit-w sticky-bottom separator-top\"\n        [title]=\"'Load more' | translate\"\n        type=\"button\"\n        [disabled]=\"loadMoreComponent?.isLoading\"\n        (click)=\"loadMoreComponent.loadMore()\"\n        data-cy=\"c8y-tracking--load-more\"\n      >\n        {{ 'Load more' | translate }}\n      </button>\n    </div>\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { hookRoute, ViewContext } from '@c8y/ngx-components';\nimport { TrackingTabFactory } from './tracking-tab.guard';\nimport { TrackingComponent } from './tracking.component';\n\nexport const trackingFeatureProvider: EnvironmentProviders = makeEnvironmentProviders([\n  TrackingTabFactory,\n  hookRoute({\n    path: 'tracking',\n    component: TrackingComponent,\n    context: ViewContext.Device,\n    label: gettext('Tracking'),\n    icon: 'crosshairs',\n    canActivate: [TrackingTabFactory]\n  })\n]);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.TrackingService","i3","i1"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-tracking.mjs","sources":["../../tracking/tracking.service.ts","../../tracking/tracking-marker-popup.component.ts","../../tracking/tracking-marker-popup.component.html","../../tracking/tracking-tab.guard.ts","../../tracking/tracking.component.ts","../../tracking/tracking.component.html","../../tracking/tracking.feature.ts","../../tracking/c8y-ngx-components-tracking.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { EventService, IEvent, IResultList } from '@c8y/client';\nimport { ForOfFilterPipe, GeoService, TimeInterval } from '@c8y/ngx-components';\nimport { PositionManagedObject } from '@c8y/ngx-components/map';\nimport { first, identity, isEmpty, last } from 'lodash-es';\nimport { BehaviorSubject, Observable, Subject, combineLatest, pipe } from 'rxjs';\nimport { distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';\n\nconst LOCATION_UPDATE_EVENT_TYPE = 'c8y_LocationUpdate';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TrackingService {\n  private static readonly BASE_FILTER = {\n    pageSize: 1000,\n    withTotalPages: true,\n    type: LOCATION_UPDATE_EVENT_TYPE\n  };\n\n  events$: Observable<IResultList<IEvent>>;\n  polyline$: Observable<L.LatLngExpression[]>;\n  pipe: ForOfFilterPipe;\n  trackVisible = true;\n  hasEvents = false;\n\n  private _polylineEventsSubject$ = new BehaviorSubject<IEvent[]>([]);\n\n  private deviceId$: Subject<string | number> = new Subject();\n  private timeInterval$: Subject<TimeInterval> = new Subject();\n  private reload$: BehaviorSubject<void> = new BehaviorSubject(null);\n\n  constructor(\n    private eventService: EventService,\n    private geo: GeoService\n  ) {\n    this.polyline$ = this._polylineEventsSubject$.asObservable().pipe(\n      map(events => (events || []).map(event => this.geo.getLatLong(event)).filter(identity)),\n      share()\n    );\n\n    this.events$ = combineLatest([\n      this.deviceId$.pipe(distinctUntilChanged()),\n      this.timeInterval$,\n      this.reload$\n    ]).pipe(\n      switchMap(([source, interval]) => {\n        const { dateFrom, dateTo } = interval;\n        return this.eventService.list({\n          ...TrackingService.BASE_FILTER,\n          source,\n          dateFrom: dateFrom.toISOString(),\n          dateTo: dateTo.toISOString()\n        });\n      }),\n      tap(() => this._polylineEventsSubject$.next([])),\n      share()\n    );\n\n    this.pipe = pipe(\n      tap(events => (this.hasEvents = !isEmpty(events))),\n      map((events: IEvent[]) => (events || []).filter(event => this.isMatchingEvent(event))),\n      tap((events: IEvent[]) => {\n        const prepend =\n          this.compareEvents(last(this._polylineEventsSubject$.value), first(events)) < 0;\n        const polyline: IEvent[] = prepend\n          ? [...events, ...this._polylineEventsSubject$.value]\n          : [...this._polylineEventsSubject$.value, ...events];\n\n        this._polylineEventsSubject$.next(polyline);\n      })\n    );\n  }\n\n  setDeviceId(deviceId: string | number) {\n    this.deviceId$.next(deviceId);\n  }\n\n  setInterval(interval: TimeInterval) {\n    this.timeInterval$.next(interval);\n  }\n\n  clearTrack() {\n    this._polylineEventsSubject$.next([]);\n  }\n\n  reload() {\n    this.reload$.next();\n  }\n\n  async latestPositionUpdate(mo: PositionManagedObject): Promise<Date> {\n    const dateTo = new Date();\n    dateTo.setDate(dateTo.getDate() + 1);\n\n    const filters = {\n      fragmentType: 'c8y_Position',\n      dateFrom: new Date(0).toISOString(),\n      dateTo: dateTo.toISOString(),\n      pageSize: 1,\n      source: mo.id\n    };\n    const events = await this.eventService.list(filters);\n    return events?.data?.length ? new Date(events.data[0].time) : undefined;\n  }\n\n  toggleTrack() {\n    if (this.trackVisible) {\n      this.clearTrack();\n    } else {\n      this.reload();\n    }\n    this.trackVisible = !this.trackVisible;\n  }\n\n  isLocationUpdateEvent(event: IEvent): boolean {\n    return event.type === LOCATION_UPDATE_EVENT_TYPE;\n  }\n\n  private isMatchingEvent(event: IEvent): boolean {\n    return this.isLocationUpdateEvent(event);\n  }\n\n  private compareEvents(a: IEvent, b: IEvent): number {\n    return Date.parse(a?.time) - Date.parse(b?.time);\n  }\n}\n","import { Component, Input, OnInit } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport { IEvent } from '@c8y/client';\nimport { CoreModule } from '@c8y/ngx-components';\nimport { PositionManagedObject } from '@c8y/ngx-components/map';\nimport { TrackingService } from './tracking.service';\n\n@Component({\n  standalone: true,\n  selector: 'c8y-tracking-marker-popup',\n  templateUrl: './tracking-marker-popup.component.html',\n  imports: [CoreModule, RouterModule, FormsModule]\n})\nexport class TrackingMarkerPopupComponent implements OnInit {\n  @Input()\n  context: PositionManagedObject | IEvent;\n\n  /**\n   * Displays link to device tracking tab.\n   */\n  @Input()\n  showTrackingLink = false;\n\n  isDevice: boolean;\n  date: Date;\n\n  constructor(public trackingService: TrackingService) {}\n\n  async ngOnInit() {\n    this.isDevice = !this.trackingService.isLocationUpdateEvent(this.context as unknown as IEvent);\n    if (this.isDevice) {\n      this.trackingService.setDeviceId(this.context.id);\n      this.date = await this.trackingService.latestPositionUpdate(\n        this.context as PositionManagedObject\n      );\n    } else {\n      this.date = this.context.time;\n    }\n  }\n}\n","<div class=\"map-marker\">\n  @if (isDevice) {\n    <a\n      class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n      [title]=\"context?.name\"\n      [routerLink]=\"['/device/', context?.id]\"\n    >\n      {{ context?.name }}\n    </a>\n  }\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n","import { Injectable } from '@angular/core';\nimport { ActivatedRouteSnapshot, CanActivate } from '@angular/router';\nimport { IManagedObject } from '@c8y/client';\nimport { ContextRouteService, GeoService, ViewContext } from '@c8y/ngx-components';\nimport { isEmpty } from 'lodash-es';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TrackingTabFactory implements CanActivate {\n  constructor(\n    private contextRouteService: ContextRouteService,\n    private geoService: GeoService\n  ) {}\n\n  canActivate(snapshot: ActivatedRouteSnapshot): boolean {\n    const contextData = this.contextRouteService.getContextData(snapshot);\n    return (\n      contextData?.context === ViewContext.Device &&\n      !isEmpty(this.geoService.getLatLong(contextData?.contextData as IManagedObject))\n    );\n  }\n}\n","import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { IEvent } from '@c8y/client';\nimport {\n  ActionBarModule,\n  ContextRouteService,\n  CoreModule,\n  DateRangePickerConfig,\n  EventRealtimeService,\n  LoadMoreComponent,\n  TimeInterval,\n  TimeIntervalComponent\n} from '@c8y/ngx-components';\nimport { MapComponent, MapConfig, MapModule, PositionManagedObject } from '@c8y/ngx-components/map';\nimport { TrackingMarkerPopupComponent } from './tracking-marker-popup.component';\nimport { TrackingService } from './tracking.service';\n\n@Component({\n  standalone: true,\n  templateUrl: './tracking.component.html',\n  imports: [\n    MapModule,\n    ActionBarModule,\n    CoreModule,\n    TimeIntervalComponent,\n    FormsModule,\n    TrackingMarkerPopupComponent\n  ],\n  providers: [EventRealtimeService],\n  selector: 'c8y-tracking'\n})\nexport class TrackingComponent implements OnInit, AfterViewInit {\n  @ViewChild(MapComponent)\n  map: MapComponent;\n\n  dateRangePickerConfig: DateRangePickerConfig = {\n    adaptivePosition: true,\n    showPreviousMonth: true,\n    preventChangeToNextMonth: true\n  };\n\n  config: MapConfig = {\n    realtime: true,\n    follow: false,\n    zoomLevel: 12,\n    fitBoundsOptions: {\n      padding: [50, 50]\n    }\n  };\n\n  maxDate = new Date();\n  activeMarkers: { [key: string]: boolean } = {};\n  realtimeDisabled = false;\n  device: PositionManagedObject;\n  loadMoreComponent: LoadMoreComponent;\n\n  constructor(\n    public service: TrackingService,\n    public realtime: EventRealtimeService,\n    private contextRouteService: ContextRouteService,\n    private activatedRoute: ActivatedRoute\n  ) {}\n\n  async ngOnInit() {\n    const { contextData } = this.contextRouteService.getContextData(this.activatedRoute);\n    this.device = contextData as PositionManagedObject;\n  }\n\n  async ngAfterViewInit() {\n    this.service.setDeviceId(this.device.id);\n    this.togglePositionRealtime(this.realtime.active);\n  }\n\n  toggleMarker(event: IEvent) {\n    let marker = this.map.findMarker(event);\n\n    if (marker) {\n      this.map.removeMarker(marker);\n      delete this.activeMarkers[`p${event.id}`];\n    } else {\n      marker = this.map.getTrackingMarker(event);\n      this.map.addMarkerToMap(marker);\n      this.activeMarkers[`p${event.id}`] = true;\n    }\n  }\n\n  togglePositionRealtime(active: boolean) {\n    this.config = { ...this.config, realtime: active };\n  }\n\n  toggleRealtime(interval: TimeInterval) {\n    const currentTimeInRange = Date.now() <= interval?.dateTo?.getTime();\n    this.togglePositionRealtime(currentTimeInRange);\n    this.realtimeDisabled = !currentTimeInRange;\n\n    if (currentTimeInRange) {\n      this.realtime.start();\n    } else {\n      this.realtime.stop();\n    }\n  }\n}\n","<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div\n    class=\"bg-white p-relative\"\n    style=\"min-height: 30vh\"\n  >\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      @if (!service.hasEvents) {\n        <c8y-ui-empty-state\n          icon=\"c8y-location\"\n          [title]=\"'No tracking events found.' | translate\"\n          [subtitle]=\"'Select another time range.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </ng-template>\n\n    @if (loadMoreComponent?.hasMore) {\n      <div>\n        <button\n          class=\"btn btn-link fit-w sticky-bottom separator-top\"\n          [title]=\"'Load more' | translate\"\n          type=\"button\"\n          [disabled]=\"loadMoreComponent?.isLoading\"\n          (click)=\"loadMoreComponent.loadMore()\"\n          data-cy=\"c8y-tracking--load-more\"\n        >\n          {{ 'Load more' | translate }}\n        </button>\n      </div>\n    }\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { hookRoute, ViewContext } from '@c8y/ngx-components';\nimport { TrackingTabFactory } from './tracking-tab.guard';\nimport { TrackingComponent } from './tracking.component';\n\nexport const trackingFeatureProvider: EnvironmentProviders = makeEnvironmentProviders([\n  TrackingTabFactory,\n  hookRoute({\n    path: 'tracking',\n    component: TrackingComponent,\n    context: ViewContext.Device,\n    label: gettext('Tracking'),\n    icon: 'crosshairs',\n    canActivate: [TrackingTabFactory]\n  })\n]);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.TrackingService","i1"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs

@@ -498,7 +498,7 @@ const HTML_WIDGET_AGENT = {
    - Check for mock data usage vs real API integration
    - If inadequate, ask user for specific clarifications needed
 `,
-                maxTokens: 20000
+                maxOutputTokens: 20000
             },
             type: 'text',
             mcp: [

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs","sources":["../../widgets/definitions/html-widget-ai-config/html-widget.agent.ts","../../widgets/definitions/html-widget-ai-config/ai-html-widget-config.factory.ts","../../widgets/definitions/html-widget-ai-config/index.ts","../../widgets/definitions/html-widget-ai-config/c8y-ngx-components-widgets-definitions-html-widget-ai-config.ts"],"sourcesContent":["// This file contains the definitions for the various AI agents used in the application.\n\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport type { ClientAgentDefinition } from '@c8y/ngx-components/ai';\n\ndeclare const __MODE__: string;\n\nexport const EXTRACT_TAG_NAME = 'c8y-code-extract';\n\nconst WIDGET_CODE_INSTRUCTIONS = `You are responsible for creating a Web component that is rendered on the Dashboard of the Cumulocity IoT Platform. It is written as a lit-element. The following is a very basic example:   \n\n<${EXTRACT_TAG_NAME}>\nimport { LitElement, html, css} from 'lit';\nimport { styleImports } from 'styles';\n\nexport default class DefaultWebComponent extends LitElement {\n  static styles = css\\`\n    \n:host > div {\n  padding-left: var(--c8y-root-component-padding);\n  padding-right: var(--c8y-root-component-padding);\n}\nspan.branded { \n  color: var(--c8y-brand-primary); \n}\n  \\`;\n\n  static properties = {\n    // The managed object this widget is assigned to. Can be null.\n    c8yContext: { type: Object },\n  };\n\n  constructor() {\n    super();\n  }\n\n  render() {\n    return html\\`\n      <style>\n        \\${styleImports}\n      </style>\n      <div>\n  <h1>Hello from HTML widget</h1>\n  <p>\n  You can use HTML and Javascript template literals here:\n  \\${this.c8yContext ? this.c8yContext.name : 'No device selected'}\n  </p>\n\n  <a class=\"btn btn-primary\" href=\"#/group\">Go to groups</a>\n\n  <p>\n    Use the CSS editor to add CSS. You can use <span class=\"branded\">any design-token CSS variable</span> in there.\n  </p>\n</div>\n    \\`;\n  }\n}\n</${EXTRACT_TAG_NAME}>\n\nYou are allowed to use the following ESM imports and libs:\n\njavascript\nimport { L } from 'leaflet';\nimport * as echarts from 'echarts'\nimport { fetch } from 'fetch'\n\n\nRemember to not use any leflet plugin. You are only allowed to use pure leaftlet. Always use the imported fetch function to make API calls authenticated to the Cumulocity instance.\n\nDo not include any emoji characters or Unicode symbols in the output - replace any decorative icons with plain text descriptions.\n\nAmong the UI elements that you are allowed to build on your own using HTML and CSS, here are components that you are encouraged to use in your answer:\n\n## Buttons\nYou can apply button classes to any <a>, <input>, or <button> element to style them as buttons. When using a button inside a <form> without a defined type, it defaults to type=\"submit\". To prevent accidental form submissions, always explicitly define the button's type as type=\"button\".\n\nAvailable button variants:\n- .btn-default (standard button)\n- .btn-primary (primary action)\n- .btn-success (positive action)\n- .btn-warning (caution action)\n- .btn-danger (destructive action)\n- .btn-link (text-only button)\n\nButton sizes:\n- .btn-lg (large)\n- .btn-sm (small)\n- .btn-xs (extra small)\n\n\\`\\`\\`html\n<button class=\"btn btn-primary\" type=\"button\">Primary Button</button>\n<button class=\"btn btn-default\" type=\"button\">Default Button</button>\n<button class=\"btn btn-success\" type=\"button\">Success Button</button>\n<button class=\"btn btn-warning\" type=\"button\">Warning Button</button>\n<button class=\"btn btn-danger\" type=\"button\">Danger Button</button>\n<a class=\"btn btn-link\" href=\"javascript:void(0);\">Link Button</a>\n\\`\\`\\`\n\n### Pending/Loading Buttons\nAdd .btn-pending to display an active process. The pointer-events are set to none, making the button unclickable.\n\n\\`\\`\\`html\n<button type=\"button\" aria-busy=\"true\" class=\"btn btn-primary btn-pending\">\n  Processing...\n</button>\n\\`\\`\\`\n\n### Button Groups\nGroup a series of buttons together with .btn-group. Can be used for toolbars or action groups.\n\n\\`\\`\\`html\n<div class=\"btn-group\" role=\"group\">\n  <button type=\"button\" class=\"btn btn-default\">Left</button>\n  <button type=\"button\" class=\"btn btn-default\">Middle</button>\n  <button type=\"button\" class=\"btn btn-default\">Right</button>\n</div>\n\\`\\`\\`\n\n## Alerts\nWrap your message in a <div> with .alert class and a modifier class. Always add appropriate ARIA roles:\n\n- Use role=\"status\" for informational messages\n- Use role=\"alert\" for errors or messages   \nrequiring immediate attention\n\n\\`\\`\\`html\n<div class=\"alert alert-success\" role=\"status\">\n  <strong>Success!</strong> Operation completed successfully.\n</div>\n<div class=\"alert alert-warning\" role=\"alert\">\n  <strong>Warning!</strong> Please review your settings.\n</div>\n<div class=\"alert alert-danger\" role=\"alert\">\n  <strong>Error!</strong> Failed to save data.\n</div>\n<div class=\"alert alert-info\" role=\"status\">\n  <strong>Info:</strong> New updates available.\n</div>\n<div class=\"alert alert-system\" role=\"alert\">\n  <strong>System:</strong> Maintenance scheduled.\n</div>\n\\`\\`\\`\n\n### Dismissible Alerts\nFor dismissible alerts, add a close button with proper accessibility:\n\n\\`\\`\\`html\n<div class=\"alert alert-danger alert-dismissible\" role=\"alert\">\n  <button class=\"close\" type=\"button\" @click=\"\\${() => this.dismissAlert()}\" aria-label=\"Close alert\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n  <strong>Error:</strong> Invalid credentials provided.\n</div>\n\\`\\`\\`\n\n## Badges\nBadges indicate states with specific color schemes. Add .badge with a modifier class:\n\n\\`\\`\\`html\n<span class=\"badge badge-default\">3</span>\n<span class=\"badge badge-success\">Active</span>\n<span class=\"badge badge-warning\">Pending</span>\n<span class=\"badge badge-danger\">Critical</span>\n<span class=\"badge badge-system\">System</span>\n<span class=\"badge badge-info\">72</span>\n\\`\\`\\`\n### Icon Badges\nCombine badges with icons using .c8y-icon-badge wrapper:\n\n\\`\\`\\`html\n<span class=\"c8y-icon-badge\" title=\"14 Critical alarms\">\n  <i class=\"dlt-c8y-icon-exclamation-circle status critical\"></i>\n  <span class=\"badge badge-danger\" aria-live=\"assertive\">14</span>\n</span>\n\\`\\`\\`\n\n## Loading Spinner\nShows content is being loaded or processed:\n\n\\`\\`\\`html\n<div class=\"spinner\">\n  <div class=\"rect1\"></div>\n  <div class=\"rect2\"></div>\n  <div class=\"rect3\"></div>\n  <div class=\"rect4\"></div>\n  <div class=\"rect5\"></div>\n</div>\n\\`\\`\\`\n\n## Tag\nTags highlight small pieces of information inline. They are commonly used to display categories, filters, or selected options in a visually appealing and compact manner.\n\nAdd the .tag class to any <span> or <div> together with any of the modifier classes mentioned below to change the appearance of an inline label. Add the .font-size-inherit class to inherit the font size.\n\n\\`\\`\\`html\n<h1>heading 1\n<span class=\"tag tag--default\">Default</span>\n</h1>\n<br>\n<h2>heading 2\n<span class=\"tag tag--primary\">Primary</span>\n</h2>\n<br>\n<h3>heading 3\n<span class=\"tag tag--danger\">Danger</span>\n</h3>\n<br>\n<h4>heading 4\n<span class=\"tag tag--success font-size-inherit\">Success</span>\n</h4>\n<br>\n<h5>heading 5\n<span class=\"tag tag--warning\">Warning</span>\n</h5>\n<br>\n<h6>heading 6\n<span class=\"tag tag--info\">Info</span>\n</h6>\n\\`\\`\\`\n\n## Table\nTables help you see and process great amounts of data in a tabular form. Designed for simplicity and clarity, they are an efficient way to organize and present information.\n\n\n### Default table\n\nFor basic styling—light padding and only horizontal dividers—add the base class .table to any table tag. It may seem redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we have opted to isolate our custom table styles.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table\" role=\"table\" aria-label=\"Basic data table\">\n    <caption>Optional table caption.</caption>\n    <colgroup>\n      <col width=\"20px\">\n      <col width=\"33%\">\n      <col width=\"33%\">\n      <col width=\"33%\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n### Striped rows\nUse .table-striped to add zebra-striping to any table row within the tbody tag.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-striped\" role=\"table\" aria-label=\"Striped data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n### Bordered tables\nAdd .table-bordered for borders on all sides of the table and cells.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-bordered\" role=\"table\" aria-label=\"Bordered data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n\n### Hover rows\nAdd .table-hover to enable a hover state on table rows within a tbody tag.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-hover\" role=\"table\" aria-label=\"Hoverable data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n\n### Condensed tables\nWhen in need of showing tables in a more compact way, add .table-condensed to reduce font size and cut cell padding in half.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-condensed\" role=\"table\" aria-label=\"Condensed data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td colspan=\"2\">Larry the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n## Alarms\nAlarms indicate device or system issues with varying levels of severity. Each alarm has both a severity level and a status to track its lifecycle.\n\n### Alarm Severities\n\nAlarms are classified into four severity levels, each with its own icon and use case:\n\n- **CRITICAL**: Device is out of service and requires immediate attention\n- **MAJOR**: Device has a significant problem that should be fixed\n- **MINOR**: Device has a problem that may need attention\n- **WARNING**: Informational warning that should be noted\n\n\\`\\`\\`html\n<!-- Critical Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-exclamation-circle critical\"></i>\n<span>Critical: System failure detected</span>\n\n<!-- Major Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-warning major\"></i>\n<span>Major: Service degradation</span>\n\n<!-- Minor Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-high-priority minor\"></i>\n<span>Minor: Performance threshold exceeded</span>\n\n<!-- Warning Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-circle warning\"></i>\n<span>Warning: Maintenance required soon</span>\n\n### Alarm Statuses\nAlarms progress through three possible statuses during their lifecycle:\n\n- Active: Alarm has been raised and no one is currently addressing it\n- Acknowledged: Someone has acknowledged the alarm and is working on resolution\n- Cleared: The issue has been resolved (either manually cleared or auto-resolved by the device)\n\n\\`\\`\\`html\n<!-- Active Status -->\n<i class=\"c8y-icon dlt-c8y-icon-bell\"></i>\n<span>Active alarm</span>\n\n<!-- Acknowledged Status -->\n<i class=\"c8y-icon dlt-c8y-icon-bell-slash\"></i>\n<span>Acknowledged by technician</span>\n\n<!-- Cleared Status -->\n<i class=\"c8y-icon c8y-icon-alert-idle\"></i>\n<span>Alarm cleared</span>\n\\`\\`\\`\\``;\n\nexport const HTML_WIDGET_AGENT: ClientAgentDefinition = {\n  snapshot: __MODE__ !== 'production',\n  label: gettext('HTML Widget Code assistant'),\n  definitions: [\n    {\n      name: 'c8y-html-widget',\n      agent: {\n        system: `1. **Analyze the user request**\n   - Extract specific data requirements\n   - Identify visualization needs\n   - Note any context dependencies\n\n2. **API Verification**\n   - Use the \"cumulocity-api-request\" tool to verify needed APIs\n   - Document the exact API endpoints, parameters, and expected responses\n\n3. **Coding**\n   - Put out one code block with only the code, wrap it in a <${EXTRACT_TAG_NAME}> block\n   - IMPORTANT: And no other text or markdown formatting inside the <${EXTRACT_TAG_NAME}> block\n   - build the widget code using the following rules: ${WIDGET_CODE_INSTRUCTIONS}\n\n4. **Quality Validation**\n   - Analyze if the widget fulfills the user request\n   - Check for mock data usage vs real API integration\n   - If inadequate, ask user for specific clarifications needed\n`,\n        maxTokens: 20000\n      },\n      type: 'text',\n      mcp: [\n        {\n          serverName: 'cumulocity-default',\n          tools: ['cumulocity-api-request']\n        }\n      ]\n    }\n  ]\n};\n","import { inject, Injectable } from '@angular/core';\nimport { ExtensionFactory, PreviewService } from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AIService } from '@c8y/ngx-components/ai';\nimport type { WidgetAiChatSectionComponent } from '@c8y/ngx-components/ai/agent-chat';\nimport type { WidgetConfigSectionDefinition } from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport { combineLatest, first, from, map, Observable } from 'rxjs';\nimport { HTML_WIDGET_AGENT } from './html-widget.agent';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AIHtmlWidgetConfigFactory implements ExtensionFactory<WidgetConfigSectionDefinition> {\n  private readonly betaPreviewService = inject(PreviewService);\n  private readonly aiService = inject(AIService);\n  private readonly aiWidgetConfigDefinition: WidgetConfigSectionDefinition<WidgetAiChatSectionComponent> =\n    {\n      widgetId: defaultWidgetIds.HTML,\n      label: gettext('AI Code Assistant'),\n      loadComponent: () =>\n        import('@c8y/ngx-components/ai/agent-chat').then(m => m.WidgetAiChatSectionComponent),\n      initialState: {\n        agent: HTML_WIDGET_AGENT,\n        title: gettext(\n          'I’m your AI Code Assistant, here to help you build powerful widgets for your dashboard.'\n        ),\n        welcomeText: gettext(\n          'Describe the widget you want or select one of the options below to get started.'\n        ),\n\n        loadRenderStepComponent: () =>\n          import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n            m => m.HtmlAiChatFeedbackComponent\n          ),\n\n        suggestions: [\n          {\n            label: gettext('Measurement widget'),\n            prompt: gettext('Create a widget that shows the current measurement of this device.')\n          },\n          {\n            label: gettext('Device status widget'),\n            prompt: gettext('Create a widget that shows the status of my devices.')\n          },\n          {\n            label: gettext('Critical alarm widget'),\n            prompt: gettext('Create a widget that shows all critical alarms.')\n          }\n        ]\n      },\n      priority: 100\n    };\n\n  get(): Observable<WidgetConfigSectionDefinition[]> {\n    return combineLatest([\n      from(this.aiService.getAgentHealth(HTML_WIDGET_AGENT.definitions[0].name)),\n      this.betaPreviewService.getState$('ui.html-widget.v2').pipe(first())\n    ]).pipe(\n      map(([aiExists, state]) => {\n        const shouldIncludeAi = aiExists.exists || aiExists.isProviderConfigured;\n        if (state && shouldIncludeAi) {\n          return [this.aiWidgetConfigDefinition];\n        }\n        return [];\n      })\n    );\n  }\n}\n","import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { AIHtmlWidgetConfigFactory } from './ai-html-widget-config.factory';\n\nexport const htmlWidgetAIChatProviders = [hookWidgetConfig(AIHtmlWidgetConfigFactory)];\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-widgets-definitions-html-widget-ai-config.mjs","sources":["../../widgets/definitions/html-widget-ai-config/html-widget.agent.ts","../../widgets/definitions/html-widget-ai-config/ai-html-widget-config.factory.ts","../../widgets/definitions/html-widget-ai-config/index.ts","../../widgets/definitions/html-widget-ai-config/c8y-ngx-components-widgets-definitions-html-widget-ai-config.ts"],"sourcesContent":["// This file contains the definitions for the various AI agents used in the application.\n\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport type { ClientAgentDefinition } from '@c8y/ngx-components/ai';\n\ndeclare const __MODE__: string;\n\nexport const EXTRACT_TAG_NAME = 'c8y-code-extract';\n\nconst WIDGET_CODE_INSTRUCTIONS = `You are responsible for creating a Web component that is rendered on the Dashboard of the Cumulocity IoT Platform. It is written as a lit-element. The following is a very basic example:   \n\n<${EXTRACT_TAG_NAME}>\nimport { LitElement, html, css} from 'lit';\nimport { styleImports } from 'styles';\n\nexport default class DefaultWebComponent extends LitElement {\n  static styles = css\\`\n    \n:host > div {\n  padding-left: var(--c8y-root-component-padding);\n  padding-right: var(--c8y-root-component-padding);\n}\nspan.branded { \n  color: var(--c8y-brand-primary); \n}\n  \\`;\n\n  static properties = {\n    // The managed object this widget is assigned to. Can be null.\n    c8yContext: { type: Object },\n  };\n\n  constructor() {\n    super();\n  }\n\n  render() {\n    return html\\`\n      <style>\n        \\${styleImports}\n      </style>\n      <div>\n  <h1>Hello from HTML widget</h1>\n  <p>\n  You can use HTML and Javascript template literals here:\n  \\${this.c8yContext ? this.c8yContext.name : 'No device selected'}\n  </p>\n\n  <a class=\"btn btn-primary\" href=\"#/group\">Go to groups</a>\n\n  <p>\n    Use the CSS editor to add CSS. You can use <span class=\"branded\">any design-token CSS variable</span> in there.\n  </p>\n</div>\n    \\`;\n  }\n}\n</${EXTRACT_TAG_NAME}>\n\nYou are allowed to use the following ESM imports and libs:\n\njavascript\nimport { L } from 'leaflet';\nimport * as echarts from 'echarts'\nimport { fetch } from 'fetch'\n\n\nRemember to not use any leflet plugin. You are only allowed to use pure leaftlet. Always use the imported fetch function to make API calls authenticated to the Cumulocity instance.\n\nDo not include any emoji characters or Unicode symbols in the output - replace any decorative icons with plain text descriptions.\n\nAmong the UI elements that you are allowed to build on your own using HTML and CSS, here are components that you are encouraged to use in your answer:\n\n## Buttons\nYou can apply button classes to any <a>, <input>, or <button> element to style them as buttons. When using a button inside a <form> without a defined type, it defaults to type=\"submit\". To prevent accidental form submissions, always explicitly define the button's type as type=\"button\".\n\nAvailable button variants:\n- .btn-default (standard button)\n- .btn-primary (primary action)\n- .btn-success (positive action)\n- .btn-warning (caution action)\n- .btn-danger (destructive action)\n- .btn-link (text-only button)\n\nButton sizes:\n- .btn-lg (large)\n- .btn-sm (small)\n- .btn-xs (extra small)\n\n\\`\\`\\`html\n<button class=\"btn btn-primary\" type=\"button\">Primary Button</button>\n<button class=\"btn btn-default\" type=\"button\">Default Button</button>\n<button class=\"btn btn-success\" type=\"button\">Success Button</button>\n<button class=\"btn btn-warning\" type=\"button\">Warning Button</button>\n<button class=\"btn btn-danger\" type=\"button\">Danger Button</button>\n<a class=\"btn btn-link\" href=\"javascript:void(0);\">Link Button</a>\n\\`\\`\\`\n\n### Pending/Loading Buttons\nAdd .btn-pending to display an active process. The pointer-events are set to none, making the button unclickable.\n\n\\`\\`\\`html\n<button type=\"button\" aria-busy=\"true\" class=\"btn btn-primary btn-pending\">\n  Processing...\n</button>\n\\`\\`\\`\n\n### Button Groups\nGroup a series of buttons together with .btn-group. Can be used for toolbars or action groups.\n\n\\`\\`\\`html\n<div class=\"btn-group\" role=\"group\">\n  <button type=\"button\" class=\"btn btn-default\">Left</button>\n  <button type=\"button\" class=\"btn btn-default\">Middle</button>\n  <button type=\"button\" class=\"btn btn-default\">Right</button>\n</div>\n\\`\\`\\`\n\n## Alerts\nWrap your message in a <div> with .alert class and a modifier class. Always add appropriate ARIA roles:\n\n- Use role=\"status\" for informational messages\n- Use role=\"alert\" for errors or messages   \nrequiring immediate attention\n\n\\`\\`\\`html\n<div class=\"alert alert-success\" role=\"status\">\n  <strong>Success!</strong> Operation completed successfully.\n</div>\n<div class=\"alert alert-warning\" role=\"alert\">\n  <strong>Warning!</strong> Please review your settings.\n</div>\n<div class=\"alert alert-danger\" role=\"alert\">\n  <strong>Error!</strong> Failed to save data.\n</div>\n<div class=\"alert alert-info\" role=\"status\">\n  <strong>Info:</strong> New updates available.\n</div>\n<div class=\"alert alert-system\" role=\"alert\">\n  <strong>System:</strong> Maintenance scheduled.\n</div>\n\\`\\`\\`\n\n### Dismissible Alerts\nFor dismissible alerts, add a close button with proper accessibility:\n\n\\`\\`\\`html\n<div class=\"alert alert-danger alert-dismissible\" role=\"alert\">\n  <button class=\"close\" type=\"button\" @click=\"\\${() => this.dismissAlert()}\" aria-label=\"Close alert\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n  <strong>Error:</strong> Invalid credentials provided.\n</div>\n\\`\\`\\`\n\n## Badges\nBadges indicate states with specific color schemes. Add .badge with a modifier class:\n\n\\`\\`\\`html\n<span class=\"badge badge-default\">3</span>\n<span class=\"badge badge-success\">Active</span>\n<span class=\"badge badge-warning\">Pending</span>\n<span class=\"badge badge-danger\">Critical</span>\n<span class=\"badge badge-system\">System</span>\n<span class=\"badge badge-info\">72</span>\n\\`\\`\\`\n### Icon Badges\nCombine badges with icons using .c8y-icon-badge wrapper:\n\n\\`\\`\\`html\n<span class=\"c8y-icon-badge\" title=\"14 Critical alarms\">\n  <i class=\"dlt-c8y-icon-exclamation-circle status critical\"></i>\n  <span class=\"badge badge-danger\" aria-live=\"assertive\">14</span>\n</span>\n\\`\\`\\`\n\n## Loading Spinner\nShows content is being loaded or processed:\n\n\\`\\`\\`html\n<div class=\"spinner\">\n  <div class=\"rect1\"></div>\n  <div class=\"rect2\"></div>\n  <div class=\"rect3\"></div>\n  <div class=\"rect4\"></div>\n  <div class=\"rect5\"></div>\n</div>\n\\`\\`\\`\n\n## Tag\nTags highlight small pieces of information inline. They are commonly used to display categories, filters, or selected options in a visually appealing and compact manner.\n\nAdd the .tag class to any <span> or <div> together with any of the modifier classes mentioned below to change the appearance of an inline label. Add the .font-size-inherit class to inherit the font size.\n\n\\`\\`\\`html\n<h1>heading 1\n<span class=\"tag tag--default\">Default</span>\n</h1>\n<br>\n<h2>heading 2\n<span class=\"tag tag--primary\">Primary</span>\n</h2>\n<br>\n<h3>heading 3\n<span class=\"tag tag--danger\">Danger</span>\n</h3>\n<br>\n<h4>heading 4\n<span class=\"tag tag--success font-size-inherit\">Success</span>\n</h4>\n<br>\n<h5>heading 5\n<span class=\"tag tag--warning\">Warning</span>\n</h5>\n<br>\n<h6>heading 6\n<span class=\"tag tag--info\">Info</span>\n</h6>\n\\`\\`\\`\n\n## Table\nTables help you see and process great amounts of data in a tabular form. Designed for simplicity and clarity, they are an efficient way to organize and present information.\n\n\n### Default table\n\nFor basic styling—light padding and only horizontal dividers—add the base class .table to any table tag. It may seem redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we have opted to isolate our custom table styles.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table\" role=\"table\" aria-label=\"Basic data table\">\n    <caption>Optional table caption.</caption>\n    <colgroup>\n      <col width=\"20px\">\n      <col width=\"33%\">\n      <col width=\"33%\">\n      <col width=\"33%\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n### Striped rows\nUse .table-striped to add zebra-striping to any table row within the tbody tag.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-striped\" role=\"table\" aria-label=\"Striped data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n### Bordered tables\nAdd .table-bordered for borders on all sides of the table and cells.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-bordered\" role=\"table\" aria-label=\"Bordered data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n\n### Hover rows\nAdd .table-hover to enable a hover state on table rows within a tbody tag.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-hover\" role=\"table\" aria-label=\"Hoverable data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n\n### Condensed tables\nWhen in need of showing tables in a more compact way, add .table-condensed to reduce font size and cut cell padding in half.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-condensed\" role=\"table\" aria-label=\"Condensed data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td colspan=\"2\">Larry the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n## Alarms\nAlarms indicate device or system issues with varying levels of severity. Each alarm has both a severity level and a status to track its lifecycle.\n\n### Alarm Severities\n\nAlarms are classified into four severity levels, each with its own icon and use case:\n\n- **CRITICAL**: Device is out of service and requires immediate attention\n- **MAJOR**: Device has a significant problem that should be fixed\n- **MINOR**: Device has a problem that may need attention\n- **WARNING**: Informational warning that should be noted\n\n\\`\\`\\`html\n<!-- Critical Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-exclamation-circle critical\"></i>\n<span>Critical: System failure detected</span>\n\n<!-- Major Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-warning major\"></i>\n<span>Major: Service degradation</span>\n\n<!-- Minor Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-high-priority minor\"></i>\n<span>Minor: Performance threshold exceeded</span>\n\n<!-- Warning Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-circle warning\"></i>\n<span>Warning: Maintenance required soon</span>\n\n### Alarm Statuses\nAlarms progress through three possible statuses during their lifecycle:\n\n- Active: Alarm has been raised and no one is currently addressing it\n- Acknowledged: Someone has acknowledged the alarm and is working on resolution\n- Cleared: The issue has been resolved (either manually cleared or auto-resolved by the device)\n\n\\`\\`\\`html\n<!-- Active Status -->\n<i class=\"c8y-icon dlt-c8y-icon-bell\"></i>\n<span>Active alarm</span>\n\n<!-- Acknowledged Status -->\n<i class=\"c8y-icon dlt-c8y-icon-bell-slash\"></i>\n<span>Acknowledged by technician</span>\n\n<!-- Cleared Status -->\n<i class=\"c8y-icon c8y-icon-alert-idle\"></i>\n<span>Alarm cleared</span>\n\\`\\`\\`\\``;\n\nexport const HTML_WIDGET_AGENT: ClientAgentDefinition = {\n  snapshot: __MODE__ !== 'production',\n  label: gettext('HTML Widget Code assistant'),\n  definitions: [\n    {\n      name: 'c8y-html-widget',\n      agent: {\n        system: `1. **Analyze the user request**\n   - Extract specific data requirements\n   - Identify visualization needs\n   - Note any context dependencies\n\n2. **API Verification**\n   - Use the \"cumulocity-api-request\" tool to verify needed APIs\n   - Document the exact API endpoints, parameters, and expected responses\n\n3. **Coding**\n   - Put out one code block with only the code, wrap it in a <${EXTRACT_TAG_NAME}> block\n   - IMPORTANT: And no other text or markdown formatting inside the <${EXTRACT_TAG_NAME}> block\n   - build the widget code using the following rules: ${WIDGET_CODE_INSTRUCTIONS}\n\n4. **Quality Validation**\n   - Analyze if the widget fulfills the user request\n   - Check for mock data usage vs real API integration\n   - If inadequate, ask user for specific clarifications needed\n`,\n        maxOutputTokens: 20000\n      },\n      type: 'text',\n      mcp: [\n        {\n          serverName: 'cumulocity-default',\n          tools: ['cumulocity-api-request']\n        }\n      ]\n    }\n  ]\n};\n","import { inject, Injectable } from '@angular/core';\nimport { ExtensionFactory, PreviewService } from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AIService } from '@c8y/ngx-components/ai';\nimport type { WidgetAiChatSectionComponent } from '@c8y/ngx-components/ai/agent-chat';\nimport type { WidgetConfigSectionDefinition } from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport { combineLatest, first, from, map, Observable } from 'rxjs';\nimport { HTML_WIDGET_AGENT } from './html-widget.agent';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AIHtmlWidgetConfigFactory implements ExtensionFactory<WidgetConfigSectionDefinition> {\n  private readonly betaPreviewService = inject(PreviewService);\n  private readonly aiService = inject(AIService);\n  private readonly aiWidgetConfigDefinition: WidgetConfigSectionDefinition<WidgetAiChatSectionComponent> =\n    {\n      widgetId: defaultWidgetIds.HTML,\n      label: gettext('AI Code Assistant'),\n      loadComponent: () =>\n        import('@c8y/ngx-components/ai/agent-chat').then(m => m.WidgetAiChatSectionComponent),\n      initialState: {\n        agent: HTML_WIDGET_AGENT,\n        title: gettext(\n          'I’m your AI Code Assistant, here to help you build powerful widgets for your dashboard.'\n        ),\n        welcomeText: gettext(\n          'Describe the widget you want or select one of the options below to get started.'\n        ),\n\n        loadRenderStepComponent: () =>\n          import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n            m => m.HtmlAiChatFeedbackComponent\n          ),\n\n        suggestions: [\n          {\n            label: gettext('Measurement widget'),\n            prompt: gettext('Create a widget that shows the current measurement of this device.')\n          },\n          {\n            label: gettext('Device status widget'),\n            prompt: gettext('Create a widget that shows the status of my devices.')\n          },\n          {\n            label: gettext('Critical alarm widget'),\n            prompt: gettext('Create a widget that shows all critical alarms.')\n          }\n        ]\n      },\n      priority: 100\n    };\n\n  get(): Observable<WidgetConfigSectionDefinition[]> {\n    return combineLatest([\n      from(this.aiService.getAgentHealth(HTML_WIDGET_AGENT.definitions[0].name)),\n      this.betaPreviewService.getState$('ui.html-widget.v2').pipe(first())\n    ]).pipe(\n      map(([aiExists, state]) => {\n        const shouldIncludeAi = aiExists.exists || aiExists.isProviderConfigured;\n        if (state && shouldIncludeAi) {\n          return [this.aiWidgetConfigDefinition];\n        }\n        return [];\n      })\n    );\n  }\n}\n","import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { AIHtmlWidgetConfigFactory } from './ai-html-widget-config.factory';\n\nexport const htmlWidgetAIChatProviders = [hookWidgetConfig(AIHtmlWidgetConfigFactory)];\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

@@ -110,6 +110,7 @@ class DatapointsGraphWidgetConfigComponent {
                 displayMarkedPoint: formValue.displayMarkedPoint,
                 mergeMatchingDatapoints: formValue.mergeMatchingDatapoints,
                 forceMergeDatapoints: formValue.forceMergeDatapoints,
+                smoothLines: formValue.smoothLines,
                 showLabelAndUnit: formValue.showLabelAndUnit,
                 showSlider: formValue.showSlider,
                 yAxisSplitLines: formValue.yAxisSplitLines,
@@ -220,6 +221,7 @@ class DatapointsGraphWidgetConfigComponent {
             displayMarkedPoint: [true, []],
             mergeMatchingDatapoints: [true, []],
             forceMergeDatapoints: [false, []],
+            smoothLines: [false, []],
             showLabelAndUnit: [true, []],
             displayAggregationSelection: [false, []],
             canDecoupleGlobalTimeContext: [false, []],
@@ -241,7 +243,7 @@ class DatapointsGraphWidgetConfigComponent {
             ChartAlarmsService,
             ChartHelpersService,
             WidgetTimeContextDateRangeService
-        ], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <c8y-datapoint-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"datapoints\"\n    [minActiveCount]=\"1\"\n    [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n    [config]=\"datapointSelectionConfig\"\n    formControlName=\"datapoints\"\n  ></c8y-datapoint-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"alarms\"\n    formControlName=\"alarms\"\n    [timelineType]=\"'ALARM'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-inherit\"\n    name=\"events\"\n    formControlName=\"events\"\n    [timelineType]=\"'EVENT'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <div class=\"form-group form-group-sm\">\n    <label\n      [title]=\"'Number of decimal places' | translate\"\n      translate\n    >\n      Number of decimal places\n    </label>\n    <input\n      class=\"form-control\"\n      name=\"numberOfDecimalPlaces\"\n      type=\"number\"\n      formControlName=\"numberOfDecimalPlaces\"\n      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n    />\n    <c8y-messages\n      [show]=\"\n        formGroup.controls?.numberOfDecimalPlaces?.touched &&\n        formGroup?.controls?.numberOfDecimalPlaces?.errors\n      \"\n    ></c8y-messages>\n  </div>\n  <c8y-form-group class=\"form-group-sm\">\n    <label>\n      {{ 'Data point legend display' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n    >\n      <select\n        class=\"form-control\"\n        [title]=\"'Data point legend display' | translate\"\n        id=\"dataPointLegendDisplay\"\n        formControlName=\"dataPointLegendDisplay\"\n      >\n        @for (option of legendDisplayOptions; track option) {\n          <option [ngValue]=\"option.value\">\n            {{ option.label | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n</form>\n\n<form\n  class=\"d-block p-t-8\"\n  [formGroup]=\"formGroup\"\n>\n  <label>{{ 'Display options' | translate }}</label>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Axis' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Y-axis helper lines' | translate\"\n      >\n        <input\n          name=\"yAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"yAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>Y-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'X-axis helper lines' | translate\"\n      >\n        <input\n          name=\"xAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"xAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>X-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Merge matching data points into single axis' | translate\"\n      >\n        <input\n          name=\"mergeMatchingDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"mergeMatchingDatapoints\"\n        />\n        <span></span>\n        <span translate>Merge matching data points into single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          [popover]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Force merge all data points into single axis' | translate\"\n      >\n        <input\n          name=\"forceMergeDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"forceMergeDatapoints\"\n        />\n        <span></span>\n        <span translate>Force merge all datapoints into a single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          [popover]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Alarms & events' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show vertical line on every occurrence' | translate\"\n      >\n        <input\n          name=\"displayMarkedLine\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedLine\"\n        />\n        <span></span>\n        <span translate>Show vertical line on every occurrence</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show icon when triggered' | translate\"\n      >\n        <input\n          name=\"displayMarkedPoint\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedPoint\"\n        />\n        <span></span>\n        <span translate>Show icon when triggered</span>\n        @if (alarmsOrEventsHaveNoMatchingDps) {\n          <button\n            class=\"btn-clean m-l-8\"\n            [attr.aria-label]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            [tooltip]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            container=\"body\"\n            type=\"button\"\n            (click)=\"$event.stopPropagation()\"\n            [adaptivePosition]=\"false\"\n          >\n            <i\n              class=\"text-warning\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        }\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Chart' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show labels and units' | translate\"\n      >\n        <input\n          name=\"showLabelAndUnit\"\n          type=\"checkbox\"\n          formControlName=\"showLabelAndUnit\"\n        />\n        <span></span>\n        <span translate>Display labels and units on Y-axis</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show slider' | translate\"\n      >\n        <input\n          name=\"showSlider\"\n          type=\"checkbox\"\n          formControlName=\"showSlider\"\n        />\n        <span></span>\n        <span translate>Show slider</span>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #dataPointsGraphPreview>\n  @if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [config]=\"config\"\n      [displayMode]=\"'preview'\"\n      [widgetControls]=\"widgetControls\"\n    ></c8y-global-context-widget-wrapper>\n  }\n\n  @if (activeDatapointsExists) {\n    <c8y-charts\n      class=\"d-block p-relative\"\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n  }\n\n  @if (!activeDatapointsExists) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No data points selected' | translate\"\n      [subtitle]=\"'Select data point to render content' | translate\"\n      data-cy=\"datapoints-graph-list--empty-state-no-data-point-selected\"\n    >\n      <p c8y-guide-docs>\n        <small translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-graph\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.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: PopoverModule }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i6.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i7.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <c8y-datapoint-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"datapoints\"\n    [minActiveCount]=\"1\"\n    [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n    [config]=\"datapointSelectionConfig\"\n    formControlName=\"datapoints\"\n  ></c8y-datapoint-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"alarms\"\n    formControlName=\"alarms\"\n    [timelineType]=\"'ALARM'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-inherit\"\n    name=\"events\"\n    formControlName=\"events\"\n    [timelineType]=\"'EVENT'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <div class=\"form-group form-group-sm\">\n    <label\n      [title]=\"'Number of decimal places' | translate\"\n      translate\n    >\n      Number of decimal places\n    </label>\n    <input\n      class=\"form-control\"\n      name=\"numberOfDecimalPlaces\"\n      type=\"number\"\n      formControlName=\"numberOfDecimalPlaces\"\n      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n    />\n    <c8y-messages\n      [show]=\"\n        formGroup.controls?.numberOfDecimalPlaces?.touched &&\n        formGroup?.controls?.numberOfDecimalPlaces?.errors\n      \"\n    ></c8y-messages>\n  </div>\n  <c8y-form-group class=\"form-group-sm\">\n    <label>\n      {{ 'Data point legend display' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n    >\n      <select\n        class=\"form-control\"\n        [title]=\"'Data point legend display' | translate\"\n        id=\"dataPointLegendDisplay\"\n        formControlName=\"dataPointLegendDisplay\"\n      >\n        @for (option of legendDisplayOptions; track option) {\n          <option [ngValue]=\"option.value\">\n            {{ option.label | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n</form>\n\n<form\n  class=\"d-block p-t-8\"\n  [formGroup]=\"formGroup\"\n>\n  <label>{{ 'Display options' | translate }}</label>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Axis' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Y-axis helper lines' | translate\"\n      >\n        <input\n          name=\"yAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"yAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>Y-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'X-axis helper lines' | translate\"\n      >\n        <input\n          name=\"xAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"xAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>X-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Merge matching data points into single axis' | translate\"\n      >\n        <input\n          name=\"mergeMatchingDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"mergeMatchingDatapoints\"\n        />\n        <span></span>\n        <span translate>Merge matching data points into single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          [popover]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Force merge all data points into single axis' | translate\"\n      >\n        <input\n          name=\"forceMergeDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"forceMergeDatapoints\"\n        />\n        <span></span>\n        <span translate>Force merge all datapoints into a single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          [popover]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Alarms & events' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show vertical line on every occurrence' | translate\"\n      >\n        <input\n          name=\"displayMarkedLine\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedLine\"\n        />\n        <span></span>\n        <span translate>Show vertical line on every occurrence</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show icon when triggered' | translate\"\n      >\n        <input\n          name=\"displayMarkedPoint\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedPoint\"\n        />\n        <span></span>\n        <span translate>Show icon when triggered</span>\n        @if (alarmsOrEventsHaveNoMatchingDps) {\n          <button\n            class=\"btn-clean m-l-8\"\n            [attr.aria-label]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            [tooltip]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            container=\"body\"\n            type=\"button\"\n            (click)=\"$event.stopPropagation()\"\n            [adaptivePosition]=\"false\"\n          >\n            <i\n              class=\"text-warning\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        }\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Chart' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show labels and units' | translate\"\n      >\n        <input\n          name=\"showLabelAndUnit\"\n          type=\"checkbox\"\n          formControlName=\"showLabelAndUnit\"\n        />\n        <span></span>\n        <span translate>Display labels and units on Y-axis</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show slider' | translate\"\n      >\n        <input\n          name=\"showSlider\"\n          type=\"checkbox\"\n          formControlName=\"showSlider\"\n        />\n        <span></span>\n        <span translate>Show slider</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show smooth lines' | translate\"\n      >\n        <input\n          name=\"smoothLines\"\n          type=\"checkbox\"\n          formControlName=\"smoothLines\"\n        />\n        <span></span>\n        <span translate>Show smooth lines</span>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #dataPointsGraphPreview>\n  @if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [config]=\"config\"\n      [displayMode]=\"'preview'\"\n      [widgetControls]=\"widgetControls\"\n    ></c8y-global-context-widget-wrapper>\n  }\n\n  @if (activeDatapointsExists) {\n    <c8y-charts\n      class=\"d-block p-relative\"\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n  }\n\n  @if (!activeDatapointsExists) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No data points selected' | translate\"\n      [subtitle]=\"'Select data point to render content' | translate\"\n      data-cy=\"datapoints-graph-list--empty-state-no-data-point-selected\"\n    >\n      <p c8y-guide-docs>\n        <small translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-graph\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.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: PopoverModule }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i6.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i7.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, decorators: [{
             type: Component,
@@ -260,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         ChartAlarmsService,
                         ChartHelpersService,
                         WidgetTimeContextDateRangeService
-                    ], template: "<form [formGroup]=\"formGroup\">\n  <c8y-datapoint-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"datapoints\"\n    [minActiveCount]=\"1\"\n    [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n    [config]=\"datapointSelectionConfig\"\n    formControlName=\"datapoints\"\n  ></c8y-datapoint-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"alarms\"\n    formControlName=\"alarms\"\n    [timelineType]=\"'ALARM'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-inherit\"\n    name=\"events\"\n    formControlName=\"events\"\n    [timelineType]=\"'EVENT'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <div class=\"form-group form-group-sm\">\n    <label\n      [title]=\"'Number of decimal places' | translate\"\n      translate\n    >\n      Number of decimal places\n    </label>\n    <input\n      class=\"form-control\"\n      name=\"numberOfDecimalPlaces\"\n      type=\"number\"\n      formControlName=\"numberOfDecimalPlaces\"\n      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n    />\n    <c8y-messages\n      [show]=\"\n        formGroup.controls?.numberOfDecimalPlaces?.touched &&\n        formGroup?.controls?.numberOfDecimalPlaces?.errors\n      \"\n    ></c8y-messages>\n  </div>\n  <c8y-form-group class=\"form-group-sm\">\n    <label>\n      {{ 'Data point legend display' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n    >\n      <select\n        class=\"form-control\"\n        [title]=\"'Data point legend display' | translate\"\n        id=\"dataPointLegendDisplay\"\n        formControlName=\"dataPointLegendDisplay\"\n      >\n        @for (option of legendDisplayOptions; track option) {\n          <option [ngValue]=\"option.value\">\n            {{ option.label | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n</form>\n\n<form\n  class=\"d-block p-t-8\"\n  [formGroup]=\"formGroup\"\n>\n  <label>{{ 'Display options' | translate }}</label>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Axis' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Y-axis helper lines' | translate\"\n      >\n        <input\n          name=\"yAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"yAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>Y-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'X-axis helper lines' | translate\"\n      >\n        <input\n          name=\"xAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"xAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>X-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Merge matching data points into single axis' | translate\"\n      >\n        <input\n          name=\"mergeMatchingDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"mergeMatchingDatapoints\"\n        />\n        <span></span>\n        <span translate>Merge matching data points into single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          [popover]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Force merge all data points into single axis' | translate\"\n      >\n        <input\n          name=\"forceMergeDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"forceMergeDatapoints\"\n        />\n        <span></span>\n        <span translate>Force merge all datapoints into a single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          [popover]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Alarms & events' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show vertical line on every occurrence' | translate\"\n      >\n        <input\n          name=\"displayMarkedLine\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedLine\"\n        />\n        <span></span>\n        <span translate>Show vertical line on every occurrence</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show icon when triggered' | translate\"\n      >\n        <input\n          name=\"displayMarkedPoint\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedPoint\"\n        />\n        <span></span>\n        <span translate>Show icon when triggered</span>\n        @if (alarmsOrEventsHaveNoMatchingDps) {\n          <button\n            class=\"btn-clean m-l-8\"\n            [attr.aria-label]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            [tooltip]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            container=\"body\"\n            type=\"button\"\n            (click)=\"$event.stopPropagation()\"\n            [adaptivePosition]=\"false\"\n          >\n            <i\n              class=\"text-warning\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        }\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Chart' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show labels and units' | translate\"\n      >\n        <input\n          name=\"showLabelAndUnit\"\n          type=\"checkbox\"\n          formControlName=\"showLabelAndUnit\"\n        />\n        <span></span>\n        <span translate>Display labels and units on Y-axis</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show slider' | translate\"\n      >\n        <input\n          name=\"showSlider\"\n          type=\"checkbox\"\n          formControlName=\"showSlider\"\n        />\n        <span></span>\n        <span translate>Show slider</span>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #dataPointsGraphPreview>\n  @if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [config]=\"config\"\n      [displayMode]=\"'preview'\"\n      [widgetControls]=\"widgetControls\"\n    ></c8y-global-context-widget-wrapper>\n  }\n\n  @if (activeDatapointsExists) {\n    <c8y-charts\n      class=\"d-block p-relative\"\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n  }\n\n  @if (!activeDatapointsExists) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No data points selected' | translate\"\n      [subtitle]=\"'Select data point to render content' | translate\"\n      data-cy=\"datapoints-graph-list--empty-state-no-data-point-selected\"\n    >\n      <p c8y-guide-docs>\n        <small translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-graph\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n</ng-template>\n" }]
+                    ], template: "<form [formGroup]=\"formGroup\">\n  <c8y-datapoint-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"datapoints\"\n    [minActiveCount]=\"1\"\n    [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n    [config]=\"datapointSelectionConfig\"\n    formControlName=\"datapoints\"\n  ></c8y-datapoint-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"alarms\"\n    formControlName=\"alarms\"\n    [timelineType]=\"'ALARM'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-inherit\"\n    name=\"events\"\n    formControlName=\"events\"\n    [timelineType]=\"'EVENT'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <div class=\"form-group form-group-sm\">\n    <label\n      [title]=\"'Number of decimal places' | translate\"\n      translate\n    >\n      Number of decimal places\n    </label>\n    <input\n      class=\"form-control\"\n      name=\"numberOfDecimalPlaces\"\n      type=\"number\"\n      formControlName=\"numberOfDecimalPlaces\"\n      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n    />\n    <c8y-messages\n      [show]=\"\n        formGroup.controls?.numberOfDecimalPlaces?.touched &&\n        formGroup?.controls?.numberOfDecimalPlaces?.errors\n      \"\n    ></c8y-messages>\n  </div>\n  <c8y-form-group class=\"form-group-sm\">\n    <label>\n      {{ 'Data point legend display' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n    >\n      <select\n        class=\"form-control\"\n        [title]=\"'Data point legend display' | translate\"\n        id=\"dataPointLegendDisplay\"\n        formControlName=\"dataPointLegendDisplay\"\n      >\n        @for (option of legendDisplayOptions; track option) {\n          <option [ngValue]=\"option.value\">\n            {{ option.label | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n</form>\n\n<form\n  class=\"d-block p-t-8\"\n  [formGroup]=\"formGroup\"\n>\n  <label>{{ 'Display options' | translate }}</label>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Axis' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Y-axis helper lines' | translate\"\n      >\n        <input\n          name=\"yAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"yAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>Y-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'X-axis helper lines' | translate\"\n      >\n        <input\n          name=\"xAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"xAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>X-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Merge matching data points into single axis' | translate\"\n      >\n        <input\n          name=\"mergeMatchingDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"mergeMatchingDatapoints\"\n        />\n        <span></span>\n        <span translate>Merge matching data points into single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          [popover]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Force merge all data points into single axis' | translate\"\n      >\n        <input\n          name=\"forceMergeDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"forceMergeDatapoints\"\n        />\n        <span></span>\n        <span translate>Force merge all datapoints into a single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          [popover]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Alarms & events' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show vertical line on every occurrence' | translate\"\n      >\n        <input\n          name=\"displayMarkedLine\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedLine\"\n        />\n        <span></span>\n        <span translate>Show vertical line on every occurrence</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show icon when triggered' | translate\"\n      >\n        <input\n          name=\"displayMarkedPoint\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedPoint\"\n        />\n        <span></span>\n        <span translate>Show icon when triggered</span>\n        @if (alarmsOrEventsHaveNoMatchingDps) {\n          <button\n            class=\"btn-clean m-l-8\"\n            [attr.aria-label]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            [tooltip]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            container=\"body\"\n            type=\"button\"\n            (click)=\"$event.stopPropagation()\"\n            [adaptivePosition]=\"false\"\n          >\n            <i\n              class=\"text-warning\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        }\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Chart' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show labels and units' | translate\"\n      >\n        <input\n          name=\"showLabelAndUnit\"\n          type=\"checkbox\"\n          formControlName=\"showLabelAndUnit\"\n        />\n        <span></span>\n        <span translate>Display labels and units on Y-axis</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show slider' | translate\"\n      >\n        <input\n          name=\"showSlider\"\n          type=\"checkbox\"\n          formControlName=\"showSlider\"\n        />\n        <span></span>\n        <span translate>Show slider</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show smooth lines' | translate\"\n      >\n        <input\n          name=\"smoothLines\"\n          type=\"checkbox\"\n          formControlName=\"smoothLines\"\n        />\n        <span></span>\n        <span translate>Show smooth lines</span>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #dataPointsGraphPreview>\n  @if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [config]=\"config\"\n      [displayMode]=\"'preview'\"\n      [widgetControls]=\"widgetControls\"\n    ></c8y-global-context-widget-wrapper>\n  }\n\n  @if (activeDatapointsExists) {\n    <c8y-charts\n      class=\"d-block p-relative\"\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n  }\n\n  @if (!activeDatapointsExists) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No data points selected' | translate\"\n      [subtitle]=\"'Select data point to render content' | translate\"\n      data-cy=\"datapoints-graph-list--empty-state-no-data-point-selected\"\n    >\n      <p c8y-guide-docs>\n        <small translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-graph\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.WidgetConfigComponent, decorators: [{
                     type: Optional
                 }] }, { type: i1.ContextDashboardComponent, decorators: [{