@c8y/ngx-components 1018.0.82 → 1018.0.83

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

@@ -1821,7 +1821,7 @@ class OpcuaServerConfigComponent {
     }
 }
 OpcuaServerConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: OpcuaServerConfigComponent, deps: [{ token: OpcuaService }], target: i0.ɵɵFactoryTarget.Component });
-OpcuaServerConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: OpcuaServerConfigComponent, selector: "opcua-server-config", inputs: { server: "server" }, outputs: { canceled: "canceled", removed: "removed", saved: "saved" }, viewQueries: [{ propertyName: "opcuaConfigForm", first: true, predicate: ["opcuaConfigForm"], descendants: true }, { propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-empty-state m-t-4\" *ngIf=\"!server\">\n  <h1 class=\"c8y-icon c8y-icon-duocolor\" c8yIcon=\"server\"></h1>\n  <div>\n    <p class=\"text-medium\">{{ 'No server to display.' | translate }}</p>\n    <p>{{ 'Add or select a server.' | translate }}</p>\n  </div>\n</div>\n\n<form #opcuaConfigForm=\"ngForm\" class=\"d-contents\" *ngIf=\"server\">\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      (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>\n          {{ 'Server name' | translate }}\n        </label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g. My server' | translate }}\"\n          id=\"name\"\n          name=\"name\"\n          [(ngModel)]=\"model.name\"\n          required\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 class=\"fit-w\" translate>Server connection</label>\n          <button\n            type=\"button\"\n            class=\"btn m-t-4\"\n            name=\"serverConnection\"\n            [(ngModel)]=\"targetConnectionState\"\n            (ngModelChange)=\"setServerConnection($event)\"\n            btnCheckbox\n            btnCheckboxTrue=\"1\"\n            btnCheckboxFalse=\"0\"\n          >\n            <span title=\"{{ 'Enabled' | translate }}\" [hidden]=\"targetConnectionState !== '1'\">\n              {{ 'Enabled' | translate }}\n            </span>\n            <span title=\"{{ 'Disabled' | translate }}\" [hidden]=\"targetConnectionState !== '0'\">\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 class=\"p-r-8\" [mo]=\"server\"></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 for=\"configServerUrl\" translate>Server URL</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"configServerUrl\"\n          name=\"serverUrl\"\n          [(ngModel)]=\"model.config.serverUrl\"\n          c8yDefaultValidation=\"opcuaBrowsePath\"\n          required\n        />\n      </c8y-form-group>\n\n      <!-- TIMEOUT & STATUS-CHECK-INTERVAL-->\n      <div class=\"content-flex-32\">\n        <div class=\"col-6\">\n          <c8y-form-group>\n            <label for=\"config.timeout\" translate>Timeout</label>\n            <div class=\"input-group\">\n              <input\n                type=\"number\"\n                class=\"form-control\"\n                id=\"config.timeout\"\n                name=\"timeout\"\n                [min]=\"minIntervalNumber\"\n                placeholder=\"{{ 'e.g.' | translate }} 30\"\n                [(ngModel)]=\"model.config.timeout\"\n                required\n              />\n              <span class=\"input-group-addon units\" translate>seconds</span>\n            </div>\n          </c8y-form-group>\n        </div>\n        <div class=\"col-6\">\n          <c8y-form-group>\n            <label for=\"config.statusCheckInterval\" translate>Status check interval</label>\n            <div class=\"input-group\">\n              <input\n                type=\"number\"\n                class=\"form-control\"\n                id=\"config.statusCheckInterval\"\n                name=\"statusCheckInterval\"\n                [min]=\"minIntervalNumber\"\n                placeholder=\"{{ 'e.g.' | translate }} 40\"\n                [(ngModel)]=\"model.config.statusCheckInterval\"\n                required\n              />\n              <span class=\"input-group-addon units\" translate>seconds</span>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\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 for=\"config.securityMode\" translate>Security mode</label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityMode\"\n                [(ngModel)]=\"currentSecMode\"\n                (ngModelChange)=\"setPolicy($event)\"\n                name=\"securityMode\"\n                required\n              >\n                <option *ngFor=\"let mode of securityModes\" [ngValue]=\"mode\">{{ mode }}</option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"currentSecMode === NONE\" class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.securityPolicy\" translate>Security policy</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"config.securityPolicy\"\n              name=\"securityPolicy\"\n              [readonly]=\"true\"\n              [(ngModel)]=\"model.config.securityMode\"\n              required\n            />\n          </div>\n        </div>\n        <div *ngIf=\"currentSecMode !== NONE\" class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.securityPolicy\" translate>Security policy</label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                *ngIf=\"currentSecMode === SIGN\"\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                [(ngModel)]=\"model.config.securityMode\"\n                name=\"securityPolicy\"\n                required\n              >\n                <option *ngFor=\"let policy of securityPolicies.sign\" [ngValue]=\"policy\">\n                  {{ policy }}\n                </option>\n              </select>\n              <select\n                *ngIf=\"currentSecMode === SIGN_ENC\"\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                [(ngModel)]=\"model.config.securityMode\"\n                name=\"securityPolicy\"\n                required\n              >\n                <option *ngFor=\"let policy of securityPolicies.sign_enc\" [ngValue]=\"policy\">\n                  {{ policy }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AUTHENTICATION -->\n      <div class=\"form-group\">\n        <label for=\"config.authenticationMode\" translate>Authentication</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"config.authenticationMode\"\n            [(ngModel)]=\"authenticationMode\"\n            name=\"authenticationMode\"\n            (ngModelChange)=\"updateAuthentication($event)\"\n            required\n          >\n            <option *ngFor=\"let auth of authenticationModes\" [ngValue]=\"auth\">\n              {{ auth.value | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n\n      <!-- User/Pw-->\n      <div *ngIf=\"authenticationMode.id === 2\" class=\"tight-grid\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"config.userName\" translate>Username</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"config.userName\"\n              name=\"userName\"\n              placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n              [(ngModel)]=\"model.config.userName\"\n              autocomplete=\"new-password\"\n              required\n            />\n          </div>\n        </div>\n        <!-- change password section BEGINS-->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\" *ngIf=\"!initialPasswordRequired\">\n            <button type=\"button\" class=\"btn btn-default\" (click)=\"toggleChangePassword()\">\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 for=\"config.password\" translate>Password</label>\n              <input\n                type=\"password\"\n                class=\"form-control\"\n                id=\"config.userPassword\"\n                name=\"password\"\n                [(ngModel)]=\"model.config.userPassword\"\n                autocomplete=\"new-password\"\n                required\n              />\n            </div>\n          </div>\n        </div>\n        <!-- change password section ENDS-->\n      </div>\n      <!-- Key-based -->\n      <div *ngIf=\"authenticationMode.id === 3\" class=\"tight-grid\">\n        <!-- KEYSTORE PASSWORD -->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.keystorePass\" translate>Keystore password</label>\n            <input\n              type=\"password\"\n              class=\"form-control\"\n              id=\"config.keystorePass\"\n              name=\"keystorePass\"\n              [(ngModel)]=\"model.config.keystorePass\"\n              required\n            />\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.certificatePass\" translate>Certificate password</label>\n            <input\n              type=\"password\"\n              class=\"form-control\"\n              id=\"config.certificatePass\"\n              name=\"keystorePass\"\n              [(ngModel)]=\"model.config.certificatePass\"\n              required\n            />\n          </div>\n        </div>\n        <!-- UPLOAD KEYSTORE -->\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"certificateUpload\" translate>Upload keystore</label>\n            <input\n              type=\"text\"\n              [readonly]=\"true\"\n              name=\"certificateUpload\"\n              class=\"form-control m-b-8\"\n              [ngModel]=\"fileName\"\n              placeholder=\"{{ 'e.g.' | translate }} yourKeystore.jks\"\n              required\n            />\n            <c8y-drop-area\n              (dropped)=\"uploadFile($event)\"\n              [loadingMessage]=\"'Importing, please wait.' | translate\"\n              [title]=\"'Import keystore with jks file extension' | translate\"\n            ></c8y-drop-area>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer large-padding separator sticky-bottom\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Remove' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-danger\"\n      (click)=\"remove()\"\n    >\n      {{ 'Remove' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"!opcuaConfigForm.valid\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "accept"], outputs: ["dropped"] }, { kind: "directive", type: i2.DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i2.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.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: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.DeviceStatusComponent, selector: "device-status", inputs: ["mo"] }, { kind: "directive", type: i4$2.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
+OpcuaServerConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: OpcuaServerConfigComponent, selector: "opcua-server-config", inputs: { server: "server" }, outputs: { canceled: "canceled", removed: "removed", saved: "saved" }, viewQueries: [{ propertyName: "opcuaConfigForm", first: true, predicate: ["opcuaConfigForm"], descendants: true }, { propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-empty-state m-t-4\" *ngIf=\"!server\">\n  <h1 class=\"c8y-icon c8y-icon-duocolor\" c8yIcon=\"server\"></h1>\n  <div>\n    <p class=\"text-medium\">{{ 'No server to display.' | translate }}</p>\n    <p>{{ 'Add or select a server.' | translate }}</p>\n  </div>\n</div>\n\n<form #opcuaConfigForm=\"ngForm\" class=\"d-contents\" *ngIf=\"server\">\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      (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>\n          {{ 'Server name' | translate }}\n        </label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g. My server' | translate }}\"\n          id=\"name\"\n          name=\"name\"\n          [(ngModel)]=\"model.name\"\n          required\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 class=\"fit-w\" translate>Server connection</label>\n          <button\n            type=\"button\"\n            class=\"btn m-t-4\"\n            name=\"serverConnection\"\n            [(ngModel)]=\"targetConnectionState\"\n            (ngModelChange)=\"setServerConnection($event)\"\n            btnCheckbox\n            btnCheckboxTrue=\"1\"\n            btnCheckboxFalse=\"0\"\n          >\n            <span title=\"{{ 'Enabled' | translate }}\" [hidden]=\"targetConnectionState !== '1'\">\n              {{ 'Enabled' | translate }}\n            </span>\n            <span title=\"{{ 'Disabled' | translate }}\" [hidden]=\"targetConnectionState !== '0'\">\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 class=\"p-r-8\" [mo]=\"server\"></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 for=\"configServerUrl\" translate>Server URL</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"configServerUrl\"\n          name=\"serverUrl\"\n          [(ngModel)]=\"model.config.serverUrl\"\n          c8yDefaultValidation=\"opcuaBrowsePath\"\n          required\n        />\n      </c8y-form-group>\n\n      <!-- TIMEOUT & STATUS-CHECK-INTERVAL-->\n      <div class=\"content-flex-32\">\n        <div class=\"col-6\">\n          <c8y-form-group>\n            <label for=\"config.timeout\" translate>Timeout</label>\n            <div class=\"input-group\">\n              <input\n                type=\"number\"\n                class=\"form-control\"\n                id=\"config.timeout\"\n                name=\"timeout\"\n                [min]=\"minIntervalNumber\"\n                placeholder=\"{{ 'e.g.' | translate }} 30\"\n                [(ngModel)]=\"model.config.timeout\"\n                required\n              />\n              <span class=\"input-group-addon units\" translate>seconds</span>\n            </div>\n          </c8y-form-group>\n        </div>\n        <div class=\"col-6\">\n          <c8y-form-group>\n            <label for=\"config.statusCheckInterval\" translate>Status check interval</label>\n            <div class=\"input-group\">\n              <input\n                type=\"number\"\n                class=\"form-control\"\n                id=\"config.statusCheckInterval\"\n                name=\"statusCheckInterval\"\n                [min]=\"minIntervalNumber\"\n                placeholder=\"{{ 'e.g.' | translate }} 40\"\n                [(ngModel)]=\"model.config.statusCheckInterval\"\n                required\n              />\n              <span class=\"input-group-addon units\" translate>seconds</span>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\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 for=\"config.securityMode\" translate>Security mode</label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityMode\"\n                [(ngModel)]=\"currentSecMode\"\n                (ngModelChange)=\"setPolicy($event)\"\n                name=\"securityMode\"\n                required\n              >\n                <option *ngFor=\"let mode of securityModes\" [ngValue]=\"mode\">{{ mode }}</option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"currentSecMode === NONE\" class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.securityPolicy\" translate>Security policy</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"config.securityPolicy\"\n              name=\"securityPolicy\"\n              [readonly]=\"true\"\n              [(ngModel)]=\"model.config.securityMode\"\n              required\n            />\n          </div>\n        </div>\n        <div *ngIf=\"currentSecMode !== NONE\" class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.securityPolicy\" translate>Security policy</label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                *ngIf=\"currentSecMode === SIGN\"\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                [(ngModel)]=\"model.config.securityMode\"\n                name=\"securityPolicy\"\n                required\n              >\n                <option *ngFor=\"let policy of securityPolicies.sign\" [ngValue]=\"policy\">\n                  {{ policy }}\n                </option>\n              </select>\n              <select\n                *ngIf=\"currentSecMode === SIGN_ENC\"\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                [(ngModel)]=\"model.config.securityMode\"\n                name=\"securityPolicy\"\n                required\n              >\n                <option *ngFor=\"let policy of securityPolicies.sign_enc\" [ngValue]=\"policy\">\n                  {{ policy }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AUTHENTICATION -->\n      <div class=\"form-group\">\n        <label for=\"config.authenticationMode\" translate>Authentication</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"config.authenticationMode\"\n            [(ngModel)]=\"authenticationMode\"\n            name=\"authenticationMode\"\n            (ngModelChange)=\"updateAuthentication($event)\"\n            required\n          >\n            <option *ngFor=\"let auth of authenticationModes\" [ngValue]=\"auth\">\n              {{ auth.value | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n\n      <!-- User/Pw-->\n      <div *ngIf=\"authenticationMode.id === 2\" class=\"tight-grid\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"config.userName\" translate>Username</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"config.userName\"\n              name=\"userName\"\n              placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n              [(ngModel)]=\"model.config.userName\"\n              autocomplete=\"new-password\"\n              required\n            />\n          </div>\n        </div>\n        <!-- change password section BEGINS-->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\" *ngIf=\"!initialPasswordRequired\">\n            <button type=\"button\" class=\"btn btn-default\" (click)=\"toggleChangePassword()\">\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 for=\"config.password\" translate>Password</label>\n              <input\n                type=\"password\"\n                class=\"form-control\"\n                id=\"config.userPassword\"\n                name=\"password\"\n                [(ngModel)]=\"model.config.userPassword\"\n                autocomplete=\"new-password\"\n                required\n              />\n            </div>\n          </div>\n        </div>\n        <!-- change password section ENDS-->\n      </div>\n      <!-- Key-based -->\n      <div *ngIf=\"authenticationMode.id === 3\" class=\"tight-grid\">\n        <!-- KEYSTORE PASSWORD -->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.keystorePass\" translate>Keystore password</label>\n            <input\n              type=\"password\"\n              class=\"form-control\"\n              id=\"config.keystorePass\"\n              name=\"keystorePass\"\n              [(ngModel)]=\"model.config.keystorePass\"\n              required\n            />\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.certificatePass\" translate>Certificate password</label>\n            <input\n              type=\"password\"\n              class=\"form-control\"\n              id=\"config.certificatePass\"\n              name=\"keystorePass\"\n              [(ngModel)]=\"model.config.certificatePass\"\n              required\n            />\n          </div>\n        </div>\n        <!-- UPLOAD KEYSTORE -->\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"certificateUpload\" translate>Upload keystore</label>\n            <input\n              type=\"text\"\n              [readonly]=\"true\"\n              name=\"certificateUpload\"\n              class=\"form-control m-b-8\"\n              [ngModel]=\"fileName\"\n              placeholder=\"{{ 'e.g.' | translate }} yourKeystore.jks\"\n              required\n            />\n            <c8y-drop-area\n              (dropped)=\"uploadFile($event)\"\n              [loadingMessage]=\"'Importing, please wait.' | translate\"\n              [title]=\"'Import keystore with jks file extension' | translate\"\n            ></c8y-drop-area>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer large-padding separator sticky-bottom\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Remove' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-danger\"\n      (click)=\"remove()\"\n    >\n      {{ 'Remove' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"!opcuaConfigForm.valid\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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.DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i2.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.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: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.DeviceStatusComponent, selector: "device-status", inputs: ["mo"] }, { kind: "directive", type: i4$2.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: OpcuaServerConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'opcua-server-config', template: "<div class=\"c8y-empty-state m-t-4\" *ngIf=\"!server\">\n  <h1 class=\"c8y-icon c8y-icon-duocolor\" c8yIcon=\"server\"></h1>\n  <div>\n    <p class=\"text-medium\">{{ 'No server to display.' | translate }}</p>\n    <p>{{ 'Add or select a server.' | translate }}</p>\n  </div>\n</div>\n\n<form #opcuaConfigForm=\"ngForm\" class=\"d-contents\" *ngIf=\"server\">\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      (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>\n          {{ 'Server name' | translate }}\n        </label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g. My server' | translate }}\"\n          id=\"name\"\n          name=\"name\"\n          [(ngModel)]=\"model.name\"\n          required\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 class=\"fit-w\" translate>Server connection</label>\n          <button\n            type=\"button\"\n            class=\"btn m-t-4\"\n            name=\"serverConnection\"\n            [(ngModel)]=\"targetConnectionState\"\n            (ngModelChange)=\"setServerConnection($event)\"\n            btnCheckbox\n            btnCheckboxTrue=\"1\"\n            btnCheckboxFalse=\"0\"\n          >\n            <span title=\"{{ 'Enabled' | translate }}\" [hidden]=\"targetConnectionState !== '1'\">\n              {{ 'Enabled' | translate }}\n            </span>\n            <span title=\"{{ 'Disabled' | translate }}\" [hidden]=\"targetConnectionState !== '0'\">\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 class=\"p-r-8\" [mo]=\"server\"></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 for=\"configServerUrl\" translate>Server URL</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"configServerUrl\"\n          name=\"serverUrl\"\n          [(ngModel)]=\"model.config.serverUrl\"\n          c8yDefaultValidation=\"opcuaBrowsePath\"\n          required\n        />\n      </c8y-form-group>\n\n      <!-- TIMEOUT & STATUS-CHECK-INTERVAL-->\n      <div class=\"content-flex-32\">\n        <div class=\"col-6\">\n          <c8y-form-group>\n            <label for=\"config.timeout\" translate>Timeout</label>\n            <div class=\"input-group\">\n              <input\n                type=\"number\"\n                class=\"form-control\"\n                id=\"config.timeout\"\n                name=\"timeout\"\n                [min]=\"minIntervalNumber\"\n                placeholder=\"{{ 'e.g.' | translate }} 30\"\n                [(ngModel)]=\"model.config.timeout\"\n                required\n              />\n              <span class=\"input-group-addon units\" translate>seconds</span>\n            </div>\n          </c8y-form-group>\n        </div>\n        <div class=\"col-6\">\n          <c8y-form-group>\n            <label for=\"config.statusCheckInterval\" translate>Status check interval</label>\n            <div class=\"input-group\">\n              <input\n                type=\"number\"\n                class=\"form-control\"\n                id=\"config.statusCheckInterval\"\n                name=\"statusCheckInterval\"\n                [min]=\"minIntervalNumber\"\n                placeholder=\"{{ 'e.g.' | translate }} 40\"\n                [(ngModel)]=\"model.config.statusCheckInterval\"\n                required\n              />\n              <span class=\"input-group-addon units\" translate>seconds</span>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\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 for=\"config.securityMode\" translate>Security mode</label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"config.securityMode\"\n                [(ngModel)]=\"currentSecMode\"\n                (ngModelChange)=\"setPolicy($event)\"\n                name=\"securityMode\"\n                required\n              >\n                <option *ngFor=\"let mode of securityModes\" [ngValue]=\"mode\">{{ mode }}</option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"currentSecMode === NONE\" class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.securityPolicy\" translate>Security policy</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"config.securityPolicy\"\n              name=\"securityPolicy\"\n              [readonly]=\"true\"\n              [(ngModel)]=\"model.config.securityMode\"\n              required\n            />\n          </div>\n        </div>\n        <div *ngIf=\"currentSecMode !== NONE\" class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.securityPolicy\" translate>Security policy</label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                *ngIf=\"currentSecMode === SIGN\"\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                [(ngModel)]=\"model.config.securityMode\"\n                name=\"securityPolicy\"\n                required\n              >\n                <option *ngFor=\"let policy of securityPolicies.sign\" [ngValue]=\"policy\">\n                  {{ policy }}\n                </option>\n              </select>\n              <select\n                *ngIf=\"currentSecMode === SIGN_ENC\"\n                class=\"form-control\"\n                id=\"config.securityPolicy\"\n                [(ngModel)]=\"model.config.securityMode\"\n                name=\"securityPolicy\"\n                required\n              >\n                <option *ngFor=\"let policy of securityPolicies.sign_enc\" [ngValue]=\"policy\">\n                  {{ policy }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AUTHENTICATION -->\n      <div class=\"form-group\">\n        <label for=\"config.authenticationMode\" translate>Authentication</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"config.authenticationMode\"\n            [(ngModel)]=\"authenticationMode\"\n            name=\"authenticationMode\"\n            (ngModelChange)=\"updateAuthentication($event)\"\n            required\n          >\n            <option *ngFor=\"let auth of authenticationModes\" [ngValue]=\"auth\">\n              {{ auth.value | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n\n      <!-- User/Pw-->\n      <div *ngIf=\"authenticationMode.id === 2\" class=\"tight-grid\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"config.userName\" translate>Username</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"config.userName\"\n              name=\"userName\"\n              placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n              [(ngModel)]=\"model.config.userName\"\n              autocomplete=\"new-password\"\n              required\n            />\n          </div>\n        </div>\n        <!-- change password section BEGINS-->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\" *ngIf=\"!initialPasswordRequired\">\n            <button type=\"button\" class=\"btn btn-default\" (click)=\"toggleChangePassword()\">\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 for=\"config.password\" translate>Password</label>\n              <input\n                type=\"password\"\n                class=\"form-control\"\n                id=\"config.userPassword\"\n                name=\"password\"\n                [(ngModel)]=\"model.config.userPassword\"\n                autocomplete=\"new-password\"\n                required\n              />\n            </div>\n          </div>\n        </div>\n        <!-- change password section ENDS-->\n      </div>\n      <!-- Key-based -->\n      <div *ngIf=\"authenticationMode.id === 3\" class=\"tight-grid\">\n        <!-- KEYSTORE PASSWORD -->\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.keystorePass\" translate>Keystore password</label>\n            <input\n              type=\"password\"\n              class=\"form-control\"\n              id=\"config.keystorePass\"\n              name=\"keystorePass\"\n              [(ngModel)]=\"model.config.keystorePass\"\n              required\n            />\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"config.certificatePass\" translate>Certificate password</label>\n            <input\n              type=\"password\"\n              class=\"form-control\"\n              id=\"config.certificatePass\"\n              name=\"keystorePass\"\n              [(ngModel)]=\"model.config.certificatePass\"\n              required\n            />\n          </div>\n        </div>\n        <!-- UPLOAD KEYSTORE -->\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"certificateUpload\" translate>Upload keystore</label>\n            <input\n              type=\"text\"\n              [readonly]=\"true\"\n              name=\"certificateUpload\"\n              class=\"form-control m-b-8\"\n              [ngModel]=\"fileName\"\n              placeholder=\"{{ 'e.g.' | translate }} yourKeystore.jks\"\n              required\n            />\n            <c8y-drop-area\n              (dropped)=\"uploadFile($event)\"\n              [loadingMessage]=\"'Importing, please wait.' | translate\"\n              [title]=\"'Import keystore with jks file extension' | translate\"\n            ></c8y-drop-area>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer large-padding separator sticky-bottom\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Remove' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-danger\"\n      (click)=\"remove()\"\n    >\n      {{ 'Remove' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"!opcuaConfigForm.valid\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]