@c8y/ngx-components 1021.2.0 → 1021.2.1

package/esm2022/alarm-event-selector/custom-alarm-event-form/custom-alarm-event-form.component.mjs

@@ -11,6 +11,7 @@ export class CustomAlarmEventFormComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
         this.omitProperties = {};
+        this.selectedItems = [];
         this.added = new EventEmitter();
         this.cancel = new EventEmitter();
         this.destroy$ = new Subject();
@@ -45,17 +46,19 @@ export class CustomAlarmEventFormComponent {
         return obj;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CustomAlarmEventFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CustomAlarmEventFormComponent, selector: "c8y-custom-alarm-event-form", inputs: { timelineType: "timelineType", target: "target", omitProperties: "omitProperties", 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' ? 'c8y-events' : '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  ></c8y-alarm-event-attributes-form>\n\n  <div class=\"d-flex p-t-16\">\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: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: i4.AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CustomAlarmEventFormComponent, 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' ? 'c8y-events' : '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\">\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: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: i4.AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties", "selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CustomAlarmEventFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-custom-alarm-event-form', 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' ? 'c8y-events' : '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  ></c8y-alarm-event-attributes-form>\n\n  <div class=\"d-flex p-t-16\">\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" }]
+            args: [{ selector: 'c8y-custom-alarm-event-form', 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' ? 'c8y-events' : '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\">\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" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { timelineType: [{
                 type: Input
             }], target: [{
                 type: Input
             }], omitProperties: [{
                 type: Input
+            }], selectedItems: [{
+                type: Input
             }], defaultColor: [{
                 type: Input
             }], added: [{
@@ -63,4 +66,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }], cancel: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vYWxhcm0tZXZlbnQtc2VsZWN0b3IvY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0vY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vYWxhcm0tZXZlbnQtc2VsZWN0b3IvY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0vY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUYsT0FBTyxFQUFFLFdBQVcsRUFBYSxNQUFNLGdCQUFnQixDQUFDO0FBRXhELE9BQU8sRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNELE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7OztBQU8zQyxNQUFNLE9BQU8sNkJBQTZCO0lBWXhDLFlBQW9CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBVG5DLG1CQUFjLEdBQTJCLEVBQUUsQ0FBQztRQUUzQyxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFDekMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFJcEMsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFHckMsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQztZQUN0QyxPQUFPLEVBQUUsRUFBRTtZQUNYLEtBQUssRUFBRSxFQUFFO1lBQ1QsUUFBUSxFQUFFLEVBQUU7WUFDWixRQUFRLEVBQUUsRUFBRTtTQUNiLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUM3QyxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUN4QixHQUFHLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssT0FBTyxDQUFDLEVBQzNCLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FDakIsQ0FBQztJQUNKLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUM7WUFDeEIsS0FBSyxFQUFFLElBQUksQ0FBQyxZQUFZO1lBQ3hCLFFBQVEsRUFBRSxJQUFJLENBQUMsTUFBTTtZQUNyQixPQUFPLEVBQUUsRUFBRSxZQUFZLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRTtTQUM3QyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQsR0FBRztRQUNELElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUN6QixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNoRSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM3QixDQUFDO0lBQ0gsQ0FBQztJQUVPLGtCQUFrQixDQUFDLFNBQWM7UUFDdkMsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEVBQUUsU0FBUyxDQUFDLE9BQU8sSUFBSSxFQUFFLEVBQUUsU0FBUyxDQUFDLENBQUM7UUFDbEUsT0FBTyxHQUFHLENBQUMsT0FBTyxDQUFDO1FBQ25CLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQzs4R0FuRFUsNkJBQTZCO2tHQUE3Qiw2QkFBNkIsOE9DWDFDLG8wQ0E0Q0E7OzJGRGpDYSw2QkFBNkI7a0JBSnpDLFNBQVM7K0JBQ0UsNkJBQTZCO2dGQUk5QixZQUFZO3NCQUFwQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0ksS0FBSztzQkFBZCxNQUFNO2dCQUNHLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybUJ1aWxkZXIsIEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEFsYXJtT3JFdmVudCwgT21pdFNlbGVjdG9yUHJvcGVydGllcywgVGltZWxpbmVUeXBlIH0gZnJvbSAnLi4vYWxhcm0tZXZlbnQtc2VsZWN0b3IubW9kZWwnO1xuaW1wb3J0IHsgbWFwLCBzdGFydFdpdGgsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IElJZGVudGlmaWVkIH0gZnJvbSAnQGM4eS9jbGllbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjOHktY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0nLFxuICB0ZW1wbGF0ZVVybDogJy4vY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEN1c3RvbUFsYXJtRXZlbnRGb3JtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSB0aW1lbGluZVR5cGU6IFRpbWVsaW5lVHlwZTtcbiAgQElucHV0KCkgdGFyZ2V0OiBJSWRlbnRpZmllZDtcbiAgQElucHV0KCkgb21pdFByb3BlcnRpZXM6IE9taXRTZWxlY3RvclByb3BlcnRpZXMgPSB7fTtcbiAgQElucHV0KCkgZGVmYXVsdENvbG9yOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBhZGRlZCA9IG5ldyBFdmVudEVtaXR0ZXI8QWxhcm1PckV2ZW50PigpO1xuICBAT3V0cHV0KCkgY2FuY2VsID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIGZvcm1Hcm91cDogRm9ybUdyb3VwO1xuICB2YWxpZCQ6IE9ic2VydmFibGU8Ym9vbGVhbj47XG4gIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZm9ybUJ1aWxkZXI6IEZvcm1CdWlsZGVyKSB7XG4gICAgdGhpcy5mb3JtR3JvdXAgPSB0aGlzLmZvcm1CdWlsZGVyLmdyb3VwKHtcbiAgICAgIGRldGFpbHM6IFtdLFxuICAgICAgY29sb3I6IFtdLFxuICAgICAgX19hY3RpdmU6IFtdLFxuICAgICAgX190YXJnZXQ6IFtdXG4gICAgfSk7XG5cbiAgICB0aGlzLnZhbGlkJCA9IHRoaXMuZm9ybUdyb3VwLnN0YXR1c0NoYW5nZXMucGlwZShcbiAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSxcbiAgICAgIG1hcCh2YWwgPT4gdmFsID09PSAnVkFMSUQnKSxcbiAgICAgIHN0YXJ0V2l0aChmYWxzZSlcbiAgICApO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5mb3JtR3JvdXAucGF0Y2hWYWx1ZSh7XG4gICAgICBjb2xvcjogdGhpcy5kZWZhdWx0Q29sb3IsXG4gICAgICBfX3RhcmdldDogdGhpcy50YXJnZXQsXG4gICAgICBkZXRhaWxzOiB7IHRpbWVsaW5lVHlwZTogdGhpcy50aW1lbGluZVR5cGUgfVxuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5kZXN0cm95JC5uZXh0KCk7XG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xuICB9XG5cbiAgYWRkKCkge1xuICAgIGlmICh0aGlzLmZvcm1Hcm91cC52YWxpZCkge1xuICAgICAgY29uc3QgZm9ybVZhbHVlID0gdGhpcy50cmFuc2Zvcm1Gb3JtVmFsdWUodGhpcy5mb3JtR3JvdXAudmFsdWUpO1xuICAgICAgdGhpcy5hZGRlZC5lbWl0KGZvcm1WYWx1ZSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSB0cmFuc2Zvcm1Gb3JtVmFsdWUoZm9ybVZhbHVlOiBhbnkpIHtcbiAgICBjb25zdCBvYmogPSBPYmplY3QuYXNzaWduKHt9LCBmb3JtVmFsdWUuZGV0YWlscyB8fCB7fSwgZm9ybVZhbHVlKTtcbiAgICBkZWxldGUgb2JqLmRldGFpbHM7XG4gICAgcmV0dXJuIG9iajtcbiAgfVxufVxuIiwiPGZvcm0gW2Zvcm1Hcm91cF09XCJmb3JtR3JvdXBcIiBjbGFzcz1cInAtMTZcIj5cbiAgPGRpdlxuICAgICpuZ0lmPVwiIW9taXRQcm9wZXJ0aWVzLmNvbG9yXCJcbiAgICBjbGFzcz1cImZvcm0tZ3JvdXAgZC1mbGV4IGEtaS1jZW50ZXIgZ2FwLThcIlxuICAgIFt0aXRsZV09XCInQ2hhbmdlIGNvbG9yJyB8IHRyYW5zbGF0ZVwiXG4gID5cbiAgICA8bGFiZWwgY2xhc3M9XCJtLTBcIj57eyAnQ29sb3InIHwgdHJhbnNsYXRlIH19PC9sYWJlbD5cbiAgICA8ZGl2IGNsYXNzPVwiYzh5LWNvbG9ycGlja2VyXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2M4eS1jb2xvcnBpY2tlci0tZXZlbnQnOiB0aW1lbGluZVR5cGUgPT09ICdFVkVOVCcsXG4gICAgICAgICdjOHktY29sb3JwaWNrZXItLWFsYXJtJzogdGltZWxpbmVUeXBlICE9PSAnRVZFTlQnXG4gICAgICB9XCJcbiAgICA+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cImNvbG9yXCJcbiAgICAgICAgZm9ybUNvbnRyb2xOYW1lPVwiY29sb3JcIlxuICAgICAgICAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCJcbiAgICAgIC8+XG4gICAgICA8c3BhbiBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJmb3JtR3JvdXAudmFsdWUuY29sb3JcIj5cbiAgICAgICAgPGkgW2M4eUljb25dPVwidGltZWxpbmVUeXBlID09PSAnRVZFTlQnID8gJ2M4eS1ldmVudHMnIDogJ2JlbGwnXCI+PC9pPlxuICAgICAgPC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuICA8Yzh5LWFsYXJtLWV2ZW50LWF0dHJpYnV0ZXMtZm9ybVxuICAgIGZvcm1Db250cm9sTmFtZT1cImRldGFpbHNcIlxuICAgIFt0aW1lbGluZVR5cGVdPVwidGltZWxpbmVUeXBlXCJcbiAgICBbb21pdFByb3BlcnRpZXNdPVwib21pdFByb3BlcnRpZXNcIlxuICA+PC9jOHktYWxhcm0tZXZlbnQtYXR0cmlidXRlcy1mb3JtPlxuXG4gIDxkaXYgY2xhc3M9XCJkLWZsZXggcC10LTE2XCI+XG4gICAgPGJ1dHRvbiBjbGFzcz1cImJ0biBidG4tZGVmYXVsdCBidG4tc21cIiAoY2xpY2spPVwiY2FuY2VsLmVtaXQoKVwiPlxuICAgICAge3sgJ0NhbmNlbCcgfCB0cmFuc2xhdGUgfX1cbiAgICA8L2J1dHRvbj5cbiAgICA8YnV0dG9uXG4gICAgICBjbGFzcz1cImJ0biBidG4tcHJpbWFyeSBidG4tc21cIlxuICAgICAgW2Rpc2FibGVkXT1cIih2YWxpZCQgfCBhc3luYykgPT09IGZhbHNlXCJcbiAgICAgIChjbGljayk9XCJhZGQoKVwiXG4gICAgPlxuICAgICAgPGkgYzh5SWNvbj1cInBsdXMtY2lyY2xlXCI+PC9pPlxuICAgICAge3sgJ1NlbGVjdCcgfCB0cmFuc2xhdGUgfX1cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG48L2Zvcm0+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vYWxhcm0tZXZlbnQtc2VsZWN0b3IvY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0vY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vYWxhcm0tZXZlbnQtc2VsZWN0b3IvY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0vY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUYsT0FBTyxFQUFFLFdBQVcsRUFBYSxNQUFNLGdCQUFnQixDQUFDO0FBRXhELE9BQU8sRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNELE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7OztBQU8zQyxNQUFNLE9BQU8sNkJBQTZCO0lBYXhDLFlBQW9CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBVm5DLG1CQUFjLEdBQTJCLEVBQUUsQ0FBQztRQUM1QyxrQkFBYSxHQUFtQixFQUFFLENBQUM7UUFFbEMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFnQixDQUFDO1FBQ3pDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBSXBDLGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBR3JDLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDdEMsT0FBTyxFQUFFLEVBQUU7WUFDWCxLQUFLLEVBQUUsRUFBRTtZQUNULFFBQVEsRUFBRSxFQUFFO1lBQ1osUUFBUSxFQUFFLEVBQUU7U0FDYixDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLElBQUksQ0FDN0MsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsRUFDeEIsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLE9BQU8sQ0FBQyxFQUMzQixTQUFTLENBQUMsS0FBSyxDQUFDLENBQ2pCLENBQUM7SUFDSixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDO1lBQ3hCLEtBQUssRUFBRSxJQUFJLENBQUMsWUFBWTtZQUN4QixRQUFRLEVBQUUsSUFBSSxDQUFDLE1BQU07WUFDckIsT0FBTyxFQUFFLEVBQUUsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUU7U0FDN0MsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVELEdBQUc7UUFDRCxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDekIsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDaEUsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDN0IsQ0FBQztJQUNILENBQUM7SUFFTyxrQkFBa0IsQ0FBQyxTQUFjO1FBQ3ZDLE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLFNBQVMsQ0FBQyxPQUFPLElBQUksRUFBRSxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBQ2xFLE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQztRQUNuQixPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7OEdBcERVLDZCQUE2QjtrR0FBN0IsNkJBQTZCLDhRQ1gxQywyMkNBNkNBOzsyRkRsQ2EsNkJBQTZCO2tCQUp6QyxTQUFTOytCQUNFLDZCQUE2QjtnRkFJOUIsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0ksS0FBSztzQkFBZCxNQUFNO2dCQUNHLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybUJ1aWxkZXIsIEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEFsYXJtT3JFdmVudCwgT21pdFNlbGVjdG9yUHJvcGVydGllcywgVGltZWxpbmVUeXBlIH0gZnJvbSAnLi4vYWxhcm0tZXZlbnQtc2VsZWN0b3IubW9kZWwnO1xuaW1wb3J0IHsgbWFwLCBzdGFydFdpdGgsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IElJZGVudGlmaWVkIH0gZnJvbSAnQGM4eS9jbGllbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjOHktY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0nLFxuICB0ZW1wbGF0ZVVybDogJy4vY3VzdG9tLWFsYXJtLWV2ZW50LWZvcm0uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEN1c3RvbUFsYXJtRXZlbnRGb3JtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSB0aW1lbGluZVR5cGU6IFRpbWVsaW5lVHlwZTtcbiAgQElucHV0KCkgdGFyZ2V0OiBJSWRlbnRpZmllZDtcbiAgQElucHV0KCkgb21pdFByb3BlcnRpZXM6IE9taXRTZWxlY3RvclByb3BlcnRpZXMgPSB7fTtcbiAgQElucHV0KCkgc2VsZWN0ZWRJdGVtczogQWxhcm1PckV2ZW50W10gPSBbXTtcbiAgQElucHV0KCkgZGVmYXVsdENvbG9yOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBhZGRlZCA9IG5ldyBFdmVudEVtaXR0ZXI8QWxhcm1PckV2ZW50PigpO1xuICBAT3V0cHV0KCkgY2FuY2VsID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIGZvcm1Hcm91cDogRm9ybUdyb3VwO1xuICB2YWxpZCQ6IE9ic2VydmFibGU8Ym9vbGVhbj47XG4gIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZm9ybUJ1aWxkZXI6IEZvcm1CdWlsZGVyKSB7XG4gICAgdGhpcy5mb3JtR3JvdXAgPSB0aGlzLmZvcm1CdWlsZGVyLmdyb3VwKHtcbiAgICAgIGRldGFpbHM6IFtdLFxuICAgICAgY29sb3I6IFtdLFxuICAgICAgX19hY3RpdmU6IFtdLFxuICAgICAgX190YXJnZXQ6IFtdXG4gICAgfSk7XG5cbiAgICB0aGlzLnZhbGlkJCA9IHRoaXMuZm9ybUdyb3VwLnN0YXR1c0NoYW5nZXMucGlwZShcbiAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSxcbiAgICAgIG1hcCh2YWwgPT4gdmFsID09PSAnVkFMSUQnKSxcbiAgICAgIHN0YXJ0V2l0aChmYWxzZSlcbiAgICApO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5mb3JtR3JvdXAucGF0Y2hWYWx1ZSh7XG4gICAgICBjb2xvcjogdGhpcy5kZWZhdWx0Q29sb3IsXG4gICAgICBfX3RhcmdldDogdGhpcy50YXJnZXQsXG4gICAgICBkZXRhaWxzOiB7IHRpbWVsaW5lVHlwZTogdGhpcy50aW1lbGluZVR5cGUgfVxuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5kZXN0cm95JC5uZXh0KCk7XG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xuICB9XG5cbiAgYWRkKCkge1xuICAgIGlmICh0aGlzLmZvcm1Hcm91cC52YWxpZCkge1xuICAgICAgY29uc3QgZm9ybVZhbHVlID0gdGhpcy50cmFuc2Zvcm1Gb3JtVmFsdWUodGhpcy5mb3JtR3JvdXAudmFsdWUpO1xuICAgICAgdGhpcy5hZGRlZC5lbWl0KGZvcm1WYWx1ZSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSB0cmFuc2Zvcm1Gb3JtVmFsdWUoZm9ybVZhbHVlOiBhbnkpIHtcbiAgICBjb25zdCBvYmogPSBPYmplY3QuYXNzaWduKHt9LCBmb3JtVmFsdWUuZGV0YWlscyB8fCB7fSwgZm9ybVZhbHVlKTtcbiAgICBkZWxldGUgb2JqLmRldGFpbHM7XG4gICAgcmV0dXJuIG9iajtcbiAgfVxufVxuIiwiPGZvcm0gW2Zvcm1Hcm91cF09XCJmb3JtR3JvdXBcIiBjbGFzcz1cInAtMTZcIj5cbiAgPGRpdlxuICAgICpuZ0lmPVwiIW9taXRQcm9wZXJ0aWVzLmNvbG9yXCJcbiAgICBjbGFzcz1cImZvcm0tZ3JvdXAgZC1mbGV4IGEtaS1jZW50ZXIgZ2FwLThcIlxuICAgIFt0aXRsZV09XCInQ2hhbmdlIGNvbG9yJyB8IHRyYW5zbGF0ZVwiXG4gID5cbiAgICA8bGFiZWwgY2xhc3M9XCJtLTBcIj57eyAnQ29sb3InIHwgdHJhbnNsYXRlIH19PC9sYWJlbD5cbiAgICA8ZGl2IGNsYXNzPVwiYzh5LWNvbG9ycGlja2VyXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2M4eS1jb2xvcnBpY2tlci0tZXZlbnQnOiB0aW1lbGluZVR5cGUgPT09ICdFVkVOVCcsXG4gICAgICAgICdjOHktY29sb3JwaWNrZXItLWFsYXJtJzogdGltZWxpbmVUeXBlICE9PSAnRVZFTlQnXG4gICAgICB9XCJcbiAgICA+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cImNvbG9yXCJcbiAgICAgICAgZm9ybUNvbnRyb2xOYW1lPVwiY29sb3JcIlxuICAgICAgICAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCJcbiAgICAgIC8+XG4gICAgICA8c3BhbiBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJmb3JtR3JvdXAudmFsdWUuY29sb3JcIj5cbiAgICAgICAgPGkgW2M4eUljb25dPVwidGltZWxpbmVUeXBlID09PSAnRVZFTlQnID8gJ2M4eS1ldmVudHMnIDogJ2JlbGwnXCI+PC9pPlxuICAgICAgPC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuICA8Yzh5LWFsYXJtLWV2ZW50LWF0dHJpYnV0ZXMtZm9ybVxuICAgIGZvcm1Db250cm9sTmFtZT1cImRldGFpbHNcIlxuICAgIFt0aW1lbGluZVR5cGVdPVwidGltZWxpbmVUeXBlXCJcbiAgICBbb21pdFByb3BlcnRpZXNdPVwib21pdFByb3BlcnRpZXNcIlxuICAgIFtzZWxlY3RlZEl0ZW1zXT1cInNlbGVjdGVkSXRlbXNcIlxuICA+PC9jOHktYWxhcm0tZXZlbnQtYXR0cmlidXRlcy1mb3JtPlxuXG4gIDxkaXYgY2xhc3M9XCJkLWZsZXggcC10LTE2XCI+XG4gICAgPGJ1dHRvbiBjbGFzcz1cImJ0biBidG4tZGVmYXVsdCBidG4tc21cIiAoY2xpY2spPVwiY2FuY2VsLmVtaXQoKVwiPlxuICAgICAge3sgJ0NhbmNlbCcgfCB0cmFuc2xhdGUgfX1cbiAgICA8L2J1dHRvbj5cbiAgICA8YnV0dG9uXG4gICAgICBjbGFzcz1cImJ0biBidG4tcHJpbWFyeSBidG4tc21cIlxuICAgICAgW2Rpc2FibGVkXT1cIih2YWxpZCQgfCBhc3luYykgPT09IGZhbHNlXCJcbiAgICAgIChjbGljayk9XCJhZGQoKVwiXG4gICAgPlxuICAgICAgPGkgYzh5SWNvbj1cInBsdXMtY2lyY2xlXCI+PC9pPlxuICAgICAge3sgJ1NlbGVjdCcgfCB0cmFuc2xhdGUgfX1cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG48L2Zvcm0+XG4iXX0=

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Component, Input, Injectable, EventEmitter, Output, Pipe, Optional, ContentChild, NgModule } from '@angular/core';
+import { Injectable, forwardRef, Component, Input, EventEmitter, Output, Pipe, Optional, ContentChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { take, takeUntil, map, startWith, tap, switchMap, shareReplay, distinctUntilChanged, debounceTime } from 'rxjs/operators';
@@ -23,14 +23,42 @@ import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
+class AlarmEventAttributesFormService {
+    duplicateTypeValidator(selectedItems) {
+        return (control) => {
+            if (!control.value || !selectedItems?.length) {
+                return null;
+            }
+            const isDuplicate = selectedItems.some(item => item.filters?.type?.toLowerCase() === control.value.toLowerCase());
+            return isDuplicate ? { duplicateType: true } : null;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventAttributesFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventAttributesFormService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventAttributesFormService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class AlarmEventAttributesFormComponent {
-    constructor(formBuilder) {
+    constructor(formBuilder, alarmEventAttributesFormService) {
         this.formBuilder = formBuilder;
+        this.alarmEventAttributesFormService = alarmEventAttributesFormService;
         this.omitProperties = {};
+        this.selectedItems = [];
     }
     ngOnInit() {
         this.formGroup = this.formBuilder.group({
-            filters: this.formBuilder.group({ type: ['', [Validators.required]] }),
+            filters: this.formBuilder.group({
+                type: [
+                    '',
+                    [
+                        Validators.required,
+                        this.alarmEventAttributesFormService.duplicateTypeValidator(this.selectedItems)
+                    ]
+                ]
+            }),
             timelineType: ''
         });
         if (!this.omitProperties.label) {
@@ -52,8 +80,8 @@ class AlarmEventAttributesFormComponent {
     setDisabledState(isDisabled) {
         isDisabled ? this.formGroup.disable() : this.formGroup.enable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventAttributesFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: { timelineType: "timelineType", omitProperties: "omitProperties" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventAttributesFormComponent, deps: [{ token: i1.FormBuilder }, { token: AlarmEventAttributesFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: { timelineType: "timelineType", omitProperties: "omitProperties", selectedItems: "selectedItems" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AlarmEventAttributesFormComponent),
@@ -64,7 +92,7 @@ class AlarmEventAttributesFormComponent {
                 useExisting: forwardRef(() => AlarmEventAttributesFormComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <c8y-form-group *ngIf=\"formGroup.controls.label\">\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:\n                  timelineType === 'ALARM'\n                    ? 'Alarm unavailable'\n                    : 'Location update'\n              }\n      \"\n    />\n  </c8y-form-group>\n\n  <div formGroupName=\"filters\">\n    <c8y-form-group>\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'\n                      ? 'c8y_UnavailabilityAlarm'\n                      : 'c8y_LocationUpdate'\n                }\n        \"\n      />\n    </c8y-form-group>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <c8y-form-group *ngIf=\"formGroup.controls.label\">\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' ? 'Alarm unavailable' : 'Location update'\n              }\n      \"\n    />\n  </c8y-form-group>\n\n  <div formGroupName=\"filters\">\n    <c8y-form-group>\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</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventAttributesFormComponent, decorators: [{
             type: Component,
@@ -79,11 +107,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => AlarmEventAttributesFormComponent),
                             multi: true
                         }
-                    ], template: "<div [formGroup]=\"formGroup\">\n  <c8y-form-group *ngIf=\"formGroup.controls.label\">\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:\n                  timelineType === 'ALARM'\n                    ? 'Alarm unavailable'\n                    : 'Location update'\n              }\n      \"\n    />\n  </c8y-form-group>\n\n  <div formGroupName=\"filters\">\n    <c8y-form-group>\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'\n                      ? 'c8y_UnavailabilityAlarm'\n                      : 'c8y_LocationUpdate'\n                }\n        \"\n      />\n    </c8y-form-group>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { timelineType: [{
+                    ], template: "<div [formGroup]=\"formGroup\">\n  <c8y-form-group *ngIf=\"formGroup.controls.label\">\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' ? 'Alarm unavailable' : 'Location update'\n              }\n      \"\n    />\n  </c8y-form-group>\n\n  <div formGroupName=\"filters\">\n    <c8y-form-group>\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</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: AlarmEventAttributesFormService }], propDecorators: { timelineType: [{
                 type: Input
             }], omitProperties: [{
                 type: Input
+            }], selectedItems: [{
+                type: Input
             }] } });
 
 const EVENT_TEXTS = {
@@ -286,7 +316,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-icon\n    class=\"a-s-center p-r-4\"\n    *ngIf=\"showAddRemoveButton\"\n  >\n    <button\n      class=\"btn btn-clean text-primary\"\n      [title]=\"'Remove' | translate\"\n      *ngIf=\"isSelected\"\n      (click)=\"addOrRemoveItem()\"\n    >\n      <i\n        class=\"text-danger\"\n        c8yIcon=\"minus-circle\"\n      ></i>\n    </button>\n    <button\n      class=\"btn btn-clean text-primary\"\n      [title]=\"'Select' | translate\"\n      *ngIf=\"!isSelected\"\n      (click)=\"addOrRemoveItem()\"\n      [disabled]=\"(valid$ | async) === false\"\n    >\n      <i\n        class=\"text-primary\"\n        c8yIcon=\"plus-circle\"\n      ></i>\n    </button>\n  </c8y-li-icon>\n\n  <c8y-li-checkbox\n    class=\"a-s-center 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-4\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\"\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\"\n          [ngStyle]=\"{ 'background-color': formGroup.value.color }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            [c8yIcon]=\"timelineType === 'EVENT' ? 'c8y-events' : '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\"></i>\n    </button>\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      ></c8y-alarm-event-attributes-form>\n    </div>\n  </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { 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: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { 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: i4.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: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.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  <c8y-li-icon\n    class=\"a-s-center p-r-4\"\n    *ngIf=\"showAddRemoveButton\"\n  >\n    <button\n      class=\"btn btn-clean text-primary\"\n      [title]=\"'Remove' | translate\"\n      *ngIf=\"isSelected\"\n      (click)=\"addOrRemoveItem()\"\n    >\n      <i\n        class=\"text-danger\"\n        c8yIcon=\"minus-circle\"\n      ></i>\n    </button>\n    <button\n      class=\"btn btn-clean text-primary\"\n      [title]=\"'Select' | translate\"\n      *ngIf=\"!isSelected\"\n      (click)=\"addOrRemoveItem()\"\n      [disabled]=\"(valid$ | async) === false\"\n    >\n      <i\n        class=\"text-primary\"\n        c8yIcon=\"plus-circle\"\n      ></i>\n    </button>\n  </c8y-li-icon>\n\n  <c8y-li-checkbox\n    class=\"a-s-center 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-4\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\"\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\"\n          [ngStyle]=\"{ 'background-color': formGroup.value.color }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            [c8yIcon]=\"timelineType === 'EVENT' ? 'c8y-events' : '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\"></i>\n    </button>\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      ></c8y-alarm-event-attributes-form>\n    </div>\n  </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { 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: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { 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: i4.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: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties", "selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventSelectorListItemComponent, decorators: [{
             type: Component,
@@ -332,6 +362,7 @@ class CustomAlarmEventFormComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
         this.omitProperties = {};
+        this.selectedItems = [];
         this.added = new EventEmitter();
         this.cancel = new EventEmitter();
         this.destroy$ = new Subject();
@@ -366,17 +397,19 @@ class CustomAlarmEventFormComponent {
         return obj;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CustomAlarmEventFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CustomAlarmEventFormComponent, selector: "c8y-custom-alarm-event-form", inputs: { timelineType: "timelineType", target: "target", omitProperties: "omitProperties", 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' ? 'c8y-events' : '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  ></c8y-alarm-event-attributes-form>\n\n  <div class=\"d-flex p-t-16\">\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: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CustomAlarmEventFormComponent, 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' ? 'c8y-events' : '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\">\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: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: AlarmEventAttributesFormComponent, selector: "c8y-alarm-event-attributes-form", inputs: ["timelineType", "omitProperties", "selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CustomAlarmEventFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-custom-alarm-event-form', 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' ? 'c8y-events' : '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  ></c8y-alarm-event-attributes-form>\n\n  <div class=\"d-flex p-t-16\">\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" }]
+            args: [{ selector: 'c8y-custom-alarm-event-form', 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' ? 'c8y-events' : '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\">\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" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { timelineType: [{
                 type: Input
             }], target: [{
                 type: Input
             }], omitProperties: [{
                 type: Input
+            }], selectedItems: [{
+                type: Input
             }], defaultColor: [{
                 type: Input
             }], added: [{
@@ -503,7 +536,7 @@ class AlarmEventSelectorComponent {
                 multi: true,
                 useExisting: forwardRef(() => 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                  (click)=\"isExpanded = !isExpanded\"\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                    ></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' : 'c8y-events'\"\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: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { 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: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i5.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "directive", type: i6.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AlarmEventSelectorListItemComponent, selector: "c8y-alarm-event-selector-list-item", inputs: ["timelineType", "highlightText", "showAddRemoveButton", "isSelected", "optionToRemove", "showActiveToggle", "allowItemEdit", "hideSource", "displayAsSwitch", "omitProperties"], outputs: ["added", "removed"] }, { kind: "component", type: CustomAlarmEventFormComponent, selector: "c8y-custom-alarm-event-form", inputs: ["timelineType", "target", "omitProperties", "defaultColor"], outputs: ["added", "cancel"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesAlarmOrEventPipe, name: "includesAlarmOrEvent" }] }); }
+        ], 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                  (click)=\"isExpanded = !isExpanded\"\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' : 'c8y-events'\"\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: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { 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: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i5.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "directive", type: i6.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AlarmEventSelectorListItemComponent, selector: "c8y-alarm-event-selector-list-item", inputs: ["timelineType", "highlightText", "showAddRemoveButton", "isSelected", "optionToRemove", "showActiveToggle", "allowItemEdit", "hideSource", "displayAsSwitch", "omitProperties"], outputs: ["added", "removed"] }, { kind: "component", type: CustomAlarmEventFormComponent, selector: "c8y-custom-alarm-event-form", inputs: ["timelineType", "target", "omitProperties", "selectedItems", "defaultColor"], outputs: ["added", "cancel"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesAlarmOrEventPipe, name: "includesAlarmOrEvent" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmEventSelectorComponent, decorators: [{
             type: Component,
@@ -513,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => AlarmEventSelectorComponent)
                         }
-                    ], 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                  (click)=\"isExpanded = !isExpanded\"\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                    ></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' : 'c8y-events'\"\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" }]
+                    ], 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                  (click)=\"isExpanded = !isExpanded\"\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' : 'c8y-events'\"\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" }]
         }], ctorParameters: () => [{ type: AlarmEventSelectorService }], propDecorators: { timelineType: [{
                 type: Input
             }], contextAsset: [{