import { Component, ViewChild } from '@angular/core';
import { AlertService, gettext, ModalService, Status } from '@c8y/ngx-components';
import { MultipleLnsConnectorService } from './multiple-lns-connector.service';
import { head, orderBy, findIndex, escapeRegExp, cloneDeep } from 'lodash-es';
import { TranslateService } from '@ngx-translate/core';
import { ConnectionType } from './multiple-lns-connector.model';
import { BsModalService } from 'ngx-bootstrap/modal';
import { ConnectionInfoWithDownloadCsvComponent } from './connection-info-with-download-csv.component';
import { NgForm } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "./multiple-lns-connector.service";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@ngx-translate/core";
import * as i4 from "ngx-bootstrap/modal";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "./no-connections-found.component";
export class ActilityMultipleLnsConnectorComponent {
    constructor(connectorService, alertService, translateService, modal, modalService) {
        this.connectorService = connectorService;
        this.alertService = alertService;
        this.translateService = translateService;
        this.modal = modal;
        this.modalService = modalService;
        this.state = 'loadingConnection';
        this.connections = Array();
        this.showPassword = false;
        this.cardHeader = gettext('Actility connections');
        this.allowedSpecialCharacters = '~!@$^(){}[]|:,<+=,.`_ -';
        this.namePattern = `^[a-zA-Z0-9 ${escapeRegExp(this.allowedSpecialCharacters)}]*$`;
        this.namePatternError = this.translateService.instant(gettext('Connection name can only contain letters, numbers, spaces, and the following symbols: {{ symbols }}'), {
            symbols: this.allowedSpecialCharacters
        });
    }
    async ngOnInit() {
        await this.loadConnections();
    }
    async loadConnections() {
        const res = await this.connectorService.list(ConnectionType.ACTILITY);
        if (res && res.status !== 200) {
            const data = res.json ? await res.json() : undefined;
            this.alertService.addServerFailure({ data, res });
            this.state = 'loadingError';
        }
        else {
            const list = await res.json();
            this.connections = orderBy(list, ['name'], ['asc']);
            await this.setModel();
        }
    }
    async setModel(connectionObj = null) {
        await this.resetEditedUnsavedConnection();
        this.connection = connectionObj
            ? connectionObj
            : this.state === 'savedSuccessfully'
                ? this.connection
                : head(this.connections);
        this.state = 'updateConnection';
        this.showPassword = false;
        this.originalConnection = this.connection ? cloneDeep(this.connection) : undefined;
    }
    async setAdminAndCoreApiVersion() {
        this.connection.adminApiVersion = 'latest';
        this.connection.coreApiVersion = 'latest';
    }
    async resetEditedUnsavedConnection() {
        if (this.state !== 'updateConnection' || !this.originalConnection) {
            return;
        }
        const { name } = this.originalConnection;
        const index = findIndex(this.connections, { name });
        if (index !== -1) {
            const originalData = (await this.connectorService.detail(ConnectionType.ACTILITY, name));
            this.connections[index] = originalData;
        }
    }
    async addConnection() {
        await this.resetEditedUnsavedConnection();
        this.connection = {};
        this.originalConnection = {};
        this.state = 'addConnections';
        this.showPassword = true;
        await this.setAdminAndCoreApiVersion();
    }
    async save() {
        const checkForConnectionName = this.originalConnection && this.originalConnection.name && this.originalConnection.name !== ''
            ? this.originalConnection.name
            : this.connection.name;
        const isConnectionExist = await this.connectorService.exists(ConnectionType.ACTILITY, checkForConnectionName);
        if (this.state === 'addConnections' && isConnectionExist) {
            const mesg = this.translateService.instant(gettext(`Connection with name "{{ name }}" already exists.`), { name: this.connection.name });
            this.alertService.danger(mesg);
        }
        else {
            return this.saveConnection();
        }
    }
    async deleteConnection(originalConnection) {
        const { name } = originalConnection;
        const mesg = this.translateService.instant(gettext(`You are about to delete the connection "{{ name }}". Do you want to proceed?`), { name });
        try {
            await this.modal.confirm(gettext('Delete connection'), mesg, Status.DANGER, {
                ok: gettext('Delete'),
                cancel: gettext('Cancel')
            });
            await this.delete(originalConnection);
        }
        catch (error) {
            // empty catch block
        }
    }
    changePassword() {
        this.showPassword = !this.showPassword;
        if (this.connectorsForm.controls.password) {
            this.connectorsForm.controls.password.setValue(null);
        }
    }
    async saveConnection() {
        const res = await this.connectorService.save(this.connection, this.originalConnection?.name);
        if (res && (res.status === 201 || res.status === 200)) {
            this.state = 'savedSuccessfully';
            this.alertService.success(gettext('Connection saved.'));
            await this.loadConnections();
        }
        else if (res && res.status === 500) {
            const data = res.json ? await res.json() : undefined;
            const app = this.connectorService.getApplication('actility');
            const initialState = {
                messageData: data,
                appData: app,
                modalTitle: gettext('Failed to update the connection'),
                ariaDescribedby: 'modal-body',
                ariaLabelledBy: 'modal-title',
                connectionName: this.connection.name
            };
            this.modalService.show(ConnectionInfoWithDownloadCsvComponent, { initialState });
        }
        else {
            const data = res.json ? await res.json() : undefined;
            this.alertService.addServerFailure({ data, res });
        }
    }
    async delete(originalConnection) {
        try {
            const response = await this.connectorService.delete(originalConnection);
            if (response.ok && response.status === 204) {
                this.alertService.success(gettext('Connection deleted.'));
                await this.loadConnections();
            }
            else if (response && response.status === 500) {
                const data = response.json ? await response.json() : undefined;
                const app = this.connectorService.getApplication('actility');
                const initialState = {
                    messageData: data,
                    appData: app,
                    ariaDescribedby: 'modal-body',
                    ariaLabelledBy: 'modal-title',
                    modalTitle: gettext('Failed to delete the connection'),
                    connectionName: originalConnection.name
                };
                this.modalService.show(ConnectionInfoWithDownloadCsvComponent, { initialState });
            }
            else {
                const data = response.json ? await response.json() : undefined;
                this.alertService.addServerFailure({ data, response });
            }
        }
        catch (error) {
            // empty catch block
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActilityMultipleLnsConnectorComponent, deps: [{ token: i1.MultipleLnsConnectorService }, { token: i2.AlertService }, { token: i3.TranslateService }, { token: i2.ModalService }, { token: i4.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActilityMultipleLnsConnectorComponent, selector: "actility-multiple-lns-connector", viewQueries: [{ propertyName: "connectorsForm", first: true, predicate: ["connectorsForm"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"state === 'loadingConnection'; else renderListAndForm\">\n  <c8y-loading></c8y-loading>\n</ng-container>\n\n<c8y-title>{{ 'Connectivity' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [label]=\"'Settings' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Connectivity' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Actility' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<ng-template #renderListAndForm>\n  <no-connections-found\n    (onAction)=\"addConnection()\"\n    *ngIf=\"connections.length === 0 && state !== 'addConnections'\"\n    [header]=\"cardHeader | translate\"\n  ></no-connections-found>\n  <div>\n    <div\n      class=\"card content-fullpage split-view--5-7\"\n      *ngIf=\"connections.length !== 0 || state === 'addConnections'\"\n    >\n      <div class=\"card-header separator grid__col--fullspan\">\n        <div class=\"card-title\">{{ cardHeader | translate }}</div>\n      </div>\n      <div class=\"inner-scroll split-view__list\">\n        <div class=\"bg-level-1 flex-grow\">\n          <c8y-list-group class=\"nav c8y-nav-stacked\">\n            <c8y-li\n              class=\"c8y-stacked-item p-0\"\n              [class.active]=\"connection.name === connectionBeingEdited\"\n              *ngFor=\"let connection of connections; let index = index\"\n              (click)=\"setModel(connection)\"\n            >\n              <c8y-li-icon [icon]=\"'plug'\"></c8y-li-icon>\n              <span title=\"{{ connection.name }}\">\n                {{ connection.name }}\n              </span>\n            </c8y-li>\n\n            <c8y-li\n              *ngIf=\"state === 'addConnections'\"\n              class=\"c8y-nav-stacked active\"\n              (click)=\"addConnection()\"\n            >\n              <c8y-li-icon [icon]=\"'plug'\"></c8y-li-icon>\n              {{ 'New connection' | translate }}\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n        <div class=\"card-footer separator-top\">\n          <button\n            [disabled]=\"state === 'addConnections'\"\n            title=\"{{ 'Add connection' | translate }}\"\n            class=\"btn btn-default\"\n            (click)=\"addConnection()\"\n          >\n            <i [c8yIcon]=\"'plus-circle'\"></i>\n            {{ 'Add connection' | translate }}\n          </button>\n        </div>\n      </div>\n\n      <!-- 'split-view__detail--selected' condition needs to be fixed. this is needed so that both columns are visible in tablet format -->\n\n      <div\n        class=\"inner-scroll split-view__detail\"\n        ng-class=\"{ 'split-view__detail--selected': vm.selected && vm.jsonSchemaObjects }\"\n      >\n        <div class=\"card-header separator visible-sm visible-xs fit-w sticky-top\">\n          <button\n            title=\"{{ 'Back' | translate }}\"\n            class=\"btn btn-clean text-primary\"\n            ng-click=\"vm.deselect()\"\n          >\n            <i [c8yIcon]=\"'chevron-left'\"></i>\n            <span>{{ 'Back' | translate }}</span>\n          </button>\n        </div>\n        <form #connectorsForm=\"ngForm\" class=\"d-contents\">\n          <div class=\"flex-grow\">\n            <div class=\"card-block large-padding\">\n              <c8y-form-group>\n                <label for=\"name\">\n                  {{ 'Name' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. Actility connection' | translate\"\n                  id=\"name\"\n                  name=\"name\"\n                  [(ngModel)]=\"connection.name\"\n                  required\n                  [pattern]=\"namePattern\"\n                />\n                <c8y-messages>\n                  <c8y-message name=\"pattern\" [text]=\"namePatternError\"></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"description\">\n                  {{ 'Description' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"\n                    'e.g. This connection has a built-in functionality to\u2026' | translate\n                  \"\n                  id=\"description\"\n                  name=\"description\"\n                  [(ngModel)]=\"connection.description\"\n                />\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"baseUrl\">\n                  {{ 'URL' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate: { example: 'https://dx-api.thingpark.io' }\n                  \"\n                  id=\"baseUrl\"\n                  name=\"baseUrl\"\n                  [(ngModel)]=\"connection.baseUrl\"\n                  required\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"profileId\">\n                  {{ 'Profile ID' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'dev1-api' }\"\n                  id=\"profileId\"\n                  name=\"profileId\"\n                  [(ngModel)]=\"connection.profileId\"\n                  required\n                />\n              </c8y-form-group>\n              <!-- DM-1171 start-->\n              <c8y-form-group>\n                <label for=\"applicationServerId\">\n                  {{ 'Application server ID' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. Application Server' | translate\"\n                  id=\"applicationServerId\"\n                  name=\"applicationServerId\"\n                  [(ngModel)]=\"connection.routeApplicationServerId\"\n                  [required]=\"connection.routeApplicationServerKey ? 'required' : null\"\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"applicationServerKey\">\n                  {{ 'Application server key' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"\n                    'e.g. {{ example }}'\n                      | translate: { example: '0011AEDF0011AEDF0011AEDF0011AEDF' }\n                  \"\n                  id=\"applicationServerKey\"\n                  name=\"applicationServerKey\"\n                  [(ngModel)]=\"connection.routeApplicationServerKey\"\n                  [required]=\"connection.routeApplicationServerId ? 'required' : null\"\n                  pattern=\"[A-Fa-f0-9]{32}\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid server key' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"adminApiVersion\">\n                  {{ 'Admin API version' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'v102' }\"\n                  id=\"adminApiVersion\"\n                  name=\"adminApiVersion\"\n                  [(ngModel)]=\"connection.adminApiVersion\"\n                  required\n                  pattern=\"^v\\d+$|latest\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid API version' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"coreApiVersion\">\n                  {{ 'Core API version' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'v121' }\"\n                  id=\"coreApiVersion\"\n                  name=\"coreApiVersion\"\n                  [(ngModel)]=\"connection.coreApiVersion\"\n                  required\n                  pattern=\"^v\\d+$|latest\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid API version' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n              <!-- DM-1171 end-->\n              <c8y-form-group>\n                <label for=\"username\">\n                  {{ 'Username' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. joe`LOCALIZE`' | translate }}\"\n                  id=\"username\"\n                  name=\"username\"\n                  [(ngModel)]=\"connection.username\"\n                  required\n                />\n              </c8y-form-group>\n\n              <c8y-form-group *ngIf=\"showPassword\">\n                <label for=\"password\">\n                  {{ 'Password' | translate }}\n                </label>\n                <input\n                  type=\"password\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. my_password' | translate }}\"\n                  id=\"password\"\n                  name=\"password\"\n                  [(ngModel)]=\"connection.password\"\n                  required\n                />\n              </c8y-form-group>\n              \n              <!-- DM-1254 begins -->\n              <c8y-form-group>\n                <label title=\"{{ 'Connection type' | translate }}\">\n                  {{ 'Connection type' | translate }}\n                </label>\n                <label title=\"{{ 'Thingpark Enterprise' }}\" class=\"c8y-radio radio-inline\">\n                  <input type=\"radio\" name=\"c8y-group\" [value]=\"true\"\n                  [(ngModel)]=\"connection.enterpriseConnection\" required>\n                  <span></span> \n                  <span>{{ 'Thingpark Enterprise' }}</span>\n                </label>\n                <label title=\"{{ 'Thingpark Wireless' }}\" class=\"c8y-radio radio-inline\">\n                  <input type=\"radio\" name=\"c8y-group\" [value]=\"false\"\n                  [(ngModel)]=\"connection.enterpriseConnection\" required>\n                  <span></span> \n                  <span>{{ 'Thingpark Wireless' }}</span>\n                </label>\n              </c8y-form-group>\n              <!-- DM-1254 ends -->\n              <button\n                *ngIf=\"state === 'updateConnection'\"\n                type=\"button\"\n                class=\"btn btn-default\"\n                name=\"changePassword\"\n                (click)=\"changePassword()\"\n              >\n                <span title=\"{{ 'Change password' | translate }}\" *ngIf=\"!showPassword\">\n                  {{ 'Change password' | translate }}\n                </span>\n                <span title=\"{{ 'Cancel password change' | translate }}\" *ngIf=\"showPassword\">\n                  {{ 'Cancel password change' | translate }}\n                </span>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"card-footer separator-top\">\n            <button\n              title=\"{{ 'Cancel' | translate }}\"\n              class=\"btn btn-default\"\n              (click)=\"setModel()\"\n              translate\n              type=\"button\"\n            >\n              Cancel\n            </button>\n            <button\n              *ngIf=\"state === 'updateConnection'\"\n              title=\"{{ 'Delete' | translate }}\"\n              class=\"btn btn-danger\"\n              data-cy=\"actility-multiple-lns-connector--delete-connectivity\"\n              (click)=\"deleteConnection(originalConnection)\"\n              translate\n              type=\"button\"\n            >\n              Delete\n            </button>\n            <button\n              [disabled]=\"!this.connectorsForm.form.valid || this.connectorsForm.form.pristine\"\n              title=\"{{ 'Save' | translate }}\"\n              class=\"btn btn-primary\"\n              data-cy=\"actility-multiple-lns-connector.component--save-connectivity\"\n              (click)=\"save()\"\n              translate\n              type=\"submit\"\n            >\n              Save\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.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", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i7.NoConnectionsFoundComponent, selector: "no-connections-found", inputs: ["header"], outputs: ["onAction"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActilityMultipleLnsConnectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'actility-multiple-lns-connector', template: "<ng-container *ngIf=\"state === 'loadingConnection'; else renderListAndForm\">\n  <c8y-loading></c8y-loading>\n</ng-container>\n\n<c8y-title>{{ 'Connectivity' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [label]=\"'Settings' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Connectivity' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Actility' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<ng-template #renderListAndForm>\n  <no-connections-found\n    (onAction)=\"addConnection()\"\n    *ngIf=\"connections.length === 0 && state !== 'addConnections'\"\n    [header]=\"cardHeader | translate\"\n  ></no-connections-found>\n  <div>\n    <div\n      class=\"card content-fullpage split-view--5-7\"\n      *ngIf=\"connections.length !== 0 || state === 'addConnections'\"\n    >\n      <div class=\"card-header separator grid__col--fullspan\">\n        <div class=\"card-title\">{{ cardHeader | translate }}</div>\n      </div>\n      <div class=\"inner-scroll split-view__list\">\n        <div class=\"bg-level-1 flex-grow\">\n          <c8y-list-group class=\"nav c8y-nav-stacked\">\n            <c8y-li\n              class=\"c8y-stacked-item p-0\"\n              [class.active]=\"connection.name === connectionBeingEdited\"\n              *ngFor=\"let connection of connections; let index = index\"\n              (click)=\"setModel(connection)\"\n            >\n              <c8y-li-icon [icon]=\"'plug'\"></c8y-li-icon>\n              <span title=\"{{ connection.name }}\">\n                {{ connection.name }}\n              </span>\n            </c8y-li>\n\n            <c8y-li\n              *ngIf=\"state === 'addConnections'\"\n              class=\"c8y-nav-stacked active\"\n              (click)=\"addConnection()\"\n            >\n              <c8y-li-icon [icon]=\"'plug'\"></c8y-li-icon>\n              {{ 'New connection' | translate }}\n            </c8y-li>\n          </c8y-list-group>\n        </div>\n        <div class=\"card-footer separator-top\">\n          <button\n            [disabled]=\"state === 'addConnections'\"\n            title=\"{{ 'Add connection' | translate }}\"\n            class=\"btn btn-default\"\n            (click)=\"addConnection()\"\n          >\n            <i [c8yIcon]=\"'plus-circle'\"></i>\n            {{ 'Add connection' | translate }}\n          </button>\n        </div>\n      </div>\n\n      <!-- 'split-view__detail--selected' condition needs to be fixed. this is needed so that both columns are visible in tablet format -->\n\n      <div\n        class=\"inner-scroll split-view__detail\"\n        ng-class=\"{ 'split-view__detail--selected': vm.selected && vm.jsonSchemaObjects }\"\n      >\n        <div class=\"card-header separator visible-sm visible-xs fit-w sticky-top\">\n          <button\n            title=\"{{ 'Back' | translate }}\"\n            class=\"btn btn-clean text-primary\"\n            ng-click=\"vm.deselect()\"\n          >\n            <i [c8yIcon]=\"'chevron-left'\"></i>\n            <span>{{ 'Back' | translate }}</span>\n          </button>\n        </div>\n        <form #connectorsForm=\"ngForm\" class=\"d-contents\">\n          <div class=\"flex-grow\">\n            <div class=\"card-block large-padding\">\n              <c8y-form-group>\n                <label for=\"name\">\n                  {{ 'Name' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. Actility connection' | translate\"\n                  id=\"name\"\n                  name=\"name\"\n                  [(ngModel)]=\"connection.name\"\n                  required\n                  [pattern]=\"namePattern\"\n                />\n                <c8y-messages>\n                  <c8y-message name=\"pattern\" [text]=\"namePatternError\"></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"description\">\n                  {{ 'Description' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"\n                    'e.g. This connection has a built-in functionality to\u2026' | translate\n                  \"\n                  id=\"description\"\n                  name=\"description\"\n                  [(ngModel)]=\"connection.description\"\n                />\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"baseUrl\">\n                  {{ 'URL' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate: { example: 'https://dx-api.thingpark.io' }\n                  \"\n                  id=\"baseUrl\"\n                  name=\"baseUrl\"\n                  [(ngModel)]=\"connection.baseUrl\"\n                  required\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"profileId\">\n                  {{ 'Profile ID' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'dev1-api' }\"\n                  id=\"profileId\"\n                  name=\"profileId\"\n                  [(ngModel)]=\"connection.profileId\"\n                  required\n                />\n              </c8y-form-group>\n              <!-- DM-1171 start-->\n              <c8y-form-group>\n                <label for=\"applicationServerId\">\n                  {{ 'Application server ID' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. Application Server' | translate\"\n                  id=\"applicationServerId\"\n                  name=\"applicationServerId\"\n                  [(ngModel)]=\"connection.routeApplicationServerId\"\n                  [required]=\"connection.routeApplicationServerKey ? 'required' : null\"\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"applicationServerKey\">\n                  {{ 'Application server key' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"\n                    'e.g. {{ example }}'\n                      | translate: { example: '0011AEDF0011AEDF0011AEDF0011AEDF' }\n                  \"\n                  id=\"applicationServerKey\"\n                  name=\"applicationServerKey\"\n                  [(ngModel)]=\"connection.routeApplicationServerKey\"\n                  [required]=\"connection.routeApplicationServerId ? 'required' : null\"\n                  pattern=\"[A-Fa-f0-9]{32}\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid server key' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"adminApiVersion\">\n                  {{ 'Admin API version' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'v102' }\"\n                  id=\"adminApiVersion\"\n                  name=\"adminApiVersion\"\n                  [(ngModel)]=\"connection.adminApiVersion\"\n                  required\n                  pattern=\"^v\\d+$|latest\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid API version' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"coreApiVersion\">\n                  {{ 'Core API version' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'v121' }\"\n                  id=\"coreApiVersion\"\n                  name=\"coreApiVersion\"\n                  [(ngModel)]=\"connection.coreApiVersion\"\n                  required\n                  pattern=\"^v\\d+$|latest\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid API version' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n              <!-- DM-1171 end-->\n              <c8y-form-group>\n                <label for=\"username\">\n                  {{ 'Username' | translate }}\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. joe`LOCALIZE`' | translate }}\"\n                  id=\"username\"\n                  name=\"username\"\n                  [(ngModel)]=\"connection.username\"\n                  required\n                />\n              </c8y-form-group>\n\n              <c8y-form-group *ngIf=\"showPassword\">\n                <label for=\"password\">\n                  {{ 'Password' | translate }}\n                </label>\n                <input\n                  type=\"password\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. my_password' | translate }}\"\n                  id=\"password\"\n                  name=\"password\"\n                  [(ngModel)]=\"connection.password\"\n                  required\n                />\n              </c8y-form-group>\n              \n              <!-- DM-1254 begins -->\n              <c8y-form-group>\n                <label title=\"{{ 'Connection type' | translate }}\">\n                  {{ 'Connection type' | translate }}\n                </label>\n                <label title=\"{{ 'Thingpark Enterprise' }}\" class=\"c8y-radio radio-inline\">\n                  <input type=\"radio\" name=\"c8y-group\" [value]=\"true\"\n                  [(ngModel)]=\"connection.enterpriseConnection\" required>\n                  <span></span> \n                  <span>{{ 'Thingpark Enterprise' }}</span>\n                </label>\n                <label title=\"{{ 'Thingpark Wireless' }}\" class=\"c8y-radio radio-inline\">\n                  <input type=\"radio\" name=\"c8y-group\" [value]=\"false\"\n                  [(ngModel)]=\"connection.enterpriseConnection\" required>\n                  <span></span> \n                  <span>{{ 'Thingpark Wireless' }}</span>\n                </label>\n              </c8y-form-group>\n              <!-- DM-1254 ends -->\n              <button\n                *ngIf=\"state === 'updateConnection'\"\n                type=\"button\"\n                class=\"btn btn-default\"\n                name=\"changePassword\"\n                (click)=\"changePassword()\"\n              >\n                <span title=\"{{ 'Change password' | translate }}\" *ngIf=\"!showPassword\">\n                  {{ 'Change password' | translate }}\n                </span>\n                <span title=\"{{ 'Cancel password change' | translate }}\" *ngIf=\"showPassword\">\n                  {{ 'Cancel password change' | translate }}\n                </span>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"card-footer separator-top\">\n            <button\n              title=\"{{ 'Cancel' | translate }}\"\n              class=\"btn btn-default\"\n              (click)=\"setModel()\"\n              translate\n              type=\"button\"\n            >\n              Cancel\n            </button>\n            <button\n              *ngIf=\"state === 'updateConnection'\"\n              title=\"{{ 'Delete' | translate }}\"\n              class=\"btn btn-danger\"\n              data-cy=\"actility-multiple-lns-connector--delete-connectivity\"\n              (click)=\"deleteConnection(originalConnection)\"\n              translate\n              type=\"button\"\n            >\n              Delete\n            </button>\n            <button\n              [disabled]=\"!this.connectorsForm.form.valid || this.connectorsForm.form.pristine\"\n              title=\"{{ 'Save' | translate }}\"\n              class=\"btn btn-primary\"\n              data-cy=\"actility-multiple-lns-connector.component--save-connectivity\"\n              (click)=\"save()\"\n              translate\n              type=\"submit\"\n            >\n              Save\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1.MultipleLnsConnectorService }, { type: i2.AlertService }, { type: i3.TranslateService }, { type: i2.ModalService }, { type: i4.BsModalService }], propDecorators: { connectorsForm: [{
                type: ViewChild,
                args: ['connectorsForm', { static: false }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 