@c8y/ngx-components 1022.13.0 → 1022.16.2

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

@@ -4,35 +4,32 @@ import * as i1 from '@c8y/client';
 import { OperationStatus } from '@c8y/client';
 import { BehaviorSubject, merge, Subject, debounceTime } from 'rxjs';
 import { omit, isEmpty, some, isEqual, reject, isNil, get, assign, cloneDeep, unset as unset$1, set as set$1, find, findIndex, pick, has } from 'lodash-es';
-import * as i2 from '@angular/common';
+import { NgClass, NgFor, NgIf, JsonPipe, KeyValuePipe } from '@angular/common';
 import * as i2$1 from '@c8y/ngx-components';
-import { gettext, Status, DropAreaComponent, ViewContext, CoreModule, FormsModule, DropAreaModule, DeviceStatusModule, DynamicFormsModule, hookRoute } from '@c8y/ngx-components';
-import * as i2$2 from '@angular/router';
+import { C8yTranslatePipe, IconDirective, LoadingComponent, C8yTranslateDirective, gettext, FormGroupComponent, SelectLegacyComponent, ListItemComponent, FilterInputComponent, ListItemBodyComponent, ListItemCheckboxComponent, InputGroupListContainerDirective, InputGroupListComponent, RequiredInputPlaceholderDirective, MinValidationDirective, DatePipe, MessagesComponent, MessageDirective, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, EmptyStateComponent, Status, DeviceStatusComponent, DefaultValidationDirective, DropAreaComponent, ViewContext, CoreModule, FormsModule as FormsModule$1, DropAreaModule, DeviceStatusModule, DynamicFormsModule, hookRoute } from '@c8y/ngx-components';
+import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i4 from '@angular/forms';
-import { NG_VALIDATORS, NgModelGroup, ControlContainer, NgForm, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import * as i5 from '@angular/cdk/tree';
-import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
+import * as i2$2 from '@angular/forms';
+import { NG_VALIDATORS, FormsModule, NgModelGroup, ControlContainer, NgForm, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { NestedTreeControl, CdkTree, CdkTreeNodeDef, CdkNestedTreeNode, CdkTreeNodeToggle, CdkTreeNodeOutlet, CdkTreeModule } from '@angular/cdk/tree';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import * as i8 from '@c8y/ngx-components/device-protocol-object-mappings';
 import { BaseObjectMapping, MeasurementObjectMapping, EventObjectMapping, AlarmObjectMapping, ALARM_SEVERITY, ObjectMappingComponent } from '@c8y/ngx-components/device-protocol-object-mappings';
-import * as i7 from '@c8y/ngx-components/operations/operation-details';
-import { OperationDetailsModule } from '@c8y/ngx-components/operations/operation-details';
-import * as i4$2 from 'ngx-bootstrap/buttons';
-import { ButtonsModule } from 'ngx-bootstrap/buttons';
+import { OperationDetailsComponent, OperationDetailsModule } from '@c8y/ngx-components/operations/operation-details';
+import { ButtonCheckboxDirective, ButtonsModule } from 'ngx-bootstrap/buttons';
 import * as i4$1 from 'ngx-bootstrap/collapse';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i7$1 from 'ngx-bootstrap/dropdown';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import * as i5$3 from 'ngx-bootstrap/popover';
-import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i5$1 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { CollapseDirective, CollapseModule } from 'ngx-bootstrap/collapse';
+import * as i5 from 'ngx-bootstrap/dropdown';
+import { BsDropdownDirective, BsDropdownToggleDirective, BsDropdownMenuDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import * as i3$1 from 'ngx-bootstrap/popover';
+import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
+import * as i2$3 from 'ngx-bootstrap/tooltip';
+import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { clone, toInteger, unset, set, cloneDeep as cloneDeep$1 } from 'lodash';
 import { map, takeUntil, filter } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UpgradeComponent, downgradeComponent } from '@angular/upgrade/static';
-import * as i5$2 from '@ngx-formly/core';
+import * as i4 from '@ngx-formly/core';
+import { FormlyModule } from '@ngx-formly/core';
 import * as i3 from '@ngx-translate/core';
 import * as angular from 'angular';
 import { registerNgModule } from '@c8y/ng1-modules';
@@ -176,11 +173,11 @@ class OpcuaAddressSpaceDetailComponent {
         this.addressSpaceService.triggerNodeToOpen(nodeNavData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaAddressSpaceDetailComponent, deps: [{ token: AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaAddressSpaceDetailComponent, isStandalone: false, 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaAddressSpaceDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-address-space-detail', standalone: false, 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" }]
+            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: [{
                 type: Input
             }], toggleAttrDetail: [{
@@ -369,12 +366,12 @@ class OpcuaService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaService, deps: [{ token: i1.FetchClient }, { token: i1.InventoryService }, { token: i2$2.Router }, { token: i2$1.AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1.InventoryService }, { type: i2$2.Router }, { type: i2$1.AlertService }] });
+        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1.InventoryService }, { type: i2.Router }, { type: i2$1.AlertService }] });
 
 class OpcuaAgentGuard {
     constructor() {
@@ -430,7 +427,7 @@ class OpcuaDeviceProtocolBrowsePathValidation {
         return found ? true : false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolBrowsePathValidation, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaDeviceProtocolBrowsePathValidation, isStandalone: false, selector: "[c8yBrowsePathValidator][ngModel]", inputs: { getMappings: "getMappings", model: "model" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaDeviceProtocolBrowsePathValidation, isStandalone: true, selector: "[c8yBrowsePathValidator][ngModel]", inputs: { getMappings: "getMappings", model: "model" }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => OpcuaDeviceProtocolBrowsePathValidation),
@@ -448,8 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => OpcuaDeviceProtocolBrowsePathValidation),
                             multi: true
                         }
-                    ],
-                    standalone: false
+                    ]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { getMappings: [{
                 type: Input
@@ -677,11 +673,23 @@ class OpcuaAddressSpaceTreeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: OpcuaAddressSpaceTreeComponent, isStandalone: false, 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: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaAddressSpaceTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-address-space-tree', standalone: false, 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" }]
+            args: [{ selector: 'opcua-address-space-tree', imports: [
+                        NgIf,
+                        CdkTree,
+                        CdkTreeNodeDef,
+                        CdkNestedTreeNode,
+                        NgClass,
+                        IconDirective,
+                        CdkTreeNodeToggle,
+                        CdkTreeNodeOutlet,
+                        LoadingComponent,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe
+                    ], 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" }]
         }], ctorParameters: () => [{ type: AddressSpaceService }, { type: OpcuaService }, { type: i2$1.AlertService }], propDecorators: { moId: [{
                 type: Input
             }], node: [{
@@ -839,11 +847,22 @@ class OpcuaAddressSpaceComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: OpcuaAddressSpaceComponent, isStandalone: false, 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: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { 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: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaAddressSpaceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-address-space', standalone: false, 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" }]
+            args: [{ selector: 'opcua-address-space', imports: [
+                        NgIf,
+                        OperationDetailsComponent,
+                        FormsModule,
+                        IconDirective,
+                        LoadingComponent,
+                        NgFor,
+                        NgClass,
+                        OpcuaAddressSpaceTreeComponent,
+                        OpcuaAddressSpaceDetailComponent,
+                        C8yTranslatePipe
+                    ], 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" }]
         }], ctorParameters: () => [{ type: AddressSpaceService }, { type: OpcuaService }, { type: i1.OperationService }, { type: i2$1.OperationRealtimeService }, { type: i2$1.AlertService }, { type: i2$1.ModalService }], propDecorators: { focusStatus: [{
                 type: Output
             }] } });
@@ -980,11 +999,27 @@ class OpcuaAutoApplySettingsComponent {
         this.updateConstraints(this.selectedItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaAutoApplySettingsComponent, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaAutoApplySettingsComponent, isStandalone: false, 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: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2$1.InputGroupListComponent, selector: "c8y-input-group-list", inputs: ["plus", "minus", "index"], outputs: ["onRemove", "onAdd"] }, { kind: "directive", type: i2$1.InputGroupListContainerDirective, selector: "[c8yInputGroupListContainer]" }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2$1.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2$1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2$1.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: i4$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaAutoApplySettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-auto-apply', standalone: false, 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" }]
+            args: [{ selector: 'opcua-auto-apply', imports: [
+                        C8yTranslateDirective,
+                        CollapseDirective,
+                        FormGroupComponent,
+                        SelectLegacyComponent,
+                        NgIf,
+                        ListItemComponent,
+                        FilterInputComponent,
+                        ListItemBodyComponent,
+                        NgFor,
+                        ListItemCheckboxComponent,
+                        FormsModule,
+                        InputGroupListContainerDirective,
+                        InputGroupListComponent,
+                        RequiredInputPlaceholderDirective,
+                        C8yTranslatePipe
+                    ], 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" }]
         }], ctorParameters: () => [{ type: i1.InventoryService }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1074,11 +1109,20 @@ class OpcuaDeviceProtocolDataReportingComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolDataReportingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaDeviceProtocolDataReportingComponent, isStandalone: false, 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: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolDataReportingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-device-protocol-data-reporting', viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }], standalone: false, 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" }]
+            args: [{ selector: 'opcua-device-protocol-data-reporting', viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }], imports: [
+                        FormGroupComponent,
+                        C8yTranslateDirective,
+                        NgFor,
+                        FormsModule,
+                        RequiredInputPlaceholderDirective,
+                        CollapseDirective,
+                        MinValidationDirective,
+                        C8yTranslatePipe
+                    ], 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" }]
         }], propDecorators: { model: [{
                 type: Input
             }], groupName: [{
@@ -1100,11 +1144,20 @@ class OpcuaDeviceProtocolDescription {
         this._model.enabled = data !== '0' ? true : false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolDescription, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaDeviceProtocolDescription, isStandalone: false, 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: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.DatePipe, name: "c8yDate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolDescription, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-device-protocol-description', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, 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" }]
+            args: [{ selector: 'opcua-device-protocol-description', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
+                        C8yTranslateDirective,
+                        NgClass,
+                        FormsModule,
+                        NgIf,
+                        ButtonCheckboxDirective,
+                        IconDirective,
+                        C8yTranslatePipe,
+                        DatePipe
+                    ], template: "<div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24\">\n  <div class=\"content-flex-70\">\n    <div class=\"text-center\">\n      <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-protocols\"></i>\n      <p>\n        <small class=\"label label-info\">{{ _model.fieldbusType }}</small>\n      </p>\n    </div>\n    <div class=\"flex-grow col-10\">\n      <div class=\"content-flex-80\">\n        <div class=\"col-9\">\n          <div class=\"form-group form-group-lg m-b-0\">\n            <label class=\"sr-only\" translate>Name</label>\n            <label class=\"editable\" [ngClass]=\"{ updated: ctrlName.dirty }\">\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"name\"\n                #ctrlName=\"ngModel\"\n                [(ngModel)]=\"_model.name\"\n                style=\"max-width:calc( {{ _model.name.length || 10 }} * 1ch + 14px)\"\n              />\n            </label>\n          </div>\n          <div class=\"form-group\">\n            <label class=\"sr-only\" translate>Description</label>\n            <label class=\"editable\" [ngClass]=\"{ updated: ctrlDescription.dirty }\">\n              <textarea\n                class=\"form-control\"\n                rows=\"1\"\n                name=\"description\"\n                placeholder=\"{{ 'e.g. My protocol description' | translate }}\"\n                #ctrlDescription=\"ngModel\"\n                [(ngModel)]=\"_model.description\"\n                style=\"max-width:calc( {{ _model.description?.length || 25 }} * 1ch + 14px)\"\n              ></textarea>\n              <span *ngIf=\"_model.description\">\n                {{ _model.description }}\n              </span>\n            </label>\n          </div>\n          <div class=\"d-flex\">\n            <div>\n              <button\n                type=\"button\"\n                class=\"btn\"\n                name=\"autoScanAddressSpace\"\n                [(ngModel)]=\"autoScan\"\n                (ngModelChange)=\"setAutoScanOption($event)\"\n                btnCheckbox\n                btnCheckboxTrue=\"1\"\n                btnCheckboxFalse=\"0\"\n                ngDefaultControl\n              >\n                <i *ngIf=\"autoScan === '1'\" c8yIcon=\"check\" class=\"text-success\"></i>\n                <span *ngIf=\"autoScan === '1'\">\n                  {{ 'Active`auto scanning`' | translate }}\n                </span>\n\n                <i *ngIf=\"autoScan === '0'\" c8yIcon=\"ban\" class=\"text-danger\"></i>\n                <span *ngIf=\"autoScan === '0'\">\n                  {{ 'Inactive`auto scanning`' | translate }}\n                </span>\n              </button>\n            </div>\n            <small class=\"m-l-16 text-muted\">\n              {{\n                'When active, the gateway scans the address space of all servers and automatically applies this device protocol to all nodes matching the criteria.'\n                  | translate\n              }}\n            </small>\n          </div>\n        </div>\n        <div class=\"flex-grow\">\n          <ul class=\"list-unstyled small\">\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>ID</label>\n              <span class=\"m-l-auto\">{{ _model.id }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Date created</label>\n              <span class=\"m-l-auto\">{{ _model.creationTime | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Last update</label>\n              <span class=\"m-l-auto\">{{ _model.lastUpdated | c8yDate }}</span>\n            </li>\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n              <label class=\"small m-b-0 m-r-8\" translate>Fieldbus version</label>\n              <span class=\"m-l-auto\">{{ _model.fieldbusVersion }}</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1266,14 +1319,11 @@ class OpcuaDeviceProtocolObjectMappingStatus extends UpgradeComponent {
         super('c8yObjectMappingStatusIcons', elementRef, injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: OpcuaDeviceProtocolObjectMappingStatus, isStandalone: false, selector: "c8y-object-mapping-status-icons", inputs: { mapping: "mapping" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaDeviceProtocolObjectMappingStatus, isStandalone: true, selector: "c8y-object-mapping-status-icons", inputs: { mapping: "mapping" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolObjectMappingStatus, decorators: [{
             type: Directive,
-            args: [{
-                    selector: 'c8y-object-mapping-status-icons',
-                    standalone: false
-                }]
+            args: [{ selector: 'c8y-object-mapping-status-icons' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { mapping: [{
                 type: Input
             }] } });
@@ -1472,11 +1522,32 @@ class OpcuaDeviceProtocolMapping {
         this.mapping.subscriptionType = value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolMapping, deps: [{ token: AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaDeviceProtocolMapping, isStandalone: false, 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: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i4$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i7$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i7$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i7$1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i8.ObjectMappingComponent, selector: "c8y-device-protocol-object-mappings", inputs: ["data", "objectMappingTypes"], outputs: ["onUpdate"] }, { kind: "component", type: OpcuaAddressSpaceTreeComponent, selector: "opcua-address-space-tree", inputs: ["moId", "node", "focusEmitter"], outputs: ["selectedNode"] }, { kind: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "directive", type: OpcuaDeviceProtocolObjectMappingStatus, selector: "c8y-object-mapping-status-icons", inputs: ["mapping"] }, { kind: "directive", type: OpcuaDeviceProtocolBrowsePathValidation, selector: "[c8yBrowsePathValidator][ngModel]", inputs: ["getMappings", "model"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolMapping, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-device-protocol-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }], standalone: false, 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" }]
+            args: [{ selector: 'opcua-device-protocol-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }], imports: [
+                        NgClass,
+                        IconDirective,
+                        NgIf,
+                        OpcuaDeviceProtocolObjectMappingStatus,
+                        TooltipDirective,
+                        CollapseDirective,
+                        FormsModule,
+                        FormGroupComponent,
+                        BsDropdownDirective,
+                        RequiredInputPlaceholderDirective,
+                        OpcuaDeviceProtocolBrowsePathValidation,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective,
+                        OpcuaAddressSpaceTreeComponent,
+                        MessagesComponent,
+                        MessageDirective,
+                        OpcuaDeviceProtocolDataReportingComponent,
+                        ObjectMappingComponent,
+                        C8yTranslatePipe,
+                        JsonPipe
+                    ], 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" }]
         }], ctorParameters: () => [{ type: AddressSpaceService }], propDecorators: { subFormRef: [{
                 type: ViewChild,
                 args: ['variableForm', { static: false }]
@@ -1674,13 +1745,28 @@ class OpcuaDeviceProtocolDetailComponent {
         }
         return !deviceTypeForm.form.valid;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OpcuaService }, { token: i2$1.AlertService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaDeviceProtocolDetailComponent, isStandalone: false, 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: "component", type: i2$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i4.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: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "component", type: OpcuaDeviceProtocolMapping, selector: "opcua-device-protocol-mapping", inputs: ["resource", "index", "getParentAttr", "referencedServerId", "referencedRootNodeId"], outputs: ["onAction"] }, { kind: "component", type: OpcuaAutoApplySettingsComponent, selector: "opcua-auto-apply", inputs: ["model"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaDeviceProtocolDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-device-protocol-detail', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: OpcuaService }, { type: i2$1.AlertService }, { type: i2$2.Router }], propDecorators: { instanceList: [{
+            args: [{ selector: 'opcua-device-protocol-detail', imports: [
+                        NgIf,
+                        TitleComponent,
+                        BreadcrumbComponent,
+                        BreadcrumbItemComponent,
+                        FormsModule,
+                        OpcuaDeviceProtocolDescription,
+                        C8yTranslateDirective,
+                        NgFor,
+                        OpcuaDeviceProtocolMapping,
+                        EmptyStateComponent,
+                        IconDirective,
+                        OpcuaDeviceProtocolDataReportingComponent,
+                        OpcuaAutoApplySettingsComponent,
+                        C8yTranslatePipe
+                    ], template: "<c8y-title *ngIf=\"!isLoaded\">{{ model.name }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device types' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-protocols'\"\n    [label]=\"'Device protocols' | translate\"\n    [path]=\"'deviceprotocols'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [icon]=\"'c8y-device-protocols'\" [label]=\"model?.name\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <form #deviceTypeForm=\"ngForm\" name=\"detailForm\" *ngIf=\"!isLoaded\" class=\"card card--fullpage\">\n      <opcua-device-protocol-description [model]=\"model\"></opcua-device-protocol-description>\n      <div class=\"inner-scroll\">\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n            <div class=\"h4\" translate>Variables</div>\n          </div>\n          <div class=\"p-l-16 p-r-16\">\n            <div class=\"c8y-list__group\" *ngIf=\"model.mappings.length > 0\" ngModelGroup=\"variable\">\n              <opcua-device-protocol-mapping\n                *ngFor=\"let resource of getMapping(); index as i; trackBy: trackById\"\n                [index]=\"i\"\n                [referencedServerId]=\"model.referencedServerId\"\n                [referencedRootNodeId]=\"model.referencedRootNodeId\"\n                [resource]=\"getStructuredResource(resource)\"\n                [getParentAttr]=\"getParentAttr\"\n                (onAction)=\"actionHandler($event)\"\n              ></opcua-device-protocol-mapping>\n            </div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16\">\n            <c8y-ui-empty-state\n              *ngIf=\"model.mappings.length === 0\"\n              [icon]=\"'sliders'\"\n              [title]=\"'No variables to display.' | translate\"\n              [subtitle]=\"'Click below to add your first variable.' | translate\"\n            ></c8y-ui-empty-state>\n\n            <div class=\"card-footer\">\n              <button\n                type=\"button\"\n                title=\"{{ 'Add variable' | translate }}\"\n                class=\"btn btn-default addVariableBtn\"\n                (click)=\"addVariable()\"\n              >\n                <i c8yIcon=\"plus-circle\"></i>\n                {{ 'Add variable' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n            <div class=\"h4\" translate>Data reporting</div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16\" ngModelGroup=\"subscription\">\n            <opcua-device-protocol-data-reporting\n              [groupName]=\"'subscription'\"\n              [model]=\"model\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n        <div class=\"d-contents\">\n          <div class=\"card-header separator-top-bottom sticky-top\">\n            <div class=\"h4\" translate>Auto apply constraints</div>\n          </div>\n          <div class=\"p-l-16 p-r-16 p-t-16 overflow-visible\" ngModelGroup=\"autoApply\">\n            <opcua-auto-apply [model]=\"model\"></opcua-auto-apply>\n          </div>\n        </div>\n\n        <div class=\"card-footer sticky-bottom separator\" style=\"z-index: 101\">\n          <button\n            title=\"{{ 'Save' | translate }}\"\n            id=\"deviceTypeSave\"\n            class=\"btn btn-primary\"\n            (click)=\"save()\"\n            [disabled]=\"canSave(deviceTypeForm)\"\n            type=\"button\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: OpcuaService }, { type: i2$1.AlertService }, { type: i2.Router }], propDecorators: { instanceList: [{
                 type: ViewChildren,
                 args: [OpcuaDeviceProtocolMapping]
             }] } });
@@ -2129,11 +2215,30 @@ class OpcuaServerConfigComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: OpcuaServerConfigComponent, isStandalone: false, 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: "component", type: i2$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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: i2$1.DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2$1.DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "component", type: i5$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: i4$2.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: i4$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaServerConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-server-config', standalone: false, 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" }]
+            args: [{ selector: 'opcua-server-config', imports: [
+                        NgIf,
+                        EmptyStateComponent,
+                        FormsModule,
+                        IconDirective,
+                        FormGroupComponent,
+                        RequiredInputPlaceholderDirective,
+                        MessagesComponent,
+                        MessageDirective,
+                        C8yTranslateDirective,
+                        ButtonCheckboxDirective,
+                        DeviceStatusComponent,
+                        DefaultValidationDirective,
+                        NgFor,
+                        DropAreaComponent,
+                        NgClass,
+                        CollapseDirective,
+                        FormlyModule,
+                        C8yTranslatePipe
+                    ], 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" }]
         }], ctorParameters: () => [{ type: OpcuaService }, { type: i2$1.ModalService }, { type: i2$1.AlertService }, { type: i0.ChangeDetectorRef }], propDecorators: { opcuaConfigForm: [{
                 type: ViewChild,
                 args: ['opcuaConfigForm', { static: false }]
@@ -2162,11 +2267,19 @@ class OpcuaServerListComponent {
         this.present.emit(server);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaServerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OpcuaServerListComponent, isStandalone: false, 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: "component", type: i2$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaServerListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-server-list', standalone: false, 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" }]
+            args: [{ selector: 'opcua-server-list', imports: [
+                        NgIf,
+                        EmptyStateComponent,
+                        NgFor,
+                        IconDirective,
+                        DeviceStatusComponent,
+                        TooltipDirective,
+                        C8yTranslatePipe
+                    ], 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" }]
         }], propDecorators: { serverList: [{
                 type: Input
             }], present: [{
@@ -2375,11 +2488,18 @@ class OpcuaServersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", type: OpcuaServersComponent, isStandalone: false, 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: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$3.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: "component", type: OpcuaServerConfigComponent, selector: "opcua-server-config", inputs: ["server"], outputs: ["canceled", "removed", "saved", "updated"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: OpcuaServersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'opcua-servers', standalone: false, 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" }]
+            args: [{ selector: 'opcua-servers', imports: [
+                        PopoverDirective,
+                        OpcuaServerListComponent,
+                        IconDirective,
+                        OpcuaServerConfigComponent,
+                        NgClass,
+                        C8yTranslatePipe
+                    ], 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" }]
         }], ctorParameters: () => [{ type: OpcuaService }, { type: i2$1.AlertService }, { type: i3.TranslateService }, { type: i2$1.ContextRouteComponent, decorators: [{
                     type: Optional
                 }] }] });
@@ -2410,7 +2530,16 @@ const deviceProtocolRoutes = [
 ];
 class OpcuaProtocolModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaProtocolModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: OpcuaProtocolModule, declarations: [OpcuaServersComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: OpcuaProtocolModule, imports: [CoreModule,
+            FormsModule$1,
+            ReactiveFormsModule,
+            DropAreaModule,
+            ButtonsModule,
+            CdkTreeModule, i2.RouterModule, i2$3.TooltipModule, i3$1.PopoverModule, DeviceStatusModule,
+            OperationDetailsModule,
+            BrowserAnimationsModule, i4$1.CollapseModule, i5.BsDropdownModule, ObjectMappingComponent,
+            DynamicFormsModule,
+            OpcuaServersComponent,
             OpcuaServerListComponent,
             OpcuaServerConfigComponent,
             OpcuaAddressSpaceComponent,
@@ -2422,15 +2551,7 @@ class OpcuaProtocolModule {
             OpcuaDeviceProtocolMapping,
             OpcuaDeviceProtocolObjectMappingStatus,
             OpcuaAutoApplySettingsComponent,
-            OpcuaDeviceProtocolBrowsePathValidation], imports: [CoreModule,
-            FormsModule,
-            ReactiveFormsModule,
-            DropAreaModule,
-            ButtonsModule,
-            CdkTreeModule, i2$2.RouterModule, i5$1.TooltipModule, i5$3.PopoverModule, DeviceStatusModule,
-            OperationDetailsModule,
-            BrowserAnimationsModule, i4$1.CollapseModule, i7$1.BsDropdownModule, ObjectMappingComponent,
-            DynamicFormsModule] }); }
+            OpcuaDeviceProtocolBrowsePathValidation] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaProtocolModule, providers: [
             OpcuaAgentGuard,
             OpcuaServerGuard,
@@ -2439,7 +2560,7 @@ class OpcuaProtocolModule {
             AddressSpaceService,
             hookRoute(opcuaRoutes)
         ], imports: [CoreModule,
-            FormsModule,
+            FormsModule$1,
             ReactiveFormsModule,
             DropAreaModule,
             ButtonsModule,
@@ -2453,29 +2574,24 @@ class OpcuaProtocolModule {
             CollapseModule.forRoot(),
             BsDropdownModule.forRoot(),
             ObjectMappingComponent,
-            DynamicFormsModule] }); }
+            DynamicFormsModule,
+            OpcuaServersComponent,
+            OpcuaServerListComponent,
+            OpcuaServerConfigComponent,
+            OpcuaAddressSpaceComponent,
+            OpcuaAddressSpaceTreeComponent,
+            OpcuaDeviceProtocolDescription,
+            OpcuaDeviceProtocolDetailComponent,
+            OpcuaDeviceProtocolDataReportingComponent,
+            OpcuaDeviceProtocolMapping,
+            OpcuaAutoApplySettingsComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpcuaProtocolModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        OpcuaServersComponent,
-                        OpcuaServerListComponent,
-                        OpcuaServerConfigComponent,
-                        OpcuaAddressSpaceComponent,
-                        OpcuaAddressSpaceTreeComponent,
-                        OpcuaAddressSpaceDetailComponent,
-                        OpcuaDeviceProtocolDescription,
-                        OpcuaDeviceProtocolDetailComponent,
-                        OpcuaDeviceProtocolDataReportingComponent,
-                        OpcuaDeviceProtocolMapping,
-                        OpcuaDeviceProtocolObjectMappingStatus,
-                        OpcuaAutoApplySettingsComponent,
-                        OpcuaDeviceProtocolBrowsePathValidation
-                    ],
                     imports: [
                         CoreModule,
-                        FormsModule,
+                        FormsModule$1,
                         ReactiveFormsModule,
                         DropAreaModule,
                         ButtonsModule,
@@ -2489,7 +2605,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CollapseModule.forRoot(),
                         BsDropdownModule.forRoot(),
                         ObjectMappingComponent,
-                        DynamicFormsModule
+                        DynamicFormsModule,
+                        OpcuaServersComponent,
+                        OpcuaServerListComponent,
+                        OpcuaServerConfigComponent,
+                        OpcuaAddressSpaceComponent,
+                        OpcuaAddressSpaceTreeComponent,
+                        OpcuaAddressSpaceDetailComponent,
+                        OpcuaDeviceProtocolDescription,
+                        OpcuaDeviceProtocolDetailComponent,
+                        OpcuaDeviceProtocolDataReportingComponent,
+                        OpcuaDeviceProtocolMapping,
+                        OpcuaDeviceProtocolObjectMappingStatus,
+                        OpcuaAutoApplySettingsComponent,
+                        OpcuaDeviceProtocolBrowsePathValidation
                     ],
                     providers: [
                         OpcuaAgentGuard,