@c8y/ngx-components 1021.52.0 → 1021.54.4

package/fesm2022/c8y-ngx-components-time-context.mjs

@@ -0,0 +1,300 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, DestroyRef, model, Component, Input, ViewChild } from '@angular/core';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3 from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
+import * as i1 from '@c8y/ngx-components';
+import { AGGREGATION_LIMITS, CoreModule, DateTimePickerModule, AggregationPickerComponent, RealtimeControlComponent } from '@c8y/ngx-components';
+import { INTERVALS, TimeSpanInMs, INTERVAL_TITLES, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import * as i4 from 'ngx-bootstrap/dropdown';
+import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import * as i5 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { interval } from 'rxjs';
+import { aggregationType } from '@c8y/client';
+import * as i2 from '@angular/common';
+
+class DatapointExplorerService {
+    constructor() {
+        this.DEFAULT_INTERVAL = 'days';
+    }
+    // Create generic? Based on packages/ngx-components/core/dashboard/wiget-time-context/widget-time-context.component.html
+    getDefaultContext() {
+        return {
+            date: this.getDateTimeContextByInterval(this.DEFAULT_INTERVAL),
+            interval: this.DEFAULT_INTERVAL,
+            realtime: false,
+            aggregation: aggregationType.MINUTELY
+        };
+    }
+    calculateAggregation([dateFrom, dateTo], requestedAggregation) {
+        const timeRangeValidations = this.validateTimeRanges([dateFrom, dateTo]);
+        const disabledAggregations = this.getDisabledAggregations(timeRangeValidations);
+        const timeRangeInMs = this.getTimeRangeInMs(dateFrom, dateTo);
+        const isRequestedAggregationValid = requestedAggregation === null || !disabledAggregations[requestedAggregation];
+        const selectedAggregation = isRequestedAggregationValid
+            ? requestedAggregation
+            : this.determineAggregation(timeRangeInMs);
+        return {
+            selectedAggregation,
+            disabledAggregations
+        };
+    }
+    getDateTimeContextByInterval(intervalId) {
+        const interval = INTERVALS.find(({ id }) => id === intervalId);
+        const dateTo = new Date();
+        const dateFrom = new Date(dateTo.valueOf() - interval.timespanInMs);
+        return [dateFrom, dateTo];
+    }
+    getTimeRangeInMs(dateFrom, dateTo) {
+        return dateTo.valueOf() - dateFrom.valueOf();
+    }
+    validateTimeRanges([dateFrom, dateTo]) {
+        const timeRangeInMs = this.getTimeRangeInMs(dateFrom, dateTo);
+        return [
+            {
+                aggregationType: aggregationType.DAILY,
+                isDisabled: timeRangeInMs <= TimeSpanInMs.DAY
+            },
+            {
+                aggregationType: aggregationType.HOURLY,
+                isDisabled: timeRangeInMs <= TimeSpanInMs.HOUR
+            },
+            {
+                aggregationType: aggregationType.MINUTELY,
+                isDisabled: timeRangeInMs <= TimeSpanInMs.MINUTE
+            }
+        ];
+    }
+    getDisabledAggregations(timeRangeValidations) {
+        return timeRangeValidations.reduce((acc, { aggregationType, isDisabled }) => ({
+            ...acc,
+            [aggregationType]: isDisabled
+        }), {});
+    }
+    determineAggregation(timeRangeInMs) {
+        if (timeRangeInMs >= AGGREGATION_LIMITS.DAILY_LIMIT) {
+            return aggregationType.DAILY;
+        }
+        else if (timeRangeInMs >= AGGREGATION_LIMITS.HOURLY_LIMIT) {
+            return aggregationType.HOURLY;
+        }
+        else if (timeRangeInMs >= AGGREGATION_LIMITS.MINUTELY_LIMIT) {
+            return aggregationType.MINUTELY;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointExplorerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointExplorerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TimeContextComponent {
+    #destroyRef;
+    constructor(widgetTimeContextDateRangeService) {
+        this.widgetTimeContextDateRangeService = widgetTimeContextDateRangeService;
+        this.datapointExplorerService = inject(DatapointExplorerService);
+        this.formBuilder = inject(FormBuilder);
+        this.#destroyRef = inject(DestroyRef);
+        this.DATE_FORMAT = 'short';
+        this.INTERVAL_TITLES = INTERVAL_TITLES;
+        this.REALTIME_INTERVAL = 1000;
+        this.form = this.createForm(this.datapointExplorerService.getDefaultContext());
+        this.valuesSignal = toSignal(this.form.controls.currentDateContextFromDate.valueChanges, {
+            initialValue: this.form.controls.currentDateContextFromDate.value
+        });
+        this.context = model(this.form.value);
+        const context = this.datapointExplorerService.getDefaultContext();
+        const { disabledAggregations } = this.datapointExplorerService.calculateAggregation(context.date, context.aggregation);
+        this.disabledAggregations = disabledAggregations;
+        this.subscribeToIntervalChange();
+        this.subscribeToRealtimeChange();
+        this.subscribeToAggregationChange();
+    }
+    ngOnChanges(changes) {
+        if (changes.changedDateContext && changes.changedDateContext.currentValue) {
+            this.update({
+                date: [this.changedDateContext.dateFrom, this.changedDateContext.dateTo],
+                interval: this.changedDateContext.interval,
+                realtime: this.changedDateContext.realtime || false,
+                aggregation: this.changedDateContext.aggregation
+            });
+            if (this.changedDateContext.realtime) {
+                this.form.controls.aggregation.disable();
+            }
+        }
+    }
+    applyDatetimeContext() {
+        this.update({
+            date: [
+                new Date(this.form.controls.temporaryUserSelectedFromDate.value),
+                new Date(this.form.controls.temporaryUserSelectedToDate.value)
+            ],
+            interval: 'custom',
+            realtime: this.form.value.realtime,
+            aggregation: this.form.value.aggregation
+        });
+    }
+    subscribeToIntervalChange() {
+        this.form.controls.currentDateContextInterval.valueChanges
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(interval => {
+            let date;
+            this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);
+            if (interval === 'custom') {
+                date = [
+                    new Date(this.form.controls.currentDateContextFromDate.value),
+                    new Date(this.form.controls.currentDateContextToDate.value)
+                ];
+            }
+            else {
+                date = this.datapointExplorerService.getDateTimeContextByInterval(interval);
+                this.dropdown.isOpen = false;
+            }
+            this.update({
+                date,
+                interval,
+                realtime: this.form.value.realtime,
+                aggregation: this.form.value.aggregation
+            });
+        });
+    }
+    subscribeToRealtimeChange() {
+        this.form.controls.realtime.valueChanges
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(realtime => {
+            this.onRealtimeValueChange(realtime);
+            if (realtime) {
+                this.startRealtime();
+            }
+            else {
+                this.stopRealtime();
+            }
+        });
+    }
+    subscribeToAggregationChange() {
+        this.form.controls.aggregation.valueChanges
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(aggregation => {
+            this.update({
+                date: [
+                    new Date(this.form.value.currentDateContextFromDate),
+                    new Date(this.form.value.currentDateContextToDate)
+                ],
+                interval: this.form.value.currentDateContextInterval,
+                realtime: this.form.value.realtime,
+                aggregation
+            });
+        });
+    }
+    onRealtimeValueChange(realtime) {
+        let dateTimeContext;
+        if (this.form.value.currentDateContextInterval !== 'custom') {
+            dateTimeContext = this.datapointExplorerService.getDateTimeContextByInterval(this.form.value.currentDateContextInterval);
+        }
+        else {
+            const currentTimeSpanInMs = new Date(this.form.value.currentDateContextToDate).valueOf() -
+                new Date(this.form.value.currentDateContextFromDate).valueOf();
+            const dateTo = new Date();
+            const dateFrom = new Date(dateTo.valueOf() - currentTimeSpanInMs);
+            dateTimeContext = [dateFrom, dateTo];
+        }
+        this.update({
+            date: dateTimeContext,
+            interval: this.form.value.currentDateContextInterval,
+            realtime,
+            aggregation: null
+        });
+    }
+    startRealtime() {
+        this.form.controls.temporaryUserSelectedFromDate.disable();
+        this.form.controls.temporaryUserSelectedToDate.disable();
+        this.form.controls.aggregation.disable();
+        this.realtimeSubscription = interval(this.REALTIME_INTERVAL)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            if (!this.form.value.realtime) {
+                this.realtimeSubscription.unsubscribe();
+                return;
+            }
+            const newDateFrom = new Date(new Date(this.form.value.currentDateContextFromDate).valueOf() + this.REALTIME_INTERVAL);
+            const newDateTo = new Date(new Date(this.form.value.currentDateContextToDate).valueOf() + this.REALTIME_INTERVAL);
+            this.updateFormValues({
+                date: [newDateFrom, newDateTo],
+                interval: this.form.value.currentDateContextInterval,
+                realtime: true,
+                aggregation: null
+            });
+        });
+    }
+    stopRealtime() {
+        this.realtimeSubscription?.unsubscribe();
+        this.form?.controls.temporaryUserSelectedFromDate.enable();
+        this.form?.controls.temporaryUserSelectedToDate.enable();
+        this.form?.controls.aggregation.enable();
+    }
+    update({ date, interval, realtime, aggregation }) {
+        const { selectedAggregation, disabledAggregations } = this.datapointExplorerService.calculateAggregation(date, aggregation);
+        this.disabledAggregations = disabledAggregations;
+        this.updateFormValues({ date, interval, realtime, aggregation: selectedAggregation });
+    }
+    createForm(context) {
+        return this.formBuilder.group({
+            temporaryUserSelectedFromDate: context.date[0].toISOString(),
+            temporaryUserSelectedToDate: context.date[1].toISOString(),
+            currentDateContextFromDate: context.date[0].toISOString(),
+            currentDateContextToDate: context.date[1].toISOString(),
+            currentDateContextInterval: context.interval || 'custom',
+            realtime: context.realtime,
+            aggregation: context.aggregation
+        });
+    }
+    updateFormValues({ date, interval, realtime, aggregation }) {
+        const newFormValues = {
+            temporaryUserSelectedFromDate: date[0].toISOString(),
+            temporaryUserSelectedToDate: date[1].toISOString(),
+            currentDateContextFromDate: date[0].toISOString(),
+            currentDateContextToDate: date[1].toISOString(),
+            realtime,
+            currentDateContextInterval: interval || 'custom',
+            aggregation: aggregation || null
+        };
+        this.context.set(newFormValues);
+        this.form.patchValue(newFormValues, {
+            emitEvent: false
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimeContextComponent, deps: [{ token: i1.WidgetTimeContextDateRangeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.9", type: TimeContextComponent, isStandalone: true, selector: "c8y-time-context", inputs: { changedDateContext: { classPropertyName: "changedDateContext", publicName: "changedDateContext", isSignal: false, isRequired: false, transformFunction: null }, controlsAvailable: { classPropertyName: "controlsAvailable", publicName: "controlsAvailable", isSignal: false, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"controlsAvailable; else actionBarTemplate\">\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n</ng-container>\n\n<ng-template #actionBarTemplate>\n  <c8y-action-bar-item\n    [groupId]=\"'timeContext'\"\n    [inGroupPriority]=\"1\"\n    [placement]=\"'left'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"dateTimePicker\"\n      [ngTemplateOutletContext]=\"{\n        date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n      }\"\n    ></ng-container>\n  </c8y-action-bar-item>\n</ng-template>\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-8 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container>\n      <div\n        class=\"dropdown flex-grow\"\n        #dropdown=\"bs-dropdown\"\n        dropdown\n        [insideClick]=\"true\"\n        *ngIf=\"date\"\n      >\n        <button\n          class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n          attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{\n            date[1] | c8yDate: DATE_FORMAT\n          }}\"\n          tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n          placement=\"top\"\n          container=\"body\"\n          data-cy=\"widget-time-context--date-picker-dropdown-button\"\n          [adaptivePosition]=\"false\"\n          [delay]=\"500\"\n          dropdownToggle\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"schedule1\"\n          ></i>\n          <div class=\"d-col text-left fit-w\">\n            <span\n              class=\"text-12\"\n              data-cy=\"widget-time-context--selected-interval\"\n            >\n              {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n            </span>\n            <span\n              class=\"text-10 text-muted text-truncate\"\n              data-cy=\"widget-time-context--selected-time-range\"\n            >\n              {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n            </span>\n          </div>\n          <span class=\"caret m-r-16 m-l-4\"></span>\n        </button>\n\n        <ul\n          class=\"dropdown-menu dropdown-menu--date-range\"\n          *dropdownMenu\n        >\n          <c8y-interval-picker\n            class=\"d-contents\"\n            formControlName=\"currentDateContextInterval\"\n          ></c8y-interval-picker>\n\n          <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n            <div class=\"p-l-16 p-r-16\">\n              <c8y-form-group\n                [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n              >\n                <label\n                  [title]=\"'From`date`' | translate\"\n                  for=\"temporaryUserSelectedFromDate\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  id=\"temporaryUserSelectedFromDate\"\n                  [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"'This date is after the latest allowed date.' | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"'This date is invalid.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n              >\n                <label\n                  [title]=\"'To`date`' | translate\"\n                  for=\"temporaryUserSelectedToDate\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  id=\"temporaryUserSelectedToDate\"\n                  [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"'This date is before the earliest allowed date.' | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"'This date is invalid.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"p-16 d-flex gap-8 separator-top\">\n              <button\n                class=\"btn btn-default btn-sm flex-grow\"\n                title=\"{{ 'Reset' | translate }}\"\n                type=\"button\"\n                (click)=\"dropdown.isOpen = false\"\n                [disabled]=\"form.value.realtime\"\n                translate\n              >\n                Reset\n              </button>\n\n              <button\n                class=\"btn btn-primary btn-sm flex-grow\"\n                title=\"{{ 'Apply' | translate }}\"\n                type=\"button\"\n                (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                [disabled]=\"\n                  (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                \"\n                translate\n              >\n                Apply\n              </button>\n            </div>\n          </ng-container>\n        </ul>\n      </div>\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n        class=\"form-control p-0 flex-no-grow w-auto\"\n        formControlName=\"realtime\"\n      ></c8y-realtime-control>\n\n      <c8y-aggregation-picker\n        *ngIf=\"controlsAvailable ? controlsAvailable.aggregation : true\"\n        formControlName=\"aggregation\"\n        [disabledAggregations]=\"disabledAggregations\"\n      ></c8y-aggregation-picker>\n    </div>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "c8yDate" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.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: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: RealtimeControlComponent, selector: "c8y-realtime-control" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimeContextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-time-context', standalone: true, imports: [
+                        CoreModule,
+                        BsDatepickerModule,
+                        DateTimePickerModule,
+                        BsDropdownModule,
+                        AggregationPickerComponent,
+                        TooltipModule,
+                        IntervalPickerComponent,
+                        RealtimeControlComponent
+                    ], template: "<ng-container *ngIf=\"controlsAvailable; else actionBarTemplate\">\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n</ng-container>\n\n<ng-template #actionBarTemplate>\n  <c8y-action-bar-item\n    [groupId]=\"'timeContext'\"\n    [inGroupPriority]=\"1\"\n    [placement]=\"'left'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"dateTimePicker\"\n      [ngTemplateOutletContext]=\"{\n        date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n      }\"\n    ></ng-container>\n  </c8y-action-bar-item>\n</ng-template>\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-8 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container>\n      <div\n        class=\"dropdown flex-grow\"\n        #dropdown=\"bs-dropdown\"\n        dropdown\n        [insideClick]=\"true\"\n        *ngIf=\"date\"\n      >\n        <button\n          class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n          attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{\n            date[1] | c8yDate: DATE_FORMAT\n          }}\"\n          tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n          placement=\"top\"\n          container=\"body\"\n          data-cy=\"widget-time-context--date-picker-dropdown-button\"\n          [adaptivePosition]=\"false\"\n          [delay]=\"500\"\n          dropdownToggle\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"schedule1\"\n          ></i>\n          <div class=\"d-col text-left fit-w\">\n            <span\n              class=\"text-12\"\n              data-cy=\"widget-time-context--selected-interval\"\n            >\n              {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n            </span>\n            <span\n              class=\"text-10 text-muted text-truncate\"\n              data-cy=\"widget-time-context--selected-time-range\"\n            >\n              {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n            </span>\n          </div>\n          <span class=\"caret m-r-16 m-l-4\"></span>\n        </button>\n\n        <ul\n          class=\"dropdown-menu dropdown-menu--date-range\"\n          *dropdownMenu\n        >\n          <c8y-interval-picker\n            class=\"d-contents\"\n            formControlName=\"currentDateContextInterval\"\n          ></c8y-interval-picker>\n\n          <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n            <div class=\"p-l-16 p-r-16\">\n              <c8y-form-group\n                [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n              >\n                <label\n                  [title]=\"'From`date`' | translate\"\n                  for=\"temporaryUserSelectedFromDate\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  id=\"temporaryUserSelectedFromDate\"\n                  [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"'This date is after the latest allowed date.' | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"'This date is invalid.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n              >\n                <label\n                  [title]=\"'To`date`' | translate\"\n                  for=\"temporaryUserSelectedToDate\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  id=\"temporaryUserSelectedToDate\"\n                  [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"'This date is before the earliest allowed date.' | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"'This date is invalid.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"p-16 d-flex gap-8 separator-top\">\n              <button\n                class=\"btn btn-default btn-sm flex-grow\"\n                title=\"{{ 'Reset' | translate }}\"\n                type=\"button\"\n                (click)=\"dropdown.isOpen = false\"\n                [disabled]=\"form.value.realtime\"\n                translate\n              >\n                Reset\n              </button>\n\n              <button\n                class=\"btn btn-primary btn-sm flex-grow\"\n                title=\"{{ 'Apply' | translate }}\"\n                type=\"button\"\n                (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                [disabled]=\"\n                  (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                \"\n                translate\n              >\n                Apply\n              </button>\n            </div>\n          </ng-container>\n        </ul>\n      </div>\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n        class=\"form-control p-0 flex-no-grow w-auto\"\n        formControlName=\"realtime\"\n      ></c8y-realtime-control>\n\n      <c8y-aggregation-picker\n        *ngIf=\"controlsAvailable ? controlsAvailable.aggregation : true\"\n        formControlName=\"aggregation\"\n        [disabledAggregations]=\"disabledAggregations\"\n      ></c8y-aggregation-picker>\n    </div>\n  </form>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.WidgetTimeContextDateRangeService }], propDecorators: { changedDateContext: [{
+                type: Input
+            }], controlsAvailable: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: [BsDropdownDirective]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimeContextComponent };
+//# sourceMappingURL=c8y-ngx-components-time-context.mjs.map

package/fesm2022/c8y-ngx-components-time-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"c8y-ngx-components-time-context.mjs","sources":["../../time-context/time-context.service.ts","../../time-context/time-context.component.ts","../../time-context/time-context.component.html","../../time-context/c8y-ngx-components-time-context.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { aggregationType } from '@c8y/client';\nimport { AGGREGATION_LIMITS, DateTimeContext } from '@c8y/ngx-components';\nimport { Interval, INTERVALS, TimeSpanInMs } from '@c8y/ngx-components/interval-picker';\n\ninterface TimeRangeValidation {\n  aggregationType: aggregationType;\n  isDisabled: boolean;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class DatapointExplorerService {\n  readonly DEFAULT_INTERVAL: Interval['id'] = 'days';\n\n  // Create generic? Based on packages/ngx-components/core/dashboard/wiget-time-context/widget-time-context.component.html\n  getDefaultContext() {\n    return {\n      date: this.getDateTimeContextByInterval(this.DEFAULT_INTERVAL),\n      interval: this.DEFAULT_INTERVAL,\n      realtime: false,\n      aggregation: aggregationType.MINUTELY\n    };\n  }\n\n  calculateAggregation(\n    [dateFrom, dateTo]: DateTimeContext,\n    requestedAggregation: aggregationType | null\n  ): {\n    selectedAggregation: aggregationType | null;\n    disabledAggregations: Partial<Record<aggregationType, boolean>>;\n  } {\n    const timeRangeValidations = this.validateTimeRanges([dateFrom, dateTo]);\n    const disabledAggregations = this.getDisabledAggregations(timeRangeValidations);\n\n    const timeRangeInMs = this.getTimeRangeInMs(dateFrom, dateTo);\n\n    const isRequestedAggregationValid =\n      requestedAggregation === null || !disabledAggregations[requestedAggregation];\n\n    const selectedAggregation = isRequestedAggregationValid\n      ? requestedAggregation\n      : this.determineAggregation(timeRangeInMs);\n\n    return {\n      selectedAggregation,\n      disabledAggregations\n    };\n  }\n\n  getDateTimeContextByInterval(intervalId: Interval['id']): DateTimeContext {\n    const interval = INTERVALS.find(({ id }) => id === intervalId);\n    const dateTo = new Date();\n    const dateFrom = new Date(dateTo.valueOf() - interval.timespanInMs);\n    return [dateFrom, dateTo];\n  }\n\n  private getTimeRangeInMs(dateFrom: Date, dateTo: Date): number {\n    return dateTo.valueOf() - dateFrom.valueOf();\n  }\n\n  private validateTimeRanges([dateFrom, dateTo]: DateTimeContext): TimeRangeValidation[] {\n    const timeRangeInMs = this.getTimeRangeInMs(dateFrom, dateTo);\n\n    return [\n      {\n        aggregationType: aggregationType.DAILY,\n        isDisabled: timeRangeInMs <= TimeSpanInMs.DAY\n      },\n      {\n        aggregationType: aggregationType.HOURLY,\n        isDisabled: timeRangeInMs <= TimeSpanInMs.HOUR\n      },\n      {\n        aggregationType: aggregationType.MINUTELY,\n        isDisabled: timeRangeInMs <= TimeSpanInMs.MINUTE\n      }\n    ];\n  }\n\n  private getDisabledAggregations(\n    timeRangeValidations: TimeRangeValidation[]\n  ): Partial<Record<aggregationType, boolean>> {\n    return timeRangeValidations.reduce(\n      (acc, { aggregationType, isDisabled }) => ({\n        ...acc,\n        [aggregationType]: isDisabled\n      }),\n      {}\n    );\n  }\n\n  private determineAggregation(timeRangeInMs: number): aggregationType | null {\n    if (timeRangeInMs >= AGGREGATION_LIMITS.DAILY_LIMIT) {\n      return aggregationType.DAILY;\n    } else if (timeRangeInMs >= AGGREGATION_LIMITS.HOURLY_LIMIT) {\n      return aggregationType.HOURLY;\n    } else if (timeRangeInMs >= AGGREGATION_LIMITS.MINUTELY_LIMIT) {\n      return aggregationType.MINUTELY;\n    }\n    return null;\n  }\n}\n","import {\n  Component,\n  DestroyRef,\n  inject,\n  Input,\n  model,\n  SimpleChanges,\n  ViewChild\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormBuilder } from '@angular/forms';\nimport {\n  CoreModule,\n  DateTimeContext,\n  DateTimePickerModule,\n  RealtimeControlComponent,\n  WidgetTimeContextDateRangeService\n} from '@c8y/ngx-components';\nimport { INTERVAL_TITLES, Interval } from '@c8y/ngx-components/interval-picker';\nimport { AggregationPickerComponent } from '@c8y/ngx-components';\nimport { IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';\nimport { BsDatepickerModule } from 'ngx-bootstrap/datepicker';\nimport { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { interval, Subscription } from 'rxjs';\nimport { DatapointExplorerService } from './time-context.service';\n\n@Component({\n  selector: 'c8y-time-context',\n  templateUrl: './time-context.component.html',\n  standalone: true,\n  imports: [\n    CoreModule,\n    BsDatepickerModule,\n    DateTimePickerModule,\n    BsDropdownModule,\n    AggregationPickerComponent,\n    TooltipModule,\n    IntervalPickerComponent,\n    RealtimeControlComponent\n  ]\n})\nexport class TimeContextComponent {\n  @Input() changedDateContext: {\n    dateFrom?: Date;\n    dateTo?: Date;\n    interval?: Interval['id'];\n    realtime?: boolean;\n    aggregation?: string;\n  };\n  @Input() controlsAvailable: any;\n  @ViewChild(BsDropdownDirective) dropdown: BsDropdownDirective;\n  datapointExplorerService = inject(DatapointExplorerService);\n  formBuilder = inject(FormBuilder);\n  #destroyRef = inject(DestroyRef);\n\n  readonly DATE_FORMAT = 'short';\n  readonly INTERVAL_TITLES = INTERVAL_TITLES;\n  readonly REALTIME_INTERVAL = 1000;\n  form = this.createForm(this.datapointExplorerService.getDefaultContext());\n  disabledAggregations;\n\n  readonly valuesSignal = toSignal(this.form.controls.currentDateContextFromDate.valueChanges, {\n    initialValue: this.form.controls.currentDateContextFromDate.value\n  });\n\n  context = model(this.form.value);\n\n  private realtimeSubscription: Subscription;\n\n  constructor(private widgetTimeContextDateRangeService: WidgetTimeContextDateRangeService) {\n    const context = this.datapointExplorerService.getDefaultContext();\n    const { disabledAggregations } = this.datapointExplorerService.calculateAggregation(\n      context.date,\n      context.aggregation\n    );\n    this.disabledAggregations = disabledAggregations;\n\n    this.subscribeToIntervalChange();\n    this.subscribeToRealtimeChange();\n    this.subscribeToAggregationChange();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.changedDateContext && changes.changedDateContext.currentValue) {\n      this.update({\n        date: [this.changedDateContext.dateFrom, this.changedDateContext.dateTo],\n        interval: this.changedDateContext.interval,\n        realtime: this.changedDateContext.realtime || false,\n        aggregation: this.changedDateContext.aggregation\n      });\n      if (this.changedDateContext.realtime) {\n        this.form.controls.aggregation.disable();\n      }\n    }\n  }\n\n  applyDatetimeContext(): void {\n    this.update({\n      date: [\n        new Date(this.form.controls.temporaryUserSelectedFromDate.value),\n        new Date(this.form.controls.temporaryUserSelectedToDate.value)\n      ],\n      interval: 'custom',\n      realtime: this.form.value.realtime,\n      aggregation: this.form.value.aggregation\n    });\n  }\n\n  private subscribeToIntervalChange(): void {\n    this.form.controls.currentDateContextInterval.valueChanges\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(interval => {\n        let date: DateTimeContext;\n        this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);\n        if (interval === 'custom') {\n          date = [\n            new Date(this.form.controls.currentDateContextFromDate.value),\n            new Date(this.form.controls.currentDateContextToDate.value)\n          ];\n        } else {\n          date = this.datapointExplorerService.getDateTimeContextByInterval(\n            interval as Interval['id']\n          );\n          this.dropdown.isOpen = false;\n        }\n        this.update({\n          date,\n          interval,\n          realtime: this.form.value.realtime,\n          aggregation: this.form.value.aggregation\n        });\n      });\n  }\n\n  private subscribeToRealtimeChange(): void {\n    this.form.controls.realtime.valueChanges\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(realtime => {\n        this.onRealtimeValueChange(realtime as boolean);\n\n        if (realtime) {\n          this.startRealtime();\n        } else {\n          this.stopRealtime();\n        }\n      });\n  }\n\n  private subscribeToAggregationChange() {\n    this.form.controls.aggregation.valueChanges\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(aggregation => {\n        this.update({\n          date: [\n            new Date(this.form.value.currentDateContextFromDate),\n            new Date(this.form.value.currentDateContextToDate)\n          ],\n          interval: this.form.value.currentDateContextInterval,\n          realtime: this.form.value.realtime,\n          aggregation\n        });\n      });\n  }\n\n  private onRealtimeValueChange(realtime: boolean): void {\n    let dateTimeContext: DateTimeContext;\n    if (this.form.value.currentDateContextInterval !== 'custom') {\n      dateTimeContext = this.datapointExplorerService.getDateTimeContextByInterval(\n        this.form.value.currentDateContextInterval as Interval['id']\n      );\n    } else {\n      const currentTimeSpanInMs =\n        new Date(this.form.value.currentDateContextToDate).valueOf() -\n        new Date(this.form.value.currentDateContextFromDate).valueOf();\n      const dateTo = new Date();\n      const dateFrom = new Date(dateTo.valueOf() - currentTimeSpanInMs);\n      dateTimeContext = [dateFrom, dateTo];\n    }\n\n    this.update({\n      date: dateTimeContext,\n      interval: this.form.value.currentDateContextInterval,\n      realtime,\n      aggregation: null\n    });\n  }\n\n  private startRealtime(): void {\n    this.form.controls.temporaryUserSelectedFromDate.disable();\n    this.form.controls.temporaryUserSelectedToDate.disable();\n    this.form.controls.aggregation.disable();\n\n    this.realtimeSubscription = interval(this.REALTIME_INTERVAL)\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(() => {\n        if (!this.form.value.realtime) {\n          this.realtimeSubscription.unsubscribe();\n          return;\n        }\n        const newDateFrom = new Date(\n          new Date(this.form.value.currentDateContextFromDate).valueOf() + this.REALTIME_INTERVAL\n        );\n        const newDateTo = new Date(\n          new Date(this.form.value.currentDateContextToDate).valueOf() + this.REALTIME_INTERVAL\n        );\n        this.updateFormValues({\n          date: [newDateFrom, newDateTo],\n          interval: this.form.value.currentDateContextInterval,\n          realtime: true,\n          aggregation: null\n        });\n      });\n  }\n\n  private stopRealtime(): void {\n    this.realtimeSubscription?.unsubscribe();\n    this.form?.controls.temporaryUserSelectedFromDate.enable();\n    this.form?.controls.temporaryUserSelectedToDate.enable();\n    this.form?.controls.aggregation.enable();\n  }\n\n  private update({ date, interval, realtime, aggregation }): void {\n    const { selectedAggregation, disabledAggregations } =\n      this.datapointExplorerService.calculateAggregation(date, aggregation);\n    this.disabledAggregations = disabledAggregations;\n    this.updateFormValues({ date, interval, realtime, aggregation: selectedAggregation });\n  }\n\n  private createForm(context) {\n    return this.formBuilder.group({\n      temporaryUserSelectedFromDate: context.date[0].toISOString() as string,\n      temporaryUserSelectedToDate: context.date[1].toISOString() as string,\n      currentDateContextFromDate: context.date[0].toISOString() as string,\n      currentDateContextToDate: context.date[1].toISOString() as string,\n      currentDateContextInterval: context.interval || 'custom',\n      realtime: context.realtime,\n      aggregation: context.aggregation\n    });\n  }\n\n  private updateFormValues({ date, interval, realtime, aggregation }): void {\n    const newFormValues = {\n      temporaryUserSelectedFromDate: date[0].toISOString() as string,\n      temporaryUserSelectedToDate: date[1].toISOString() as string,\n      currentDateContextFromDate: date[0].toISOString() as string,\n      currentDateContextToDate: date[1].toISOString() as string,\n      realtime,\n      currentDateContextInterval: interval || 'custom',\n      aggregation: aggregation || null\n    };\n\n    this.context.set(newFormValues);\n    this.form.patchValue(newFormValues, {\n      emitEvent: false\n    });\n  }\n}\n","<ng-container *ngIf=\"controlsAvailable; else actionBarTemplate\">\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n</ng-container>\n\n<ng-template #actionBarTemplate>\n  <c8y-action-bar-item\n    [groupId]=\"'timeContext'\"\n    [inGroupPriority]=\"1\"\n    [placement]=\"'left'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"dateTimePicker\"\n      [ngTemplateOutletContext]=\"{\n        date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n      }\"\n    ></ng-container>\n  </c8y-action-bar-item>\n</ng-template>\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-8 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container>\n      <div\n        class=\"dropdown flex-grow\"\n        #dropdown=\"bs-dropdown\"\n        dropdown\n        [insideClick]=\"true\"\n        *ngIf=\"date\"\n      >\n        <button\n          class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n          attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} — {{\n            date[1] | c8yDate: DATE_FORMAT\n          }}\"\n          tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} — {{ date[1] | c8yDate: DATE_FORMAT }}\"\n          placement=\"top\"\n          container=\"body\"\n          data-cy=\"widget-time-context--date-picker-dropdown-button\"\n          [adaptivePosition]=\"false\"\n          [delay]=\"500\"\n          dropdownToggle\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"schedule1\"\n          ></i>\n          <div class=\"d-col text-left fit-w\">\n            <span\n              class=\"text-12\"\n              data-cy=\"widget-time-context--selected-interval\"\n            >\n              {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n            </span>\n            <span\n              class=\"text-10 text-muted text-truncate\"\n              data-cy=\"widget-time-context--selected-time-range\"\n            >\n              {{ date[0] | c8yDate: DATE_FORMAT }} — {{ date[1] | c8yDate: DATE_FORMAT }}\n            </span>\n          </div>\n          <span class=\"caret m-r-16 m-l-4\"></span>\n        </button>\n\n        <ul\n          class=\"dropdown-menu dropdown-menu--date-range\"\n          *dropdownMenu\n        >\n          <c8y-interval-picker\n            class=\"d-contents\"\n            formControlName=\"currentDateContextInterval\"\n          ></c8y-interval-picker>\n\n          <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n            <div class=\"p-l-16 p-r-16\">\n              <c8y-form-group\n                [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n              >\n                <label\n                  [title]=\"'From`date`' | translate\"\n                  for=\"temporaryUserSelectedFromDate\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  id=\"temporaryUserSelectedFromDate\"\n                  [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"'This date is after the latest allowed date.' | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"'This date is invalid.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n              >\n                <label\n                  [title]=\"'To`date`' | translate\"\n                  for=\"temporaryUserSelectedToDate\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  id=\"temporaryUserSelectedToDate\"\n                  [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"'This date is before the earliest allowed date.' | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"'This date is invalid.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"p-16 d-flex gap-8 separator-top\">\n              <button\n                class=\"btn btn-default btn-sm flex-grow\"\n                title=\"{{ 'Reset' | translate }}\"\n                type=\"button\"\n                (click)=\"dropdown.isOpen = false\"\n                [disabled]=\"form.value.realtime\"\n                translate\n              >\n                Reset\n              </button>\n\n              <button\n                class=\"btn btn-primary btn-sm flex-grow\"\n                title=\"{{ 'Apply' | translate }}\"\n                type=\"button\"\n                (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                [disabled]=\"\n                  (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                \"\n                translate\n              >\n                Apply\n              </button>\n            </div>\n          </ng-container>\n        </ul>\n      </div>\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n        class=\"form-control p-0 flex-no-grow w-auto\"\n        formControlName=\"realtime\"\n      ></c8y-realtime-control>\n\n      <c8y-aggregation-picker\n        *ngIf=\"controlsAvailable ? controlsAvailable.aggregation : true\"\n        formControlName=\"aggregation\"\n        [disabledAggregations]=\"disabledAggregations\"\n      ></c8y-aggregation-picker>\n    </div>\n  </form>\n</ng-template>\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-tracking.mjs

@@ -8,9 +8,8 @@ import { CoreModule, ViewContext, EventRealtimeService, ActionBarModule, TimeInt
 import * as i1 from '@c8y/client';
 import { identity, isEmpty, last, first } from 'lodash-es';
 import { BehaviorSubject, Subject, combineLatest, pipe } from 'rxjs';
-import { map, share, switchMap, tap } from 'rxjs/operators';
+import { map, share, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
 import * as i5 from '@angular/common';
-import { AsyncPipe } from '@angular/common';
 import * as i4 from '@c8y/ngx-components/map';
 import { MapComponent, MapModule } from '@c8y/ngx-components/map';
 
@@ -31,7 +30,11 @@ class TrackingService {
         this.timeInterval$ = new Subject();
         this.reload$ = new BehaviorSubject(null);
         this.polyline$ = this._polylineEventsSubject$.asObservable().pipe(map(events => (events || []).map(event => this.geo.getLatLong(event)).filter(identity)), share());
-        this.events$ = combineLatest([this.deviceId$, this.timeInterval$, this.reload$]).pipe(switchMap(([source, interval]) => {
+        this.events$ = combineLatest([
+            this.deviceId$.pipe(distinctUntilChanged()),
+            this.timeInterval$,
+            this.reload$
+        ]).pipe(switchMap(([source, interval]) => {
             const { dateFrom, dateTo } = interval;
             return this.eventService.list({
                 ...TrackingService.BASE_FILTER,
@@ -163,7 +166,7 @@ class TrackingComponent {
             preventChangeToNextMonth: true
         };
         this.config = {
-            realtime: false,
+            realtime: true,
             follow: false,
             zoomLevel: 12,
             fitBoundsOptions: {
@@ -179,6 +182,7 @@ class TrackingComponent {
         this.device = contextData;
     }
     async ngAfterViewInit() {
+        this.service.setDeviceId(this.device.id);
         this.togglePositionRealtime(this.realtime.active);
     }
     toggleMarker(event) {
@@ -208,19 +212,18 @@ class TrackingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", 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          >\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      >\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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { 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: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { 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: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TrackingComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         MapModule,
-                        AsyncPipe,
                         ActionBarModule,
                         CoreModule,
                         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          >\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      >\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 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" }]
         }], ctorParameters: () => [{ type: TrackingService }, { type: i2.EventRealtimeService }, { type: i2.ContextRouteService }, { type: i3.ActivatedRoute }], propDecorators: { map: [{
                 type: ViewChild,
                 args: [MapComponent]