@c8y/ngx-components 1023.85.1 → 1023.88.2

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

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, Input, Component, EventEmitter, Output, Pipe, ContentChild, Optional, NgModule, inject } from '@angular/core';
+import { Injectable, forwardRef, Input, Component, EventEmitter, Output, Pipe, ContentChild, Optional, NgModule, signal, computed, inject } from '@angular/core';
 import * as i1 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 { NgIf, NgFor, NgClass, AsyncPipe } 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 { FormGroupComponent, RequiredInputPlaceholderDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, IconDirective, ListItemComponent, ListItemDragHandleComponent, ListItemCheckboxComponent, HighlightComponent, ListItemCollapseComponent, 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 { WidgetConfigService, WidgetConfigFeedbackComponent } 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';
@@ -17,9 +17,10 @@ import { uniqBy } from 'lodash-es';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { CollapseDirective, CollapseModule } from 'ngx-bootstrap/collapse';
 import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
+import * as i2$1 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i4 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 class AlarmEventAttributesFormService {
     duplicateTypeValidator(selectedItems) {
@@ -384,6 +385,7 @@ class AlarmEventSelectorListItemComponent {
             .pipe(map(tmp => this.transformFormValue(tmp)), takeUntil(this.destroy$))
             .subscribe(fn);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     registerOnTouched(fn) {
         this.formGroup.valueChanges.pipe(take(1)).subscribe(fn);
     }
@@ -402,13 +404,14 @@ class AlarmEventSelectorListItemComponent {
     remove() {
         this.removed.emit(this.transformFormValue(this.formGroup.value));
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     transformFormValue(formValue) {
         const obj = Object.assign({}, formValue.details || {}, formValue);
         delete obj.details;
         return obj;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmEventSelectorListItemComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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),
@@ -419,7 +422,7 @@ class AlarmEventSelectorListItemComponent {
                 useExisting: forwardRef(() => AlarmEventSelectorListItemComponent),
                 multi: true
             }
-        ], 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" }] }); }
+        ], 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  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center m-t-4 p-r-0\"\n      [displayAsSwitch]=\"displayAsSwitch\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\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        [class.c8y-colorpicker--alarm]=\"timelineType === 'ALARM'\"\n        [class.c8y-colorpicker--event]=\"timelineType === 'EVENT'\"\n      >\n        <input\n          [style.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          [style.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      @if (formGroup.value.__target && !hideSource) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    <span class=\"m-l-auto d-flex a-i-center m-r-4\">\n      @if ((valid$ | async) === false && li.collapsed) {\n        <button\n          class=\"btn-dot btn-dot--danger\"\n          title=\"{{ 'Invalid entries' | translate }}\"\n          [popover]=\"'Some entries are invalid. Check the required input fields.' | translate\"\n          container=\"body\"\n          type=\"button\"\n          [outsideClick]=\"true\"\n        >\n          <i\n            class=\"icon-20\"\n            c8yIcon=\"exclamation-circle\"\n          ></i>\n        </button>\n      }\n      @if (showAddRemoveButton) {\n        <span>\n          @if (isSelected) {\n            <button\n              class=\"btn btn-dot text-danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              [tooltip]=\"'Remove' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"addOrRemoveItem()\"\n            >\n              <i\n                class=\"icon-20\"\n                c8yIcon=\"minus-circle\"\n              ></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-dot text-primary\"\n              [attr.aria-label]=\"'Select' | translate\"\n              [tooltip]=\"'Select' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [disabled]=\"(valid$ | async) === false\"\n              [delay]=\"500\"\n              (click)=\"addOrRemoveItem()\"\n            >\n              <i\n                class=\"icon-20\"\n                c8yIcon=\"plus-circle\"\n              ></i>\n            </button>\n          }\n        </span>\n      }\n      @if (optionToRemove) {\n        <button\n          class=\"showOnHover btn btn-dot btn-dot--danger m-r-4\"\n          [attr.aria-label]=\"'Remove from list' | translate\"\n          [tooltip]=\"'Remove from list' | translate\"\n          placement=\"top\"\n          container=\"body\"\n          type=\"button\"\n          data-cy=\"alarm-event-selector-list-item--remove-btn\"\n          [delay]=\"500\"\n          (click)=\"remove()\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      }\n    </span>\n  </div>\n\n  @if (allowItemEdit) {\n    <c8y-li-collapse>\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  }\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: 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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "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.19", ngImport: i0, type: AlarmEventSelectorListItemComponent, decorators: [{
             type: Component,
@@ -439,21 +442,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         ListItemDragHandleComponent,
-                        NgIf,
-                        ListItemIconComponent,
                         IconDirective,
                         ListItemCheckboxComponent,
-                        NgClass,
                         RequiredInputPlaceholderDirective,
-                        NgStyle,
                         HighlightComponent,
                         PopoverDirective,
-                        ListItemActionComponent,
+                        TooltipModule,
                         ListItemCollapseComponent,
                         AlarmEventAttributesFormComponent,
                         C8yTranslatePipe,
                         AsyncPipe
-                    ], 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" }]
+                    ], 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  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center m-t-4 p-r-0\"\n      [displayAsSwitch]=\"displayAsSwitch\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\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        [class.c8y-colorpicker--alarm]=\"timelineType === 'ALARM'\"\n        [class.c8y-colorpicker--event]=\"timelineType === 'EVENT'\"\n      >\n        <input\n          [style.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          [style.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      @if (formGroup.value.__target && !hideSource) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    <span class=\"m-l-auto d-flex a-i-center m-r-4\">\n      @if ((valid$ | async) === false && li.collapsed) {\n        <button\n          class=\"btn-dot btn-dot--danger\"\n          title=\"{{ 'Invalid entries' | translate }}\"\n          [popover]=\"'Some entries are invalid. Check the required input fields.' | translate\"\n          container=\"body\"\n          type=\"button\"\n          [outsideClick]=\"true\"\n        >\n          <i\n            class=\"icon-20\"\n            c8yIcon=\"exclamation-circle\"\n          ></i>\n        </button>\n      }\n      @if (showAddRemoveButton) {\n        <span>\n          @if (isSelected) {\n            <button\n              class=\"btn btn-dot text-danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              [tooltip]=\"'Remove' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"addOrRemoveItem()\"\n            >\n              <i\n                class=\"icon-20\"\n                c8yIcon=\"minus-circle\"\n              ></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-dot text-primary\"\n              [attr.aria-label]=\"'Select' | translate\"\n              [tooltip]=\"'Select' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [disabled]=\"(valid$ | async) === false\"\n              [delay]=\"500\"\n              (click)=\"addOrRemoveItem()\"\n            >\n              <i\n                class=\"icon-20\"\n                c8yIcon=\"plus-circle\"\n              ></i>\n            </button>\n          }\n        </span>\n      }\n      @if (optionToRemove) {\n        <button\n          class=\"showOnHover btn btn-dot btn-dot--danger m-r-4\"\n          [attr.aria-label]=\"'Remove from list' | translate\"\n          [tooltip]=\"'Remove from list' | translate\"\n          placement=\"top\"\n          container=\"body\"\n          type=\"button\"\n          data-cy=\"alarm-event-selector-list-item--remove-btn\"\n          [delay]=\"500\"\n          (click)=\"remove()\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      }\n    </span>\n  </div>\n\n  @if (allowItemEdit) {\n    <c8y-li-collapse>\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  }\n</c8y-li>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { timelineType: [{
                 type: Input
             }], datapoints: [{
@@ -854,7 +853,7 @@ class AlarmEventSelectionListComponent {
                 useExisting: forwardRef(() => AlarmEventSelectionListComponent),
                 multi: true
             }
-        ], 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" }] }); }
+        ], 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  [class.separator-top]=\"formArray.controls?.length\"\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.19", ngImport: i0, type: AlarmEventSelectionListComponent, decorators: [{
             type: Component,
@@ -882,7 +881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         IconDirective,
                         NgClass,
                         C8yTranslatePipe
-                    ], 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" }]
+                    ], 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  [class.separator-top]=\"formArray.controls?.length\"\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: [{
@@ -985,13 +984,18 @@ class WidgetEventSelectorComponent {
          * - MIXED: Stores both alarms and events together
          */
         this.configStoreMode = 'ISOLATED';
+        this.eventsSignal = signal([], ...(ngDevMode ? [{ debugName: "eventsSignal" }] : []));
+        this.eventsCount = computed(() => this.eventsSignal().length, ...(ngDevMode ? [{ debugName: "eventsCount" }] : []));
         this.widgetConfigService = inject(WidgetConfigService);
         this.timelineType = 'EVENT';
+        this.noneSelectedText = gettext('None selected`event`');
     }
     ngOnInit() {
         this.events = this.getEvents();
+        this.eventsSignal.set(this.events);
     }
     onEventsChange(events) {
+        this.eventsSignal.set(events ?? []);
         this.updateEventsConfig(events ?? []);
     }
     getEvents() {
@@ -1012,7 +1016,7 @@ class WidgetEventSelectorComponent {
         return alarmOrEvents ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetEventSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WidgetEventSelectorComponent, isStandalone: true, selector: "c8y-widget-event-selector", inputs: { controlName: "controlName", configStoreMode: "configStoreMode" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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"
@@ -1022,7 +1026,19 @@ class WidgetEventSelectorComponent {
       [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 }] }); }
+
+    <c8y-widget-config-feedback>
+      <span class="tag tag--info chip text-12">
+        @if (eventsCount() === 0) {
+          {{ noneSelectedText | translate }}
+        } @else if (eventsCount() === 1) {
+          {{ '1 event' | translate }}
+        } @else {
+          {{ '{{ count }} events' | translate: { count: eventsCount() } }}
+        }
+      </span>
+    </c8y-widget-config-feedback>
+  `, 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: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetEventSelectorComponent, decorators: [{
             type: Component,
@@ -1038,10 +1054,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
       [inline]="true"
       [datapoints]="(widgetConfigService.currentConfig$ | async)?.datapoints"
     ></c8y-alarm-event-selection-list>
+
+    <c8y-widget-config-feedback>
+      <span class="tag tag--info chip text-12">
+        @if (eventsCount() === 0) {
+          {{ noneSelectedText | translate }}
+        } @else if (eventsCount() === 1) {
+          {{ '1 event' | translate }}
+        } @else {
+          {{ '{{ count }} events' | translate: { count: eventsCount() } }}
+        }
+      </span>
+    </c8y-widget-config-feedback>
   `,
                     host: { class: 'bg-level-1' },
                     standalone: true,
-                    imports: [FormsModule, AlarmEventSelectionListComponent, AsyncPipe],
+                    imports: [
+                        FormsModule,
+                        AlarmEventSelectionListComponent,
+                        AsyncPipe,
+                        WidgetConfigFeedbackComponent,
+                        C8yTranslatePipe
+                    ],
                     viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
                 }]
         }], propDecorators: { controlName: [{
@@ -1063,13 +1097,18 @@ class WidgetAlarmSelectorComponent {
          * - MIXED: Stores both alarms and events together
          */
         this.configStoreMode = 'ISOLATED';
+        this.alarmsSignal = signal([], ...(ngDevMode ? [{ debugName: "alarmsSignal" }] : []));
+        this.alarmsCount = computed(() => this.alarmsSignal().length, ...(ngDevMode ? [{ debugName: "alarmsCount" }] : []));
         this.widgetConfigService = inject(WidgetConfigService);
         this.timelineType = 'ALARM';
+        this.noneSelectedText = gettext('None selected`alarm`');
     }
     ngOnInit() {
         this.alarms = this.getAlarms();
+        this.alarmsSignal.set(this.alarms);
     }
     onAlarmsChange(alarms) {
+        this.alarmsSignal.set(alarms ?? []);
         this.updateAlarmsConfig(alarms ?? []);
     }
     getAlarms() {
@@ -1090,7 +1129,7 @@ class WidgetAlarmSelectorComponent {
         return alarmsOrEvents ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetAlarmSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WidgetAlarmSelectorComponent, isStandalone: true, selector: "c8y-widget-alarm-selector", inputs: { controlName: "controlName", configStoreMode: "configStoreMode" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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"
@@ -1100,7 +1139,19 @@ class WidgetAlarmSelectorComponent {
       [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 }] }); }
+
+    <c8y-widget-config-feedback>
+      <span class="tag tag--info chip text-12">
+        @if (alarmsCount() === 0) {
+          {{ noneSelectedText | translate }}
+        } @else if (alarmsCount() === 1) {
+          {{ '1 alarm' | translate }}
+        } @else {
+          {{ '{{ count }} alarms' | translate: { count: alarmsCount() } }}
+        }
+      </span>
+    </c8y-widget-config-feedback>
+  `, 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: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetAlarmSelectorComponent, decorators: [{
             type: Component,
@@ -1116,10 +1167,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
       [inline]="true"
       [datapoints]="(widgetConfigService.currentConfig$ | async)?.datapoints"
     ></c8y-alarm-event-selection-list>
+
+    <c8y-widget-config-feedback>
+      <span class="tag tag--info chip text-12">
+        @if (alarmsCount() === 0) {
+          {{ noneSelectedText | translate }}
+        } @else if (alarmsCount() === 1) {
+          {{ '1 alarm' | translate }}
+        } @else {
+          {{ '{{ count }} alarms' | translate: { count: alarmsCount() } }}
+        }
+      </span>
+    </c8y-widget-config-feedback>
   `,
                     host: { class: 'bg-level-1' },
                     standalone: true,
-                    imports: [FormsModule, AlarmEventSelectionListComponent, AsyncPipe],
+                    imports: [
+                        FormsModule,
+                        AlarmEventSelectionListComponent,
+                        AsyncPipe,
+                        WidgetConfigFeedbackComponent,
+                        C8yTranslatePipe
+                    ],
                     viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
                 }]
         }], propDecorators: { controlName: [{