@c8y/ngx-components 1023.70.0 → 1023.75.1

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

@@ -1523,7 +1523,7 @@ class OpcuaDeviceProtocolMapping {
         this.mapping.subscriptionType = value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OpcuaDeviceProtocolMapping, deps: [{ token: AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: OpcuaDeviceProtocolMapping, isStandalone: true, selector: "opcua-device-protocol-mapping", inputs: { _model: ["resource", "_model"], index: "index", getParentAttr: "getParentAttr", referencedServerId: "referencedServerId", referencedRootNodeId: "referencedRootNodeId" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "subFormRef", first: true, predicate: ["variableForm"], descendants: true }, { propertyName: "browsePathModel", first: true, predicate: ["browsePathModel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-list__item\"\n  [ngClass]=\"{ expanded: isDetailOpen }\"\n  [attr.data-cy]=\"mapping.browsePath | json\"\n>\n  <div class=\"c8y-list__item__block\">\n    <div class=\"c8y-list__item__icon\">\n      <i c8yIcon=\"sliders\"></i>\n    </div>\n    <div class=\"c8y-list__item__body\">\n      <div class=\"content-flex-70\">\n        <div class=\"col-5\">\n          <p\n            class=\"text-truncate\"\n            title=\" {{ nodeDisplayName }} {{\n              mapping.browsePath.length > 0 ? (mapping.browsePath | json) : ''\n            }}\"\n            (click)=\"toggleDetail()\"\n          >\n            {{ nodeDisplayName }}\n            <small\n              class=\"text-muted\"\n              *ngIf=\"mapping.browsePath.length > 0\"\n            >\n              {{ mapping.browsePath | json }}\n            </small>\n          </p>\n        </div>\n        <div class=\"col-5\">\n          <div class=\"list-functionalities\">\n            <label class=\"small m-r-8 m-b-0 hidden-xs\">\n              {{ 'Functionalities' | translate }}\n            </label>\n            <c8y-object-mapping-status-icons [mapping]=\"mapping\"></c8y-object-mapping-status-icons>\n          </div>\n        </div>\n        <div class=\"flex-grow d-flex p-r-8\">\n          <button\n            class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            tooltip=\"{{ 'Remove' | translate }}\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <i\n              c8yIcon=\"minus-circle\"\n              (click)=\"onDelete()\"\n            ></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"c8y-list__item__actions\">\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        type=\"button\"\n        [ngClass]=\"{ active: isDetailOpen }\"\n        (click)=\"toggleDetail()\"\n        [attr.data-cy]=\"'toggleDetail'\"\n      >\n        <i c8yIcon=\"chevron-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"collapse\"\n    [collapse]=\"!isDetailOpen\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <div\n        class=\"form\"\n        [ngModelGroup]=\"index\"\n        #variableForm=\"ngModelGroup\"\n        *ngIf=\"isDetailOpen\"\n      >\n        <div class=\"row p-t-8\">\n          <c8y-form-group\n            class=\"col-md-4\"\n            [status]=\"!isBrowsePathUniq ? 'error' : ''\"\n            *ngIf=\"showAddressSpaceTree(); else simpleInput\"\n          >\n            <label>{{ 'Path' | translate }}</label>\n            <div\n              class=\"dropdown fit-w\"\n              dropdown\n              #dropdown=\"bs-dropdown\"\n              [insideClick]=\"true\"\n            >\n              <div class=\"input-group\">\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                  name=\"browsePath\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  required\n                  c8yBrowsePathValidator\n                  [getMappings]=\"getMappings\"\n                  [model]=\"mapping\"\n                  [(ngModel)]=\"browsePath\"\n                  (change)=\"updateBrowsePathInput()\"\n                  (focus)=\"setTreeFromRefNode()\"\n                  #browsePathModel=\"ngModel\"\n                />\n                <span class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    title=\"{{ 'Toggle address space' | translate }}\"\n                    type=\"button\"\n                    dropdownToggle\n                  >\n                    <i [c8yIcon]=\"'caret-down'\"></i>\n                  </button>\n                </span>\n              </div>\n              <div\n                class=\"dropdown-menu panel-inner-scroll fit-w\"\n                style=\"max-height: 240px\"\n                *dropdownMenu\n              >\n                <opcua-address-space-tree\n                  [node]=\"referencedNode\"\n                  [moId]=\"referencedServerId\"\n                  (selectedNode)=\"updateBrowsePath($event); dropdown.hide()\"\n                ></opcua-address-space-tree>\n              </div>\n            </div>\n            <c8y-messages>\n              <c8y-message\n                name=\"invalidBrowsePathNotation\"\n                text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n              ></c8y-message>\n              <c8y-message\n                name=\"browsePathNotUnique\"\n                text=\"{{ 'Variable with this path is already added.' | translate }}\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <ng-template #simpleInput>\n            <c8y-form-group class=\"col-md-4\">\n              <label>{{ 'Path' | translate }}</label>\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                name=\"browsePath\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                c8yBrowsePathValidator\n                [getMappings]=\"getMappings\"\n                [model]=\"mapping\"\n                [(ngModel)]=\"browsePath\"\n                (change)=\"updateBrowsePathInput()\"\n                #browsePathModel=\"ngModel\"\n              />\n              <c8y-messages>\n                <c8y-message\n                  name=\"invalidBrowsePathNotation\"\n                  text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n                ></c8y-message>\n                <c8y-message\n                  name=\"browsePathNotUnique\"\n                  text=\"{{ 'Variable with this path is already added.' | translate }}\"\n                ></c8y-message>\n              </c8y-messages>\n            </c8y-form-group>\n          </ng-template>\n\n          <c8y-form-group class=\"col-md-4\">\n            <label>{{ 'Name' | translate }}</label>\n            <div class=\"input-group\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g. childDevice2' | translate }} \"\n                name=\"displayName\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                [(ngModel)]=\"nodeDisplayName\"\n                (change)=\"updateDisplayname()\"\n              />\n            </div>\n          </c8y-form-group>\n        </div>\n        <div\n          class=\"row\"\n          ngModelGroup=\"dataReportingSection\"\n        >\n          <c8y-form-group class=\"col-sm-4 col-md-3 col-lg-2\">\n            <label>\n              <span>{{ 'Data reporting' | translate }}</span>\n            </label>\n            <div class=\"input-group\">\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Default' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"default\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Default' | translate }}</span>\n              </label>\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Custom' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"custom\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Custom' | translate }}</span>\n              </label>\n            </div>\n          </c8y-form-group>\n          <div\n            class=\"col-sm-8 col-md-9 col-lg-10\"\n            *ngIf=\"dataReporting === 'custom'\"\n            ngModelGroup=\"overriddenSubscription\"\n          >\n            <opcua-device-protocol-data-reporting\n              [model]=\"mapping\"\n              (onSubscriptionChange)=\"updateSubscriptionType($event)\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n\n        <c8y-device-protocol-object-mappings\n          [data]=\"mapping\"\n          [objectMappingTypes]=\"mappingTypes\"\n          (onUpdate)=\"onMappingUpdate($event)\">\n        </c8y-device-protocol-object-mappings>\n\n        <button\n          class=\"btn btn-default m-t-16 m-b-16\"\n          title=\"{{ 'Cancel' | translate }}\"\n          id=\"cancelBtn\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n        <button\n          class=\"btn btn-primary m-t-16 m-b-16\"\n          title=\"{{ 'Save' | translate }}\"\n          id=\"saveBtn\"\n          type=\"button\"\n          (click)=\"save()\"\n          [disabled]=\"!canSave(variableForm)\"\n        >\n          {{ 'Save' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OpcuaDeviceProtocolObjectMappingStatus, selector: "c8y-object-mapping-status-icons", inputs: ["mapping"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: OpcuaDeviceProtocolBrowsePathValidation, selector: "[c8yBrowsePathValidator][ngModel]", inputs: ["getMappings", "model"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: OpcuaAddressSpaceTreeComponent, selector: "opcua-address-space-tree", inputs: ["moId", "node", "focusEmitter"], outputs: ["selectedNode"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "component", type: ObjectMappingComponent, selector: "c8y-device-protocol-object-mappings", inputs: ["data", "objectMappingTypes"], outputs: ["onUpdate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPipe, name: "json" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "component", type: ObjectMappingComponent, selector: "c8y-device-protocol-object-mappings", inputs: ["data", "objectMappingTypes"], outputs: ["onUpdate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPipe, name: "json" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OpcuaDeviceProtocolMapping, decorators: [{
             type: Component,
@@ -2216,7 +2216,7 @@ class OpcuaServerConfigComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OpcuaServerConfigComponent, deps: [{ token: OpcuaService }, { token: i2$1.ModalService }, { token: i2$1.AlertService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: OpcuaServerConfigComponent, isStandalone: true, selector: "opcua-server-config", inputs: { server: "server" }, outputs: { canceled: "canceled", removed: "removed", saved: "saved", updated: "updated" }, viewQueries: [{ propertyName: "opcuaConfigForm", first: true, predicate: ["opcuaConfigForm"], descendants: true }, { propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-ui-empty-state\n  [icon]=\"'server'\"\n  [title]=\"'No server to display.' | translate\"\n  [subtitle]=\"'Add or select a server.' | translate\"\n  *ngIf=\"!server\"\n></c8y-ui-empty-state>\n\n<form\n  class=\"d-contents\"\n  #opcuaConfigForm=\"ngForm\"\n  *ngIf=\"server\"\n>\n  <div class=\"card-header large-padding separator sticky-top visible-sm visible-xs\">\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      title=\"{{ 'Back' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      <i c8yIcon=\"chevron-left\"></i>\n      {{ 'Back' | translate }}\n    </button>\n  </div>\n  <div class=\"flex-grow\">\n    <div class=\"card-block large-padding\">\n      <!-- SERVER NAME -->\n      <c8y-form-group class=\"m-b-8\">\n        <label>{{ 'Server name' | translate }}</label>\n        <input\n          class=\"form-control\"\n          id=\"name\"\n          placeholder=\"{{ 'e.g. My server' | translate }}\"\n          name=\"name\"\n          type=\"text\"\n          required\n          [(ngModel)]=\"model.name\"\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"required\"\n            text=\"{{ 'Server name is required' | translate }}\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n\n    <div class=\"card-block large-padding bg-level-2\">\n      <div class=\"tight-grid\">\n        <div class=\"col-sm-6\">\n          <label\n            class=\"fit-w\"\n            translate\n          >\n            Server connection\n          </label>\n          <button\n            class=\"btn m-t-4\"\n            name=\"serverConnection\"\n            type=\"button\"\n            [(ngModel)]=\"targetConnectionState\"\n            (ngModelChange)=\"setServerConnection($event)\"\n            btnCheckbox\n            btnCheckboxTrue=\"1\"\n            btnCheckboxFalse=\"0\"\n          >\n            <span\n              title=\"{{ 'Enabled' | translate }}\"\n              [hidden]=\"targetConnectionState !== '1'\"\n            >\n              {{ 'Enabled' | translate }}\n            </span>\n            <span\n              title=\"{{ 'Disabled' | translate }}\"\n              [hidden]=\"targetConnectionState !== '0'\"\n            >\n              {{ 'Disabled' | translate }}\n            </span>\n          </button>\n        </div>\n        <div class=\"col-sm-6\">\n          <label translate>Connection status</label>\n          <div class=\"form-control-static\">\n            <device-status\n              class=\"p-r-8\"\n              [mo]=\"server\"\n            ></device-status>\n            <span>{{ connectionStatusLabel | translate }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block large-padding\">\n      <!-- SERVER URL-->\n      <c8y-form-group>\n        <label\n          for=\"configServerUrl\"\n          translate\n        >\n          Server URL\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"configServerUrl\"\n          name=\"serverUrl\"\n          type=\"text\"\n          required\n          [(ngModel)]=\"model.config.serverUrl\"\n          c8yDefaultValidation=\"opcuaBrowsePath\"\n        />\n      </c8y-form-group>\n\n      <!-- SECURITY MODE -->\n      <div class=\"tight-grid\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <!-- NONE, SIGN, SIGN & ENCRYPT-->\n            <label\n              for=\"config.securityMode\"\n              translate\n            >\n              Security mode\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityMode\"\n                name=\"securityMode\"\n                required\n                [(ngModel)]=\"currentSecMode\"\n                (ngModelChange)=\"setPolicy($event)\"\n              >\n                <option\n                  *ngFor=\"let mode of securityModes\"\n                  [ngValue]=\"mode\"\n                >\n                  {{ mode }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"currentSecMode === NONE\"\n        >\n          <div class=\"form-group\">\n            <label\n              for=\"config.securityPolicy\"\n              translate\n            >\n              Security policy\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.securityPolicy\"\n              name=\"securityPolicy\"\n              type=\"text\"\n              required\n              [readonly]=\"true\"\n              [(ngModel)]=\"model.config.securityMode\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"currentSecMode !== NONE\"\n        >\n          <div class=\"form-group\">\n            <label\n              for=\"config.securityPolicy\"\n              translate\n            >\n              Security policy\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                name=\"securityPolicy\"\n                required\n                *ngIf=\"currentSecMode === SIGN\"\n                [(ngModel)]=\"model.config.securityMode\"\n              >\n                <option\n                  *ngFor=\"let policy of securityPolicies.sign\"\n                  [ngValue]=\"policy\"\n                >\n                  {{ policy }}\n                </option>\n              </select>\n              <select\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                name=\"securityPolicy\"\n                required\n                *ngIf=\"currentSecMode === SIGN_ENC\"\n                [(ngModel)]=\"model.config.securityMode\"\n              >\n                <option\n                  *ngFor=\"let policy of securityPolicies.sign_enc\"\n                  [ngValue]=\"policy\"\n                >\n                  {{ policy }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AUTHENTICATION -->\n      <div class=\"row tight-grid\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.authenticationMode\"\n              translate\n            >\n              Authentication\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.authenticationMode\"\n                name=\"authenticationMode\"\n                required\n                [(ngModel)]=\"authenticationMode\"\n                (ngModelChange)=\"updateAuthentication($event)\"\n              >\n                <option\n                  *ngFor=\"let auth of authenticationModes\"\n                  [ngValue]=\"auth\"\n                >\n                  {{ auth.value | translate }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- User/Pw-->\n      <div\n        class=\"tight-grid\"\n        *ngIf=\"authenticationMode.id === 2\"\n      >\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.userName\"\n              translate\n            >\n              Username\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.userName\"\n              placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n              name=\"userName\"\n              type=\"text\"\n              autocomplete=\"new-password\"\n              required\n              [(ngModel)]=\"model.config.userName\"\n            />\n          </div>\n        </div>\n\n        <!-- change password section BEGINS-->\n        <div class=\"col-md-6\">\n          <div\n            class=\"form-group\"\n            *ngIf=\"!initialPasswordRequired\"\n          >\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"toggleChangePassword()\"\n            >\n              <ng-container *ngIf=\"!changePassword\">\n                {{ 'Change password' | translate }}\n              </ng-container>\n              <ng-container *ngIf=\"changePassword\">\n                {{ 'Cancel password change' | translate }}\n              </ng-container>\n            </button>\n          </div>\n\n          <div class=\"form-group\">\n            <div *ngIf=\"changePassword\">\n              <label\n                for=\"config.password\"\n                translate\n              >\n                Password\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"config.userPassword\"\n                name=\"password\"\n                type=\"password\"\n                autocomplete=\"new-password\"\n                required\n                [(ngModel)]=\"model.config.userPassword\"\n              />\n            </div>\n          </div>\n        </div>\n        <!-- change password section ENDS-->\n      </div>\n\n      <!-- Key-based -->\n      <div\n        class=\"tight-grid\"\n        *ngIf=\"authenticationMode.id === 3\"\n      >\n        <!-- KEYSTORE PASSWORD -->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.keystorePass\"\n              translate\n            >\n              Keystore password\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.keystorePass\"\n              name=\"keystorePass\"\n              type=\"password\"\n              required\n              [(ngModel)]=\"model.config.keystorePass\"\n            />\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label\n              for=\"config.certificatePass\"\n              translate\n            >\n              Certificate password\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"config.certificatePass\"\n              name=\"keystorePass\"\n              type=\"password\"\n              required\n              [(ngModel)]=\"model.config.certificatePass\"\n            />\n          </div>\n        </div>\n        <!-- UPLOAD KEYSTORE -->\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label\n              for=\"certificateUpload\"\n              translate\n            >\n              Upload keystore\n            </label>\n            <input\n              class=\"form-control m-b-8\"\n              placeholder=\"{{ 'e.g.' | translate }} yourKeystore.jks\"\n              name=\"certificateUpload\"\n              type=\"text\"\n              required\n              [readonly]=\"true\"\n              [ngModel]=\"fileName\"\n            />\n            <c8y-drop-area\n              [title]=\"'Import keystore with jks file extension' | translate\"\n              (dropped)=\"uploadFile($event)\"\n              [loadingMessage]=\"'Importing, please wait.' | translate\"\n            ></c8y-drop-area>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"form-group m-b-0 d-flex a-i-center\">\n        <button\n          class=\"btn btn-dot collapse-btn\"\n          title=\"{{ (advancedSettings ? collapse : expand) | translate }}\"\n          [attr.aria-label]=\"(advancedSettings ? collapse : expand) | translate\"\n          [attr.aria-expanded]=\"advancedSettings\"\n          [ngClass]=\"{ active: advancedSettings }\"\n          (click)=\"advancedSettings = !advancedSettings\"\n          data-cy=\"opcua-server-config--advanced-settings-toggle\"\n        >\n          <i c8yIcon=\"chevron-right\"></i>\n        </button>\n        <label class=\"m-0\">\n          <span>{{ 'Advanced settings' | translate }}</span>\n        </label>\n      </div>\n    </div>\n\n    <div\n      class=\"card-block collapse\"\n      [collapse]=\"!advancedSettings\"\n      [isAnimated]=\"true\"\n      [ngClass]=\"{ 'bg-level-1': advancedSettings }\"\n    >\n      <formly-form\n        [form]=\"advancedSettingsForm\"\n        [fields]=\"advancedSettingsFields\"\n        [model]=\"model.config\"\n      ></formly-form>\n    </div>\n  </div>\n  <div class=\"card-footer large-padding separator sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-danger\"\n      title=\"{{ 'Remove' | translate }}\"\n      type=\"button\"\n      (click)=\"remove()\"\n      [disabled]=\"isNew()\"\n    >\n      {{ 'Remove' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      (click)=\"save()\"\n      [disabled]=\"!opcuaConfigForm.valid || !advancedSettingsForm.valid\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OpcuaServerConfigComponent, decorators: [{
             type: Component,