@c8y/ngx-components 1023.58.3 → 1023.61.0

package/fesm2022/c8y-ngx-components-alarm-event-selector.mjs

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, Input, Component, EventEmitter, Output, Pipe, ContentChild, Optional, NgModule } from '@angular/core';
+import { Injectable, forwardRef, Input, Component, EventEmitter, Output, Pipe, ContentChild, Optional, NgModule, inject } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormControl, Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { FormControl, Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, ControlContainer } from '@angular/forms';
 import { take, takeUntil, map, startWith, tap, switchMap, shareReplay, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { NgIf, NgFor, NgClass, AsyncPipe, NgStyle } from '@angular/common';
 import * as i2 from '@c8y/ngx-components';
 import { FormGroupComponent, RequiredInputPlaceholderDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, IconDirective, ListItemComponent, ListItemDragHandleComponent, ListItemCheckboxComponent, HighlightComponent, ListItemActionComponent, ListItemCollapseComponent, ListItemIconComponent, EmptyStateComponent, LoadingComponent, ListGroupComponent, C8yTranslateDirective, ViewContext, CommonModule, CoreModule } from '@c8y/ngx-components';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6 from '@c8y/ngx-components/context-dashboard';
+import { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
 import * as i1$2 from 'ngx-bootstrap/modal';
 import { MillerViewComponent, AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
@@ -30,10 +31,10 @@ class AlarmEventAttributesFormService {
             return isDuplicate ? { duplicateType: true } : null;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventAttributesFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventAttributesFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventAttributesFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventAttributesFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventAttributesFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventAttributesFormService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -98,8 +99,8 @@ class AlarmEventAttributesFormComponent {
             this.datapoints = this.datapoints.filter(dp => dp.__target?.id === this.target.id);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventAttributesFormComponent, deps: [{ token: i1.FormBuilder }, { token: AlarmEventAttributesFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AlarmEventAttributesFormComponent, isStandalone: true, selector: "c8y-alarm-event-attributes-form", inputs: { timelineType: "timelineType", omitProperties: "omitProperties", selectedItems: "selectedItems", target: "target", datapoints: "datapoints" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventAttributesFormComponent, deps: [{ token: i1.FormBuilder }, { token: AlarmEventAttributesFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AlarmEventAttributesFormComponent, isStandalone: true, selector: "c8y-alarm-event-attributes-form", inputs: { timelineType: "timelineType", omitProperties: "omitProperties", selectedItems: "selectedItems", target: "target", datapoints: "datapoints" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AlarmEventAttributesFormComponent),
@@ -112,7 +113,7 @@ class AlarmEventAttributesFormComponent {
             }
         ], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <c8y-form-group\n    class=\"form-group-sm\"\n    *ngIf=\"formGroup.controls.label\"\n  >\n    <label class=\"m-0\">{{ 'Label' | translate }}</label>\n    <input\n      class=\"form-control flex-grow\"\n      name=\"label\"\n      formControlName=\"label\"\n      [placeholder]=\"\n        'e.g. {{ example }}'\n          | translate\n            : {\n                example: timelineType === 'ALARM' ? 'Unavailability alarm' : 'Location update'\n              }\n      \"\n    />\n  </c8y-form-group>\n\n  <div formGroupName=\"filters\">\n    <c8y-form-group class=\"form-group-sm\">\n      <label class=\"m-0\">{{ 'Type' | translate }}</label>\n      <input\n        class=\"form-control flex-grow\"\n        name=\"type\"\n        formControlName=\"type\"\n        [placeholder]=\"\n          'e.g. {{ example }}'\n            | translate\n              : {\n                  example:\n                    timelineType === 'ALARM' ? 'c8y_UnavailabilityAlarm' : 'c8y_LocationUpdate'\n                }\n        \"\n      />\n      <c8y-messages>\n        <c8y-message\n          name=\"duplicateType\"\n          [text]=\"'Type already used.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </div>\n\n  <c8y-form-group\n    class=\"form-group-sm\"\n    *ngIf=\"datapoints?.length > 0\"\n  >\n    <label>{{ 'Select data point' | translate }}</label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        class=\"form-control input-sm\"\n        (change)=\"changeDatapointSelection($event)\"\n      >\n        <option\n          *ngFor=\"let datapoint of datapoints; trackBy: trackByFn\"\n          [ngValue]=\"{\n            target: datapoint.__target.id,\n            fragment: datapoint.fragment,\n            series: datapoint.series\n          }\"\n          [selected]=\"\n            datapoint.__target.id === formGroup.value.selectedDatapoint?.target &&\n            datapoint.fragment === formGroup.value.selectedDatapoint?.fragment &&\n            datapoint.series === formGroup.value.selectedDatapoint?.series\n          \"\n        >\n          {{ datapoint?.label }}\n        </option>\n      </select>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventAttributesFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventAttributesFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-event-attributes-form', providers: [
                         {
@@ -262,10 +263,10 @@ class AlarmEventSelectorService {
         const events = this.getUniqueEventsOnly(res.data);
         return events;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorService, deps: [{ token: i1$1.AlarmService }, { token: i1$1.EventService }, { token: i2.ColorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorService, deps: [{ token: i1$1.AlarmService }, { token: i1$1.EventService }, { token: i2.ColorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.AlarmService }, { type: i1$1.EventService }, { type: i2.ColorService }] });
@@ -308,10 +309,10 @@ class CustomAlarmEventFormComponent {
         delete obj.details;
         return obj;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomAlarmEventFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomAlarmEventFormComponent, isStandalone: true, selector: "c8y-custom-alarm-event-form", inputs: { timelineType: "timelineType", target: "target", omitProperties: "omitProperties", selectedItems: "selectedItems", defaultColor: "defaultColor" }, outputs: { added: "added", cancel: "cancel" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"p-16\">\n  <div\n    *ngIf=\"!omitProperties.color\"\n    class=\"form-group d-flex a-i-center gap-8\"\n    [title]=\"'Change color' | translate\"\n  >\n    <label class=\"m-0\">{{ 'Color' | translate }}</label>\n    <div class=\"c8y-colorpicker\"\n      [ngClass]=\"{\n        'c8y-colorpicker--event': timelineType === 'EVENT',\n        'c8y-colorpicker--alarm': timelineType !== 'EVENT'\n      }\"\n    >\n      <input\n        type=\"color\"\n        formControlName=\"color\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <span [style.background-color]=\"formGroup.value.color\">\n        <i [c8yIcon]=\"timelineType === 'EVENT' ? 'online1' : 'bell'\"></i>\n      </span>\n    </div>\n  </div>\n\n  <c8y-alarm-event-attributes-form\n    formControlName=\"details\"\n    [timelineType]=\"timelineType\"\n    [omitProperties]=\"omitProperties\"\n    [selectedItems]=\"selectedItems\"\n  ></c8y-alarm-event-attributes-form>\n\n  <div class=\"d-flex p-t-16 gap-8\">\n    <button class=\"btn btn-default btn-sm\" (click)=\"cancel.emit()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm\"\n      [disabled]=\"(valid$ | async) === false\"\n      (click)=\"add()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Select' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties", "selectedItems", "target", "datapoints"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CustomAlarmEventFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CustomAlarmEventFormComponent, isStandalone: true, selector: "c8y-custom-alarm-event-form", inputs: { timelineType: "timelineType", target: "target", omitProperties: "omitProperties", selectedItems: "selectedItems", defaultColor: "defaultColor" }, outputs: { added: "added", cancel: "cancel" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"p-16\">\n  <div\n    *ngIf=\"!omitProperties.color\"\n    class=\"form-group d-flex a-i-center gap-8\"\n    [title]=\"'Change color' | translate\"\n  >\n    <label class=\"m-0\">{{ 'Color' | translate }}</label>\n    <div class=\"c8y-colorpicker\"\n      [ngClass]=\"{\n        'c8y-colorpicker--event': timelineType === 'EVENT',\n        'c8y-colorpicker--alarm': timelineType !== 'EVENT'\n      }\"\n    >\n      <input\n        type=\"color\"\n        formControlName=\"color\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <span [style.background-color]=\"formGroup.value.color\">\n        <i [c8yIcon]=\"timelineType === 'EVENT' ? 'online1' : 'bell'\"></i>\n      </span>\n    </div>\n  </div>\n\n  <c8y-alarm-event-attributes-form\n    formControlName=\"details\"\n    [timelineType]=\"timelineType\"\n    [omitProperties]=\"omitProperties\"\n    [selectedItems]=\"selectedItems\"\n  ></c8y-alarm-event-attributes-form>\n\n  <div class=\"d-flex p-t-16 gap-8\">\n    <button class=\"btn btn-default btn-sm\" (click)=\"cancel.emit()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm\"\n      [disabled]=\"(valid$ | async) === false\"\n      (click)=\"add()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Select' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties", "selectedItems", "target", "datapoints"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomAlarmEventFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CustomAlarmEventFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-custom-alarm-event-form', imports: [
                         FormsModule,
@@ -406,8 +407,8 @@ class AlarmEventSelectorListItemComponent {
         delete obj.details;
         return obj;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorListItemComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AlarmEventSelectorListItemComponent, isStandalone: true, selector: "c8y-alarm-event-selector-list-item", inputs: { timelineType: "timelineType", datapoints: "datapoints", highlightText: "highlightText", showAddRemoveButton: "showAddRemoveButton", isSelected: "isSelected", optionToRemove: "optionToRemove", showActiveToggle: "showActiveToggle", allowItemEdit: "allowItemEdit", hideSource: "hideSource", displayAsSwitch: "displayAsSwitch", omitProperties: "omitProperties" }, outputs: { added: "added", removed: "removed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorListItemComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AlarmEventSelectorListItemComponent, isStandalone: true, selector: "c8y-alarm-event-selector-list-item", inputs: { timelineType: "timelineType", datapoints: "datapoints", highlightText: "highlightText", showAddRemoveButton: "showAddRemoveButton", isSelected: "isSelected", optionToRemove: "optionToRemove", showActiveToggle: "showActiveToggle", allowItemEdit: "allowItemEdit", hideSource: "hideSource", displayAsSwitch: "displayAsSwitch", omitProperties: "omitProperties" }, outputs: { added: "added", removed: "removed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AlarmEventSelectorListItemComponent),
@@ -420,7 +421,7 @@ class AlarmEventSelectorListItemComponent {
             }
         ], ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  <c8y-li-checkbox\n    class=\"a-s-center m-t-4 p-r-0\"\n    *ngIf=\"showActiveToggle\"\n    [displayAsSwitch]=\"displayAsSwitch\"\n    formControlName=\"__active\"\n    (click)=\"$event.stopPropagation()\"\n  ></c8y-li-checkbox>\n\n  <div class=\"d-flex a-i-center p-l-0\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"colorPickerTitle | translate\"\n    >\n      <div\n        class=\"c8y-colorpicker\"\n        [ngClass]=\"{\n          'c8y-colorpicker--alarm': timelineType === 'ALARM',\n          'c8y-colorpicker--event': timelineType === 'EVENT'\n        }\"\n      >\n        <input\n          [ngStyle]=\"{ 'pointer-events': allowItemEdit && !omitProperties.color ? 'auto' : 'none' }\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span\n          class=\"circle-icon-wrapper circle-icon-wrapper--medium\"\n          [ngStyle]=\"{ 'background-color': formGroup.value.color }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            [c8yIcon]=\"timelineType === 'EVENT' ? 'online1' : 'bell'\"\n          ></i>\n        </span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean text-truncate\"\n      [title]=\"formGroup.value.details?.label\"\n      (click)=\"\n        allowItemEdit\n          ? (li.collapsed = !li.collapsed)\n          : showActiveToggle\n            ? toggleActive()\n            : addOrRemoveItem()\n      \"\n    >\n      <span class=\"text-truncate\">\n        <c8y-highlight\n          [text]=\"\n            omitProperties.label\n              ? formGroup.value.details?.filters?.type\n              : formGroup.value.details?.label\n          \"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      <small\n        class=\"text-truncate text-muted icon-flex\"\n        *ngIf=\"formGroup.value.__target && !hideSource\"\n      >\n        <i c8yIcon=\"exchange\"></i>\n        <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n      </small>\n    </button>\n\n    <button\n      class=\"btn-dot btn-dot--danger m-l-auto\"\n      title=\"{{ 'Invalid entries' | translate }}\"\n      [popover]=\"'Some entries are invalid. Check the required input fields.' | translate\"\n      container=\"body\"\n      *ngIf=\"(valid$ | async) === false && li.collapsed\"\n      [outsideClick]=\"true\"\n    >\n      <i c8yIcon=\"exclamation-circle\" class=\"icon-20\" ></i>\n    </button>\n     <span class=\"m-l-auto\" *ngIf=\"showAddRemoveButton\">\n    <button\n      class=\"btn btn-dot text-danger\"\n      [title]=\"'Remove' | translate\"\n      *ngIf=\"isSelected\"\n      (click)=\"addOrRemoveItem()\"\n    >\n      <i\n        class=\"icon-20\"\n        c8yIcon=\"minus-circle\"\n      ></i>\n    </button>\n    <button\n      class=\"btn btn-dot text-primary\"\n      [title]=\"'Select' | translate\"\n      *ngIf=\"!isSelected\"\n      (click)=\"addOrRemoveItem()\"\n      [disabled]=\"(valid$ | async) === false\"\n    >\n      <i\n        class=\"icon-20\"\n        c8yIcon=\"plus-circle\"\n      ></i>\n    </button>\n  </span>\n  </div>\n\n  <c8y-li-action\n    [icon]=\"'minus-circle'\"\n    *ngIf=\"optionToRemove\"\n    [label]=\"'Remove from list' | translate\"\n    (click)=\"remove()\"\n  ></c8y-li-action>\n  <c8y-li-collapse *ngIf=\"allowItemEdit\">\n    <div class=\"data-point-details\">\n      <c8y-alarm-event-attributes-form\n        formControlName=\"details\"\n        [timelineType]=\"timelineType\"\n        [omitProperties]=\"omitProperties\"\n        [datapoints]=\"datapoints\"\n        [target]=\"formGroup.value.__target\"\n      ></c8y-alarm-event-attributes-form>\n    </div>\n  </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { 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: ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties", "selectedItems", "target", "datapoints"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-event-selector-list-item', providers: [
                         {
@@ -490,10 +491,10 @@ class IncludesAlarmOrEventPipe {
             tmp.filters.type === item.filters.type &&
             tmp.__target?.id === item.__target?.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IncludesAlarmOrEventPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: IncludesAlarmOrEventPipe, isStandalone: true, name: "includesAlarmOrEvent" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IncludesAlarmOrEventPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: IncludesAlarmOrEventPipe, isStandalone: true, name: "includesAlarmOrEvent" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IncludesAlarmOrEventPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IncludesAlarmOrEventPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'includesAlarmOrEvent' }]
         }] });
@@ -590,8 +591,8 @@ class AlarmEventSelectorComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorComponent, deps: [{ token: AlarmEventSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AlarmEventSelectorComponent, isStandalone: true, selector: "c8y-alarm-event-selector", inputs: { timelineType: "timelineType", contextAsset: "contextAsset", allowChangingContext: "allowChangingContext", selectedItems: "selectedItems", allowSearch: "allowSearch", groupsSelectable: "groupsSelectable", hideSource: "hideSource", omitProperties: "omitProperties" }, outputs: { selectionChange: "selectionChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorComponent, deps: [{ token: AlarmEventSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AlarmEventSelectorComponent, isStandalone: true, selector: "c8y-alarm-event-selector", inputs: { timelineType: "timelineType", contextAsset: "contextAsset", allowChangingContext: "allowChangingContext", selectedItems: "selectedItems", allowSearch: "allowSearch", groupsSelectable: "groupsSelectable", hideSource: "hideSource", omitProperties: "omitProperties" }, outputs: { selectionChange: "selectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -599,7 +600,7 @@ class AlarmEventSelectorComponent {
             }
         ], ngImport: i0, template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext,\n    'grid__col--8-4--md': !allowChangingContext\n  }\"\n>\n  <div\n    class=\"d-flex d-col p-relative bg-level-1\"\n    *ngIf=\"allowChangingContext\"\n  >\n    <c8y-asset-selector-miller\n      class=\"d-contents\"\n      [(ngModel)]=\"contextAsset\"\n      [asset]=\"contextAsset\"\n      (onSelected)=\"assetSelectionChanged($event)\"\n      [container]=\"''\"\n      [config]=\"{\n        view: 'miller',\n        groupsSelectable: groupsSelectable,\n        columnHeaders: true,\n        showChildDevices: true,\n        showUnassignedDevices: true,\n        singleColumn: true,\n        search: allowSearch,\n        showFilter: true\n      }\"\n    ></c8y-asset-selector-miller>\n  </div>\n  <!-- center column -->\n  <div class=\"inner-scroll bg-component\" data-cy=\"c8y-alarm-event-selector--inner-column\">\n    <ng-template #noDeviceEmptyState>\n      <div class=\"p-16\">\n        <c8y-ui-empty-state\n          [icon]=\"timelineTypeTexts.emptyStateIcon\"\n          [title]=\"timelineTypeTexts.emptyStateTitle | translate\"\n          [subtitle]=\"timelineTypeTexts.assetWithNoItemsEmptyStateSubtitle | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n    </ng-template>\n\n    <ng-template #loadingData>\n      <div class=\"p-16 text-center\">\n        <c8y-loading></c8y-loading>\n      </div>\n    </ng-template>\n\n    <div\n      class=\"bg-inherit\"\n      *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\"\n    >\n      <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n        <p\n          class=\"text-medium text-truncate\"\n          [title]=\"timelineTypeTexts.availableItemsTitle | translate\"\n        >\n          {{ timelineTypeTexts.availableItemsTitle | translate }}\n        </p>\n        <div class=\"d-flex\">\n          <div\n            class=\"input-group input-group-search m-t-4\"\n            id=\"search\"\n            *ngIf=\"!(loadingItems$ | async)\"\n          >\n            <input\n              class=\"form-control\"\n              placeholder=\"Filter\u2026\"\n              type=\"search\"\n              [ngModel]=\"filterString\"\n              (ngModelChange)=\"filterStringChanged($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"!filterString; else clearFilterString\"\n              ></i>\n              <ng-template #clearFilterString>\n                <i\n                  class=\"text-muted\"\n                  c8yIcon=\"times\"\n                  *ngIf=\"filterString\"\n                  (click)=\"filterStringChanged()\"\n                ></i>\n              </ng-template>\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems; else loadingData\">\n        <ng-container *ngIf=\"!(loadingItems$ | async); else loadingData\">\n          <ng-container *ngIf=\"items$ | async as items\">\n            <div class=\"p-16 bg-level-2 separator-bottom\">\n              <div>\n                <p>\n                  <i\n                    class=\"text-info m-r-4\"\n                    c8yIcon=\"info-circle\"\n                  ></i>\n                  <strong>{{ timelineTypeTexts.recentItemsWarningTitle | translate }}</strong>\n                </p>\n                <p>\n                  {{ timelineTypeTexts.recentItemsWarningText | translate }}\n                  {{ timelineTypeTexts.addCustomText | translate }}\n                </p>\n              </div>\n              <div class=\"p-t-16\">\n                <button\n                  class=\"btn btn-default btn-sm\"\n                  aria-controls=\"collapseCustomItemForm\"\n                  [attr.aria-expanded]=\"isExpanded\"\n                  *ngIf=\"!isExpanded\"\n                  (click)=\"isExpanded = true\"\n                >\n                  {{ timelineTypeTexts.addCustomItemButtonLabel | translate }}\n                </button>\n                <div\n                  class=\"collapse\"\n                  id=\"collapseCustomItemForm\"\n                  [collapse]=\"!isExpanded\"\n                  [isAnimated]=\"true\"\n                >\n                  <div [style.min-height]=\"'230px'\">\n                    <c8y-custom-alarm-event-form\n                      class=\"d-block\"\n                      *ngIf=\"isExpanded\"\n                      [timelineType]=\"timelineType\"\n                      [target]=\"assetSelection | async\"\n                      [omitProperties]=\"omitProperties\"\n                      [defaultColor]=\"defaultColor\"\n                      (added)=\"itemAdded($event); isExpanded = false\"\n                      (cancel)=\"isExpanded = false\"\n                      [selectedItems]=\"selectedItems\"\n                    ></c8y-custom-alarm-event-form>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"p-16\"\n              *ngIf=\"!filteredItems.length\"\n            >\n              <c8y-ui-empty-state\n                [icon]=\"timelineTypeTexts.emptyStateIcon\"\n                [title]=\"timelineTypeTexts.emptyStateTitle | translate\"\n                [subtitle]=\"\n                  items.length\n                    ? ('Try another filter term.' | translate)\n                    : (timelineTypeTexts.assetWithNoItemsEmptyStateSubtitle | translate)\n                \"\n                [horizontal]=\"true\"\n              ></c8y-ui-empty-state>\n            </div>\n\n            <c8y-list-group>\n              <c8y-list-item\n                class=\"sticky-top\"\n                style=\"top: 72px\"\n                *ngIf=\"items.length > maxNumberOfItems && filteredItems.length >= maxNumberOfItems\"\n              >\n                <div class=\"alert alert-warning m-b-0\">\n                  {{ timelineTypeTexts.largeNumberOfItemsInfo | translate }}\n                </div>\n              </c8y-list-item>\n              <c8y-alarm-event-selector-list-item\n                class=\"d-contents\"\n                [ngModel]=\"item\"\n                [isSelected]=\"selectedItems | includesAlarmOrEvent: item\"\n                (added)=\"itemAdded($event)\"\n                (removed)=\"itemRemoved($event)\"\n                [highlightText]=\"filterStringChanges$ | async\"\n                [timelineType]=\"timelineType\"\n                [hideSource]=\"hideSource\"\n                *ngFor=\"let item of filteredItems; trackBy: trackByFn\"\n              ></c8y-alarm-event-selector-list-item>\n            </c8y-list-group>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <!-- last column  -->\n  <div class=\"inner-scroll bg-level-1\">\n    <p\n      class=\"text-medium m-b-4 p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n      [title]=\"timelineTypeTexts.selectedItemsTitle | translate\"\n    >\n      {{ timelineTypeTexts.selectedItemsTitle | translate }}\n    </p>\n    <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-b-16\">\n      <c8y-ui-empty-state\n        [icon]=\"timelineTypeTexts.emptyStateIcon\"\n        [title]=\"timelineTypeTexts.noSelectedItemsTitle | translate\"\n        *ngIf=\"!selectedItems || !selectedItems.length\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n\n      <div\n        [ngClass]=\"{\n          'c8y-alarm-pill': timelineType === 'ALARM',\n          'c8y-event-pill': timelineType === 'EVENT'\n        }\"\n        *ngFor=\"let selectedItem of selectedItems\"\n      >\n        <button\n          [title]=\"'Remove' | translate\"\n          type=\"button\"\n          [ngClass]=\"{\n            'c8y-alarm-pill__btn': timelineType === 'ALARM',\n            'c8y-event-pill__btn': timelineType === 'EVENT'\n          }\"\n          (click)=\"itemRemoved(selectedItem)\"\n        >\n          <i\n            class=\"icon-14\"\n            c8yIcon=\"remove\"\n          ></i>\n        </button>\n        <div\n          class=\"c8y-datapoint-pill__label\"\n          [title]=\"selectedItem.label || selectedItem.filters.type\"\n        >\n          <span\n            class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n            [style.background-color]=\"selectedItem.color || defaultColor\"\n          >\n            <i\n              class=\"stroked-icon\"\n              [c8yIcon]=\"timelineType === 'ALARM' ? 'bell' : 'online1'\"\n            ></i>\n          </span>\n          <span class=\"text-truncate\">\n            <span class=\"text-truncate\">{{ selectedItem.label || selectedItem.filters.type }}</span>\n            <small\n              class=\"text-muted text-10\"\n              *ngIf=\"!hideSource && selectedItem?.__target?.name\"\n            >\n              {{ selectedItem?.__target?.name }}\n            </small>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: CustomAlarmEventFormComponent, selector: "c8y-custom-alarm-event-form", inputs: ["timelineType", "target", "omitProperties", "selectedItems", "defaultColor"], outputs: ["added", "cancel"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AlarmEventSelectorListItemComponent, selector: "c8y-alarm-event-selector-list-item", inputs: ["timelineType", "datapoints", "highlightText", "showAddRemoveButton", "isSelected", "optionToRemove", "showActiveToggle", "allowItemEdit", "hideSource", "displayAsSwitch", "omitProperties"], outputs: ["added", "removed"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesAlarmOrEventPipe, name: "includesAlarmOrEvent" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-event-selector', providers: [
                         {
@@ -671,10 +672,10 @@ class AlarmEventSelectorModalComponent {
     selectionChange(selection) {
         this.selectedItems = selection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModalComponent, deps: [{ token: i1$2.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AlarmEventSelectorModalComponent, isStandalone: true, selector: "c8y-alarm-event-selector-modal", ngImport: i0, template: "<div class=\"modal-header separator\">\n  <h4 class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\n  <c8y-alarm-event-selector\n    [selectedItems]=\"selectedItems\"\n    [contextAsset]=\"contextAsset\"\n    [timelineType]=\"selectType\"\n    [groupsSelectable]=\"groupsSelectable\"\n    [hideSource]=\"hideSource\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [omitProperties]=\"omitProperties\"\n    (selectionChange)=\"selectionChange($event)\"\n  ></c8y-alarm-event-selector>\n</div>\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    [title]=\"'Cancel' | translate\"\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    [title]=\"saveButtonLabel | translate\"\n    class=\"btn btn-primary\"\n    [disabled]=\"!this.selectedItems?.length\"\n    (click)=\"saveChanges()\"\n  >\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: AlarmEventSelectorComponent, selector: "c8y-alarm-event-selector", inputs: ["timelineType", "contextAsset", "allowChangingContext", "selectedItems", "allowSearch", "groupsSelectable", "hideSource", "omitProperties"], outputs: ["selectionChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModalComponent, deps: [{ token: i1$2.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AlarmEventSelectorModalComponent, isStandalone: true, selector: "c8y-alarm-event-selector-modal", ngImport: i0, template: "<div class=\"modal-header separator\">\n  <h4 class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\n  <c8y-alarm-event-selector\n    [selectedItems]=\"selectedItems\"\n    [contextAsset]=\"contextAsset\"\n    [timelineType]=\"selectType\"\n    [groupsSelectable]=\"groupsSelectable\"\n    [hideSource]=\"hideSource\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [omitProperties]=\"omitProperties\"\n    (selectionChange)=\"selectionChange($event)\"\n  ></c8y-alarm-event-selector>\n</div>\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    [title]=\"'Cancel' | translate\"\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    [title]=\"saveButtonLabel | translate\"\n    class=\"btn btn-primary\"\n    [disabled]=\"!this.selectedItems?.length\"\n    (click)=\"saveChanges()\"\n  >\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: AlarmEventSelectorComponent, selector: "c8y-alarm-event-selector", inputs: ["timelineType", "contextAsset", "allowChangingContext", "selectedItems", "allowSearch", "groupsSelectable", "hideSource", "omitProperties"], outputs: ["selectionChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-event-selector-modal', imports: [AlarmEventSelectorComponent, C8yTranslateDirective, C8yTranslatePipe], template: "<div class=\"modal-header separator\">\n  <h4 class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\n  <c8y-alarm-event-selector\n    [selectedItems]=\"selectedItems\"\n    [contextAsset]=\"contextAsset\"\n    [timelineType]=\"selectType\"\n    [groupsSelectable]=\"groupsSelectable\"\n    [hideSource]=\"hideSource\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [omitProperties]=\"omitProperties\"\n    (selectionChange)=\"selectionChange($event)\"\n  ></c8y-alarm-event-selector>\n</div>\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    [title]=\"'Cancel' | translate\"\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    [title]=\"saveButtonLabel | translate\"\n    class=\"btn btn-primary\"\n    [disabled]=\"!this.selectedItems?.length\"\n    (click)=\"saveChanges()\"\n  >\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.BsModalRef }] });
@@ -701,10 +702,10 @@ class AlarmEventSelectorModalService {
         const content = modal.content;
         return content.result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModalService, deps: [{ token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModalService, deps: [{ token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.BsModalService }] });
@@ -774,10 +775,13 @@ class AlarmEventSelectionListComponent {
     validate(_control) {
         return this.formArray.valid ? null : { formInvalid: {} };
     }
-    writeValue(val) {
+    get formGroups() {
+        return this.formArray.controls;
+    }
+    writeValue(alarmsOrEvents) {
         this.formArray.clear();
-        if (val?.length) {
-            val.forEach(val => {
+        if (alarmsOrEvents?.length) {
+            alarmsOrEvents.forEach(val => {
                 const formgroup = this.formBuilder.group({ details: [] });
                 formgroup.patchValue({ details: val });
                 this.formArray.push(formgroup);
@@ -838,8 +842,8 @@ class AlarmEventSelectionListComponent {
             return contextData?.id;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectionListComponent, deps: [{ token: AlarmEventSelectorModalService }, { token: AlarmEventSelectorService }, { token: i1.FormBuilder }, { token: i4.ActivatedRoute, optional: true }, { token: i2.ContextRouteService, optional: true }, { token: i6.WidgetConfigComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AlarmEventSelectionListComponent, isStandalone: true, selector: "c8y-alarm-event-selection-list", inputs: { timelineType: "timelineType", canRemove: "canRemove", canEdit: "canEdit", canDragAndDrop: "canDragAndDrop", title: "title", addButtonLabel: "addButtonLabel", hideSource: "hideSource", inline: "inline", activeToggleAsSwitch: "activeToggleAsSwitch", omitProperties: "omitProperties", datapoints: "datapoints", config: "config" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectionListComponent, deps: [{ token: AlarmEventSelectorModalService }, { token: AlarmEventSelectorService }, { token: i1.FormBuilder }, { token: i4.ActivatedRoute, optional: true }, { token: i2.ContextRouteService, optional: true }, { token: i6.WidgetConfigComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AlarmEventSelectionListComponent, isStandalone: true, selector: "c8y-alarm-event-selection-list", inputs: { timelineType: "timelineType", canRemove: "canRemove", canEdit: "canEdit", canDragAndDrop: "canDragAndDrop", title: "title", addButtonLabel: "addButtonLabel", hideSource: "hideSource", inline: "inline", activeToggleAsSwitch: "activeToggleAsSwitch", omitProperties: "omitProperties", datapoints: "datapoints", config: "config" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -850,9 +854,9 @@ class AlarmEventSelectionListComponent {
                 useExisting: forwardRef(() => AlarmEventSelectionListComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "emptyState", first: true, predicate: EmptyStateComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"card-header separator-top-bottom sticky-top bg-inherit\"\n  *ngIf=\"!inline\"\n>\n  <span class=\"card-title h4\">{{ title | translate }}</span>\n</div>\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"formArray.controls?.length < 2\"\n>\n  <div\n    class=\"p-t-8\"\n    *ngIf=\"!formArray.controls?.length\"\n  >\n    <ng-content select=\"c8y-ui-empty-state\"></ng-content>\n    <c8y-ui-empty-state\n      class=\"p-t-8\"\n      [icon]=\"timelineTypeTexts.emptyStateIcon\"\n      [title]=\"timelineTypeTexts.emptyStateTitle | translate\"\n      [subtitle]=\"timelineTypeTexts.emptyStateSubtitle | translate\"\n      *ngIf=\"!emptyState\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n  <div\n    *ngFor=\"let itemForm of formArray.controls; let index = index\"\n    [formGroup]=\"itemForm\"\n  >\n    <c8y-alarm-event-selector-list-item\n      class=\"d-block\"\n      cdkDrag\n      [cdkDragDisabled]=\"!canDragAndDrop\"\n      formControlName=\"details\"\n      [showAddRemoveButton]=\"false\"\n      [datapoints]=\"datapoints\"\n      [optionToRemove]=\"canRemove\"\n      [showActiveToggle]=\"true\"\n      [timelineType]=\"timelineType\"\n      [allowItemEdit]=\"canEdit\"\n      [hideSource]=\"hideSource\"\n      [displayAsSwitch]=\"activeToggleAsSwitch\"\n      [omitProperties]=\"omitProperties\"\n      (removed)=\"onItemRemoved(index)\"\n    >\n      <c8y-li-drag-handle\n        title=\"{{ 'Click and drag to reorder' | translate }}\"\n        cdkDragHandle\n        *ngIf=\"canDragAndDrop\"\n      >\n        <i c8yIcon=\"drag-reorder\"></i>\n      </c8y-li-drag-handle>\n    </c8y-alarm-event-selector-list-item>\n  </div>\n</c8y-list-group>\n\n<div class=\"card-footer bg-inherit\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"addButtonLabel | translate\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn-block': inline }\"\n    (click)=\"add()\"\n  >\n    <i\n      c8yIcon=\"plus-circle\"\n      *ngIf=\"canDragAndDrop\"\n    ></i>\n    {{ addButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AlarmEventSelectorListItemComponent, selector: "c8y-alarm-event-selector-list-item", inputs: ["timelineType", "datapoints", "highlightText", "showAddRemoveButton", "isSelected", "optionToRemove", "showActiveToggle", "allowItemEdit", "hideSource", "displayAsSwitch", "omitProperties"], outputs: ["added", "removed"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], queries: [{ propertyName: "emptyState", first: true, predicate: EmptyStateComponent, descendants: true }], ngImport: i0, template: "@if (!inline) {\n  <div class=\"card-header separator-top-bottom sticky-top bg-inherit\">\n    <span class=\"card-title h4\">{{ title | translate }}</span>\n  </div>\n}\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"formArray.controls?.length < 2\"\n>\n  @if (!formArray.controls?.length) {\n    <div class=\"p-t-8\">\n      <ng-content select=\"c8y-ui-empty-state\"></ng-content>\n      @if (!emptyState) {\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          [icon]=\"timelineTypeTexts.emptyStateIcon\"\n          [title]=\"timelineTypeTexts.emptyStateTitle | translate\"\n          [subtitle]=\"timelineTypeTexts.emptyStateSubtitle | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </div>\n  }\n\n  @for (formGroup of formGroups; track formGroup; let index = $index) {\n    <div [formGroup]=\"formGroup\">\n      <c8y-alarm-event-selector-list-item\n        class=\"d-block\"\n        cdkDrag\n        [cdkDragDisabled]=\"!canDragAndDrop\"\n        formControlName=\"details\"\n        [showAddRemoveButton]=\"false\"\n        [datapoints]=\"datapoints\"\n        [optionToRemove]=\"canRemove\"\n        [showActiveToggle]=\"true\"\n        [timelineType]=\"timelineType\"\n        [allowItemEdit]=\"canEdit\"\n        [hideSource]=\"hideSource\"\n        [displayAsSwitch]=\"activeToggleAsSwitch\"\n        [omitProperties]=\"omitProperties\"\n        (removed)=\"onItemRemoved(index)\"\n      >\n        @if (canDragAndDrop) {\n          <c8y-li-drag-handle\n            title=\"{{ 'Click and drag to reorder' | translate }}\"\n            cdkDragHandle\n          >\n            <i c8yIcon=\"drag-reorder\"></i>\n          </c8y-li-drag-handle>\n        }\n      </c8y-alarm-event-selector-list-item>\n    </div>\n  }\n</c8y-list-group>\n\n<div class=\"card-footer bg-inherit\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"addButtonLabel | translate\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    @if (canDragAndDrop) {\n      <i c8yIcon=\"plus-circle\"></i>\n    }\n    {{ addButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AlarmEventSelectorListItemComponent, selector: "c8y-alarm-event-selector-list-item", inputs: ["timelineType", "datapoints", "highlightText", "showAddRemoveButton", "isSelected", "optionToRemove", "showActiveToggle", "allowItemEdit", "hideSource", "displayAsSwitch", "omitProperties"], outputs: ["added", "removed"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectionListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-event-selection-list', providers: [
                         {
@@ -866,11 +870,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true
                         }
                     ], imports: [
-                        NgIf,
                         ListGroupComponent,
                         CdkDropList,
                         EmptyStateComponent,
-                        NgFor,
                         FormsModule,
                         ReactiveFormsModule,
                         AlarmEventSelectorListItemComponent,
@@ -880,7 +882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IconDirective,
                         NgClass,
                         C8yTranslatePipe
-                    ], template: "<div\n  class=\"card-header separator-top-bottom sticky-top bg-inherit\"\n  *ngIf=\"!inline\"\n>\n  <span class=\"card-title h4\">{{ title | translate }}</span>\n</div>\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"formArray.controls?.length < 2\"\n>\n  <div\n    class=\"p-t-8\"\n    *ngIf=\"!formArray.controls?.length\"\n  >\n    <ng-content select=\"c8y-ui-empty-state\"></ng-content>\n    <c8y-ui-empty-state\n      class=\"p-t-8\"\n      [icon]=\"timelineTypeTexts.emptyStateIcon\"\n      [title]=\"timelineTypeTexts.emptyStateTitle | translate\"\n      [subtitle]=\"timelineTypeTexts.emptyStateSubtitle | translate\"\n      *ngIf=\"!emptyState\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n  <div\n    *ngFor=\"let itemForm of formArray.controls; let index = index\"\n    [formGroup]=\"itemForm\"\n  >\n    <c8y-alarm-event-selector-list-item\n      class=\"d-block\"\n      cdkDrag\n      [cdkDragDisabled]=\"!canDragAndDrop\"\n      formControlName=\"details\"\n      [showAddRemoveButton]=\"false\"\n      [datapoints]=\"datapoints\"\n      [optionToRemove]=\"canRemove\"\n      [showActiveToggle]=\"true\"\n      [timelineType]=\"timelineType\"\n      [allowItemEdit]=\"canEdit\"\n      [hideSource]=\"hideSource\"\n      [displayAsSwitch]=\"activeToggleAsSwitch\"\n      [omitProperties]=\"omitProperties\"\n      (removed)=\"onItemRemoved(index)\"\n    >\n      <c8y-li-drag-handle\n        title=\"{{ 'Click and drag to reorder' | translate }}\"\n        cdkDragHandle\n        *ngIf=\"canDragAndDrop\"\n      >\n        <i c8yIcon=\"drag-reorder\"></i>\n      </c8y-li-drag-handle>\n    </c8y-alarm-event-selector-list-item>\n  </div>\n</c8y-list-group>\n\n<div class=\"card-footer bg-inherit\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"addButtonLabel | translate\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn-block': inline }\"\n    (click)=\"add()\"\n  >\n    <i\n      c8yIcon=\"plus-circle\"\n      *ngIf=\"canDragAndDrop\"\n    ></i>\n    {{ addButtonLabel | translate }}\n  </button>\n</div>\n" }]
+                    ], template: "@if (!inline) {\n  <div class=\"card-header separator-top-bottom sticky-top bg-inherit\">\n    <span class=\"card-title h4\">{{ title | translate }}</span>\n  </div>\n}\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"formArray.controls?.length < 2\"\n>\n  @if (!formArray.controls?.length) {\n    <div class=\"p-t-8\">\n      <ng-content select=\"c8y-ui-empty-state\"></ng-content>\n      @if (!emptyState) {\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          [icon]=\"timelineTypeTexts.emptyStateIcon\"\n          [title]=\"timelineTypeTexts.emptyStateTitle | translate\"\n          [subtitle]=\"timelineTypeTexts.emptyStateSubtitle | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </div>\n  }\n\n  @for (formGroup of formGroups; track formGroup; let index = $index) {\n    <div [formGroup]=\"formGroup\">\n      <c8y-alarm-event-selector-list-item\n        class=\"d-block\"\n        cdkDrag\n        [cdkDragDisabled]=\"!canDragAndDrop\"\n        formControlName=\"details\"\n        [showAddRemoveButton]=\"false\"\n        [datapoints]=\"datapoints\"\n        [optionToRemove]=\"canRemove\"\n        [showActiveToggle]=\"true\"\n        [timelineType]=\"timelineType\"\n        [allowItemEdit]=\"canEdit\"\n        [hideSource]=\"hideSource\"\n        [displayAsSwitch]=\"activeToggleAsSwitch\"\n        [omitProperties]=\"omitProperties\"\n        (removed)=\"onItemRemoved(index)\"\n      >\n        @if (canDragAndDrop) {\n          <c8y-li-drag-handle\n            title=\"{{ 'Click and drag to reorder' | translate }}\"\n            cdkDragHandle\n          >\n            <i c8yIcon=\"drag-reorder\"></i>\n          </c8y-li-drag-handle>\n        }\n      </c8y-alarm-event-selector-list-item>\n    </div>\n  }\n</c8y-list-group>\n\n<div class=\"card-footer bg-inherit\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"addButtonLabel | translate\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    @if (canDragAndDrop) {\n      <i c8yIcon=\"plus-circle\"></i>\n    }\n    {{ addButtonLabel | translate }}\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: AlarmEventSelectorModalService }, { type: AlarmEventSelectorService }, { type: i1.FormBuilder }, { type: i4.ActivatedRoute, decorators: [{
                     type: Optional
                 }] }, { type: i2.ContextRouteService, decorators: [{
@@ -917,8 +919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class AlarmEventSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModule, imports: [CommonModule,
             CoreModule,
             DragDropModule,
             PopoverModule,
@@ -931,7 +933,7 @@ class AlarmEventSelectorModule {
             AlarmEventSelectorComponent,
             IncludesAlarmOrEventPipe,
             CustomAlarmEventFormComponent], exports: [AlarmEventSelectionListComponent, AlarmEventSelectorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModule, imports: [CommonModule,
             CoreModule,
             DragDropModule,
             PopoverModule,
@@ -946,7 +948,7 @@ class AlarmEventSelectorModule {
             AlarmEventSelectorComponent,
             CustomAlarmEventFormComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEventSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AlarmEventSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -970,9 +972,165 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class WidgetEventSelectorComponent {
+    constructor() {
+        /**
+         * The name of the control in the widget configuration where
+         * the selected events will be stored.
+         */
+        this.controlName = 'alarmsEventsConfigs';
+        /**
+         * Determines how the config is updated:
+         * - ISOLATED: Only stores items matching the events timelineType
+         * - MIXED: Stores both alarms and events together
+         */
+        this.configStoreMode = 'ISOLATED';
+        this.widgetConfigService = inject(WidgetConfigService);
+        this.timelineType = 'EVENT';
+    }
+    ngOnInit() {
+        this.events = this.getEvents();
+    }
+    onEventsChange(events) {
+        this.updateEventsConfig(events ?? []);
+    }
+    getEvents() {
+        return this.getAlarmsOrEventsFromWidgetConfig().filter(ae => ae.timelineType === this.timelineType);
+    }
+    updateEventsConfig(events) {
+        if (this.configStoreMode === 'ISOLATED') {
+            this.widgetConfigService.updateConfig({ [this.controlName]: events });
+            return;
+        }
+        const alarmDetails = this.getAlarmsOrEventsFromWidgetConfig().filter(config => config.timelineType !== this.timelineType);
+        this.widgetConfigService.updateConfig({
+            [this.controlName]: [...alarmDetails, ...events]
+        });
+    }
+    getAlarmsOrEventsFromWidgetConfig() {
+        const alarmOrEvents = this.widgetConfigService.currentConfig?.[this.controlName];
+        return alarmOrEvents ?? [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetEventSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: WidgetEventSelectorComponent, isStandalone: true, selector: "c8y-widget-event-selector", inputs: { controlName: "controlName", configStoreMode: "configStoreMode" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: `
+    <c8y-alarm-event-selection-list
+      class="bg-inherit"
+      name="eventsConfigs"
+      [(ngModel)]="events"
+      (ngModelChange)="onEventsChange($event)"
+      [timelineType]="timelineType"
+      [inline]="true"
+      [datapoints]="(widgetConfigService.currentConfig$ | async)?.datapoints"
+    ></c8y-alarm-event-selection-list>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetEventSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-widget-event-selector',
+                    template: `
+    <c8y-alarm-event-selection-list
+      class="bg-inherit"
+      name="eventsConfigs"
+      [(ngModel)]="events"
+      (ngModelChange)="onEventsChange($event)"
+      [timelineType]="timelineType"
+      [inline]="true"
+      [datapoints]="(widgetConfigService.currentConfig$ | async)?.datapoints"
+    ></c8y-alarm-event-selection-list>
+  `,
+                    host: { class: 'bg-level-1' },
+                    standalone: true,
+                    imports: [FormsModule, AlarmEventSelectionListComponent, AsyncPipe],
+                    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+                }]
+        }], propDecorators: { controlName: [{
+                type: Input
+            }], configStoreMode: [{
+                type: Input
+            }] } });
+
+class WidgetAlarmSelectorComponent {
+    constructor() {
+        /**
+         * The name of the control in the widget configuration where
+         * the selected alarms will be stored.
+         */
+        this.controlName = 'alarmsEventsConfigs';
+        /**
+         * Determines how the config is updated:
+         * - ISOLATED: Only stores items matching the alarms timelineType
+         * - MIXED: Stores both alarms and events together
+         */
+        this.configStoreMode = 'ISOLATED';
+        this.widgetConfigService = inject(WidgetConfigService);
+        this.timelineType = 'ALARM';
+    }
+    ngOnInit() {
+        this.alarms = this.getAlarms();
+    }
+    onAlarmsChange(alarms) {
+        this.updateAlarmsConfig(alarms ?? []);
+    }
+    getAlarms() {
+        return this.getAlarmsOrEventsFromWidgetConfig().filter(ae => ae.timelineType === this.timelineType);
+    }
+    updateAlarmsConfig(alarms) {
+        if (this.configStoreMode === 'ISOLATED') {
+            this.widgetConfigService.updateConfig({ [this.controlName]: alarms });
+            return;
+        }
+        const eventDetails = this.getAlarmsOrEventsFromWidgetConfig().filter(config => config.timelineType !== this.timelineType);
+        this.widgetConfigService.updateConfig({
+            [this.controlName]: [...eventDetails, ...alarms]
+        });
+    }
+    getAlarmsOrEventsFromWidgetConfig() {
+        const alarmsOrEvents = this.widgetConfigService.currentConfig?.[this.controlName];
+        return alarmsOrEvents ?? [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetAlarmSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: WidgetAlarmSelectorComponent, isStandalone: true, selector: "c8y-widget-alarm-selector", inputs: { controlName: "controlName", configStoreMode: "configStoreMode" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: `
+    <c8y-alarm-event-selection-list
+      class="bg-inherit"
+      name="alarmsConfigs"
+      [(ngModel)]="alarms"
+      (ngModelChange)="onAlarmsChange($event)"
+      [timelineType]="timelineType"
+      [inline]="true"
+      [datapoints]="(widgetConfigService.currentConfig$ | async)?.datapoints"
+    ></c8y-alarm-event-selection-list>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetAlarmSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-widget-alarm-selector',
+                    template: `
+    <c8y-alarm-event-selection-list
+      class="bg-inherit"
+      name="alarmsConfigs"
+      [(ngModel)]="alarms"
+      (ngModelChange)="onAlarmsChange($event)"
+      [timelineType]="timelineType"
+      [inline]="true"
+      [datapoints]="(widgetConfigService.currentConfig$ | async)?.datapoints"
+    ></c8y-alarm-event-selection-list>
+  `,
+                    host: { class: 'bg-level-1' },
+                    standalone: true,
+                    imports: [FormsModule, AlarmEventSelectionListComponent, AsyncPipe],
+                    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+                }]
+        }], propDecorators: { controlName: [{
+                type: Input
+            }], configStoreMode: [{
+                type: Input
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ALARM_TEXTS, AlarmEventAttributesFormComponent, AlarmEventSelectionListComponent, AlarmEventSelectorComponent, AlarmEventSelectorListItemComponent, AlarmEventSelectorModalComponent, AlarmEventSelectorModalService, AlarmEventSelectorModule, AlarmEventSelectorService, CustomAlarmEventFormComponent, EVENT_TEXTS, IncludesAlarmOrEventPipe };
+export { ALARM_TEXTS, AlarmEventAttributesFormComponent, AlarmEventSelectionListComponent, AlarmEventSelectorComponent, AlarmEventSelectorListItemComponent, AlarmEventSelectorModalComponent, AlarmEventSelectorModalService, AlarmEventSelectorModule, AlarmEventSelectorService, CustomAlarmEventFormComponent, EVENT_TEXTS, IncludesAlarmOrEventPipe, WidgetAlarmSelectorComponent, WidgetEventSelectorComponent };
 //# sourceMappingURL=c8y-ngx-components-alarm-event-selector.mjs.map