@c8y/ngx-components 1024.2.4 → 1024.5.1

package/fesm2022/c8y-ngx-components-protocol-opcua.mjs

@@ -6,11 +6,11 @@ import { BehaviorSubject, merge, Subject, debounceTime } from 'rxjs';
 import { omit, isEmpty, some, isEqual, reject, isNil, get, assign, cloneDeep, unset as unset$1, set as set$1, find, findIndex, pick, has } from 'lodash-es';
 import { NgClass, NgFor, NgIf, JsonPipe, KeyValuePipe } from '@angular/common';
 import * as i2$1 from '@c8y/ngx-components';
-import { C8yTranslatePipe, IconDirective, LoadingComponent, C8yTranslateDirective, FormGroupComponent, SelectLegacyComponent, ListItemComponent, FilterInputComponent, ListItemBodyComponent, ListItemCheckboxComponent, InputGroupListContainerDirective, InputGroupListComponent, RequiredInputPlaceholderDirective, MinValidationDirective, DatePipe, MessagesComponent, MessageDirective, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, EmptyStateComponent, Status, DeviceStatusComponent, DefaultValidationDirective, DropAreaComponent, ViewContext, CoreModule, FormsModule as FormsModule$1, DropAreaModule, DeviceStatusModule, DynamicFormsModule, hookRoute } from '@c8y/ngx-components';
+import { C8yTranslatePipe, IconDirective, LoadingComponent, C8yTranslateDirective, FormGroupComponent, SelectLegacyComponent, ListItemComponent, FilterInputComponent, ListItemBodyComponent, ListItemCheckboxComponent, InputGroupListContainerDirective, InputGroupListComponent, RequiredInputPlaceholderDirective, MinValidationDirective, InputGroupEditableComponent, DatePipe, MessagesComponent, MessageDirective, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, EmptyStateComponent, Status, DeviceStatusComponent, DefaultValidationDirective, DropAreaComponent, ViewContext, CoreModule, FormsModule as FormsModule$1, DropAreaModule, DeviceStatusModule, DynamicFormsModule, hookRoute } from '@c8y/ngx-components';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2$2 from '@angular/forms';
-import { NG_VALIDATORS, FormsModule, NgModelGroup, ControlContainer, NgForm, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALIDATORS, FormsModule, NgModelGroup, ControlContainer, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { NestedTreeControl, CdkTree, CdkTreeNodeDef, CdkNestedTreeNode, CdkTreeNodeToggle, CdkTreeNodeOutlet, CdkTreeModule } from '@angular/cdk/tree';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { gettext } from '@c8y/ngx-components/gettext';
@@ -1145,20 +1145,20 @@ class OpcuaDeviceProtocolDescription {
         this._model.enabled = data !== '0' ? true : false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: OpcuaDeviceProtocolDescription, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: OpcuaDeviceProtocolDescription, isStandalone: true, selector: "opcua-device-protocol-description", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24\">\n  <div class=\"content-flex-70\">\n    <div class=\"text-center\">\n      <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-protocols\"></i>\n      <p>\n        <small class=\"label label-info\">{{ _model.fieldbusType }}</small>\n      </p>\n    </div>\n    <div class=\"flex-grow col-10\">\n      <div class=\"content-flex-80\">\n        <div class=\"col-9\">\n          <div class=\"form-group form-group-lg m-b-0\">\n            <label class=\"sr-only\" translate>Name</label>\n            <label class=\"editable\" [ngClass]=\"{ updated: ctrlName.dirty }\">\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"name\"\n                #ctrlName=\"ngModel\"\n                [(ngModel)]=\"_model.name\"\n                style=\"max-width:calc( {{ _model.name.length || 10 }} * 1ch + 14px)\"\n              />\n            </label>\n          </div>\n          <div class=\"form-group\">\n            <label class=\"sr-only\" translate>Description</label>\n            <label class=\"editable\" [ngClass]=\"{ updated: ctrlDescription.dirty }\">\n              <textarea\n                class=\"form-control\"\n                rows=\"1\"\n                name=\"description\"\n                placeholder=\"{{ 'e.g. My protocol description' | translate }}\"\n                #ctrlDescription=\"ngModel\"\n                [(ngModel)]=\"_model.description\"\n                style=\"max-width:calc( {{ _model.description?.length || 25 }} * 1ch + 14px)\"\n              ></textarea>\n              <span *ngIf=\"_model.description\">\n                {{ _model.description }}\n              </span>\n            </label>\n          </div>\n          <div class=\"d-flex\">\n            <div>\n              <button\n                type=\"button\"\n                class=\"btn\"\n                name=\"autoScanAddressSpace\"\n                [(ngModel)]=\"autoScan\"\n                (ngModelChange)=\"setAutoScanOption($event)\"\n                btnCheckbox\n                btnCheckboxTrue=\"1\"\n                btnCheckboxFalse=\"0\"\n                ngDefaultControl\n              >\n                <i *ngIf=\"autoScan === '1'\" c8yIcon=\"check\" class=\"text-success\"></i>\n                <span *ngIf=\"autoScan === '1'\">\n                  {{ 'Active`auto scanning`' | translate }}\n                </span>\n\n                <i *ngIf=\"autoScan === '0'\" c8yIcon=\"ban\" class=\"text-danger\"></i>\n                <span *ngIf=\"autoScan === '0'\">\n                  {{ 'Inactive`auto scanning`' | translate }}\n                </span>\n              </button>\n            </div>\n            <small class=\"m-l-16 text-muted\">\n              {{\n                'When active, the gateway scans the address space of all servers and automatically applies this device protocol to all nodes matching the criteria.'\n                  | translate\n              }}\n            </small>\n          </div>\n        </div>\n        <div class=\"flex-grow\">\n          <ul class=\"list-unstyled small\">\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>ID</label>\n              <span class=\"m-l-auto\">{{ _model.id }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Date created</label>\n              <span class=\"m-l-auto\">{{ _model.creationTime | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Last update</label>\n              <span class=\"m-l-auto\">{{ _model.lastUpdated | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Fieldbus version</label>\n              <span class=\"m-l-auto\">{{ _model.fieldbusVersion }}</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: OpcuaDeviceProtocolDescription, isStandalone: true, selector: "opcua-device-protocol-description", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24\">\n  <div class=\"content-flex-70\">\n    <div class=\"text-center\">\n      <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-protocols\"></i>\n      <p>\n        <small class=\"label label-info\">{{ _model.fieldbusType }}</small>\n      </p>\n    </div>\n    <div class=\"flex-grow col-10\">\n      <div class=\"content-flex-80\">\n        <div class=\"col-9\">\n          <div class=\"form-group form-group-lg m-b-16\">\n            <label\n              class=\"sr-only\"\n              translate\n              >Name</label\n            >\n            <c8y-input-group-editable\n              size=\"lg\"\n              formGroupClass=\"m-b-0\"\n              [ariaLabel]=\"'Protocol name' | translate\"\n              [noSaveButton]=\"true\"\n              [(ngModel)]=\"_model.name\"\n              data-cy=\"name-input\"\n            ></c8y-input-group-editable>\n          </div>\n          <div class=\"form-group m-b-16\">\n            <label\n              class=\"sr-only\"\n              translate\n              >Description</label\n            >\n            <c8y-input-group-editable\n              name=\"description\"\n              [multiline]=\"true\"\n              maxHeight=\"150px\"\n              formGroupClass=\"m-b-0\"\n              [ariaLabel]=\"'Protocol description' | translate\"\n              [placeholder]=\"'e.g. My protocol description' | translate\"\n              [noSaveButton]=\"true\"\n              [(ngModel)]=\"_model.description\"\n              data-cy=\"description-input\"\n            ></c8y-input-group-editable>\n          </div>\n          <div class=\"d-flex m-t-8\">\n            <div>\n              <button\n                class=\"btn\"\n                name=\"autoScanAddressSpace\"\n                type=\"button\"\n                [(ngModel)]=\"autoScan\"\n                (ngModelChange)=\"setAutoScanOption($event)\"\n                btnCheckbox\n                btnCheckboxTrue=\"1\"\n                btnCheckboxFalse=\"0\"\n                ngDefaultControl\n              >\n                @if (autoScan === '1') {\n                  <i\n                    class=\"text-success\"\n                    c8yIcon=\"check\"\n                  ></i>\n                  <span>{{ 'Active`auto scanning`' | translate }}</span>\n                }\n                @if (autoScan === '0') {\n                  <i\n                    class=\"text-danger\"\n                    c8yIcon=\"ban\"\n                  ></i>\n                  <span>{{ 'Inactive`auto scanning`' | translate }}</span>\n                }\n              </button>\n            </div>\n            <small class=\"m-l-16 text-muted\">\n              {{\n                'When active, the gateway scans the address space of all servers and automatically applies this device protocol to all nodes matching the criteria.'\n                  | translate\n              }}\n            </small>\n          </div>\n        </div>\n        <div class=\"flex-grow\">\n          <ul class=\"list-unstyled small\">\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >ID</label\n              >\n              <span class=\"m-l-auto\">{{ _model.id }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >Date created</label\n              >\n              <span class=\"m-l-auto\">{{ _model.creationTime | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >Last update</label\n              >\n              <span class=\"m-l-auto\">{{ _model.lastUpdated | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >Fieldbus version</label\n              >\n              <span class=\"m-l-auto\">{{ _model.fieldbusVersion }}</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete"], outputs: ["save", "cancel"] }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: OpcuaDeviceProtocolDescription, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-device-protocol-description', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+            args: [{ selector: 'opcua-device-protocol-description', imports: [
                         C8yTranslateDirective,
                         NgClass,
                         FormsModule,
-                        NgIf,
+                        InputGroupEditableComponent,
                         ButtonCheckboxDirective,
                         IconDirective,
                         C8yTranslatePipe,
                         DatePipe
-                    ], template: "<div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24\">\n  <div class=\"content-flex-70\">\n    <div class=\"text-center\">\n      <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-protocols\"></i>\n      <p>\n        <small class=\"label label-info\">{{ _model.fieldbusType }}</small>\n      </p>\n    </div>\n    <div class=\"flex-grow col-10\">\n      <div class=\"content-flex-80\">\n        <div class=\"col-9\">\n          <div class=\"form-group form-group-lg m-b-0\">\n            <label class=\"sr-only\" translate>Name</label>\n            <label class=\"editable\" [ngClass]=\"{ updated: ctrlName.dirty }\">\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"name\"\n                #ctrlName=\"ngModel\"\n                [(ngModel)]=\"_model.name\"\n                style=\"max-width:calc( {{ _model.name.length || 10 }} * 1ch + 14px)\"\n              />\n            </label>\n          </div>\n          <div class=\"form-group\">\n            <label class=\"sr-only\" translate>Description</label>\n            <label class=\"editable\" [ngClass]=\"{ updated: ctrlDescription.dirty }\">\n              <textarea\n                class=\"form-control\"\n                rows=\"1\"\n                name=\"description\"\n                placeholder=\"{{ 'e.g. My protocol description' | translate }}\"\n                #ctrlDescription=\"ngModel\"\n                [(ngModel)]=\"_model.description\"\n                style=\"max-width:calc( {{ _model.description?.length || 25 }} * 1ch + 14px)\"\n              ></textarea>\n              <span *ngIf=\"_model.description\">\n                {{ _model.description }}\n              </span>\n            </label>\n          </div>\n          <div class=\"d-flex\">\n            <div>\n              <button\n                type=\"button\"\n                class=\"btn\"\n                name=\"autoScanAddressSpace\"\n                [(ngModel)]=\"autoScan\"\n                (ngModelChange)=\"setAutoScanOption($event)\"\n                btnCheckbox\n                btnCheckboxTrue=\"1\"\n                btnCheckboxFalse=\"0\"\n                ngDefaultControl\n              >\n                <i *ngIf=\"autoScan === '1'\" c8yIcon=\"check\" class=\"text-success\"></i>\n                <span *ngIf=\"autoScan === '1'\">\n                  {{ 'Active`auto scanning`' | translate }}\n                </span>\n\n                <i *ngIf=\"autoScan === '0'\" c8yIcon=\"ban\" class=\"text-danger\"></i>\n                <span *ngIf=\"autoScan === '0'\">\n                  {{ 'Inactive`auto scanning`' | translate }}\n                </span>\n              </button>\n            </div>\n            <small class=\"m-l-16 text-muted\">\n              {{\n                'When active, the gateway scans the address space of all servers and automatically applies this device protocol to all nodes matching the criteria.'\n                  | translate\n              }}\n            </small>\n          </div>\n        </div>\n        <div class=\"flex-grow\">\n          <ul class=\"list-unstyled small\">\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>ID</label>\n              <span class=\"m-l-auto\">{{ _model.id }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Date created</label>\n              <span class=\"m-l-auto\">{{ _model.creationTime | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Last update</label>\n              <span class=\"m-l-auto\">{{ _model.lastUpdated | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Fieldbus version</label>\n              <span class=\"m-l-auto\">{{ _model.fieldbusVersion }}</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24\">\n  <div class=\"content-flex-70\">\n    <div class=\"text-center\">\n      <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-protocols\"></i>\n      <p>\n        <small class=\"label label-info\">{{ _model.fieldbusType }}</small>\n      </p>\n    </div>\n    <div class=\"flex-grow col-10\">\n      <div class=\"content-flex-80\">\n        <div class=\"col-9\">\n          <div class=\"form-group form-group-lg m-b-16\">\n            <label\n              class=\"sr-only\"\n              translate\n              >Name</label\n            >\n            <c8y-input-group-editable\n              size=\"lg\"\n              formGroupClass=\"m-b-0\"\n              [ariaLabel]=\"'Protocol name' | translate\"\n              [noSaveButton]=\"true\"\n              [(ngModel)]=\"_model.name\"\n              data-cy=\"name-input\"\n            ></c8y-input-group-editable>\n          </div>\n          <div class=\"form-group m-b-16\">\n            <label\n              class=\"sr-only\"\n              translate\n              >Description</label\n            >\n            <c8y-input-group-editable\n              name=\"description\"\n              [multiline]=\"true\"\n              maxHeight=\"150px\"\n              formGroupClass=\"m-b-0\"\n              [ariaLabel]=\"'Protocol description' | translate\"\n              [placeholder]=\"'e.g. My protocol description' | translate\"\n              [noSaveButton]=\"true\"\n              [(ngModel)]=\"_model.description\"\n              data-cy=\"description-input\"\n            ></c8y-input-group-editable>\n          </div>\n          <div class=\"d-flex m-t-8\">\n            <div>\n              <button\n                class=\"btn\"\n                name=\"autoScanAddressSpace\"\n                type=\"button\"\n                [(ngModel)]=\"autoScan\"\n                (ngModelChange)=\"setAutoScanOption($event)\"\n                btnCheckbox\n                btnCheckboxTrue=\"1\"\n                btnCheckboxFalse=\"0\"\n                ngDefaultControl\n              >\n                @if (autoScan === '1') {\n                  <i\n                    class=\"text-success\"\n                    c8yIcon=\"check\"\n                  ></i>\n                  <span>{{ 'Active`auto scanning`' | translate }}</span>\n                }\n                @if (autoScan === '0') {\n                  <i\n                    class=\"text-danger\"\n                    c8yIcon=\"ban\"\n                  ></i>\n                  <span>{{ 'Inactive`auto scanning`' | translate }}</span>\n                }\n              </button>\n            </div>\n            <small class=\"m-l-16 text-muted\">\n              {{\n                'When active, the gateway scans the address space of all servers and automatically applies this device protocol to all nodes matching the criteria.'\n                  | translate\n              }}\n            </small>\n          </div>\n        </div>\n        <div class=\"flex-grow\">\n          <ul class=\"list-unstyled small\">\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >ID</label\n              >\n              <span class=\"m-l-auto\">{{ _model.id }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >Date created</label\n              >\n              <span class=\"m-l-auto\">{{ _model.creationTime | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >Last update</label\n              >\n              <span class=\"m-l-auto\">{{ _model.lastUpdated | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label\n                class=\"small m-b-0 m-r-8\"\n                translate\n                >Fieldbus version</label\n              >\n              <span class=\"m-l-auto\">{{ _model.fieldbusVersion }}</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1733,7 +1733,7 @@ class OpcuaDeviceProtocolDetailComponent {
                 this.alertService.addServerFailure({ res, data: details });
             }
         }
-        catch (ex) {
+        catch {
             this.alertService.danger(gettext('Failed to save. Try again.'));
         }
     }
@@ -1747,26 +1747,24 @@ class OpcuaDeviceProtocolDetailComponent {
         return !deviceTypeForm.form.valid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: OpcuaDeviceProtocolDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OpcuaService }, { token: i2$1.AlertService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: OpcuaDeviceProtocolDetailComponent, isStandalone: true, selector: "opcua-device-protocol-detail", viewQueries: [{ propertyName: "instanceList", predicate: OpcuaDeviceProtocolMapping, descendants: true }], ngImport: i0, template: "<c8y-title *ngIf=\"!isLoaded\">{{ model.name }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device types' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device protocols' | translate\"\n    [path]=\"'deviceprotocols'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [icon]=\"'c8y-device-protocols'\" [label]=\"model?.name\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <form #deviceTypeForm=\"ngForm\" name=\"detailForm\" *ngIf=\"!isLoaded\" class=\"card card--fullpage\">\n      <opcua-device-protocol-description [model]=\"model\"></opcua-device-protocol-description>\n      <div class=\"inner-scroll\">\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n            <div class=\"h4\" translate>Variables</div>\n          </div>\n          <div class=\"p-l-16 p-r-16\">\n            <div class=\"c8y-list__group\" *ngIf=\"model.mappings.length > 0\" ngModelGroup=\"variable\">\n              <opcua-device-protocol-mapping\n                *ngFor=\"let resource of getMapping(); index as i; trackBy: trackById\"\n                [index]=\"i\"\n                [referencedServerId]=\"model.referencedServerId\"\n                [referencedRootNodeId]=\"model.referencedRootNodeId\"\n                [resource]=\"getStructuredResource(resource)\"\n                [getParentAttr]=\"getParentAttr\"\n                (onAction)=\"actionHandler($event)\"\n              ></opcua-device-protocol-mapping>\n            </div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16\">\n            <c8y-ui-empty-state\n              *ngIf=\"model.mappings.length === 0\"\n              [icon]=\"'sliders'\"\n              [title]=\"'No variables to display.' | translate\"\n              [subtitle]=\"'Click below to add your first variable.' | translate\"\n            ></c8y-ui-empty-state>\n\n            <div class=\"card-footer\">\n              <button\n                type=\"button\"\n                title=\"{{ 'Add variable' | translate }}\"\n                class=\"btn btn-default addVariableBtn\"\n                (click)=\"addVariable()\"\n              >\n                <i c8yIcon=\"plus-circle\"></i>\n                {{ 'Add variable' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n            <div class=\"h4\" translate>Data reporting</div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16\" ngModelGroup=\"subscription\">\n            <opcua-device-protocol-data-reporting\n              [groupName]=\"'subscription'\"\n              [model]=\"model\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom sticky-top\">\n            <div class=\"h4\" translate>Auto apply constraints</div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16 overflow-visible\" ngModelGroup=\"autoApply\">\n            <opcua-auto-apply [model]=\"model\"></opcua-auto-apply>\n          </div>\n        </div>\n\n        <div class=\"card-footer sticky-bottom separator\" style=\"z-index: 101\">\n          <button\n            title=\"{{ 'Save' | translate }}\"\n            id=\"deviceTypeSave\"\n            class=\"btn btn-primary\"\n            (click)=\"save()\"\n            [disabled]=\"canSave(deviceTypeForm)\"\n            type=\"button\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: OpcuaDeviceProtocolDescription, selector: "opcua-device-protocol-description", inputs: ["model"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OpcuaDeviceProtocolMapping, selector: "opcua-device-protocol-mapping", inputs: ["resource", "index", "getParentAttr", "referencedServerId", "referencedRootNodeId"], outputs: ["onAction"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "component", type: OpcuaAutoApplySettingsComponent, selector: "opcua-auto-apply", inputs: ["model"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: OpcuaDeviceProtocolDetailComponent, isStandalone: true, selector: "opcua-device-protocol-detail", viewQueries: [{ propertyName: "instanceList", predicate: OpcuaDeviceProtocolMapping, descendants: true }], ngImport: i0, template: "@if (!isLoaded) {\n  <c8y-title>{{ model.name }}</c8y-title>\n}\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device types' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device protocols' | translate\"\n    [path]=\"'deviceprotocols'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"model?.name\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    @if (!isLoaded) {\n      <form\n        class=\"card card--fullpage\"\n        name=\"detailForm\"\n        #deviceTypeForm=\"ngForm\"\n      >\n        <opcua-device-protocol-description [model]=\"model\"></opcua-device-protocol-description>\n        <div class=\"inner-scroll\">\n          <div class=\"d-contents\">\n            <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n              <div\n                class=\"h4\"\n                translate\n              >\n                Variables\n              </div>\n            </div>\n            <div class=\"p-l-16 p-r-16\">\n              @if (model.mappings.length > 0) {\n                <div\n                  class=\"c8y-list__group\"\n                  ngModelGroup=\"variable\"\n                >\n                  @for (resource of getMapping(); track trackById(i, resource); let i = $index) {\n                    <opcua-device-protocol-mapping\n                      [index]=\"i\"\n                      [referencedServerId]=\"model.referencedServerId\"\n                      [referencedRootNodeId]=\"model.referencedRootNodeId\"\n                      [resource]=\"getStructuredResource(resource)\"\n                      [getParentAttr]=\"getParentAttr\"\n                      (onAction)=\"actionHandler($event)\"\n                    ></opcua-device-protocol-mapping>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"p-l-16 p-r-16 p-t-16\">\n              @if (model.mappings.length === 0) {\n                <c8y-ui-empty-state\n                  [icon]=\"'sliders'\"\n                  [title]=\"'No variables to display.' | translate\"\n                  [subtitle]=\"'Click below to add your first variable.' | translate\"\n                ></c8y-ui-empty-state>\n              }\n              <div class=\"card-footer\">\n                <button\n                  class=\"btn btn-default addVariableBtn\"\n                  title=\"{{ 'Add variable' | translate }}\"\n                  type=\"button\"\n                  (click)=\"addVariable()\"\n                >\n                  <i c8yIcon=\"plus-circle\"></i>\n                  {{ 'Add variable' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n          <div class=\"d-contents\">\n            <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n              <div\n                class=\"h4\"\n                translate\n              >\n                Data reporting\n              </div>\n            </div>\n            <div\n              class=\"p-l-16 p-r-16 p-t-16\"\n              ngModelGroup=\"subscription\"\n            >\n              <opcua-device-protocol-data-reporting\n                [groupName]=\"'subscription'\"\n                [model]=\"model\"\n              ></opcua-device-protocol-data-reporting>\n            </div>\n          </div>\n          <div class=\"d-contents\">\n            <div class=\"card-header separator-top-bottom sticky-top\">\n              <div\n                class=\"h4\"\n                translate\n              >\n                Auto apply constraints\n              </div>\n            </div>\n            <div\n              class=\"p-l-16 p-r-16 p-t-16 overflow-visible\"\n              ngModelGroup=\"autoApply\"\n            >\n              <opcua-auto-apply [model]=\"model\"></opcua-auto-apply>\n            </div>\n          </div>\n          <div\n            class=\"card-footer sticky-bottom separator\"\n            style=\"z-index: 101\"\n          >\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Save' | translate }}\"\n              id=\"deviceTypeSave\"\n              type=\"button\"\n              (click)=\"save()\"\n              [disabled]=\"canSave(deviceTypeForm)\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: OpcuaDeviceProtocolDescription, selector: "opcua-device-protocol-description", inputs: ["model"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: OpcuaDeviceProtocolMapping, selector: "opcua-device-protocol-mapping", inputs: ["resource", "index", "getParentAttr", "referencedServerId", "referencedRootNodeId"], outputs: ["onAction"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "component", type: OpcuaAutoApplySettingsComponent, selector: "opcua-auto-apply", inputs: ["model"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: OpcuaDeviceProtocolDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-device-protocol-detail', imports: [
-                        NgIf,
                         TitleComponent,
                         BreadcrumbComponent,
                         BreadcrumbItemComponent,
                         FormsModule,
                         OpcuaDeviceProtocolDescription,
                         C8yTranslateDirective,
-                        NgFor,
                         OpcuaDeviceProtocolMapping,
                         EmptyStateComponent,
                         IconDirective,
                         OpcuaDeviceProtocolDataReportingComponent,
                         OpcuaAutoApplySettingsComponent,
                         C8yTranslatePipe
-                    ], template: "<c8y-title *ngIf=\"!isLoaded\">{{ model.name }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device types' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device protocols' | translate\"\n    [path]=\"'deviceprotocols'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [icon]=\"'c8y-device-protocols'\" [label]=\"model?.name\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <form #deviceTypeForm=\"ngForm\" name=\"detailForm\" *ngIf=\"!isLoaded\" class=\"card card--fullpage\">\n      <opcua-device-protocol-description [model]=\"model\"></opcua-device-protocol-description>\n      <div class=\"inner-scroll\">\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n            <div class=\"h4\" translate>Variables</div>\n          </div>\n          <div class=\"p-l-16 p-r-16\">\n            <div class=\"c8y-list__group\" *ngIf=\"model.mappings.length > 0\" ngModelGroup=\"variable\">\n              <opcua-device-protocol-mapping\n                *ngFor=\"let resource of getMapping(); index as i; trackBy: trackById\"\n                [index]=\"i\"\n                [referencedServerId]=\"model.referencedServerId\"\n                [referencedRootNodeId]=\"model.referencedRootNodeId\"\n                [resource]=\"getStructuredResource(resource)\"\n                [getParentAttr]=\"getParentAttr\"\n                (onAction)=\"actionHandler($event)\"\n              ></opcua-device-protocol-mapping>\n            </div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16\">\n            <c8y-ui-empty-state\n              *ngIf=\"model.mappings.length === 0\"\n              [icon]=\"'sliders'\"\n              [title]=\"'No variables to display.' | translate\"\n              [subtitle]=\"'Click below to add your first variable.' | translate\"\n            ></c8y-ui-empty-state>\n\n            <div class=\"card-footer\">\n              <button\n                type=\"button\"\n                title=\"{{ 'Add variable' | translate }}\"\n                class=\"btn btn-default addVariableBtn\"\n                (click)=\"addVariable()\"\n              >\n                <i c8yIcon=\"plus-circle\"></i>\n                {{ 'Add variable' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n            <div class=\"h4\" translate>Data reporting</div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16\" ngModelGroup=\"subscription\">\n            <opcua-device-protocol-data-reporting\n              [groupName]=\"'subscription'\"\n              [model]=\"model\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom sticky-top\">\n            <div class=\"h4\" translate>Auto apply constraints</div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16 overflow-visible\" ngModelGroup=\"autoApply\">\n            <opcua-auto-apply [model]=\"model\"></opcua-auto-apply>\n          </div>\n        </div>\n\n        <div class=\"card-footer sticky-bottom separator\" style=\"z-index: 101\">\n          <button\n            title=\"{{ 'Save' | translate }}\"\n            id=\"deviceTypeSave\"\n            class=\"btn btn-primary\"\n            (click)=\"save()\"\n            [disabled]=\"canSave(deviceTypeForm)\"\n            type=\"button\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
+                    ], template: "@if (!isLoaded) {\n  <c8y-title>{{ model.name }}</c8y-title>\n}\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device types' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device protocols' | translate\"\n    [path]=\"'deviceprotocols'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"model?.name\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    @if (!isLoaded) {\n      <form\n        class=\"card card--fullpage\"\n        name=\"detailForm\"\n        #deviceTypeForm=\"ngForm\"\n      >\n        <opcua-device-protocol-description [model]=\"model\"></opcua-device-protocol-description>\n        <div class=\"inner-scroll\">\n          <div class=\"d-contents\">\n            <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n              <div\n                class=\"h4\"\n                translate\n              >\n                Variables\n              </div>\n            </div>\n            <div class=\"p-l-16 p-r-16\">\n              @if (model.mappings.length > 0) {\n                <div\n                  class=\"c8y-list__group\"\n                  ngModelGroup=\"variable\"\n                >\n                  @for (resource of getMapping(); track trackById(i, resource); let i = $index) {\n                    <opcua-device-protocol-mapping\n                      [index]=\"i\"\n                      [referencedServerId]=\"model.referencedServerId\"\n                      [referencedRootNodeId]=\"model.referencedRootNodeId\"\n                      [resource]=\"getStructuredResource(resource)\"\n                      [getParentAttr]=\"getParentAttr\"\n                      (onAction)=\"actionHandler($event)\"\n                    ></opcua-device-protocol-mapping>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"p-l-16 p-r-16 p-t-16\">\n              @if (model.mappings.length === 0) {\n                <c8y-ui-empty-state\n                  [icon]=\"'sliders'\"\n                  [title]=\"'No variables to display.' | translate\"\n                  [subtitle]=\"'Click below to add your first variable.' | translate\"\n                ></c8y-ui-empty-state>\n              }\n              <div class=\"card-footer\">\n                <button\n                  class=\"btn btn-default addVariableBtn\"\n                  title=\"{{ 'Add variable' | translate }}\"\n                  type=\"button\"\n                  (click)=\"addVariable()\"\n                >\n                  <i c8yIcon=\"plus-circle\"></i>\n                  {{ 'Add variable' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n          <div class=\"d-contents\">\n            <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n              <div\n                class=\"h4\"\n                translate\n              >\n                Data reporting\n              </div>\n            </div>\n            <div\n              class=\"p-l-16 p-r-16 p-t-16\"\n              ngModelGroup=\"subscription\"\n            >\n              <opcua-device-protocol-data-reporting\n                [groupName]=\"'subscription'\"\n                [model]=\"model\"\n              ></opcua-device-protocol-data-reporting>\n            </div>\n          </div>\n          <div class=\"d-contents\">\n            <div class=\"card-header separator-top-bottom sticky-top\">\n              <div\n                class=\"h4\"\n                translate\n              >\n                Auto apply constraints\n              </div>\n            </div>\n            <div\n              class=\"p-l-16 p-r-16 p-t-16 overflow-visible\"\n              ngModelGroup=\"autoApply\"\n            >\n              <opcua-auto-apply [model]=\"model\"></opcua-auto-apply>\n            </div>\n          </div>\n          <div\n            class=\"card-footer sticky-bottom separator\"\n            style=\"z-index: 101\"\n          >\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Save' | translate }}\"\n              id=\"deviceTypeSave\"\n              type=\"button\"\n              (click)=\"save()\"\n              [disabled]=\"canSave(deviceTypeForm)\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: OpcuaService }, { type: i2$1.AlertService }, { type: i2.Router }], propDecorators: { instanceList: [{
                 type: ViewChildren,
                 args: [OpcuaDeviceProtocolMapping]