import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { CurrentDeviceService } from '../../current-device.service';
import { getFormFieldOrError } from '../../utility';
import * as i0 from "@angular/core";
import * as i1 from "../../current-device.service";
import * as i2 from "@angular/forms";
import * as i3 from "@ionic/angular";
import * as i4 from "@angular/common";
import * as i5 from "../../lib-common/remember-value-control";
export class TapConnectMqttComponent {
    constructor(currentDevice, formBuilder) {
        this.currentDevice = currentDevice;
        this.formBuilder = formBuilder;
        this.onProtocolSelected = new EventEmitter();
        this.onError = new EventEmitter();
        this.defaults = {
            endpoint: 'wss://user.cloud.iotize.com:9883',
            netKey: 'testnetkey',
            password: '',
            serialNumber: 'IoTize00410000000D',
            username: 'IoTize00410000000D',
            // responseTopic: undefined,
            // requestTopic: undefined
        };
        this.validation_messages = {
            username: [],
            serialNumber: [
                { type: 'required', message: 'Username is required.' },
                {
                    type: 'minlength',
                    message: 'Username must be at least 5 characters long.',
                },
                {
                    type: 'maxlength',
                    message: 'Username cannot be more than 25 characters long.',
                },
            ],
            netKey: [{ type: 'required', message: 'Net key is required.' }],
        };
        this.loading = false;
        this.rememberGroupName = 'MqttForm';
        this.form = this.formBuilder.group({
            endpoint: [this.defaults.endpoint, Validators.required],
            serialNumber: [this.defaults.serialNumber],
            password: [this.defaults.password],
            netKey: [this.defaults.netKey],
            username: [this.defaults.username],
            // requestTopic: [this.defaults.requestTopic],
            // responseTopic: [this.defaults.responseTopic]
        });
    }
    get password() {
        return getFormFieldOrError(this.form, 'password');
    }
    get username() {
        return getFormFieldOrError(this.form, 'username');
    }
    get serialNumber() {
        return getFormFieldOrError(this.form, 'serialNumber');
    }
    get netKey() {
        return getFormFieldOrError(this.form, 'netKey');
    }
    get endpoint() {
        return getFormFieldOrError(this.form, 'endpoint');
    }
    onSubmit() {
        const meta = {
            type: 'mqtt',
            info: {
                endpoint: this.endpoint.value,
                username: this.username.value,
                serialNumber: this.serialNumber.value,
                password: this.password.value,
                clientId: this.serialNumber.value,
            },
        };
        this.onProtocolSelected.emit({
            meta,
        });
    }
    _onError(err) {
        this.onError.emit(err);
    }
}
/** @nocollapse */ /** @nocollapse */ TapConnectMqttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TapConnectMqttComponent, deps: [{ token: i1.CurrentDeviceService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ TapConnectMqttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TapConnectMqttComponent, selector: "tap-connect-mqtt", inputs: { defaults: "defaults" }, outputs: { onProtocolSelected: "onProtocolSelected", onError: "onError" }, ngImport: i0, template: "<form\n  *ngIf=\"form\"\n  (ngSubmit)=\"onSubmit()\"\n  [formGroup]=\"form\"\n  (keydown.enter)=\"onSubmit()\"\n>\n  <ion-progress-bar *ngIf=\"loading\" type=\"indeterminate\"></ion-progress-bar>\n  <ion-grid>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Url\n          <p>MQTT broker url</p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              slot=\"start\"\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"endpoint\"\n              [formControlName]=\"'endpoint'\"\n              placeholder=\"Broker url\"\n              required\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"text\"\n            ></ion-input>\n          </div>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Serial number\n          <p>Tap serial number you want to connect to.</p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"serialNumber\"\n              [formControlName]=\"'serialNumber'\"\n              placeholder=\"Device serial number\"\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"text\"\n            ></ion-input>\n          </div>\n        </ion-item>\n        <ion-item\n          *ngIf=\"\n            serialNumber.invalid && (serialNumber.dirty || serialNumber.touched)\n          \"\n          class=\"validation-errors\"\n        >\n          <ion-text *ngFor=\"let validation of validation_messages.serialNumber\">\n            <div\n              *ngIf=\"\n                serialNumber.hasError(validation.type) &&\n                (serialNumber.dirty || serialNumber.touched)\n              \"\n              class=\"error-message\"\n            >\n              {{ validation.message }}\n            </div>\n          </ion-text>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Username\n          <p>\n            Leave blank if the broker does not require username/password\n            authentication\n          </p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"username\"\n              [formControlName]=\"'username'\"\n              placeholder=\"MQTT broker username...\"\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"text\"\n            ></ion-input>\n          </div>\n        </ion-item>\n        <ion-item\n          *ngIf=\"username.invalid && (username.dirty || username.touched)\"\n          class=\"validation-errors\"\n        >\n          <ion-text *ngFor=\"let validation of validation_messages.username\">\n            <div\n              *ngIf=\"\n                username.hasError(validation.type) &&\n                (username.dirty || username.touched)\n              \"\n              class=\"error-message\"\n            >\n              {{ validation.message }}\n            </div>\n          </ion-text>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Password\n          <p>\n            Leave blank if the broker does not require username/password\n            authentication\n          </p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [formControlName]=\"'password'\"\n              name=\"password\"\n              placeholder=\"MQTT broker password...\"\n              slot=\"end\"\n              type=\"password\"\n            ></ion-input>\n          </div>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Security key\n          <p>\n            The key used to create a unique topic identifer. Must be the same\n            key configured on your device.\n          </p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"netKey\"\n              [formControlName]=\"'netKey'\"\n              placeholder=\"Net key\"\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"string\"\n            ></ion-input>\n          </div>\n        </ion-item>\n        <ion-item\n          *ngIf=\"netKey.invalid && (netKey.dirty || netKey.touched)\"\n          class=\"validation-errors\"\n        >\n          <ion-text *ngFor=\"let validation of validation_messages.netKey\">\n            <div\n              *ngIf=\"\n                netKey.hasError(validation.type) &&\n                (netKey.dirty || netKey.touched)\n              \"\n              class=\"error-message\"\n            >\n              {{ validation.message }}\n            </div>\n          </ion-text>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <!-- <ion-row>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\">\n\t\t\t\t<ion-label>\n\t\t\t\t\tRequest topic\n\t\t\t\t\t<p>\n\t\t\t\t\t\tTopic used for requests\n\t\t\t\t\t</p>\n\t\t\t\t</ion-label>\n\t\t\t</ion-col>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n\t\t\t\t<ion-item>\n\t\t\t\t\t<div class=\"col-input-container\">\n\t\t\t\t\t\t<ion-input [rememberValueControl]=\"rememberGroupName\" [formControlName]=\"'requestTopic'\" placeholder=\"Request topic\" slot=\"end\" autocapitalize=\"none\" spellcheck=\"false\" autocorrect=\"off\" type=\"string\"></ion-input>\n\t\t\t\t\t</div>\n\t\t\t\t</ion-item>\n\t\t\t</ion-col>\n\t\t</ion-row>\n\t\t<ion-row>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\">\n\t\t\t\t<ion-label>\n\t\t\t\t\tResponse topic\n\t\t\t\t\t<p>\n\t\t\t\t\t\tTopic used for response\n\t\t\t\t\t</p>\n\t\t\t\t</ion-label>\n\t\t\t</ion-col>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n\t\t\t\t<ion-item>\n\t\t\t\t\t<div class=\"col-input-container\">\n\t\t\t\t\t\t<ion-input [rememberValueControl]=\"rememberGroupName\" [formControlName]=\"'responseTopic'\" placeholder=\"Response topic\" slot=\"end\" autocapitalize=\"none\" spellcheck=\"false\" autocorrect=\"off\" type=\"string\"></ion-input>\n\t\t\t\t\t</div>\n\t\t\t\t</ion-item>\n\t\t\t</ion-col>\n\t\t</ion-row> -->\n  </ion-grid>\n  <div class=\"ion-padding\">\n    <ion-button\n      [disabled]=\"form['invalid']\"\n      expand=\"block\"\n      size=\"large\"\n      type=\"submit\"\n    >\n      <ion-icon name=\"log-in-outline\"></ion-icon> &nbsp; Connect\n    </ion-button>\n  </div>\n</form>\n", styles: [".col-input{padding-left:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px))}.col-input .col-input-container{width:100%}.col-input ion-input{--padding-start: 0px}.col-input ion-item{--padding-start: 0px}\n"], components: [{ type: i3.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i3.IonRow, selector: "ion-row" }, { type: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i3.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.RememberValueControlDirective, selector: "[rememberValueControl]", inputs: ["formControlName", "rememberValueControl"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TapConnectMqttComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tap-connect-mqtt', template: "<form\n  *ngIf=\"form\"\n  (ngSubmit)=\"onSubmit()\"\n  [formGroup]=\"form\"\n  (keydown.enter)=\"onSubmit()\"\n>\n  <ion-progress-bar *ngIf=\"loading\" type=\"indeterminate\"></ion-progress-bar>\n  <ion-grid>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Url\n          <p>MQTT broker url</p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              slot=\"start\"\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"endpoint\"\n              [formControlName]=\"'endpoint'\"\n              placeholder=\"Broker url\"\n              required\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"text\"\n            ></ion-input>\n          </div>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Serial number\n          <p>Tap serial number you want to connect to.</p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"serialNumber\"\n              [formControlName]=\"'serialNumber'\"\n              placeholder=\"Device serial number\"\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"text\"\n            ></ion-input>\n          </div>\n        </ion-item>\n        <ion-item\n          *ngIf=\"\n            serialNumber.invalid && (serialNumber.dirty || serialNumber.touched)\n          \"\n          class=\"validation-errors\"\n        >\n          <ion-text *ngFor=\"let validation of validation_messages.serialNumber\">\n            <div\n              *ngIf=\"\n                serialNumber.hasError(validation.type) &&\n                (serialNumber.dirty || serialNumber.touched)\n              \"\n              class=\"error-message\"\n            >\n              {{ validation.message }}\n            </div>\n          </ion-text>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Username\n          <p>\n            Leave blank if the broker does not require username/password\n            authentication\n          </p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"username\"\n              [formControlName]=\"'username'\"\n              placeholder=\"MQTT broker username...\"\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"text\"\n            ></ion-input>\n          </div>\n        </ion-item>\n        <ion-item\n          *ngIf=\"username.invalid && (username.dirty || username.touched)\"\n          class=\"validation-errors\"\n        >\n          <ion-text *ngFor=\"let validation of validation_messages.username\">\n            <div\n              *ngIf=\"\n                username.hasError(validation.type) &&\n                (username.dirty || username.touched)\n              \"\n              class=\"error-message\"\n            >\n              {{ validation.message }}\n            </div>\n          </ion-text>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Password\n          <p>\n            Leave blank if the broker does not require username/password\n            authentication\n          </p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [formControlName]=\"'password'\"\n              name=\"password\"\n              placeholder=\"MQTT broker password...\"\n              slot=\"end\"\n              type=\"password\"\n            ></ion-input>\n          </div>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col size-xs=\"12\" size-sm=\"6\">\n        <ion-label>\n          Security key\n          <p>\n            The key used to create a unique topic identifer. Must be the same\n            key configured on your device.\n          </p>\n        </ion-label>\n      </ion-col>\n      <ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n        <ion-item>\n          <div class=\"col-input-container\">\n            <ion-input\n              [rememberValueControl]=\"rememberGroupName\"\n              name=\"netKey\"\n              [formControlName]=\"'netKey'\"\n              placeholder=\"Net key\"\n              slot=\"end\"\n              autocapitalize=\"none\"\n              spellcheck=\"false\"\n              autocorrect=\"off\"\n              type=\"string\"\n            ></ion-input>\n          </div>\n        </ion-item>\n        <ion-item\n          *ngIf=\"netKey.invalid && (netKey.dirty || netKey.touched)\"\n          class=\"validation-errors\"\n        >\n          <ion-text *ngFor=\"let validation of validation_messages.netKey\">\n            <div\n              *ngIf=\"\n                netKey.hasError(validation.type) &&\n                (netKey.dirty || netKey.touched)\n              \"\n              class=\"error-message\"\n            >\n              {{ validation.message }}\n            </div>\n          </ion-text>\n        </ion-item>\n      </ion-col>\n    </ion-row>\n    <!-- <ion-row>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\">\n\t\t\t\t<ion-label>\n\t\t\t\t\tRequest topic\n\t\t\t\t\t<p>\n\t\t\t\t\t\tTopic used for requests\n\t\t\t\t\t</p>\n\t\t\t\t</ion-label>\n\t\t\t</ion-col>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n\t\t\t\t<ion-item>\n\t\t\t\t\t<div class=\"col-input-container\">\n\t\t\t\t\t\t<ion-input [rememberValueControl]=\"rememberGroupName\" [formControlName]=\"'requestTopic'\" placeholder=\"Request topic\" slot=\"end\" autocapitalize=\"none\" spellcheck=\"false\" autocorrect=\"off\" type=\"string\"></ion-input>\n\t\t\t\t\t</div>\n\t\t\t\t</ion-item>\n\t\t\t</ion-col>\n\t\t</ion-row>\n\t\t<ion-row>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\">\n\t\t\t\t<ion-label>\n\t\t\t\t\tResponse topic\n\t\t\t\t\t<p>\n\t\t\t\t\t\tTopic used for response\n\t\t\t\t\t</p>\n\t\t\t\t</ion-label>\n\t\t\t</ion-col>\n\t\t\t<ion-col size-xs=\"12\" size-sm=\"6\" class=\"col-input\">\n\t\t\t\t<ion-item>\n\t\t\t\t\t<div class=\"col-input-container\">\n\t\t\t\t\t\t<ion-input [rememberValueControl]=\"rememberGroupName\" [formControlName]=\"'responseTopic'\" placeholder=\"Response topic\" slot=\"end\" autocapitalize=\"none\" spellcheck=\"false\" autocorrect=\"off\" type=\"string\"></ion-input>\n\t\t\t\t\t</div>\n\t\t\t\t</ion-item>\n\t\t\t</ion-col>\n\t\t</ion-row> -->\n  </ion-grid>\n  <div class=\"ion-padding\">\n    <ion-button\n      [disabled]=\"form['invalid']\"\n      expand=\"block\"\n      size=\"large\"\n      type=\"submit\"\n    >\n      <ion-icon name=\"log-in-outline\"></ion-icon> &nbsp; Connect\n    </ion-button>\n  </div>\n</form>\n", styles: [".col-input{padding-left:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px))}.col-input .col-input-container{width:100%}.col-input ion-input{--padding-start: 0px}.col-input ion-item{--padding-start: 0px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.CurrentDeviceService }, { type: i2.FormBuilder }]; }, propDecorators: { onProtocolSelected: [{
                type: Output
            }], onError: [{
                type: Output
            }], defaults: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 