@c8y/ngx-components 1022.27.0 → 1022.28.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2213,7 +2213,7 @@ class AlarmsTypeFilterComponent {
2213
2213
  return activeFilters.map(filter => filter.filters.type).join(',');
2214
2214
  }
2215
2215
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$3.AlarmEventSelectorService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
2216
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsTypeFilterComponent, isStandalone: true, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n <div\n class=\"dropdown\"\n title=\"{{ 'Filter by alarm types' | translate }}\"\n dropdown\n #filtersDropdown=\"bs-dropdown\"\n [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n (onHidden)=\"resetFilters()\"\n [insideClick]=\"true\"\n >\n <div class=\"input-group fit-w\">\n <div class=\"form-control d-flex a-i-center inner-scroll\">\n <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n <span\n class=\"tag tag--info chip\"\n style=\"max-width: 150px\"\n *ngFor=\"let filter of activeFilters\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"$event.stopPropagation(); deselect(filter)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': filter.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"filter.filters.type\"\n [attr.aria-label]=\"filter.filters.type\"\n >\n {{ filter.filters.type }}\n </span>\n </span>\n </ng-container>\n <ng-template #allTypes>\n <span class=\"text-nowrap\">\n {{ 'All alarm types' | translate }}\n </span>\n </ng-template>\n </div>\n <div class=\"input-group-btn input-group-btn--last text-center\">\n <button\n class=\"btn-default btn\"\n [title]=\"'Clear filters' | translate\"\n *ngIf=\"activeFilters.length\"\n (click)=\"deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn-default btn btn--caret\"\n [title]=\"'Alarm types' | translate\"\n data-cy=\"c8y-alarm-type-filter\"\n dropdownToggle\n >\n <i class=\"caret\"></i>\n </button>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropdown-menu-action-bar\"\n style=\"min-width: 250px\"\n *dropdownMenu\n >\n <div class=\"p-16 bg-level-2\">\n <div>\n <p>\n <i\n class=\"text-info m-r-4\"\n [c8yIcon]=\"'info-circle'\"\n ></i>\n <strong translate>The list below may not be complete.</strong>\n </p>\n <p translate>\n Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n add a custom alarm.\n </p>\n </div>\n </div>\n <c8y-list-group>\n <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n <input\n class=\"form-control\"\n type=\"text\"\n [placeholder]=\"'Custom alarm type' | translate\"\n [(ngModel)]=\"customAlarmTypeInput\"\n (keydown)=\"confirmWithEnter($event)\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot text-primary\"\n [attr.aria-label]=\"'Add custom alarm' | translate\"\n [tooltip]=\"'Add' | translate\"\n placement=\"top\"\n [delay]=\"500\"\n (click)=\"addCustomAlarmType()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n </div>\n\n <c8y-li\n class=\"c8y-list__item__collapse--container-small cdk-drag\"\n style=\"cursor: pointer\"\n *ngFor=\"let alarmType of possibleFilters\"\n (click)=\"toggleAlarmType(alarmType)\"\n >\n <c8y-li-checkbox\n class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n [selected]=\"alarmType.__active\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n ></c8y-li-checkbox>\n <div class=\"d-flex a-i-center p-l-4\">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n <span\n class=\"circle-icon-wrapper\"\n [ngStyle]=\"{ 'background-color': alarmType.color }\"\n >\n <i\n class=\"stroked-icon\"\n [c8yIcon]=\"'bell'\"\n ></i>\n </span>\n </div>\n </div>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"alarmType.label\"\n [attr.aria-label]=\"alarmType.label\"\n >\n {{ alarmType.label }}\n </span>\n <button\n class=\"btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Remove' | translate\"\n tooltip=\"'Remove' | translate\"\n placement=\"top\"\n *ngIf=\"alarmType.__target === null\"\n [delay]=\"500\"\n (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </c8y-li>\n <c8y-li *ngIf=\"possibleFilters.length === 0\">\n <c8y-ui-empty-state\n class=\"p-t-8\"\n icon=\"c8y-alarm\"\n [title]=\"'No alarm found' | translate\"\n [subtitle]=\"\n 'There is no alarm to filter. You can still add a custom alarm.' | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-li>\n <div class=\"sticky-bottom p-16\">\n <button\n class=\"btn btn-block btn-primary\"\n [disabled]=\"possibleFilters.length === 0\"\n (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n translate\n >\n Apply\n </button>\n </div>\n </c8y-list-group>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
2216
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsTypeFilterComponent, isStandalone: true, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n <div\n class=\"dropdown\"\n title=\"{{ 'Filter by alarm types' | translate }}\"\n dropdown\n #filtersDropdown=\"bs-dropdown\"\n [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n (onHidden)=\"resetFilters()\"\n [insideClick]=\"true\"\n >\n <div class=\"input-group fit-w\">\n <div class=\"form-control d-flex a-i-center inner-scroll\">\n <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n <span\n class=\"tag tag--info chip\"\n style=\"max-width: 150px\"\n *ngFor=\"let filter of activeFilters\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"$event.stopPropagation(); deselect(filter)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': filter.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"filter.filters.type\"\n [attr.aria-label]=\"filter.filters.type\"\n >\n {{ filter.filters.type }}\n </span>\n </span>\n </ng-container>\n <ng-template #allTypes>\n <span class=\"text-nowrap\">\n {{ 'All alarm types' | translate }}\n </span>\n </ng-template>\n </div>\n <div class=\"input-group-btn input-group-btn--last text-center\">\n <button\n class=\"btn-default btn\"\n [title]=\"'Clear filters' | translate\"\n *ngIf=\"activeFilters.length\"\n (click)=\"deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn-default btn btn--caret\"\n [title]=\"'Alarm types' | translate\"\n data-cy=\"c8y-alarm-type-filter\"\n dropdownToggle\n >\n <i class=\"caret\"></i>\n </button>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropdown-menu-action-bar\"\n style=\"min-width: 250px\"\n *dropdownMenu\n >\n <div class=\"p-16 bg-level-2\">\n <div>\n <p>\n <i\n class=\"text-info m-r-4\"\n [c8yIcon]=\"'info-circle'\"\n ></i>\n <strong translate>The list below may not be complete.</strong>\n </p>\n <p translate>\n Recent alarms are displayed below. Past alarms might not be shown. Optionally you can add a custom alarm.\n </p>\n </div>\n </div>\n <c8y-list-group>\n <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n <input\n class=\"form-control\"\n type=\"text\"\n [placeholder]=\"'Custom alarm type' | translate\"\n [(ngModel)]=\"customAlarmTypeInput\"\n (keydown)=\"confirmWithEnter($event)\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot text-primary\"\n [attr.aria-label]=\"'Add custom alarm' | translate\"\n [tooltip]=\"'Add' | translate\"\n placement=\"top\"\n [delay]=\"500\"\n (click)=\"addCustomAlarmType()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n </div>\n\n <c8y-li\n class=\"c8y-list__item__collapse--container-small cdk-drag\"\n style=\"cursor: pointer\"\n *ngFor=\"let alarmType of possibleFilters\"\n (click)=\"toggleAlarmType(alarmType)\"\n >\n <c8y-li-checkbox\n class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n [selected]=\"alarmType.__active\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n ></c8y-li-checkbox>\n <div class=\"d-flex a-i-center p-l-4\">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n <span\n class=\"circle-icon-wrapper\"\n [ngStyle]=\"{ 'background-color': alarmType.color }\"\n >\n <i\n class=\"stroked-icon\"\n [c8yIcon]=\"'bell'\"\n ></i>\n </span>\n </div>\n </div>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"alarmType.label\"\n [attr.aria-label]=\"alarmType.label\"\n >\n {{ alarmType.label }}\n </span>\n <button\n class=\"btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Remove' | translate\"\n tooltip=\"'Remove' | translate\"\n placement=\"top\"\n *ngIf=\"alarmType.__target === null\"\n [delay]=\"500\"\n (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </c8y-li>\n <c8y-li *ngIf=\"possibleFilters.length === 0\">\n <c8y-ui-empty-state\n class=\"p-t-8\"\n icon=\"c8y-alarm\"\n [title]=\"'No alarm found' | translate\"\n [subtitle]=\"\n 'There is no alarm to filter. You can still add a custom alarm.' | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-li>\n <div class=\"sticky-bottom p-16\">\n <button\n class=\"btn btn-block btn-primary\"\n [disabled]=\"possibleFilters.length === 0\"\n (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n translate\n >\n Apply\n </button>\n </div>\n </c8y-list-group>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
2217
2217
  }
2218
2218
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
2219
2219
  type: Component,
@@ -2234,7 +2234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
2234
2234
  EmptyStateComponent,
2235
2235
  C8yTranslateDirective,
2236
2236
  C8yTranslatePipe
2237
- ], template: "<div class=\"d-flex a-i-center\">\n <div\n class=\"dropdown\"\n title=\"{{ 'Filter by alarm types' | translate }}\"\n dropdown\n #filtersDropdown=\"bs-dropdown\"\n [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n (onHidden)=\"resetFilters()\"\n [insideClick]=\"true\"\n >\n <div class=\"input-group fit-w\">\n <div class=\"form-control d-flex a-i-center inner-scroll\">\n <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n <span\n class=\"tag tag--info chip\"\n style=\"max-width: 150px\"\n *ngFor=\"let filter of activeFilters\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"$event.stopPropagation(); deselect(filter)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': filter.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"filter.filters.type\"\n [attr.aria-label]=\"filter.filters.type\"\n >\n {{ filter.filters.type }}\n </span>\n </span>\n </ng-container>\n <ng-template #allTypes>\n <span class=\"text-nowrap\">\n {{ 'All alarm types' | translate }}\n </span>\n </ng-template>\n </div>\n <div class=\"input-group-btn input-group-btn--last text-center\">\n <button\n class=\"btn-default btn\"\n [title]=\"'Clear filters' | translate\"\n *ngIf=\"activeFilters.length\"\n (click)=\"deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn-default btn btn--caret\"\n [title]=\"'Alarm types' | translate\"\n data-cy=\"c8y-alarm-type-filter\"\n dropdownToggle\n >\n <i class=\"caret\"></i>\n </button>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropdown-menu-action-bar\"\n style=\"min-width: 250px\"\n *dropdownMenu\n >\n <div class=\"p-16 bg-level-2\">\n <div>\n <p>\n <i\n class=\"text-info m-r-4\"\n [c8yIcon]=\"'info-circle'\"\n ></i>\n <strong translate>The list below may not be complete.</strong>\n </p>\n <p translate>\n Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n add a custom alarm.\n </p>\n </div>\n </div>\n <c8y-list-group>\n <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n <input\n class=\"form-control\"\n type=\"text\"\n [placeholder]=\"'Custom alarm type' | translate\"\n [(ngModel)]=\"customAlarmTypeInput\"\n (keydown)=\"confirmWithEnter($event)\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot text-primary\"\n [attr.aria-label]=\"'Add custom alarm' | translate\"\n [tooltip]=\"'Add' | translate\"\n placement=\"top\"\n [delay]=\"500\"\n (click)=\"addCustomAlarmType()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n </div>\n\n <c8y-li\n class=\"c8y-list__item__collapse--container-small cdk-drag\"\n style=\"cursor: pointer\"\n *ngFor=\"let alarmType of possibleFilters\"\n (click)=\"toggleAlarmType(alarmType)\"\n >\n <c8y-li-checkbox\n class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n [selected]=\"alarmType.__active\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n ></c8y-li-checkbox>\n <div class=\"d-flex a-i-center p-l-4\">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n <span\n class=\"circle-icon-wrapper\"\n [ngStyle]=\"{ 'background-color': alarmType.color }\"\n >\n <i\n class=\"stroked-icon\"\n [c8yIcon]=\"'bell'\"\n ></i>\n </span>\n </div>\n </div>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"alarmType.label\"\n [attr.aria-label]=\"alarmType.label\"\n >\n {{ alarmType.label }}\n </span>\n <button\n class=\"btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Remove' | translate\"\n tooltip=\"'Remove' | translate\"\n placement=\"top\"\n *ngIf=\"alarmType.__target === null\"\n [delay]=\"500\"\n (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </c8y-li>\n <c8y-li *ngIf=\"possibleFilters.length === 0\">\n <c8y-ui-empty-state\n class=\"p-t-8\"\n icon=\"c8y-alarm\"\n [title]=\"'No alarm found' | translate\"\n [subtitle]=\"\n 'There is no alarm to filter. You can still add a custom alarm.' | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-li>\n <div class=\"sticky-bottom p-16\">\n <button\n class=\"btn btn-block btn-primary\"\n [disabled]=\"possibleFilters.length === 0\"\n (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n translate\n >\n Apply\n </button>\n </div>\n </c8y-list-group>\n </div>\n </div>\n</div>\n" }]
2237
+ ], template: "<div class=\"d-flex a-i-center\">\n <div\n class=\"dropdown\"\n title=\"{{ 'Filter by alarm types' | translate }}\"\n dropdown\n #filtersDropdown=\"bs-dropdown\"\n [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n (onHidden)=\"resetFilters()\"\n [insideClick]=\"true\"\n >\n <div class=\"input-group fit-w\">\n <div class=\"form-control d-flex a-i-center inner-scroll\">\n <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n <span\n class=\"tag tag--info chip\"\n style=\"max-width: 150px\"\n *ngFor=\"let filter of activeFilters\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"$event.stopPropagation(); deselect(filter)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': filter.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"filter.filters.type\"\n [attr.aria-label]=\"filter.filters.type\"\n >\n {{ filter.filters.type }}\n </span>\n </span>\n </ng-container>\n <ng-template #allTypes>\n <span class=\"text-nowrap\">\n {{ 'All alarm types' | translate }}\n </span>\n </ng-template>\n </div>\n <div class=\"input-group-btn input-group-btn--last text-center\">\n <button\n class=\"btn-default btn\"\n [title]=\"'Clear filters' | translate\"\n *ngIf=\"activeFilters.length\"\n (click)=\"deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn-default btn btn--caret\"\n [title]=\"'Alarm types' | translate\"\n data-cy=\"c8y-alarm-type-filter\"\n dropdownToggle\n >\n <i class=\"caret\"></i>\n </button>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropdown-menu-action-bar\"\n style=\"min-width: 250px\"\n *dropdownMenu\n >\n <div class=\"p-16 bg-level-2\">\n <div>\n <p>\n <i\n class=\"text-info m-r-4\"\n [c8yIcon]=\"'info-circle'\"\n ></i>\n <strong translate>The list below may not be complete.</strong>\n </p>\n <p translate>\n Recent alarms are displayed below. Past alarms might not be shown. Optionally you can add a custom alarm.\n </p>\n </div>\n </div>\n <c8y-list-group>\n <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n <input\n class=\"form-control\"\n type=\"text\"\n [placeholder]=\"'Custom alarm type' | translate\"\n [(ngModel)]=\"customAlarmTypeInput\"\n (keydown)=\"confirmWithEnter($event)\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot text-primary\"\n [attr.aria-label]=\"'Add custom alarm' | translate\"\n [tooltip]=\"'Add' | translate\"\n placement=\"top\"\n [delay]=\"500\"\n (click)=\"addCustomAlarmType()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n </div>\n\n <c8y-li\n class=\"c8y-list__item__collapse--container-small cdk-drag\"\n style=\"cursor: pointer\"\n *ngFor=\"let alarmType of possibleFilters\"\n (click)=\"toggleAlarmType(alarmType)\"\n >\n <c8y-li-checkbox\n class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n [selected]=\"alarmType.__active\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n ></c8y-li-checkbox>\n <div class=\"d-flex a-i-center p-l-4\">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n <span\n class=\"circle-icon-wrapper\"\n [ngStyle]=\"{ 'background-color': alarmType.color }\"\n >\n <i\n class=\"stroked-icon\"\n [c8yIcon]=\"'bell'\"\n ></i>\n </span>\n </div>\n </div>\n <span\n class=\"text-truncate text-12 flex-grow\"\n [title]=\"alarmType.label\"\n [attr.aria-label]=\"alarmType.label\"\n >\n {{ alarmType.label }}\n </span>\n <button\n class=\"btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Remove' | translate\"\n tooltip=\"'Remove' | translate\"\n placement=\"top\"\n *ngIf=\"alarmType.__target === null\"\n [delay]=\"500\"\n (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </c8y-li>\n <c8y-li *ngIf=\"possibleFilters.length === 0\">\n <c8y-ui-empty-state\n class=\"p-t-8\"\n icon=\"c8y-alarm\"\n [title]=\"'No alarm found' | translate\"\n [subtitle]=\"\n 'There is no alarm to filter. You can still add a custom alarm.' | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-li>\n <div class=\"sticky-bottom p-16\">\n <button\n class=\"btn btn-block btn-primary\"\n [disabled]=\"possibleFilters.length === 0\"\n (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n translate\n >\n Apply\n </button>\n </div>\n </c8y-list-group>\n </div>\n </div>\n</div>\n" }]
2238
2238
  }], ctorParameters: () => [{ type: i1$3.AlarmEventSelectorService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i3.ColorService }], propDecorators: { alarms: [{
2239
2239
  type: Input
2240
2240
  }], possibleFilters: [{