npm - @c8y/ngx-components - Versions diffs - 1021.49.12 → 1021.51.1 - Mend

@c8y/ngx-components 1021.49.12 → 1021.51.1

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.

Files changed (183) hide show

package/fesm2022/c8y-ngx-components-alarms.mjs CHANGED Viewed

@@ -1979,11 +1979,11 @@ class AlarmsTypeFilterComponent {
         return activeFilters.map(filter => filter.filters.type).join(',');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$3.AlarmEventSelectorService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsTypeFilterComponent, 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            *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            {{ filter.filters.type }}\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=\"max-width: unset; 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 tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\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            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\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 class=\"text-truncate text-12 flex-grow\">\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: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsTypeFilterComponent, 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            *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            {{ filter.filters.type }}\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=\"max-width: unset; 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 tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\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            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\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 class=\"text-truncate text-12 flex-grow\">\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: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-type-filter', 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            *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            {{ filter.filters.type }}\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=\"max-width: unset; 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 tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\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            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\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 class=\"text-truncate text-12 flex-grow\">\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" }]
+            args: [{ selector: 'c8y-alarms-type-filter', 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            *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            {{ filter.filters.type }}\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=\"max-width: unset; 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 tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\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            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\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 class=\"text-truncate text-12 flex-grow\">\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" }]
         }], ctorParameters: () => [{ type: i1$3.AlarmEventSelectorService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i3.ColorService }], propDecorators: { alarms: [{
                 type: Input
             }], possibleFilters: [{