@c8y/ngx-components 1023.76.0 → 1023.78.1

package/fesm2022/c8y-ngx-components-widgets-implementations-alarms.mjs

@@ -384,10 +384,10 @@ class AlarmWidgetService {
     buildOrderParameters(orderParams) {
         return `$orderby=${orderParams.join(',')}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmWidgetService, deps: [{ token: i1.AlarmsViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmWidgetService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmWidgetService, deps: [{ token: i1.AlarmsViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmWidgetService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmWidgetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmWidgetService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.AlarmsViewService }] });
@@ -421,10 +421,10 @@ class SeverityIconPipe {
             c8yIcon: severityClassName
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SeverityIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SeverityIconPipe, isStandalone: true, name: "severityIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SeverityIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SeverityIconPipe, isStandalone: true, name: "severityIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SeverityIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SeverityIconPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'severityIcon' }]
         }] });
@@ -444,10 +444,10 @@ class SortingDescriptionPopoverMessagePipe {
                 return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, isStandalone: true, name: "sortingDescriptionPopoverMessage" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, isStandalone: true, name: "sortingDescriptionPopoverMessage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SortingDescriptionPopoverMessagePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'sortingDescriptionPopoverMessage' }]
         }] });
@@ -619,10 +619,10 @@ class AlarmListWidgetConfigComponent {
             typesControl.push(this.formBuilder.control(''));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i4.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AlarmListWidgetConfigComponent, isStandalone: true, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: true }], ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n@if (formGroup) {\n  <form\n    class=\"row d-flex flex-wrap\"\n    [formGroup]=\"formGroup\"\n  >\n    <div class=\"col-md-6\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          @for (order of orderList; track order; let i = $index) {\n            <div\n              class=\"d-flex p-b-8 p-t-4 a-i-center\"\n              data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n            >\n              <label\n                class=\"c8y-radio gap-4\"\n                title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n              >\n                <input\n                  type=\"radio\"\n                  [value]=\"order\"\n                  formControlName=\"order\"\n                />\n                <span class=\"a-s-center\"></span>\n                <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n              </label>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"severities\"\n      >\n        <legend>{{ 'Severities' | translate }}</legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.severities.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.severities.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n        >\n          @for (severityOption of severityList; track severityOption) {\n            <label\n              class=\"c8y-checkbox m-t-0 gap-4\"\n              [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n            >\n              <input\n                type=\"checkbox\"\n                [formControlName]=\"severityOption\"\n                [name]=\"severityOption\"\n              />\n              <span class=\"a-s-center\"></span>\n              @let severityIcon = severityOption | severityIcon;\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}\"\n                [c8yIcon]=\"severityIcon.c8yIcon\"\n              ></i>\n              <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n            </label>\n          }\n          <c8y-messages>\n            @if (formGroup.controls.severities.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one severity.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n      @if (showDateFilter) {\n        <fieldset class=\"c8y-fieldset\">\n          <legend>{{ 'Date filter' | translate }}</legend>\n          <c8y-form-group class=\"m-b-8\">\n            <c8y-alarms-date-filter\n              [updateQueryParams]=\"false\"\n              [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n              formControlName=\"dateFilter\"\n              (dateFilterChange)=\"onDateFilterChange($event)\"\n            ></c8y-alarms-date-filter>\n          </c8y-form-group>\n        </fieldset>\n      }\n    </div>\n\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"status\"\n      >\n        <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n          {{ 'Status' | translate }}\n        </legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.status.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.status.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n        >\n          @for (statusOption of statusList; track statusOption) {\n            <label\n              class=\"c8y-checkbox m-t-0 gap-4\"\n              [title]=\"STATUS_LABELS[statusOption] | translate\"\n            >\n              <input\n                type=\"checkbox\"\n                [formControlName]=\"statusOption\"\n                [name]=\"statusOption\"\n              />\n              <span class=\"a-s-center\"></span>\n              <i\n                class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n                [c8yIcon]=\"\n                  statusOption === CLEARED_STATUS_VALUE\n                    ? C8Y_ALERT_IDLE_ICON\n                    : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                      ? BELL_SLASH_ICON\n                      : BELL_ICON\n                \"\n              ></i>\n              <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n            </label>\n          }\n          <c8y-messages>\n            @if (formGroup.controls.status.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one status.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n      >\n        <legend>{{ 'Child devices' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <label\n            class=\"c8y-switch\"\n            [title]=\"'Show alarms from child devices' | translate\"\n            data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n          >\n            <input\n              type=\"checkbox\"\n              formControlName=\"showAlarmsForChildren\"\n              data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n            />\n            <span></span>\n            <span>{{ 'Show alarms' | translate }}</span>\n            <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n\n    <div class=\"col-xs-12\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Types' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8\"\n          formArrayName=\"types\"\n        >\n          @for (type of types.controls; track type; let i = $index) {\n            <div\n              class=\"input-group m-b-4\"\n              data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n            >\n              <input\n                class=\"form-control\"\n                type=\"text\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n                [formControlName]=\"i\"\n              />\n              <div class=\"input-group-btn\">\n                <button\n                  class=\"btn-dot btn-dot--danger m-l-auto\"\n                  [title]=\"'Remove' | translate\"\n                  type=\"button\"\n                  (click)=\"removeType(i)\"\n                  data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n                  [disabled]=\"types.controls?.length === 1 && !type.value\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              </div>\n              @if (i === types.controls.length - 1) {\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn-dot btn-dot--primary m-l-auto\"\n                    [title]=\"'Add alarm type' | translate\"\n                    type=\"button\"\n                    (click)=\"addType()\"\n                    data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n                  >\n                    <i c8yIcon=\"plus-circle\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </form>\n}\n\n<ng-template #alarmListPreview>\n  @if ((config$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(config$ | async)?.displayMode\"\n      [config]=\"config$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInPreviewMode]=\"true\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i4.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AlarmListWidgetConfigComponent, isStandalone: true, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: true }], ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n@if (formGroup) {\n  <form\n    class=\"row d-flex flex-wrap\"\n    [formGroup]=\"formGroup\"\n  >\n    <div class=\"col-md-6\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          @for (order of orderList; track order; let i = $index) {\n            <div\n              class=\"d-flex p-b-8 p-t-4 a-i-center\"\n              data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n            >\n              <label\n                class=\"c8y-radio gap-4\"\n                title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n              >\n                <input\n                  type=\"radio\"\n                  [value]=\"order\"\n                  formControlName=\"order\"\n                />\n                <span class=\"a-s-center\"></span>\n                <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n              </label>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"severities\"\n      >\n        <legend>{{ 'Severities' | translate }}</legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.severities.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.severities.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n        >\n          @for (severityOption of severityList; track severityOption) {\n            <label\n              class=\"c8y-checkbox m-t-0 gap-4\"\n              [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n            >\n              <input\n                type=\"checkbox\"\n                [formControlName]=\"severityOption\"\n                [name]=\"severityOption\"\n              />\n              <span class=\"a-s-center\"></span>\n              @let severityIcon = severityOption | severityIcon;\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}\"\n                [c8yIcon]=\"severityIcon.c8yIcon\"\n              ></i>\n              <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n            </label>\n          }\n          <c8y-messages>\n            @if (formGroup.controls.severities.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one severity.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n      @if (showDateFilter) {\n        <fieldset class=\"c8y-fieldset\">\n          <legend>{{ 'Date filter' | translate }}</legend>\n          <c8y-form-group class=\"m-b-8\">\n            <c8y-alarms-date-filter\n              [updateQueryParams]=\"false\"\n              [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n              formControlName=\"dateFilter\"\n              (dateFilterChange)=\"onDateFilterChange($event)\"\n            ></c8y-alarms-date-filter>\n          </c8y-form-group>\n        </fieldset>\n      }\n    </div>\n\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"status\"\n      >\n        <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n          {{ 'Status' | translate }}\n        </legend>\n        <c8y-form-group\n          [hasError]=\"formGroup.controls.status.hasError('required')\"\n          [ngClass]=\"{\n            'm-b-8': !formGroup.controls.status.hasError('required')\n          }\"\n          data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n        >\n          @for (statusOption of statusList; track statusOption) {\n            <label\n              class=\"c8y-checkbox m-t-0 gap-4\"\n              [title]=\"STATUS_LABELS[statusOption] | translate\"\n            >\n              <input\n                type=\"checkbox\"\n                [formControlName]=\"statusOption\"\n                [name]=\"statusOption\"\n              />\n              <span class=\"a-s-center\"></span>\n              <i\n                class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n                [c8yIcon]=\"\n                  statusOption === CLEARED_STATUS_VALUE\n                    ? C8Y_ALERT_IDLE_ICON\n                    : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                      ? BELL_SLASH_ICON\n                      : BELL_ICON\n                \"\n              ></i>\n              <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n            </label>\n          }\n          <c8y-messages>\n            @if (formGroup.controls.status.hasError('required')) {\n              <c8y-message>\n                {{ 'Select at least one status.' | translate }}\n              </c8y-message>\n            }\n          </c8y-messages>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n    <div class=\"col-md-6 col-xs-12\">\n      <fieldset\n        class=\"c8y-fieldset\"\n        data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n      >\n        <legend>{{ 'Child devices' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <label\n            class=\"c8y-switch\"\n            [title]=\"'Show alarms from child devices' | translate\"\n            data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n          >\n            <input\n              type=\"checkbox\"\n              formControlName=\"showAlarmsForChildren\"\n              data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n            />\n            <span></span>\n            <span>{{ 'Show alarms' | translate }}</span>\n            <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n\n    <div class=\"col-xs-12\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Types' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8\"\n          formArrayName=\"types\"\n        >\n          @for (type of types.controls; track type; let i = $index) {\n            <div\n              class=\"input-group m-b-4\"\n              data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n            >\n              <input\n                class=\"form-control\"\n                type=\"text\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n                [formControlName]=\"i\"\n              />\n              <div class=\"input-group-btn\">\n                <button\n                  class=\"btn-dot btn-dot--danger m-l-auto\"\n                  [title]=\"'Remove' | translate\"\n                  type=\"button\"\n                  (click)=\"removeType(i)\"\n                  data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n                  [disabled]=\"types.controls?.length === 1 && !type.value\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              </div>\n              @if (i === types.controls.length - 1) {\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn-dot btn-dot--primary m-l-auto\"\n                    [title]=\"'Add alarm type' | translate\"\n                    type=\"button\"\n                    (click)=\"addType()\"\n                    data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n                  >\n                    <i c8yIcon=\"plus-circle\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </form>\n}\n\n<ng-template #alarmListPreview>\n  @if ((config$ | async)?.displayMode !== 'dashboard') {\n    <c8y-local-controls\n      [controls]=\"controls\"\n      [displayMode]=\"(config$ | async)?.displayMode\"\n      [config]=\"config$ | async\"\n      [disabled]=\"true\"\n    ></c8y-local-controls>\n  }\n  <c8y-alarms-list\n    [alarms]=\"alarms$ | async\"\n    [isInPreviewMode]=\"true\"\n    [isInitialLoading]=\"isLoading\"\n    [navigationOptions]=\"{\n      allowNavigationToAlarmsView: false,\n      alwaysNavigateToAllAlarms: false,\n      includeClearedQueryParams: false,\n      queryParamsHandling: 'merge'\n    }\"\n    data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n  ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmListWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmListWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-list-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
                         FormsModule,
@@ -686,12 +686,12 @@ class AlarmListWidgetComponent {
     }
     onContextChange(event) {
         const { diff, context } = event;
+        this.contextConfig.set(context);
         if (diff.isAutoRefreshEnabled === false &&
             Object.keys(diff).length === 1 &&
             context.refreshOption === REFRESH_OPTION.LIVE) {
             return;
         }
-        this.contextConfig.set(event.context);
         void this.fetchAlarms();
     }
     getDashboardChild() {
@@ -760,6 +760,9 @@ class AlarmListWidgetComponent {
         });
     }
     async fetchAlarms() {
+        if (!this.hasPermissions) {
+            return;
+        }
         const alarms = await this.getAlarms();
         this.alarms$.next(alarms);
     }
@@ -773,16 +776,16 @@ class AlarmListWidgetComponent {
             return await this.alarmService.list(this.alarmWidgetService.mapConfigToQueryFilter(effectiveConfig));
         }
         catch (error) {
-            if (error?.res?.status === 403) {
-                this.hasPermissions = false;
-                return;
-            }
             this.alerts.addAlerts(new DynamicComponentAlert({
                 type: 'warning',
                 text: error?.name === 'TimeoutError'
                     ? this.TIMEOUT_ERROR_TEXT
                     : (error?.message ?? this.SERVER_ERROR_TEXT)
             }));
+            if (error?.res?.status === 403) {
+                this.hasPermissions = false;
+                return;
+            }
             this.alertService.addServerFailure(error);
         }
         finally {
@@ -800,10 +803,10 @@ class AlarmListWidgetComponent {
             Object.assign(this.config, predefinedConfig);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmListWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AlarmListWidgetComponent, isStandalone: true, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"hasPermissions\"\n  (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh"], outputs: ["configChange", "refresh"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmListWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AlarmListWidgetComponent, isStandalone: true, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"hasPermissions\"\n  (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh"], outputs: ["configChange", "refresh"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmListWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmListWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], imports: [AlarmsListComponent, AsyncPipe, LocalControlsComponent, GlobalContextConnectorComponent], template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [isLoading]=\"isLoading$ | async\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"hasPermissions\"\n  (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n" }]
         }], propDecorators: { config: [{
@@ -811,8 +814,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 class AlarmsWidgetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmsWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: AlarmsWidgetModule, imports: [AlarmsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmsWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AlarmsWidgetModule, imports: [AlarmsModule,
             CommonModule,
             CountdownIntervalModule,
             DocsModule,
@@ -829,7 +832,7 @@ class AlarmsWidgetModule {
             GlobalContextInlineComponent,
             ConfigContextSelectorComponent,
             GlobalContextWidgetWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmsWidgetModule, imports: [AlarmsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmsWidgetModule, imports: [AlarmsModule,
             CommonModule,
             CountdownIntervalModule,
             DocsModule,
@@ -847,7 +850,7 @@ class AlarmsWidgetModule {
             ConfigContextSelectorComponent,
             GlobalContextWidgetWrapperComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlarmsWidgetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlarmsWidgetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [