@c8y/ngx-components 1023.15.0 → 1023.16.3

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

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
 import { Injectable, Pipe, InjectionToken, HostListener, Input, Optional, Component, EventEmitter, ViewChild, Output, ChangeDetectionStrategy, forwardRef, signal, NgModule } from '@angular/core';
-import { combineLatest, Subject, BehaviorSubject, fromEvent, firstValueFrom, of, from, forkJoin, EMPTY, Observable, pipe, take, takeUntil as takeUntil$1, map as map$1 } from 'rxjs';
+import { combineLatest, BehaviorSubject, Subject, fromEvent, firstValueFrom, of, from, forkJoin, EMPTY, Observable, pipe, take, takeUntil as takeUntil$1, map as map$1 } from 'rxjs';
 import { filter, map, switchMap, startWith, debounceTime, takeUntil, distinctUntilChanged, catchError, finalize, tap, shareReplay, throttleTime } from 'rxjs/operators';
 import * as i3 from '@c8y/ngx-components';
-import { Permissions, ViewContext, SupportedApps, IconDirective, ProductExperienceDirective, EmptyStateComponent, LoadingComponent, ListGroupComponent, ForOfDirective, ListItemTimelineComponent, ListItemComponent, ListItemBodyComponent, C8yTranslatePipe, DatePipe, HumanizeAppNamePipe, AssetLinkPipe, TitleComponent, TabsOutletComponent, RequiredInputPlaceholderDirective, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, C8yTranslateDirective, ListItemIconComponent, GuideDocsComponent, GuideHrefDirective, DynamicComponentAlertsComponent, DropdownDirectionDirective, FormGroupComponent, DateTimePickerComponent, MessagesComponent, MessageDirective, ListItemCheckboxComponent, ActionBarItemComponent, HelpComponent, AlarmWithChildrenRealtimeService, RouterTabsResolver, ContextRouteGuard, ContextRouteComponent, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, C8yTranslateModule, DynamicComponentModule, RelativeTimePipe } from '@c8y/ngx-components';
+import { Permissions, ViewContext, SupportedApps, IconDirective, EmptyStateComponent, LoadingComponent, ListGroupComponent, ForOfDirective, ListItemTimelineComponent, ListItemComponent, ListItemBodyComponent, SplitViewDetailsActionsComponent, IconPanelComponent, C8yTranslatePipe, DatePipe, HumanizeAppNamePipe, AssetLinkPipe, TitleComponent, TabsOutletComponent, ProductExperienceDirective, RequiredInputPlaceholderDirective, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, C8yTranslateDirective, ListItemIconComponent, DynamicComponentAlertsComponent, SplitViewListComponent, SplitViewHeaderActionsComponent, SplitViewAlertsComponent, FormGroupComponent, DateTimePickerComponent, MessagesComponent, MessageDirective, ListItemCheckboxComponent, SplitViewComponent, SplitViewDetailsComponent, HelpComponent, ActionBarItemComponent, AlarmWithChildrenRealtimeService, RouterTabsResolver, ContextRouteGuard, ContextRouteComponent, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, C8yTranslateModule, DynamicComponentModule, RelativeTimePipe } from '@c8y/ngx-components';
 import { sortBy, cloneDeep } from 'lodash-es';
+import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe, JsonPipe, LowerCasePipe, NgIf, NgFor, TitleCasePipe } from '@angular/common';
+import * as i1 from '@angular/router';
+import { RouterLink, NavigationEnd, RouterLinkActive, RouterOutlet, RouterModule } from '@angular/router';
 import * as i2 from '@c8y/client';
 import { AlarmStatus, Severity, ALARM_STATUS_LABELS, SEVERITY_LABELS } from '@c8y/client';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1$1 from '@ngx-translate/core';
-import { INTERVAL_TITLES, INTERVALS, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
-import * as i1 from '@angular/router';
-import { RouterLink, NavigationEnd, RouterLinkActive, RouterOutlet, RouterModule } from '@angular/router';
-import * as i3$1 from '@c8y/ngx-components/global-context';
-import { NgClass, NgIf, NgStyle, NgFor, AsyncPipe, LowerCasePipe, JsonPipe, TitleCasePipe } from '@angular/common';
 import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
+import * as i3$1 from '@c8y/ngx-components/global-context';
+import { INTERVAL_TITLES, INTERVALS, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BsDropdownDirective, BsDropdownToggleDirective, BsDropdownMenuDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -209,6 +209,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i3.Permissions }] });
 
+class AlarmsActivityTrackerService {
+    constructor() {
+        this.isUserActive$ = new BehaviorSubject(true);
+        this.userSecondsSpendOnPage = 0;
+        this.INACTIVITY_THRESHOLD_SECONDS = 10;
+        this.ONE_SECOND_IN_MILLISECONDS = 1_000;
+        this.destroy$ = new Subject();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setGainsightInterval() {
+        this.gainsightTimerId = setInterval(() => this.userSecondsSpendOnPage++, this.ONE_SECOND_IN_MILLISECONDS);
+    }
+    clearGainsightInterval() {
+        clearInterval(this.gainsightTimerId);
+    }
+    resetInactivityTimer() {
+        this.isUserActive$.next(true);
+        clearTimeout(this.gainsightInactivityTimeoutId);
+        this.gainsightInactivityTimeoutId = setTimeout(() => {
+            this.isUserActive$.next(false); // Pause counting if the user is inactive
+        }, this.INACTIVITY_THRESHOLD_SECONDS * this.ONE_SECOND_IN_MILLISECONDS);
+    }
+    setupEventListenersForGainsight() {
+        const events = ['mousemove', 'keydown', 'click'];
+        events.forEach(event => {
+            fromEvent(window, event)
+                .pipe(debounceTime(30), takeUntil(this.destroy$))
+                .subscribe(() => this.resetInactivityTimer());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService, decorators: [{
+            type: Injectable
+        }] });
+
 const ALARMS_MODULE_CONFIG = new InjectionToken('AlarmsModuleConfig');
 const ALARM_STATUS_ICON = {
     ALERT_IDLE: 'c8y-alert-idle',
@@ -310,25 +350,6 @@ const PRODUCT_EXPERIENCE_ALARMS = {
     }
 };
 
-/**
- * This service is a duplicate of smart-rules-service with slight name change.
- * Duplicating allows to pass 'Verify App tutorial' job.
- * Name renames allows to pass 'Reusable build codex' job.
- * Overall this service is considered as a workaround.
- * In ticket MTM-58985 we will investigate if it's possible to remove this service
- * along with making failing jobs pass.
- */
-class Ng1SmartRulesUpgradeService {
-}
-function SmartRulesUpgradeServiceFactory(injector) {
-    return injector.get('smartRulesSvc');
-}
-const smartRulesUpgradeServiceProvider = {
-    provide: Ng1SmartRulesUpgradeService,
-    useFactory: SmartRulesUpgradeServiceFactory,
-    deps: ['$injector']
-};
-
 /**
  * Service for managing and retrieving alarms data within the alarms view.
  *
@@ -606,102 +627,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i2.AlarmService }, { type: i3.OptionsService }, { type: i3$1.DateTimeContextPickerService }, { type: i1.Router }, { type: i3.ContextRouteService }] });
 
-class AlarmsActivityTrackerService {
-    constructor() {
-        this.isUserActive$ = new BehaviorSubject(true);
-        this.userSecondsSpendOnPage = 0;
-        this.INACTIVITY_THRESHOLD_SECONDS = 10;
-        this.ONE_SECOND_IN_MILLISECONDS = 1_000;
-        this.destroy$ = new Subject();
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    setGainsightInterval() {
-        this.gainsightTimerId = setInterval(() => this.userSecondsSpendOnPage++, this.ONE_SECOND_IN_MILLISECONDS);
-    }
-    clearGainsightInterval() {
-        clearInterval(this.gainsightTimerId);
-    }
-    resetInactivityTimer() {
-        this.isUserActive$.next(true);
-        clearTimeout(this.gainsightInactivityTimeoutId);
-        this.gainsightInactivityTimeoutId = setTimeout(() => {
-            this.isUserActive$.next(false); // Pause counting if the user is inactive
-        }, this.INACTIVITY_THRESHOLD_SECONDS * this.ONE_SECOND_IN_MILLISECONDS);
-    }
-    setupEventListenersForGainsight() {
-        const events = ['mousemove', 'keydown', 'click'];
-        events.forEach(event => {
-            fromEvent(window, event)
-                .pipe(debounceTime(30), takeUntil(this.destroy$))
-                .subscribe(() => this.resetInactivityTimer());
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Pipe for transforming alarm severity types into corresponding icons.
- *
- * @example
- * Usage in an Angular template:
- * {{ 'CRITICAL' | AlarmSeverityToIcon }}
- * Result: 'exclamation-circle'
- */
-class AlarmSeverityToIconPipe {
-    /**
-     * Transforms an alarm severity type into a corresponding icon.
-     *
-     * @param alarmSeverity - The severity type of the alarm.
-     * @returns The corresponding icon for the given alarm severity type.
-     */
-    transform(alarmSeverity) {
-        const alarmSeverityMapped = Severity[alarmSeverity?.toUpperCase()];
-        return ALARM_SEVERITY_ICON_MAP[alarmSeverityMapped] || HELP_ICON;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, isStandalone: true, name: "AlarmSeverityToIcon" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'AlarmSeverityToIcon',
-                    standalone: true
-                }]
-        }] });
-
-/**
- * Angular pipe for transforming alarm statuses into corresponding icons.
- *
- * @example
- * Usage in an Angular template:
- * {{ 'ACTIVE' | AlarmStatusToIcon }}
- * Result: 'bell'
- */
-class AlarmStatusToIconPipe {
-    /**
-     * Transforms an alarm status into a corresponding icon.
-     *
-     * @param alarmStatus - The status of the alarm.
-     * @returns - The corresponding icon for the given alarm status.
-     */
-    transform(alarmStatus) {
-        return AlarmIconMap[alarmStatus?.toUpperCase()] || HELP_ICON;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, isStandalone: true, name: "AlarmStatusToIcon" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'AlarmStatusToIcon' }]
-        }] });
-
 /**
  * A pipe for transforming audit record data into localized messages.
  * It specifically addresses changes in the audit records, with an emphasis on status changes.
@@ -742,6 +667,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ name: 'auditChangesMessage' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
+/**
+ * This service is a duplicate of smart-rules-service with slight name change.
+ * Duplicating allows to pass 'Verify App tutorial' job.
+ * Name renames allows to pass 'Reusable build codex' job.
+ * Overall this service is considered as a workaround.
+ * In ticket MTM-58985 we will investigate if it's possible to remove this service
+ * along with making failing jobs pass.
+ */
+class Ng1SmartRulesUpgradeService {
+}
+function SmartRulesUpgradeServiceFactory(injector) {
+    return injector.get('smartRulesSvc');
+}
+const smartRulesUpgradeServiceProvider = {
+    provide: Ng1SmartRulesUpgradeService,
+    useFactory: SmartRulesUpgradeServiceFactory,
+    deps: ['$injector']
+};
+
 class AlarmDetailsComponent {
     constructor(alarmDetailsService, alarmService, alertService, appState, auditService, relativeTime, ng1SmartRulesUpgradeService, translateService, inventoryService, alarmsViewService, colorService, interAppService, gainsightService, alarmsActivityTrackerService) {
         this.alarmDetailsService = alarmDetailsService;
@@ -758,6 +702,26 @@ class AlarmDetailsComponent {
         this.interAppService = interAppService;
         this.gainsightService = gainsightService;
         this.alarmsActivityTrackerService = alarmsActivityTrackerService;
+        /**
+         * Master switch to show/hide ALL alarm details sections (default: true).
+         * When `false`, all sections are hidden regardless of `hiddenSections`.
+         * When `true`, use `hiddenSections` for granular control of individual sections.
+         *
+         * Priority: `showSections` takes precedence over `hiddenSections`.
+         */
+        this.showSections = true;
+        /**
+         * Master switch to show/hide ALL action buttons (default: true).
+         * When `false`, all actions are hidden regardless of `hiddenActions`.
+         * When `true`, use `hiddenActions` for granular control of individual actions.
+         *
+         * Priority: `showActions` takes precedence over `hiddenActions`.
+         */
+        this.showActions = true;
+        /**
+         * Whether to show external navigation links (default: true)
+         */
+        this.showExternalNavigation = true;
         this.ACKNOWLEDGED_STATUS_VALUE = AlarmStatus.ACKNOWLEDGED;
         this.ACTIVE_STATUS_VALUE = AlarmStatus.ACTIVE;
         this.CLEARED_STATUS_VALUE = AlarmStatus.CLEARED;
@@ -774,6 +738,14 @@ class AlarmDetailsComponent {
          * Indicates when alarms status change was started (Acknowledge/Reactivate)
          */
         this.isAlarmStatusChanging = false;
+        /**
+         * Cached alarm actions to prevent constant re-rendering
+         */
+        this.alarmActions = [];
+        /**
+         * Cached alarm info sections to prevent constant re-rendering
+         */
+        this.alarmInfoSections = [];
         /**
          * Custom fragments of the selected alarm. If none exist, null is returned.
          */
@@ -797,15 +769,23 @@ class AlarmDetailsComponent {
                 hasAnyRoleAllowingToCreateSmartRule;
         this.userDeviceManagementApp$ = this.interAppService.getApp$(this.deviceManagementAppKey);
         this.showSourceNavigationLink$ = this.interAppService.shouldShowAppLink$(this.deviceManagementAppKey);
-        this.typeColor = await this.colorService.generateColor(this.selectedAlarm.type);
+        this.typeColor = await this.colorService.generateColor(this.selectedAlarm?.type);
+        // Initialize cached actions and info sections
+        if (this.selectedAlarm) {
+            this.updateAlarmActions();
+            this.updateAlarmInfoSections();
+        }
     }
     async ngOnChanges(changes) {
         if (changes.selectedAlarm && changes.selectedAlarm.currentValue) {
             await this.reloadAuditLog(true, true);
             await this.updateStatusMessage();
-            const { data } = await this.inventoryService.detail(this.selectedAlarm.source.id);
+            const { data } = await this.inventoryService.detail(this.selectedAlarm?.source?.id);
             this.selectedAlarmMO = data;
             this.customFragments = this.getCustomFragments(this.selectedAlarm);
+            // Update cached actions and info sections when alarm data changes
+            this.updateAlarmActions();
+            this.updateAlarmInfoSections();
         }
     }
     ngOnDestroy() {
@@ -862,6 +842,8 @@ class AlarmDetailsComponent {
     async reloadAuditLog(isRevert = true, isSetAuditLogs = false) {
         try {
             this.isLoading = true;
+            // Update actions to show spinner on reload button
+            this.updateAlarmActions();
             const auditLogs = await this.getAlarmAuditRecords(isRevert);
             if (isSetAuditLogs) {
                 this.setAuditLogs(auditLogs);
@@ -873,15 +855,21 @@ class AlarmDetailsComponent {
         }
         finally {
             this.isLoading = false;
+            // Update actions to remove spinner from reload button
+            this.updateAlarmActions();
         }
     }
     async onUpdateDetails(status) {
         try {
             this.isAlarmStatusChanging = true;
+            // Update actions when status changing flag is set (affects button disabled state)
+            this.updateAlarmActions();
             await this.updateAlarmStatus(status);
             await this.reloadAuditLog(true, true);
             await this.updateStatusMessage();
             this.updateLastUpdatedDate(this.auditLog.data[0]);
+            // Update info sections to reflect new status message
+            this.updateAlarmInfoSections();
             if (status === AlarmStatus.CLEARED) {
                 this.alarmsViewService.closeDetailsView$.next();
             }
@@ -891,6 +879,8 @@ class AlarmDetailsComponent {
         }
         finally {
             this.isAlarmStatusChanging = false;
+            // Update actions when status changing flag is cleared (re-enables button)
+            this.updateAlarmActions();
         }
     }
     async detailsButtonAction(button, alarm) {
@@ -905,7 +895,7 @@ class AlarmDetailsComponent {
         if (shouldReload) {
             let alarm;
             if (shouldReload === true) {
-                const { data: updatedAlarm } = await this.alarmService.detail(this.selectedAlarm.id);
+                const { data: updatedAlarm } = await this.alarmService.detail(this.selectedAlarm?.id);
                 alarm = updatedAlarm;
             }
             else {
@@ -925,14 +915,19 @@ class AlarmDetailsComponent {
         }
     }
     async updateAlarmStatus(status) {
-        const partiallyUpdatedAlarm = { id: this.selectedAlarm.id, status };
+        const partiallyUpdatedAlarm = { id: this.selectedAlarm?.id, status };
         await this.alarmService.update(partiallyUpdatedAlarm);
         const translatedStatusLabel = this.translateService.instant(ALARM_STATUS_LABELS[status]);
         this.alertService.success(this.translateService.instant(gettext('Alarm status changed to {{ status }}'), {
             status: translatedStatusLabel.toUpperCase()
         }));
-        this.selectedAlarm.status = status;
+        if (this.selectedAlarm) {
+            this.selectedAlarm.status = status;
+        }
         this.alarmsViewService.updateAlarmList();
+        // Update cached actions and info sections when status changes
+        this.updateAlarmActions();
+        this.updateAlarmInfoSections();
     }
     /**
      * Retrieves the audit log and appends the last audit record to it.
@@ -962,7 +957,9 @@ class AlarmDetailsComponent {
             return;
         }
         const { creationTime } = updatedAuditRecords;
-        this.selectedAlarm.lastUpdated = creationTime;
+        if (this.selectedAlarm) {
+            this.selectedAlarm.lastUpdated = creationTime;
+        }
     }
     getActiveStatusMessage(time) {
         return this.translateService.instant(gettext('ACTIVE`alarm`: triggered {{alarmTimeFromNow}}'), {
@@ -1038,18 +1035,18 @@ class AlarmDetailsComponent {
             dateTo: new Date(Date.now()).toISOString(),
             pageSize: isRevert ? this.PAGE_SIZE : 1,
             revert: isRevert,
-            source: this.selectedAlarm.id,
+            source: this.selectedAlarm?.id,
             withTotalPages: true
         };
         return await this.auditService.list(properties);
     }
     async updateStatusMessage() {
-        switch (this.selectedAlarm.status) {
+        switch (this.selectedAlarm?.status) {
             case this.ACTIVE_STATUS_VALUE:
-                this.statusMessage = this.getActiveStatusMessage(this.selectedAlarm.time);
+                this.statusMessage = this.getActiveStatusMessage(this.selectedAlarm?.time);
                 break;
             case this.ACKNOWLEDGED_STATUS_VALUE:
-                this.statusMessage = this.getAcknowledgedStatusMessage(this.selectedAlarm.status, this.auditLog.data);
+                this.statusMessage = this.getAcknowledgedStatusMessage(this.selectedAlarm?.status, this.auditLog.data);
                 break;
             case this.CLEARED_STATUS_VALUE:
                 if (this.hasReachedOrExceededPageSizeLimit()) {
@@ -1076,20 +1073,144 @@ class AlarmDetailsComponent {
         }
         return customProperties;
     }
+    updateAlarmActions() {
+        const actions = [];
+        // Reload audit logs action
+        if (!this.hiddenActions?.reloadAuditLogs) {
+            actions.push({
+                id: 'reloadAuditLogs',
+                label: gettext('Reload audit logs'),
+                icon: 'refresh',
+                iconClass: this.isLoading ? 'icon-spin' : '',
+                class: 'btn btn-default btn-sm',
+                disabled: false,
+                visible: true,
+                action: () => this.reloadAuditLog(true, true),
+                dataCy: 'c8y-alarms-details--reload-audit-logs',
+                title: gettext('Reload audit logs'),
+                productExperience: {
+                    actionName: this.PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS,
+                    actionData: {
+                        component: this.PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,
+                        action: this.PRODUCT_EXPERIENCE_ALARMS.ACTIONS.RELOAD_AUDIT_LOGS
+                    }
+                }
+            });
+        }
+        // Acknowledge/Reactivate action
+        if (!this.hiddenActions?.acknowledgeReactivate) {
+            const isAcknowledged = this.selectedAlarm?.status === this.ACKNOWLEDGED_STATUS_VALUE;
+            actions.push({
+                id: 'acknowledgeReactivate',
+                label: isAcknowledged ? this.REACTIVATE_LABEL : this.ACKNOWLEDGE_LABEL,
+                icon: isAcknowledged ? this.BELL_ICON : this.BELL_SLASH_ICON,
+                class: 'btn btn-default btn-sm',
+                disabled: this.selectedAlarm?.status === this.CLEARED_STATUS_VALUE || this.isAlarmStatusChanging,
+                visible: true,
+                action: () => this.onUpdateDetails(isAcknowledged ? this.ACTIVE_STATUS_VALUE : this.ACKNOWLEDGED_STATUS_VALUE),
+                title: isAcknowledged ? this.REACTIVATE_LABEL : this.ACKNOWLEDGE_LABEL,
+                productExperience: {
+                    actionName: this.PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS,
+                    actionData: {
+                        component: this.PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,
+                        action: isAcknowledged
+                            ? this.PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REACTIVATE_ALARM
+                            : this.PRODUCT_EXPERIENCE_ALARMS.ACTIONS.ACKNOWLEDGE_ALARM
+                    }
+                }
+            });
+        }
+        // Create smart rule action
+        if (this.isCreateSmartRulesButtonAvailable && !this.hiddenActions?.createSmartRule) {
+            actions.push({
+                id: 'createSmartRule',
+                label: gettext('Create smart rule'),
+                icon: 'c8y-icon c8y-icon-smart-rules',
+                class: 'btn btn-default btn-sm',
+                disabled: false,
+                visible: true,
+                action: () => this.createSmartRule(),
+                dataCy: 'c8y-alarms-details--create-smart-rule',
+                title: gettext('Create smart rule'),
+                productExperience: {
+                    actionName: this.PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS,
+                    actionData: {
+                        component: this.PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,
+                        action: this.PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CREATE_SMART_RULE
+                    }
+                }
+            });
+        }
+        // Clear alarm action
+        if (!this.hiddenActions?.clearAlarm) {
+            actions.push({
+                id: 'clearAlarm',
+                label: gettext('Clear`alarm`'),
+                icon: 'c8y-alert-idle',
+                class: 'btn btn-default btn-sm',
+                disabled: this.selectedAlarm?.status === this.CLEARED_STATUS_VALUE,
+                visible: true,
+                action: () => this.onUpdateDetails(this.CLEARED_STATUS_VALUE),
+                dataCy: 'c8y-alarm-details--clear-alarm',
+                title: gettext('Clear`alarm`'),
+                productExperience: {
+                    actionName: this.PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS,
+                    actionData: {
+                        component: this.PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,
+                        action: this.PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CLEAR_ALARM
+                    }
+                }
+            });
+        }
+        this.alarmActions = actions;
+    }
+    updateAlarmInfoSections() {
+        const sections = [];
+        // Status section
+        if (this.showSections && !this.hiddenSections?.status) {
+            const statusIcon = this.selectedAlarm?.status
+                ? this.selectedAlarm?.status === this.ACKNOWLEDGED_STATUS_VALUE
+                    ? this.BELL_SLASH_ICON
+                    : this.selectedAlarm?.status === this.ACTIVE_STATUS_VALUE
+                        ? this.BELL_ICON
+                        : 'c8y-alert-idle'
+                : 'help';
+            sections.push({
+                id: 'status',
+                label: gettext('Status'),
+                icon: statusIcon,
+                visible: true,
+                content: this.statusMessage,
+                dataCy: 'c8y-alarm-details--status-section-wrapper'
+            });
+        }
+        // Severity section
+        if (this.showSections && !this.hiddenSections?.severity) {
+            const alarmSeverityMapped = Severity[this.selectedAlarm?.severity?.toUpperCase()];
+            const severityIcon = ALARM_SEVERITY_ICON_MAP[alarmSeverityMapped] || HELP_ICON;
+            sections.push({
+                id: 'severity',
+                label: gettext('Severity'),
+                icon: severityIcon,
+                visible: true,
+                content: this.SEVERITY_LABELS[this.selectedAlarm?.severity],
+                dataCy: 'c8y-alarm-details--severity-section-wrapper',
+                iconClass: `stroked-icon status ${this.selectedAlarm?.severity?.toString().toLowerCase() || ''}`
+            });
+        }
+        this.alarmInfoSections = sections;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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$1.TranslateService }, { token: i2.InventoryService }, { token: AlarmsViewService }, { token: i3.ColorService }, { token: i3.InterAppService }, { token: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmDetailsComponent, isStandalone: true, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], 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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\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\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\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 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$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span\n                class=\"badge badge-info\"\n                data-cy=\"c8y-alarm-details--badge\"\n              >\n                {{ selectedAlarm.count }}\n              </span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\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    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.RELOAD_AUDIT_LOGS\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action:\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? PRODUCT_EXPERIENCE_ALARMS.ACTIONS.ACKNOWLEDGE_ALARM\n          : PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REACTIVATE_ALARM\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CREATE_SMART_RULE\n    }\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\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    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CLEAR_ALARM\n    }\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></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 | c8yDate: 'mediumDate' }}\n      {{ log.creationTime | c8yDate: '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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: 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: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AssetLinkPipe, name: "assetLink" }, { 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: "17.0.0", version: "20.3.15", type: AlarmDetailsComponent, isStandalone: true, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm", showSections: "showSections", hiddenSections: "hiddenSections", showActions: "showActions", hiddenActions: "hiddenActions", showExternalNavigation: "showExternalNavigation" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], usesOnChanges: true, ngImport: i0, template: "@if (selectedAlarm) {\n  <div\n    class=\"card-header p-24 m-b-16 bg-component separator-bottom sticky-top\"\n    style=\"margin: 0 -24px\"\n  >\n    <h4\n      class=\"m-0\"\n      data-cy=\"c8y-alarm-details-title\"\n    >\n      {{ selectedAlarm.text | translate }}\n    </h4>\n  </div>\n}\n\n<c8y-icon-panel [sections]=\"alarmInfoSections\">\n  @if (showSections && !hiddenSections?.source) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--source-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <i\n            class=\"icon-24 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            @if (showSourceNavigationLink$ | async) {\n              <button\n                class=\"btn-link p-0 text-left\"\n                title=\"{{\n                  linkTitle\n                    | translate\n                      : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n                }}\"\n                type=\"button\"\n                (click)=\"goToAlarmSource(selectedAlarm?.id)\"\n                data-cy=\"alarm-details-device-management-link\"\n              >\n                {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n                <i c8yIcon=\"external-link\"></i>\n              </button>\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showSections && !hiddenSections?.type) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n    >\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\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Number of occurrences' | translate }}\n              </p>\n              <p>\n                <span\n                  class=\"badge badge-info\"\n                  data-cy=\"c8y-alarm-details--badge\"\n                >\n                  {{ selectedAlarm?.count }}\n                </span>\n              </p>\n            </div>\n          }\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n          @if (showSections && !hiddenSections?.lastOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n              <p class=\"small\">\n                {{ selectedAlarm?.lastUpdated | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (customFragments && showSections && !hiddenSections?.customData) {\n    <div\n      class=\"col-xs-12 col-md-12 p-b-16\"\n      data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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  }\n</c8y-icon-panel>\n\n@if (showActions) {\n  <c8y-sv-details-actions [actions]=\"alarmActions\">\n    @for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {\n      <button\n        class=\"btn btn-default btn-sm no-swing\"\n        [title]=\"button.title | translate\"\n        type=\"button\"\n        [ngClass]=\"button.additionalButtonClasses\"\n        (click)=\"detailsButtonAction(button, selectedAlarm!)\"\n        [disabled]=\"button.disabled\"\n      >\n        <i\n          [c8yIcon]=\"button.icon\"\n          [ngClass]=\"button.additionalIconClasses\"\n        ></i>\n        @if (button.label) {\n          <span>{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n  </c8y-sv-details-actions>\n}\n\n@if (showSections && !hiddenSections?.auditLogs) {\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>\n    <div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n    @if (isLoading || auditLog?.data.length) {\n      @if (isLoading) {\n        <c8y-loading></c8y-loading>\n      }\n\n      @if (!isLoading) {\n        <c8y-list-group data-cy=\"c8y-alarms-details--audit-logs\">\n          <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n            {{ log.creationTime | c8yDate: 'mediumDate' }}\n            {{ log.creationTime | c8yDate: '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                  @if (log.user) {\n                    <span class=\"m-r-16 small\">\n                      <span class=\"text-label-small\">\n                        {{ 'by`user`' | translate }}\n                      </span>\n                      {{ log.user }}\n                    </span>\n                  }\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      }\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"noAuditLogAvailable\"></ng-container>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: 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: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: SplitViewDetailsActionsComponent, selector: "c8y-sv-details-actions", inputs: ["actions"] }, { kind: "component", type: IconPanelComponent, selector: "c8y-icon-panel", inputs: ["sections", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-details', providers: [AlarmsActivityTrackerService], imports: [
                         IconDirective,
                         NgClass,
-                        RouterLink,
-                        NgIf,
                         NgStyle,
+                        RouterLink,
                         PopoverDirective,
-                        ProductExperienceDirective,
-                        NgFor,
                         EmptyStateComponent,
                         LoadingComponent,
                         ListGroupComponent,
@@ -1099,20 +1220,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         ListItemBodyComponent,
                         C8yTranslatePipe,
                         AsyncPipe,
-                        LowerCasePipe,
                         JsonPipe,
                         DatePipe,
                         HumanizeAppNamePipe,
                         AssetLinkPipe,
                         AlarmDetailsButtonPipe,
-                        AlarmSeverityToIconPipe,
-                        AlarmStatusToIconPipe,
-                        AuditChangesMessagePipe
-                    ], 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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\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\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\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 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$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span\n                class=\"badge badge-info\"\n                data-cy=\"c8y-alarm-details--badge\"\n              >\n                {{ selectedAlarm.count }}\n              </span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\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    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.RELOAD_AUDIT_LOGS\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action:\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? PRODUCT_EXPERIENCE_ALARMS.ACTIONS.ACKNOWLEDGE_ALARM\n          : PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REACTIVATE_ALARM\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CREATE_SMART_RULE\n    }\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\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    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CLEAR_ALARM\n    }\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></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 | c8yDate: 'mediumDate' }}\n      {{ log.creationTime | c8yDate: '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" }]
+                        AuditChangesMessagePipe,
+                        SplitViewDetailsActionsComponent,
+                        IconPanelComponent,
+                        NgTemplateOutlet
+                    ], template: "@if (selectedAlarm) {\n  <div\n    class=\"card-header p-24 m-b-16 bg-component separator-bottom sticky-top\"\n    style=\"margin: 0 -24px\"\n  >\n    <h4\n      class=\"m-0\"\n      data-cy=\"c8y-alarm-details-title\"\n    >\n      {{ selectedAlarm.text | translate }}\n    </h4>\n  </div>\n}\n\n<c8y-icon-panel [sections]=\"alarmInfoSections\">\n  @if (showSections && !hiddenSections?.source) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--source-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <i\n            class=\"icon-24 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            @if (showSourceNavigationLink$ | async) {\n              <button\n                class=\"btn-link p-0 text-left\"\n                title=\"{{\n                  linkTitle\n                    | translate\n                      : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n                }}\"\n                type=\"button\"\n                (click)=\"goToAlarmSource(selectedAlarm?.id)\"\n                data-cy=\"alarm-details-device-management-link\"\n              >\n                {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n                <i c8yIcon=\"external-link\"></i>\n              </button>\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showSections && !hiddenSections?.type) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n    >\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\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Number of occurrences' | translate }}\n              </p>\n              <p>\n                <span\n                  class=\"badge badge-info\"\n                  data-cy=\"c8y-alarm-details--badge\"\n                >\n                  {{ selectedAlarm?.count }}\n                </span>\n              </p>\n            </div>\n          }\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n          @if (showSections && !hiddenSections?.lastOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n              <p class=\"small\">\n                {{ selectedAlarm?.lastUpdated | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (customFragments && showSections && !hiddenSections?.customData) {\n    <div\n      class=\"col-xs-12 col-md-12 p-b-16\"\n      data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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  }\n</c8y-icon-panel>\n\n@if (showActions) {\n  <c8y-sv-details-actions [actions]=\"alarmActions\">\n    @for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {\n      <button\n        class=\"btn btn-default btn-sm no-swing\"\n        [title]=\"button.title | translate\"\n        type=\"button\"\n        [ngClass]=\"button.additionalButtonClasses\"\n        (click)=\"detailsButtonAction(button, selectedAlarm!)\"\n        [disabled]=\"button.disabled\"\n      >\n        <i\n          [c8yIcon]=\"button.icon\"\n          [ngClass]=\"button.additionalIconClasses\"\n        ></i>\n        @if (button.label) {\n          <span>{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n  </c8y-sv-details-actions>\n}\n\n@if (showSections && !hiddenSections?.auditLogs) {\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>\n    <div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n    @if (isLoading || auditLog?.data.length) {\n      @if (isLoading) {\n        <c8y-loading></c8y-loading>\n      }\n\n      @if (!isLoading) {\n        <c8y-list-group data-cy=\"c8y-alarms-details--audit-logs\">\n          <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n            {{ log.creationTime | c8yDate: 'mediumDate' }}\n            {{ log.creationTime | c8yDate: '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                  @if (log.user) {\n                    <span class=\"m-r-16 small\">\n                      <span class=\"text-label-small\">\n                        {{ 'by`user`' | translate }}\n                      </span>\n                      {{ log.user }}\n                    </span>\n                  }\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      }\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"noAuditLogAvailable\"></ng-container>\n    }\n  </div>\n}\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$1.TranslateService }, { type: i2.InventoryService }, { type: AlarmsViewService }, { type: i3.ColorService }, { type: i3.InterAppService }, { type: i3.GainsightService }, { type: AlarmsActivityTrackerService }], propDecorators: { selectedAlarm: [{
                 type: Input
+            }], showSections: [{
+                type: Input
+            }], hiddenSections: [{
+                type: Input
+            }], showActions: [{
+                type: Input
+            }], hiddenActions: [{
+                type: Input
+            }], showExternalNavigation: [{
+                type: Input
             }], visibilityChange: [{
                 type: HostListener,
                 args: ['document:visibilitychange']
@@ -1120,19 +1251,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class AlarmEmptyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmEmptyComponent, isStandalone: true, selector: "c8y-alarms-empty", ngImport: i0, template: "<div class=\"p-24 hidden-sm\" data-cy=\"c8y-alarms-empty\">\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</div>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmEmptyComponent, isStandalone: true, selector: "c8y-alarms-empty", ngImport: i0, template: "<div\n  class=\"p-24\"\n  data-cy=\"c8y-alarms-empty\"\n>\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n  ></c8y-ui-empty-state>\n</div>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmEmptyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-empty', imports: [EmptyStateComponent, C8yTranslatePipe], template: "<div class=\"p-24 hidden-sm\" data-cy=\"c8y-alarms-empty\">\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarms-empty', imports: [EmptyStateComponent, C8yTranslatePipe], template: "<div\n  class=\"p-24\"\n  data-cy=\"c8y-alarms-empty\"\n>\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n  ></c8y-ui-empty-state>\n</div>\n" }]
         }] });
 
 class AlarmInfoComponent {
-    constructor(activatedRoute, router, contextRouteService, alarmsViewService) {
+    constructor(activatedRoute, router, contextRouteService) {
         this.activatedRoute = activatedRoute;
         this.router = router;
         this.contextRouteService = contextRouteService;
-        this.alarmsViewService = alarmsViewService;
         this.isContextRoute = false;
         this.TITLE = gettext('Alarms');
     }
@@ -1144,24 +1274,13 @@ class AlarmInfoComponent {
             ViewContext.Group
         ]);
     }
-    back() {
-        this.alarmsViewService.closeDetailsView$.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ContextRouteService }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmInfoComponent, isStandalone: true, 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        data-cy=\"c8y-alarms-info--back\"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmInfoComponent, isStandalone: true, selector: "c8y-alarm-info", ngImport: i0, template: "@if (!isContextRoute) {\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n}\n\n@if (selectedAlarm$ | async; as selectedAlarm) {\n  <div class=\"p-relative\">\n    <c8y-tabs-outlet\n      outletName=\"alarms\"\n      orientation=\"horizontal\"\n    ></c8y-tabs-outlet>\n  </div>\n\n  <c8y-alarm-details [selectedAlarm]=\"selectedAlarm\"></c8y-alarm-details>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm", "showSections", "hiddenSections", "showActions", "hiddenActions", "showExternalNavigation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-info', imports: [
-                        NgIf,
-                        TitleComponent,
-                        IconDirective,
-                        TabsOutletComponent,
-                        AlarmDetailsComponent,
-                        C8yTranslatePipe,
-                        AsyncPipe
-                    ], 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        data-cy=\"c8y-alarms-info--back\"\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.ActivatedRoute }, { type: i1.Router }, { type: i3.ContextRouteService }, { type: AlarmsViewService }] });
+            args: [{ selector: 'c8y-alarm-info', imports: [TitleComponent, TabsOutletComponent, AlarmDetailsComponent, C8yTranslatePipe, AsyncPipe], template: "@if (!isContextRoute) {\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n}\n\n@if (selectedAlarm$ | async; as selectedAlarm) {\n  <div class=\"p-relative\">\n    <c8y-tabs-outlet\n      outletName=\"alarms\"\n      orientation=\"horizontal\"\n    ></c8y-tabs-outlet>\n  </div>\n\n  <c8y-alarm-details [selectedAlarm]=\"selectedAlarm\"></c8y-alarm-details>\n}\n" }]
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i3.ContextRouteService }] });
 
 /**
  * A service to retrieve custom indicators for the alarm list view.
@@ -1267,6 +1386,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ name: 'AlarmSeveritiesToTitle' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
+/**
+ * Pipe for transforming alarm severity types into corresponding icons.
+ *
+ * @example
+ * Usage in an Angular template:
+ * {{ 'CRITICAL' | AlarmSeverityToIcon }}
+ * Result: 'exclamation-circle'
+ */
+class AlarmSeverityToIconPipe {
+    /**
+     * Transforms an alarm severity type into a corresponding icon.
+     *
+     * @param alarmSeverity - The severity type of the alarm.
+     * @returns The corresponding icon for the given alarm severity type.
+     */
+    transform(alarmSeverity) {
+        const alarmSeverityMapped = Severity[alarmSeverity?.toUpperCase()];
+        return ALARM_SEVERITY_ICON_MAP[alarmSeverityMapped] || HELP_ICON;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, isStandalone: true, name: "AlarmSeverityToIcon" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'AlarmSeverityToIcon',
+                    standalone: true
+                }]
+        }] });
+
 class AlarmSeverityToIconClassPipe {
     transform(alarmSeverity) {
         let severityClassName = '';
@@ -1328,6 +1477,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ name: 'AlarmSeverityToLabel' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
+/**
+ * Angular pipe for transforming alarm statuses into corresponding icons.
+ *
+ * @example
+ * Usage in an Angular template:
+ * {{ 'ACTIVE' | AlarmStatusToIcon }}
+ * Result: 'bell'
+ */
+class AlarmStatusToIconPipe {
+    /**
+     * Transforms an alarm status into a corresponding icon.
+     *
+     * @param alarmStatus - The status of the alarm.
+     * @returns - The corresponding icon for the given alarm status.
+     */
+    transform(alarmStatus) {
+        return AlarmIconMap[alarmStatus?.toUpperCase()] || HELP_ICON;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, isStandalone: true, name: "AlarmStatusToIcon" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'AlarmStatusToIcon' }]
+        }] });
+
 /**
  * Pipe to transform alarm status to corresponding label.
  */
@@ -1536,8 +1711,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         ReactiveFormsModule,
                         BsDropdownDirective,
                         CdkTrapFocus,
-                        NgIf,
-                        NgFor,
                         ProductExperienceDirective,
                         IconDirective,
                         NgClass,
@@ -1769,15 +1942,6 @@ class AlarmsListComponent {
          * When set to `false`, the alarm list is displayed. When set to `true`, the opacity of alarms list is changed and a loading bar is shown.
          */
         this.isInitialLoading = false;
-        /**
-         * Controls the visibility and functionality of some components
-         * When set to `true`, means the list is displayed in a split view layout:
-         * the list on the first column and the selected record detail on the second column (the cockpit
-         * alarms view for example)
-         * When set to false, the list is displayed as a standalone component, opening the detail will
-         * redirect to the alarms
-         */
-        this.splitView = false;
         /**
          * Indicates whether the component is in widget preview mode.
          */
@@ -1844,7 +2008,7 @@ class AlarmsListComponent {
             return;
         }
         if (this.alarmsViewService.isIntervalRefresh()) {
-            const scrollElement = this.innerScrollWrapper.nativeElement;
+            const scrollElement = this.svListComponent.innerScrollDiv.nativeElement;
             fromEvent(scrollElement, 'scroll')
                 .pipe(takeUntil(this.destroy$), debounceTime(300))
                 .subscribe((event) => {
@@ -1878,16 +2042,12 @@ class AlarmsListComponent {
         this.activeChildParam$.subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsListComponent, deps: [{ token: i1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.ContextRouteService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmsListComponent, isStandalone: true, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", splitView: "splitView", isInPreviewMode: "isInPreviewMode" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "innerScrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        data-cy=\"c8y-alarms-list--loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            data-cy=\"c8y-alarms-list--badge\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\" data-cy=\"c8y-alarms-list--alarm-text\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"c8y-alarms-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmsListComponent, isStandalone: true, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", isInPreviewMode: "isInPreviewMode" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "svListComponent", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-sv-list\n  [emptyStateIcon]=\"'c8y-alert-idle'\"\n  [title]=\"'Alarms list' | translate\"\n  [emptyStateTitle]=\"'No alarms to display.' | translate\"\n  [loading]=\"isInitialLoading || isEmptyListLoading\"\n  [showEmptyState]=\"isEmptyListLoading && !isInitialLoading && hasPermissions\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'\n  \"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <c8y-sv-header-actions>\n    <ng-content></ng-content>\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (\n      !isEmptyListLoading &&\n      (activeChildParam$ | async) &&\n      (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n    ) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected alarm is not currently in the list, change your filter.\n      </div>\n    }\n  </c8y-sv-alerts>\n\n  <c8y-list-group class=\"c8y-list--timeline d-block p-r-16 p-t-16\">\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon\n              [typeFilters]=\"typeFilters\"\n              [alarm]=\"alarm\"\n            ></c8y-alarms-icon>\n          </div>\n          @if (alarm.firstOccurrenceTime) {\n            <button\n              class=\"btn-clean text-center\"\n              [attr.aria-label]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              [tooltip]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              placement=\"right\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"c8y-alarms-list--badge\"\n              (click)=\"$event.stopPropagation()\"\n              [delay]=\"500\"\n            >\n              @if (alarm.count > 1) {\n                <span class=\"badge badge-info\">\n                  {{ alarm.count }}\n                </span>\n              }\n            </button>\n          }\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-alarms-list--alarm-text\"\n              >\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  @for (item of alarm | alarmListIndicator | async; track $index) {\n                    <div [title]=\"item.title | translate\">\n                      <i\n                        [class]=\"item.class\"\n                        [c8yIcon]=\"item.icon\"\n                      ></i>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: 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: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: SplitViewListComponent, selector: "c8y-sv-list", inputs: ["title", "loading", "showEmptyState", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle", "docsUrl", "showTitle", "listOpacity"] }, { kind: "component", type: SplitViewHeaderActionsComponent, selector: "c8y-sv-header-actions" }, { kind: "component", type: SplitViewAlertsComponent, selector: "c8y-sv-alerts" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-list', imports: [
-                        NgClass,
-                        NgIf,
                         C8yTranslateDirective,
-                        ListGroupComponent,
-                        NgStyle,
                         ForOfDirective,
                         ListItemTimelineComponent,
                         RouterLinkActive,
@@ -1898,17 +2058,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AlarmsIconComponent,
                         ListItemBodyComponent,
                         IconDirective,
-                        NgFor,
-                        LoadingComponent,
-                        EmptyStateComponent,
-                        GuideDocsComponent,
-                        GuideHrefDirective,
                         DynamicComponentAlertsComponent,
                         C8yTranslatePipe,
                         AsyncPipe,
                         DatePipe,
-                        AlarmListIndicatorPipe
-                    ], template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        data-cy=\"c8y-alarms-list--loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            data-cy=\"c8y-alarms-list--badge\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\" data-cy=\"c8y-alarms-list--alarm-text\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"c8y-alarms-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n" }]
+                        AlarmListIndicatorPipe,
+                        SplitViewListComponent,
+                        SplitViewHeaderActionsComponent,
+                        SplitViewAlertsComponent,
+                        ListGroupComponent
+                    ], template: "<c8y-sv-list\n  [emptyStateIcon]=\"'c8y-alert-idle'\"\n  [title]=\"'Alarms list' | translate\"\n  [emptyStateTitle]=\"'No alarms to display.' | translate\"\n  [loading]=\"isInitialLoading || isEmptyListLoading\"\n  [showEmptyState]=\"isEmptyListLoading && !isInitialLoading && hasPermissions\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'\n  \"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <c8y-sv-header-actions>\n    <ng-content></ng-content>\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (\n      !isEmptyListLoading &&\n      (activeChildParam$ | async) &&\n      (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n    ) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected alarm is not currently in the list, change your filter.\n      </div>\n    }\n  </c8y-sv-alerts>\n\n  <c8y-list-group class=\"c8y-list--timeline d-block p-r-16 p-t-16\">\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon\n              [typeFilters]=\"typeFilters\"\n              [alarm]=\"alarm\"\n            ></c8y-alarms-icon>\n          </div>\n          @if (alarm.firstOccurrenceTime) {\n            <button\n              class=\"btn-clean text-center\"\n              [attr.aria-label]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              [tooltip]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              placement=\"right\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"c8y-alarms-list--badge\"\n              (click)=\"$event.stopPropagation()\"\n              [delay]=\"500\"\n            >\n              @if (alarm.count > 1) {\n                <span class=\"badge badge-info\">\n                  {{ alarm.count }}\n                </span>\n              }\n            </button>\n          }\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-alarms-list--alarm-text\"\n              >\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  @for (item of alarm | alarmListIndicator | async; track $index) {\n                    <div [title]=\"item.title | translate\">\n                      <i\n                        [class]=\"item.class\"\n                        [c8yIcon]=\"item.icon\"\n                      ></i>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.ContextRouteService }, { type: i1.Router }], propDecorators: { alarms: [{
                 type: Input
             }], hasPermissions: [{
@@ -1921,15 +2080,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], isInitialLoading: [{
                 type: Input
-            }], splitView: [{
-                type: Input
             }], isInPreviewMode: [{
                 type: Input
             }], onSelectedAlarm: [{
                 type: Output
             }], onScrollingStateChange: [{
                 type: Output
-            }], innerScrollWrapper: [{
+            }], svListComponent: [{
                 type: ViewChild,
                 args: ['scrollWrapper']
             }] } });
@@ -2076,13 +2233,13 @@ class AlarmsDateFilterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsDateFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmsDateFilterComponent, isStandalone: true, selector: "c8y-alarms-date-filter", inputs: { DEFAULT_INTERVAL: "DEFAULT_INTERVAL", updateQueryParams: "updateQueryParams", date: "date" }, outputs: { dateFilterChange: "dateFilterChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmsDateFilterComponent, isStandalone: true, 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+        ], 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    container=\"body\"\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        @if (form.controls.currentDateContextInterval.value !== 'none') {\n          <span\n            class=\"text-10 text-muted text-truncate\"\n            data-cy=\"alarms-date-filter--selected-time-range\"\n          >\n            {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n          </span>\n        }\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      @if (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      }\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsDateFilterComponent, decorators: [{
             type: Component,
@@ -2096,11 +2253,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         BsDropdownDirective,
-                        DropdownDirectionDirective,
                         BsDropdownToggleDirective,
                         TooltipDirective,
                         IconDirective,
-                        NgIf,
                         BsDropdownMenuDirective,
                         IntervalPickerComponent,
                         FormGroupComponent,
@@ -2111,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MessageDirective,
                         C8yTranslatePipe,
                         DatePipe
-                    ], 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" }]
+                    ], 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    container=\"body\"\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        @if (form.controls.currentDateContextInterval.value !== 'none') {\n          <span\n            class=\"text-10 text-muted text-truncate\"\n            data-cy=\"alarms-date-filter--selected-time-range\"\n          >\n            {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n          </span>\n        }\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      @if (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      }\n    </ul>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: AlarmsViewService }], propDecorators: { DEFAULT_INTERVAL: [{
                 type: Input
             }], updateQueryParams: [{
@@ -2287,7 +2442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class AlarmsComponent {
-    constructor(activatedRoute, alarmsViewService, alarmWithChildrenRealtimeService, alertService, contextRouteService, modalService, translateService, router, gainsightService, alarmsActivityTrackerService) {
+    constructor(activatedRoute, alarmsViewService, alarmWithChildrenRealtimeService, alertService, contextRouteService, modalService, translateService, gainsightService, alarmsActivityTrackerService) {
         this.activatedRoute = activatedRoute;
         this.alarmsViewService = alarmsViewService;
         this.alarmWithChildrenRealtimeService = alarmWithChildrenRealtimeService;
@@ -2295,7 +2450,6 @@ class AlarmsComponent {
         this.contextRouteService = contextRouteService;
         this.modalService = modalService;
         this.translateService = translateService;
-        this.router = router;
         this.gainsightService = gainsightService;
         this.alarmsActivityTrackerService = alarmsActivityTrackerService;
         this.NEW_REALTIME_ALARM_MESSAGE = this.alarmsViewService.REALTIME_UPDATE_ALARMS_MESSAGE;
@@ -2397,6 +2551,9 @@ class AlarmsComponent {
         this.updateAlarms(null);
         this.isRealtimeActive.next(false);
     }
+    async handleBackClick() {
+        await this.alarmsViewService.closeDetailsView(this.activatedRoute);
+    }
     changeInterval(value = true) {
         this.shouldShowIntervalToggle$.next(value);
     }
@@ -2481,14 +2638,16 @@ class AlarmsComponent {
             this.contextSourceId = contextData?.id;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsComponent, deps: [{ token: i1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.AlarmWithChildrenRealtimeService }, { token: i3.AlertService }, { token: i3.ContextRouteService }, { token: i3.ModalService }, { token: i1$1.TranslateService }, { token: i1.Router }, { token: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmsComponent, isStandalone: true, selector: "c8y-alarms", host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], 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); isListScrolled.set($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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsComponent, deps: [{ token: i1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.AlarmWithChildrenRealtimeService }, { token: i3.AlertService }, { token: i3.ContextRouteService }, { token: i3.ModalService }, { token: i1$1.TranslateService }, { token: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmsComponent, isStandalone: true, selector: "c8y-alarms", host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ TITLE | translate }}</c8y-title>\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\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<c8y-sv [resizableConfig]=\"{ trackId: 'alarms-split-view', collapsible: false }\">\n  <c8y-alarms-list\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event); isListScrolled.set($event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    @if (isIntervalRefresh) {\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    } @else {\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          @if (isRealtimeActive | async) {\n            <span class=\"tag tag--info m-r-8\">\n              {{ 'New alarms' | translate }}\n            </span>\n          }\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    }\n  </c8y-alarms-list>\n\n  <c8y-sv-details\n    emptyStateIcon=\"alarm\"\n    [emptyStateTitle]=\"'No alarm selected' | translate\"\n    [emptyStateSubtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    (backClick)=\"handleBackClick()\"\n  >\n    <router-outlet></router-outlet>\n  </c8y-sv-details>\n</c8y-sv>\n", dependencies: [{ kind: "component", type: SplitViewComponent, selector: "c8y-sv", inputs: ["showDefaultRouterOutlet", "isResizable", "initialSelection", "resizableBreakpoint", "resizableConfig"], outputs: ["selectionChange"] }, { kind: "component", type: SplitViewDetailsComponent, selector: "c8y-sv-details", inputs: ["title", "ariaLabel", "cssClass", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle"], outputs: ["backClick"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], imports: [
-                        NgIf,
+                        SplitViewComponent,
+                        SplitViewDetailsComponent,
                         TitleComponent,
+                        HelpComponent,
                         ActionBarItemComponent,
                         AlarmsFilterComponent,
                         AlarmsDateFilterComponent,
@@ -2496,14 +2655,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         IconDirective,
                         TooltipDirective,
                         NgClass,
-                        HelpComponent,
                         AlarmsListComponent,
                         AlarmsIntervalRefreshComponent,
-                        RouterOutlet,
                         C8yTranslatePipe,
-                        AsyncPipe
-                    ], 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); isListScrolled.set($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.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.AlarmWithChildrenRealtimeService }, { type: i3.AlertService }, { type: i3.ContextRouteService }, { type: i3.ModalService }, { type: i1$1.TranslateService }, { type: i1.Router }, { type: i3.GainsightService }, { type: AlarmsActivityTrackerService }], propDecorators: { alarmIntervalRefreshComponent: [{
+                        AsyncPipe,
+                        RouterOutlet
+                    ], template: "<c8y-title>{{ TITLE | translate }}</c8y-title>\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\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<c8y-sv [resizableConfig]=\"{ trackId: 'alarms-split-view', collapsible: false }\">\n  <c8y-alarms-list\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event); isListScrolled.set($event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    @if (isIntervalRefresh) {\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    } @else {\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          @if (isRealtimeActive | async) {\n            <span class=\"tag tag--info m-r-8\">\n              {{ 'New alarms' | translate }}\n            </span>\n          }\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    }\n  </c8y-alarms-list>\n\n  <c8y-sv-details\n    emptyStateIcon=\"alarm\"\n    [emptyStateTitle]=\"'No alarm selected' | translate\"\n    [emptyStateSubtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    (backClick)=\"handleBackClick()\"\n  >\n    <router-outlet></router-outlet>\n  </c8y-sv-details>\n</c8y-sv>\n" }]
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.AlarmWithChildrenRealtimeService }, { type: i3.AlertService }, { type: i3.ContextRouteService }, { type: i3.ModalService }, { type: i1$1.TranslateService }, { type: i3.GainsightService }, { type: AlarmsActivityTrackerService }], propDecorators: { alarmIntervalRefreshComponent: [{
                 type: ViewChild,
                 args: [AlarmsIntervalRefreshComponent]
             }], visibilityChange: [{
@@ -2525,8 +2683,10 @@ function getChildrenForViewContext(context) {
     return [
         {
             path: '',
-            component: AlarmEmptyComponent,
-            label: gettext('Alarms')
+            // No component for empty path - router-outlet won't activate
+            // This allows details panel to slide out on mobile, showing the list
+            // On desktop, split-view-details will show its custom empty state
+            children: []
         },
         {
             path: ':id',