@c8y/ngx-components 1023.17.6 → 1023.17.8

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

@@ -121,10 +121,10 @@ class AddressSpaceService {
         };
         return iconList[nodeClassName] || 'circle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddressSpaceService, deps: [{ token: i1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddressSpaceService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddressSpaceService, deps: [{ token: i1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddressSpaceService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddressSpaceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddressSpaceService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.FetchClient }] });
 
@@ -173,10 +173,10 @@ class OpcuaAddressSpaceDetailComponent {
         this.toggleDetail(this._node);
         this.addressSpaceService.triggerNodeToOpen(nodeNavData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAddressSpaceDetailComponent, deps: [{ token: AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaAddressSpaceDetailComponent, isStandalone: true, selector: "opcua-address-space-detail", inputs: { node: "node" }, outputs: { toggleAttrDetail: "toggleAttrDetail" }, ngImport: i0, template: "<div\n  class=\"card m-b-4 split-row-2 animated fast pointer-all\"\n  [ngClass]=\"{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }\"\n>\n  <div class=\"card-header separator\">\n    <h4>{{ 'Attributes' | translate }}</h4>\n    <button\n      class=\"close m-l-auto visible-sm visible-xs\"\n      title=\"{{ 'Close' | translate }}\"\n      (click)=\"toggleDetail(nodeDataAttr)\"\n    >\n      &times;\n    </button>\n  </div>\n  <div\n    class=\"card-inner-scroll\"\n    tabindex=\"0\"\n  >\n    <div\n      class=\"card-block\"\n      tabindex=\"-1\"\n    >\n      <table class=\"table table-striped table-condensed\">\n        <colgroup>\n          <col width=\"50%\" />\n          <col width=\"50%\" />\n        </colgroup>\n        <thead>\n          <tr>\n            <th>{{ 'Attribute' | translate }}</th>\n            <th>{{ 'Value' | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of nodeDataAttr | keyvalue\">\n            <td>{{ item.key }}</td>\n            <td\n              class=\"text-break-word\"\n              *ngIf=\"item.key === 'absolutePaths'\"\n            >\n              {{ item.value | json }}\n            </td>\n            <td\n              class=\"text-break-word\"\n              *ngIf=\"item.key === 'ancestorNodeIds'\"\n            >\n              <a\n                *ngFor=\"let value of item.value\"\n                (click)=\"navigateTo(value)\"\n              >\n                {{ value | json }}\n              </a>\n            </td>\n            <td *ngIf=\"item.key !== 'absolutePaths' && item.key !== 'ancestorNodeIds'\">\n              {{ item.value }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n<div\n  class=\"card split-row-2 animated fast pointer-all\"\n  style=\"height: calc(50% - 4px)\"\n  [ngClass]=\"{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }\"\n>\n  <div class=\"card-header separator\">\n    <h4>{{ 'References' | translate }}</h4>\n  </div>\n  <div\n    class=\"card-inner-scroll\"\n    tabindex=\"0\"\n  >\n    <div\n      class=\"card-block\"\n      tabindex=\"-1\"\n    >\n      <table class=\"table table-striped table-condensed\">\n        <colgroup>\n          <col width=\"50%\" />\n          <col width=\"50%\" />\n        </colgroup>\n        <thead>\n          <tr>\n            <th>{{ 'Attribute' | translate }}</th>\n            <th>{{ 'Value' | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of nodeDataRef\">\n            <td>{{ item.referenceLabel }}</td>\n            <td class=\"text-break-word\">{{ item.targetLabel }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAddressSpaceDetailComponent, deps: [{ token: AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaAddressSpaceDetailComponent, isStandalone: true, selector: "opcua-address-space-detail", inputs: { node: "node" }, outputs: { toggleAttrDetail: "toggleAttrDetail" }, ngImport: i0, template: "<div\n  class=\"card m-b-4 split-row-2 animated fast pointer-all\"\n  [ngClass]=\"{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }\"\n>\n  <div class=\"card-header separator\">\n    <h4>{{ 'Attributes' | translate }}</h4>\n    <button\n      class=\"close m-l-auto visible-sm visible-xs\"\n      title=\"{{ 'Close' | translate }}\"\n      (click)=\"toggleDetail(nodeDataAttr)\"\n    >\n      &times;\n    </button>\n  </div>\n  <div\n    class=\"card-inner-scroll\"\n    tabindex=\"0\"\n  >\n    <div\n      class=\"card-block\"\n      tabindex=\"-1\"\n    >\n      <table class=\"table table-striped table-condensed\">\n        <colgroup>\n          <col width=\"50%\" />\n          <col width=\"50%\" />\n        </colgroup>\n        <thead>\n          <tr>\n            <th>{{ 'Attribute' | translate }}</th>\n            <th>{{ 'Value' | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of nodeDataAttr | keyvalue\">\n            <td>{{ item.key }}</td>\n            <td\n              class=\"text-break-word\"\n              *ngIf=\"item.key === 'absolutePaths'\"\n            >\n              {{ item.value | json }}\n            </td>\n            <td\n              class=\"text-break-word\"\n              *ngIf=\"item.key === 'ancestorNodeIds'\"\n            >\n              <a\n                *ngFor=\"let value of item.value\"\n                (click)=\"navigateTo(value)\"\n              >\n                {{ value | json }}\n              </a>\n            </td>\n            <td *ngIf=\"item.key !== 'absolutePaths' && item.key !== 'ancestorNodeIds'\">\n              {{ item.value }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n<div\n  class=\"card split-row-2 animated fast pointer-all\"\n  style=\"height: calc(50% - 4px)\"\n  [ngClass]=\"{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }\"\n>\n  <div class=\"card-header separator\">\n    <h4>{{ 'References' | translate }}</h4>\n  </div>\n  <div\n    class=\"card-inner-scroll\"\n    tabindex=\"0\"\n  >\n    <div\n      class=\"card-block\"\n      tabindex=\"-1\"\n    >\n      <table class=\"table table-striped table-condensed\">\n        <colgroup>\n          <col width=\"50%\" />\n          <col width=\"50%\" />\n        </colgroup>\n        <thead>\n          <tr>\n            <th>{{ 'Attribute' | translate }}</th>\n            <th>{{ 'Value' | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of nodeDataRef\">\n            <td>{{ item.referenceLabel }}</td>\n            <td class=\"text-break-word\">{{ item.targetLabel }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAddressSpaceDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAddressSpaceDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-address-space-detail', imports: [NgClass, NgFor, NgIf, C8yTranslatePipe, JsonPipe, KeyValuePipe], template: "<div\n  class=\"card m-b-4 split-row-2 animated fast pointer-all\"\n  [ngClass]=\"{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }\"\n>\n  <div class=\"card-header separator\">\n    <h4>{{ 'Attributes' | translate }}</h4>\n    <button\n      class=\"close m-l-auto visible-sm visible-xs\"\n      title=\"{{ 'Close' | translate }}\"\n      (click)=\"toggleDetail(nodeDataAttr)\"\n    >\n      &times;\n    </button>\n  </div>\n  <div\n    class=\"card-inner-scroll\"\n    tabindex=\"0\"\n  >\n    <div\n      class=\"card-block\"\n      tabindex=\"-1\"\n    >\n      <table class=\"table table-striped table-condensed\">\n        <colgroup>\n          <col width=\"50%\" />\n          <col width=\"50%\" />\n        </colgroup>\n        <thead>\n          <tr>\n            <th>{{ 'Attribute' | translate }}</th>\n            <th>{{ 'Value' | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of nodeDataAttr | keyvalue\">\n            <td>{{ item.key }}</td>\n            <td\n              class=\"text-break-word\"\n              *ngIf=\"item.key === 'absolutePaths'\"\n            >\n              {{ item.value | json }}\n            </td>\n            <td\n              class=\"text-break-word\"\n              *ngIf=\"item.key === 'ancestorNodeIds'\"\n            >\n              <a\n                *ngFor=\"let value of item.value\"\n                (click)=\"navigateTo(value)\"\n              >\n                {{ value | json }}\n              </a>\n            </td>\n            <td *ngIf=\"item.key !== 'absolutePaths' && item.key !== 'ancestorNodeIds'\">\n              {{ item.value }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n<div\n  class=\"card split-row-2 animated fast pointer-all\"\n  style=\"height: calc(50% - 4px)\"\n  [ngClass]=\"{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }\"\n>\n  <div class=\"card-header separator\">\n    <h4>{{ 'References' | translate }}</h4>\n  </div>\n  <div\n    class=\"card-inner-scroll\"\n    tabindex=\"0\"\n  >\n    <div\n      class=\"card-block\"\n      tabindex=\"-1\"\n    >\n      <table class=\"table table-striped table-condensed\">\n        <colgroup>\n          <col width=\"50%\" />\n          <col width=\"50%\" />\n        </colgroup>\n        <thead>\n          <tr>\n            <th>{{ 'Attribute' | translate }}</th>\n            <th>{{ 'Value' | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of nodeDataRef\">\n            <td>{{ item.referenceLabel }}</td>\n            <td class=\"text-break-word\">{{ item.targetLabel }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: AddressSpaceService }], propDecorators: { node: [{
@@ -367,10 +367,10 @@ class OpcuaService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaService, deps: [{ token: i1.FetchClient }, { token: i1.InventoryService }, { token: i2.Router }, { token: i2$1.AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaService, deps: [{ token: i1.FetchClient }, { token: i1.InventoryService }, { token: i2.Router }, { token: i2$1.AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1.InventoryService }, { type: i2.Router }, { type: i2$1.AlertService }] });
 
@@ -382,10 +382,10 @@ class OpcuaAgentGuard {
         const { contextData } = data;
         return contextData && contextData.type === this.type;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAgentGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAgentGuard }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAgentGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAgentGuard }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAgentGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAgentGuard, decorators: [{
             type: Injectable
         }] });
 
@@ -427,8 +427,8 @@ class OpcuaDeviceProtocolBrowsePathValidation {
         });
         return found ? true : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolBrowsePathValidation, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaDeviceProtocolBrowsePathValidation, isStandalone: true, selector: "[c8yBrowsePathValidator][ngModel]", inputs: { getMappings: "getMappings", model: "model" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolBrowsePathValidation, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaDeviceProtocolBrowsePathValidation, isStandalone: true, selector: "[c8yBrowsePathValidator][ngModel]", inputs: { getMappings: "getMappings", model: "model" }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => OpcuaDeviceProtocolBrowsePathValidation),
@@ -436,7 +436,7 @@ class OpcuaDeviceProtocolBrowsePathValidation {
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolBrowsePathValidation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolBrowsePathValidation, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yBrowsePathValidator][ngModel]',
@@ -673,10 +673,10 @@ class OpcuaAddressSpaceTreeComponent {
             this.getRelativePath(node.parentNode, relativePath);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAddressSpaceTreeComponent, deps: [{ token: AddressSpaceService }, { token: OpcuaService }, { token: i2$1.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaAddressSpaceTreeComponent, isStandalone: true, selector: "opcua-address-space-tree", inputs: { moId: "moId", node: "node", focusEmitter: "focusEmitter" }, outputs: { selectedNode: "selectedNode" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"card-block\"\n  *ngIf=\"dataSource && !loading\"\n>\n  <cdk-tree\n    [dataSource]=\"dataSource\"\n    [treeControl]=\"nestedTreeControl\"\n  >\n    <!-- This is the tree node template for leaf nodes -->\n    <cdk-nested-tree-node\n      class=\"interact\"\n      *cdkTreeNodeDef=\"let node\"\n      (click)=\"toggleFocusedNode(node)\"\n      [ngClass]=\"{ strong: isFocusedNode(node) }\"\n    >\n      <span>\n        <i\n          class=\"m-r-4 interact\"\n          [c8yIcon]=\"getIcon(node.nodeClassName)\"\n          [ngClass]=\"{ strong: isFocusedNode(node) }\"\n        ></i>\n        {{ node.displayName }}\n      </span>\n    </cdk-nested-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <cdk-nested-tree-node *cdkTreeNodeDef=\"let node; when: hasChild\">\n      <div role=\"group\">\n        <div class=\"d-flex a-i-center\">\n          <button\n            class=\"btn-clean text-primary m-r-4\"\n            title=\"{{ 'Expand node' | translate }}\"\n            cdkTreeNodeToggle\n            [disabled]=\"node.currentlyLoadingChildren\"\n          >\n            <i\n              [ngClass]=\"{\n                'dlt-c8y-icon-plus-square': !node.expanded,\n                'dlt-c8y-icon-minus-square': node.expanded\n              }\"\n            ></i>\n          </button>\n          <i\n            class=\"m-r-4 interact\"\n            [c8yIcon]=\"getIcon(node.nodeClassName)\"\n          ></i>\n          <span\n            class=\"interact\"\n            (click)=\"toggleFocusedNode(node)\"\n            [ngClass]=\"{ strong: isFocusedNode(node) }\"\n          >\n            {{ node.displayName }}\n          </span>\n          <span\n            class=\"m-l-4\"\n            [style.visibility]=\"node.currentlyLoadingChildren ? 'visible' : 'hidden'\"\n          >\n            <i class=\"dlt-c8y-icon-circle-o-notch icon-spin\"></i>\n          </span>\n        </div>\n        <ng-container cdkTreeNodeOutlet></ng-container>\n      </div>\n    </cdk-nested-tree-node>\n  </cdk-tree>\n</div>\n<div\n  class=\"p-t-8\"\n  *ngIf=\"loading\"\n>\n  <c8y-loading></c8y-loading>\n</div>\n<div\n  class=\"alert alert-info m-t-16\"\n  *ngIf=\"!dataSource && !loading\"\n  translate\n>\n  No source data available to fetch address space.\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "directive", type: CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAddressSpaceTreeComponent, deps: [{ token: AddressSpaceService }, { token: OpcuaService }, { token: i2$1.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaAddressSpaceTreeComponent, isStandalone: true, selector: "opcua-address-space-tree", inputs: { moId: "moId", node: "node", focusEmitter: "focusEmitter" }, outputs: { selectedNode: "selectedNode" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"card-block\"\n  *ngIf=\"dataSource && !loading\"\n>\n  <cdk-tree\n    [dataSource]=\"dataSource\"\n    [treeControl]=\"nestedTreeControl\"\n  >\n    <!-- This is the tree node template for leaf nodes -->\n    <cdk-nested-tree-node\n      class=\"interact\"\n      *cdkTreeNodeDef=\"let node\"\n      (click)=\"toggleFocusedNode(node)\"\n      [ngClass]=\"{ strong: isFocusedNode(node) }\"\n    >\n      <span>\n        <i\n          class=\"m-r-4 interact\"\n          [c8yIcon]=\"getIcon(node.nodeClassName)\"\n          [ngClass]=\"{ strong: isFocusedNode(node) }\"\n        ></i>\n        {{ node.displayName }}\n      </span>\n    </cdk-nested-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <cdk-nested-tree-node *cdkTreeNodeDef=\"let node; when: hasChild\">\n      <div role=\"group\">\n        <div class=\"d-flex a-i-center\">\n          <button\n            class=\"btn-clean text-primary m-r-4\"\n            title=\"{{ 'Expand node' | translate }}\"\n            cdkTreeNodeToggle\n            [disabled]=\"node.currentlyLoadingChildren\"\n          >\n            <i\n              [ngClass]=\"{\n                'dlt-c8y-icon-plus-square': !node.expanded,\n                'dlt-c8y-icon-minus-square': node.expanded\n              }\"\n            ></i>\n          </button>\n          <i\n            class=\"m-r-4 interact\"\n            [c8yIcon]=\"getIcon(node.nodeClassName)\"\n          ></i>\n          <span\n            class=\"interact\"\n            (click)=\"toggleFocusedNode(node)\"\n            [ngClass]=\"{ strong: isFocusedNode(node) }\"\n          >\n            {{ node.displayName }}\n          </span>\n          <span\n            class=\"m-l-4\"\n            [style.visibility]=\"node.currentlyLoadingChildren ? 'visible' : 'hidden'\"\n          >\n            <i class=\"dlt-c8y-icon-circle-o-notch icon-spin\"></i>\n          </span>\n        </div>\n        <ng-container cdkTreeNodeOutlet></ng-container>\n      </div>\n    </cdk-nested-tree-node>\n  </cdk-tree>\n</div>\n<div\n  class=\"p-t-8\"\n  *ngIf=\"loading\"\n>\n  <c8y-loading></c8y-loading>\n</div>\n<div\n  class=\"alert alert-info m-t-16\"\n  *ngIf=\"!dataSource && !loading\"\n  translate\n>\n  No source data available to fetch address space.\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "directive", type: CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAddressSpaceTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAddressSpaceTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-address-space-tree', imports: [
                         NgIf,
@@ -847,10 +847,10 @@ class OpcuaAddressSpaceComponent {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAddressSpaceComponent, deps: [{ token: AddressSpaceService }, { token: OpcuaService }, { token: i1.OperationService }, { token: i2$1.OperationRealtimeService }, { token: i2$1.AlertService }, { token: i2$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaAddressSpaceComponent, isStandalone: true, selector: "opcua-address-space", outputs: { focusStatus: "focusStatus" }, ngImport: i0, template: "<div class=\"row split-scroll\">\n  <div class=\"col-md-5 col-xs-12 scroll-column no-gutter-r\">\n    <div class=\"card bg-level-2 split-scroll overflow-auto\">\n      <div class=\"flex-grow\">\n        <fieldset\n          class=\"card-block large-padding bg-level-2 p-0\"\n          id=\"operation-block\"\n          *ngIf=\"!!operation\"\n        >\n          <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n        </fieldset>\n      </div>\n      <div class=\"card-block separator sticky-top\">\n        <div class=\"input-group input-group-search\">\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ filterLabel | translate }}\"\n            type=\"search\"\n            (keydown.enter)=\"searchNodes()\"\n            [(ngModel)]=\"searchKey\"\n          />\n          <span class=\"input-group-btn\">\n            <button\n              class=\"btn btn-dot\"\n              title=\"{{ 'Search' | translate }}\"\n              type=\"submit\"\n              *ngIf=\"!isSearch\"\n              (click)=\"searchNodes()\"\n            >\n              <i c8yIcon=\"search\"></i>\n            </button>\n            <button\n              class=\"btn btn-dot\"\n              title=\"{{ 'Clear`input`' | translate }}\"\n              type=\"button\"\n              *ngIf=\"isSearch\"\n              (click)=\"clearSearch()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n          </span>\n        </div>\n        <div\n          class=\"p-t-16\"\n          *ngIf=\"isSearch && !loading\"\n        >\n          <p *ngIf=\"!searchInProgress\">\n            <em>{{ nodeList.resultLabel | translate }}</em>\n            &nbsp;\n            <span class=\"badge badge-info\">{{ nodeList?.length }}</span>\n          </p>\n        </div>\n      </div>\n\n      <div\n        class=\"p-t-8\"\n        *ngIf=\"(isSearch && loading) || searchInProgress\"\n      >\n        <c8y-loading></c8y-loading>\n      </div>\n\n      <div\n        class=\"inner-scroll\"\n        *ngIf=\"isSearch && !loading && !searchInProgress\"\n      >\n        <div\n          class=\"list-group list-group-links\"\n          *ngIf=\"isSearch && !loading\"\n        >\n          <button\n            *ngFor=\"let nodeItem of nodeList\"\n            (click)=\"selectNode(nodeItem)\"\n            [ngClass]=\"{ 'list-group-item d-flex': true }\"\n          >\n            <div class=\"list-group-icon m-r-4\">\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"getIcon(nodeItem.nodeClassName)\"\n              ></i>\n            </div>\n            <div class=\"list-item-body text-truncate\">\n              <span tile=\"nodeId\">{{ nodeItem.nodeId }}</span>\n              {{ nodeItem.displayName }}\n            </div>\n          </button>\n        </div>\n      </div>\n      <div\n        class=\"inner-scroll\"\n        *ngIf=\"!isSearch\"\n      >\n        <opcua-address-space-tree\n          (selectedNode)=\"toggleCurrentNode($event)\"\n          [focusEmitter]=\"focusStatus\"\n        ></opcua-address-space-tree>\n      </div>\n      <div class=\"card-footer separator-top\">\n        <button\n          class=\"btn btn-default\"\n          [class.btn-pending]=\"isOperationRunning()\"\n          type=\"button\"\n          (click)=\"rescanAddressSpace()\"\n          [disabled]=\"isOperationRunning()\"\n        >\n          {{ 'Rescan' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n  <opcua-address-space-detail\n    class=\"col-md-7 col-xs-12 scroll-column no-gutter-l no-pointer\"\n    [node]=\"currentNode\"\n    (toggleAttrDetail)=\"backHandler($event)\"\n  ></opcua-address-space-detail>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OpcuaAddressSpaceTreeComponent, selector: "opcua-address-space-tree", inputs: ["moId", "node", "focusEmitter"], outputs: ["selectedNode"] }, { kind: "component", type: OpcuaAddressSpaceDetailComponent, selector: "opcua-address-space-detail", inputs: ["node"], outputs: ["toggleAttrDetail"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAddressSpaceComponent, deps: [{ token: AddressSpaceService }, { token: OpcuaService }, { token: i1.OperationService }, { token: i2$1.OperationRealtimeService }, { token: i2$1.AlertService }, { token: i2$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaAddressSpaceComponent, isStandalone: true, selector: "opcua-address-space", outputs: { focusStatus: "focusStatus" }, ngImport: i0, template: "<div class=\"row split-scroll\">\n  <div class=\"col-md-5 col-xs-12 scroll-column no-gutter-r\">\n    <div class=\"card bg-level-2 split-scroll overflow-auto\">\n      <div class=\"flex-grow\">\n        <fieldset\n          class=\"card-block large-padding bg-level-2 p-0\"\n          id=\"operation-block\"\n          *ngIf=\"!!operation\"\n        >\n          <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n        </fieldset>\n      </div>\n      <div class=\"card-block separator sticky-top\">\n        <div class=\"input-group input-group-search\">\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ filterLabel | translate }}\"\n            type=\"search\"\n            (keydown.enter)=\"searchNodes()\"\n            [(ngModel)]=\"searchKey\"\n          />\n          <span class=\"input-group-btn\">\n            <button\n              class=\"btn btn-dot\"\n              title=\"{{ 'Search' | translate }}\"\n              type=\"submit\"\n              *ngIf=\"!isSearch\"\n              (click)=\"searchNodes()\"\n            >\n              <i c8yIcon=\"search\"></i>\n            </button>\n            <button\n              class=\"btn btn-dot\"\n              title=\"{{ 'Clear`input`' | translate }}\"\n              type=\"button\"\n              *ngIf=\"isSearch\"\n              (click)=\"clearSearch()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n          </span>\n        </div>\n        <div\n          class=\"p-t-16\"\n          *ngIf=\"isSearch && !loading\"\n        >\n          <p *ngIf=\"!searchInProgress\">\n            <em>{{ nodeList.resultLabel | translate }}</em>\n            &nbsp;\n            <span class=\"badge badge-info\">{{ nodeList?.length }}</span>\n          </p>\n        </div>\n      </div>\n\n      <div\n        class=\"p-t-8\"\n        *ngIf=\"(isSearch && loading) || searchInProgress\"\n      >\n        <c8y-loading></c8y-loading>\n      </div>\n\n      <div\n        class=\"inner-scroll\"\n        *ngIf=\"isSearch && !loading && !searchInProgress\"\n      >\n        <div\n          class=\"list-group list-group-links\"\n          *ngIf=\"isSearch && !loading\"\n        >\n          <button\n            *ngFor=\"let nodeItem of nodeList\"\n            (click)=\"selectNode(nodeItem)\"\n            [ngClass]=\"{ 'list-group-item d-flex': true }\"\n          >\n            <div class=\"list-group-icon m-r-4\">\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"getIcon(nodeItem.nodeClassName)\"\n              ></i>\n            </div>\n            <div class=\"list-item-body text-truncate\">\n              <span tile=\"nodeId\">{{ nodeItem.nodeId }}</span>\n              {{ nodeItem.displayName }}\n            </div>\n          </button>\n        </div>\n      </div>\n      <div\n        class=\"inner-scroll\"\n        *ngIf=\"!isSearch\"\n      >\n        <opcua-address-space-tree\n          (selectedNode)=\"toggleCurrentNode($event)\"\n          [focusEmitter]=\"focusStatus\"\n        ></opcua-address-space-tree>\n      </div>\n      <div class=\"card-footer separator-top\">\n        <button\n          class=\"btn btn-default\"\n          [class.btn-pending]=\"isOperationRunning()\"\n          type=\"button\"\n          (click)=\"rescanAddressSpace()\"\n          [disabled]=\"isOperationRunning()\"\n        >\n          {{ 'Rescan' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n  <opcua-address-space-detail\n    class=\"col-md-7 col-xs-12 scroll-column no-gutter-l no-pointer\"\n    [node]=\"currentNode\"\n    (toggleAttrDetail)=\"backHandler($event)\"\n  ></opcua-address-space-detail>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OpcuaAddressSpaceTreeComponent, selector: "opcua-address-space-tree", inputs: ["moId", "node", "focusEmitter"], outputs: ["selectedNode"] }, { kind: "component", type: OpcuaAddressSpaceDetailComponent, selector: "opcua-address-space-detail", inputs: ["node"], outputs: ["toggleAttrDetail"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAddressSpaceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAddressSpaceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-address-space', imports: [
                         NgIf,
@@ -999,10 +999,10 @@ class OpcuaAutoApplySettingsComponent {
         this.updateSelectedItem.emit(true);
         this.updateConstraints(this.selectedItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAutoApplySettingsComponent, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaAutoApplySettingsComponent, isStandalone: true, selector: "opcua-auto-apply", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-md-4\">\n    <p translate>\n      Specifying auto-apply constraints allows you to limit the scope where the device protocols are\n      applied, for example by specifying a set of possible servers or node IDs.\n    </p>\n    <p translate>\n      If no constraints are set, device protocols are applied at any fitting location on the OPC UA\n      server.\n    </p>\n  </div>\n\n  <div class=\"col-md-6\">\n    <ul class=\"list-group\" style=\"box-shadow: none;\">\n      <!-- Limit device type to a set of servers -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to a set of servers' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"\n              constraints.matchesServerIds !== null && constraints.matchesServerIds.length > 0\n            \"\n            (change)=\"onChangeShowServerIds($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to a set of servers' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [collapse]=\"\n            (!showServerIds &&\n              (constraints.matchesServerIds !== null && constraints.matchesServerIds.length < 1)) ||\n            (!showServerIds && constraints.matchesServerIds === null)\n          \"\n          [isAnimated]=\"true\"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <c8y-select-legacy\n              [items]=\"opcuaServers\"\n              [selected]=\"selectedItems\"\n              [placeholder]=\"placeholderSelectServerIds\"\n              (onChange)=\"serverIdsSelected($event)\"\n              [updateItems]=\"updateSelectedItem\"\n            >\n            \n              <c8y-li *ngIf=\"opcuaServers.length > sizeToShowFilter\" class=\"sticky-top\">\n                <c8y-filter [icon]=\"'search'\"  (onSearch)=\"filterItems($event)\"></c8y-filter>\n              </c8y-li>\n              <c8y-li *ngIf=\"filteredList && filteredList.length === 0\">\n                <c8y-li-body> \n                  <div class=\"c8y-empty-state text-left\">\n                  <p>{{ 'No items to display.' | translate }}</p>\n                </div>\n                </c8y-li-body>\n              </c8y-li>\n              <c8y-li *ngFor=\"let item of filteredList\">\n                <c8y-li-checkbox\n                  [selected]=\"isChecked(item)\"\n                  (onSelect)=\"onSelect($event, item)\"\n                ></c8y-li-checkbox>\n                <c8y-li-body>{{ item.name | translate }}<br>\n                  <span class=\"text-label-small m-r-4\" translate>ID</span> <small>{{ item.id }}</small>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-select-legacy>\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type scope in the address space -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol scope in the address space' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"\n              constraints.browsePathMatchesRegex !== null &&\n              constraints.browsePathMatchesRegex.length > 0\n            \"\n            (change)=\"onChangeShowBrowsePath($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol scope in the address space' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"\n            (!showBrowsePath &&\n              constraints.browsePathMatchesRegex !== null &&\n              constraints.browsePathMatchesRegex.length < 1) ||\n            (!showBrowsePath && constraints.browsePathMatchesRegex === null)\n          \"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <input\n              name=\"browsePath\"\n              type=\"text\"\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} /objects/devices/.*\"\n              [(ngModel)]=\"constraints.browsePathMatchesRegex\"\n              ngDefaultControl\n            />\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type to servers with a certain fragment-->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to servers with a certain fragment' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length > 0\"\n            (change)=\"onChangeShowServerFragment($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to servers with a certain fragment' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"(!showServerFragment && constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length < 1) || (!showServerFragment && constraints.serverObjectHasFragment === null)\"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <input\n              name=\"serverFragment\"\n              type=\"text\"\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} c8y_SomeServerMarker\"\n              [(ngModel)]=\"constraints.serverObjectHasFragment\"\n              ngDefaultControl\n            />\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type to a specific root node ID -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to specific root nodes ID' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length > 0\"\n            (change)=\"onChangeNodeId($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to specific root nodes ID' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"(!showRootNodes && constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length < 1) || ( !showRootNodes && constraints.matchesNodeIds === null)\"\n        >\n            <ul c8yInputGroupListContainer class=\"list-unstyled p-t-16\">\n              <li\n                class=\"m-b-8\"\n                *ngFor=\"let item of constraints.matchesNodeIds; let i = index; trackBy: trackByFn\"\n              >\n                <c8y-input-group-list [index]=\"i\" (onAdd)=\"add()\" (onRemove)=\"remove($event)\">\n                  <c8y-form-group class=\"form-group--tooltip-validation\">\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} nodeId\"\n                      [(ngModel)]=\"constraints.matchesNodeIds[i]\"\n                      [required]=\"true\"\n                    />\n                  </c8y-form-group>\n                </c8y-input-group-list>\n              </li>\n            </ul> \n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputGroupListContainerDirective, selector: "[c8yInputGroupListContainer]" }, { kind: "component", type: InputGroupListComponent, selector: "c8y-input-group-list", inputs: ["plus", "minus", "index"], outputs: ["onRemove", "onAdd"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAutoApplySettingsComponent, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaAutoApplySettingsComponent, isStandalone: true, selector: "opcua-auto-apply", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-md-4\">\n    <p translate>\n      Specifying auto-apply constraints allows you to limit the scope where the device protocols are\n      applied, for example by specifying a set of possible servers or node IDs.\n    </p>\n    <p translate>\n      If no constraints are set, device protocols are applied at any fitting location on the OPC UA\n      server.\n    </p>\n  </div>\n\n  <div class=\"col-md-6\">\n    <ul class=\"list-group\" style=\"box-shadow: none;\">\n      <!-- Limit device type to a set of servers -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to a set of servers' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"\n              constraints.matchesServerIds !== null && constraints.matchesServerIds.length > 0\n            \"\n            (change)=\"onChangeShowServerIds($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to a set of servers' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [collapse]=\"\n            (!showServerIds &&\n              (constraints.matchesServerIds !== null && constraints.matchesServerIds.length < 1)) ||\n            (!showServerIds && constraints.matchesServerIds === null)\n          \"\n          [isAnimated]=\"true\"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <c8y-select-legacy\n              [items]=\"opcuaServers\"\n              [selected]=\"selectedItems\"\n              [placeholder]=\"placeholderSelectServerIds\"\n              (onChange)=\"serverIdsSelected($event)\"\n              [updateItems]=\"updateSelectedItem\"\n            >\n            \n              <c8y-li *ngIf=\"opcuaServers.length > sizeToShowFilter\" class=\"sticky-top\">\n                <c8y-filter [icon]=\"'search'\"  (onSearch)=\"filterItems($event)\"></c8y-filter>\n              </c8y-li>\n              <c8y-li *ngIf=\"filteredList && filteredList.length === 0\">\n                <c8y-li-body> \n                  <div class=\"c8y-empty-state text-left\">\n                  <p>{{ 'No items to display.' | translate }}</p>\n                </div>\n                </c8y-li-body>\n              </c8y-li>\n              <c8y-li *ngFor=\"let item of filteredList\">\n                <c8y-li-checkbox\n                  [selected]=\"isChecked(item)\"\n                  (onSelect)=\"onSelect($event, item)\"\n                ></c8y-li-checkbox>\n                <c8y-li-body>{{ item.name | translate }}<br>\n                  <span class=\"text-label-small m-r-4\" translate>ID</span> <small>{{ item.id }}</small>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-select-legacy>\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type scope in the address space -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol scope in the address space' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"\n              constraints.browsePathMatchesRegex !== null &&\n              constraints.browsePathMatchesRegex.length > 0\n            \"\n            (change)=\"onChangeShowBrowsePath($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol scope in the address space' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"\n            (!showBrowsePath &&\n              constraints.browsePathMatchesRegex !== null &&\n              constraints.browsePathMatchesRegex.length < 1) ||\n            (!showBrowsePath && constraints.browsePathMatchesRegex === null)\n          \"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <input\n              name=\"browsePath\"\n              type=\"text\"\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} /objects/devices/.*\"\n              [(ngModel)]=\"constraints.browsePathMatchesRegex\"\n              ngDefaultControl\n            />\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type to servers with a certain fragment-->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to servers with a certain fragment' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length > 0\"\n            (change)=\"onChangeShowServerFragment($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to servers with a certain fragment' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"(!showServerFragment && constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length < 1) || (!showServerFragment && constraints.serverObjectHasFragment === null)\"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <input\n              name=\"serverFragment\"\n              type=\"text\"\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} c8y_SomeServerMarker\"\n              [(ngModel)]=\"constraints.serverObjectHasFragment\"\n              ngDefaultControl\n            />\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type to a specific root node ID -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to specific root nodes ID' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length > 0\"\n            (change)=\"onChangeNodeId($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to specific root nodes ID' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"(!showRootNodes && constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length < 1) || ( !showRootNodes && constraints.matchesNodeIds === null)\"\n        >\n            <ul c8yInputGroupListContainer class=\"list-unstyled p-t-16\">\n              <li\n                class=\"m-b-8\"\n                *ngFor=\"let item of constraints.matchesNodeIds; let i = index; trackBy: trackByFn\"\n              >\n                <c8y-input-group-list [index]=\"i\" (onAdd)=\"add()\" (onRemove)=\"remove($event)\">\n                  <c8y-form-group class=\"form-group--tooltip-validation\">\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} nodeId\"\n                      [(ngModel)]=\"constraints.matchesNodeIds[i]\"\n                      [required]=\"true\"\n                    />\n                  </c8y-form-group>\n                </c8y-input-group-list>\n              </li>\n            </ul> \n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputGroupListContainerDirective, selector: "[c8yInputGroupListContainer]" }, { kind: "component", type: InputGroupListComponent, selector: "c8y-input-group-list", inputs: ["plus", "minus", "index"], outputs: ["onRemove", "onAdd"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaAutoApplySettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaAutoApplySettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-auto-apply', imports: [
                         C8yTranslateDirective,
@@ -1109,10 +1109,10 @@ class OpcuaDeviceProtocolDataReportingComponent {
             this.onSubscriptionChange.emit(this.subscription);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolDataReportingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaDeviceProtocolDataReportingComponent, isStandalone: true, selector: "opcua-device-protocol-data-reporting", inputs: { model: "model", groupName: "groupName" }, outputs: { onSubscriptionChange: "onSubscriptionChange" }, ngImport: i0, template: "<c8y-form-group>\n  <label translate>Mechanism</label>\n  <label\n    title=\"{{ mechanism.label | translate }}\"\n    class=\"c8y-radio radio-inline\"\n    *ngFor=\"let mechanism of types\"\n  >\n    <input\n      type=\"radio\"\n      name=\"{{subscriptionTypeName}}\"\n      [value]=\"mechanism.value\"\n      [(ngModel)]=\"subscription.type\"\n      (change)=\"updateModel()\"\n      required\n      [attr.data-cy]=\"mechanism.value\"\n    />\n    <span></span>\n    <span>{{ mechanism.label | translate }}</span>\n  </label>\n</c8y-form-group>\n\n<div class=\"row collapse\" [collapse]=\"subscription.type != 'CyclicRead'\" [isAnimated]=\"true\">\n  <div class=\"col-sm-6 col-md-4 col-lg-3\">\n    <c8y-form-group>\n      <label translate>Reading interval</label>\n      <div class=\"input-group\">\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"rate\"\n          [(ngModel)]=\"cyclicReadParameters.rate\"\n          placeholder=\"{{ 'e.g.' | translate }} 50\"\n          [required]=\"requireCyclic\"\n          min=\"50\"\n          [attr.data-cy]=\"'cyclicReadRate'\"\n        />\n        <span class=\"input-group-addon units\" title=\"{{ 'Milliseconds' | translate }}\">\n          {{ 'msec' | translate }}\n        </span>\n      </div>\n    </c8y-form-group>\n  </div>\n</div>\n\n<div class=\"row collapse\" [collapse]=\"subscription.type != 'Subscription'\" [isAnimated]=\"true\">\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Sampling interval</label>\n      <div class=\"input-group\">\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"samplingRate\"\n          [(ngModel)]=\"subscriptionParameters.samplingRate\"\n          placeholder=\"{{ 'e.g.' | translate }} 500\"\n          [required]=\"requireSubscription\"\n          min=\"0\"\n          [attr.data-cy]=\"'subscriptionSamplingRate'\"\n        />\n        <span class=\"input-group-addon units\" title=\"{{ 'Milliseconds' | translate }}\" translate>\n          msec\n        </span>\n      </div>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Queue size</label>\n      <div class=\"input-group\">\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"queueSize\"\n          [(ngModel)]=\"subscriptionParameters.queueSize\"\n          placeholder=\"{{ 'e.g.' | translate }} 10\"\n          min=\"1\"\n          [attr.data-cy]=\"'subscriptionQueueSize'\"\n        />\n        <span class=\"input-group-addon\">\n          <strong translate>Discard</strong>&nbsp;\n          <label\n            *ngFor=\"let discardOption of discard\"\n            title=\"{{ discardOption.label | translate }}\"\n            class=\"c8y-radio radio-inline\"\n          >\n            <input\n              type=\"radio\"\n              name=\"discard{{ _model.id }}\"\n              [value]=\"discardOption.value\"\n              [(ngModel)]=\"subscriptionParameters.discardOldest\"\n              [required]=\"requireSubscription\"\n              [attr.data-cy]=\"discardOption.label\"\n              [attr.data-name]=\"'discard' + _model.id\"\n            />\n            <span></span>\n            <span>{{ discardOption.label | translate }}</span>\n          </label>\n        </span>\n      </div>\n    </c8y-form-group>\n  </div>\n  <div class=\"clearfix\"></div>\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Data change trigger</label>\n      <label\n        *ngFor=\"let trigger of triggers\"\n        title=\"{{ trigger.label | translate }}\"\n        class=\"c8y-radio radio-inline\"\n      >\n        <input\n          type=\"radio\"\n          name=\"dataChangeTrigger{{ _model.id }}\"\n          [value]=\"trigger.value\"\n          [(ngModel)]=\"subscriptionParameters.dataChangeTrigger\"\n          [required]=\"requireSubscription\"\n          [attr.data-cy]=\"trigger.label\"\n          [attr.data-name]=\"'dataChangeTrigger' + _model.id\"\n        />\n        <span></span>\n        <span>{{ trigger.label | translate }}</span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Deadband filter</label>\n      <label\n        *ngFor=\"let deadbandFilter of filters\"\n        title=\"{{ deadbandFilter.label | translate }}\"\n        class=\"c8y-radio radio-inline\"\n      >\n        <input\n          type=\"radio\"\n          name=\"deadbandType{{ _model.id }}\"\n          [value]=\"deadbandFilter.value\"\n          [(ngModel)]=\"subscriptionParameters.deadbandType\"\n          [required]=\"requireSubscription\"\n          [attr.data-cy]=\"deadbandFilter.label\"\n          [attr.data-name]=\"'deadbandType' + _model.id\"\n        />\n        <span></span>\n        <span>{{ deadbandFilter.label | translate }}</span>\n      </label>\n    </c8y-form-group>\n    <div [collapse]=\"subscriptionParameters.deadbandType == 'None'\" [isAnimated]=\"true\">\n      <c8y-form-group>\n        <label translate>Deadband value</label>\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"deadbandValue\"\n          [(ngModel)]=\"subscriptionParameters.deadbandValue\"\n          placeholder=\"{{ 'e.g.' | translate }} 10\"\n          [required]=\"subscriptionParameters.deadbandType != 'None'\"\n          min=\"0\"\n          [attr.data-cy]=\"'deadbandValue'\"\n        />\n      </c8y-form-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolDataReportingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaDeviceProtocolDataReportingComponent, isStandalone: true, selector: "opcua-device-protocol-data-reporting", inputs: { model: "model", groupName: "groupName" }, outputs: { onSubscriptionChange: "onSubscriptionChange" }, ngImport: i0, template: "<c8y-form-group>\n  <label translate>Mechanism</label>\n  <label\n    title=\"{{ mechanism.label | translate }}\"\n    class=\"c8y-radio radio-inline\"\n    *ngFor=\"let mechanism of types\"\n  >\n    <input\n      type=\"radio\"\n      name=\"{{subscriptionTypeName}}\"\n      [value]=\"mechanism.value\"\n      [(ngModel)]=\"subscription.type\"\n      (change)=\"updateModel()\"\n      required\n      [attr.data-cy]=\"mechanism.value\"\n    />\n    <span></span>\n    <span>{{ mechanism.label | translate }}</span>\n  </label>\n</c8y-form-group>\n\n<div class=\"row collapse\" [collapse]=\"subscription.type != 'CyclicRead'\" [isAnimated]=\"true\">\n  <div class=\"col-sm-6 col-md-4 col-lg-3\">\n    <c8y-form-group>\n      <label translate>Reading interval</label>\n      <div class=\"input-group\">\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"rate\"\n          [(ngModel)]=\"cyclicReadParameters.rate\"\n          placeholder=\"{{ 'e.g.' | translate }} 50\"\n          [required]=\"requireCyclic\"\n          min=\"50\"\n          [attr.data-cy]=\"'cyclicReadRate'\"\n        />\n        <span class=\"input-group-addon units\" title=\"{{ 'Milliseconds' | translate }}\">\n          {{ 'msec' | translate }}\n        </span>\n      </div>\n    </c8y-form-group>\n  </div>\n</div>\n\n<div class=\"row collapse\" [collapse]=\"subscription.type != 'Subscription'\" [isAnimated]=\"true\">\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Sampling interval</label>\n      <div class=\"input-group\">\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"samplingRate\"\n          [(ngModel)]=\"subscriptionParameters.samplingRate\"\n          placeholder=\"{{ 'e.g.' | translate }} 500\"\n          [required]=\"requireSubscription\"\n          min=\"0\"\n          [attr.data-cy]=\"'subscriptionSamplingRate'\"\n        />\n        <span class=\"input-group-addon units\" title=\"{{ 'Milliseconds' | translate }}\" translate>\n          msec\n        </span>\n      </div>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Queue size</label>\n      <div class=\"input-group\">\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"queueSize\"\n          [(ngModel)]=\"subscriptionParameters.queueSize\"\n          placeholder=\"{{ 'e.g.' | translate }} 10\"\n          min=\"1\"\n          [attr.data-cy]=\"'subscriptionQueueSize'\"\n        />\n        <span class=\"input-group-addon\">\n          <strong translate>Discard</strong>&nbsp;\n          <label\n            *ngFor=\"let discardOption of discard\"\n            title=\"{{ discardOption.label | translate }}\"\n            class=\"c8y-radio radio-inline\"\n          >\n            <input\n              type=\"radio\"\n              name=\"discard{{ _model.id }}\"\n              [value]=\"discardOption.value\"\n              [(ngModel)]=\"subscriptionParameters.discardOldest\"\n              [required]=\"requireSubscription\"\n              [attr.data-cy]=\"discardOption.label\"\n              [attr.data-name]=\"'discard' + _model.id\"\n            />\n            <span></span>\n            <span>{{ discardOption.label | translate }}</span>\n          </label>\n        </span>\n      </div>\n    </c8y-form-group>\n  </div>\n  <div class=\"clearfix\"></div>\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Data change trigger</label>\n      <label\n        *ngFor=\"let trigger of triggers\"\n        title=\"{{ trigger.label | translate }}\"\n        class=\"c8y-radio radio-inline\"\n      >\n        <input\n          type=\"radio\"\n          name=\"dataChangeTrigger{{ _model.id }}\"\n          [value]=\"trigger.value\"\n          [(ngModel)]=\"subscriptionParameters.dataChangeTrigger\"\n          [required]=\"requireSubscription\"\n          [attr.data-cy]=\"trigger.label\"\n          [attr.data-name]=\"'dataChangeTrigger' + _model.id\"\n        />\n        <span></span>\n        <span>{{ trigger.label | translate }}</span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-sm-6 col-lg-4\">\n    <c8y-form-group>\n      <label translate>Deadband filter</label>\n      <label\n        *ngFor=\"let deadbandFilter of filters\"\n        title=\"{{ deadbandFilter.label | translate }}\"\n        class=\"c8y-radio radio-inline\"\n      >\n        <input\n          type=\"radio\"\n          name=\"deadbandType{{ _model.id }}\"\n          [value]=\"deadbandFilter.value\"\n          [(ngModel)]=\"subscriptionParameters.deadbandType\"\n          [required]=\"requireSubscription\"\n          [attr.data-cy]=\"deadbandFilter.label\"\n          [attr.data-name]=\"'deadbandType' + _model.id\"\n        />\n        <span></span>\n        <span>{{ deadbandFilter.label | translate }}</span>\n      </label>\n    </c8y-form-group>\n    <div [collapse]=\"subscriptionParameters.deadbandType == 'None'\" [isAnimated]=\"true\">\n      <c8y-form-group>\n        <label translate>Deadband value</label>\n        <input\n          class=\"form-control\"\n          type=\"number\"\n          name=\"deadbandValue\"\n          [(ngModel)]=\"subscriptionParameters.deadbandValue\"\n          placeholder=\"{{ 'e.g.' | translate }} 10\"\n          [required]=\"subscriptionParameters.deadbandType != 'None'\"\n          min=\"0\"\n          [attr.data-cy]=\"'deadbandValue'\"\n        />\n      </c8y-form-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolDataReportingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolDataReportingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-device-protocol-data-reporting', viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }], imports: [
                         FormGroupComponent,
@@ -1144,10 +1144,10 @@ class OpcuaDeviceProtocolDescription {
     setAutoScanOption(data) {
         this._model.enabled = data !== '0' ? true : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolDescription, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolDescription, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolDescription, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-device-protocol-description', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
                         C8yTranslateDirective,
@@ -1319,10 +1319,10 @@ class OpcuaDeviceProtocolObjectMappingStatus extends UpgradeComponent {
     constructor(elementRef, injector) {
         super('c8yObjectMappingStatusIcons', elementRef, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolObjectMappingStatus, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaDeviceProtocolObjectMappingStatus, isStandalone: true, selector: "c8y-object-mapping-status-icons", inputs: { mapping: "mapping" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolObjectMappingStatus, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaDeviceProtocolObjectMappingStatus, isStandalone: true, selector: "c8y-object-mapping-status-icons", inputs: { mapping: "mapping" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolObjectMappingStatus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolObjectMappingStatus, decorators: [{
             type: Directive,
             args: [{ selector: 'c8y-object-mapping-status-icons' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { mapping: [{
@@ -1522,10 +1522,10 @@ class OpcuaDeviceProtocolMapping {
     updateSubscriptionType(value) {
         this.mapping.subscriptionType = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolMapping, deps: [{ token: AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaDeviceProtocolMapping, isStandalone: true, selector: "opcua-device-protocol-mapping", inputs: { _model: ["resource", "_model"], index: "index", getParentAttr: "getParentAttr", referencedServerId: "referencedServerId", referencedRootNodeId: "referencedRootNodeId" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "subFormRef", first: true, predicate: ["variableForm"], descendants: true }, { propertyName: "browsePathModel", first: true, predicate: ["browsePathModel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-list__item\"\n  [ngClass]=\"{ expanded: isDetailOpen }\"\n  [attr.data-cy]=\"mapping.browsePath | json\"\n>\n  <div class=\"c8y-list__item__block\">\n    <div class=\"c8y-list__item__icon\">\n      <i c8yIcon=\"sliders\"></i>\n    </div>\n    <div class=\"c8y-list__item__body\">\n      <div class=\"content-flex-70\">\n        <div class=\"col-5\">\n          <p\n            class=\"text-truncate\"\n            title=\" {{ nodeDisplayName }} {{\n              mapping.browsePath.length > 0 ? (mapping.browsePath | json) : ''\n            }}\"\n            (click)=\"toggleDetail()\"\n          >\n            {{ nodeDisplayName }}\n            <small\n              class=\"text-muted\"\n              *ngIf=\"mapping.browsePath.length > 0\"\n            >\n              {{ mapping.browsePath | json }}\n            </small>\n          </p>\n        </div>\n        <div class=\"col-5\">\n          <div class=\"list-functionalities\">\n            <label class=\"small m-r-8 m-b-0 hidden-xs\">\n              {{ 'Functionalities' | translate }}\n            </label>\n            <c8y-object-mapping-status-icons [mapping]=\"mapping\"></c8y-object-mapping-status-icons>\n          </div>\n        </div>\n        <div class=\"flex-grow d-flex p-r-8\">\n          <button\n            class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            tooltip=\"{{ 'Remove' | translate }}\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <i\n              c8yIcon=\"minus-circle\"\n              (click)=\"onDelete()\"\n            ></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"c8y-list__item__actions\">\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        type=\"button\"\n        [ngClass]=\"{ active: isDetailOpen }\"\n        (click)=\"toggleDetail()\"\n        [attr.data-cy]=\"'toggleDetail'\"\n      >\n        <i c8yIcon=\"chevron-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"collapse\"\n    [collapse]=\"!isDetailOpen\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <div\n        class=\"form\"\n        [ngModelGroup]=\"index\"\n        #variableForm=\"ngModelGroup\"\n        *ngIf=\"isDetailOpen\"\n      >\n        <div class=\"row p-t-8\">\n          <c8y-form-group\n            class=\"col-md-4\"\n            [status]=\"!isBrowsePathUniq ? 'error' : ''\"\n            *ngIf=\"showAddressSpaceTree(); else simpleInput\"\n          >\n            <label>{{ 'Path' | translate }}</label>\n            <div\n              class=\"dropdown fit-w\"\n              dropdown\n              #dropdown=\"bs-dropdown\"\n              [insideClick]=\"true\"\n            >\n              <div class=\"input-group\">\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                  name=\"browsePath\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  required\n                  c8yBrowsePathValidator\n                  [getMappings]=\"getMappings\"\n                  [model]=\"mapping\"\n                  [(ngModel)]=\"browsePath\"\n                  (change)=\"updateBrowsePathInput()\"\n                  (focus)=\"setTreeFromRefNode()\"\n                  #browsePathModel=\"ngModel\"\n                />\n                <span class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    title=\"{{ 'Toggle address space' | translate }}\"\n                    type=\"button\"\n                    dropdownToggle\n                  >\n                    <i [c8yIcon]=\"'caret-down'\"></i>\n                  </button>\n                </span>\n              </div>\n              <div\n                class=\"dropdown-menu panel-inner-scroll fit-w\"\n                style=\"max-height: 240px\"\n                *dropdownMenu\n              >\n                <opcua-address-space-tree\n                  [node]=\"referencedNode\"\n                  [moId]=\"referencedServerId\"\n                  (selectedNode)=\"updateBrowsePath($event); dropdown.hide()\"\n                ></opcua-address-space-tree>\n              </div>\n            </div>\n            <c8y-messages>\n              <c8y-message\n                name=\"invalidBrowsePathNotation\"\n                text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n              ></c8y-message>\n              <c8y-message\n                name=\"browsePathNotUnique\"\n                text=\"{{ 'Variable with this path is already added.' | translate }}\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <ng-template #simpleInput>\n            <c8y-form-group class=\"col-md-4\">\n              <label>{{ 'Path' | translate }}</label>\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                name=\"browsePath\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                c8yBrowsePathValidator\n                [getMappings]=\"getMappings\"\n                [model]=\"mapping\"\n                [(ngModel)]=\"browsePath\"\n                (change)=\"updateBrowsePathInput()\"\n                #browsePathModel=\"ngModel\"\n              />\n              <c8y-messages>\n                <c8y-message\n                  name=\"invalidBrowsePathNotation\"\n                  text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n                ></c8y-message>\n                <c8y-message\n                  name=\"browsePathNotUnique\"\n                  text=\"{{ 'Variable with this path is already added.' | translate }}\"\n                ></c8y-message>\n              </c8y-messages>\n            </c8y-form-group>\n          </ng-template>\n\n          <c8y-form-group class=\"col-md-4\">\n            <label>{{ 'Name' | translate }}</label>\n            <div class=\"input-group\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g. childDevice2' | translate }} \"\n                name=\"displayName\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                [(ngModel)]=\"nodeDisplayName\"\n                (change)=\"updateDisplayname()\"\n              />\n            </div>\n          </c8y-form-group>\n        </div>\n        <div\n          class=\"row\"\n          ngModelGroup=\"dataReportingSection\"\n        >\n          <c8y-form-group class=\"col-sm-4 col-md-3 col-lg-2\">\n            <label>\n              <span>{{ 'Data reporting' | translate }}</span>\n            </label>\n            <div class=\"input-group\">\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Default' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"default\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Default' | translate }}</span>\n              </label>\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Custom' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"custom\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Custom' | translate }}</span>\n              </label>\n            </div>\n          </c8y-form-group>\n          <div\n            class=\"col-sm-8 col-md-9 col-lg-10\"\n            *ngIf=\"dataReporting === 'custom'\"\n            ngModelGroup=\"overriddenSubscription\"\n          >\n            <opcua-device-protocol-data-reporting\n              [model]=\"mapping\"\n              (onSubscriptionChange)=\"updateSubscriptionType($event)\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n\n        <c8y-device-protocol-object-mappings\n          [data]=\"mapping\"\n          [objectMappingTypes]=\"mappingTypes\"\n          (onUpdate)=\"onMappingUpdate($event)\">\n        </c8y-device-protocol-object-mappings>\n\n        <button\n          class=\"btn btn-default m-t-16 m-b-16\"\n          title=\"{{ 'Cancel' | translate }}\"\n          id=\"cancelBtn\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n        <button\n          class=\"btn btn-primary m-t-16 m-b-16\"\n          title=\"{{ 'Save' | translate }}\"\n          id=\"saveBtn\"\n          type=\"button\"\n          (click)=\"save()\"\n          [disabled]=\"!canSave(variableForm)\"\n        >\n          {{ 'Save' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OpcuaDeviceProtocolObjectMappingStatus, selector: "c8y-object-mapping-status-icons", inputs: ["mapping"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: OpcuaDeviceProtocolBrowsePathValidation, selector: "[c8yBrowsePathValidator][ngModel]", inputs: ["getMappings", "model"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: OpcuaAddressSpaceTreeComponent, selector: "opcua-address-space-tree", inputs: ["moId", "node", "focusEmitter"], outputs: ["selectedNode"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "component", type: ObjectMappingComponent, selector: "c8y-device-protocol-object-mappings", inputs: ["data", "objectMappingTypes"], outputs: ["onUpdate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPipe, name: "json" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolMapping, deps: [{ token: AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaDeviceProtocolMapping, isStandalone: true, selector: "opcua-device-protocol-mapping", inputs: { _model: ["resource", "_model"], index: "index", getParentAttr: "getParentAttr", referencedServerId: "referencedServerId", referencedRootNodeId: "referencedRootNodeId" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "subFormRef", first: true, predicate: ["variableForm"], descendants: true }, { propertyName: "browsePathModel", first: true, predicate: ["browsePathModel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-list__item\"\n  [ngClass]=\"{ expanded: isDetailOpen }\"\n  [attr.data-cy]=\"mapping.browsePath | json\"\n>\n  <div class=\"c8y-list__item__block\">\n    <div class=\"c8y-list__item__icon\">\n      <i c8yIcon=\"sliders\"></i>\n    </div>\n    <div class=\"c8y-list__item__body\">\n      <div class=\"content-flex-70\">\n        <div class=\"col-5\">\n          <p\n            class=\"text-truncate\"\n            title=\" {{ nodeDisplayName }} {{\n              mapping.browsePath.length > 0 ? (mapping.browsePath | json) : ''\n            }}\"\n            (click)=\"toggleDetail()\"\n          >\n            {{ nodeDisplayName }}\n            <small\n              class=\"text-muted\"\n              *ngIf=\"mapping.browsePath.length > 0\"\n            >\n              {{ mapping.browsePath | json }}\n            </small>\n          </p>\n        </div>\n        <div class=\"col-5\">\n          <div class=\"list-functionalities\">\n            <label class=\"small m-r-8 m-b-0 hidden-xs\">\n              {{ 'Functionalities' | translate }}\n            </label>\n            <c8y-object-mapping-status-icons [mapping]=\"mapping\"></c8y-object-mapping-status-icons>\n          </div>\n        </div>\n        <div class=\"flex-grow d-flex p-r-8\">\n          <button\n            class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            tooltip=\"{{ 'Remove' | translate }}\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <i\n              c8yIcon=\"minus-circle\"\n              (click)=\"onDelete()\"\n            ></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"c8y-list__item__actions\">\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        type=\"button\"\n        [ngClass]=\"{ active: isDetailOpen }\"\n        (click)=\"toggleDetail()\"\n        [attr.data-cy]=\"'toggleDetail'\"\n      >\n        <i c8yIcon=\"chevron-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"collapse\"\n    [collapse]=\"!isDetailOpen\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <div\n        class=\"form\"\n        [ngModelGroup]=\"index\"\n        #variableForm=\"ngModelGroup\"\n        *ngIf=\"isDetailOpen\"\n      >\n        <div class=\"row p-t-8\">\n          <c8y-form-group\n            class=\"col-md-4\"\n            [status]=\"!isBrowsePathUniq ? 'error' : ''\"\n            *ngIf=\"showAddressSpaceTree(); else simpleInput\"\n          >\n            <label>{{ 'Path' | translate }}</label>\n            <div\n              class=\"dropdown fit-w\"\n              dropdown\n              #dropdown=\"bs-dropdown\"\n              [insideClick]=\"true\"\n            >\n              <div class=\"input-group\">\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                  name=\"browsePath\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  required\n                  c8yBrowsePathValidator\n                  [getMappings]=\"getMappings\"\n                  [model]=\"mapping\"\n                  [(ngModel)]=\"browsePath\"\n                  (change)=\"updateBrowsePathInput()\"\n                  (focus)=\"setTreeFromRefNode()\"\n                  #browsePathModel=\"ngModel\"\n                />\n                <span class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    title=\"{{ 'Toggle address space' | translate }}\"\n                    type=\"button\"\n                    dropdownToggle\n                  >\n                    <i [c8yIcon]=\"'caret-down'\"></i>\n                  </button>\n                </span>\n              </div>\n              <div\n                class=\"dropdown-menu panel-inner-scroll fit-w\"\n                style=\"max-height: 240px\"\n                *dropdownMenu\n              >\n                <opcua-address-space-tree\n                  [node]=\"referencedNode\"\n                  [moId]=\"referencedServerId\"\n                  (selectedNode)=\"updateBrowsePath($event); dropdown.hide()\"\n                ></opcua-address-space-tree>\n              </div>\n            </div>\n            <c8y-messages>\n              <c8y-message\n                name=\"invalidBrowsePathNotation\"\n                text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n              ></c8y-message>\n              <c8y-message\n                name=\"browsePathNotUnique\"\n                text=\"{{ 'Variable with this path is already added.' | translate }}\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <ng-template #simpleInput>\n            <c8y-form-group class=\"col-md-4\">\n              <label>{{ 'Path' | translate }}</label>\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                name=\"browsePath\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                c8yBrowsePathValidator\n                [getMappings]=\"getMappings\"\n                [model]=\"mapping\"\n                [(ngModel)]=\"browsePath\"\n                (change)=\"updateBrowsePathInput()\"\n                #browsePathModel=\"ngModel\"\n              />\n              <c8y-messages>\n                <c8y-message\n                  name=\"invalidBrowsePathNotation\"\n                  text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n                ></c8y-message>\n                <c8y-message\n                  name=\"browsePathNotUnique\"\n                  text=\"{{ 'Variable with this path is already added.' | translate }}\"\n                ></c8y-message>\n              </c8y-messages>\n            </c8y-form-group>\n          </ng-template>\n\n          <c8y-form-group class=\"col-md-4\">\n            <label>{{ 'Name' | translate }}</label>\n            <div class=\"input-group\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g. childDevice2' | translate }} \"\n                name=\"displayName\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                [(ngModel)]=\"nodeDisplayName\"\n                (change)=\"updateDisplayname()\"\n              />\n            </div>\n          </c8y-form-group>\n        </div>\n        <div\n          class=\"row\"\n          ngModelGroup=\"dataReportingSection\"\n        >\n          <c8y-form-group class=\"col-sm-4 col-md-3 col-lg-2\">\n            <label>\n              <span>{{ 'Data reporting' | translate }}</span>\n            </label>\n            <div class=\"input-group\">\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Default' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"default\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Default' | translate }}</span>\n              </label>\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Custom' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"custom\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Custom' | translate }}</span>\n              </label>\n            </div>\n          </c8y-form-group>\n          <div\n            class=\"col-sm-8 col-md-9 col-lg-10\"\n            *ngIf=\"dataReporting === 'custom'\"\n            ngModelGroup=\"overriddenSubscription\"\n          >\n            <opcua-device-protocol-data-reporting\n              [model]=\"mapping\"\n              (onSubscriptionChange)=\"updateSubscriptionType($event)\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n\n        <c8y-device-protocol-object-mappings\n          [data]=\"mapping\"\n          [objectMappingTypes]=\"mappingTypes\"\n          (onUpdate)=\"onMappingUpdate($event)\">\n        </c8y-device-protocol-object-mappings>\n\n        <button\n          class=\"btn btn-default m-t-16 m-b-16\"\n          title=\"{{ 'Cancel' | translate }}\"\n          id=\"cancelBtn\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n        <button\n          class=\"btn btn-primary m-t-16 m-b-16\"\n          title=\"{{ 'Save' | translate }}\"\n          id=\"saveBtn\"\n          type=\"button\"\n          (click)=\"save()\"\n          [disabled]=\"!canSave(variableForm)\"\n        >\n          {{ 'Save' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OpcuaDeviceProtocolObjectMappingStatus, selector: "c8y-object-mapping-status-icons", inputs: ["mapping"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: OpcuaDeviceProtocolBrowsePathValidation, selector: "[c8yBrowsePathValidator][ngModel]", inputs: ["getMappings", "model"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: OpcuaAddressSpaceTreeComponent, selector: "opcua-address-space-tree", inputs: ["moId", "node", "focusEmitter"], outputs: ["selectedNode"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "component", type: ObjectMappingComponent, selector: "c8y-device-protocol-object-mappings", inputs: ["data", "objectMappingTypes"], outputs: ["onUpdate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPipe, name: "json" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolMapping, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolMapping, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-device-protocol-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }], imports: [
                         NgClass,
@@ -1746,10 +1746,10 @@ class OpcuaDeviceProtocolDetailComponent {
         }
         return !deviceTypeForm.form.valid;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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],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]),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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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],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]),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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaDeviceProtocolDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaDeviceProtocolDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-device-protocol-detail', imports: [
                         NgIf,
@@ -1783,10 +1783,10 @@ class OpcuaMicroserviceGuard {
         }
         return this.checkApp;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaMicroserviceGuard, deps: [{ token: i2$1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaMicroserviceGuard }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaMicroserviceGuard, deps: [{ token: i2$1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaMicroserviceGuard }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaMicroserviceGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaMicroserviceGuard, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2$1.AppStateService }] });
 
@@ -2215,10 +2215,10 @@ class OpcuaServerConfigComponent {
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServerConfigComponent, deps: [{ token: OpcuaService }, { token: i2$1.ModalService }, { token: i2$1.AlertService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaServerConfigComponent, isStandalone: true, selector: "opcua-server-config", inputs: { server: "server" }, outputs: { canceled: "canceled", removed: "removed", saved: "saved", updated: "updated" }, viewQueries: [{ propertyName: "opcuaConfigForm", first: true, predicate: ["opcuaConfigForm"], descendants: true }, { propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-ui-empty-state\n  [icon]=\"'server'\"\n  [title]=\"'No server to display.' | translate\"\n  [subtitle]=\"'Add or select a server.' | translate\"\n  *ngIf=\"!server\"\n></c8y-ui-empty-state>\n\n<form\n  class=\"d-contents\"\n  #opcuaConfigForm=\"ngForm\"\n  *ngIf=\"server\"\n>\n  <div class=\"card-header large-padding separator sticky-top visible-sm visible-xs\">\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      title=\"{{ 'Back' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      <i c8yIcon=\"chevron-left\"></i>\n      {{ 'Back' | translate }}\n    </button>\n  </div>\n  <div class=\"flex-grow\">\n    <div class=\"card-block large-padding\">\n      <!-- SERVER NAME -->\n      <c8y-form-group class=\"m-b-8\">\n        <label>{{ 'Server name' | translate }}</label>\n        <input\n          class=\"form-control\"\n          id=\"name\"\n          placeholder=\"{{ 'e.g. My server' | translate }}\"\n          name=\"name\"\n          type=\"text\"\n          required\n          [(ngModel)]=\"model.name\"\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"required\"\n            text=\"{{ 'Server name is required' | translate }}\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n\n    <div class=\"card-block large-padding bg-level-2\">\n      <div class=\"tight-grid\">\n        <div class=\"col-sm-6\">\n          <label\n            class=\"fit-w\"\n            translate\n          >\n            Server connection\n          </label>\n          <button\n            class=\"btn m-t-4\"\n            name=\"serverConnection\"\n            type=\"button\"\n            [(ngModel)]=\"targetConnectionState\"\n            (ngModelChange)=\"setServerConnection($event)\"\n            btnCheckbox\n            btnCheckboxTrue=\"1\"\n            btnCheckboxFalse=\"0\"\n          >\n            <span\n              title=\"{{ 'Enabled' | translate }}\"\n              [hidden]=\"targetConnectionState !== '1'\"\n            >\n              {{ 'Enabled' | translate }}\n            </span>\n            <span\n              title=\"{{ 'Disabled' | translate }}\"\n              [hidden]=\"targetConnectionState !== '0'\"\n            >\n              {{ 'Disabled' | translate }}\n            </span>\n          </button>\n        </div>\n        <div class=\"col-sm-6\">\n          <label translate>Connection status</label>\n          <div class=\"form-control-static\">\n            <device-status\n              class=\"p-r-8\"\n              [mo]=\"server\"\n            ></device-status>\n            <span>{{ connectionStatusLabel | translate }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block large-padding\">\n      <!-- SERVER URL-->\n      <c8y-form-group>\n        <label\n          for=\"configServerUrl\"\n          translate\n        >\n          Server URL\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"configServerUrl\"\n          name=\"serverUrl\"\n          type=\"text\"\n          required\n          [(ngModel)]=\"model.config.serverUrl\"\n          c8yDefaultValidation=\"opcuaBrowsePath\"\n        />\n      </c8y-form-group>\n\n      <!-- SECURITY MODE -->\n      <div class=\"tight-grid\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <!-- NONE, SIGN, SIGN & ENCRYPT-->\n            <label\n              for=\"config.securityMode\"\n              translate\n            >\n              Security mode\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityMode\"\n                name=\"securityMode\"\n                required\n                [(ngModel)]=\"currentSecMode\"\n                (ngModelChange)=\"setPolicy($event)\"\n              >\n                <option\n                  *ngFor=\"let mode of securityModes\"\n                  [ngValue]=\"mode\"\n                >\n                  {{ mode }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"currentSecMode === NONE\"\n        >\n          <div class=\"form-group\">\n            <label\n              for=\"config.securityPolicy\"\n              translate\n            >\n              Security policy\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.securityPolicy\"\n              name=\"securityPolicy\"\n              type=\"text\"\n              required\n              [readonly]=\"true\"\n              [(ngModel)]=\"model.config.securityMode\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"currentSecMode !== NONE\"\n        >\n          <div class=\"form-group\">\n            <label\n              for=\"config.securityPolicy\"\n              translate\n            >\n              Security policy\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                name=\"securityPolicy\"\n                required\n                *ngIf=\"currentSecMode === SIGN\"\n                [(ngModel)]=\"model.config.securityMode\"\n              >\n                <option\n                  *ngFor=\"let policy of securityPolicies.sign\"\n                  [ngValue]=\"policy\"\n                >\n                  {{ policy }}\n                </option>\n              </select>\n              <select\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                name=\"securityPolicy\"\n                required\n                *ngIf=\"currentSecMode === SIGN_ENC\"\n                [(ngModel)]=\"model.config.securityMode\"\n              >\n                <option\n                  *ngFor=\"let policy of securityPolicies.sign_enc\"\n                  [ngValue]=\"policy\"\n                >\n                  {{ policy }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AUTHENTICATION -->\n      <div class=\"row tight-grid\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.authenticationMode\"\n              translate\n            >\n              Authentication\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.authenticationMode\"\n                name=\"authenticationMode\"\n                required\n                [(ngModel)]=\"authenticationMode\"\n                (ngModelChange)=\"updateAuthentication($event)\"\n              >\n                <option\n                  *ngFor=\"let auth of authenticationModes\"\n                  [ngValue]=\"auth\"\n                >\n                  {{ auth.value | translate }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- User/Pw-->\n      <div\n        class=\"tight-grid\"\n        *ngIf=\"authenticationMode.id === 2\"\n      >\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.userName\"\n              translate\n            >\n              Username\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.userName\"\n              placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n              name=\"userName\"\n              type=\"text\"\n              autocomplete=\"new-password\"\n              required\n              [(ngModel)]=\"model.config.userName\"\n            />\n          </div>\n        </div>\n\n        <!-- change password section BEGINS-->\n        <div class=\"col-md-6\">\n          <div\n            class=\"form-group\"\n            *ngIf=\"!initialPasswordRequired\"\n          >\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"toggleChangePassword()\"\n            >\n              <ng-container *ngIf=\"!changePassword\">\n                {{ 'Change password' | translate }}\n              </ng-container>\n              <ng-container *ngIf=\"changePassword\">\n                {{ 'Cancel password change' | translate }}\n              </ng-container>\n            </button>\n          </div>\n\n          <div class=\"form-group\">\n            <div *ngIf=\"changePassword\">\n              <label\n                for=\"config.password\"\n                translate\n              >\n                Password\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"config.userPassword\"\n                name=\"password\"\n                type=\"password\"\n                autocomplete=\"new-password\"\n                required\n                [(ngModel)]=\"model.config.userPassword\"\n              />\n            </div>\n          </div>\n        </div>\n        <!-- change password section ENDS-->\n      </div>\n\n      <!-- Key-based -->\n      <div\n        class=\"tight-grid\"\n        *ngIf=\"authenticationMode.id === 3\"\n      >\n        <!-- KEYSTORE PASSWORD -->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.keystorePass\"\n              translate\n            >\n              Keystore password\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.keystorePass\"\n              name=\"keystorePass\"\n              type=\"password\"\n              required\n              [(ngModel)]=\"model.config.keystorePass\"\n            />\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.certificatePass\"\n              translate\n            >\n              Certificate password\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.certificatePass\"\n              name=\"keystorePass\"\n              type=\"password\"\n              required\n              [(ngModel)]=\"model.config.certificatePass\"\n            />\n          </div>\n        </div>\n        <!-- UPLOAD KEYSTORE -->\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label\n              for=\"certificateUpload\"\n              translate\n            >\n              Upload keystore\n            </label>\n            <input\n              class=\"form-control m-b-8\"\n              placeholder=\"{{ 'e.g.' | translate }} yourKeystore.jks\"\n              name=\"certificateUpload\"\n              type=\"text\"\n              required\n              [readonly]=\"true\"\n              [ngModel]=\"fileName\"\n            />\n            <c8y-drop-area\n              [title]=\"'Import keystore with jks file extension' | translate\"\n              (dropped)=\"uploadFile($event)\"\n              [loadingMessage]=\"'Importing, please wait.' | translate\"\n            ></c8y-drop-area>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"form-group m-b-0 d-flex a-i-center\">\n        <button\n          class=\"btn btn-dot collapse-btn\"\n          title=\"{{ (advancedSettings ? collapse : expand) | translate }}\"\n          [attr.aria-label]=\"(advancedSettings ? collapse : expand) | translate\"\n          [attr.aria-expanded]=\"advancedSettings\"\n          [ngClass]=\"{ active: advancedSettings }\"\n          (click)=\"advancedSettings = !advancedSettings\"\n          data-cy=\"opcua-server-config--advanced-settings-toggle\"\n        >\n          <i c8yIcon=\"chevron-right\"></i>\n        </button>\n        <label class=\"m-0\">\n          <span>{{ 'Advanced settings' | translate }}</span>\n        </label>\n      </div>\n    </div>\n\n    <div\n      class=\"card-block collapse\"\n      [collapse]=\"!advancedSettings\"\n      [isAnimated]=\"true\"\n      [ngClass]=\"{ 'bg-level-1': advancedSettings }\"\n    >\n      <formly-form\n        [form]=\"advancedSettingsForm\"\n        [fields]=\"advancedSettingsFields\"\n        [model]=\"model.config\"\n      ></formly-form>\n    </div>\n  </div>\n  <div class=\"card-footer large-padding separator sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-danger\"\n      title=\"{{ 'Remove' | translate }}\"\n      type=\"button\"\n      (click)=\"remove()\"\n      [disabled]=\"isNew()\"\n    >\n      {{ 'Remove' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      (click)=\"save()\"\n      [disabled]=\"!opcuaConfigForm.valid || !advancedSettingsForm.valid\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServerConfigComponent, deps: [{ token: OpcuaService }, { token: i2$1.ModalService }, { token: i2$1.AlertService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaServerConfigComponent, isStandalone: true, selector: "opcua-server-config", inputs: { server: "server" }, outputs: { canceled: "canceled", removed: "removed", saved: "saved", updated: "updated" }, viewQueries: [{ propertyName: "opcuaConfigForm", first: true, predicate: ["opcuaConfigForm"], descendants: true }, { propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-ui-empty-state\n  [icon]=\"'server'\"\n  [title]=\"'No server to display.' | translate\"\n  [subtitle]=\"'Add or select a server.' | translate\"\n  *ngIf=\"!server\"\n></c8y-ui-empty-state>\n\n<form\n  class=\"d-contents\"\n  #opcuaConfigForm=\"ngForm\"\n  *ngIf=\"server\"\n>\n  <div class=\"card-header large-padding separator sticky-top visible-sm visible-xs\">\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      title=\"{{ 'Back' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      <i c8yIcon=\"chevron-left\"></i>\n      {{ 'Back' | translate }}\n    </button>\n  </div>\n  <div class=\"flex-grow\">\n    <div class=\"card-block large-padding\">\n      <!-- SERVER NAME -->\n      <c8y-form-group class=\"m-b-8\">\n        <label>{{ 'Server name' | translate }}</label>\n        <input\n          class=\"form-control\"\n          id=\"name\"\n          placeholder=\"{{ 'e.g. My server' | translate }}\"\n          name=\"name\"\n          type=\"text\"\n          required\n          [(ngModel)]=\"model.name\"\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"required\"\n            text=\"{{ 'Server name is required' | translate }}\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n\n    <div class=\"card-block large-padding bg-level-2\">\n      <div class=\"tight-grid\">\n        <div class=\"col-sm-6\">\n          <label\n            class=\"fit-w\"\n            translate\n          >\n            Server connection\n          </label>\n          <button\n            class=\"btn m-t-4\"\n            name=\"serverConnection\"\n            type=\"button\"\n            [(ngModel)]=\"targetConnectionState\"\n            (ngModelChange)=\"setServerConnection($event)\"\n            btnCheckbox\n            btnCheckboxTrue=\"1\"\n            btnCheckboxFalse=\"0\"\n          >\n            <span\n              title=\"{{ 'Enabled' | translate }}\"\n              [hidden]=\"targetConnectionState !== '1'\"\n            >\n              {{ 'Enabled' | translate }}\n            </span>\n            <span\n              title=\"{{ 'Disabled' | translate }}\"\n              [hidden]=\"targetConnectionState !== '0'\"\n            >\n              {{ 'Disabled' | translate }}\n            </span>\n          </button>\n        </div>\n        <div class=\"col-sm-6\">\n          <label translate>Connection status</label>\n          <div class=\"form-control-static\">\n            <device-status\n              class=\"p-r-8\"\n              [mo]=\"server\"\n            ></device-status>\n            <span>{{ connectionStatusLabel | translate }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block large-padding\">\n      <!-- SERVER URL-->\n      <c8y-form-group>\n        <label\n          for=\"configServerUrl\"\n          translate\n        >\n          Server URL\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"configServerUrl\"\n          name=\"serverUrl\"\n          type=\"text\"\n          required\n          [(ngModel)]=\"model.config.serverUrl\"\n          c8yDefaultValidation=\"opcuaBrowsePath\"\n        />\n      </c8y-form-group>\n\n      <!-- SECURITY MODE -->\n      <div class=\"tight-grid\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <!-- NONE, SIGN, SIGN & ENCRYPT-->\n            <label\n              for=\"config.securityMode\"\n              translate\n            >\n              Security mode\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityMode\"\n                name=\"securityMode\"\n                required\n                [(ngModel)]=\"currentSecMode\"\n                (ngModelChange)=\"setPolicy($event)\"\n              >\n                <option\n                  *ngFor=\"let mode of securityModes\"\n                  [ngValue]=\"mode\"\n                >\n                  {{ mode }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"currentSecMode === NONE\"\n        >\n          <div class=\"form-group\">\n            <label\n              for=\"config.securityPolicy\"\n              translate\n            >\n              Security policy\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.securityPolicy\"\n              name=\"securityPolicy\"\n              type=\"text\"\n              required\n              [readonly]=\"true\"\n              [(ngModel)]=\"model.config.securityMode\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"currentSecMode !== NONE\"\n        >\n          <div class=\"form-group\">\n            <label\n              for=\"config.securityPolicy\"\n              translate\n            >\n              Security policy\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                name=\"securityPolicy\"\n                required\n                *ngIf=\"currentSecMode === SIGN\"\n                [(ngModel)]=\"model.config.securityMode\"\n              >\n                <option\n                  *ngFor=\"let policy of securityPolicies.sign\"\n                  [ngValue]=\"policy\"\n                >\n                  {{ policy }}\n                </option>\n              </select>\n              <select\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                name=\"securityPolicy\"\n                required\n                *ngIf=\"currentSecMode === SIGN_ENC\"\n                [(ngModel)]=\"model.config.securityMode\"\n              >\n                <option\n                  *ngFor=\"let policy of securityPolicies.sign_enc\"\n                  [ngValue]=\"policy\"\n                >\n                  {{ policy }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AUTHENTICATION -->\n      <div class=\"row tight-grid\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.authenticationMode\"\n              translate\n            >\n              Authentication\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.authenticationMode\"\n                name=\"authenticationMode\"\n                required\n                [(ngModel)]=\"authenticationMode\"\n                (ngModelChange)=\"updateAuthentication($event)\"\n              >\n                <option\n                  *ngFor=\"let auth of authenticationModes\"\n                  [ngValue]=\"auth\"\n                >\n                  {{ auth.value | translate }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- User/Pw-->\n      <div\n        class=\"tight-grid\"\n        *ngIf=\"authenticationMode.id === 2\"\n      >\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.userName\"\n              translate\n            >\n              Username\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.userName\"\n              placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n              name=\"userName\"\n              type=\"text\"\n              autocomplete=\"new-password\"\n              required\n              [(ngModel)]=\"model.config.userName\"\n            />\n          </div>\n        </div>\n\n        <!-- change password section BEGINS-->\n        <div class=\"col-md-6\">\n          <div\n            class=\"form-group\"\n            *ngIf=\"!initialPasswordRequired\"\n          >\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"toggleChangePassword()\"\n            >\n              <ng-container *ngIf=\"!changePassword\">\n                {{ 'Change password' | translate }}\n              </ng-container>\n              <ng-container *ngIf=\"changePassword\">\n                {{ 'Cancel password change' | translate }}\n              </ng-container>\n            </button>\n          </div>\n\n          <div class=\"form-group\">\n            <div *ngIf=\"changePassword\">\n              <label\n                for=\"config.password\"\n                translate\n              >\n                Password\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"config.userPassword\"\n                name=\"password\"\n                type=\"password\"\n                autocomplete=\"new-password\"\n                required\n                [(ngModel)]=\"model.config.userPassword\"\n              />\n            </div>\n          </div>\n        </div>\n        <!-- change password section ENDS-->\n      </div>\n\n      <!-- Key-based -->\n      <div\n        class=\"tight-grid\"\n        *ngIf=\"authenticationMode.id === 3\"\n      >\n        <!-- KEYSTORE PASSWORD -->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.keystorePass\"\n              translate\n            >\n              Keystore password\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.keystorePass\"\n              name=\"keystorePass\"\n              type=\"password\"\n              required\n              [(ngModel)]=\"model.config.keystorePass\"\n            />\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.certificatePass\"\n              translate\n            >\n              Certificate password\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.certificatePass\"\n              name=\"keystorePass\"\n              type=\"password\"\n              required\n              [(ngModel)]=\"model.config.certificatePass\"\n            />\n          </div>\n        </div>\n        <!-- UPLOAD KEYSTORE -->\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label\n              for=\"certificateUpload\"\n              translate\n            >\n              Upload keystore\n            </label>\n            <input\n              class=\"form-control m-b-8\"\n              placeholder=\"{{ 'e.g.' | translate }} yourKeystore.jks\"\n              name=\"certificateUpload\"\n              type=\"text\"\n              required\n              [readonly]=\"true\"\n              [ngModel]=\"fileName\"\n            />\n            <c8y-drop-area\n              [title]=\"'Import keystore with jks file extension' | translate\"\n              (dropped)=\"uploadFile($event)\"\n              [loadingMessage]=\"'Importing, please wait.' | translate\"\n            ></c8y-drop-area>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"form-group m-b-0 d-flex a-i-center\">\n        <button\n          class=\"btn btn-dot collapse-btn\"\n          title=\"{{ (advancedSettings ? collapse : expand) | translate }}\"\n          [attr.aria-label]=\"(advancedSettings ? collapse : expand) | translate\"\n          [attr.aria-expanded]=\"advancedSettings\"\n          [ngClass]=\"{ active: advancedSettings }\"\n          (click)=\"advancedSettings = !advancedSettings\"\n          data-cy=\"opcua-server-config--advanced-settings-toggle\"\n        >\n          <i c8yIcon=\"chevron-right\"></i>\n        </button>\n        <label class=\"m-0\">\n          <span>{{ 'Advanced settings' | translate }}</span>\n        </label>\n      </div>\n    </div>\n\n    <div\n      class=\"card-block collapse\"\n      [collapse]=\"!advancedSettings\"\n      [isAnimated]=\"true\"\n      [ngClass]=\"{ 'bg-level-1': advancedSettings }\"\n    >\n      <formly-form\n        [form]=\"advancedSettingsForm\"\n        [fields]=\"advancedSettingsFields\"\n        [model]=\"model.config\"\n      ></formly-form>\n    </div>\n  </div>\n  <div class=\"card-footer large-padding separator sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-danger\"\n      title=\"{{ 'Remove' | translate }}\"\n      type=\"button\"\n      (click)=\"remove()\"\n      [disabled]=\"isNew()\"\n    >\n      {{ 'Remove' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      (click)=\"save()\"\n      [disabled]=\"!opcuaConfigForm.valid || !advancedSettingsForm.valid\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServerConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServerConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-server-config', imports: [
                         NgIf,
@@ -2267,10 +2267,10 @@ class OpcuaServerListComponent {
         server.active = true;
         this.present.emit(server);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaServerListComponent, isStandalone: true, selector: "opcua-server-list", inputs: { serverList: "serverList" }, outputs: { present: "present" }, ngImport: i0, template: "<!-- add active class to c8y-stacked-item when clicked -->\n<div class=\"card-block\" *ngIf=\"serverList.length === 0\">\n  <c8y-ui-empty-state\n    class=\"m-l-auto p-l-8 d-flex p-r-16\"\n    [icon]=\"'server'\"\n    [title]=\"'No servers found.' | translate\"\n    [subtitle]=\"'Click below to add a new server.' | translate\"\n  ></c8y-ui-empty-state>\n</div>\n<div\n  class=\"c8y-stacked-item\"\n  [class.active]=\"server.active\"\n  *ngFor=\"let server of serverList\"\n  (click)=\"presentConfig(server)\"\n>\n  <i [c8yIcon]=\"'server'\" class=\"icon-20\"></i>\n  <div class=\"p-l-16 text-truncate\">\n    <p id=\"serverName\" class=\"text-truncate\">{{ server.name }}</p>\n    <small id=\"serverUrl\" class=\"text-truncate text-muted\">{{ server.config.serverUrl }}</small>\n  </div>\n  <div class=\"m-l-auto p-l-8 d-flex p-r-16 a-i-center\">\n    <device-status class=\"p-r-8\" [mo]=\"server\"></device-status>\n    <button\n      class=\"btn btn-dot text-gray-darker\"\n      type=\"button\"\n      [attr.aria-label]=\"server.quickInfo.padlockMsg | translate\"\n      tooltip=\"{{ server.quickInfo.padlockMsg | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n    >\n      <i [c8yIcon]=\"server.quickInfo.padlock\"></i>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaServerListComponent, isStandalone: true, selector: "opcua-server-list", inputs: { serverList: "serverList" }, outputs: { present: "present" }, ngImport: i0, template: "<!-- add active class to c8y-stacked-item when clicked -->\n<div class=\"card-block\" *ngIf=\"serverList.length === 0\">\n  <c8y-ui-empty-state\n    class=\"m-l-auto p-l-8 d-flex p-r-16\"\n    [icon]=\"'server'\"\n    [title]=\"'No servers found.' | translate\"\n    [subtitle]=\"'Click below to add a new server.' | translate\"\n  ></c8y-ui-empty-state>\n</div>\n<div\n  class=\"c8y-stacked-item\"\n  [class.active]=\"server.active\"\n  *ngFor=\"let server of serverList\"\n  (click)=\"presentConfig(server)\"\n>\n  <i [c8yIcon]=\"'server'\" class=\"icon-20\"></i>\n  <div class=\"p-l-16 text-truncate\">\n    <p id=\"serverName\" class=\"text-truncate\">{{ server.name }}</p>\n    <small id=\"serverUrl\" class=\"text-truncate text-muted\">{{ server.config.serverUrl }}</small>\n  </div>\n  <div class=\"m-l-auto p-l-8 d-flex p-r-16 a-i-center\">\n    <device-status class=\"p-r-8\" [mo]=\"server\"></device-status>\n    <button\n      class=\"btn btn-dot text-gray-darker\"\n      type=\"button\"\n      [attr.aria-label]=\"server.quickInfo.padlockMsg | translate\"\n      tooltip=\"{{ server.quickInfo.padlockMsg | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n    >\n      <i [c8yIcon]=\"server.quickInfo.padlock\"></i>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServerListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServerListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-server-list', imports: [
                         NgIf,
@@ -2295,10 +2295,10 @@ class OpcuaServerGuard {
         const { contextData } = data;
         return contextData && contextData.type === this.type;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServerGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServerGuard }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServerGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServerGuard }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServerGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServerGuard, decorators: [{
             type: Injectable
         }] });
 
@@ -2488,10 +2488,10 @@ class OpcuaServersComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServersComponent, deps: [{ token: OpcuaService }, { token: i2$1.AlertService }, { token: i3.TranslateService }, { token: i2$1.ContextRouteComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OpcuaServersComponent, isStandalone: true, selector: "opcua-servers", ngImport: i0, template: "<div class=\"card content-fullpage split-view--5-7\">\n  <div class=\"card-header grid__col--fullspan separator\">\n    <div class=\"h4 card-title\">OPC UA servers</div>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Below you can configure one or more OPC UA servers. The OPC UA agent will connect to these servers if they are enabled and the connection state is set to connected.'\n          | translate\n      }}\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n  </div>\n  <div class=\"inner-scroll split-view__list\">\n    <div class=\"bg-level-1 flex-grow\">\n      <div class=\"c8y-nav-stacked\">\n        <opcua-server-list\n          [serverList]=\"serverObjectList\"\n          (present)=\"onPresent($event)\"\n        ></opcua-server-list>\n      </div>\n    </div>\n    <div class=\"card-footer separator sticky-bottom\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Add server' | translate }}\"\n        type=\"button\"\n        [disabled]=\"localServerObjectExist()\"\n        (click)=\"addServer()\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\"></i>\n        {{ 'Add server' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <opcua-server-config\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': server }\"\n    (canceled)=\"onCanceled($event)\"\n    (removed)=\"onRemoved($event)\"\n    (saved)=\"onSaved($event)\"\n    (updated)=\"onUpdated($event)\"\n    [server]=\"server\"\n  ></opcua-server-config>\n</div>\n", dependencies: [{ 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: OpcuaServerListComponent, selector: "opcua-server-list", inputs: ["serverList"], outputs: ["present"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: OpcuaServerConfigComponent, selector: "opcua-server-config", inputs: ["server"], outputs: ["canceled", "removed", "saved", "updated"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServersComponent, deps: [{ token: OpcuaService }, { token: i2$1.AlertService }, { token: i3.TranslateService }, { token: i2$1.ContextRouteComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OpcuaServersComponent, isStandalone: true, selector: "opcua-servers", ngImport: i0, template: "<div class=\"card content-fullpage split-view--5-7\">\n  <div class=\"card-header grid__col--fullspan separator\">\n    <div class=\"h4 card-title\">OPC UA servers</div>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Below you can configure one or more OPC UA servers. The OPC UA agent will connect to these servers if they are enabled and the connection state is set to connected.'\n          | translate\n      }}\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n  </div>\n  <div class=\"inner-scroll split-view__list\">\n    <div class=\"bg-level-1 flex-grow\">\n      <div class=\"c8y-nav-stacked\">\n        <opcua-server-list\n          [serverList]=\"serverObjectList\"\n          (present)=\"onPresent($event)\"\n        ></opcua-server-list>\n      </div>\n    </div>\n    <div class=\"card-footer separator sticky-bottom\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Add server' | translate }}\"\n        type=\"button\"\n        [disabled]=\"localServerObjectExist()\"\n        (click)=\"addServer()\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\"></i>\n        {{ 'Add server' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <opcua-server-config\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': server }\"\n    (canceled)=\"onCanceled($event)\"\n    (removed)=\"onRemoved($event)\"\n    (saved)=\"onSaved($event)\"\n    (updated)=\"onUpdated($event)\"\n    [server]=\"server\"\n  ></opcua-server-config>\n</div>\n", dependencies: [{ 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: OpcuaServerListComponent, selector: "opcua-server-list", inputs: ["serverList"], outputs: ["present"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: OpcuaServerConfigComponent, selector: "opcua-server-config", inputs: ["server"], outputs: ["canceled", "removed", "saved", "updated"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaServersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaServersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-servers', imports: [
                         PopoverDirective,
@@ -2530,8 +2530,8 @@ const deviceProtocolRoutes = [
     }
 ];
 class OpcuaProtocolModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaProtocolModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OpcuaProtocolModule, imports: [CoreModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaProtocolModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: OpcuaProtocolModule, imports: [CoreModule,
             FormsModule$1,
             ReactiveFormsModule,
             DropAreaModule,
@@ -2553,7 +2553,7 @@ class OpcuaProtocolModule {
             OpcuaDeviceProtocolObjectMappingStatus,
             OpcuaAutoApplySettingsComponent,
             OpcuaDeviceProtocolBrowsePathValidation] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaProtocolModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaProtocolModule, providers: [
             OpcuaAgentGuard,
             OpcuaServerGuard,
             OpcuaMicroserviceGuard,
@@ -2587,7 +2587,7 @@ class OpcuaProtocolModule {
             OpcuaDeviceProtocolMapping,
             OpcuaAutoApplySettingsComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OpcuaProtocolModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpcuaProtocolModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [