@c8y/ngx-components 1022.10.1 → 1022.13.0

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

@@ -1,24 +1,22 @@
 import * as i0 from '@angular/core';
 import { Injectable, Pipe, ViewChild, Input, Component, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i5 from '@angular/forms';
-import { FormControl, NgForm, ControlContainer, FormsModule as FormsModule$1, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, NgForm, ControlContainer, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@c8y/client';
 import { AlarmStatus, Severity, SEVERITY_LABELS, ALARM_STATUS_LABELS } from '@c8y/client';
 import * as i2$1 from '@c8y/ngx-components';
-import { gettext, IntervalBasedReload, WIDGET_TYPE_VALUES, CountdownIntervalComponent, DismissAlertStrategy, DynamicComponentAlert, globalAutoRefreshLoading, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule } from '@c8y/ngx-components';
-import * as i3 from '@c8y/ngx-components/alarms';
-import { ALARM_STATUS_ICON, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, AlarmsModule } from '@c8y/ngx-components/alarms';
+import { gettext, C8yTranslateDirective, FormGroupComponent, RequiredInputPlaceholderDirective, IconDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, IntervalBasedReload, WIDGET_TYPE_VALUES, CountdownIntervalComponent, DismissAlertStrategy, DynamicComponentAlert, globalAutoRefreshLoading, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
+import * as i1 from '@c8y/ngx-components/alarms';
+import { ALARM_STATUS_ICON, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, AlarmsDateFilterComponent, AlarmsListComponent, AlarmsModule } from '@c8y/ngx-components/alarms';
 import * as i6 from '@ngx-translate/core';
 import { omit, isEqual, isEmpty } from 'lodash-es';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { startWith, pairwise, debounceTime, tap, takeUntil, skip } from 'rxjs/operators';
 import * as i7 from '@c8y/ngx-components/context-dashboard';
-import * as i8 from '@angular/common';
-import { CommonModule as CommonModule$1 } from '@angular/common';
-import * as i9 from 'ngx-bootstrap/popover';
-import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i5$1 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
+import { NgIf, NgFor, NgClass, AsyncPipe, CommonModule as CommonModule$1 } from '@angular/common';
+import * as i1$1 from 'ngx-bootstrap/tooltip';
+import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { RouterModule } from '@angular/router';
 
 const ALARM_ORDER_VALUES = {
@@ -373,13 +371,13 @@ class AlarmWidgetService {
     buildOrderParameters(orderParams) {
         return `$orderby=${orderParams.join(',')}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmWidgetService, deps: [{ token: i3.AlarmsViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmWidgetService, deps: [{ token: i1.AlarmsViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmWidgetService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmWidgetService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i3.AlarmsViewService }] });
+        }], ctorParameters: () => [{ type: i1.AlarmsViewService }] });
 
 class SeverityIconPipe {
     transform(severity) {
@@ -411,14 +409,11 @@ class SeverityIconPipe {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SeverityIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SeverityIconPipe, isStandalone: false, name: "severityIcon" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SeverityIconPipe, isStandalone: true, name: "severityIcon" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SeverityIconPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'severityIcon',
-                    standalone: false
-                }]
+            args: [{ name: 'severityIcon' }]
         }] });
 
 class SortingDescriptionPopoverMessagePipe {
@@ -437,14 +432,11 @@ class SortingDescriptionPopoverMessagePipe {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, isStandalone: false, name: "sortingDescriptionPopoverMessage" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, isStandalone: true, name: "sortingDescriptionPopoverMessage" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'sortingDescriptionPopoverMessage',
-                    standalone: false
-                }]
+            args: [{ name: 'sortingDescriptionPopoverMessage' }]
         }] });
 
 class AlarmListWidgetConfigComponent {
@@ -745,13 +737,32 @@ class AlarmListWidgetConfigComponent {
             ? this.formGroup.get('refreshInterval').enable()
             : this.formGroup.get('refreshInterval').disable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i3.AlarmsViewService }, { token: i2$1.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.TranslateService }, { token: i7.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmListWidgetConfigComponent, isStandalone: false, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row d-flex flex-wrap\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Date' | translate }}</legend>\n      <div class=\"form-group form-group-sm m-b-16\">\n        <label class=\"d-flex a-i-center\">\n          <span translate>Date selection</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget and widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.VIEW_AND_CONFIG\"\n            >\n              {{ 'Widget and widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <div class=\"row tight-grid\">\n        <div class=\"col-md-7\">\n          <ng-container *ngIf=\"showDateFilter\">\n            <c8y-form-group class=\"m-b-16 form-group-sm\">\n              <label>{{ 'Date filter' | translate }}</label>\n              <c8y-alarms-date-filter\n                [updateQueryParams]=\"false\"\n                [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n                formControlName=\"dateFilter\"\n                (dateFilterChange)=\"onDateFilterChange($event)\"\n              ></c8y-alarms-date-filter>\n            </c8y-form-group>\n          </ng-container>\n        </div>\n        <div class=\"col-md-5\">\n          <c8y-form-group class=\"m-b-16 form-group-sm\">\n            <label class=\"d-flex a-i-center\">\n              {{ refreshTypeTitle }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"refreshTypePopoverMessage\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </label>\n            <div class=\"d-flex gap-8 a-i-center\">\n              <ng-template #realtime>\n                <label class=\"c8y-switch\">\n                  <input\n                    id=\"refreshToggle\"\n                    name=\"isAutoRefreshEnabled\"\n                    type=\"checkbox\"\n                    formControlName=\"isAutoRefreshEnabled\"\n                  />\n                  <span></span>\n                  <span class=\"sr-only\">{{ 'Realtime refresh' | translate }}</span>\n                </label>\n              </ng-template>\n              <div\n                class=\"c8y-select-wrapper\"\n                *ngIf=\"!config.isRealtime; else realtime\"\n              >\n                <select\n                  class=\"form-control\"\n                  title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n                  [(ngModel)]=\"refreshOption\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (change)=\"updateRefreshOption()\"\n                >\n                  <option value=\"none\">\n                    {{ 'No automatic refresh' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval' | translate\"\n                    value=\"interval\"\n                  >\n                    {{ 'Use refresh interval' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                    value=\"global-interval\"\n                  >\n                    {{ 'Use global refresh interval' | translate }}\n                  </option>\n                </select>\n              </div>\n              <ng-container\n                *ngIf=\"!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION\"\n              >\n                <div class=\"c8y-select-wrapper flex-grow flex-no-shrink\" title=\" {{ 'Interval' | translate }}\">\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Refresh interval in seconds' | translate\"\n                    id=\"refreshInterval\"\n                    formControlName=\"refreshInterval\"\n                    data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n                  >\n                    <option\n                      *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                      [ngValue]=\"refreshInterval\"\n                    >\n                      {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <div\n          class=\"d-flex p-b-8 p-t-4 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n    <ng-container *ngIf=\"showDateFilter\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Date filter' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <c8y-alarms-date-filter\n            [updateQueryParams]=\"false\"\n            [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n            formControlName=\"dateFilter\"\n            (dateFilterChange)=\"onDateFilterChange($event)\"\n          ></c8y-alarms-date-filter>\n        </c8y-form-group>\n      </fieldset>\n    </ng-container>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n        {{ 'Status' | translate }}\n      </legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n    >\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n          data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n            data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  \n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group m-b-4\"\n          *ngFor=\"let type of types.controls; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n              data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<ng-template #alarmListPreview>\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: i3.AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i9.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: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i2$1.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.TranslateService }, { token: i7.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmListWidgetConfigComponent, isStandalone: true, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row d-flex flex-wrap\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Date' | translate }}</legend>\n      <div class=\"form-group form-group-sm m-b-16\">\n        <label class=\"d-flex a-i-center\">\n          <span translate>Date selection</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget and widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.VIEW_AND_CONFIG\"\n            >\n              {{ 'Widget and widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <div class=\"row tight-grid\">\n        <div class=\"col-md-7\">\n          <ng-container *ngIf=\"showDateFilter\">\n            <c8y-form-group class=\"m-b-16 form-group-sm\">\n              <label>{{ 'Date filter' | translate }}</label>\n              <c8y-alarms-date-filter\n                [updateQueryParams]=\"false\"\n                [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n                formControlName=\"dateFilter\"\n                (dateFilterChange)=\"onDateFilterChange($event)\"\n              ></c8y-alarms-date-filter>\n            </c8y-form-group>\n          </ng-container>\n        </div>\n        <div class=\"col-md-5\">\n          <c8y-form-group class=\"m-b-16 form-group-sm\">\n            <label class=\"d-flex a-i-center\">\n              {{ refreshTypeTitle }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"refreshTypePopoverMessage\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </label>\n            <div class=\"d-flex gap-8 a-i-center\">\n              <ng-template #realtime>\n                <label class=\"c8y-switch\">\n                  <input\n                    id=\"refreshToggle\"\n                    name=\"isAutoRefreshEnabled\"\n                    type=\"checkbox\"\n                    formControlName=\"isAutoRefreshEnabled\"\n                  />\n                  <span></span>\n                  <span class=\"sr-only\">{{ 'Realtime refresh' | translate }}</span>\n                </label>\n              </ng-template>\n              <div\n                class=\"c8y-select-wrapper\"\n                *ngIf=\"!config.isRealtime; else realtime\"\n              >\n                <select\n                  class=\"form-control\"\n                  title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n                  [(ngModel)]=\"refreshOption\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (change)=\"updateRefreshOption()\"\n                >\n                  <option value=\"none\">\n                    {{ 'No automatic refresh' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval' | translate\"\n                    value=\"interval\"\n                  >\n                    {{ 'Use refresh interval' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                    value=\"global-interval\"\n                  >\n                    {{ 'Use global refresh interval' | translate }}\n                  </option>\n                </select>\n              </div>\n              <ng-container\n                *ngIf=\"!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION\"\n              >\n                <div class=\"c8y-select-wrapper flex-grow flex-no-shrink\" title=\" {{ 'Interval' | translate }}\">\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Refresh interval in seconds' | translate\"\n                    id=\"refreshInterval\"\n                    formControlName=\"refreshInterval\"\n                    data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n                  >\n                    <option\n                      *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                      [ngValue]=\"refreshInterval\"\n                    >\n                      {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <div\n          class=\"d-flex p-b-8 p-t-4 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n    <ng-container *ngIf=\"showDateFilter\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Date filter' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <c8y-alarms-date-filter\n            [updateQueryParams]=\"false\"\n            [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n            formControlName=\"dateFilter\"\n            (dateFilterChange)=\"onDateFilterChange($event)\"\n          ></c8y-alarms-date-filter>\n        </c8y-form-group>\n      </fieldset>\n    </ng-container>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n        {{ 'Status' | translate }}\n      </legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n    >\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n          data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n            data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  \n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group m-b-4\"\n          *ngFor=\"let type of types.controls; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n              data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<ng-template #alarmListPreview>\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmListWidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-list-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row d-flex flex-wrap\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Date' | translate }}</legend>\n      <div class=\"form-group form-group-sm m-b-16\">\n        <label class=\"d-flex a-i-center\">\n          <span translate>Date selection</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget and widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.VIEW_AND_CONFIG\"\n            >\n              {{ 'Widget and widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <div class=\"row tight-grid\">\n        <div class=\"col-md-7\">\n          <ng-container *ngIf=\"showDateFilter\">\n            <c8y-form-group class=\"m-b-16 form-group-sm\">\n              <label>{{ 'Date filter' | translate }}</label>\n              <c8y-alarms-date-filter\n                [updateQueryParams]=\"false\"\n                [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n                formControlName=\"dateFilter\"\n                (dateFilterChange)=\"onDateFilterChange($event)\"\n              ></c8y-alarms-date-filter>\n            </c8y-form-group>\n          </ng-container>\n        </div>\n        <div class=\"col-md-5\">\n          <c8y-form-group class=\"m-b-16 form-group-sm\">\n            <label class=\"d-flex a-i-center\">\n              {{ refreshTypeTitle }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"refreshTypePopoverMessage\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </label>\n            <div class=\"d-flex gap-8 a-i-center\">\n              <ng-template #realtime>\n                <label class=\"c8y-switch\">\n                  <input\n                    id=\"refreshToggle\"\n                    name=\"isAutoRefreshEnabled\"\n                    type=\"checkbox\"\n                    formControlName=\"isAutoRefreshEnabled\"\n                  />\n                  <span></span>\n                  <span class=\"sr-only\">{{ 'Realtime refresh' | translate }}</span>\n                </label>\n              </ng-template>\n              <div\n                class=\"c8y-select-wrapper\"\n                *ngIf=\"!config.isRealtime; else realtime\"\n              >\n                <select\n                  class=\"form-control\"\n                  title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n                  [(ngModel)]=\"refreshOption\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (change)=\"updateRefreshOption()\"\n                >\n                  <option value=\"none\">\n                    {{ 'No automatic refresh' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval' | translate\"\n                    value=\"interval\"\n                  >\n                    {{ 'Use refresh interval' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                    value=\"global-interval\"\n                  >\n                    {{ 'Use global refresh interval' | translate }}\n                  </option>\n                </select>\n              </div>\n              <ng-container\n                *ngIf=\"!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION\"\n              >\n                <div class=\"c8y-select-wrapper flex-grow flex-no-shrink\" title=\" {{ 'Interval' | translate }}\">\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Refresh interval in seconds' | translate\"\n                    id=\"refreshInterval\"\n                    formControlName=\"refreshInterval\"\n                    data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n                  >\n                    <option\n                      *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                      [ngValue]=\"refreshInterval\"\n                    >\n                      {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <div\n          class=\"d-flex p-b-8 p-t-4 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n    <ng-container *ngIf=\"showDateFilter\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Date filter' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <c8y-alarms-date-filter\n            [updateQueryParams]=\"false\"\n            [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n            formControlName=\"dateFilter\"\n            (dateFilterChange)=\"onDateFilterChange($event)\"\n          ></c8y-alarms-date-filter>\n        </c8y-form-group>\n      </fieldset>\n    </ng-container>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n        {{ 'Status' | translate }}\n      </legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n    >\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n          data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n            data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  \n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group m-b-4\"\n          *ngFor=\"let type of types.controls; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n              data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<ng-template #alarmListPreview>\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i3.AlarmsViewService }, { type: i2$1.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.TranslateService }, { type: i7.WidgetConfigService }], propDecorators: { config: [{
+            args: [{ selector: 'c8y-alarm-list-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        C8yTranslateDirective,
+                        PopoverDirective,
+                        NgIf,
+                        FormGroupComponent,
+                        AlarmsDateFilterComponent,
+                        RequiredInputPlaceholderDirective,
+                        NgFor,
+                        NgClass,
+                        IconDirective,
+                        MessagesComponent,
+                        MessageDirective,
+                        AlarmsListComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        SeverityIconPipe,
+                        SortingDescriptionPopoverMessagePipe
+                    ], template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row d-flex flex-wrap\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Date' | translate }}</legend>\n      <div class=\"form-group form-group-sm m-b-16\">\n        <label class=\"d-flex a-i-center\">\n          <span translate>Date selection</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget and widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.VIEW_AND_CONFIG\"\n            >\n              {{ 'Widget and widget configuration' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <div class=\"row tight-grid\">\n        <div class=\"col-md-7\">\n          <ng-container *ngIf=\"showDateFilter\">\n            <c8y-form-group class=\"m-b-16 form-group-sm\">\n              <label>{{ 'Date filter' | translate }}</label>\n              <c8y-alarms-date-filter\n                [updateQueryParams]=\"false\"\n                [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n                formControlName=\"dateFilter\"\n                (dateFilterChange)=\"onDateFilterChange($event)\"\n              ></c8y-alarms-date-filter>\n            </c8y-form-group>\n          </ng-container>\n        </div>\n        <div class=\"col-md-5\">\n          <c8y-form-group class=\"m-b-16 form-group-sm\">\n            <label class=\"d-flex a-i-center\">\n              {{ refreshTypeTitle }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"refreshTypePopoverMessage\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </label>\n            <div class=\"d-flex gap-8 a-i-center\">\n              <ng-template #realtime>\n                <label class=\"c8y-switch\">\n                  <input\n                    id=\"refreshToggle\"\n                    name=\"isAutoRefreshEnabled\"\n                    type=\"checkbox\"\n                    formControlName=\"isAutoRefreshEnabled\"\n                  />\n                  <span></span>\n                  <span class=\"sr-only\">{{ 'Realtime refresh' | translate }}</span>\n                </label>\n              </ng-template>\n              <div\n                class=\"c8y-select-wrapper\"\n                *ngIf=\"!config.isRealtime; else realtime\"\n              >\n                <select\n                  class=\"form-control\"\n                  title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n                  [(ngModel)]=\"refreshOption\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (change)=\"updateRefreshOption()\"\n                >\n                  <option value=\"none\">\n                    {{ 'No automatic refresh' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval' | translate\"\n                    value=\"interval\"\n                  >\n                    {{ 'Use refresh interval' | translate }}\n                  </option>\n                  <option\n                    [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                    value=\"global-interval\"\n                  >\n                    {{ 'Use global refresh interval' | translate }}\n                  </option>\n                </select>\n              </div>\n              <ng-container\n                *ngIf=\"!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION\"\n              >\n                <div class=\"c8y-select-wrapper flex-grow flex-no-shrink\" title=\" {{ 'Interval' | translate }}\">\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Refresh interval in seconds' | translate\"\n                    id=\"refreshInterval\"\n                    formControlName=\"refreshInterval\"\n                    data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n                  >\n                    <option\n                      *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                      [ngValue]=\"refreshInterval\"\n                    >\n                      {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <div\n          class=\"d-flex p-b-8 p-t-4 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n    <ng-container *ngIf=\"showDateFilter\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Date filter' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <c8y-alarms-date-filter\n            [updateQueryParams]=\"false\"\n            [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n            formControlName=\"dateFilter\"\n            (dateFilterChange)=\"onDateFilterChange($event)\"\n          ></c8y-alarms-date-filter>\n        </c8y-form-group>\n      </fieldset>\n    </ng-container>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n        {{ 'Status' | translate }}\n      </legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n    >\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n          data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n            data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  \n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group m-b-4\"\n          *ngFor=\"let type of types.controls; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n              data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<ng-template #alarmListPreview>\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i2$1.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.TranslateService }, { type: i7.WidgetConfigService }], propDecorators: { config: [{
                 type: Input
             }], previewMapSet: [{
                 type: ViewChild,
@@ -906,13 +917,21 @@ class AlarmWidgetAlarmsReloadComponent extends IntervalBasedReload {
             ? this.translateService.instant(gettext('Disable auto refresh'))
             : this.translateService.instant(gettext('Enable auto refresh'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, deps: [{ token: i3.AlarmsViewService }, { token: i0.ChangeDetectorRef }, { token: i6.TranslateService }, { token: i2$1.WidgetGlobalAutoRefreshService }, { token: i2$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmWidgetAlarmsReloadComponent, isStandalone: false, selector: "c8y-alarm-widget-alarms-reload", inputs: { isIntervalRefresh: "isIntervalRefresh", refreshInterval: "refreshInterval", config: "config", isLoading: "isLoading", isScrolling: "isScrolling", isRefreshDisabled: "isRefreshDisabled" }, outputs: { onCountdownEnded: "onCountdownEnded", onRealTimeToggleChanged: "onRealTimeToggleChanged" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event, WIDGET_TYPE_VALUES.ALARMS)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isRefreshDisabled\"\n          data-cy=\"c8y-alarms-widget--realtime-indicator\"\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    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, deps: [{ token: i1.AlarmsViewService }, { token: i0.ChangeDetectorRef }, { token: i6.TranslateService }, { token: i2$1.WidgetGlobalAutoRefreshService }, { token: i2$1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmWidgetAlarmsReloadComponent, isStandalone: true, selector: "c8y-alarm-widget-alarms-reload", inputs: { isIntervalRefresh: "isIntervalRefresh", refreshInterval: "refreshInterval", config: "config", isLoading: "isLoading", isScrolling: "isScrolling", isRefreshDisabled: "isRefreshDisabled" }, outputs: { onCountdownEnded: "onCountdownEnded", onRealTimeToggleChanged: "onRealTimeToggleChanged" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event, WIDGET_TYPE_VALUES.ALARMS)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isRefreshDisabled\"\n          data-cy=\"c8y-alarms-widget--realtime-indicator\"\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    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-widget-alarms-reload', standalone: false, template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event, WIDGET_TYPE_VALUES.ALARMS)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isRefreshDisabled\"\n          data-cy=\"c8y-alarms-widget--realtime-indicator\"\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    </div>\n  </div>\n</div>" }]
-        }], ctorParameters: () => [{ type: i3.AlarmsViewService }, { type: i0.ChangeDetectorRef }, { type: i6.TranslateService }, { type: i2$1.WidgetGlobalAutoRefreshService }, { type: i2$1.GainsightService }], propDecorators: { isIntervalRefresh: [{
+            args: [{ selector: 'c8y-alarm-widget-alarms-reload', imports: [
+                        NgIf,
+                        TooltipDirective,
+                        CountdownIntervalComponent,
+                        IconDirective,
+                        NgClass,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event, WIDGET_TYPE_VALUES.ALARMS)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isRefreshDisabled\"\n          data-cy=\"c8y-alarms-widget--realtime-indicator\"\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    </div>\n  </div>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1.AlarmsViewService }, { type: i0.ChangeDetectorRef }, { type: i6.TranslateService }, { type: i2$1.WidgetGlobalAutoRefreshService }, { type: i2$1.GainsightService }], propDecorators: { isIntervalRefresh: [{
                 type: Input
             }], refreshInterval: [{
                 type: Input
@@ -1148,13 +1167,19 @@ class AlarmListWidgetComponent {
             .pipe(skip(1), globalAutoRefreshLoading(this.widgetGlobalAutoRefresh), takeUntil(this.destroy$))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmListWidgetComponent, deps: [{ token: AlarmWidgetService }, { token: i2$1.AlarmRealtimeService }, { token: i2.AlarmService }, { token: i3.AlarmsViewService }, { token: i2$1.AlarmWithChildrenRealtimeService }, { token: i2$1.DashboardChildComponent }, { token: i2$1.AlertService }, { token: i2$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmListWidgetComponent, isStandalone: false, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmWidgetAlarmsReloadComp", first: true, predicate: AlarmWidgetAlarmsReloadComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isRefreshDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i3.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: i3.AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: ["isIntervalRefresh", "refreshInterval", "config", "isLoading", "isScrolling", "isRefreshDisabled"], outputs: ["onCountdownEnded", "onRealTimeToggleChanged"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmListWidgetComponent, deps: [{ token: AlarmWidgetService }, { token: i2$1.AlarmRealtimeService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i2$1.AlarmWithChildrenRealtimeService }, { token: i2$1.DashboardChildComponent }, { token: i2$1.AlertService }, { token: i2$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmListWidgetComponent, isStandalone: true, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmWidgetAlarmsReloadComp", first: true, predicate: AlarmWidgetAlarmsReloadComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isRefreshDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n", dependencies: [{ kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: ["isIntervalRefresh", "refreshInterval", "config", "isLoading", "isScrolling", "isRefreshDisabled"], outputs: ["onCountdownEnded", "onRealTimeToggleChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmListWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], standalone: false, template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isRefreshDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n" }]
-        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2$1.AlarmRealtimeService }, { type: i2.AlarmService }, { type: i3.AlarmsViewService }, { type: i2$1.AlarmWithChildrenRealtimeService }, { type: i2$1.DashboardChildComponent }, { type: i2$1.AlertService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { config: [{
+            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], imports: [
+                        AlarmsListComponent,
+                        NgIf,
+                        AlarmsDateFilterComponent,
+                        AlarmWidgetAlarmsReloadComponent,
+                        AsyncPipe
+                    ], template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isRefreshDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n" }]
+        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2$1.AlarmRealtimeService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i2$1.AlarmWithChildrenRealtimeService }, { type: i2$1.DashboardChildComponent }, { type: i2$1.AlertService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { config: [{
                 type: Input
             }], alarmWidgetAlarmsReloadComp: [{
                 type: ViewChild,
@@ -1163,31 +1188,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class AlarmsWidgetModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmsWidgetModule, declarations: [AlarmListWidgetComponent,
-            AlarmListWidgetConfigComponent,
-            AlarmWidgetAlarmsReloadComponent,
-            SeverityIconPipe,
-            SortingDescriptionPopoverMessagePipe], imports: [AlarmsModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmsWidgetModule, imports: [AlarmsModule,
             CommonModule,
             CountdownIntervalModule,
             DocsModule,
-            FormsModule,
-            CommonModule$1,
             FormsModule$1,
+            CommonModule$1,
+            FormsModule,
             PopoverModule,
             ReactiveFormsModule,
-            RouterModule, i5$1.TooltipModule] }); }
+            RouterModule, i1$1.TooltipModule, AlarmListWidgetComponent,
+            AlarmListWidgetConfigComponent,
+            AlarmWidgetAlarmsReloadComponent,
+            SeverityIconPipe,
+            SortingDescriptionPopoverMessagePipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsWidgetModule, imports: [AlarmsModule,
             CommonModule,
             CountdownIntervalModule,
             DocsModule,
-            FormsModule,
-            CommonModule$1,
             FormsModule$1,
+            CommonModule$1,
+            FormsModule,
             PopoverModule,
             ReactiveFormsModule,
             RouterModule,
-            TooltipModule.forRoot()] }); }
+            TooltipModule.forRoot(),
+            AlarmListWidgetComponent,
+            AlarmListWidgetConfigComponent,
+            AlarmWidgetAlarmsReloadComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsWidgetModule, decorators: [{
             type: NgModule,
@@ -1197,15 +1225,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CommonModule,
                         CountdownIntervalModule,
                         DocsModule,
-                        FormsModule,
-                        CommonModule$1,
                         FormsModule$1,
+                        CommonModule$1,
+                        FormsModule,
                         PopoverModule,
                         ReactiveFormsModule,
                         RouterModule,
-                        TooltipModule.forRoot()
-                    ],
-                    declarations: [
+                        TooltipModule.forRoot(),
                         AlarmListWidgetComponent,
                         AlarmListWidgetConfigComponent,
                         AlarmWidgetAlarmsReloadComponent,