import * as i0 from '@angular/core';
import { EventEmitter, Input, Output, Component, Injectable, ViewChild, NgModule } from '@angular/core';
import { gettext } from '@c8y/ngx-components/gettext';
import * as i2 from '@c8y/ngx-components';
import { EmptyStateComponent, IconDirective, C8yTranslatePipe, Status, LoadingComponent, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, ListGroupComponent, ListItemComponent, ListItemIconComponent, FormGroupComponent, RequiredInputPlaceholderDirective, MessagesComponent, MessageDirective, C8yTranslateDirective, CoreModule, CommonModule, FormsModule as FormsModule$1, PopoverConfirmComponent, TypeaheadComponent, ForOfDirective, HighlightComponent, ViewContext, hookRoute } from '@c8y/ngx-components';
import * as i1 from '@c8y/client';
import { cloneDeep, escapeRegExp, orderBy, head, find, findIndex, get } from 'lodash-es';
import * as i3$1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i5 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from '@ngx-translate/core';
import * as i4 from 'ngx-bootstrap/modal';
import { saveAs } from 'file-saver';
import { NgIf, NgFor } from '@angular/common';
import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';

class NoConnectionsFoundComponent {
    constructor() {
        this.onAction = new EventEmitter();
        this.header = gettext('Connections');
    }
    addConnection() {
        this.onAction.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NoConnectionsFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: NoConnectionsFoundComponent, isStandalone: true, selector: "no-connections-found", inputs: { header: "header" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card content-fullpage split-view--5-7\">\n  <div class=\"card-header separator grid__col--fullspan\">\n    <h4>{{ header | translate}}</h4>\n  </div>\n  <div class=\"inner-scroll split-view__list\">\n    <div class=\"bg-level-1 flex-grow\">\n      <div class=\"card-block large-padding\">\n        <c8y-ui-empty-state\n          [icon]=\"'plug'\"\n          [title]=\"'No connections found.' | translate\"\n          [subtitle]=\"'Click below to add a new connection.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n    </div>\n\n    <div class=\"card-footer separator\">\n      <button\n        title=\"{{ 'Add connection' | translate }}\"\n        class=\"btn btn-primary\"\n        (click)=\"addConnection()\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\"></i>\n        {{ 'Add connection' | translate }}\n      </button>\n    </div>\n  </div>\n  <div class=\"inner-scroll split-view__detail\">\n    <div class=\"flex-grow\">\n      <div class=\"card-block large-padding\">\n        <c8y-ui-empty-state\n          [icon]=\"'more-details'\"\n          [title]=\"'No settings to display.' | translate\"\n          [subtitle]=\"'Add a connection.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NoConnectionsFoundComponent, decorators: [{
            type: Component,
            args: [{ selector: 'no-connections-found', imports: [EmptyStateComponent, IconDirective, C8yTranslatePipe], template: "<div class=\"card content-fullpage split-view--5-7\">\n  <div class=\"card-header separator grid__col--fullspan\">\n    <h4>{{ header | translate}}</h4>\n  </div>\n  <div class=\"inner-scroll split-view__list\">\n    <div class=\"bg-level-1 flex-grow\">\n      <div class=\"card-block large-padding\">\n        <c8y-ui-empty-state\n          [icon]=\"'plug'\"\n          [title]=\"'No connections found.' | translate\"\n          [subtitle]=\"'Click below to add a new connection.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n    </div>\n\n    <div class=\"card-footer separator\">\n      <button\n        title=\"{{ 'Add connection' | translate }}\"\n        class=\"btn btn-primary\"\n        (click)=\"addConnection()\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\"></i>\n        {{ 'Add connection' | translate }}\n      </button>\n    </div>\n  </div>\n  <div class=\"inner-scroll split-view__detail\">\n    <div class=\"flex-grow\">\n      <div class=\"card-block large-padding\">\n        <c8y-ui-empty-state\n          [icon]=\"'more-details'\"\n          [title]=\"'No settings to display.' | translate\"\n          [subtitle]=\"'Add a connection.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], propDecorators: { onAction: [{
                type: Output
            }], header: [{
                type: Input
            }] } });

var ConnectionType;
(function (ConnectionType) {
    ConnectionType[ConnectionType["ACTILITY"] = 0] = "ACTILITY";
    ConnectionType[ConnectionType["SIGFOX"] = 1] = "SIGFOX";
    ConnectionType[ConnectionType["LORIOT"] = 2] = "LORIOT";
})(ConnectionType || (ConnectionType = {}));
function isSigfoxConnection(connection) {
    return typeof connection.parentGroupId !== 'undefined';
}
function isActilityConnection(connection) {
    return typeof connection.profileId !== 'undefined';
}
function isLoriotConnection(connection) {
    return typeof connection.providerType !== 'undefined';
}

class MultipleLnsConnectorService {
    constructor(client, appStateService, alertService) {
        this.client = client;
        this.appStateService = appStateService;
        this.alertService = alertService;
        this.headers = { 'Content-Type': 'application/json' };
    }
    async list(connectionType) {
        const url = `${this.getBaseUrlByType(connectionType)}/lns-connection`;
        const options = {
            method: 'GET',
            headers: this.headers
        };
        return this.client.fetch(url, options);
    }
    /**
     * Saves the connection.
     * @param connection The connection to be saved.
     * @param originalName The original name of the connection, required to perform an update.
     */
    async save(connection, originalName = null) {
        if (originalName) {
            return this.update(connection, originalName);
        }
        return this.create(connection);
    }
    async detail(connectionType, connectionName) {
        const name = connectionName.toLocaleLowerCase();
        const url = `${this.getBaseUrlByType(connectionType)}/lns-connection/${encodeURIComponent(String(name))}`;
        const options = {
            method: 'GET',
            headers: this.headers
        };
        const res = await this.client.fetch(url, options);
        if (res.status === 200) {
            return await res.json();
        }
        return null;
    }
    async exists(connectionType, connectionName) {
        const connection = await this.detail(connectionType, connectionName);
        return connection !== null;
    }
    async create(connection) {
        connection.name = connection.name.toLocaleLowerCase();
        const url = `${this.getBaseUrlByConnection(connection)}/lns-connection`;
        const options = {
            method: 'POST',
            headers: this.headers,
            body: JSON.stringify(connection)
        };
        return this.client.fetch(url, options);
    }
    async update(connection, originalName) {
        connection.name = connection.name.toLocaleLowerCase();
        const url = `${this.getBaseUrlByConnection(connection)}/lns-connection/${encodeURIComponent(String(originalName))}`;
        const options = {
            method: 'PUT',
            headers: this.headers,
            body: JSON.stringify(connection)
        };
        return this.client.fetch(url, options);
    }
    getBaseUrlByConnection(connection) {
        return isSigfoxConnection(connection)
            ? 'service/sigfox-agent'
            : isActilityConnection(connection)
                ? 'service/actility'
                : isLoriotConnection(connection)
                    ? 'service/loriot'
                    : '';
    }
    getBaseUrlByType(connectionType) {
        return connectionType === ConnectionType.SIGFOX
            ? 'service/sigfox-agent'
            : connectionType === ConnectionType.ACTILITY
                ? 'service/actility'
                : connectionType === ConnectionType.LORIOT
                    ? 'service/loriot'
                    : '';
    }
    async delete(connection) {
        const url = `${this.getBaseUrlByConnection(connection)}/lns-connection`;
        const options = {
            method: 'DELETE'
        };
        return this.client.fetch(`${url}/${encodeURIComponent(String(connection.name))}`, options);
    }
    getApplication(name) {
        const { references } = this.appStateService.currentTenant.value.applications;
        return references.find(({ application }) => application.name === name).application;
    }
    async download(url) {
        try {
            const options = {
                method: 'GET'
            };
            return this.client.fetch(url, options);
        }
        catch (e) {
            this.alertService.addServerFailure(e);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultipleLnsConnectorService, deps: [{ token: i1.FetchClient }, { token: i2.AppStateService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultipleLnsConnectorService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultipleLnsConnectorService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i2.AppStateService }, { type: i2.AlertService }] });

class ConnectionInfoWithDownloadCsvComponent {
    constructor(modal, connectorService, alertService, translateService) {
        this.modal = modal;
        this.connectorService = connectorService;
        this.alertService = alertService;
        this.translateService = translateService;
    }
    dismiss() {
        this.modal.hide();
    }
    async download() {
        const url = `/service/${this.appData.contextPath}${this.messageData.attrs.URL}`;
        const res = await this.connectorService.download(url);
        if (res && res.status === 200) {
            const streamData = await res.blob();
            saveAs(streamData, this.translateService.instant(gettext('{{ connectionName }} - devices.csv'), {
                connectionName: this.connectionName
            }));
        }
        else {
            this.alertService.danger(gettext('A server error occurred.'));
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConnectionInfoWithDownloadCsvComponent, deps: [{ token: i4.BsModalRef }, { token: MultipleLnsConnectorService }, { token: i2.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConnectionInfoWithDownloadCsvComponent, isStandalone: true, selector: "connection-info-with-download-csv", inputs: { messageData: "messageData", appData: "appData", modalTitle: "modalTitle", connectionName: "connectionName" }, ngImport: i0, template: "<div class=\"modal-dialog\">\n  <div class=\"modal-content\">\n    <div class=\"c8y-prompt alert alert-danger\">\n      <h3 class=\"m-b-16\">\n        <i class=\"dlt-c8y-icon-exclamation-circle\"></i>\n        <span>{{ modalTitle | translate }}</span>\n      </h3>\n      <p class=\"text-break-word\">\n        {{ messageData.message | translate }}\n      </p>\n      <br>\n      <span class=\"btn-default\" (click)=\"download()\">{{\n        'Click the link to download the file with the affected devices.' | translate\n      }}</span>\n      <div class=\"alert-footer\">\n        <button\n          title=\"{{ 'Cancel' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-default\"\n          (click)=\"dismiss()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConnectionInfoWithDownloadCsvComponent, decorators: [{
            type: Component,
            args: [{ selector: 'connection-info-with-download-csv', imports: [C8yTranslatePipe], template: "<div class=\"modal-dialog\">\n  <div class=\"modal-content\">\n    <div class=\"c8y-prompt alert alert-danger\">\n      <h3 class=\"m-b-16\">\n        <i class=\"dlt-c8y-icon-exclamation-circle\"></i>\n        <span>{{ modalTitle | translate }}</span>\n      </h3>\n      <p class=\"text-break-word\">\n        {{ messageData.message | translate }}\n      </p>\n      <br>\n      <span class=\"btn-default\" (click)=\"download()\">{{\n        'Click the link to download the file with the affected devices.' | translate\n      }}</span>\n      <div class=\"alert-footer\">\n        <button\n          title=\"{{ 'Cancel' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-default\"\n          (click)=\"dismiss()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>" }]
        }], ctorParameters: () => [{ type: i4.BsModalRef }, { type: MultipleLnsConnectorService }, { type: i2.AlertService }, { type: i3.TranslateService }], propDecorators: { messageData: [{
                type: Input
            }], appData: [{
                type: Input
            }], modalTitle: [{
                type: Input
            }], connectionName: [{
                type: Input
            }] } });

class SigfoxMultipleLnsConnectorComponent {
    constructor(connectorService, alertService, translateService, modalService, modal) {
        this.connectorService = connectorService;
        this.alertService = alertService;
        this.translateService = translateService;
        this.modalService = modalService;
        this.modal = modal;
        this.state = 'loadingConnection';
        this.cloneDeep = cloneDeep;
        this.connections = Array();
        this.showPassword = false;
        this.cardHeader = gettext('Sigfox 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.SIGFOX);
        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) {
        const resetConnection = await this.resetEditedUnsavedConnection();
        this.connection = connectionObj
            ? connectionObj
            : this.state === 'savedSuccessfully'
                ? this.connection
                : (resetConnection ?? cloneDeep(head(this.connections)));
        this.state = 'updateConnection';
        this.showPassword = false;
        this.originalConnection = this.connection ? cloneDeep(this.connection) : undefined;
    }
    async resetEditedUnsavedConnection() {
        if (this.state !== 'updateConnection' || !this.originalConnection) {
            return;
        }
        const { name } = this.originalConnection;
        const originalData = find(this.connections, { name });
        if (originalData) {
            return cloneDeep(originalData);
        }
    }
    async addConnection() {
        await this.resetEditedUnsavedConnection();
        this.connection = {};
        this.originalConnection = {};
        this.state = 'addConnections';
        this.showPassword = true;
    }
    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.SIGFOX, 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('sigfox-agent');
            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('sigfox-agent');
                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: "20.3.15", ngImport: i0, type: SigfoxMultipleLnsConnectorComponent, deps: [{ token: MultipleLnsConnectorService }, { token: i2.AlertService }, { token: i3.TranslateService }, { token: i4.BsModalService }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SigfoxMultipleLnsConnectorComponent, isStandalone: true, selector: "sigfox-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<c8y-title>{{ 'Connectivity' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\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]=\"'Sigfox' | 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(cloneDeep(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              class=\"c8y-nav-stacked active\"\n              *ngIf=\"state === 'addConnections'\"\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            class=\"btn btn-default\"\n            title=\"{{ 'Add connection' | translate }}\"\n            [disabled]=\"state === 'addConnections'\"\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            class=\"btn btn-clean text-primary\"\n            title=\"{{ 'Back' | translate }}\"\n            ng-click=\"vm.deselect()\"\n          >\n            <i [c8yIcon]=\"'chevron-left'\"></i>\n            <span>{{ 'Back' | translate }}</span>\n          </button>\n        </div>\n        <form\n          class=\"d-contents\"\n          #connectorsForm=\"ngForm\"\n        >\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                  class=\"form-control\"\n                  id=\"name\"\n                  name=\"name\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"'e.g. Sigfox connection' | translate\"\n                  [(ngModel)]=\"connection.name\"\n                  [pattern]=\"namePattern\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    [text]=\"namePatternError\"\n                  ></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                  class=\"form-control\"\n                  id=\"description\"\n                  name=\"description\"\n                  type=\"text\"\n                  [placeholder]=\"\n                    'e.g. This connection has a built-in functionality to\u2026' | translate\n                  \"\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                  class=\"form-control\"\n                  id=\"baseUrl\"\n                  name=\"baseUrl\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate : { example: 'https://backend.sigfox.com/api' }\n                  \"\n                  [(ngModel)]=\"connection.baseUrl\"\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"parentGroupId\">\n                  {{ 'Parent group ID' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"parentGroupId\"\n                  name=\"parentGroupId\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate : { example: '58c1793b9e93a15370f71caa' }\n                  \"\n                  [(ngModel)]=\"connection.parentGroupId\"\n                  pattern=\"[a-z\\d]+\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid Parent group ID' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"username\">\n                  {{ 'Username' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"username\"\n                  placeholder=\"{{ 'e.g. joe`LOCALIZE`' | translate }}\"\n                  name=\"username\"\n                  type=\"text\"\n                  required\n                  [(ngModel)]=\"connection.username\"\n                />\n              </c8y-form-group>\n              <c8y-form-group *ngIf=\"showPassword\">\n                <label for=\"password\">\n                  {{ 'Password' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"password\"\n                  placeholder=\"{{ 'e.g. my_password' | translate }}\"\n                  name=\"password\"\n                  type=\"password\"\n                  required\n                  [(ngModel)]=\"connection.password\"\n                />\n              </c8y-form-group>\n\n              <button\n                class=\"btn btn-default\"\n                name=\"changePassword\"\n                type=\"button\"\n                *ngIf=\"state === 'updateConnection'\"\n                (click)=\"changePassword()\"\n              >\n                <span\n                  title=\"{{ 'Change password' | translate }}\"\n                  *ngIf=\"!showPassword\"\n                >\n                  {{ 'Change password' | translate }}\n                </span>\n                <span\n                  title=\"{{ 'Cancel password change' | translate }}\"\n                  *ngIf=\"showPassword\"\n                >\n                  {{ 'Cancel password change' | translate }}\n                </span>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"card-footer separator-top\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"setModel()\"\n              translate\n            >\n              Cancel\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              title=\"{{ 'Delete' | translate }}\"\n              type=\"button\"\n              data-cy=\"sigfox-multiple-lns-connector.component--delete-connectivity\"\n              *ngIf=\"state === 'updateConnection'\"\n              (click)=\"deleteConnection(originalConnection)\"\n              translate\n            >\n              Delete\n            </button>\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Save' | translate }}\"\n              data-cy=\"sigfox-multiple-lns-connector.component--save-connectivity\"\n              type=\"submit\"\n              [disabled]=\"!connectorsForm.form.valid || connectorsForm.form.pristine\"\n              (click)=\"save()\"\n              translate\n            >\n              Save\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: NoConnectionsFoundComponent, selector: "no-connections-found", inputs: ["header"], outputs: ["onAction"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SigfoxMultipleLnsConnectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sigfox-multiple-lns-connector', imports: [
                        NgIf,
                        LoadingComponent,
                        TitleComponent,
                        BreadcrumbComponent,
                        BreadcrumbItemComponent,
                        NoConnectionsFoundComponent,
                        ListGroupComponent,
                        NgFor,
                        ListItemComponent,
                        ListItemIconComponent,
                        IconDirective,
                        FormsModule,
                        FormGroupComponent,
                        RequiredInputPlaceholderDirective,
                        MessagesComponent,
                        MessageDirective,
                        C8yTranslateDirective,
                        C8yTranslatePipe
                    ], template: "<ng-container *ngIf=\"state === 'loadingConnection'; else renderListAndForm\">\n  <c8y-loading></c8y-loading>\n</ng-container>\n<c8y-title>{{ 'Connectivity' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\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]=\"'Sigfox' | 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(cloneDeep(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              class=\"c8y-nav-stacked active\"\n              *ngIf=\"state === 'addConnections'\"\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            class=\"btn btn-default\"\n            title=\"{{ 'Add connection' | translate }}\"\n            [disabled]=\"state === 'addConnections'\"\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            class=\"btn btn-clean text-primary\"\n            title=\"{{ 'Back' | translate }}\"\n            ng-click=\"vm.deselect()\"\n          >\n            <i [c8yIcon]=\"'chevron-left'\"></i>\n            <span>{{ 'Back' | translate }}</span>\n          </button>\n        </div>\n        <form\n          class=\"d-contents\"\n          #connectorsForm=\"ngForm\"\n        >\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                  class=\"form-control\"\n                  id=\"name\"\n                  name=\"name\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"'e.g. Sigfox connection' | translate\"\n                  [(ngModel)]=\"connection.name\"\n                  [pattern]=\"namePattern\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    [text]=\"namePatternError\"\n                  ></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                  class=\"form-control\"\n                  id=\"description\"\n                  name=\"description\"\n                  type=\"text\"\n                  [placeholder]=\"\n                    'e.g. This connection has a built-in functionality to\u2026' | translate\n                  \"\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                  class=\"form-control\"\n                  id=\"baseUrl\"\n                  name=\"baseUrl\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate : { example: 'https://backend.sigfox.com/api' }\n                  \"\n                  [(ngModel)]=\"connection.baseUrl\"\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"parentGroupId\">\n                  {{ 'Parent group ID' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"parentGroupId\"\n                  name=\"parentGroupId\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate : { example: '58c1793b9e93a15370f71caa' }\n                  \"\n                  [(ngModel)]=\"connection.parentGroupId\"\n                  pattern=\"[a-z\\d]+\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    text=\"{{ 'Must be a valid Parent group ID' | translate }}\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group>\n                <label for=\"username\">\n                  {{ 'Username' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"username\"\n                  placeholder=\"{{ 'e.g. joe`LOCALIZE`' | translate }}\"\n                  name=\"username\"\n                  type=\"text\"\n                  required\n                  [(ngModel)]=\"connection.username\"\n                />\n              </c8y-form-group>\n              <c8y-form-group *ngIf=\"showPassword\">\n                <label for=\"password\">\n                  {{ 'Password' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"password\"\n                  placeholder=\"{{ 'e.g. my_password' | translate }}\"\n                  name=\"password\"\n                  type=\"password\"\n                  required\n                  [(ngModel)]=\"connection.password\"\n                />\n              </c8y-form-group>\n\n              <button\n                class=\"btn btn-default\"\n                name=\"changePassword\"\n                type=\"button\"\n                *ngIf=\"state === 'updateConnection'\"\n                (click)=\"changePassword()\"\n              >\n                <span\n                  title=\"{{ 'Change password' | translate }}\"\n                  *ngIf=\"!showPassword\"\n                >\n                  {{ 'Change password' | translate }}\n                </span>\n                <span\n                  title=\"{{ 'Cancel password change' | translate }}\"\n                  *ngIf=\"showPassword\"\n                >\n                  {{ 'Cancel password change' | translate }}\n                </span>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"card-footer separator-top\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"setModel()\"\n              translate\n            >\n              Cancel\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              title=\"{{ 'Delete' | translate }}\"\n              type=\"button\"\n              data-cy=\"sigfox-multiple-lns-connector.component--delete-connectivity\"\n              *ngIf=\"state === 'updateConnection'\"\n              (click)=\"deleteConnection(originalConnection)\"\n              translate\n            >\n              Delete\n            </button>\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Save' | translate }}\"\n              data-cy=\"sigfox-multiple-lns-connector.component--save-connectivity\"\n              type=\"submit\"\n              [disabled]=\"!connectorsForm.form.valid || connectorsForm.form.pristine\"\n              (click)=\"save()\"\n              translate\n            >\n              Save\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: MultipleLnsConnectorService }, { type: i2.AlertService }, { type: i3.TranslateService }, { type: i4.BsModalService }, { type: i2.ModalService }], propDecorators: { connectorsForm: [{
                type: ViewChild,
                args: ['connectorsForm', { static: false }]
            }] } });

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: "20.3.15", ngImport: i0, type: ActilityMultipleLnsConnectorComponent, deps: [{ token: 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: "20.3.15", type: ActilityMultipleLnsConnectorComponent, isStandalone: true, 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]=\"!connectorsForm.form.valid || 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: NoConnectionsFoundComponent, selector: "no-connections-found", inputs: ["header"], outputs: ["onAction"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ActilityMultipleLnsConnectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'actility-multiple-lns-connector', imports: [
                        NgIf,
                        LoadingComponent,
                        TitleComponent,
                        BreadcrumbComponent,
                        BreadcrumbItemComponent,
                        NoConnectionsFoundComponent,
                        ListGroupComponent,
                        NgFor,
                        ListItemComponent,
                        ListItemIconComponent,
                        IconDirective,
                        FormsModule,
                        FormGroupComponent,
                        RequiredInputPlaceholderDirective,
                        MessagesComponent,
                        MessageDirective,
                        C8yTranslateDirective,
                        C8yTranslatePipe
                    ], 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]=\"!connectorsForm.form.valid || 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: MultipleLnsConnectorService }, { type: i2.AlertService }, { type: i3.TranslateService }, { type: i2.ModalService }, { type: i4.BsModalService }], propDecorators: { connectorsForm: [{
                type: ViewChild,
                args: ['connectorsForm', { static: false }]
            }] } });

class LoriotMultipleLnsConnectorComponent {
    constructor(connectorService, alertService, translateService, modalService, modal) {
        this.connectorService = connectorService;
        this.alertService = alertService;
        this.translateService = translateService;
        this.modalService = modalService;
        this.modal = modal;
        this.state = 'loadingConnection';
        this.cloneDeep = cloneDeep;
        this.connections = Array();
        this.showPassword = false;
        this.cardHeader = gettext('LORIOT 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.LORIOT);
        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) {
        const resetConnection = await this.resetEditedUnsavedConnection();
        this.connection = connectionObj
            ? connectionObj
            : this.state === 'savedSuccessfully'
                ? this.connection
                : (resetConnection ?? cloneDeep(head(this.connections)));
        this.state = 'updateConnection';
        this.showPassword = false;
        this.originalConnection = this.connection ? cloneDeep(this.connection) : undefined;
        this.connection.providerType = 'loriotType';
    }
    async resetEditedUnsavedConnection() {
        if (this.state !== 'updateConnection' || !this.originalConnection) {
            return;
        }
        const { name } = this.originalConnection;
        const originalData = find(this.connections, { name });
        if (originalData) {
            return cloneDeep(originalData);
        }
    }
    async addConnection() {
        await this.resetEditedUnsavedConnection();
        this.connection = {};
        this.originalConnection = {};
        this.state = 'addConnections';
        this.showPassword = true;
        this.connection.providerType = 'loriotType';
    }
    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.LORIOT, checkForConnectionName);
        if (this.state === 'addConnections' && isConnectionExist) {
            const msg = this.translateService.instant(gettext(`Connection with name "{{ name }}" already exists.`), { name: this.connection.name });
            this.alertService.danger(msg);
        }
        else {
            return this.saveConnection();
        }
    }
    async deleteConnection(originalConnection) {
        const { name } = originalConnection;
        const msg = 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'), msg, 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('loriot-agent');
            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) {
        if (!originalConnection.providerType)
            originalConnection.providerType = 'loriotType';
        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('loriot-agent');
                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: "20.3.15", ngImport: i0, type: LoriotMultipleLnsConnectorComponent, deps: [{ token: MultipleLnsConnectorService }, { token: i2.AlertService }, { token: i3.TranslateService }, { token: i4.BsModalService }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LoriotMultipleLnsConnectorComponent, isStandalone: true, selector: "loriot-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    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\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]=\"'LORIOT' | 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-gray-white 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(cloneDeep(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              class=\"c8y-nav-stacked active\"\n              *ngIf=\"state === 'addConnections'\"\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            class=\"btn btn-default\"\n            title=\"{{ 'Add connection' | translate }}\"\n            [disabled]=\"state === 'addConnections'\"\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        [class]=\"{ 'split-view__detail--selected': connection }\"\n      >\n        <div class=\"card-header separator visible-sm visible-xs fit-w sticky-top\">\n          <button\n            class=\"btn btn-clean text-primary\"\n            title=\"{{ 'Back' | translate }}\"\n            (click)=\"resetEditedUnsavedConnection()\"\n          >\n            <i [c8yIcon]=\"'chevron-left'\"></i>\n            <span>{{ 'Back' | translate }}</span>\n          </button>\n        </div>\n        <form\n          class=\"d-contents\"\n          #connectorsForm=\"ngForm\"\n        >\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                  class=\"form-control\"\n                  id=\"name\"\n                  name=\"name\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"'e.g. LORIOT connection' | translate\"\n                  [(ngModel)]=\"connection.name\"\n                  [pattern]=\"namePattern\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    [text]=\"namePatternError\"\n                  ></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                  class=\"form-control\"\n                  id=\"description\"\n                  name=\"description\"\n                  type=\"text\"\n                  [placeholder]=\"\n                    'e.g. This connection has a built-in functionality to\u2026' | translate\n                  \"\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                  class=\"form-control\"\n                  id=\"baseUrl\"\n                  name=\"baseUrl\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate : { example: 'https://ap3.loriot.io' }\n                  \"\n                  [(ngModel)]=\"connection.baseUrl\"\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"username\">\n                  {{ 'Username' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"username\"\n                  placeholder=\"{{ 'e.g. joe`LOCALIZE`' | translate }}\"\n                  name=\"username\"\n                  type=\"text\"\n                  required\n                  [(ngModel)]=\"connection.username\"\n                />\n              </c8y-form-group>\n              <c8y-form-group *ngIf=\"showPassword\">\n                <label for=\"password\">\n                  {{ 'Password' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"password\"\n                  placeholder=\"{{ 'e.g. my_password' | translate }}\"\n                  name=\"password\"\n                  type=\"password\"\n                  required\n                  [(ngModel)]=\"connection.password\"\n                />\n              </c8y-form-group>\n\n              <button\n                class=\"btn btn-default\"\n                name=\"changePassword\"\n                type=\"button\"\n                *ngIf=\"state === 'updateConnection'\"\n                (click)=\"changePassword()\"\n              >\n                <span\n                  title=\"{{ 'Change password' | translate }}\"\n                  *ngIf=\"!showPassword\"\n                >\n                  {{ 'Change password' | translate }}\n                </span>\n                <span\n                  title=\"{{ 'Cancel password change' | translate }}\"\n                  *ngIf=\"showPassword\"\n                >\n                  {{ 'Cancel password change' | translate }}\n                </span>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"card-footer separator-top\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"setModel()\"\n              translate\n            >\n              Cancel\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              title=\"{{ 'Delete' | translate }}\"\n              type=\"button\"\n              data-cy=\"loriot-multiple-lns-connector.component--delete-connectivity\"\n              *ngIf=\"state === 'updateConnection'\"\n              (click)=\"deleteConnection(originalConnection)\"\n              translate\n            >\n              Delete\n            </button>\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Save' | translate }}\"\n              type=\"submit\"\n              [disabled]=\"!connectorsForm.form.valid || connectorsForm.form.pristine\"\n              (click)=\"save()\"\n              data-cy=\"loriot-multiple-lns-connector.component--button-save\"\n              translate\n            >\n              Save\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: NoConnectionsFoundComponent, selector: "no-connections-found", inputs: ["header"], outputs: ["onAction"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoriotMultipleLnsConnectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'loriot-multiple-lns-connector', imports: [
                        NgIf,
                        LoadingComponent,
                        TitleComponent,
                        BreadcrumbComponent,
                        BreadcrumbItemComponent,
                        NoConnectionsFoundComponent,
                        ListGroupComponent,
                        NgFor,
                        ListItemComponent,
                        ListItemIconComponent,
                        IconDirective,
                        FormsModule,
                        FormGroupComponent,
                        RequiredInputPlaceholderDirective,
                        MessagesComponent,
                        MessageDirective,
                        C8yTranslateDirective,
                        C8yTranslatePipe
                    ], 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    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\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]=\"'LORIOT' | 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-gray-white 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(cloneDeep(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              class=\"c8y-nav-stacked active\"\n              *ngIf=\"state === 'addConnections'\"\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            class=\"btn btn-default\"\n            title=\"{{ 'Add connection' | translate }}\"\n            [disabled]=\"state === 'addConnections'\"\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        [class]=\"{ 'split-view__detail--selected': connection }\"\n      >\n        <div class=\"card-header separator visible-sm visible-xs fit-w sticky-top\">\n          <button\n            class=\"btn btn-clean text-primary\"\n            title=\"{{ 'Back' | translate }}\"\n            (click)=\"resetEditedUnsavedConnection()\"\n          >\n            <i [c8yIcon]=\"'chevron-left'\"></i>\n            <span>{{ 'Back' | translate }}</span>\n          </button>\n        </div>\n        <form\n          class=\"d-contents\"\n          #connectorsForm=\"ngForm\"\n        >\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                  class=\"form-control\"\n                  id=\"name\"\n                  name=\"name\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"'e.g. LORIOT connection' | translate\"\n                  [(ngModel)]=\"connection.name\"\n                  [pattern]=\"namePattern\"\n                />\n                <c8y-messages>\n                  <c8y-message\n                    name=\"pattern\"\n                    [text]=\"namePatternError\"\n                  ></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                  class=\"form-control\"\n                  id=\"description\"\n                  name=\"description\"\n                  type=\"text\"\n                  [placeholder]=\"\n                    'e.g. This connection has a built-in functionality to\u2026' | translate\n                  \"\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                  class=\"form-control\"\n                  id=\"baseUrl\"\n                  name=\"baseUrl\"\n                  type=\"text\"\n                  required\n                  [placeholder]=\"\n                    'e.g. {{ example }}' | translate : { example: 'https://ap3.loriot.io' }\n                  \"\n                  [(ngModel)]=\"connection.baseUrl\"\n                />\n              </c8y-form-group>\n              <c8y-form-group>\n                <label for=\"username\">\n                  {{ 'Username' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"username\"\n                  placeholder=\"{{ 'e.g. joe`LOCALIZE`' | translate }}\"\n                  name=\"username\"\n                  type=\"text\"\n                  required\n                  [(ngModel)]=\"connection.username\"\n                />\n              </c8y-form-group>\n              <c8y-form-group *ngIf=\"showPassword\">\n                <label for=\"password\">\n                  {{ 'Password' | translate }}\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"password\"\n                  placeholder=\"{{ 'e.g. my_password' | translate }}\"\n                  name=\"password\"\n                  type=\"password\"\n                  required\n                  [(ngModel)]=\"connection.password\"\n                />\n              </c8y-form-group>\n\n              <button\n                class=\"btn btn-default\"\n                name=\"changePassword\"\n                type=\"button\"\n                *ngIf=\"state === 'updateConnection'\"\n                (click)=\"changePassword()\"\n              >\n                <span\n                  title=\"{{ 'Change password' | translate }}\"\n                  *ngIf=\"!showPassword\"\n                >\n                  {{ 'Change password' | translate }}\n                </span>\n                <span\n                  title=\"{{ 'Cancel password change' | translate }}\"\n                  *ngIf=\"showPassword\"\n                >\n                  {{ 'Cancel password change' | translate }}\n                </span>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"card-footer separator-top\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"setModel()\"\n              translate\n            >\n              Cancel\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              title=\"{{ 'Delete' | translate }}\"\n              type=\"button\"\n              data-cy=\"loriot-multiple-lns-connector.component--delete-connectivity\"\n              *ngIf=\"state === 'updateConnection'\"\n              (click)=\"deleteConnection(originalConnection)\"\n              translate\n            >\n              Delete\n            </button>\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Save' | translate }}\"\n              type=\"submit\"\n              [disabled]=\"!connectorsForm.form.valid || connectorsForm.form.pristine\"\n              (click)=\"save()\"\n              data-cy=\"loriot-multiple-lns-connector.component--button-save\"\n              translate\n            >\n              Save\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: MultipleLnsConnectorService }, { type: i2.AlertService }, { type: i3.TranslateService }, { type: i4.BsModalService }, { type: i2.ModalService }], propDecorators: { connectorsForm: [{
                type: ViewChild,
                args: ['connectorsForm', { static: false }]
            }] } });

const settingsRoutes = [
    {
        path: 'connectivitySettings/multiple_lns_connectors_sigfox',
        component: SigfoxMultipleLnsConnectorComponent
    },
    {
        path: 'connectivitySettings/multiple_lns_connectors_actility',
        component: ActilityMultipleLnsConnectorComponent
    },
    {
        path: 'connectivitySettings/multiple_lns_connectors_loriot',
        component: LoriotMultipleLnsConnectorComponent
    }
];
class MultipleLnsConnectorsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultipleLnsConnectorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MultipleLnsConnectorsModule, imports: [CoreModule,
            CommonModule,
            FormsModule$1, i3$1.RouterModule, SigfoxMultipleLnsConnectorComponent,
            NoConnectionsFoundComponent,
            ActilityMultipleLnsConnectorComponent,
            LoriotMultipleLnsConnectorComponent,
            ConnectionInfoWithDownloadCsvComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultipleLnsConnectorsModule, providers: [MultipleLnsConnectorService], imports: [CoreModule,
            CommonModule,
            FormsModule$1,
            RouterModule.forChild(settingsRoutes),
            SigfoxMultipleLnsConnectorComponent,
            NoConnectionsFoundComponent,
            ActilityMultipleLnsConnectorComponent,
            LoriotMultipleLnsConnectorComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultipleLnsConnectorsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CoreModule,
                        CommonModule,
                        FormsModule$1,
                        RouterModule.forChild(settingsRoutes),
                        SigfoxMultipleLnsConnectorComponent,
                        NoConnectionsFoundComponent,
                        ActilityMultipleLnsConnectorComponent,
                        LoriotMultipleLnsConnectorComponent,
                        ConnectionInfoWithDownloadCsvComponent
                    ],
                    providers: [MultipleLnsConnectorService]
                }]
        }] });

class LpwanSetDeviceProtocolService {
    constructor(inventoryService, client, identityService, lnsService) {
        this.inventoryService = inventoryService;
        this.client = client;
        this.identityService = identityService;
        this.lnsService = lnsService;
        this.supportedDevicesCfgs = [
            {
                name: 'actility',
                match: device => get(device, 'c8y_LpwanDevice.lpwanDeviceType') === 'Lora' &&
                    get(device, 'c8y_LpwanDevice.serviceProvider') === 'Actility',
                protocolTypes: ['c8y_ActilityDeviceType', 'c8y_LoraDeviceType', 'c8y_LpwanDeviceType'],
                externalIdTypes: ['c8y_LoriotEUI', 'c8y_Serial'],
                connectionType: ConnectionType.ACTILITY
            },
            {
                name: 'loriot',
                match: device => get(device, 'c8y_LpwanDevice.lpwanDeviceType') === 'Lora' &&
                    get(device, 'c8y_LpwanDevice.serviceProvider') === 'Loriot',
                protocolTypes: ['c8y_LoraDeviceType', 'c8y_LpwanDeviceType'],
                externalIdTypes: ['c8y_LoriotEUI', 'c8y_Serial'],
                connectionType: ConnectionType.LORIOT
            },
            {
                name: 'sigfox',
                match: device => get(device, 'c8y_LpwanDevice.serviceProvider') === 'Sigfox',
                protocolTypes: ['c8y_SigfoxDeviceType', 'c8y_LpwanDeviceType'],
                externalIdTypes: ['com.sigfox.deviceId'],
                connectionType: ConnectionType.SIGFOX
            }
        ];
        this.header = { 'Content-Type': 'application/json' };
    }
    async refreshCache(device) {
        const externalId = await this.getExternalId(device);
        if (externalId) {
            const url = `${this.getMicroserviceUrl(device)}/refreshCache/${externalId}`;
            const options = {
                method: 'POST',
                headers: this.header,
                body: JSON.stringify({})
            };
            return this.client.fetch(url, options);
        }
    }
    getMicroserviceUrl(device) {
        const { serviceProvider } = device.c8y_LpwanDevice;
        let serviceName = serviceProvider.toLowerCase();
        if (serviceProvider === 'Sigfox') {
            serviceName = 'sigfox-agent';
        }
        return `/service/${serviceName}`;
    }
    isSupportedDevice(device) {
        return this.supportedDevicesCfgs.some(({ match }) => match(device));
    }
    async getCurrentProtocol(device) {
        const lpwanDevice = device.c8y_LpwanDevice;
        let protocolId;
        if (lpwanDevice.typeExternalId) {
            const externalId = (await this.identityService.detail(lpwanDevice.typeExternalId)).data;
            protocolId = externalId.managedObject.id;
        }
        if (!protocolId && lpwanDevice.type) {
            protocolId = lpwanDevice.type.split('/')[2];
        }
        if (!protocolId) {
            return null;
        }
        return (await this.inventoryService.detail(protocolId)).data;
    }
    async applyProtocol(device, selectedProtocol) {
        const [protocolExternalId] = (await this.identityService.list(selectedProtocol.id)).data;
        const { externalId, type } = protocolExternalId;
        device.c8y_LpwanDevice.typeExternalId = { externalId, type };
        device.c8y_LpwanDevice.type = 'inventory/managedObjects/' + selectedProtocol.id;
        device.type = selectedProtocol.name;
        return this.inventoryService.update(device);
    }
    async getAvailableProtocols(device) {
        const query = {
            __filter: {
                type: { __in: this.getProtocolTypesMatchingDevice(device) }
            },
            __orderby: [{ name: 1 }]
        };
        return this.inventoryService.listQuery(query, { withTotalPages: true, pageSize: 5 });
    }
    async getAvailableConnections(device) {
        let list;
        const matchingCfg = this.supportedDevicesCfgs.find(({ match }) => match(device));
        const response = await this.lnsService.list(matchingCfg.connectionType);
        if (response && response.status === 200) {
            list = await response.json();
            list = orderBy(list, ['name'], ['asc']);
            return { res: response, data: list };
        }
    }
    getProtocolTypesMatchingDevice(device) {
        const matchingCfg = this.supportedDevicesCfgs.find(({ match }) => match(device));
        return matchingCfg ? matchingCfg.protocolTypes : [];
    }
    async getExternalId(device) {
        const matchingCfg = this.supportedDevicesCfgs.find(({ match }) => match(device));
        const externalIds = (await this.identityService.list(device.id)).data;
        const externalId = externalIds.find(({ type }) => matchingCfg.externalIdTypes.includes(type));
        return externalId ? externalId.externalId : null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanSetDeviceProtocolService, deps: [{ token: i1.InventoryService }, { token: i1.FetchClient }, { token: i1.IdentityService }, { token: MultipleLnsConnectorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanSetDeviceProtocolService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanSetDeviceProtocolService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i1.FetchClient }, { type: i1.IdentityService }, { type: MultipleLnsConnectorService }] });

class LpwanAssignLnsConnectionsComponent {
    constructor(lpwanService, alertService) {
        this.lpwanService = lpwanService;
        this.alertService = alertService;
        this.buttons = [
            { label: gettext('Cancel'), action: () => Promise.reject() },
            { label: gettext('Re-register'), action: () => this.deviceReregister(), status: 'default' }
        ];
        this.reRegisterMsg = gettext('To change provider connection, you need to re-register device first.');
        this.filterConnection = pipe();
        this.pattern = '';
    }
    async ngOnInit() {
        await this.reload();
        this.setConnectionPipe('');
    }
    setConnectionPipe(filterStr) {
        this.pattern = filterStr;
        this.filterConnection = pipe(map(connections => connections.filter(connection => (!this.currentConnection || this.currentConnection.name !== connection.name) &&
            (!filterStr || connection.name.toLowerCase().indexOf(filterStr.toLowerCase()) > -1))));
    }
    async reload() {
        this.loading = true;
        this.newConnection = null;
        try {
            this.availableConnections = await this.lpwanService.getAvailableConnections(this.device);
            this.currentConnection = find(this.availableConnections.data, {
                name: this.device.c8y_LpwanDevice.lnsConnectionName
            });
        }
        catch (ex) {
            this.alertService.addServerFailure(ex);
        }
        finally {
            this.loading = false;
        }
    }
    togglePopover(popoverCfrm) {
        popoverCfrm.show();
        this.setConnectionPipe('');
    }
    deviceReregister() {
        return new Promise(resolve => {
            window.location.href = `#/deviceregistration`;
            resolve(true);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanAssignLnsConnectionsComponent, deps: [{ token: LpwanSetDeviceProtocolService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LpwanAssignLnsConnectionsComponent, isStandalone: true, selector: "set-lns-connections", inputs: { device: "device" }, viewQueries: [{ propertyName: "popoverConfirm", first: true, predicate: PopoverConfirmComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"col-md-6\">\n  <div class=\"form-group\">\n    <label translate>Current connection</label>\n    <p class=\"form-control-static\" *ngIf=\"!currentConnection\">\n      {{ 'Connection is not set. Select connection for this device' | translate }}\n    </p>\n    <p class=\"form-control-static text-truncate\" *ngIf=\"currentConnection\" title=\"{{ currentConnection.name }}\">\n      {{ currentConnection.name }}\n    </p>\n  </div>\n\n  <c8y-form-group>\n    <c8y-popover-confirm\n      outsideClick=\"true\"\n      containerClass=\"lns-connection-popover\"\n      [message]=\"reRegisterMsg\"\n      [buttons]=\"buttons\"\n      [placement]=\"'bottom'\"\n    ></c8y-popover-confirm>\n    <c8y-typeahead\n      *ngIf=\"!loading\"\n      [(ngModel)]=\"newConnection\"\n      placeholder=\"{{ 'Select new connection' | translate }}\"\n      name=\"newConnection\"\n      (onSearch)=\"setConnectionPipe($event)\"\n      [allowFreeEntries]=\"false\"\n    >\n      <c8y-li\n        *c8yFor=\"let connection of availableConnections; loadMore: 'hidden'; pipe: filterConnection\"\n        class=\"p-l-8 p-r-8 c8y-list__item--link\"\n        (click)=\"togglePopover(popoverConfirm)\"\n      >\n        <c8y-highlight [text]=\"connection.name\" [pattern]=\"pattern\"></c8y-highlight>\n      </c8y-li>\n    </c8y-typeahead>\n    <c8y-messages\n      ><c8y-message\n        name=\"notExisting\"\n        [text]=\"'Select one of the connections.' | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanAssignLnsConnectionsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'set-lns-connections', imports: [
                        C8yTranslateDirective,
                        NgIf,
                        FormGroupComponent,
                        PopoverConfirmComponent,
                        TypeaheadComponent,
                        FormsModule,
                        ForOfDirective,
                        ListItemComponent,
                        HighlightComponent,
                        MessagesComponent,
                        MessageDirective,
                        C8yTranslatePipe
                    ], template: "<div class=\"col-md-6\">\n  <div class=\"form-group\">\n    <label translate>Current connection</label>\n    <p class=\"form-control-static\" *ngIf=\"!currentConnection\">\n      {{ 'Connection is not set. Select connection for this device' | translate }}\n    </p>\n    <p class=\"form-control-static text-truncate\" *ngIf=\"currentConnection\" title=\"{{ currentConnection.name }}\">\n      {{ currentConnection.name }}\n    </p>\n  </div>\n\n  <c8y-form-group>\n    <c8y-popover-confirm\n      outsideClick=\"true\"\n      containerClass=\"lns-connection-popover\"\n      [message]=\"reRegisterMsg\"\n      [buttons]=\"buttons\"\n      [placement]=\"'bottom'\"\n    ></c8y-popover-confirm>\n    <c8y-typeahead\n      *ngIf=\"!loading\"\n      [(ngModel)]=\"newConnection\"\n      placeholder=\"{{ 'Select new connection' | translate }}\"\n      name=\"newConnection\"\n      (onSearch)=\"setConnectionPipe($event)\"\n      [allowFreeEntries]=\"false\"\n    >\n      <c8y-li\n        *c8yFor=\"let connection of availableConnections; loadMore: 'hidden'; pipe: filterConnection\"\n        class=\"p-l-8 p-r-8 c8y-list__item--link\"\n        (click)=\"togglePopover(popoverConfirm)\"\n      >\n        <c8y-highlight [text]=\"connection.name\" [pattern]=\"pattern\"></c8y-highlight>\n      </c8y-li>\n    </c8y-typeahead>\n    <c8y-messages\n      ><c8y-message\n        name=\"notExisting\"\n        [text]=\"'Select one of the connections.' | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n</div>\n" }]
        }], ctorParameters: () => [{ type: LpwanSetDeviceProtocolService }, { type: i2.AlertService }], propDecorators: { device: [{
                type: Input
            }], popoverConfirm: [{
                type: ViewChild,
                args: [PopoverConfirmComponent, { static: true }]
            }] } });

class LpwanAssignDeviceProtocolComponent {
    constructor(lpwanService, alertService, router, inventoryService) {
        this.lpwanService = lpwanService;
        this.alertService = alertService;
        this.router = router;
        this.inventoryService = inventoryService;
        this.filterProtocols = pipe();
        this.pattern = '';
    }
    async ngOnInit() {
        await this.reload();
        this.setPipe('');
    }
    setPipe(filterStr) {
        this.pattern = filterStr;
        this.filterProtocols = pipe(map(protocols => protocols.filter(protocol => (!this.currentProtocol || this.currentProtocol.id !== protocol.id) &&
            (!filterStr || protocol.name.toLowerCase().indexOf(filterStr.toLowerCase()) > -1))));
    }
    async reload() {
        this.loading = true;
        this.newProtocol = null;
        try {
            await this.loadDevice();
            this.availableProtocols = await this.lpwanService.getAvailableProtocols(this.device);
            this.currentProtocol = await this.lpwanService.getCurrentProtocol(this.device);
        }
        catch (ex) {
            this.alertService.addServerFailure(ex);
        }
        finally {
            this.loading = false;
        }
    }
    async loadDevice() {
        const deviceId = this.router.routerState.snapshot.url.match(/\d+/)[0];
        const { data } = await this.inventoryService.detail(deviceId);
        this.device = data;
    }
    async apply(selectedProtocol) {
        try {
            const moUpdated = (await this.lpwanService.applyProtocol(this.device, selectedProtocol)).res.status === 200;
            await this.reload();
            this.alertService.success(gettext('Device protocol set.'));
            this.lpwanSetDeviceProtocolForm.reset('dirty');
            if (moUpdated) {
                this.refreshCache();
            }
        }
        catch (ex) {
            this.alertService.danger(gettext('Could not set device protocol.'));
        }
    }
    async refreshCache() {
        try {
            await this.lpwanService.refreshCache(this.device);
        }
        catch (ex) {
            // do nothing (refreshing is an optional step)
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanAssignDeviceProtocolComponent, deps: [{ token: LpwanSetDeviceProtocolService }, { token: i2.AlertService }, { token: i3$1.Router }, { token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LpwanAssignDeviceProtocolComponent, isStandalone: true, selector: "set-device-protocol", viewQueries: [{ propertyName: "lpwanSetDeviceProtocolForm", first: true, predicate: ["lpwanSetDeviceProtocolForm"], descendants: true }], ngImport: i0, template: "<form #lpwanSetDeviceProtocolForm=\"ngForm\">\n  <div class=\"row\">\n    <div class=\"col-md-9\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ 'LPWAN configuration' | translate }}\n          </div>\n        </div>\n\n        <div class=\"card-block p-t-24 p-b-8 overflow-visible\">\n          <div *ngIf=\"loading\">\n            <c8y-loading></c8y-loading>\n          </div>\n\n          <div *ngIf=\"!loading\">\n            <div class=\"col-md-6\">\n              <div class=\"form-group\">\n                <label translate>Current device protocol</label>\n                <p class=\"form-control-static\" *ngIf=\"!currentProtocol\">\n                  {{ device.type }}\n                </p>\n                <p\n                  class=\"form-control-static text-truncate\"\n                  *ngIf=\"currentProtocol\"\n                  title=\"{{ currentProtocol.name }}\"\n                >\n                  {{ currentProtocol.name }}\n                </p>\n              </div>\n              <c8y-form-group>\n                <c8y-typeahead\n                  [(ngModel)]=\"newProtocol\"\n                  placeholder=\"{{ 'Select new device protocol' | translate }}\"\n                  (onSearch)=\"setPipe($event)\"\n                  name=\"newProtocol\"\n                  [allowFreeEntries]=\"false\"\n                >\n                  <c8y-li\n                    *c8yFor=\"\n                      let protocol of availableProtocols;\n                      loadMore: 'hidden';\n                      pipe: filterProtocols\n                    \"\n                    class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                    (click)=\"newProtocol = protocol; setPipe('')\"\n                  >\n                    <c8y-highlight [text]=\"protocol.name\" [pattern]=\"pattern\"></c8y-highlight>\n                  </c8y-li>\n                </c8y-typeahead>\n                <c8y-messages>\n                  <c8y-message\n                    name=\"notExisting\"\n                    [text]=\"'Select one of the protocols.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n            <set-lns-connections [device]=\"device\"></set-lns-connections>\n          </div>\n        </div>\n\n        <div class=\"card-footer separator\">\n          <button\n            title=\"{{ 'Save' | translate }}\"\n            type=\"submit\"\n            class=\"btn btn-primary\"\n            (click)=\"apply(newProtocol)\"\n            [disabled]=\"!newProtocol\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\u200C\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: LpwanAssignLnsConnectionsComponent, selector: "set-lns-connections", inputs: ["device"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanAssignDeviceProtocolComponent, decorators: [{
            type: Component,
            args: [{ selector: 'set-device-protocol', imports: [
                        FormsModule,
                        NgIf,
                        LoadingComponent,
                        C8yTranslateDirective,
                        FormGroupComponent,
                        TypeaheadComponent,
                        ForOfDirective,
                        ListItemComponent,
                        HighlightComponent,
                        MessagesComponent,
                        MessageDirective,
                        LpwanAssignLnsConnectionsComponent,
                        C8yTranslatePipe
                    ], template: "<form #lpwanSetDeviceProtocolForm=\"ngForm\">\n  <div class=\"row\">\n    <div class=\"col-md-9\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ 'LPWAN configuration' | translate }}\n          </div>\n        </div>\n\n        <div class=\"card-block p-t-24 p-b-8 overflow-visible\">\n          <div *ngIf=\"loading\">\n            <c8y-loading></c8y-loading>\n          </div>\n\n          <div *ngIf=\"!loading\">\n            <div class=\"col-md-6\">\n              <div class=\"form-group\">\n                <label translate>Current device protocol</label>\n                <p class=\"form-control-static\" *ngIf=\"!currentProtocol\">\n                  {{ device.type }}\n                </p>\n                <p\n                  class=\"form-control-static text-truncate\"\n                  *ngIf=\"currentProtocol\"\n                  title=\"{{ currentProtocol.name }}\"\n                >\n                  {{ currentProtocol.name }}\n                </p>\n              </div>\n              <c8y-form-group>\n                <c8y-typeahead\n                  [(ngModel)]=\"newProtocol\"\n                  placeholder=\"{{ 'Select new device protocol' | translate }}\"\n                  (onSearch)=\"setPipe($event)\"\n                  name=\"newProtocol\"\n                  [allowFreeEntries]=\"false\"\n                >\n                  <c8y-li\n                    *c8yFor=\"\n                      let protocol of availableProtocols;\n                      loadMore: 'hidden';\n                      pipe: filterProtocols\n                    \"\n                    class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                    (click)=\"newProtocol = protocol; setPipe('')\"\n                  >\n                    <c8y-highlight [text]=\"protocol.name\" [pattern]=\"pattern\"></c8y-highlight>\n                  </c8y-li>\n                </c8y-typeahead>\n                <c8y-messages>\n                  <c8y-message\n                    name=\"notExisting\"\n                    [text]=\"'Select one of the protocols.' | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n            <set-lns-connections [device]=\"device\"></set-lns-connections>\n          </div>\n        </div>\n\n        <div class=\"card-footer separator\">\n          <button\n            title=\"{{ 'Save' | translate }}\"\n            type=\"submit\"\n            class=\"btn btn-primary\"\n            (click)=\"apply(newProtocol)\"\n            [disabled]=\"!newProtocol\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\u200C\n" }]
        }], ctorParameters: () => [{ type: LpwanSetDeviceProtocolService }, { type: i2.AlertService }, { type: i3$1.Router }, { type: i1.InventoryService }], propDecorators: { lpwanSetDeviceProtocolForm: [{
                type: ViewChild,
                args: ['lpwanSetDeviceProtocolForm', { static: false }]
            }] } });

class LpwanAgentGuard {
    constructor(lpwanService) {
        this.lpwanService = lpwanService;
    }
    canActivate(route) {
        const device = route.data.contextData || route.parent.data.contextData;
        return this.lpwanService.isSupportedDevice(device);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanAgentGuard, deps: [{ token: LpwanSetDeviceProtocolService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanAgentGuard }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanAgentGuard, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: LpwanSetDeviceProtocolService }] });

const lpwanRoutes = [
    {
        context: ViewContext.Device,
        path: 'assign-protocol',
        component: LpwanAssignDeviceProtocolComponent,
        label: gettext('LPWAN'),
        icon: 'c8y-device-protocols',
        canActivate: [LpwanAgentGuard]
    }
];
class LpwanProtocolModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanProtocolModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: LpwanProtocolModule, imports: [CoreModule,
            FormsModule$1,
            LpwanAssignDeviceProtocolComponent,
            LpwanAssignLnsConnectionsComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanProtocolModule, providers: [LpwanAgentGuard, LpwanSetDeviceProtocolService, hookRoute(lpwanRoutes)], imports: [CoreModule,
            FormsModule$1,
            LpwanAssignDeviceProtocolComponent,
            LpwanAssignLnsConnectionsComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LpwanProtocolModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CoreModule,
                        FormsModule$1,
                        LpwanAssignDeviceProtocolComponent,
                        LpwanAssignLnsConnectionsComponent
                    ],
                    providers: [LpwanAgentGuard, LpwanSetDeviceProtocolService, hookRoute(lpwanRoutes)]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { LpwanAssignDeviceProtocolComponent, LpwanProtocolModule, MultipleLnsConnectorsModule };
//# sourceMappingURL=c8y-ngx-components-protocol-lpwan.mjs.map