@c8y/ngx-components 1021.22.0 → 1021.25.0

package/fesm2022/c8y-ngx-components-interval-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-interval-picker.mjs","sources":["../../interval-picker/interval-picker.model.ts","../../interval-picker/interval-picker.component.ts","../../interval-picker/interval-picker.component.html","../../interval-picker/c8y-ngx-components-interval-picker.ts"],"sourcesContent":["import { gettext } from '@c8y/ngx-components/gettext';\n\nconst todayDate = new Date();\nexport enum TimeSpanInMs {\n  'MINUTE' = 1000 * 60,\n  'HOUR' = 1000 * 60 * 60,\n  'DAY' = 1000 * 60 * 60 * 24,\n  'WEEK' = 1000 * 60 * 60 * 24 * 7,\n  'MONTH' = todayDate.valueOf() - new Date(todayDate.setMonth(todayDate.getMonth() - 1)).valueOf()\n}\n\nexport type Interval = {\n  id: 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'custom';\n  title: string;\n  timespanInMs?: number;\n};\n\nexport const INTERVALS: Interval[] = [\n  {\n    id: 'minutes',\n    title: gettext('Last minute'),\n    timespanInMs: TimeSpanInMs.MINUTE\n  },\n  {\n    id: 'hours',\n    title: gettext('Last hour'),\n    timespanInMs: TimeSpanInMs.HOUR\n  },\n  {\n    id: 'days',\n    title: gettext('Last day'),\n    timespanInMs: TimeSpanInMs.DAY\n  },\n  {\n    id: 'weeks',\n    title: gettext('Last week'),\n    timespanInMs: TimeSpanInMs.WEEK\n  },\n  {\n    id: 'months',\n    title: gettext('Last month'),\n    timespanInMs: TimeSpanInMs.MONTH\n  },\n  { id: 'custom', title: gettext('Custom') }\n];\n\nexport const INTERVAL_TITLES: Record<Interval['id'], string> = {\n  minutes: gettext('Last minute'),\n  hours: gettext('Last hour'),\n  days: gettext('Last day'),\n  weeks: gettext('Last week'),\n  months: gettext('Last month'),\n  custom: gettext('Custom')\n};\n","import { Component, forwardRef, Input } from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  FormsModule,\n  ReactiveFormsModule\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { BsDropdownModule } from 'ngx-bootstrap/dropdown';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { Interval, INTERVALS } from './interval-picker.model';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n  selector: 'c8y-interval-picker',\n  templateUrl: './interval-picker.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => IntervalPickerComponent),\n      multi: true\n    }\n  ],\n  standalone: true,\n  imports: [CommonModule, FormsModule, A11yModule, ReactiveFormsModule, BsDropdownModule]\n})\nexport class IntervalPickerComponent implements ControlValueAccessor {\n  @Input() INTERVALS = INTERVALS;\n\n  value: Interval['id'];\n  touched = false;\n  disabled = false;\n  translatedIntervals: { id: string; title: string }[] = [];\n\n  constructor(private translate: TranslateService) {}\n\n  ngOnInit() {\n    this.translatedIntervals = this.INTERVALS.map(interval => ({\n      ...interval,\n      title: this.translate.instant(interval.title)\n    }));\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  onChange = _ => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  onTouched = () => {};\n\n  writeValue(value: Interval['id']) {\n    this.value = value;\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(onTouched: any) {\n    this.onTouched = onTouched;\n  }\n\n  markAsTouched() {\n    if (!this.touched) {\n      this.onTouched();\n      this.touched = true;\n    }\n  }\n\n  setDisabledState(disabled: boolean) {\n    this.disabled = disabled;\n  }\n}\n","<li\n  *ngFor=\"let interval of translatedIntervals\"\n  [ngClass]=\"{\n    active: interval.id === value\n  }\"\n>\n  <button\n    type=\"button\"\n    (click)=\"onChange(interval.id)\"\n  >\n    <span\n      [ngClass]=\"{\n        'text-primary': interval.id === value\n      }\"\n    >\n      <span\n        c8yIcon=\"check\"\n        [ngStyle]=\"{ visibility: interval.id === value ? 'visible' : 'hidden' }\"\n      ></span>\n      {{ interval.title }}\n    </span>\n  </button>\n</li>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-interval-picker.mjs","sources":["../../interval-picker/interval-picker.model.ts","../../interval-picker/interval-picker.component.ts","../../interval-picker/interval-picker.component.html","../../interval-picker/c8y-ngx-components-interval-picker.ts"],"sourcesContent":["import { gettext } from '@c8y/ngx-components/gettext';\n\nconst todayDate = new Date();\nexport enum TimeSpanInMs {\n  'MINUTE' = 1000 * 60,\n  'HOUR' = 1000 * 60 * 60,\n  'DAY' = 1000 * 60 * 60 * 24,\n  'WEEK' = 1000 * 60 * 60 * 24 * 7,\n  'MONTH' = todayDate.valueOf() - new Date(todayDate.setMonth(todayDate.getMonth() - 1)).valueOf()\n}\n\nexport type Interval = {\n  id: 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'custom';\n  title: string;\n  timespanInMs?: number;\n};\n\nexport type AlarmFilterInterval =\n  | Interval\n  | {\n      id: 'none';\n      title: string;\n      timespanInMs?: number;\n    };\n\nexport const INTERVALS: Interval[] = [\n  {\n    id: 'minutes',\n    title: gettext('Last minute'),\n    timespanInMs: TimeSpanInMs.MINUTE\n  },\n  {\n    id: 'hours',\n    title: gettext('Last hour'),\n    timespanInMs: TimeSpanInMs.HOUR\n  },\n  {\n    id: 'days',\n    title: gettext('Last day'),\n    timespanInMs: TimeSpanInMs.DAY\n  },\n  {\n    id: 'weeks',\n    title: gettext('Last week'),\n    timespanInMs: TimeSpanInMs.WEEK\n  },\n  {\n    id: 'months',\n    title: gettext('Last month'),\n    timespanInMs: TimeSpanInMs.MONTH\n  },\n  { id: 'custom', title: gettext('Custom') }\n];\n\nexport const INTERVAL_TITLES: Record<Interval['id'], string> = {\n  minutes: gettext('Last minute'),\n  hours: gettext('Last hour'),\n  days: gettext('Last day'),\n  weeks: gettext('Last week'),\n  months: gettext('Last month'),\n  custom: gettext('Custom')\n};\n","import { Component, forwardRef, Input } from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  FormsModule,\n  ReactiveFormsModule\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { BsDropdownModule } from 'ngx-bootstrap/dropdown';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { AlarmFilterInterval, Interval, INTERVALS } from './interval-picker.model';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n  selector: 'c8y-interval-picker',\n  templateUrl: './interval-picker.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => IntervalPickerComponent),\n      multi: true\n    }\n  ],\n  standalone: true,\n  imports: [CommonModule, FormsModule, A11yModule, ReactiveFormsModule, BsDropdownModule]\n})\nexport class IntervalPickerComponent implements ControlValueAccessor {\n  @Input() INTERVALS: Interval[] | AlarmFilterInterval[] = INTERVALS;\n\n  value: Interval['id'];\n  touched = false;\n  disabled = false;\n  translatedIntervals: { id: string; title: string }[] = [];\n\n  constructor(private translate: TranslateService) {}\n\n  ngOnInit() {\n    this.translatedIntervals = this.INTERVALS.map(interval => ({\n      ...interval,\n      title: this.translate.instant(interval.title)\n    }));\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  onChange = _ => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  onTouched = () => {};\n\n  writeValue(value: Interval['id']) {\n    this.value = value;\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(onTouched: any) {\n    this.onTouched = onTouched;\n  }\n\n  markAsTouched() {\n    if (!this.touched) {\n      this.onTouched();\n      this.touched = true;\n    }\n  }\n\n  setDisabledState(disabled: boolean) {\n    this.disabled = disabled;\n  }\n}\n","<li\n  *ngFor=\"let interval of translatedIntervals\"\n  [ngClass]=\"{\n    active: interval.id === value\n  }\"\n>\n  <button\n    type=\"button\"\n    (click)=\"onChange(interval.id)\"\n  >\n    <span\n      [ngClass]=\"{\n        'text-primary': interval.id === value\n      }\"\n    >\n      <span\n        c8yIcon=\"check\"\n        [ngStyle]=\"{ visibility: interval.id === value ? 'visible' : 'hidden' }\"\n      ></span>\n      {{ interval.title }}\n    </span>\n  </button>\n</li>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs

@@ -26,6 +26,7 @@ const alarmListWidgetDefinition = {
             }
         },
         displaySettings: {
+            globalTimeContext: true,
             globalAutoRefreshContext: true
         }
     }

package/fesm2022/c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs","sources":["../../widgets/definitions/alarms/alarm-list/index.ts","../../widgets/definitions/alarms/alarm-list/c8y-ngx-components-widgets-definitions-alarms-alarm-list.ts"],"sourcesContent":["import type { DynamicWidgetDefinition } from '@c8y/ngx-components';\nimport { gettext, hookWidget, DynamicComponentErrorStrategy } from '@c8y/ngx-components';\nimport type { ContextWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\n\nexport const alarmListWidgetDefinition = {\n  id: defaultWidgetIds.ALARM_LIST,\n  label: gettext('Alarm list'),\n  description: gettext(`Displays a list of alarms filtered by object, severity, status and date`),\n  loadComponent: () =>\n    import('@c8y/ngx-components/widgets/implementations/alarms').then(\n      m => m.AlarmListWidgetComponent\n    ),\n  loadConfigComponent: () =>\n    import('@c8y/ngx-components/widgets/implementations/alarms').then(\n      m => m.AlarmListWidgetConfigComponent\n    ),\n  previewImage: 'c8y-style-assets/alarms/alarm-list-widget.png',\n  errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,\n  data: {\n    settings: {\n      alarmListWidget: true,\n      noNewWidgets: false,\n      widgetDefaults: {\n        _width: 8,\n        _height: 4\n      },\n      ng1: {\n        options: {\n          noDeviceTarget: false,\n          groupsSelectable: true,\n          deviceTargetNotRequired: true\n        }\n      }\n    },\n    displaySettings: {\n      globalAutoRefreshContext: true\n    }\n  } as ContextWidgetConfig\n} satisfies DynamicWidgetDefinition;\n\nexport const alarmListWidgetProviders = [hookWidget(alarmListWidgetDefinition)];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAKa,MAAA,yBAAyB,GAAG;IACvC,EAAE,EAAE,gBAAgB,CAAC,UAAU;AAC/B,IAAA,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC;AAC5B,IAAA,WAAW,EAAE,OAAO,CAAC,CAAA,uEAAA,CAAyE,CAAC;AAC/F,IAAA,aAAa,EAAE,MACb,OAAO,oDAAoD,CAAC,CAAC,IAAI,CAC/D,CAAC,IAAI,CAAC,CAAC,wBAAwB,CAChC;AACH,IAAA,mBAAmB,EAAE,MACnB,OAAO,oDAAoD,CAAC,CAAC,IAAI,CAC/D,CAAC,IAAI,CAAC,CAAC,8BAA8B,CACtC;AACH,IAAA,YAAY,EAAE,+CAA+C;IAC7D,aAAa,EAAE,6BAA6B,CAAC,aAAa;AAC1D,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE;AACR,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,cAAc,EAAE;AACd,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,OAAO,EAAE,CAAC;AACX,aAAA;AACD,YAAA,GAAG,EAAE;AACH,gBAAA,OAAO,EAAE;AACP,oBAAA,cAAc,EAAE,KAAK;AACrB,oBAAA,gBAAgB,EAAE,IAAI;AACtB,oBAAA,uBAAuB,EAAE,IAAI;AAC9B,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,wBAAwB,EAAE,IAAI;AAC/B,SAAA;AACqB,KAAA;EACU;AAEvB,MAAA,wBAAwB,GAAG,CAAC,UAAU,CAAC,yBAAyB,CAAC;;ACzC9E;;AAEG;;;;"}
+{"version":3,"file":"c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs","sources":["../../widgets/definitions/alarms/alarm-list/index.ts","../../widgets/definitions/alarms/alarm-list/c8y-ngx-components-widgets-definitions-alarms-alarm-list.ts"],"sourcesContent":["import type { DynamicWidgetDefinition } from '@c8y/ngx-components';\nimport { gettext, hookWidget, DynamicComponentErrorStrategy } from '@c8y/ngx-components';\nimport type { ContextWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\n\nexport const alarmListWidgetDefinition = {\n  id: defaultWidgetIds.ALARM_LIST,\n  label: gettext('Alarm list'),\n  description: gettext(`Displays a list of alarms filtered by object, severity, status and date`),\n  loadComponent: () =>\n    import('@c8y/ngx-components/widgets/implementations/alarms').then(\n      m => m.AlarmListWidgetComponent\n    ),\n  loadConfigComponent: () =>\n    import('@c8y/ngx-components/widgets/implementations/alarms').then(\n      m => m.AlarmListWidgetConfigComponent\n    ),\n  previewImage: 'c8y-style-assets/alarms/alarm-list-widget.png',\n  errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,\n  data: {\n    settings: {\n      alarmListWidget: true,\n      noNewWidgets: false,\n      widgetDefaults: {\n        _width: 8,\n        _height: 4\n      },\n      ng1: {\n        options: {\n          noDeviceTarget: false,\n          groupsSelectable: true,\n          deviceTargetNotRequired: true\n        }\n      }\n    },\n    displaySettings: {\n      globalTimeContext: true,\n      globalAutoRefreshContext: true\n    }\n  } as ContextWidgetConfig\n} satisfies DynamicWidgetDefinition;\n\nexport const alarmListWidgetProviders = [hookWidget(alarmListWidgetDefinition)];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAKa,MAAA,yBAAyB,GAAG;IACvC,EAAE,EAAE,gBAAgB,CAAC,UAAU;AAC/B,IAAA,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC;AAC5B,IAAA,WAAW,EAAE,OAAO,CAAC,CAAA,uEAAA,CAAyE,CAAC;AAC/F,IAAA,aAAa,EAAE,MACb,OAAO,oDAAoD,CAAC,CAAC,IAAI,CAC/D,CAAC,IAAI,CAAC,CAAC,wBAAwB,CAChC;AACH,IAAA,mBAAmB,EAAE,MACnB,OAAO,oDAAoD,CAAC,CAAC,IAAI,CAC/D,CAAC,IAAI,CAAC,CAAC,8BAA8B,CACtC;AACH,IAAA,YAAY,EAAE,+CAA+C;IAC7D,aAAa,EAAE,6BAA6B,CAAC,aAAa;AAC1D,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE;AACR,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,cAAc,EAAE;AACd,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,OAAO,EAAE,CAAC;AACX,aAAA;AACD,YAAA,GAAG,EAAE;AACH,gBAAA,OAAO,EAAE;AACP,oBAAA,cAAc,EAAE,KAAK;AACrB,oBAAA,gBAAgB,EAAE,IAAI;AACtB,oBAAA,uBAAuB,EAAE,IAAI;AAC9B,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,wBAAwB,EAAE,IAAI;AAC/B,SAAA;AACqB,KAAA;EACU;AAEvB,MAAA,wBAAwB,GAAG,CAAC,UAAU,CAAC,yBAAyB,CAAC;;AC1C9E;;AAEG;;;;"}

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

@@ -6,7 +6,7 @@ import * as i2 from '@c8y/client';
 import { Severity, AlarmStatus, SEVERITY_LABELS, ALARM_STATUS_LABELS } from '@c8y/client';
 import * as i2$1 from '@c8y/ngx-components';
 import { gettext, CountdownIntervalComponent, DismissAlertStrategy, DynamicComponentAlert, globalAutoRefreshLoading, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule } from '@c8y/ngx-components';
-import * as i1 from '@c8y/ngx-components/alarms';
+import * as i3 from '@c8y/ngx-components/alarms';
 import { ALARM_STATUS_ICON, DEFAULT_STATUS_VALUES, DEFAULT_SEVERITY_VALUES, AlarmsModule } from '@c8y/ngx-components/alarms';
 import * as i6 from '@ngx-translate/core';
 import { omit, isEqual, isEmpty } from 'lodash-es';
@@ -35,6 +35,12 @@ const ALARM_ORDER_LABELS = {
 const ASSET_ALARMS_WIDGET_ID = 'Asset Alarms';
 const RECENT_ALARMS_WIDGET_ID = 'Recent Alarms';
 const GLOBAL_INTERVAL_OPTION = 'global-interval';
+var DATE_SELECTION;
+(function (DATE_SELECTION) {
+    DATE_SELECTION["CONFIG"] = "config";
+    DATE_SELECTION["VIEW_AND_CONFIG"] = "view_and_config";
+    DATE_SELECTION["DASHBOARD_CONTEXT"] = "dashboard_context";
+})(DATE_SELECTION || (DATE_SELECTION = {}));
 
 const DEFAULT_PAGE_SIZE = 20;
 class AlarmWidgetService {
@@ -174,6 +180,16 @@ class AlarmWidgetService {
             type: (config.types || []).join(','),
             withTotalPages: true
         };
+        if (config.dateFilter) {
+            filter.lastUpdatedFrom =
+                typeof config.dateFilter[0] === 'string'
+                    ? config.dateFilter[0]
+                    : config.dateFilter[0].toISOString();
+            filter.createdTo =
+                typeof config.dateFilter[1] === 'string'
+                    ? config.dateFilter[1]
+                    : config.dateFilter[1].toISOString();
+        }
         if (config.device) {
             filter.source = config.device.id;
             filter.withSourceAssets = true;
@@ -356,13 +372,13 @@ class AlarmWidgetService {
     buildOrderParameters(orderParams) {
         return `$orderby=${orderParams.join(',')}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetService, deps: [{ token: i1.AlarmsViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetService, deps: [{ token: i3.AlarmsViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.AlarmsViewService }] });
+        }], ctorParameters: () => [{ type: i3.AlarmsViewService }] });
 
 class SeverityIconPipe {
     transform(severity) {
@@ -450,6 +466,23 @@ class AlarmListWidgetConfigComponent {
         this.alarms$ = new BehaviorSubject(null);
         this.orderList = Object.values(ALARM_ORDER_VALUES);
         this.severityList = Object.keys(SEVERITY_LABELS);
+        this.showDateFilter = true;
+        this.DATE_SELECTION = DATE_SELECTION;
+        this.dateSelectionHelp = this.translateService.instant(gettext(`Choose how to select a date range, the available options are:
+  <ul class="m-l-0 p-l-8 m-t-8 m-b-0">
+    <li>
+      <b>Widget configuration:</b>
+      restricts the date selection only to the widget configuration
+    </li>
+    <li>
+      <b>Widget and widget configuration:</b>
+      restricts the date selection to the widget view and widget configuration only
+    </li>
+    <li>
+      <b>Dashboard time range:</b>
+      restricts date selection to the global dashboard configuration only
+    </li>
+  </ul>`));
         /**
          * Order does matter.
          */
@@ -505,6 +538,12 @@ class AlarmListWidgetConfigComponent {
         Object.assign(config, this.formGroup.value);
         return true;
     }
+    onDateFilterChange(event) {
+        this.formGroup.patchValue({
+            dateFilter: event.selectedDates,
+            interval: event.interval
+        });
+    }
     removeType(index) {
         if (this.types.controls.length === 1) {
             this.formGroup.get('types').reset();
@@ -527,6 +566,29 @@ class AlarmListWidgetConfigComponent {
     get types() {
         return this.formGroup.get('types');
     }
+    dateSelectionChange(dateSelection) {
+        if (dateSelection === DATE_SELECTION.CONFIG) {
+            this.showDateFilter = true;
+            this.formGroup.patchValue({
+                displayDateSelection: false,
+                widgetInstanceGlobalTimeContext: false
+            });
+        }
+        else if (dateSelection === DATE_SELECTION.VIEW_AND_CONFIG) {
+            this.showDateFilter = true;
+            this.formGroup.patchValue({
+                displayDateSelection: true,
+                widgetInstanceGlobalTimeContext: false
+            });
+        }
+        else if (dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT) {
+            this.showDateFilter = false;
+            this.formGroup.patchValue({
+                displayDateSelection: false,
+                widgetInstanceGlobalTimeContext: true
+            });
+        }
+    }
     filterEmptyTypes(types) {
         return types.filter((element) => element !== '' && element !== null);
     }
@@ -551,6 +613,7 @@ class AlarmListWidgetConfigComponent {
         this.form.form.addControl('config', this.formGroup);
         this.formGroup.patchValue(this.config);
         this.initializeTypes(this.config.types);
+        this.initDateSelection();
         this.refreshOption = this.config.refreshOption ?? 'interval';
     }
     createForm() {
@@ -572,6 +635,12 @@ class AlarmListWidgetConfigComponent {
                 })
                 : new FormControl(undefined),
             device: this.config.device ? new FormControl(this.config.device) : new FormControl(undefined),
+            dateFilter: this.config.dateFilter
+                ? new FormControl(this.config.dateFilter)
+                : new FormControl([new Date(0), new Date()]),
+            displayDateSelection: this.config.displayDateSelection || false,
+            widgetInstanceGlobalTimeContext: this.config.widgetInstanceGlobalTimeContext || false,
+            interval: this.config.interval || 'none',
             refreshOption: this.config.isRealtime ? null : 'interval',
             widgetInstanceGlobalAutoRefreshContext: this.config.refreshOption === GLOBAL_INTERVAL_OPTION
         });
@@ -601,6 +670,22 @@ class AlarmListWidgetConfigComponent {
             typesControl.push(this.formBuilder.control(''));
         }
     }
+    initDateSelection() {
+        this.dateSelection = this.config?.widgetInstanceGlobalTimeContext
+            ? DATE_SELECTION.DASHBOARD_CONTEXT
+            : this.config?.displayDateSelection
+                ? DATE_SELECTION.VIEW_AND_CONFIG
+                : DATE_SELECTION.CONFIG;
+        this.dateSelectionChange(this.dateSelection);
+        const interval = this.config?.interval ?? 'none';
+        if (interval === 'none' || interval === 'custom') {
+            return;
+        }
+        this.config.dateFilter = this.alarmsViewService.getDateTimeContextByInterval(this.config.interval);
+        this.formGroup.patchValue({
+            dateFilter: this.config.dateFilter
+        });
+    }
     /**
      * Initializes and handles the form change subscription for the Alarm list preview at Widget's configuration.
      *
@@ -649,13 +734,13 @@ class AlarmListWidgetConfigComponent {
             ? this.formGroup.get('refreshInterval').enable()
             : this.formGroup.get('refreshInterval').disable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmListWidgetConfigComponent, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, 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\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\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    <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      >\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  </div>\n\n  <div class=\"col-md-6\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</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      >\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\n    <fieldset class=\"c8y-fieldset\">\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        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\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\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\"\n          *ngFor=\"let type of types.controls; let i = index\"\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 btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\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 btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\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      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\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            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\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    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\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></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i1.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i8.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: i7.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: "18.2.9", 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 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmListWidgetConfigComponent, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, 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\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"form-group col-md-12\">\n    <div class=\"d-flex a-i-center\">\n      <label\n        class=\"m-b-0\"\n        translate\n      >\n        Date selection\n      </label>\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    </div>\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=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\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    <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      >\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\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</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      >\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\n    <fieldset class=\"c8y-fieldset\">\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        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\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\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\"\n          *ngFor=\"let type of types.controls; let i = index\"\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 btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\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 btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\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      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\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            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper flex-grow\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\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    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\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></c8y-alarms-list>\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: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i8.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: i7.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: "18.2.9", ngImport: i0, type: AlarmListWidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-list-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], 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\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\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    <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      >\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  </div>\n\n  <div class=\"col-md-6\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</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      >\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\n    <fieldset class=\"c8y-fieldset\">\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        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\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\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\"\n          *ngFor=\"let type of types.controls; let i = index\"\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 btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\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 btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\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      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\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            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\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    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\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></c8y-alarms-list>\n" }]
-        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i2$1.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.TranslateService }], propDecorators: { config: [{
+            args: [{ selector: 'c8y-alarm-list-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], 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\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"form-group col-md-12\">\n    <div class=\"d-flex a-i-center\">\n      <label\n        class=\"m-b-0\"\n        translate\n      >\n        Date selection\n      </label>\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    </div>\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=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\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    <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      >\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\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</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      >\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\n    <fieldset class=\"c8y-fieldset\">\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        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\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\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\"\n          *ngFor=\"let type of types.controls; let i = index\"\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 btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\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 btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\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      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\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            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper flex-grow\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\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    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\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></c8y-alarms-list>\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 }], propDecorators: { config: [{
                 type: Input
             }] } });
 
@@ -888,13 +973,13 @@ class AlarmWidgetAlarmsReloadComponent {
             ? this.translateService.instant(gettext('Disable auto refresh'))
             : this.translateService.instant(gettext('Enable auto refresh'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, deps: [{ token: i1.AlarmsViewService }, { token: i0.ChangeDetectorRef }, { token: i6.TranslateService }, { token: i2$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, deps: [{ token: i3.AlarmsViewService }, { token: i0.ChangeDetectorRef }, { token: i6.TranslateService }, { token: i2$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: { isIntervalRefresh: "isIntervalRefresh", refreshInterval: "refreshInterval", config: "config", isLoading: "isLoading", isScrolling: "isScrolling", isDisabled: "isDisabled" }, outputs: { onCountdownEnded: "onCountdownEnded", onRealTimeToggleChanged: "onRealTimeToggleChanged" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: 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]=\"isDisabled\"\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)\"\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]=\"isDisabled || (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]=\"isDisabled\"\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>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: i7.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-widget-alarms-reload', 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]=\"isDisabled\"\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)\"\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]=\"isDisabled || (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]=\"isDisabled\"\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>\n" }]
-        }], ctorParameters: () => [{ type: i1.AlarmsViewService }, { type: i0.ChangeDetectorRef }, { type: i6.TranslateService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { isIntervalRefresh: [{
+        }], ctorParameters: () => [{ type: i3.AlarmsViewService }, { type: i0.ChangeDetectorRef }, { type: i6.TranslateService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { isIntervalRefresh: [{
                 type: Input
             }], refreshInterval: [{
                 type: Input
@@ -966,6 +1051,11 @@ class AlarmListWidgetComponent {
             this.handleRealtimeAlarms(this.config, this.alarmWidgetAlarmsReloadComp.isRealtimeToggleOn);
         }
     }
+    ngOnChanges(changes) {
+        if (changes?.config?.currentValue?.date) {
+            this.config.dateFilter = changes.config.currentValue.date;
+        }
+    }
     ngOnDestroy() {
         if (this.config.isRealtime) {
             this.unsubscribe$.next();
@@ -978,8 +1068,14 @@ class AlarmListWidgetComponent {
         }
     }
     async fetchAlarms() {
+        this.updateDateFilter();
         this.alarms$.next(await this.getAlarms());
     }
+    async onDateFilterChange(event) {
+        this.config.dateFilter = event.selectedDates;
+        this.config.interval = event.interval;
+        await this.fetchAlarms();
+    }
     handleRealTimeToggleChange(isRealtimeToggleOn) {
         if (!isRealtimeToggleOn) {
             this.unsubscribe$.next();
@@ -988,6 +1084,19 @@ class AlarmListWidgetComponent {
         this.unsubscribe$ = new Subject();
         this.handleRealtimeAlarms(this.config, isRealtimeToggleOn);
     }
+    /**
+     * Updates the widget's date filter based on the currently selected interval.
+     * If the interval is set to last hour, we will configure the date filter to dynamically show alarms only from the last hour.
+     */
+    updateDateFilter() {
+        if (this.config.interval === 'custom' || this.config.widgetInstanceGlobalTimeContext) {
+            return;
+        }
+        if (!this.config.interval) {
+            this.config.interval = 'none';
+        }
+        this.config.dateFilter = this.alarmsViewService.getDateTimeContextByInterval(this.config.interval);
+    }
     /**
      * Updates the widget's refresh mode based on the current configuration and the interval refresh setting.
      * If the widget's 'isRealtime' configuration differs from the current global interval refresh setting (application options setting),
@@ -1101,13 +1210,13 @@ class AlarmListWidgetComponent {
             .pipe(skip(1), globalAutoRefreshLoading(this.widgetGlobalAutoRefresh), takeUntil(this.destroy$))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: AlarmListWidgetComponent, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmWidgetAlarmsReloadComp", first: true, predicate: AlarmWidgetAlarmsReloadComponent, descendants: 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-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    [isDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i1.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: ["isIntervalRefresh", "refreshInterval", "config", "isLoading", "isScrolling", "isDisabled"], outputs: ["onCountdownEnded", "onRealTimeToggleChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: AlarmListWidgetComponent, 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    [isDisabled]=\"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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: ["isIntervalRefresh", "refreshInterval", "config", "isLoading", "isScrolling", "isDisabled"], outputs: ["onCountdownEnded", "onRealTimeToggleChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], 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-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    [isDisabled]=\"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: [{
+            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], 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    [isDisabled]=\"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: [{
                 type: Input
             }], alarmWidgetAlarmsReloadComp: [{
                 type: ViewChild,
@@ -1172,5 +1281,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALARM_ORDER_LABELS, ALARM_ORDER_VALUES, ASSET_ALARMS_WIDGET_ID, AlarmListWidgetComponent, AlarmListWidgetConfigComponent, AlarmWidgetAlarmsReloadComponent, AlarmWidgetService, AlarmsWidgetModule, DEFAULT_PAGE_SIZE, GLOBAL_INTERVAL_OPTION, RECENT_ALARMS_WIDGET_ID, SeverityIconPipe, SortingDescriptionPopoverMessagePipe };
+export { ALARM_ORDER_LABELS, ALARM_ORDER_VALUES, ASSET_ALARMS_WIDGET_ID, AlarmListWidgetComponent, AlarmListWidgetConfigComponent, AlarmWidgetAlarmsReloadComponent, AlarmWidgetService, AlarmsWidgetModule, DATE_SELECTION, DEFAULT_PAGE_SIZE, GLOBAL_INTERVAL_OPTION, RECENT_ALARMS_WIDGET_ID, SeverityIconPipe, SortingDescriptionPopoverMessagePipe };
 //# sourceMappingURL=c8y-ngx-components-widgets-implementations-alarms.mjs.map