@c8y/ngx-components 1021.22.0 → 1021.22.27

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, InjectionToken, Component, Optional, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
-import { combineLatest, firstValueFrom, map as map$1, shareReplay, Subject, BehaviorSubject, of, from, forkJoin, EMPTY, Observable, pipe, fromEvent, takeUntil as takeUntil$1 } from 'rxjs';
+import { Injectable, Pipe, InjectionToken, Component, Optional, Input, EventEmitter, Output, ViewChild, forwardRef, NgModule } from '@angular/core';
+import { combineLatest, firstValueFrom, map as map$1, shareReplay, Subject, BehaviorSubject, of, from, forkJoin, EMPTY, Observable, pipe, fromEvent, take, takeUntil as takeUntil$1 } from 'rxjs';
 import { filter, map, switchMap, startWith, takeUntil, catchError, finalize, tap, debounceTime, distinctUntilChanged, shareReplay as shareReplay$1, throttleTime } from 'rxjs/operators';
 import * as i3 from '@c8y/ngx-components';
 import { Permissions, gettext, ViewContext, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, AlarmWithChildrenRealtimeService, ContextRouteComponent, ContextRouteGuard, RouterTabsResolver, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, DynamicComponentModule, RelativeTimePipe } from '@c8y/ngx-components';
@@ -9,21 +9,21 @@ import * as i2 from '@c8y/client';
 import { AlarmStatus, Severity, ALARM_STATUS_LABELS, SEVERITY_LABELS } from '@c8y/client';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i8 from '@c8y/ngx-components/interval-picker';
+import * as i9 from '@c8y/ngx-components/interval-picker';
 import { INTERVAL_TITLES, INTERVALS, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
 import * as i7 from '@angular/common';
 import { DatePipe, TitleCasePipe } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i1$2 from '@angular/forms';
-import { FormControl } from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i6 from 'ngx-bootstrap/dropdown';
 import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i5$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import * as i2$1 from '@c8y/ngx-components/alarm-event-selector';
+import * as i1$3 from '@c8y/ngx-components/alarm-event-selector';
 import { AlarmEventSelectorModule } from '@c8y/ngx-components/alarm-event-selector';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 
@@ -522,6 +522,20 @@ class AlarmsViewService {
     getRouterNavigationArray(contextData, alarm) {
         return this.getRouterLink(contextData, alarm).split('/').filter(Boolean);
     }
+    /**
+     * Returns the correct from and to dates based on the selected interval
+     * @param intervalId the selected interval. E.g. 'none', 'hours', 'custom' ...
+     * @returns The calculated date context based on the selected interval.
+     */
+    getDateTimeContextByInterval(intervalId) {
+        const interval = INTERVALS_EXTENDED.find(({ id }) => id === intervalId);
+        if (interval.id === 'none') {
+            return [new Date(0), new Date()];
+        }
+        const dateTo = new Date();
+        const dateFrom = new Date(dateTo.valueOf() - interval.timespanInMs);
+        return [dateFrom, dateTo];
+    }
     /**
      * Creates a value for query parameter for filtering alarms by severity based on array of selected severities.
      *
@@ -1026,11 +1040,11 @@ class AlarmInfoComponent {
         this.router.navigate(backLink, { queryParamsHandling: 'preserve' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i3.ContextRouteService }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmInfoComponent, selector: "c8y-alarm-info", ngImport: i0, template: "<ng-container *ngIf=\"!isContextRoute\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div class=\"sticky-top bg-component\">\n    <div class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator\">\n      <button\n        class=\"btn btn-clean text-primary visible-sm visible-xs\"\n        [title]=\"'Back' | translate\"\n        (click)=\"back()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n\n      <div class=\"flex-no-shrink a-s-start\"></div>\n      <div class=\"flex-grow d-col\">\n        <div\n          class=\"text-break-word flex-grow text-16\"\n          data-cy=\"c8y-alarms-info--title\"\n        >\n          {{ (selectedAlarm$ | async)?.text | translate }}\n        </div>\n      </div>\n      <div class=\"p-relative\">\n        <c8y-tabs-outlet\n          outletName=\"alarms\"\n          orientation=\"horizontal\"\n        ></c8y-tabs-outlet>\n      </div>\n    </div>\n    <div class=\"card-block overflow-visible p-l-24 p-r-24\">\n      <c8y-alarm-details [selectedAlarm]=\"selectedAlarm$ | async\"></c8y-alarm-details>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmInfoComponent, selector: "c8y-alarm-info", ngImport: i0, template: "<ng-container *ngIf=\"!isContextRoute\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div class=\"sticky-top bg-component\">\n    <div class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator\">\n      <button\n        class=\"btn btn-clean text-primary visible-sm visible-xs\"\n        [title]=\"'Back' | translate\"\n        (click)=\"back()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n\n      <div class=\"flex-no-shrink a-s-start\"></div>\n      <div class=\"flex-grow d-col\">\n        <div\n          class=\"text-break-word flex-grow text-16\"\n          data-cy=\"c8y-alarms-info--title\"\n        >\n          {{ (selectedAlarm$ | async)?.text | translate }}\n        </div>\n      </div>\n    </div>\n    <div class=\"p-relative\">\n      <c8y-tabs-outlet\n        outletName=\"alarms\"\n        orientation=\"horizontal\"\n      ></c8y-tabs-outlet>\n    </div>\n    <div class=\"card-block overflow-visible p-l-24 p-r-24\">\n      <c8y-alarm-details [selectedAlarm]=\"selectedAlarm$ | async\"></c8y-alarm-details>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-info', template: "<ng-container *ngIf=\"!isContextRoute\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div class=\"sticky-top bg-component\">\n    <div class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator\">\n      <button\n        class=\"btn btn-clean text-primary visible-sm visible-xs\"\n        [title]=\"'Back' | translate\"\n        (click)=\"back()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n\n      <div class=\"flex-no-shrink a-s-start\"></div>\n      <div class=\"flex-grow d-col\">\n        <div\n          class=\"text-break-word flex-grow text-16\"\n          data-cy=\"c8y-alarms-info--title\"\n        >\n          {{ (selectedAlarm$ | async)?.text | translate }}\n        </div>\n      </div>\n      <div class=\"p-relative\">\n        <c8y-tabs-outlet\n          outletName=\"alarms\"\n          orientation=\"horizontal\"\n        ></c8y-tabs-outlet>\n      </div>\n    </div>\n    <div class=\"card-block overflow-visible p-l-24 p-r-24\">\n      <c8y-alarm-details [selectedAlarm]=\"selectedAlarm$ | async\"></c8y-alarm-details>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarm-info', template: "<ng-container *ngIf=\"!isContextRoute\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div class=\"sticky-top bg-component\">\n    <div class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator\">\n      <button\n        class=\"btn btn-clean text-primary visible-sm visible-xs\"\n        [title]=\"'Back' | translate\"\n        (click)=\"back()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n\n      <div class=\"flex-no-shrink a-s-start\"></div>\n      <div class=\"flex-grow d-col\">\n        <div\n          class=\"text-break-word flex-grow text-16\"\n          data-cy=\"c8y-alarms-info--title\"\n        >\n          {{ (selectedAlarm$ | async)?.text | translate }}\n        </div>\n      </div>\n    </div>\n    <div class=\"p-relative\">\n      <c8y-tabs-outlet\n        outletName=\"alarms\"\n        orientation=\"horizontal\"\n      ></c8y-tabs-outlet>\n    </div>\n    <div class=\"card-block overflow-visible p-l-24 p-r-24\">\n      <c8y-alarm-details [selectedAlarm]=\"selectedAlarm$ | async\"></c8y-alarm-details>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i3.ContextRouteService }, { type: AlarmsViewService }] });
 
 /**
@@ -1153,7 +1167,7 @@ class AlarmSeverityToLabelPipe {
      */
     transform(alarmSeverity) {
         const alarmStatusMapped = SEVERITY_LABELS[alarmSeverity?.toUpperCase()];
-        return this.translateService.instant(alarmStatusMapped);
+        return this.translateService.instant(alarmStatusMapped ?? alarmSeverity);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmSeverityToLabelPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmSeverityToLabelPipe, name: "AlarmSeverityToLabel" }); }
@@ -1697,16 +1711,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class AlarmsDateFilterComponent {
-    constructor(formBuilder, router, activatedRoute) {
+    constructor(formBuilder, router, activatedRoute, alarmsViewService) {
         this.formBuilder = formBuilder;
         this.router = router;
         this.activatedRoute = activatedRoute;
-        this.DEFAULT_INTERVAL = 'none';
+        this.alarmsViewService = alarmsViewService;
         this.INTERVALS = INTERVALS_EXTENDED;
         this.INTERVAL_TITLES = INTERVAL_TITLES_EXTENDED;
         this.DATE_FORMAT = 'short';
+        this.DEFAULT_INTERVAL = 'none';
+        this.updateQueryParams = true;
+        this.noFilterLabel = gettext('No date filter');
         this.destroy$ = new Subject();
         this.dateFilterChange = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
     }
     ngOnInit() {
         const context = this.getDefaultContext();
@@ -1715,7 +1734,7 @@ class AlarmsDateFilterComponent {
             this.form.value.currentDateContextFromDate,
             this.form.value.currentDateContextToDate
         ];
-        this.activatedRoute.queryParams.pipe(takeUntil$1(this.destroy$)).subscribe(params => {
+        this.activatedRoute.queryParams.pipe(take(1), takeUntil$1(this.destroy$)).subscribe(params => {
             this.showCleared = params.showCleared === 'true';
             this.severityOptions = {
                 [Severity.CRITICAL]: params.critical === 'true',
@@ -1726,6 +1745,20 @@ class AlarmsDateFilterComponent {
             if (params.typeFilters) {
                 this.typeFilters = params.typeFilters;
             }
+            if (!params.interval) {
+                return;
+            }
+            if (params.interval !== 'custom') {
+                this.updateDateTime(params.interval);
+            }
+            else {
+                this.form.patchValue({
+                    currentDateContextInterval: params.interval,
+                    temporaryUserSelectedFromDate: params.lastUpdatedFrom,
+                    temporaryUserSelectedToDate: params.createdTo
+                });
+                this.date = [params.lastUpdatedFrom, params.createdTo];
+            }
         });
         this.subscribeToIntervalChange();
     }
@@ -1738,6 +1771,7 @@ class AlarmsDateFilterComponent {
             showCleared: this.showCleared,
             severityOptions: this.severityOptions,
             typeFilters: this.typeFilters,
+            interval: this.form.value.currentDateContextInterval,
             selectedDates: [
                 new Date(this.form.value.temporaryUserSelectedFromDate),
                 new Date(this.form.value.temporaryUserSelectedToDate)
@@ -1751,50 +1785,61 @@ class AlarmsDateFilterComponent {
         this.router.navigate([], {
             relativeTo: this.activatedRoute,
             queryParams: {
-                showCleared: combinedFormEvent.showCleared,
-                ...combinedFormEvent.severityOptions,
-                typeFilters: this.typeFilters,
+                interval: this.form.value.currentDateContextInterval,
                 lastUpdatedFrom: combinedFormEvent.selectedDates[0].toISOString(),
                 createdTo: combinedFormEvent.selectedDates[1].toISOString()
-            }
+            },
+            queryParamsHandling: 'merge'
         });
         this.dateFilterChange.emit(combinedFormEvent);
     }
+    writeValue(value) {
+        if (value) {
+            this.form.patchValue({
+                currentDateContextFromDate: typeof value[0] === 'string' ? value[0] : value[0].toISOString(),
+                currentDateContextToDate: typeof value[1] === 'string' ? value[1] : value[1].toISOString()
+            });
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    updateDateTime(interval) {
+        const date = this.alarmsViewService.getDateTimeContextByInterval(interval);
+        if (this.dropdown) {
+            this.dropdown.isOpen = false;
+        }
+        this.date = date.map(d => d.toISOString());
+        this.form.patchValue({
+            temporaryUserSelectedFromDate: date[0].toISOString(),
+            temporaryUserSelectedToDate: date[1].toISOString(),
+            currentDateContextInterval: interval
+        }, { emitEvent: false });
+        this.applyDateFilter();
+    }
     getDefaultContext() {
-        const defaultStartDate = 'months';
         return {
-            date: this.getDateTimeContextByInterval(defaultStartDate),
+            date: this.alarmsViewService.getDateTimeContextByInterval(this.DEFAULT_INTERVAL),
             interval: this.DEFAULT_INTERVAL
         };
     }
-    getDateTimeContextByInterval(intervalId) {
-        const interval = INTERVALS_EXTENDED.find(({ id }) => id === intervalId);
-        if (interval.id === 'none') {
-            return [new Date(0), new Date()];
-        }
-        const dateTo = new Date();
-        const dateFrom = new Date(dateTo.valueOf() - interval.timespanInMs);
-        return [dateFrom, dateTo];
-    }
     subscribeToIntervalChange() {
         this.form.controls.currentDateContextInterval.valueChanges
             .pipe(takeUntil$1(this.destroy$))
             .subscribe(interval => {
             if (interval === 'custom') {
                 this.form.patchValue({
-                    temporaryUserSelectedFromDate: this.form.controls.currentDateContextFromDate.value
+                    temporaryUserSelectedFromDate: this.form.controls.temporaryUserSelectedFromDate.value === new Date(0).toISOString()
+                        ? this.form.controls.currentDateContextToDate.value
+                        : this.form.controls.temporaryUserSelectedFromDate.value,
+                    currentDateContextInterval: interval
                 }, { emitEvent: false });
                 return;
             }
-            const date = this.getDateTimeContextByInterval(interval);
-            this.dropdown.isOpen = false;
-            this.date = date.map(d => d.toISOString());
-            this.form.patchValue({
-                temporaryUserSelectedFromDate: date[0].toISOString(),
-                temporaryUserSelectedToDate: date[1].toISOString(),
-                currentDateContextInterval: interval
-            }, { emitEvent: false });
-            this.applyDateFilter();
+            this.updateDateTime(interval);
         });
     }
     createForm(context) {
@@ -1806,13 +1851,31 @@ class AlarmsDateFilterComponent {
             currentDateContextInterval: context.interval || 'custom'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsDateFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", outputs: { dateFilterChange: "dateFilterChange" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div>\n    <div\n      class=\"dropdown flex-grow\"\n      #dropdown=\"bs-dropdown\"\n      dropdown\n      [insideClick]=\"true\"\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=\"{{\n          form.value.currentDateContextInterval === 'none'\n            ? 'No date filter'\n            : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        data-cy=\"alarms-date-filter--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 class=\"text-12 text-truncate\">\n            {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n          </span>\n          <span\n            class=\"text-10 text-muted text-truncate\"\n            data-cy=\"alarms-date-filter--selected-time-range\"\n            *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\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          [INTERVALS]=\"INTERVALS\"\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 class=\"m-b-8\"\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 class=\"m-b-8\"\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-primary btn-sm flex-grow\"\n              title=\"{{ 'Apply' | translate }}\"\n              type=\"button\"\n              (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n              [disabled]=\"(form.pristine && form.untouched) || form.invalid || form.value.realtime\"\n              translate\n            >\n              Apply\n            </button>\n          </div>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: i5$1.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: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8.IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsDateFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: { DEFAULT_INTERVAL: "DEFAULT_INTERVAL", updateQueryParams: "updateQueryParams", date: "date" }, outputs: { dateFilterChange: "dateFilterChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AlarmsDateFilterComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--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=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\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        [INTERVALS]=\"INTERVALS\"\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            class=\"m-b-8\"\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            class=\"m-b-8\"\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-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: i5$1.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: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i9.IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsDateFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-date-filter', template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div>\n    <div\n      class=\"dropdown flex-grow\"\n      #dropdown=\"bs-dropdown\"\n      dropdown\n      [insideClick]=\"true\"\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=\"{{\n          form.value.currentDateContextInterval === 'none'\n            ? 'No date filter'\n            : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        data-cy=\"alarms-date-filter--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 class=\"text-12 text-truncate\">\n            {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n          </span>\n          <span\n            class=\"text-10 text-muted text-truncate\"\n            data-cy=\"alarms-date-filter--selected-time-range\"\n            *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\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          [INTERVALS]=\"INTERVALS\"\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 class=\"m-b-8\"\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 class=\"m-b-8\"\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-primary btn-sm flex-grow\"\n              title=\"{{ 'Apply' | translate }}\"\n              type=\"button\"\n              (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n              [disabled]=\"(form.pristine && form.untouched) || form.invalid || form.value.realtime\"\n              translate\n            >\n              Apply\n            </button>\n          </div>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { dateFilterChange: [{
+            args: [{ selector: 'c8y-alarms-date-filter', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AlarmsDateFilterComponent),
+                            multi: true
+                        }
+                    ], template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--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=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\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        [INTERVALS]=\"INTERVALS\"\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            class=\"m-b-8\"\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            class=\"m-b-8\"\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-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: AlarmsViewService }], propDecorators: { DEFAULT_INTERVAL: [{
+                type: Input
+            }], updateQueryParams: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], dateFilterChange: [{
                 type: Output
             }], dropdown: [{
                 type: ViewChild,
@@ -1820,72 +1883,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class AlarmsTypeFilterComponent {
-    constructor(formBuilder, alarmEventSelectorService, activatedRoute, router) {
-        this.formBuilder = formBuilder;
+    constructor(alarmEventSelectorService, activatedRoute, router, colorService) {
         this.alarmEventSelectorService = alarmEventSelectorService;
         this.activatedRoute = activatedRoute;
         this.router = router;
+        this.colorService = colorService;
+        this.possibleFilters = [];
         this.activeFilters = [];
         this.onFilterChanged = new EventEmitter();
-        this.formControlName = 'alarms';
+        this.customAlarmTypes = [];
+        this.customAlarmTypeInput = '';
         this.queryParamName = 'typeFilter';
-        this.formGroup = this.formBuilder.group({
-            [this.formControlName]: new FormControl([])
-        });
+        this.STORAGE_ACCESS_KEY = 'customAlarmTypes';
         this.destroy$ = new Subject();
-        this.queryParam = '';
+        this.currentQueryParam = '';
     }
     ngOnInit() {
-        this.activatedRoute.queryParams
-            .pipe(map(params => {
-            const alarms = this.formGroup.get(this.formControlName).value;
-            return this.getActiveAlarmFiltersFromQueryParameter(alarms, params[this.queryParamName]);
-        }), takeUntil(this.destroy$))
-            .subscribe((alarmFilters) => this.formGroup.get(this.formControlName).patchValue(alarmFilters));
-        this.formGroup
-            .get(this.formControlName)
-            .valueChanges.pipe(takeUntil(this.destroy$))
-            .subscribe((alarmFilters) => this.applyFilterChange(alarmFilters));
+        this.setQueryParameterObservable();
     }
-    ngOnChanges(changes) {
+    async ngOnChanges(changes) {
         if (changes.alarms && changes.alarms.currentValue && this.activeFilters.length === 0) {
-            this.setAlarms();
+            await this.setPossibleFilters();
+            this.applyFilterChange();
         }
     }
+    setQueryParameterObservable() {
+        this.activatedRoute.queryParams
+            .pipe(map$1(params => {
+            const alarms = this.possibleFilters;
+            const possibleFilters = this.setActiveAlarmFiltersFromQueryParameter(alarms, params[this.queryParamName]);
+            return possibleFilters;
+        }), takeUntil$1(this.destroy$))
+            .subscribe((possibleFilters) => {
+            this.possibleFilters = possibleFilters;
+            this.applyFilterChange();
+        });
+    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    toggleAlarmType(alarmType) {
+        alarmType.__active = !alarmType.__active;
+    }
     deselect(type) {
-        const alarms = this.formGroup.get(this.formControlName).value;
-        const alarmFilter = alarms.find(alarm => alarm.filters.type === type.filters.type);
+        const alarmFilter = this.possibleFilters.find(alarm => alarm.filters.type === type.filters.type);
         alarmFilter.__active = false;
-        this.formGroup.get(this.formControlName).patchValue(alarms);
+        this.applyFilterChange();
     }
     deselectAll() {
-        const alarms = this.formGroup.get(this.formControlName).value;
-        const allFilters = alarms.map(alarm => {
+        this.possibleFilters = this.possibleFilters.map(alarm => {
             return {
                 ...alarm,
                 __active: false
             };
         });
-        this.formGroup.get(this.formControlName).patchValue(allFilters);
-    }
-    getActiveAlarmFiltersFromQueryParameter(alarmFilters, filterTypesQuery) {
-        if (!filterTypesQuery) {
-            return alarmFilters;
-        }
-        const types = filterTypesQuery.split(',');
-        return alarmFilters.map((alarm) => ({
-            ...alarm,
-            __active: types.includes(alarm.filters.type)
-        }));
+        this.applyFilterChange();
     }
-    applyFilterChange(alarmFilters) {
-        const actives = alarmFilters.filter((alarmFilter) => alarmFilter.__active);
+    applyFilterChange() {
+        const actives = this.possibleFilters.filter((alarmFilter) => alarmFilter.__active);
         const newQueryParam = this.getQueryParams(actives);
-        const hasChanged = newQueryParam !== this.queryParam;
+        const hasChanged = newQueryParam !== this.currentQueryParam;
         if (hasChanged) {
             this.activeFilters = actives;
             this.onFilterChanged.emit(this.activeFilters);
@@ -1895,41 +1953,76 @@ class AlarmsTypeFilterComponent {
                 },
                 queryParamsHandling: 'merge'
             });
-            this.queryParam = newQueryParam;
+            this.currentQueryParam = newQueryParam;
         }
     }
-    getQueryParams(activeFilters) {
-        return activeFilters.map(filter => filter.filters.type).join(',');
+    resetFilters() {
+        this.possibleFilters.forEach(possibleFilter => {
+            possibleFilter.__active = this.activeFilters.some((activeFilter) => activeFilter === possibleFilter);
+        });
+    }
+    removeCustomAlarm(alarmDetails) {
+        this.possibleFilters = this.possibleFilters.filter(filter => filter !== alarmDetails);
+        this.storeCustomAlarmTypes();
+    }
+    confirmWithEnter(event) {
+        if (event.key === 'Enter') {
+            this.addCustomAlarmType();
+        }
+    }
+    async addCustomAlarmType() {
+        if (!this.customAlarmTypeInput) {
+            return;
+        }
+        this.possibleFilters.unshift({
+            label: this.customAlarmTypeInput,
+            color: await this.colorService.generateColor(this.customAlarmTypeInput),
+            filters: {
+                type: this.customAlarmTypeInput
+            },
+            timelineType: 'ALARM',
+            __active: true,
+            __target: null
+        });
+        this.customAlarmTypeInput = '';
+        this.storeCustomAlarmTypes();
+    }
+    storeCustomAlarmTypes() {
+        const customTypes = this.possibleFilters.filter((filter) => !filter.__target);
+        window.localStorage.setItem(this.STORAGE_ACCESS_KEY, JSON.stringify(customTypes));
     }
-    async setAlarms() {
+    getCustomAlarmTypeFromStorage() {
+        const types = window.localStorage.getItem(this.STORAGE_ACCESS_KEY);
+        return types ? JSON.parse(types) : [];
+    }
+    async setPossibleFilters() {
         const queryParameters = this.activatedRoute.snapshot.queryParamMap.get(this.queryParamName);
         const alarmTypesFromCurrentlyShownAlarms = await this.alarmEventSelectorService.getUniqueAlarmsOnly(this.alarms.data);
-        const alarmTypesWithMissingAndCustom = await this.addMissingAlarmTypesFromQueryParams(alarmTypesFromCurrentlyShownAlarms, queryParameters);
-        const selectableAlarmTypes = this.getActiveAlarmFiltersFromQueryParameter(alarmTypesWithMissingAndCustom, queryParameters);
-        this.formGroup.get(this.formControlName).patchValue(selectableAlarmTypes);
+        const customAlarmTypesFromLocalStorage = this.getCustomAlarmTypeFromStorage();
+        const selectableAlarmTypes = this.setActiveAlarmFiltersFromQueryParameter([...customAlarmTypesFromLocalStorage, ...alarmTypesFromCurrentlyShownAlarms], queryParameters);
+        this.possibleFilters = selectableAlarmTypes;
     }
-    async addMissingAlarmTypesFromQueryParams(alarmFilters, queryParameters) {
-        if (!queryParameters) {
-            return alarmFilters;
-        }
-        const types = queryParameters.split(',');
-        const missingFilters = await Promise.all(types
-            .filter(type => !alarmFilters.find(alarmFilter => alarmFilter.filters.type === type))
-            .map(type => {
-            return this.alarmEventSelectorService.createItem('ALARM', {
-                type,
-                source: null
-            });
+    setActiveAlarmFiltersFromQueryParameter(alarmFilters, filterTypesQuery = '') {
+        const types = (filterTypesQuery ?? '').split(',');
+        return alarmFilters.map((alarm) => ({
+            ...alarm,
+            __active: types.includes(alarm.filters.type)
         }));
-        return [...alarmFilters, ...missingFilters];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.AlarmEventSelectorService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width:unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <c8y-alarm-event-selection-list\n        [title]=\"'Alarm type filter' | translate\"\n        [attr.name]=\"formControlName\"\n        [config]=\"{\n          title: 'Alarm type filter' | translate,\n          allowChangingContext: false\n        }\"\n        [inline]=\"true\"\n        [hideSource]=\"true\"\n        [addButtonLabel]=\"'Manage alarm types' | translate\"\n        [canEdit]=\"false\"\n        [canDragAndDrop]=\"false\"\n        [canRemove]=\"false\"\n        [timelineType]=\"'ALARM'\"\n        [activeToggleAsSwitch]=\"false\"\n        [formControlName]=\"formControlName\"\n      >\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          icon=\"c8y-alarm\"\n          [title]=\"'No alarm found' | translate\"\n          [subtitle]=\"'There is no alarm to filter. You can still add a custom alarm.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </c8y-alarm-event-selection-list>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "config"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    getQueryParams(activeFilters) {
+        return activeFilters.map(filter => filter.filters.type).join(',');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$3.AlarmEventSelectorService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width: unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              tooltip=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span class=\"text-truncate text-12 flex-grow\">\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: i5$1.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: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-type-filter', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width:unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <c8y-alarm-event-selection-list\n        [title]=\"'Alarm type filter' | translate\"\n        [attr.name]=\"formControlName\"\n        [config]=\"{\n          title: 'Alarm type filter' | translate,\n          allowChangingContext: false\n        }\"\n        [inline]=\"true\"\n        [hideSource]=\"true\"\n        [addButtonLabel]=\"'Manage alarm types' | translate\"\n        [canEdit]=\"false\"\n        [canDragAndDrop]=\"false\"\n        [canRemove]=\"false\"\n        [timelineType]=\"'ALARM'\"\n        [activeToggleAsSwitch]=\"false\"\n        [formControlName]=\"formControlName\"\n      >\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          icon=\"c8y-alarm\"\n          [title]=\"'No alarm found' | translate\"\n          [subtitle]=\"'There is no alarm to filter. You can still add a custom alarm.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </c8y-alarm-event-selection-list>\n    </div>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.AlarmEventSelectorService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { alarms: [{
+            args: [{ selector: 'c8y-alarms-type-filter', template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width: unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              tooltip=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span class=\"text-truncate text-12 flex-grow\">\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.AlarmEventSelectorService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i3.ColorService }], propDecorators: { alarms: [{
+                type: Input
+            }], possibleFilters: [{
+                type: Input
+            }], activeFilters: [{
                 type: Input
             }], onFilterChanged: [{
                 type: Output
@@ -2100,11 +2193,11 @@ class AlarmsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.AlarmWithChildrenRealtimeService }, { token: i3.AlertService }, { token: i3.ContextRouteService }, { token: i3.ModalService }, { token: i1.TranslateService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsComponent, selector: "c8y-alarms", providers: [AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item \n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.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: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsComponent, selector: "c8y-alarms", providers: [AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.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: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms", "possibleFilters", "activeFilters"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService], template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item \n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService], template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.AlarmWithChildrenRealtimeService }, { type: i3.AlertService }, { type: i3.ContextRouteService }, { type: i3.ModalService }, { type: i1.TranslateService }, { type: i1$1.Router }], propDecorators: { alarmIntervalRefreshComponent: [{
                 type: ViewChild,
                 args: [AlarmsIntervalRefreshComponent]
@@ -2186,7 +2279,7 @@ class AlarmsModule {
             AlarmDetailsButtonPipe,
             AlarmSeverityToIconPipe,
             DynamicComponentModule,
-            IntervalPickerComponent], exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent] }); }
+            IntervalPickerComponent], exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent, AlarmsDateFilterComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsModule, providers: [
             DatePipe,
             TitleCasePipe,
@@ -2229,7 +2322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         AlarmsDateFilterComponent,
                         AlarmsTypeFilterComponent
                     ],
-                    exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent],
+                    exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent, AlarmsDateFilterComponent],
                     providers: [
                         DatePipe,
                         TitleCasePipe,
@@ -2264,5 +2357,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALARMS_MODULE_CONFIG, ALARMS_PATH, ALARM_DEFAULT_PROPERTIES, ALARM_SEVERITY_ICON, ALARM_SEVERITY_ICON_MAP, ALARM_STATUS_ICON, AlarmDetailsButtonPipe, AlarmDetailsButtonService, AlarmDetailsComponent, AlarmDetailsService, AlarmEmptyComponent, AlarmIconMap, AlarmInfoComponent, AlarmListIndicatorPipe, AlarmListIndicatorService, AlarmSeveritiesToTitlePipe, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe, AlarmStatusToIconPipe, AlarmStatusToLabelPipe, AlarmsComponent, AlarmsFilterComponent, AlarmsIconComponent, AlarmsIntervalRefreshComponent, AlarmsListComponent, AlarmsModule, AlarmsViewService, AuditChangesMessagePipe, DEFAULT_ALARM_COUNTS, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, HELP_ICON, INTERVALS_EXTENDED, INTERVAL_TITLES_EXTENDED, Ng1SmartRulesUpgradeService, SmartRulesUpgradeServiceFactory, THROTTLE_REALTIME_REFRESH, getChildrenForViewContext, getViewContextRoutes, smartRulesUpgradeServiceProvider };
+export { ALARMS_MODULE_CONFIG, ALARMS_PATH, ALARM_DEFAULT_PROPERTIES, ALARM_SEVERITY_ICON, ALARM_SEVERITY_ICON_MAP, ALARM_STATUS_ICON, AlarmDetailsButtonPipe, AlarmDetailsButtonService, AlarmDetailsComponent, AlarmDetailsService, AlarmEmptyComponent, AlarmIconMap, AlarmInfoComponent, AlarmListIndicatorPipe, AlarmListIndicatorService, AlarmSeveritiesToTitlePipe, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe, AlarmStatusToIconPipe, AlarmStatusToLabelPipe, AlarmsComponent, AlarmsDateFilterComponent, AlarmsFilterComponent, AlarmsIconComponent, AlarmsIntervalRefreshComponent, AlarmsListComponent, AlarmsModule, AlarmsViewService, AuditChangesMessagePipe, DEFAULT_ALARM_COUNTS, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, HELP_ICON, INTERVALS_EXTENDED, INTERVAL_TITLES_EXTENDED, Ng1SmartRulesUpgradeService, SmartRulesUpgradeServiceFactory, THROTTLE_REALTIME_REFRESH, getChildrenForViewContext, getViewContextRoutes, smartRulesUpgradeServiceProvider };
 //# sourceMappingURL=c8y-ngx-components-alarms.mjs.map