@c8y/ngx-components 1021.21.0 → 1021.22.26

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

@@ -1,32 +1,89 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Pipe, Component, Optional, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+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';
+import { sortBy, cloneDeep } from 'lodash-es';
 import * as i2 from '@c8y/client';
 import { AlarmStatus, Severity, ALARM_STATUS_LABELS, SEVERITY_LABELS } from '@c8y/client';
-import * as i3 from '@c8y/ngx-components';
-import { Permissions, gettext, ViewContext, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, AlarmWithChildrenRealtimeService, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, DynamicComponentModule, RelativeTimePipe } from '@c8y/ngx-components';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { sortBy, cloneDeep } from 'lodash-es';
-import { firstValueFrom, map, shareReplay, Subject, BehaviorSubject, combineLatest, tap, switchMap as switchMap$1, takeUntil, from, forkJoin, EMPTY, Observable, pipe, fromEvent } from 'rxjs';
-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 { filter, map as map$1, switchMap, startWith, takeUntil as takeUntil$1, catchError, finalize, tap as tap$1, debounceTime, distinctUntilChanged, shareReplay as shareReplay$1, throttleTime } from 'rxjs/operators';
 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';
 
+/**
+ * A service to retrieve custom buttons for the alarm details view.
+ */
+class AlarmDetailsButtonService {
+    constructor(serviceRegistry, pluginsResolver) {
+        this.serviceRegistry = serviceRegistry;
+        this.pluginsResolver = pluginsResolver;
+    }
+    get$(alarm, source) {
+        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map(() => {
+            return this.serviceRegistry.get('alarmDetailsButton');
+        }));
+        return providers$.pipe(switchMap(providers => {
+            const observables$ = providers.map(provider => provider.getAlarmDetailsButton$(alarm, source).pipe(startWith(false)));
+            return combineLatest(observables$);
+        }), map(indicators => {
+            return indicators.filter(Boolean);
+        }), map(indicators => sortBy(indicators, this.byPriority)));
+    }
+    byPriority(item) {
+        if (item.priority === undefined) {
+            return 0;
+        }
+        return -item.priority;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
+
+/**
+ * A pipe to provide custom buttons for the alarm details view.
+ *
+ * Will call `get$()` method of `AlarmDetailsButtonService` to get the custom buttons for the provided alarm.
+ */
+class AlarmDetailsButtonPipe {
+    constructor(alarmDetailsButtonService) {
+        this.alarmDetailsButtonService = alarmDetailsButtonService;
+    }
+    transform(alarm, source) {
+        return this.alarmDetailsButtonService.get$(alarm, source);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, deps: [{ token: AlarmDetailsButtonService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, isStandalone: true, name: "alarmDetailsButton" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'alarmDetailsButton',
+                    pure: true
+                }]
+        }], ctorParameters: () => [{ type: AlarmDetailsButtonService }] });
+
 class AlarmDetailsService {
     constructor(stateService, permissions) {
         this.stateService = stateService;
@@ -149,7 +206,7 @@ class AlarmDetailsService {
      * @returns A promise that resolves to the requested application or undefined if the application is not found.
      */
     async getApplication(applicationKey) {
-        return await firstValueFrom(this.stateService.currentAppsOfUser.pipe(map(apps => apps.find(app => app.key === applicationKey)), shareReplay(1)));
+        return await firstValueFrom(this.stateService.currentAppsOfUser.pipe(map$1(apps => apps.find(app => app.key === applicationKey)), shareReplay(1)));
     }
     checkIfHasAnyRoleAllowingToCreateSmartRule() {
         const ROLES_ALLOWING_SMART_RULE_CREATION = [
@@ -465,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.
      *
@@ -508,63 +579,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i2.AlarmService }, { type: i3.OptionsService }] });
 
-/**
- * A service to retrieve custom buttons for the alarm details view.
- */
-class AlarmDetailsButtonService {
-    constructor(serviceRegistry, pluginsResolver) {
-        this.serviceRegistry = serviceRegistry;
-        this.pluginsResolver = pluginsResolver;
-    }
-    get$(alarm, source) {
-        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map$1(() => {
-            return this.serviceRegistry.get('alarmDetailsButton');
-        }));
-        return providers$.pipe(switchMap(providers => {
-            const observables$ = providers.map(provider => provider.getAlarmDetailsButton$(alarm, source).pipe(startWith(false)));
-            return combineLatest(observables$);
-        }), map$1(indicators => {
-            return indicators.filter(Boolean);
-        }), map$1(indicators => sortBy(indicators, this.byPriority)));
-    }
-    byPriority(item) {
-        if (item.priority === undefined) {
-            return 0;
-        }
-        return -item.priority;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
-
-/**
- * A pipe to provide custom buttons for the alarm details view.
- *
- * Will call `get$()` method of `AlarmDetailsButtonService` to get the custom buttons for the provided alarm.
- */
-class AlarmDetailsButtonPipe {
-    constructor(alarmDetailsButtonService) {
-        this.alarmDetailsButtonService = alarmDetailsButtonService;
-    }
-    transform(alarm, source) {
-        return this.alarmDetailsButtonService.get$(alarm, source);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, deps: [{ token: AlarmDetailsButtonService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, isStandalone: true, name: "alarmDetailsButton" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'alarmDetailsButton',
-                    pure: true
-                }]
-        }], ctorParameters: () => [{ type: AlarmDetailsButtonService }] });
-
 /**
  * Pipe for transforming alarm severity types into corresponding icons.
  *
@@ -703,10 +717,12 @@ class AlarmDetailsComponent {
         this.customFragments = null;
     }
     async ngOnInit() {
+        const isSmartRulesServiceSubscribed = !!(await this.alarmDetailsService.getApplication(this.alarmDetailsService.SMART_RULES_APPLICATION_KEY));
+        const hasAnyRoleAllowingToCreateSmartRule = this.alarmDetailsService.checkIfHasAnyRoleAllowingToCreateSmartRule();
         this.isCreateSmartRulesButtonAvailable =
             !!this.ng1SmartRulesUpgradeService &&
-                this.isSmartRulesServiceSubscribed &&
-                this.hasAnyRoleAllowingToCreateSmartRule;
+                isSmartRulesServiceSubscribed &&
+                hasAnyRoleAllowingToCreateSmartRule;
         this.userDeviceManagementApp = await this.alarmDetailsService.getApplication(this.alarmDetailsService.DEVICE_MANAGEMENT_APPLICATION_KEY);
         this.showSourceNavigationLink =
             !!this.userDeviceManagementApp && !this.isDeviceManagementView();
@@ -981,19 +997,15 @@ class AlarmDetailsComponent {
         return customProperties;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsComponent, deps: [{ token: AlarmDetailsService }, { token: i2.AlarmService }, { token: i3.AlertService }, { token: i3.AppStateService }, { token: i2.AuditService }, { token: i3.RelativeTimePipe }, { token: Ng1SmartRulesUpgradeService, optional: true }, { token: i1.TranslateService }, { token: i2.InventoryService }, { token: AlarmsViewService }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm", hasAnyRoleAllowingToCreateSmartRule: "hasAnyRoleAllowingToCreateSmartRule", isSmartRulesServiceSubscribed: "isSmartRulesServiceSubscribed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n", dependencies: [{ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { 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.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n", dependencies: [{ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { 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.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-details', template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n" }]
+            args: [{ selector: 'c8y-alarm-details', template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: AlarmDetailsService }, { type: i2.AlarmService }, { type: i3.AlertService }, { type: i3.AppStateService }, { type: i2.AuditService }, { type: i3.RelativeTimePipe }, { type: Ng1SmartRulesUpgradeService, decorators: [{
                     type: Optional
                 }] }, { type: i1.TranslateService }, { type: i2.InventoryService }, { type: AlarmsViewService }, { type: i3.ColorService }], propDecorators: { selectedAlarm: [{
                 type: Input
-            }], hasAnyRoleAllowingToCreateSmartRule: [{
-                type: Input
-            }], isSmartRulesServiceSubscribed: [{
-                type: Input
             }] } });
 
 class AlarmEmptyComponent {
@@ -1006,40 +1018,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
         }] });
 
 class AlarmInfoComponent {
-    constructor(alarmDetailsService, activatedRoute, alarmsService, router, contextRouteService, alarmsViewService) {
-        this.alarmDetailsService = alarmDetailsService;
+    constructor(activatedRoute, router, contextRouteService, alarmsViewService) {
         this.activatedRoute = activatedRoute;
-        this.alarmsService = alarmsService;
         this.router = router;
         this.contextRouteService = contextRouteService;
         this.alarmsViewService = alarmsViewService;
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.selectedAlarm$ = this.activatedRoute.params.pipe(tap(() => (this.isLoading = true)), switchMap$1(params => this.alarmsService.detail(params.id)), map(alarmResult => alarmResult.data), tap(() => this.loadingDone()), shareReplay(), takeUntil(this.destroy$));
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        this.isContextRoute = false;
+        this.TITLE = gettext('Alarms');
     }
-    async loadingDone() {
-        this.isSmartRulesServiceSubscribed = !!(await this.alarmDetailsService.getApplication(this.alarmDetailsService.SMART_RULES_APPLICATION_KEY));
-        this.hasAnyRoleAllowingToCreateSmartRule =
-            this.alarmDetailsService.checkIfHasAnyRoleAllowingToCreateSmartRule();
-        this.isLoading = false;
+    async ngOnInit() {
+        const contextData = this.contextRouteService.getContextData(this.activatedRoute);
+        this.selectedAlarm$ = of(contextData.contextData);
+        this.isContextRoute = this.contextRouteService.isContextRoute(this.router.url, [
+            ViewContext.Device,
+            ViewContext.Group
+        ]);
     }
     back() {
         const contextData = this.contextRouteService.getContextData(this.activatedRoute);
         const backLink = this.alarmsViewService.getRouterNavigationArray(contextData);
         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: AlarmDetailsService }, { token: i1$1.ActivatedRoute }, { token: i2.AlarmService }, { 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: "<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div\n    class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator sticky-top bg-component\"\n  >\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 class=\"text-break-word flex-grow text-16\">\n        {{ (selectedAlarm$ | async)?.text | translate }}\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"card-block overflow-visible p-l-24 p-r-24\"\n    *ngIf=\"!isLoading; else loading\"\n  >\n    <c8y-alarm-details\n      [isSmartRulesServiceSubscribed]=\"isSmartRulesServiceSubscribed\"\n      [hasAnyRoleAllowingToCreateSmartRule]=\"hasAnyRoleAllowingToCreateSmartRule\"\n      [selectedAlarm]=\"selectedAlarm$ | async\"\n    ></c8y-alarm-details>\n  </div>\n  <ng-template #loading>\n    <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </ng-template>\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.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm", "hasAnyRoleAllowingToCreateSmartRule", "isSmartRulesServiceSubscribed"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    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>\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: "<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div\n    class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator sticky-top bg-component\"\n  >\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 class=\"text-break-word flex-grow text-16\">\n        {{ (selectedAlarm$ | async)?.text | translate }}\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"card-block overflow-visible p-l-24 p-r-24\"\n    *ngIf=\"!isLoading; else loading\"\n  >\n    <c8y-alarm-details\n      [isSmartRulesServiceSubscribed]=\"isSmartRulesServiceSubscribed\"\n      [hasAnyRoleAllowingToCreateSmartRule]=\"hasAnyRoleAllowingToCreateSmartRule\"\n      [selectedAlarm]=\"selectedAlarm$ | async\"\n    ></c8y-alarm-details>\n  </div>\n  <ng-template #loading>\n    <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: AlarmDetailsService }, { type: i1$1.ActivatedRoute }, { type: i2.AlarmService }, { type: i1$1.Router }, { type: i3.ContextRouteService }, { type: AlarmsViewService }] });
+            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 }] });
+
+/**
+ * A service to retrieve custom indicators for the alarm list view.
+ */
+class AlarmListIndicatorService {
+    constructor(serviceRegistry, pluginsResolver) {
+        this.serviceRegistry = serviceRegistry;
+        this.pluginsResolver = pluginsResolver;
+    }
+    get$(alarm) {
+        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map(() => {
+            return this.serviceRegistry.get('alarmListIndicator');
+        }));
+        return providers$.pipe(switchMap(providers => {
+            const observables$ = providers.map(provider => provider.getAlarmListIndicator$(alarm).pipe(startWith(false)));
+            return combineLatest(observables$);
+        }), map(indicators => {
+            return indicators.filter(Boolean);
+        }), map(indicators => sortBy(indicators, this.byPriority)));
+    }
+    byPriority(item) {
+        if (item.priority === undefined) {
+            return 0;
+        }
+        return -item.priority;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
+
+/**
+ * A pipe to provide custom indicators for the alarm list view.
+ *
+ * Will call `get$()` method of `AlarmListIndicatorService` to get the custom indicators for the provided alarm.
+ */
+class AlarmListIndicatorPipe {
+    constructor(alarmListIndicatorService) {
+        this.alarmListIndicatorService = alarmListIndicatorService;
+    }
+    transform(alarm) {
+        return this.alarmListIndicatorService.get$(alarm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, deps: [{ token: AlarmListIndicatorService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, isStandalone: true, name: "alarmListIndicator" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'alarmListIndicator',
+                    pure: true
+                }]
+        }], ctorParameters: () => [{ type: AlarmListIndicatorService }] });
 
 /**
  * Pipe for transforming an array of alarm severity types into a comma-separated string.
@@ -1104,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" }); }
@@ -1165,7 +1228,7 @@ class AlarmsFilterComponent {
         this.destroy$ = new Subject();
     }
     ngOnInit() {
-        this.activatedRoute.queryParams.pipe(takeUntil$1(this.destroy$)).subscribe(params => {
+        this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe(params => {
             this.showCleared = params.showCleared === 'true';
             this.formGroup.setValue({
                 [Severity.CRITICAL]: params[Severity.CRITICAL] === 'true',
@@ -1184,7 +1247,7 @@ class AlarmsFilterComponent {
     }
     ngAfterViewInit() {
         this.filtersDropdown.isOpenChange
-            .pipe(takeUntil$1(this.destroy$), filter(Boolean))
+            .pipe(takeUntil(this.destroy$), filter(Boolean))
             .subscribe(() => this.updateAlarmsCount());
     }
     ngOnDestroy() {
@@ -1290,19 +1353,19 @@ class AlarmsFilterComponent {
         this.shouldDisableApplyButton$ = this.createDisableApplyButtonStream();
     }
     createAllSelectedStream(formValue$) {
-        return formValue$.pipe(map$1(severities => Object.values(severities).every(Boolean)));
+        return formValue$.pipe(map(severities => Object.values(severities).every(Boolean)));
     }
     createIndeterminateStream(formValue$) {
-        return formValue$.pipe(map$1(severities => Object.values(severities).some(Boolean) && !Object.values(severities).every(Boolean)));
+        return formValue$.pipe(map(severities => Object.values(severities).some(Boolean) && !Object.values(severities).every(Boolean)));
     }
     trackAllCheckboxesDisabled(formValue$) {
-        formValue$.pipe(takeUntil$1(this.destroy$)).subscribe(severities => {
+        formValue$.pipe(takeUntil(this.destroy$)).subscribe(severities => {
             const areAllDisabled = Object.values(severities).every(value => !value);
             this.isNoneCheckboxSelected$.next(areAllDisabled);
         });
     }
     createDisableApplyButtonStream() {
-        return combineLatest([this.isNoneCheckboxSelected$, this.severitiesTouched$]).pipe(map$1(([allCheckboxesAreDisabled, severitiesTouched]) => allCheckboxesAreDisabled || !severitiesTouched));
+        return combineLatest([this.isNoneCheckboxSelected$, this.severitiesTouched$]).pipe(map(([allCheckboxesAreDisabled, severitiesTouched]) => allCheckboxesAreDisabled || !severitiesTouched));
     }
     updateChipsAndDefaultValues() {
         const severityFilter = this.formGroup;
@@ -1444,7 +1507,7 @@ class AlarmsIntervalRefreshComponent {
     onIntervalToggleChange() {
         this.toggleIntervalForm
             .get('intervalToggle')
-            .valueChanges.pipe(takeUntil$1(this.destroy$), filter(Boolean))
+            .valueChanges.pipe(takeUntil(this.destroy$), filter(Boolean))
             .subscribe(() => setTimeout(() => this.startCountdown()));
     }
     initForm() {
@@ -1456,12 +1519,12 @@ class AlarmsIntervalRefreshComponent {
     listenToRefreshIntervalChange() {
         this.toggleIntervalForm
             .get('refreshInterval')
-            .valueChanges.pipe(takeUntil$1(this.destroy$))
+            .valueChanges.pipe(takeUntil(this.destroy$))
             .subscribe(() => this.resetCountdown());
     }
     listenOnLoadingChanges() {
         this.alarmsListLoading$
-            .pipe(tap$1(() => this.countdownIntervalComponent?.stop()))
+            .pipe(tap(() => this.countdownIntervalComponent?.stop()))
             .subscribe(state => {
             !state && this.countdownIntervalComponent?.reset();
         });
@@ -1485,63 +1548,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 args: [CountdownIntervalComponent]
             }] } });
 
-/**
- * A service to retrieve custom indicators for the alarm list view.
- */
-class AlarmListIndicatorService {
-    constructor(serviceRegistry, pluginsResolver) {
-        this.serviceRegistry = serviceRegistry;
-        this.pluginsResolver = pluginsResolver;
-    }
-    get$(alarm) {
-        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map$1(() => {
-            return this.serviceRegistry.get('alarmListIndicator');
-        }));
-        return providers$.pipe(switchMap(providers => {
-            const observables$ = providers.map(provider => provider.getAlarmListIndicator$(alarm).pipe(startWith(false)));
-            return combineLatest(observables$);
-        }), map$1(indicators => {
-            return indicators.filter(Boolean);
-        }), map$1(indicators => sortBy(indicators, this.byPriority)));
-    }
-    byPriority(item) {
-        if (item.priority === undefined) {
-            return 0;
-        }
-        return -item.priority;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
-
-/**
- * A pipe to provide custom indicators for the alarm list view.
- *
- * Will call `get$()` method of `AlarmListIndicatorService` to get the custom indicators for the provided alarm.
- */
-class AlarmListIndicatorPipe {
-    constructor(alarmListIndicatorService) {
-        this.alarmListIndicatorService = alarmListIndicatorService;
-    }
-    transform(alarm) {
-        return this.alarmListIndicatorService.get$(alarm);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, deps: [{ token: AlarmListIndicatorService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, isStandalone: true, name: "alarmListIndicator" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'alarmListIndicator',
-                    pure: true
-                }]
-        }], ctorParameters: () => [{ type: AlarmListIndicatorService }] });
-
 class AlarmsListComponent {
     constructor(activatedRoute, alarmsViewService, contextRouteService, router) {
         this.activatedRoute = activatedRoute;
@@ -1604,7 +1610,7 @@ class AlarmsListComponent {
          */
         this.isEmptyListLoading = true;
         this.alertAggregator = new DynamicComponentAlertAggregator();
-        this.mapAlarmLink = pipe(map$1((alarms) => alarms.map((alarm) => {
+        this.mapAlarmLink = pipe(map((alarms) => alarms.map((alarm) => {
             alarm.link = this.getRouterLink(alarm);
             return alarm;
         })));
@@ -1644,7 +1650,7 @@ class AlarmsListComponent {
         if (this.alarmsViewService.isIntervalRefresh()) {
             const scrollElement = this.innerScrollWrapper.nativeElement;
             fromEvent(scrollElement, 'scroll')
-                .pipe(takeUntil$1(this.destroy$), debounceTime(300))
+                .pipe(takeUntil(this.destroy$), debounceTime(300))
                 .subscribe((event) => {
                 const target = event.target;
                 this.isScrolling = this.shouldCountdownIntervalBeHidden(target);
@@ -1671,7 +1677,7 @@ class AlarmsListComponent {
         return scrollTopPixels > this.HIDE_INTERVAL_COUNTDOWN_SCROLL;
     }
     verifyIfFiltersMatchingAlarm() {
-        this.activeChildParam$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd && this.activatedRoute.children.length > 0), switchMap(() => this.activatedRoute.children[0].params), map$1(params => params.id), distinctUntilChanged(), shareReplay$1(), takeUntil$1(this.destroy$));
+        this.activeChildParam$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd && this.activatedRoute.children.length > 0), switchMap(() => this.activatedRoute.children[0].params), map(params => params.id), distinctUntilChanged(), shareReplay$1(), takeUntil(this.destroy$));
         // done to get the first navigation
         this.activeChildParam$.subscribe();
     }
@@ -1705,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();
@@ -1723,7 +1734,7 @@ class AlarmsDateFilterComponent {
             this.form.value.currentDateContextFromDate,
             this.form.value.currentDateContextToDate
         ];
-        this.activatedRoute.queryParams.pipe(takeUntil(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',
@@ -1734,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();
     }
@@ -1746,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)
@@ -1759,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(this.destroy$))
+            .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) {
@@ -1814,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,
@@ -1828,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$1(params => {
-            const alarms = this.formGroup.get(this.formControlName).value;
-            return this.getActiveAlarmFiltersFromQueryParameter(alarms, params[this.queryParamName]);
-        }), takeUntil$1(this.destroy$))
-            .subscribe((alarmFilters) => this.formGroup.get(this.formControlName).patchValue(alarmFilters));
-        this.formGroup
-            .get(this.formControlName)
-            .valueChanges.pipe(takeUntil$1(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);
@@ -1903,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();
     }
-    async setAlarms() {
+    storeCustomAlarmTypes() {
+        const customTypes = this.possibleFilters.filter((filter) => !filter.__target);
+        window.localStorage.setItem(this.STORAGE_ACCESS_KEY, JSON.stringify(customTypes));
+    }
+    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
@@ -1980,7 +2065,7 @@ class AlarmsComponent {
             this.handleLegacyRealtime();
         }
         this.alarmsViewService.reloadAlarmsList$
-            .pipe(debounceTime(this.WAIT_TIME_AVOID_MULTIPLE_REQUEST_BY_PARAM_CHANGE), takeUntil$1(this.destroy$))
+            .pipe(debounceTime(this.WAIT_TIME_AVOID_MULTIPLE_REQUEST_BY_PARAM_CHANGE), takeUntil(this.destroy$))
             .subscribe(() => {
             this.updateAlarms();
         });
@@ -2087,7 +2172,7 @@ class AlarmsComponent {
     subscribeToRealtimeUpdates() {
         this.alarmWithChildrenRealtimeService
             .onAll$(this.contextSourceId)
-            .pipe(takeUntil$1(this.destroy$), throttleTime(THROTTLE_REALTIME_REFRESH, undefined, { trailing: true }))
+            .pipe(takeUntil(this.destroy$), throttleTime(THROTTLE_REALTIME_REFRESH, undefined, { trailing: true }))
             .subscribe(() => {
             if (this.isRealtimeToggleOn) {
                 this.refresh();
@@ -2098,19 +2183,55 @@ class AlarmsComponent {
         });
     }
     initializeContextSourceId() {
-        this.contextSourceId = this.contextRouteService.getContextData(this.activatedRoute)?.contextData?.id;
+        const routeContext = this.contextRouteService.getContextData(this.activatedRoute);
+        if (!routeContext) {
+            return;
+        }
+        const { context, contextData } = routeContext;
+        if ([ViewContext.Device, ViewContext.Group].includes(context)) {
+            this.contextSourceId = contextData?.id;
+        }
     }
     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]
             }] } });
 
+function getViewContextRoutes(contexts) {
+    return contexts.map(context => ({
+        context,
+        path: 'details',
+        icon: 'bell',
+        label: gettext('Details'),
+        component: AlarmInfoComponent,
+        tabsOutlet: 'alarms'
+    }));
+}
+function getChildrenForViewContext(context) {
+    return [
+        {
+            path: '',
+            component: AlarmEmptyComponent
+        },
+        {
+            path: ':id',
+            rootContext: context,
+            component: ContextRouteComponent,
+            canActivate: [ContextRouteGuard],
+            data: { context, contextData: {} },
+            resolve: {
+                tabs: RouterTabsResolver
+            }
+        }
+    ];
+}
+
 const defaultAlarmsConfig = {
     hybrid: true
 };
@@ -2158,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,
@@ -2201,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,
@@ -2236,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, 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