@c8y/ngx-components 1023.9.0 → 1023.12.0

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

@@ -1,11 +1,10 @@
 import { gettext } from '@c8y/ngx-components/gettext';
 import { DynamicComponentErrorStrategy, DynamicManagedObjectResolver, hookWidget } from '@c8y/ngx-components';
 import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';
+import { PRESET_NAME } from '@c8y/ngx-components/global-context';
 import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
 import { importConfigWithDevice, exportConfigWithDevice } from '@c8y/ngx-components/widgets/import-export-config';
-import { createAlarmListControls } from '@c8y/ngx-components/widgets/definitions/alarms/alarm-widget-controls.presets';
 
-const ALARM_LIST_CONTROLS = createAlarmListControls();
 const alarmListWidgetDefinition = {
     id: defaultWidgetIds.ALARM_LIST,
     label: gettext('Alarm list'),
@@ -36,7 +35,7 @@ const alarmListWidgetDefinition = {
                 }
             }
         },
-        widgetControls: ALARM_LIST_CONTROLS,
+        controls: PRESET_NAME.ALARM_LIST_CONFIG,
         displaySettings: {
             globalTimeContext: true,
             globalAutoRefreshContext: true
@@ -50,7 +49,7 @@ const alarmListWidgetProviders = [
         priority: 10,
         label: gettext('Time context'),
         initialState: {
-            widgetControls: ALARM_LIST_CONTROLS
+            controls: PRESET_NAME.ALARM_LIST_CONFIG
         },
         loadComponent: () => import('@c8y/ngx-components/context-dashboard').then(m => m.GlobalContextSectionComponent)
     })

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 { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  type DynamicWidgetDefinition,\n  DynamicComponentErrorStrategy,\n  DynamicManagedObjectResolver,\n  hookWidget\n} from '@c8y/ngx-components';\nimport {\n  GlobalContextSectionComponent,\n  hookWidgetConfig\n} from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport {\n  exportConfigWithDevice,\n  importConfigWithDevice\n} from '@c8y/ngx-components/widgets/import-export-config';\nimport { createAlarmListControls } from '@c8y/ngx-components/widgets/definitions/alarms/alarm-widget-controls.presets';\n\nconst ALARM_LIST_CONTROLS = createAlarmListControls();\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  resolve: {\n    device: DynamicManagedObjectResolver\n  },\n  errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,\n  data: {\n    schema: () =>\n      import(\n        'c8y-schema-loader?interfaceName=AlarmListWidgetConfig!@c8y/ngx-components/widgets/implementations/alarms'\n      ),\n    export: exportConfigWithDevice,\n    import: importConfigWithDevice,\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    widgetControls: ALARM_LIST_CONTROLS,\n    displaySettings: {\n      globalTimeContext: true,\n      globalAutoRefreshContext: true\n    }\n  }\n} satisfies DynamicWidgetDefinition;\n\nexport const alarmListWidgetProviders = [\n  hookWidget(alarmListWidgetDefinition),\n  hookWidgetConfig<GlobalContextSectionComponent>({\n    widgetId: defaultWidgetIds.ALARM_LIST,\n    priority: 10,\n    label: gettext('Time context'),\n    initialState: {\n      widgetControls: ALARM_LIST_CONTROLS\n    },\n    loadComponent: () =>\n      import('@c8y/ngx-components/context-dashboard').then(m => m.GlobalContextSectionComponent)\n  })\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAkBA,MAAM,mBAAmB,GAAG,uBAAuB,EAAE;AAE9C,MAAM,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;AAC7D,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAE;AACT,KAAA;IACD,aAAa,EAAE,6BAA6B,CAAC,aAAa;AAC1D,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,MACN,OACE,0GAA0G,CAC3G;AACH,QAAA,MAAM,EAAE,sBAAsB;AAC9B,QAAA,MAAM,EAAE,sBAAsB;AAC9B,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;AACV,aAAA;AACD,YAAA,GAAG,EAAE;AACH,gBAAA,OAAO,EAAE;AACP,oBAAA,cAAc,EAAE,KAAK;AACrB,oBAAA,gBAAgB,EAAE,IAAI;AACtB,oBAAA,uBAAuB,EAAE;AAC1B;AACF;AACF,SAAA;AACD,QAAA,cAAc,EAAE,mBAAmB;AACnC,QAAA,eAAe,EAAE;AACf,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,wBAAwB,EAAE;AAC3B;AACF;;AAGI,MAAM,wBAAwB,GAAG;IACtC,UAAU,CAAC,yBAAyB,CAAC;AACrC,IAAA,gBAAgB,CAAgC;QAC9C,QAAQ,EAAE,gBAAgB,CAAC,UAAU;AACrC,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC;AAC9B,QAAA,YAAY,EAAE;AACZ,YAAA,cAAc,EAAE;AACjB,SAAA;AACD,QAAA,aAAa,EAAE,MACb,OAAO,uCAAuC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,6BAA6B;KAC5F;;;AC9EH;;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 { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  type DynamicWidgetDefinition,\n  DynamicComponentErrorStrategy,\n  DynamicManagedObjectResolver,\n  hookWidget\n} from '@c8y/ngx-components';\nimport {\n  GlobalContextSectionComponent,\n  hookWidgetConfig\n} from '@c8y/ngx-components/context-dashboard';\nimport { PRESET_NAME } from '@c8y/ngx-components/global-context';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport {\n  exportConfigWithDevice,\n  importConfigWithDevice\n} from '@c8y/ngx-components/widgets/import-export-config';\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  resolve: {\n    device: DynamicManagedObjectResolver\n  },\n  errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,\n  data: {\n    schema: () =>\n      import(\n        'c8y-schema-loader?interfaceName=AlarmListWidgetConfig!@c8y/ngx-components/widgets/implementations/alarms'\n      ),\n    export: exportConfigWithDevice,\n    import: importConfigWithDevice,\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    controls: PRESET_NAME.ALARM_LIST_CONFIG,\n    displaySettings: {\n      globalTimeContext: true,\n      globalAutoRefreshContext: true\n    }\n  }\n} satisfies DynamicWidgetDefinition;\n\nexport const alarmListWidgetProviders = [\n  hookWidget(alarmListWidgetDefinition),\n  hookWidgetConfig<GlobalContextSectionComponent>({\n    widgetId: defaultWidgetIds.ALARM_LIST,\n    priority: 10,\n    label: gettext('Time context'),\n    initialState: {\n      controls: PRESET_NAME.ALARM_LIST_CONFIG\n    },\n    loadComponent: () =>\n      import('@c8y/ngx-components/context-dashboard').then(m => m.GlobalContextSectionComponent)\n  })\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,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;AAC7D,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAE;AACT,KAAA;IACD,aAAa,EAAE,6BAA6B,CAAC,aAAa;AAC1D,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,MACN,OACE,0GAA0G,CAC3G;AACH,QAAA,MAAM,EAAE,sBAAsB;AAC9B,QAAA,MAAM,EAAE,sBAAsB;AAC9B,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;AACV,aAAA;AACD,YAAA,GAAG,EAAE;AACH,gBAAA,OAAO,EAAE;AACP,oBAAA,cAAc,EAAE,KAAK;AACrB,oBAAA,gBAAgB,EAAE,IAAI;AACtB,oBAAA,uBAAuB,EAAE;AAC1B;AACF;AACF,SAAA;QACD,QAAQ,EAAE,WAAW,CAAC,iBAAiB;AACvC,QAAA,eAAe,EAAE;AACf,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,wBAAwB,EAAE;AAC3B;AACF;;AAGI,MAAM,wBAAwB,GAAG;IACtC,UAAU,CAAC,yBAAyB,CAAC;AACrC,IAAA,gBAAgB,CAAgC;QAC9C,QAAQ,EAAE,gBAAgB,CAAC,UAAU;AACrC,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC;AAC9B,QAAA,YAAY,EAAE;YACZ,QAAQ,EAAE,WAAW,CAAC;AACvB,SAAA;AACD,QAAA,aAAa,EAAE,MACb,OAAO,uCAAuC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,6BAA6B;KAC5F;;;AC5EH;;AAEG;;;;"}

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

@@ -1,24 +1,22 @@
-import { NgIf, NgFor, NgClass, AsyncPipe, CommonModule as CommonModule$1 } from '@angular/common';
+import { NgClass, AsyncPipe, CommonModule as CommonModule$1 } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, ViewChild, Input, Component, NgModule } from '@angular/core';
+import { Injectable, Pipe, ViewChild, Input, Component, inject, signal, NgModule } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { FormControl, NgForm, ControlContainer, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@c8y/client';
-import { AlarmStatus, Severity, SEVERITY_LABELS, ALARM_STATUS_LABELS } from '@c8y/client';
-import * as i3 from '@c8y/ngx-components';
-import { FormGroupComponent, RequiredInputPlaceholderDirective, IconDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, DismissAlertStrategy, DynamicComponentAlert, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
+import { AlarmStatus, Severity, SEVERITY_LABELS, ALARM_STATUS_LABELS, AlarmService } from '@c8y/client';
+import * as i4 from '@c8y/ngx-components';
+import { FormGroupComponent, RequiredInputPlaceholderDirective, IconDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, DashboardChildComponent, AlertService, DismissAlertStrategy, DynamicComponentAlert, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
 import * as i1 from '@c8y/ngx-components/alarms';
 import { ALARM_STATUS_ICON, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, AlarmsDateFilterComponent, AlarmsListComponent, AlarmsModule } from '@c8y/ngx-components/alarms';
 import * as i6 from '@c8y/ngx-components/context-dashboard';
-import * as i4 from '@c8y/ngx-components/global-context';
-import { GlobalContextWidgetWrapperComponent, REFRESH_OPTION, TIME_INTERVAL, GlobalContextConfigComponent, GlobalContextInlineComponent, ConfigContextSelectorComponent } from '@c8y/ngx-components/global-context';
-import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
-import { resolveAlarmControls, createAlarmListControls } from '@c8y/ngx-components/widgets/definitions/alarms/alarm-widget-controls.presets';
+import { PRESET_NAME, GLOBAL_CONTEXT_DISPLAY_MODE, LocalControlsComponent, WidgetConfigMigrationService, CONTEXT_FEATURE, REFRESH_OPTION, GlobalContextConnectorComponent, GlobalContextConfigComponent, GlobalContextInlineComponent, ConfigContextSelectorComponent, GlobalContextWidgetWrapperComponent } from '@c8y/ngx-components/global-context';
 import { merge, isEmpty, isMatch } from 'lodash-es';
 import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
 import { BehaviorSubject, Subject, EMPTY, from } from 'rxjs';
-import { filter, tap, takeUntil, shareReplay, debounceTime, switchMap } from 'rxjs/operators';
+import { filter, tap, takeUntil, shareReplay, switchMap } from 'rxjs/operators';
 import { gettext } from '@c8y/ngx-components/gettext';
+import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
@@ -495,21 +493,27 @@ class AlarmListWidgetConfigComponent {
                 this.formGroup.patchValue(config, { emitEvent: false });
             }
         }), takeUntil(this.destroy$), shareReplay(1));
+        this.controls = PRESET_NAME.ALARM_LIST;
     }
-    async ngOnInit() {
-        this.widgetControls = resolveAlarmControls(this.config?.widgetId ?? defaultWidgetIds.ALARM_LIST);
+    ngOnInit() {
         this.config$
-            .pipe(takeUntil(this.destroy$), debounceTime(300), switchMap(config => {
+            .pipe(takeUntil(this.destroy$), filter(config => {
+            const displayMode = config?.displayMode ?? GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
+            if (displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+                return !!config?.isGlobalContextReady;
+            }
+            return true;
+        }), switchMap(config => {
             if ((config?.severities && this.alarmListWidgetService.allValuesFalse(config.severities)) ||
                 (config?.status && this.alarmListWidgetService.allValuesFalse(config.status))) {
                 this.alarms$.next({ data: [], res: null });
                 return EMPTY;
             }
             const isWidgetWithExistingConfig = config.order && config.severities && config.status;
-            const filter = isWidgetWithExistingConfig
-                ? this.config
+            const filterConfig = isWidgetWithExistingConfig
+                ? config
                 : { ...this.formGroup.value, ...config };
-            return from(this.getAlarms(filter));
+            return from(this.getAlarms(filterConfig));
         }))
             .subscribe();
     }
@@ -612,8 +616,8 @@ class AlarmListWidgetConfigComponent {
             typesControl.push(this.formBuilder.control(''));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i3.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmListWidgetConfigComponent, isStandalone: true, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: true }], ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row d-flex flex-wrap\"\n  [formGroup]=\"formGroup\"\n  *ngIf=\"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-8\">\n        <div\n          class=\"d-flex p-b-8 p-t-4 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n    <ng-container *ngIf=\"showDateFilter\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Date filter' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <c8y-alarms-date-filter\n            [updateQueryParams]=\"false\"\n            [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n            formControlName=\"dateFilter\"\n            (dateFilterChange)=\"onDateFilterChange($event)\"\n          ></c8y-alarms-date-filter>\n        </c8y-form-group>\n      </fieldset>\n    </ng-container>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"status\"\n    >\n      <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n        {{ 'Status' | translate }}\n      </legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n    >\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n          data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n            data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n\n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group m-b-4\"\n          *ngFor=\"let type of types.controls; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n              data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<ng-template #alarmListPreview>\n  <c8y-global-context-widget-wrapper\n    [widgetControls]=\"widgetControls\"\n    [displayMode]=\"'preview'\"\n    [config]=\"config$ | async\"\n  ></c8y-global-context-widget-wrapper>\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInPreviewMode]=\"true\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i4.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmListWidgetConfigComponent, isStandalone: true, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: 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@if (formGroup) {\n  <form\n    class=\"row d-flex flex-wrap\"\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-8\">\n          @for (order of orderList; track order; let i = $index) {\n            <div\n              class=\"d-flex p-b-8 p-t-4 a-i-center\"\n              data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n            >\n              <label\n                class=\"c8y-radio gap-4\"\n                title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n              >\n                <input\n                  type=\"radio\"\n                  [value]=\"order\"\n                  formControlName=\"order\"\n                />\n                <span class=\"a-s-center\"></span>\n                <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n              </label>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"severities\"\n      >\n        <legend>{{ 'Severities' | translate }}</legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.severities.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.severities.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n        >\n          @for (severityOption of severityList; track severityOption) {\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              @let severityIcon = severityOption | severityIcon;\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}\"\n                [c8yIcon]=\"severityIcon.c8yIcon\"\n              ></i>\n              <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n            </label>\n          }\n          <c8y-messages>\n            @if (formGroup.controls.severities.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one severity.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n      @if (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      }\n    </div>\n\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"status\"\n      >\n        <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n          {{ 'Status' | translate }}\n        </legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.status.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.status.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n        >\n          @for (statusOption of statusList; track statusOption) {\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          }\n          <c8y-messages>\n            @if (formGroup.controls.status.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one status.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n      >\n        <legend>{{ 'Child devices' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <label\n            class=\"c8y-switch\"\n            [title]=\"'Show alarms from child devices' | translate\"\n            data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n          >\n            <input\n              type=\"checkbox\"\n              formControlName=\"showAlarmsForChildren\"\n              data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n            />\n            <span></span>\n            <span>{{ 'Show alarms' | translate }}</span>\n            <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n\n    <div class=\"col-xs-12\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Types' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8\"\n          formArrayName=\"types\"\n        >\n          @for (type of types.controls; track type; let i = $index) {\n            <div\n              class=\"input-group m-b-4\"\n              data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n            >\n              <input\n                class=\"form-control\"\n                type=\"text\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n                [formControlName]=\"i\"\n              />\n              <div class=\"input-group-btn\">\n                <button\n                  class=\"btn-dot btn-dot--danger m-l-auto\"\n                  [title]=\"'Remove' | translate\"\n                  type=\"button\"\n                  (click)=\"removeType(i)\"\n                  data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n                  [disabled]=\"types.controls?.length === 1 && !type.value\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              </div>\n              @if (i === types.controls.length - 1) {\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn-dot btn-dot--primary m-l-auto\"\n                    [title]=\"'Add alarm type' | translate\"\n                    type=\"button\"\n                    (click)=\"addType()\"\n                    data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n                  >\n                    <i c8yIcon=\"plus-circle\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </form>\n}\n\n<ng-template #alarmListPreview>\n  @if ((config$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(config$ | async)?.displayMode\"\n      [config]=\"config$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInPreviewMode]=\"true\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetConfigComponent, decorators: [{
             type: Component,
@@ -621,11 +625,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         PopoverDirective,
-                        NgIf,
                         FormGroupComponent,
                         AlarmsDateFilterComponent,
                         RequiredInputPlaceholderDirective,
-                        NgFor,
                         NgClass,
                         IconDirective,
                         MessagesComponent,
@@ -635,46 +637,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AsyncPipe,
                         SeverityIconPipe,
                         SortingDescriptionPopoverMessagePipe,
-                        GlobalContextWidgetWrapperComponent
-                    ], template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row d-flex flex-wrap\"\n  [formGroup]=\"formGroup\"\n  *ngIf=\"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-8\">\n        <div\n          class=\"d-flex p-b-8 p-t-4 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n    <ng-container *ngIf=\"showDateFilter\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Date filter' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <c8y-alarms-date-filter\n            [updateQueryParams]=\"false\"\n            [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n            formControlName=\"dateFilter\"\n            (dateFilterChange)=\"onDateFilterChange($event)\"\n          ></c8y-alarms-date-filter>\n        </c8y-form-group>\n      </fieldset>\n    </ng-container>\n  </div>\n\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"status\"\n    >\n      <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n        {{ 'Status' | translate }}\n      </legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n        data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n  <div class=\"col-md-6 col-xs-12\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n    >\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n          data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n            data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n\n  <div class=\"col-xs-12\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group m-b-4\"\n          *ngFor=\"let type of types.controls; let i = index\"\n          data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n              data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<ng-template #alarmListPreview>\n  <c8y-global-context-widget-wrapper\n    [widgetControls]=\"widgetControls\"\n    [displayMode]=\"'preview'\"\n    [config]=\"config$ | async\"\n  ></c8y-global-context-widget-wrapper>\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInPreviewMode]=\"true\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i3.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.WidgetConfigService }], propDecorators: { config: [{
+                        LocalControlsComponent
+                    ], template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n@if (formGroup) {\n  <form\n    class=\"row d-flex flex-wrap\"\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-8\">\n          @for (order of orderList; track order; let i = $index) {\n            <div\n              class=\"d-flex p-b-8 p-t-4 a-i-center\"\n              data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n            >\n              <label\n                class=\"c8y-radio gap-4\"\n                title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n              >\n                <input\n                  type=\"radio\"\n                  [value]=\"order\"\n                  formControlName=\"order\"\n                />\n                <span class=\"a-s-center\"></span>\n                <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n              </label>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"severities\"\n      >\n        <legend>{{ 'Severities' | translate }}</legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.severities.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.severities.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n        >\n          @for (severityOption of severityList; track severityOption) {\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              @let severityIcon = severityOption | severityIcon;\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}\"\n                [c8yIcon]=\"severityIcon.c8yIcon\"\n              ></i>\n              <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n            </label>\n          }\n          <c8y-messages>\n            @if (formGroup.controls.severities.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one severity.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n      @if (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      }\n    </div>\n\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"status\"\n      >\n        <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n          {{ 'Status' | translate }}\n        </legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.status.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.status.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n        >\n          @for (statusOption of statusList; track statusOption) {\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          }\n          <c8y-messages>\n            @if (formGroup.controls.status.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one status.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n      >\n        <legend>{{ 'Child devices' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <label\n            class=\"c8y-switch\"\n            [title]=\"'Show alarms from child devices' | translate\"\n            data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n          >\n            <input\n              type=\"checkbox\"\n              formControlName=\"showAlarmsForChildren\"\n              data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n            />\n            <span></span>\n            <span>{{ 'Show alarms' | translate }}</span>\n            <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n\n    <div class=\"col-xs-12\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Types' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8\"\n          formArrayName=\"types\"\n        >\n          @for (type of types.controls; track type; let i = $index) {\n            <div\n              class=\"input-group m-b-4\"\n              data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n            >\n              <input\n                class=\"form-control\"\n                type=\"text\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n                [formControlName]=\"i\"\n              />\n              <div class=\"input-group-btn\">\n                <button\n                  class=\"btn-dot btn-dot--danger m-l-auto\"\n                  [title]=\"'Remove' | translate\"\n                  type=\"button\"\n                  (click)=\"removeType(i)\"\n                  data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n                  [disabled]=\"types.controls?.length === 1 && !type.value\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              </div>\n              @if (i === types.controls.length - 1) {\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn-dot btn-dot--primary m-l-auto\"\n                    [title]=\"'Add alarm type' | translate\"\n                    type=\"button\"\n                    (click)=\"addType()\"\n                    data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n                  >\n                    <i c8yIcon=\"plus-circle\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </form>\n}\n\n<ng-template #alarmListPreview>\n  @if ((config$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(config$ | async)?.displayMode\"\n      [config]=\"config$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInPreviewMode]=\"true\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i4.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.WidgetConfigService }], propDecorators: { config: [{
                 type: Input
             }], previewMapSet: [{
                 type: ViewChild,
                 args: ['alarmListPreview']
             }] } });
 
-/**
- * To ensure backward compatibility, legacy widgets will be converted to the new implementation.
- */
 class AlarmListWidgetComponent {
-    constructor(alarmWidgetService, alarmService, dashboardChild, alertService, widgetConfigMigrationService) {
-        this.alarmWidgetService = alarmWidgetService;
-        this.alarmService = alarmService;
-        this.dashboardChild = dashboardChild;
-        this.alertService = alertService;
-        this.widgetConfigMigrationService = widgetConfigMigrationService;
-        /**
-         * Represents current alarms.
-         */
+    constructor() {
+        this.alarmWidgetService = inject(AlarmWidgetService);
+        this.alarmService = inject(AlarmService);
+        this.dashboardChild = inject(DashboardChildComponent);
+        this.alertService = inject(AlertService);
+        this.widgetConfigMigrationService = inject(WidgetConfigMigrationService);
+        this.displayMode = signal(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.contextConfig = signal({}, ...(ngDevMode ? [{ debugName: "contextConfig" }] : []));
+        this.isLinkedToGlobal = signal(undefined, ...(ngDevMode ? [{ debugName: "isLinkedToGlobal" }] : []));
         this.alarms$ = new BehaviorSubject(null);
-        /**
-         * Current isLoading state. Based on it next countdown cycle is being started.
-         */
         this.isLoading$ = new BehaviorSubject(true);
-        this.widgetControls = createAlarmListControls();
+        this.widgetControls = signal(PRESET_NAME.ALARM_LIST, ...(ngDevMode ? [{ debugName: "widgetControls" }] : []));
+        this.GLOBAL_CONTEXT_DISPLAY_MODE = GLOBAL_CONTEXT_DISPLAY_MODE;
+        this.CONTEXT_FEATURE = CONTEXT_FEATURE;
+        this.REFRESH_OPTION = REFRESH_OPTION;
+        this.PRESET_NAME = PRESET_NAME;
         this.TIMEOUT_ERROR_TEXT = gettext('The request is taking longer than usual. We apologize for the inconvenience.');
         this.SERVER_ERROR_TEXT = gettext('Server error occurred.');
         this.unsubscribe$ = new Subject();
-        this.destroy$ = new Subject();
         this.hasPermissions = true;
     }
     async ngOnInit() {
         this.alerts.setAlertGroupDismissStrategy('warning', DismissAlertStrategy.TEMPORARY_OR_PERMANENT);
-        const alarmsWidgetId = this.dashboardChild['data']?.componentId
-            ? this.dashboardChild['data']?.componentId //property is used in cockpit dashboards
-            : this.dashboardChild['data']?.name; //property is used in device management dashboards
-        // Check for legacy angularJS widget without proper configuration (critical or recent alarms)
+        const alarmsWidgetId = this.dashboardChild['data']?.componentId ?? this.dashboardChild['data']?.name;
+        // Check for legacy angularJS widget without proper configuration
         const isLegacyWidgetWithoutConfiguration = (this.config?.widgetId ?? alarmsWidgetId) === defaultWidgetIds.ALL_CRITICAL_ALARMS ||
             (this.config?.widgetId ?? alarmsWidgetId) === defaultWidgetIds.RECENT_ALARMS ||
             isEmpty(this.config) ||
@@ -684,7 +681,6 @@ class AlarmListWidgetComponent {
                 !this.config.status &&
                 !this.config.severities);
         if (isLegacyWidgetWithoutConfiguration) {
-            // We need to double check widgetId to ensure we are setting the correct configuration
             let updatedId = alarmsWidgetId;
             const assetAlarms = this.dashboardChild['data']?.title === 'Active, critical alarms' && 'Asset alarms';
             const recentAlarms = this.dashboardChild['data']?.title === 'Recent alarms' && 'Recent alarms';
@@ -697,82 +693,76 @@ class AlarmListWidgetComponent {
             this.setLegacyRecentOrCriticalAlarmWidgetConfig(updatedId);
             this.config.widgetId = updatedId;
         }
-        // Check for legacy angularJS alarm list widget
         else if (this.alarmWidgetService.isOldAlarmConfigStructure(this.config)) {
             const mappedConfig = this.alarmWidgetService.mapToNewConfigStructure(this.config);
             Object.assign(this.config, mappedConfig);
         }
+        if (this.config?.widgetId === RECENT_ALARMS_WIDGET_ID ||
+            this.config?.widgetId === ASSET_ALARMS_WIDGET_ID) {
+            this.widgetControls.set(PRESET_NAME.ALARM_LIST_LEGACY);
+        }
         const migratedConfig = this.widgetConfigMigrationService.migrateWidgetConfig(this.config);
         this.config = merge(this.config, migratedConfig);
         const resolvedWidgetId = this.config?.widgetId ?? alarmsWidgetId ?? defaultWidgetIds.ALARM_LIST;
         this.config.widgetId = resolvedWidgetId;
-        this.widgetControls = resolveAlarmControls(resolvedWidgetId);
+        const displayMode = this.config.displayMode || GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
+        this.displayMode.set(displayMode);
+        const initialContextConfig = {
+            dateTimeContext: this.config.dateTimeContext,
+            aggregation: this.config.aggregation,
+            isAutoRefreshEnabled: this.config.isAutoRefreshEnabled,
+            refreshInterval: this.config.refreshInterval,
+            refreshOption: this.config.refreshOption
+        };
+        this.contextConfig.set(initialContextConfig);
+        // In dashboard mode, wait for GlobalContextConnector to emit the first state
+        // In config modes, fetch immediately with widget config
+        if (displayMode !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+            await this.fetchAlarms();
+        }
     }
     ngOnDestroy() {
         if (this.config?.isRealtime) {
             this.unsubscribe$.next();
             this.unsubscribe$.complete();
         }
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    async onRefresh(dateTimeContext) {
-        if (this.config.isAutoRefreshEnabled === false) {
-            return;
-        }
-        if (dateTimeContext) {
-            this.config.dateTimeContext = dateTimeContext;
-        }
-        else {
-            this.updateDateFilter();
-        }
-        this.alarms$.next(await this.getAlarms());
     }
-    async fetchAlarms() {
-        this.updateDateFilter();
-        this.alarms$.next(await this.getAlarms());
-    }
-    async onGlobalContextChange(event) {
-        const { context, diff } = event;
-        // Update local config with the new context, do not propagate it to the widget config
-        this.config = { ...this.config, ...context, dateTimeContext: { ...context.dateTimeContext } };
-        // Prevent fetching alarms after disableAutoRefresh handler was triggered
+    onContextChange(event) {
+        const { diff, context } = event;
         if (diff.isAutoRefreshEnabled === false &&
             Object.keys(diff).length === 1 &&
             context.refreshOption === REFRESH_OPTION.LIVE) {
             return;
         }
-        await this.fetchAlarms();
+        this.contextConfig.set(event.context);
+        void this.fetchAlarms();
+    }
+    getDashboardChild() {
+        return this.dashboardChild;
+    }
+    onRefresh() {
+        void this.fetchAlarms();
     }
     onScrollingStateChange(isScrolling) {
-        if (this.config.refreshOption === REFRESH_OPTION.HISTORY) {
+        const current = this.contextConfig();
+        if (current.refreshOption === REFRESH_OPTION.HISTORY) {
             return;
         }
-        if (isScrolling) {
-            if (this.config.isAutoRefreshEnabled === false) {
-                return;
-            }
-            this.globalContextWidgetWrapperComponent.pauseAutoRefresh();
-        }
-        else {
-            this.globalContextWidgetWrapperComponent.resumeAutoRefresh();
-        }
+        this.contextConfig.set({ ...current, isAutoRefreshEnabled: !isScrolling });
+        this.isLinkedToGlobal.set(!isScrolling);
     }
-    /**
-     * 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.dateTimeContext.interval === TIME_INTERVAL.CUSTOM) {
-            return;
-        }
-        const { dateFrom, dateTo } = this.config.dateTimeContext;
-        this.config.dateTimeContext = { ...this.config.dateTimeContext, dateFrom, dateTo };
+    async fetchAlarms() {
+        const alarms = await this.getAlarms();
+        this.alarms$.next(alarms);
     }
     async getAlarms() {
         try {
             this.isLoading$.next(true);
-            return await this.alarmService.list(this.alarmWidgetService.mapConfigToQueryFilter(this.config));
+            const effectiveConfig = {
+                ...this.config,
+                ...this.contextConfig()
+            };
+            return await this.alarmService.list(this.alarmWidgetService.mapConfigToQueryFilter(effectiveConfig));
         }
         catch (error) {
             this.alerts.addAlerts(new DynamicComponentAlert({
@@ -802,16 +792,13 @@ class AlarmListWidgetComponent {
             Object.assign(this.config, predefinedConfig);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i3.DashboardChildComponent }, { token: i3.AlertService }, { token: i4.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmListWidgetComponent, isStandalone: true, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "globalContextWidgetWrapperComponent", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }], ngImport: i0, template: "<c8y-global-context-widget-wrapper\n  [widgetControls]=\"widgetControls\"\n  [isLoading]=\"isLoading$ | async\"\n  [config]=\"config\"\n  (globalContextChange)=\"onGlobalContextChange($event)\"\n></c8y-global-context-widget-wrapper>\n\n<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]=\"hasPermissions\"\n  (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmListWidgetComponent, isStandalone: true, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n<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]=\"hasPermissions\"\n  (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled"], outputs: ["configChange", "refresh"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], imports: [AlarmsListComponent, AsyncPipe, GlobalContextWidgetWrapperComponent], template: "<c8y-global-context-widget-wrapper\n  [widgetControls]=\"widgetControls\"\n  [isLoading]=\"isLoading$ | async\"\n  [config]=\"config\"\n  (globalContextChange)=\"onGlobalContextChange($event)\"\n></c8y-global-context-widget-wrapper>\n\n<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]=\"hasPermissions\"\n  (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n" }]
-        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i3.DashboardChildComponent }, { type: i3.AlertService }, { type: i4.WidgetConfigMigrationService }], propDecorators: { globalContextWidgetWrapperComponent: [{
-                type: ViewChild,
-                args: [GlobalContextWidgetWrapperComponent]
-            }], config: [{
+            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], imports: [AlarmsListComponent, AsyncPipe, LocalControlsComponent, GlobalContextConnectorComponent], template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n<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]=\"hasPermissions\"\n  (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n" }]
+        }], propDecorators: { config: [{
                 type: Input
             }] } });