@sumaris-net/ngx-components 2.0.0-rc31 → 2.0.0-rc32

package/fesm2015/sumaris-net.ngx-components.mjs

@@ -66,10 +66,11 @@ import { Capacitor } from '@capacitor/core';
 import { Keyboard } from '@capacitor/keyboard';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as momentNamespace from 'moment';
+import * as momentImported from 'moment';
 import { isMoment, locale } from 'moment';
 import * as i1 from '@angular/material-moment-adapter';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import 'moment-timezone';
 import * as i11$1 from 'angular2-text-mask';
 import { TextMaskModule } from 'angular2-text-mask';
 import * as i10$1 from '@angular/material/datepicker';
@@ -91,7 +92,7 @@ import { Haptics } from '@capacitor/haptics';
 import { NativeAudio } from '@capacitor-community/native-audio';
 import * as i1$4 from '@angular/platform-browser';
 import { HammerGestureConfig, HammerModule } from '@angular/platform-browser';
-import * as uuidv4Imported from 'uuid/v4';
+import { v4 } from 'uuid';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6$4 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
@@ -107,6 +108,8 @@ import { Browser } from '@capacitor/browser';
 import * as i2$7 from '@angular/cdk/platform';
 import * as i3 from '@ionic/storage-angular';
 import { IonicStorageModule } from '@ionic/storage-angular';
+import * as i4 from '@angular/cdk/text-field';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import * as i7$2 from '@awesome-cordova-plugins/network/ngx';
 import { Connection } from '@awesome-cordova-plugins/network/ngx';
 import { scryptEncode } from '@polkadot/util-crypto/scrypt/encode';
@@ -137,9 +140,6 @@ import { isDataSource, SelectionModel } from '@angular/cdk/collections';
 import { Camera, CameraResultType } from '@capacitor/camera';
 import * as i3$2 from '@e-is/ngx-material-table';
 import { ValidatorService, TableDataSource } from '@e-is/ngx-material-table';
-import * as i4 from '@angular/cdk/text-field';
-import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import 'moment-timezone';
 
 const ENVIRONMENT = new InjectionToken('ENV');
 class Environment {
@@ -2543,27 +2543,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }] } });
 
+function isESModule(value) {
+    return value && value['__esModule'] === true;
+}
+function unwrapESModule(value) {
+    return isESModule(value) ? value.default : value;
+}
+function requireCommonJS(moduleName) {
+    const module = require(moduleName);
+    return unwrapESModule(module);
+}
+
 const DATE_UNIX_TIMESTAMP = 'X';
 const DATE_UNIX_MS_TIMESTAMP = 'x';
 const MOMENT_NO_TIME_PROPERTY = '_hasNoTime';
+const moment$1 = unwrapESModule(momentImported);
 class DateUtils {
-    static isEsModule(value) {
-        return value && value['__esModule'] === true;
-    }
-    static set moment(value) {
-        this.__moment = value;
-    }
-    static get moment() {
-        // Resolve moment, if was wrapped into a ES module
-        if (!this.__moment) {
-            console.log('Resolving moment...');
-            this.__moment = momentNamespace;
-            if (this.isEsModule(this.__moment)) {
-                this.__moment = this.__moment.default;
-            }
-        }
-        return this.__moment;
-    }
     static min(date1, date2) {
         return date1 && (!date2 || date1.isSameOrBefore(date2)) ? date1 : date2;
     }
@@ -2622,6 +2617,7 @@ class DateUtils {
         return momentDate.day() === weekday;
     }
 }
+DateUtils.moment = moment$1;
 DateUtils.toDateISOString = toDateISOString;
 DateUtils.fromDateISOString = fromDateISOString;
 DateUtils.toDuration = toDuration;
@@ -2689,7 +2685,6 @@ function toDuration(value, unit) {
     }
     return duration;
 }
-const moment$1 = DateUtils.moment;
 
 class DateDiffDurationPipe {
     constructor(dateAdapter, translate) {
@@ -10540,7 +10535,6 @@ class ImagesUtils {
     }
 }
 
-const uuidv4$1 = uuidv4Imported;
 class FileService {
     constructor(platform, 
     //private transfer: FileTransfer,
@@ -10577,7 +10571,7 @@ class FileService {
             const lastSlashIndex = fileUrl.lastIndexOf('/');
             if (lastSlashIndex === -1)
                 throw new Error('Invalid URL: ' + fileUrl);
-            const fileName = lastSlashIndex < (fileUrl.length - 1) && fileUrl.substring(lastSlashIndex + 1) || uuidv4$1();
+            const fileName = lastSlashIndex < (fileUrl.length - 1) && fileUrl.substring(lastSlashIndex + 1) || v4();
             // Download into the file system
             if (outputType === 'fileUrl' && this.canUseFileSystem) {
                 console.warn(`WARN: [file] Downloading image {${fileUrl}} in local filesystem...`);
@@ -13653,398 +13647,973 @@ function getNodeInfo(http, peer, opts) {
     });
 }
 
-class SelectPeerModal {
-    constructor(modalCtrl, cd, http, environment) {
-        this.modalCtrl = modalCtrl;
-        this.cd = cd;
-        this.http = http;
-        this.environment = environment;
-        this._subscription = new Subscription();
-        this.loading = true;
-        this.$peers = new Subject();
-        this.peerMinVersion = this.environment.peerMinVersion;
-        this.canCancel = true;
-        this.allowSelectDownPeer = true;
-        this.onRefresh = new EventEmitter();
-    }
-    set peers(peers) {
-        this._subscription.add(peers.subscribe(res => this.refreshPeers(res)));
-    }
-    cancel() {
-        this.modalCtrl.dismiss();
+class MatAutocompleteConfigHolder {
+    constructor(options) {
+        this.options = options;
+        this.fields = {};
+        // Store the function from options (e.g. get from user settings)
+        // or create a default function
+        this.getUserAttributes = (options === null || options === void 0 ? void 0 : options.getUserAttributes) ||
+            ((fieldName, defaultAttributes) => defaultAttributes || ['label', 'name']);
     }
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
+    add(fieldName, options) {
+        if (!fieldName) {
+            throw new Error('Unable to add config, with name: ' + (fieldName || 'undefined'));
+        }
+        options = options || {};
+        const suggestFn = options.suggestFn
+            || (options.service && ((v, f) => options.service.suggest(v, f)))
+            || undefined;
+        const attributes = (this.getUserAttributes(fieldName, options.attributes) || ['label', 'name']);
+        // Keep original the function from options, when exists
+        const attributesOrFn = attributes.map((a, index) => typeof a === 'function' && options.attributes[index] || a);
+        const filter = Object.assign({ searchAttribute: attributes.length === 1 ? attributes[0] : undefined, searchAttributes: attributes.length > 1 ? attributes : undefined }, options.filter);
+        const displayWith = options.displayWith || MatAutocompleteFieldUtils.createDisplayFn(attributes, options.multiple);
+        const equals = options.equals || MatAutocompleteFieldUtils.defaultEquals;
+        const config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn,
+            filter,
+            displayWith,
+            equals });
+        this.fields[fieldName] = config;
+        return config;
     }
-    selectPeer(peer) {
-        if (this.allowSelectDownPeer || (peer.reachable && this.isCompatible(peer))) {
-            console.debug(`[select-peer-modal] Selected peer: {url: '${peer.url}'}`);
-            this.modalCtrl.dismiss(peer);
+    get(fieldName) {
+        if (!fieldName) {
+            throw new Error('Unable to add config, with name: ' + (fieldName || 'undefined'));
         }
+        return this.fields[fieldName] || this.add(fieldName);
+    }
+}
+
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class AppForm {
+    constructor(injector, form) {
+        this._subscription = new Subscription();
+        this._enable = false;
+        this.i18nFieldPrefix = null;
+        this.destroySubject = new Subject();
+        this.readySubject = new BehaviorSubject(false);
+        this.loadingSubject = new BehaviorSubject(true);
+        this.errorSubject = new BehaviorSubject(undefined);
+        this.debug = false;
+        this.onCancel = new EventEmitter();
+        this.onSubmit = new EventEmitter();
+        if (form)
+            this.setForm(form);
+        this.translate = injector.get(TranslateService);
+        this.settings = injector.get(LocalSettingsService);
+        this.errorTranslator = injector.get(FormErrorTranslator);
+        this.autocompleteHelper = new MatAutocompleteConfigHolder(this.settings && {
+            getUserAttributes: (a, b) => this.settings.getFieldDisplayAttributes(a, b)
+        });
+        this.autocompleteFields = this.autocompleteHelper.fields;
     }
     /**
-     *  Check the min pod version, defined by the app
-     *
-     * @param peer
+     *  @deprecated
      */
-    isCompatible(peer) {
-        return !this.peerMinVersion || (peer && peer.softwareVersion && VersionUtils.isCompatible(this.peerMinVersion, peer.softwareVersion));
-    }
-    refresh(event) {
-        this.loading = true;
-        this.onRefresh.emit(event);
+    set _loading(value) {
+        this.loadingSubject.next(value);
     }
-    /* -- protected methods -- */
-    refreshPeers(peers) {
-        return __awaiter(this, void 0, void 0, function* () {
-            peers = peers || [];
-            const data = [];
-            const jobs = Promise.all(peers.map((peer) => __awaiter(this, void 0, void 0, function* () {
-                yield this.refreshPeer(peer);
-                if (this._subscription.closed)
-                    return; // component destroyed
-                data.push(peer);
-                // Sort (by reachable, then host)
-                data.sort((a, b) => {
-                    if (a.reachable && !b.reachable)
-                        return -1;
-                    if (!a.reachable && b.reachable)
-                        return 1;
-                    if (a.hostAndPort < b.hostAndPort)
-                        return -1;
-                    if (a.hostAndPort > b.hostAndPort)
-                        return 1;
-                    return 0;
-                });
-                this.$peers.next(data);
-                return peer;
-            })));
-            this._subscription.add(this.$peers
-                .subscribe(() => this.cd.markForCheck()));
-            try {
-                yield jobs;
-            }
-            catch (err) {
-                if (!this._subscription.closed)
-                    console.error(err);
-            }
-            this.loading = false;
-            this.cd.markForCheck();
-        });
+    /**
+     *  @deprecated
+     */
+    get _loading() {
+        return this.loadingSubject.value;
     }
-    refreshPeer(peer) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const summary = yield NetworkUtils.getNodeInfo(this.http, peer.url);
-                peer.status = 'UP';
-                peer.softwareName = summary.softwareName;
-                peer.softwareVersion = summary.softwareVersion;
-                peer.label = summary.nodeLabel;
-                peer.name = summary.nodeName;
-            }
-            catch (err) {
-                if (!this._subscription.closed) {
-                    if (err && err.message) {
-                        console.error('[select-peer] ' + err.message, err);
-                    }
-                }
-                peer.status = 'DOWN';
-            }
-            return peer;
-        });
+    /**
+     *  @deprecated
+     */
+    get _$ready() {
+        return this.readySubject;
     }
-    markForCheck() {
-        this.cd.markForCheck();
+    /**
+     *  @deprecated
+     */
+    get _$loading() {
+        return this.loadingSubject;
     }
-}
-SelectPeerModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SelectPeerModal, deps: [{ token: i2.ModalController }, { token: i0.ChangeDetectorRef }, { token: i2$5.HttpClient }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-SelectPeerModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SelectPeerModal, selector: "select-peer-modal", inputs: { canCancel: "canCancel", allowSelectDownPeer: "allowSelectDownPeer", onRefresh: "onRefresh" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"cancel()\" *ngIf=\"canCancel\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{'NETWORK.PEER.SELECT_MODAL.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      <ion-spinner *ngIf=\"loading; else endButtons\"></ion-spinner>\n\n      <ng-template #endButtons>\n        <!-- refresh button -->\n        <ion-button *ngIf=\"onRefresh.observers | isNotEmptyArray\"\n                    [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                    (click)=\"refresh($event)\">\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      </ng-template>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-list-header>\n      <ion-label class=\"ion-text-wrap\">\n        <p translate>NETWORK.PEER.SELECT_MODAL.HELP</p>\n      </ion-label>\n    </ion-list-header>\n\n    <ion-item *ngFor=\"let peer of $peers | async\"\n              tappable\n              (click)=\"selectPeer(peer)\"\n              detail\n              @fadeInAnimation>\n\n      <!-- icon -->\n      <ion-avatar slot=\"start\" *ngIf=\"peer.reachable\" >\n        <ion-img [src]=\"peer.favicon || (peer.url + '/api/favicon')\"></ion-img>\n      </ion-avatar>\n      <ion-icon slot=\"start\"  *ngIf=\"!peer.reachable\" name=\"desktop\" color=\"medium\" class=\"ion-text-center\"></ion-icon>\n\n      <!-- Peer is UP -->\n      <ion-grid *ngIf=\"peer.reachable\">\n        <ion-row class=\"ion-no-padding\">\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap\">\n              <ion-text color=\"dark\">\n                <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n              </ion-text>\n              <ion-text color=\"primary\">\n                <h4>{{peer.label}}</h4>\n              </ion-text>\n            </ion-label>\n          </ion-col>\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap ion-text-center\" color=\"medium\">\n              <h3>{{peer.softwareName}}</h3>\n              <h4 *ngIf=\"!peerMinVersion || isCompatible(peer); else invalidVersion\">\n                <small>v{{peer.softwareVersion}}</small>\n              </h4>\n              <ng-template #invalidVersion>\n                <ion-text color=\"danger\" [matTooltip]=\"'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP'|translate: {version: peerMinVersion} \">\n                  <h4 class=\"ion-color-danger\">\n                    <small><mat-icon>warning</mat-icon>v{{peer.softwareVersion}}</small>\n                  </h4>\n                </ion-text>\n              </ng-template>\n            </ion-label>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n\n      <!-- Peer is DOWN -->\n      <ion-label class=\"ion-text-wrap\" *ngIf=\"!peer.reachable\">\n        <ion-text color=\"medium\">\n          <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n        </ion-text>\n        <ion-text color=\"danger\">\n          <h4>\n            <small><ion-icon size=\"small\" name=\"close-circle\"></ion-icon></small>\n            <span translate>NETWORK.PEER.OFFLINE</span>\n          </h4>\n        </ion-text>\n      </ion-label>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n\n<ion-footer *ngIf=\"canCancel\" hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SelectPeerModal, decorators: [{
-            type: Component,
-            args: [{ selector: 'select-peer-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation], template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"cancel()\" *ngIf=\"canCancel\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{'NETWORK.PEER.SELECT_MODAL.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      <ion-spinner *ngIf=\"loading; else endButtons\"></ion-spinner>\n\n      <ng-template #endButtons>\n        <!-- refresh button -->\n        <ion-button *ngIf=\"onRefresh.observers | isNotEmptyArray\"\n                    [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                    (click)=\"refresh($event)\">\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      </ng-template>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-list-header>\n      <ion-label class=\"ion-text-wrap\">\n        <p translate>NETWORK.PEER.SELECT_MODAL.HELP</p>\n      </ion-label>\n    </ion-list-header>\n\n    <ion-item *ngFor=\"let peer of $peers | async\"\n              tappable\n              (click)=\"selectPeer(peer)\"\n              detail\n              @fadeInAnimation>\n\n      <!-- icon -->\n      <ion-avatar slot=\"start\" *ngIf=\"peer.reachable\" >\n        <ion-img [src]=\"peer.favicon || (peer.url + '/api/favicon')\"></ion-img>\n      </ion-avatar>\n      <ion-icon slot=\"start\"  *ngIf=\"!peer.reachable\" name=\"desktop\" color=\"medium\" class=\"ion-text-center\"></ion-icon>\n\n      <!-- Peer is UP -->\n      <ion-grid *ngIf=\"peer.reachable\">\n        <ion-row class=\"ion-no-padding\">\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap\">\n              <ion-text color=\"dark\">\n                <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n              </ion-text>\n              <ion-text color=\"primary\">\n                <h4>{{peer.label}}</h4>\n              </ion-text>\n            </ion-label>\n          </ion-col>\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap ion-text-center\" color=\"medium\">\n              <h3>{{peer.softwareName}}</h3>\n              <h4 *ngIf=\"!peerMinVersion || isCompatible(peer); else invalidVersion\">\n                <small>v{{peer.softwareVersion}}</small>\n              </h4>\n              <ng-template #invalidVersion>\n                <ion-text color=\"danger\" [matTooltip]=\"'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP'|translate: {version: peerMinVersion} \">\n                  <h4 class=\"ion-color-danger\">\n                    <small><mat-icon>warning</mat-icon>v{{peer.softwareVersion}}</small>\n                  </h4>\n                </ion-text>\n              </ng-template>\n            </ion-label>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n\n      <!-- Peer is DOWN -->\n      <ion-label class=\"ion-text-wrap\" *ngIf=\"!peer.reachable\">\n        <ion-text color=\"medium\">\n          <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n        </ion-text>\n        <ion-text color=\"danger\">\n          <h4>\n            <small><ion-icon size=\"small\" name=\"close-circle\"></ion-icon></small>\n            <span translate>NETWORK.PEER.OFFLINE</span>\n          </h4>\n        </ion-text>\n      </ion-label>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n\n<ion-footer *ngIf=\"canCancel\" hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i2.ModalController }, { type: i0.ChangeDetectorRef }, { type: i2$5.HttpClient }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [ENVIRONMENT]
-                    }] }];
-    }, propDecorators: { canCancel: [{
-                type: Input
-            }], allowSelectDownPeer: [{
-                type: Input
-            }], onRefresh: [{
-                type: Input
-            }] } });
-
-/**
- * Same as StartableService, bu with a dataSubject instead of a simple 'data' property
- */
-let StartableObservableService = class StartableObservableService {
-    constructor(prerequisiteService) {
-        this.dataSubject = new BehaviorSubject(null);
-        this.startSubject = new Subject();
-        this.stopSubject = new Subject();
-        this._debug = false;
-        this._startByReadyFunction = true; // should start when calling ready() ?
-        this._started = false;
-        this._startPromise = null;
-        this._startPrerequisite = null;
-        this._subscription = null;
-        this._startPrerequisite = prerequisiteService
-            ? () => prerequisiteService.ready()
-            : () => Promise.resolve();
+    get error() {
+        return this.errorSubject.value;
     }
-    start(opts) {
-        if (this._startPromise)
-            return this._startPromise;
-        if (this._started)
-            return Promise.resolve(this.dataSubject.value);
-        this._startPromise = this._startPrerequisite()
-            .then(() => this.ngOnStart(opts))
-            .then(data => {
-            this._started = true;
-            this._startPromise = undefined;
-            // Should be done AFTER 'this._started = true', because of the 'filter' operator, inside ready() function
-            this.dataSubject.next(data);
-            this.startSubject.next(data);
-            return data;
-        })
-            .catch(err => {
-            if (!this.stopped) {
-                console.error('Failed to start a service: ' + (err && err.message || err), err);
-                this._started = false;
-                this._startPromise = null;
-            }
-            return null;
-        });
-        return this._startPromise;
+    set error(error) {
+        this.setError(error);
     }
-    ready() {
-        if (this._started)
-            return Promise.resolve(this.dataSubject.value);
-        if (this._startPromise)
-            return this._startPromise;
-        if (this._startByReadyFunction)
-            return this.start();
-        return this.dataSubject
-            .pipe(takeUntil(this.stopSubject), 
-        // Wait start() to be called, to exclude the initial 'null' value
-        filter(_ => this._started))
-            .toPromise();
+    get loading() {
+        return this.loadingSubject.value;
     }
-    stop() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.unsubscribe();
-                yield this.ngOnStop();
-            }
-            catch (err) {
-                console.error('Failed to stop a service: ' + (err && err.message || err), err);
-            }
-            finally {
-                this._started = false;
-                this._startPromise = undefined;
-                this.stopSubject.next(); // Stop all running observables
-                this.dataSubject.next(null); // Reset data
-            }
-        });
+    get loaded() {
+        return !this.loadingSubject.value;
     }
-    restart(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._startPromise)
-                yield this._startPromise; // Wait end of previous loading
-            if (this._started)
-                yield this.stop(); // Then stop if started
-            return this.start(opts); // Then start again
-        });
+    get value() {
+        return this.form.value;
     }
-    get started() {
-        return this._started;
+    set value(data) {
+        this.setValue(data);
     }
-    get starting() {
-        return !!this._startPromise;
+    get dirty() {
+        var _a;
+        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.dirty) || false;
     }
-    get stopped() {
-        return !this._started && !this._startPromise;
+    get invalid() {
+        return !this.form || this.form.invalid;
     }
-    get data() {
-        return this.dataSubject.value;
+    get pending() {
+        return !this.form || (this.form.dirty && this.form.pending);
     }
-    set data(value) {
-        if (this.dataSubject.value !== value) {
-            this.dataSubject.next(value);
-        }
+    get valid() {
+        var _a;
+        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
     }
-    registerSubscription(sub) {
-        this._subscription = this._subscription || new Subscription();
-        this._subscription.add(sub);
+    get empty() {
+        return !this.form || (!this.form.dirty && !this.form.touched);
     }
-    unregisterSubscription(sub) {
+    get touched() {
         var _a;
-        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.remove(sub);
+        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.touched) || false;
     }
-    unsubscribe() {
-        var _a;
-        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        this._subscription = null;
+    get untouched() {
+        return !this.form || this.form.untouched;
     }
-    ngOnStop() {
-        // Can be overwritten by subclasses
+    get enabled() {
+        return this._enable;
     }
-};
-StartableObservableService = __decorate([
-    __param(0, Optional())
-], StartableObservableService);
-
-// Base58 encoding/decoding
-// Originally written by Mike Hearn for BitcoinJ
-// Copyright (c) 2011 Google Inc
-// Ported to JavaScript by Stefan Thomas
-// Merged Buffer refactorings from base58-native by Stephen Pair
-// Copyright (c) 2013 BitPay Inc
-// Rewritten in TypeScript by Ludovic Pecquot
-// @dynamic
-class Base58 {
-    static getAlphabetMap() {
-        if (!Base58.alphabetMap) {
-            this.alphabetMap = {};
-            for (let i = 0; i < Base58.alphabet.length; i++) {
-                Base58.alphabetMap[Base58.alphabet.charAt(i)] = i;
-            }
-        }
-        return Base58.alphabetMap;
+    get disabled() {
+        return !this._enable;
     }
-    static encode(buffer) {
-        if (buffer.length === 0)
-            return '';
-        let i;
-        let j;
-        const digits = [0];
-        for (i = 0; i < buffer.length; i++) {
-            for (j = 0; j < digits.length; j++)
-                digits[j] <<= 8;
-            digits[digits.length - 1] += buffer[i];
-            let carry = 0;
-            for (j = digits.length - 1; j >= 0; j--) {
-                digits[j] += carry;
-                carry = (digits[j] / 58) | 0;
-                digits[j] %= 58;
-            }
-            while (carry) {
-                digits.unshift(carry);
-                carry = (digits[0] / 58) | 0;
-                digits[0] %= 58;
-            }
+    disable(opts) {
+        var _a;
+        (_a = this.form) === null || _a === void 0 ? void 0 : _a.disable(opts);
+        if (this._enable) {
+            this._enable = false;
+            if (!opts || opts.emitEvent !== true)
+                this.markForCheck();
         }
-        // deal with leading zeros
-        for (i = 0; i < buffer.length - 1 && buffer[i] === 0; i++)
-            digits.unshift(0);
-        return digits.map(function (digit) { return Base58.alphabet[digit]; }).join('');
     }
-    static decode(string) {
-        if (string.length === 0)
-            return (new Uint8Array(0));
-        const input = string.split('').map(function (c) {
-            return Base58.getAlphabetMap()[c];
-        });
-        let i;
-        let j;
-        const bytes = [0];
-        for (i = 0; i < input.length; i++) {
-            for (j = 0; j < bytes.length; j++)
-                bytes[j] *= 58;
-            bytes[bytes.length - 1] += input[i];
-            let carry = 0;
-            for (j = bytes.length - 1; j >= 0; j--) {
-                bytes[j] += carry;
-                carry = bytes[j] >> 8;
-                bytes[j] &= 0xff;
-            }
-            while (carry) {
-                bytes.unshift(carry);
-                carry = bytes[0] >> 8;
-                bytes[0] &= 0xff;
-            }
+    enable(opts) {
+        var _a;
+        (_a = this.form) === null || _a === void 0 ? void 0 : _a.enable(opts);
+        if (!this._enable) {
+            this._enable = true;
+            if (!opts || opts.emitEvent !== true)
+                this.markForCheck();
         }
-        // deal with leading zeros
-        for (i = 0; i < input.length - 1 && input[i] === 0; i++)
-            bytes.unshift(0);
-        return (new Uint8Array(bytes));
     }
-}
-Base58.alphabet = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
-
-const ED25519_SEED_LENGTH = 32; // Length of a ED25519 seed
-const SCRYPT_PARAMS = {
-    SIMPLE: {
-        N: 2048,
-        r: 8,
-        p: 1
-    },
-    DEFAULT: {
-        N: 4096,
-        r: 16,
-        p: 1
-    },
-    SECURE: {
-        N: 16384,
-        r: 32,
-        p: 2
-    },
-    HARDEST: {
-        N: 65536,
-        r: 32,
-        p: 4
-    },
-    EXTREME: {
-        N: 262144,
-        r: 64,
-        p: 8
+    get destroyed() {
+        var _a;
+        return ((_a = this.destroySubject) === null || _a === void 0 ? void 0 : _a.closed) !== false;
     }
-};
-class CryptoService {
-    static get started() {
-        return this._ready;
+    set form(value) {
+        this.setForm(value);
     }
-    static ready() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._ready)
-                return; // OK
-            yield cryptoWaitReady();
-            this._ready = true;
-        });
+    get form() {
+        return this._form;
     }
-    /**
-     * Generate a sign keypair, using scrypt, from a salt and a password
-     *
-     * @param salt
-     * @param password
-     * @param scryptParams
-     */
-    static scryptKeypair(salt, password, scryptParams) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.started)
-                yield this.ready();
-            const passwordU8a = decodeUTF8(password);
-            const saltU8a = decodeUTF8(salt);
-            const result = scryptEncode(passwordU8a, saltU8a, scryptParams || SCRYPT_PARAMS.DEFAULT);
-            const seed = result.password.slice(0, ED25519_SEED_LENGTH);
-            return ed25519PairFromSeed(seed);
-        });
+    ngOnInit() {
+        this._enable ? this.enable() : this.disable();
+        this.errorTranslatorOptions = this.errorTranslatorOptions || {
+            controlPathTranslator: this
+        };
     }
-    /**
-     * Sign a message, from a key pair
-     */
-    static sign(message, keypair) {
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+        this.readySubject.unsubscribe();
+        this.loadingSubject.unsubscribe();
+        this.errorSubject.unsubscribe();
+        this.onCancel.unsubscribe();
+        this.onSubmit.unsubscribe();
+        this.destroySubject.next();
+        this.destroySubject.unsubscribe();
+    }
+    cancel() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.started)
-                yield this.ready();
-            const m = decodeUTF8(message);
-            const sig = ed25519Sign(m, keypair);
-            return encodeBase64(sig);
+            this.onCancel.emit();
         });
     }
     /**
-     * Sign a message, from a key pair
+     *
+     * @param event
+     * @param opts allow to skip validation check, using {checkValid: false}
+     */
+    doSubmit(event, opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._form) {
+                this.markAllAsTouched({ emitEvent: true });
+                return;
+            }
+            // Check if valid (if not disabled)
+            if ((!opts || opts.checkValid !== false) && !this._form.valid) {
+                // Wait validation end
+                yield AppFormUtils.waitWhilePending(this._form);
+                // Form is invalid: exit (+ log if debug)
+                if (this._form.invalid) {
+                    this.markAllAsTouched({ emitEvent: true });
+                    if (this.debug)
+                        AppFormUtils.logFormErrors(this._form);
+                    return;
+                }
+            }
+            // Emit event
+            this.onSubmit.emit(event);
+        });
+    }
+    setForm(form) {
+        if (this._form !== form) {
+            this._form = form;
+            this._subscription.add(this._form.statusChanges.subscribe(status => this.markForCheck()));
+        }
+    }
+    setValue(data, opts) {
+        if (!data) {
+            console.warn('[form] Trying to set an empty value to form. Skipping');
+            return;
+        }
+        // DEBUG
+        //if (this.debug) console.debug('[form] Updating form (using entity)', data);
+        // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
+        AppFormUtils.copyEntity2Form(data, this.form, Object.assign({ emitEvent: false, onlySelf: true }, opts));
+        if (!opts || opts.emitEvent !== true) {
+            this.markForCheck();
+        }
+    }
+    reset(data, opts) {
+        if (data) {
+            if (this.debug)
+                console.debug('[form] Resetting form (using entity)', data);
+            // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
+            const json = AppFormUtils.getFormValueFromEntity(data, this.form);
+            this.form.reset(json, { emitEvent: false, onlySelf: true });
+        }
+        else {
+            this.form.reset(null, { emitEvent: false, onlySelf: true });
+        }
+        if (!opts || opts.emitEvent !== true)
+            this.markForCheck();
+    }
+    markAsPristine(opts) {
+        this.form.markAsPristine(opts);
+        if (!opts || opts.emitEvent !== false)
+            this.markForCheck();
+    }
+    markAsUntouched(opts) {
+        this.form.markAsUntouched(opts);
+        if (!opts || opts.emitEvent !== false)
+            this.markForCheck();
+    }
+    /**
+     * @deprecated prefer to use markAllAsTouched()
+     * @param opts
+     */
+    markAsTouched(opts) {
+        // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
+        console.warn('TODO: Replace this call by markAllAsTouched() - because of changes in ngx-components >= 0.16.0');
+        AppFormUtils.markAsTouched(this.form, opts);
+        if (!opts || opts.emitEvent !== false)
+            this.markForCheck();
+    }
+    markAllAsTouched(opts) {
+        // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
+        AppFormUtils.markAllAsTouched(this.form, opts);
+        if (!opts || opts.emitEvent !== false)
+            this.markForCheck();
+    }
+    markAsDirty(opts) {
+        this.form.markAsDirty(opts);
+        if (!opts || opts.emitEvent !== false)
+            this.markForCheck();
+    }
+    markAsLoading(opts) {
+        this.setLoading(true, opts);
+    }
+    markAsLoaded(opts) {
+        this.setLoading(false, opts);
+    }
+    markAsReady(opts) {
+        if (this.readySubject.value !== true) {
+            this.readySubject.next(true);
+            // If subclasses implements OnReady
+            if (typeof this['ngOnReady'] === 'function') {
+                this.ngOnReady();
+            }
+        }
+    }
+    /**
+     * Wait form is ready
+     * @param opts
+     */
+    ready(opts) {
+        if (this.readySubject.value)
+            return Promise.resolve();
+        return waitForTrue(this.readySubject, opts);
+    }
+    /**
+     * Wait form is not busy (=loaded)
+     * @param opts
+     */
+    waitIdle(opts) {
+        if (!this.loadingSubject.value)
+            return Promise.resolve();
+        return waitForFalse(this.loadingSubject, opts);
+    }
+    updateValueAndValidity(opts) {
+        AppFormUtils.updateValueAndValidity(this.form, opts);
+        if (!opts || opts.emitEvent !== false)
+            this.markForCheck();
+    }
+    translateControlPath(path) {
+        var _a;
+        const i18nFieldName = this.getI18nFieldName(path);
+        return ((_a = this.translate) === null || _a === void 0 ? void 0 : _a.instant(i18nFieldName)) || i18nFieldName;
+    }
+    /* -- protected methods -- */
+    getFormError(form, opts) {
+        if (!form || !this.errorTranslator)
+            return undefined;
+        return this.errorTranslator.translateFormErrors(this.form, Object.assign({ controlPathTranslator: this }, opts));
+    }
+    getI18nFieldName(path) {
+        return (this.i18nFieldPrefix || '') + changeCaseToUnderscore(path).toUpperCase();
+    }
+    registerSubscription(sub) {
+        this._subscription.add(sub);
+    }
+    unregisterSubscription(sub) {
+        this._subscription.remove(sub);
+    }
+    registerAutocompleteField(fieldName, opts) {
+        return this.autocompleteHelper.add(fieldName, opts);
+    }
+    setError(value, opts) {
+        if (this.errorSubject.value !== value) {
+            this.errorSubject.next(value);
+            if (!opts || opts.emitEvent !== false) {
+                this.markForCheck();
+            }
+        }
+    }
+    markForCheck() {
+        // Should be overwritten by subclasses
+        console.warn('markForCheck() has been called, but is not overwritten by component ' + this.constructor.name);
+    }
+    /* -- private function -- */
+    setLoading(value, opts) {
+        if (this.loadingSubject.value !== value) {
+            this.loadingSubject.next(value);
+            if (!opts || opts.emitEvent !== false) {
+                this.markForCheck();
+            }
+        }
+    }
+}
+AppForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppForm, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormGroup }], target: i0.ɵɵFactoryTarget.Directive });
+AppForm.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: AppForm, inputs: { debug: "debug", tabindex: "tabindex", errorTranslatorOptions: "errorTranslatorOptions", form: "form" }, outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppForm, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$2.UntypedFormGroup }]; }, propDecorators: { debug: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], errorTranslatorOptions: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], onCancel: [{
+                type: Output
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
+class TextForm extends AppForm {
+    constructor(injector, cd, formBuilder) {
+        super(injector);
+        this.injector = injector;
+        this.cd = cd;
+        this.formBuilder = formBuilder;
+        this.showError = true;
+        this.multiline = true;
+        this.autoHeight = false;
+        this.maxLength = 2000;
+        this.autofocus = false;
+        this.validator = null;
+        this.textAreaChanges = new EventEmitter();
+    }
+    ngOnInit() {
+        // Compute validators
+        const validators = isNotNil(this.maxLength) && this.maxLength > 0 ? [Validators.maxLength(this.maxLength)] : [];
+        if (this.validator)
+            validators.push(this.validator);
+        // Create the form
+        const form = this.formBuilder.group({
+            text: [null, validators.length ? Validators.compose(validators) : null]
+        });
+        this.control = form.get('text');
+        this.setForm(form);
+        super.ngOnInit();
+    }
+    textAreaChanged(event) {
+        this.textAreaChanges.emit(this.control.value);
+    }
+    containerResize() {
+        var _a;
+        (_a = this.autosizeDirective) === null || _a === void 0 ? void 0 : _a.resizeToFitContent(true);
+    }
+    focusInput() {
+        if (this.textArea)
+            focusInput(this.textArea);
+        if (this.textInput)
+            focusInput(this.textInput);
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+}
+TextForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+TextForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextForm, selector: "app-text-form", inputs: { showError: "showError", placeholder: "placeholder", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator" }, outputs: { textAreaChanges: "textAreaChanges" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "autosizeDirective", first: true, predicate: CdkTextareaAutosize, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-error *ngIf=\"control.hasError('pattern')\">\n        {{ 'ERROR.FIELD_INVALID' | translate }}\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea.fixed-height{height:11.5em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-text-form', template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-error *ngIf=\"control.hasError('pattern')\">\n        {{ 'ERROR.FIELD_INVALID' | translate }}\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea.fixed-height{height:11.5em}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.UntypedFormBuilder }]; }, propDecorators: { showError: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], multiline: [{
+                type: Input
+            }], autoHeight: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], validator: [{
+                type: Input
+            }], textAreaChanges: [{
+                type: Output
+            }], textArea: [{
+                type: ViewChild,
+                args: ['textArea']
+            }], textInput: [{
+                type: ViewChild,
+                args: ['textInput']
+            }], autosizeDirective: [{
+                type: ViewChild,
+                args: [CdkTextareaAutosize]
+            }] } });
+
+class TextPopover {
+    constructor(popoverController, translate) {
+        this.popoverController = popoverController;
+        this.translate = translate;
+        this.placeholder = '';
+        this.editing = true;
+        this.multiline = true;
+        this.maxLength = 2000;
+        this.autofocus = false;
+        this.validator = null;
+        this.subscription = new Subscription();
+    }
+    get disabled() {
+        return this.form.disabled;
+    }
+    get enabled() {
+        return this.form.enabled;
+    }
+    get valid() {
+        var _a;
+        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
+    }
+    get value() {
+        var _a;
+        return (_a = this.form) === null || _a === void 0 ? void 0 : _a.value.text;
+    }
+    ngOnInit() {
+        this.enable();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.form.setValue({ text: this.text }), 0);
+    }
+    onValidate(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield waitWhilePending(this.form);
+            if (!this.valid) {
+                logFormErrors(this.form.control);
+                return;
+            }
+            try {
+                const value = this.value;
+                this.disable();
+                yield this.popoverController.dismiss(value);
+                this.form.error = null;
+            }
+            catch (err) {
+                this.form.error = (err && err.message) || err;
+                this.enable();
+            }
+        });
+    }
+    disable() {
+        this.form.disable();
+    }
+    enable() {
+        if (this.editing)
+            this.form.enable();
+    }
+    cancel() {
+        this.popoverController.dismiss();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+TextPopover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextPopover, deps: [{ token: i2.PopoverController }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+TextPopover.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextPopover, selector: "app-text-popover", inputs: { text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", maxLength: "maxLength", autofocus: "autofocus", validator: "validator" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "\n<ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autofocus]=\"editing && autofocus\"\n                 [validator]=\"validator\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus", "validator"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-text-popover', template: "\n<ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autofocus]=\"editing && autofocus\"\n                 [validator]=\"validator\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
+        }], ctorParameters: function () { return [{ type: i2.PopoverController }, { type: i1$1.TranslateService }]; }, propDecorators: { form: [{
+                type: ViewChild,
+                args: ['form', { static: true }]
+            }], text: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], editing: [{
+                type: Input
+            }], multiline: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], validator: [{
+                type: Input
+            }] } });
+
+class SelectPeerModal {
+    constructor(modalCtrl, popoverController, translate, http, cd, environment) {
+        this.modalCtrl = modalCtrl;
+        this.popoverController = popoverController;
+        this.translate = translate;
+        this.http = http;
+        this.cd = cd;
+        this.environment = environment;
+        this._subscription = new Subscription();
+        this.loading = true;
+        this.$peers = new Subject();
+        this.peerMinVersion = this.environment.peerMinVersion;
+        this.canCancel = true;
+        this.allowSelectDownPeer = true;
+        this.onRefresh = new EventEmitter();
+        this.showSetManuallyButton = true;
+        this.mobile = isMobile(window);
+    }
+    set peers(peers) {
+        this._subscription.add(peers.subscribe(res => this.refreshPeers(res)));
+    }
+    cancel() {
+        this.modalCtrl.dismiss();
+    }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    selectPeer(peer) {
+        if (this.allowSelectDownPeer || (peer.reachable && this.isCompatible(peer))) {
+            console.debug(`[select-peer-modal] Selected peer: {url: '${peer.url}'}`);
+            this.modalCtrl.dismiss(peer);
+        }
+    }
+    /**
+     *  Check the min pod version, defined by the app
+     *
+     * @param peer
+     */
+    isCompatible(peer) {
+        return !this.peerMinVersion || (peer && peer.softwareVersion && VersionUtils.isCompatible(this.peerMinVersion, peer.softwareVersion));
+    }
+    refresh(event) {
+        this.loading = true;
+        this.onRefresh.emit(event);
+    }
+    clickSetManually(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const peerUrl = yield this.openPeerUrlPopover(event);
+            if (peerUrl) {
+                const peer = Peer.parseUrl(peerUrl);
+                yield this.refreshPeer(peer);
+                this.selectPeer(peer);
+            }
+        });
+    }
+    /* -- protected methods -- */
+    refreshPeers(peers) {
+        return __awaiter(this, void 0, void 0, function* () {
+            peers = peers || [];
+            const data = [];
+            const jobs = Promise.all(peers.map((peer) => __awaiter(this, void 0, void 0, function* () {
+                yield this.refreshPeer(peer);
+                if (this._subscription.closed)
+                    return; // component destroyed
+                data.push(peer);
+                // Sort (by reachable, then host)
+                data.sort((a, b) => {
+                    if (a.reachable && !b.reachable)
+                        return -1;
+                    if (!a.reachable && b.reachable)
+                        return 1;
+                    if (a.hostAndPort < b.hostAndPort)
+                        return -1;
+                    if (a.hostAndPort > b.hostAndPort)
+                        return 1;
+                    return 0;
+                });
+                this.$peers.next(data);
+                return peer;
+            })));
+            this._subscription.add(this.$peers
+                .subscribe(() => this.cd.markForCheck()));
+            try {
+                yield jobs;
+            }
+            catch (err) {
+                if (!this._subscription.closed)
+                    console.error(err);
+            }
+            this.loading = false;
+            this.cd.markForCheck();
+        });
+    }
+    refreshPeer(peer) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const summary = yield NetworkUtils.getNodeInfo(this.http, peer.url);
+                peer.status = 'UP';
+                peer.softwareName = summary.softwareName;
+                peer.softwareVersion = summary.softwareVersion;
+                peer.label = summary.nodeLabel;
+                peer.name = summary.nodeName;
+            }
+            catch (err) {
+                if (!this._subscription.closed) {
+                    if (err && err.message) {
+                        console.error('[select-peer] ' + err.message, err);
+                    }
+                }
+                peer.status = 'DOWN';
+            }
+            return peer;
+        });
+    }
+    openPeerUrlPopover(event, opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modal = yield this.popoverController.create({
+                component: TextPopover,
+                componentProps: Object.assign({ placeholder: this.translate.instant('SETTINGS.PEER_URL'), multiline: false, autofocus: !this.mobile, autocomplete: false, validator: Validators.pattern(PEER_URL_REGEXP), maxLength: null }, opts),
+                backdropDismiss: false,
+                keyboardClose: false,
+                event,
+                translucent: true,
+                cssClass: 'popover-large',
+            });
+            yield modal.present();
+            const { data, role } = yield modal.onDidDismiss();
+            if (data) {
+                console.info('Popover result: ', data);
+                return data;
+            }
+        });
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+}
+SelectPeerModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SelectPeerModal, deps: [{ token: i2.ModalController }, { token: i2.PopoverController }, { token: i1$1.TranslateService }, { token: i2$5.HttpClient }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
+SelectPeerModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SelectPeerModal, selector: "select-peer-modal", inputs: { canCancel: "canCancel", allowSelectDownPeer: "allowSelectDownPeer", onRefresh: "onRefresh", showSetManuallyButton: "showSetManuallyButton" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"cancel()\" *ngIf=\"canCancel\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{'NETWORK.PEER.SELECT_MODAL.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      <ion-spinner *ngIf=\"loading; else endButtons\"></ion-spinner>\n\n      <ng-template #endButtons>\n        <!-- refresh button -->\n        <ion-button *ngIf=\"onRefresh.observers | isNotEmptyArray\"\n                    [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                    (click)=\"refresh($event)\">\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      </ng-template>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-list-header>\n      <ion-label class=\"ion-text-wrap\">\n        <p translate>NETWORK.PEER.SELECT_MODAL.HELP</p>\n      </ion-label>\n    </ion-list-header>\n\n    <ion-item *ngFor=\"let peer of $peers | async\"\n              tappable\n              (click)=\"selectPeer(peer)\"\n              detail\n              @fadeInAnimation>\n\n      <!-- icon -->\n      <ion-avatar slot=\"start\" *ngIf=\"peer.reachable\" >\n        <ion-img [src]=\"peer.favicon || (peer.url + '/api/favicon')\"></ion-img>\n      </ion-avatar>\n      <ion-icon slot=\"start\"  *ngIf=\"!peer.reachable\" name=\"desktop\" color=\"medium\" class=\"ion-text-center\"></ion-icon>\n\n      <!-- Peer is UP -->\n      <ion-grid *ngIf=\"peer.reachable\">\n        <ion-row class=\"ion-no-padding\">\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap\">\n              <ion-text color=\"dark\">\n                <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n              </ion-text>\n              <ion-text color=\"primary\">\n                <h4>{{peer.label}}</h4>\n              </ion-text>\n            </ion-label>\n          </ion-col>\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap ion-text-center\" color=\"medium\">\n              <h3>{{peer.softwareName}}</h3>\n              <h4 *ngIf=\"!peerMinVersion || isCompatible(peer); else invalidVersion\">\n                <small>v{{peer.softwareVersion}}</small>\n              </h4>\n              <ng-template #invalidVersion>\n                <ion-text color=\"danger\" [matTooltip]=\"'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP'|translate: {version: peerMinVersion} \">\n                  <h4 class=\"ion-color-danger\">\n                    <small><mat-icon>warning</mat-icon>v{{peer.softwareVersion}}</small>\n                  </h4>\n                </ion-text>\n              </ng-template>\n            </ion-label>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n\n      <!-- Peer is DOWN -->\n      <ion-label class=\"ion-text-wrap\" *ngIf=\"!peer.reachable\">\n        <ion-text color=\"medium\">\n          <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n        </ion-text>\n        <ion-text color=\"danger\">\n          <h4>\n            <small><ion-icon size=\"small\" name=\"close-circle\"></ion-icon></small>\n            <span translate>NETWORK.PEER.OFFLINE</span>\n          </h4>\n        </ion-text>\n      </ion-label>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n\n<ion-footer *ngIf=\"canCancel\" hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\" *ngIf=\"showSetManuallyButton\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"clickSetManually($event)\">\n          <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n        </ion-button>\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SelectPeerModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'select-peer-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation], template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"cancel()\" *ngIf=\"canCancel\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{'NETWORK.PEER.SELECT_MODAL.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      <ion-spinner *ngIf=\"loading; else endButtons\"></ion-spinner>\n\n      <ng-template #endButtons>\n        <!-- refresh button -->\n        <ion-button *ngIf=\"onRefresh.observers | isNotEmptyArray\"\n                    [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                    (click)=\"refresh($event)\">\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      </ng-template>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-list-header>\n      <ion-label class=\"ion-text-wrap\">\n        <p translate>NETWORK.PEER.SELECT_MODAL.HELP</p>\n      </ion-label>\n    </ion-list-header>\n\n    <ion-item *ngFor=\"let peer of $peers | async\"\n              tappable\n              (click)=\"selectPeer(peer)\"\n              detail\n              @fadeInAnimation>\n\n      <!-- icon -->\n      <ion-avatar slot=\"start\" *ngIf=\"peer.reachable\" >\n        <ion-img [src]=\"peer.favicon || (peer.url + '/api/favicon')\"></ion-img>\n      </ion-avatar>\n      <ion-icon slot=\"start\"  *ngIf=\"!peer.reachable\" name=\"desktop\" color=\"medium\" class=\"ion-text-center\"></ion-icon>\n\n      <!-- Peer is UP -->\n      <ion-grid *ngIf=\"peer.reachable\">\n        <ion-row class=\"ion-no-padding\">\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap\">\n              <ion-text color=\"dark\">\n                <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n              </ion-text>\n              <ion-text color=\"primary\">\n                <h4>{{peer.label}}</h4>\n              </ion-text>\n            </ion-label>\n          </ion-col>\n          <ion-col class=\"ion-no-padding\">\n            <ion-label class=\"ion-text-wrap ion-text-center\" color=\"medium\">\n              <h3>{{peer.softwareName}}</h3>\n              <h4 *ngIf=\"!peerMinVersion || isCompatible(peer); else invalidVersion\">\n                <small>v{{peer.softwareVersion}}</small>\n              </h4>\n              <ng-template #invalidVersion>\n                <ion-text color=\"danger\" [matTooltip]=\"'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP'|translate: {version: peerMinVersion} \">\n                  <h4 class=\"ion-color-danger\">\n                    <small><mat-icon>warning</mat-icon>v{{peer.softwareVersion}}</small>\n                  </h4>\n                </ion-text>\n              </ng-template>\n            </ion-label>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n\n      <!-- Peer is DOWN -->\n      <ion-label class=\"ion-text-wrap\" *ngIf=\"!peer.reachable\">\n        <ion-text color=\"medium\">\n          <h3>{{peer.hostAndPort}}{{peer.path}}</h3>\n        </ion-text>\n        <ion-text color=\"danger\">\n          <h4>\n            <small><ion-icon size=\"small\" name=\"close-circle\"></ion-icon></small>\n            <span translate>NETWORK.PEER.OFFLINE</span>\n          </h4>\n        </ion-text>\n      </ion-label>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n\n<ion-footer *ngIf=\"canCancel\" hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\" *ngIf=\"showSetManuallyButton\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"clickSetManually($event)\">\n          <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n        </ion-button>\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i2.ModalController }, { type: i2.PopoverController }, { type: i1$1.TranslateService }, { type: i2$5.HttpClient }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ENVIRONMENT]
+                    }] }];
+    }, propDecorators: { canCancel: [{
+                type: Input
+            }], allowSelectDownPeer: [{
+                type: Input
+            }], onRefresh: [{
+                type: Input
+            }], showSetManuallyButton: [{
+                type: Input
+            }] } });
+
+/**
+ * Same as StartableService, bu with a dataSubject instead of a simple 'data' property
+ */
+let StartableObservableService = class StartableObservableService {
+    constructor(prerequisiteService) {
+        this.dataSubject = new BehaviorSubject(null);
+        this.startSubject = new Subject();
+        this.stopSubject = new Subject();
+        this._debug = false;
+        this._startByReadyFunction = true; // should start when calling ready() ?
+        this._started = false;
+        this._startPromise = null;
+        this._startPrerequisite = null;
+        this._subscription = null;
+        this._startPrerequisite = prerequisiteService
+            ? () => prerequisiteService.ready()
+            : () => Promise.resolve();
+    }
+    start(opts) {
+        if (this._startPromise)
+            return this._startPromise;
+        if (this._started)
+            return Promise.resolve(this.dataSubject.value);
+        this._startPromise = this._startPrerequisite()
+            .then(() => this.ngOnStart(opts))
+            .then(data => {
+            this._started = true;
+            this._startPromise = undefined;
+            // Should be done AFTER 'this._started = true', because of the 'filter' operator, inside ready() function
+            this.dataSubject.next(data);
+            this.startSubject.next(data);
+            return data;
+        })
+            .catch(err => {
+            if (!this.stopped) {
+                console.error('Failed to start a service: ' + (err && err.message || err), err);
+                this._started = false;
+                this._startPromise = null;
+            }
+            return null;
+        });
+        return this._startPromise;
+    }
+    ready() {
+        if (this._started)
+            return Promise.resolve(this.dataSubject.value);
+        if (this._startPromise)
+            return this._startPromise;
+        if (this._startByReadyFunction)
+            return this.start();
+        return this.dataSubject
+            .pipe(takeUntil(this.stopSubject), 
+        // Wait start() to be called, to exclude the initial 'null' value
+        filter(_ => this._started))
+            .toPromise();
+    }
+    stop() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.unsubscribe();
+                yield this.ngOnStop();
+            }
+            catch (err) {
+                console.error('Failed to stop a service: ' + (err && err.message || err), err);
+            }
+            finally {
+                this._started = false;
+                this._startPromise = undefined;
+                this.stopSubject.next(); // Stop all running observables
+                this.dataSubject.next(null); // Reset data
+            }
+        });
+    }
+    restart(opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._startPromise)
+                yield this._startPromise; // Wait end of previous loading
+            if (this._started)
+                yield this.stop(); // Then stop if started
+            return this.start(opts); // Then start again
+        });
+    }
+    get started() {
+        return this._started;
+    }
+    get starting() {
+        return !!this._startPromise;
+    }
+    get stopped() {
+        return !this._started && !this._startPromise;
+    }
+    get data() {
+        return this.dataSubject.value;
+    }
+    set data(value) {
+        if (this.dataSubject.value !== value) {
+            this.dataSubject.next(value);
+        }
+    }
+    registerSubscription(sub) {
+        this._subscription = this._subscription || new Subscription();
+        this._subscription.add(sub);
+    }
+    unregisterSubscription(sub) {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.remove(sub);
+    }
+    unsubscribe() {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this._subscription = null;
+    }
+    ngOnStop() {
+        // Can be overwritten by subclasses
+    }
+};
+StartableObservableService = __decorate([
+    __param(0, Optional())
+], StartableObservableService);
+
+// Base58 encoding/decoding
+// Originally written by Mike Hearn for BitcoinJ
+// Copyright (c) 2011 Google Inc
+// Ported to JavaScript by Stefan Thomas
+// Merged Buffer refactorings from base58-native by Stephen Pair
+// Copyright (c) 2013 BitPay Inc
+// Rewritten in TypeScript by Ludovic Pecquot
+// @dynamic
+class Base58 {
+    static getAlphabetMap() {
+        if (!Base58.alphabetMap) {
+            this.alphabetMap = {};
+            for (let i = 0; i < Base58.alphabet.length; i++) {
+                Base58.alphabetMap[Base58.alphabet.charAt(i)] = i;
+            }
+        }
+        return Base58.alphabetMap;
+    }
+    static encode(buffer) {
+        if (buffer.length === 0)
+            return '';
+        let i;
+        let j;
+        const digits = [0];
+        for (i = 0; i < buffer.length; i++) {
+            for (j = 0; j < digits.length; j++)
+                digits[j] <<= 8;
+            digits[digits.length - 1] += buffer[i];
+            let carry = 0;
+            for (j = digits.length - 1; j >= 0; j--) {
+                digits[j] += carry;
+                carry = (digits[j] / 58) | 0;
+                digits[j] %= 58;
+            }
+            while (carry) {
+                digits.unshift(carry);
+                carry = (digits[0] / 58) | 0;
+                digits[0] %= 58;
+            }
+        }
+        // deal with leading zeros
+        for (i = 0; i < buffer.length - 1 && buffer[i] === 0; i++)
+            digits.unshift(0);
+        return digits.map(function (digit) { return Base58.alphabet[digit]; }).join('');
+    }
+    static decode(string) {
+        if (string.length === 0)
+            return (new Uint8Array(0));
+        const input = string.split('').map(function (c) {
+            return Base58.getAlphabetMap()[c];
+        });
+        let i;
+        let j;
+        const bytes = [0];
+        for (i = 0; i < input.length; i++) {
+            for (j = 0; j < bytes.length; j++)
+                bytes[j] *= 58;
+            bytes[bytes.length - 1] += input[i];
+            let carry = 0;
+            for (j = bytes.length - 1; j >= 0; j--) {
+                bytes[j] += carry;
+                carry = bytes[j] >> 8;
+                bytes[j] &= 0xff;
+            }
+            while (carry) {
+                bytes.unshift(carry);
+                carry = bytes[0] >> 8;
+                bytes[0] &= 0xff;
+            }
+        }
+        // deal with leading zeros
+        for (i = 0; i < input.length - 1 && input[i] === 0; i++)
+            bytes.unshift(0);
+        return (new Uint8Array(bytes));
+    }
+}
+Base58.alphabet = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
+
+const ED25519_SEED_LENGTH = 32; // Length of a ED25519 seed
+const SCRYPT_PARAMS = {
+    SIMPLE: {
+        N: 2048,
+        r: 8,
+        p: 1
+    },
+    DEFAULT: {
+        N: 4096,
+        r: 16,
+        p: 1
+    },
+    SECURE: {
+        N: 16384,
+        r: 32,
+        p: 2
+    },
+    HARDEST: {
+        N: 65536,
+        r: 32,
+        p: 4
+    },
+    EXTREME: {
+        N: 262144,
+        r: 64,
+        p: 8
+    }
+};
+class CryptoService {
+    static get started() {
+        return this._ready;
+    }
+    static ready() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._ready)
+                return; // OK
+            yield cryptoWaitReady();
+            this._ready = true;
+        });
+    }
+    /**
+     * Generate a sign keypair, using scrypt, from a salt and a password
+     *
+     * @param salt
+     * @param password
+     * @param scryptParams
+     */
+    static scryptKeypair(salt, password, scryptParams) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.started)
+                yield this.ready();
+            const passwordU8a = decodeUTF8(password);
+            const saltU8a = decodeUTF8(salt);
+            const result = scryptEncode(passwordU8a, saltU8a, scryptParams || SCRYPT_PARAMS.DEFAULT);
+            const seed = result.password.slice(0, ED25519_SEED_LENGTH);
+            return ed25519PairFromSeed(seed);
+        });
+    }
+    /**
+     * Sign a message, from a key pair
+     */
+    static sign(message, keypair) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.started)
+                yield this.ready();
+            const m = decodeUTF8(message);
+            const sig = ed25519Sign(m, keypair);
+            return encodeBase64(sig);
+        });
+    }
+    /**
+     * Sign a message, from a key pair
      */
     static verify(message, signature, publicKey) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -14108,6 +14677,7 @@ const NetworkRefreshTimerPeriod = {
     MOBILE: 1000 * 60 * 10 /* every 10 min */,
     DESKTOP: 1000 * 60 * 5 /* every 5 min */
 };
+const PEER_URL_REGEXP = /^(http|https):\/\/[^ "?#@]+$/;
 /* -- DEV only (to debug refresh timer)
 const NetworkRefreshTimerPeriod = {
     MOBILE:  1000,
@@ -14417,12 +14987,7 @@ class NetworkService extends StartableObservableService {
             const peers$ = $onRefresh.pipe(mergeMap((_) => this.getDefaultPeers()), map(peers => peers || []));
             const modal = yield this.modalCtrl.create({
                 component: SelectPeerModal,
-                componentProps: {
-                    onRefresh: $onRefresh,
-                    peers: peers$,
-                    canCancel: toBoolean(opts.canCancel, true),
-                    allowSelectDownPeer: toBoolean(opts.allowSelectDownPeer, true)
-                },
+                componentProps: Object.assign({ onRefresh: $onRefresh, peers: peers$ }, opts),
                 keyboardClose: true,
                 showBackdrop: true
             });
@@ -14985,7 +15550,6 @@ function accountToString(data) {
             (data.lastName || '')) || '';
 }
 
-const uuidv4 = uuidv4Imported;
 const _global = typeof global !== 'undefined' ? global : (typeof window !== 'undefined' ? window : {});
 const NativeWebSocket = _global.WebSocket || _global.MozWebSocket;
 /**
@@ -15029,7 +15593,7 @@ function createTrackerLink(opts) {
         // Skip if not tracked
         if (!context || !context.tracked)
             return forward(operation);
-        const id = context.serializationKey || uuidv4();
+        const id = context.serializationKey || v4();
         console.debug(`[apollo-tracker-link] Watching tracked query {${operation.operationName}#${id}}`);
         // Clean context, before calling JSON.stringify (remove unused attributes)
         const cleanContext = Object.assign(Object.assign({}, context), { optimisticResponse: null, cache: null });
@@ -19008,44 +19572,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-class MatAutocompleteConfigHolder {
-    constructor(options) {
-        this.options = options;
-        this.fields = {};
-        // Store the function from options (e.g. get from user settings)
-        // or create a default function
-        this.getUserAttributes = (options === null || options === void 0 ? void 0 : options.getUserAttributes) ||
-            ((fieldName, defaultAttributes) => defaultAttributes || ['label', 'name']);
-    }
-    add(fieldName, options) {
-        if (!fieldName) {
-            throw new Error('Unable to add config, with name: ' + (fieldName || 'undefined'));
-        }
-        options = options || {};
-        const suggestFn = options.suggestFn
-            || (options.service && ((v, f) => options.service.suggest(v, f)))
-            || undefined;
-        const attributes = (this.getUserAttributes(fieldName, options.attributes) || ['label', 'name']);
-        // Keep original the function from options, when exists
-        const attributesOrFn = attributes.map((a, index) => typeof a === 'function' && options.attributes[index] || a);
-        const filter = Object.assign({ searchAttribute: attributes.length === 1 ? attributes[0] : undefined, searchAttributes: attributes.length > 1 ? attributes : undefined }, options.filter);
-        const displayWith = options.displayWith || MatAutocompleteFieldUtils.createDisplayFn(attributes, options.multiple);
-        const equals = options.equals || MatAutocompleteFieldUtils.defaultEquals;
-        const config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn,
-            filter,
-            displayWith,
-            equals });
-        this.fields[fieldName] = config;
-        return config;
-    }
-    get(fieldName) {
-        if (!fieldName) {
-            throw new Error('Unable to add config, with name: ' + (fieldName || 'undefined'));
-        }
-        return this.fields[fieldName] || this.add(fieldName);
-    }
-}
-
 class FormFieldValuesHolder {
     getAsBoolean(data, definition) {
         const value = this.get(data, definition);
@@ -21138,6 +21664,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 }]
         }] });
 
+class AppTextPopoverModule {
+}
+AppTextPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AppTextPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, declarations: [
+        // Components
+        TextForm,
+        TextPopover
+    ], imports: [SharedModule, i1$1.TranslateModule], exports: [TranslateModule,
+        // Components
+        TextForm,
+        TextPopover] });
+AppTextPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, imports: [SharedModule,
+        TranslateModule.forChild(), TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SharedModule,
+                        TranslateModule.forChild()
+                    ],
+                    declarations: [
+                        // Components
+                        TextForm,
+                        TextPopover
+                    ],
+                    exports: [
+                        TranslateModule,
+                        // Components
+                        TextForm,
+                        TextPopover
+                    ]
+                }]
+        }] });
+
 class AppSelectPeerModule {
 }
 AppSelectPeerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppSelectPeerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -21145,19 +21705,21 @@ AppSelectPeerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         // Network
         SelectPeerModal
     ], imports: [SharedModule,
-        HttpClientModule, i1$1.TranslateModule], exports: [TranslateModule,
+        HttpClientModule, i1$1.TranslateModule, AppTextPopoverModule], exports: [TranslateModule,
         // Components
         SelectPeerModal] });
 AppSelectPeerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppSelectPeerModule, imports: [SharedModule,
         HttpClientModule,
-        TranslateModule.forChild(), TranslateModule] });
+        TranslateModule.forChild(),
+        AppTextPopoverModule, TranslateModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppSelectPeerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         SharedModule,
                         HttpClientModule,
-                        TranslateModule.forChild()
+                        TranslateModule.forChild(),
+                        AppTextPopoverModule
                     ],
                     declarations: [
                         // Network
@@ -21589,577 +22151,240 @@ class AccountValidatorService extends AppValidatorService {
             lastName: [data && data.lastName || null, Validators.compose([Validators.required, Validators.minLength(2)])],
             firstName: [data && data.firstName || null, Validators.compose([Validators.required, Validators.minLength(2)])],
             email: [data && data.email || null, Validators.compose([Validators.required, Validators.email])],
-            mainProfile: [data && (data.mainProfile || PersonUtils.getMainProfile(data.profiles)) || 'GUEST', Validators.required],
-            statusId: [data && data.statusId || StatusIds.TEMPORARY, Validators.required],
-            pubkey: [data && data.pubkey || null, Validators.compose([Validators.required, SharedValidators.pubkey])]
-        };
-        // Add additional fields
-        this.accountService.additionalFields.forEach(field => {
-            //console.debug("[register-form] Add additional field {" + field.name + "} to form", field);
-            formDef[field.key] = [data && data[field.key] || null, this.getValidators(field)];
-        });
-        return formDef;
-    }
-    getValidators(field) {
-        const validatorFns = [];
-        if (field.extra && field.extra.account && field.extra.account.required) {
-            validatorFns.push(Validators.required);
-        }
-        if (field.type === 'entity') {
-            validatorFns.push(SharedValidators.entity);
-        }
-        return validatorFns.length ? Validators.compose(validatorFns) : validatorFns.length === 1 ? validatorFns[0] : undefined;
-    }
-}
-AccountValidatorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AccountValidatorService, deps: [{ token: i1$2.UntypedFormBuilder }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable });
-AccountValidatorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AccountValidatorService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AccountValidatorService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: AccountService }]; } });
-
-class RegisterForm {
-    constructor(accountService, accountValidatorService, formBuilder, environment, settings) {
-        this.accountService = accountService;
-        this.accountValidatorService = accountValidatorService;
-        this.formBuilder = formBuilder;
-        this.environment = environment;
-        this.settings = settings;
-        this.debug = false;
-        this.subscriptions = [];
-        this.sending = false;
-        this.showPwd = false;
-        this.showConfirmPwd = false;
-        this.onCancel = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        this.referentialToString = referentialToString;
-        this.forms = [];
-        // Email form
-        this.forms.push(formBuilder.group({
-            email: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.email]), this.emailAvailability(this.accountService)),
-            confirmEmail: new UntypedFormControl(null, Validators.compose([Validators.required, this.equalsValidator('email')]))
-        }));
-        // Password form
-        this.forms.push(formBuilder.group({
-            password: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(8)])),
-            confirmPassword: new UntypedFormControl(null, Validators.compose([Validators.required, this.equalsValidator('password')]))
-        }));
-        // Detail form
-        const formDetailDef = {
-            lastName: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(2)])),
-            firstName: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(2)]))
-        };
-        // Prepare autocomplete settings
-        this.autocompleteHelper = new MatAutocompleteConfigHolder(settings && {
-            getUserAttributes: (a, b) => settings.getFieldDisplayAttributes(a, b)
-        });
-        // Add additional fields to details form
-        this.additionalFields = this.accountService.additionalFields
-            // Keep only required fields
-            .filter(field => field.extra && field.extra.registration && field.extra.registration.required);
-        this.additionalFields.forEach(field => {
-            //if (this.debug) console.debug("[register-form] Add additional field {" + field.name + "} to form", field);
-            formDetailDef[field.key] = new UntypedFormControl(null, this.accountValidatorService.getValidators(field));
-            if (field.type === 'entity') {
-                field.autocomplete = this.autocompleteHelper.add(field.key, field.autocomplete);
-            }
-        });
-        this.forms.push(formBuilder.group(formDetailDef));
-        this.form = formBuilder.group({
-            emailStep: this.forms[0],
-            passwordStep: this.forms[1],
-            detailsStep: this.forms[2]
-        });
-    }
-    ngOnInit() {
-        // For DEV only ------------------------
-        if (!this.environment.production) {
-            this.form.setValue({
-                emailStep: {
-                    email: 'contact@e-is.pro',
-                    confirmEmail: 'contact@e-is.pro'
-                },
-                passwordStep: {
-                    password: 'contactera',
-                    confirmPassword: 'contactera'
-                },
-                detailsStep: {
-                    lastName: 'Lavenier 2',
-                    firstName: 'Benoit',
-                    department: null
-                }
-            });
-        }
-    }
-    get value() {
-        const result = {
-            username: this.form.value.emailStep.email,
-            password: this.form.value.passwordStep.password,
-            account: new Account()
-        };
-        result.account.fromObject(this.form.value.detailsStep);
-        result.account.email = result.username;
-        return result;
-    }
-    get valid() {
-        return this.form.valid;
-    }
-    isEnd() {
-        return this.stepper.selectedIndex === 2;
-    }
-    isBeginning() {
-        return this.stepper.selectedIndex === 0;
-    }
-    slidePrev() {
-        return this.stepper.previous();
-    }
-    slideNext(event) {
-        if (event) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        return this.stepper.next();
-    }
-    equalsValidator(otherControlName) {
-        return function (c) {
-            if (c.parent && c.value !== c.parent.value[otherControlName]) {
-                return {
-                    equals: true
-                };
-            }
-            return null;
-        };
-    }
-    emailAvailability(accountService) {
-        return function (control) {
-            return timer(500).pipe(mergeMap(() => accountService.checkEmailAvailable(control.value)
-                .then(res => null)
-                .catch(err => {
-                console.error(err);
-                return { availability: true };
-            })));
-        };
-    }
-    cancel() {
-        this.onCancel.emit();
-    }
-    doSubmit(event) {
-        if (this.form.invalid)
-            return;
-        this.sending = true;
-        this.onSubmit.emit(this.value);
-    }
-    markAsTouched() {
-        this.form.markAsTouched();
-    }
-    disable() {
-        this.form.disable();
-    }
-    enable() {
-        this.form.enable();
-    }
-}
-RegisterForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterForm, deps: [{ token: AccountService }, { token: AccountValidatorService }, { token: i1$2.UntypedFormBuilder }, { token: ENVIRONMENT }, { token: LocalSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-RegisterForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RegisterForm, selector: "app-register-form", outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{'REGISTER.STEP_EMAIL'|translate}}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <input matInput\n               [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.EMAIL'|translate\"\n          formControlName=\"email\" autocomplete=\"off\" required>\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\">\n          <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>REGISTER.ERROR.EMAIL_ALREADY_REGISTERED</mat-error>\n\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <input matInput autocomplete=\"off\" matFormFieldControl [placeholder]=\"'REGISTER.CONFIRM_EMAIL'|translate\" formControlName=\"confirmEmail\">\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_PASSWORD'|translate}}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.PASSWORD'|translate\"\n               formControlName=\"password\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showPwd ? 'text' : 'password'\"\n               required>\n        <button matSuffix mat-icon-button\n                type=\"button\"\n                (click)=\"showPwd = !showPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 8} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'REGISTER.CONFIRM_PASSWORD'|translate\"\n               formControlName=\"confirmPassword\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showConfirmPwd ? 'text' : 'password'\"\n               required>\n        <button mat-icon-button matSuffix\n                (click)=\"showConfirmPwd = !showConfirmPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showConfirmPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n\n    <form [formGroup]=\"forms[2]\" (ngSubmit)=\"doSubmit($event)\" class=\"form-container ion-padding\" (keyup.enter)=\"doSubmit()\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_USER_DETAILS'|translate}}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.LAST_NAME'|translate\" formControlName=\"lastName\" autocomplete=\"section-blue family-name\"\n          required>\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.FIRST_NAME'|translate\" formControlName=\"firstName\" autocomplete=\"section-blue given-name\"\n          required>\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field *ngFor=\"let field of additionalFields\"\n                      [definition]=\"field\"\n                      [formControlName]=\"field.key\"\n                      [required]=\"true\">\n      </app-form-field>\n\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i12$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i12$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterForm, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-register-form', template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{'REGISTER.STEP_EMAIL'|translate}}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <input matInput\n               [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.EMAIL'|translate\"\n          formControlName=\"email\" autocomplete=\"off\" required>\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\">\n          <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>REGISTER.ERROR.EMAIL_ALREADY_REGISTERED</mat-error>\n\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <input matInput autocomplete=\"off\" matFormFieldControl [placeholder]=\"'REGISTER.CONFIRM_EMAIL'|translate\" formControlName=\"confirmEmail\">\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_PASSWORD'|translate}}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.PASSWORD'|translate\"\n               formControlName=\"password\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showPwd ? 'text' : 'password'\"\n               required>\n        <button matSuffix mat-icon-button\n                type=\"button\"\n                (click)=\"showPwd = !showPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 8} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'REGISTER.CONFIRM_PASSWORD'|translate\"\n               formControlName=\"confirmPassword\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showConfirmPwd ? 'text' : 'password'\"\n               required>\n        <button mat-icon-button matSuffix\n                (click)=\"showConfirmPwd = !showConfirmPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showConfirmPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n\n    <form [formGroup]=\"forms[2]\" (ngSubmit)=\"doSubmit($event)\" class=\"form-container ion-padding\" (keyup.enter)=\"doSubmit()\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_USER_DETAILS'|translate}}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.LAST_NAME'|translate\" formControlName=\"lastName\" autocomplete=\"section-blue family-name\"\n          required>\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.FIRST_NAME'|translate\" formControlName=\"firstName\" autocomplete=\"section-blue given-name\"\n          required>\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field *ngFor=\"let field of additionalFields\"\n                      [definition]=\"field\"\n                      [formControlName]=\"field.key\"\n                      [required]=\"true\">\n      </app-form-field>\n\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: AccountService }, { type: AccountValidatorService }, { type: i1$2.UntypedFormBuilder }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [ENVIRONMENT]
-                    }] }, { type: LocalSettingsService }];
-    }, propDecorators: { stepper: [{
-                type: ViewChild,
-                args: ['stepper', { static: true }]
-            }], onCancel: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-class RegisterModal {
-    constructor(accountService, viewCtrl) {
-        this.accountService = accountService;
-        this.viewCtrl = viewCtrl;
-        this.sending = false;
-    }
-    cancel() {
-        console.debug('[register] cancelled');
-        this.viewCtrl.dismiss();
-    }
-    doSubmit(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.form.form.disabled || this.sending)
-                return; // Skip
-            if (!this.form.valid || !this.form.isEnd()) {
-                this.form.markAsTouched();
-                return;
-            }
-            this.sending = true;
-            const data = this.form.value;
-            this.form.disable();
-            try {
-                console.debug('[register] Sending registration to server...', data);
-                const res = yield this.accountService.register(data);
-                console.debug('[register] Account registered!');
-                yield this.viewCtrl.dismiss();
-            }
-            catch (err) {
-                this.form.error = err && err.message || err;
-                this.form.enable();
-            }
-            finally {
-                this.sending = false;
-            }
-        });
-    }
-}
-RegisterModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterModal, deps: [{ token: AccountService }, { token: i2.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-RegisterModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RegisterModal, selector: "app-register-modal", viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"form.isBeginning()\" (click)=\"cancel()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"!form.isBeginning()\" (click)=\"form.slidePrev()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title translate>REGISTER.TITLE</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-spinner *ngIf=\"sending\"></ion-spinner>\n\n      <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <ion-button *ngIf=\"form.isEnd() && !sending\" (click)=\"doSubmit()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"send\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-register-form #form\n                     (onSubmit)=\"doSubmit()\"\n                     (onCancel)=\"cancel()\">\n  </app-register-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <!-- buttons -->\n  <ion-toolbar>\n\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button *ngIf=\"form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"form.slidePrev()\" [disabled]=\"sending\">\n          <ion-icon slot=\"start\" name=\"arrow-back\"></ion-icon>\n          <ion-label translate>COMMON.BTN_BACK</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" fill=\"solid\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_NEXT</ion-label>\n          <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n        </ion-button>\n\n        <ion-button *ngIf=\"form.isEnd()\" (click)=\"doSubmit()\" fill=\"solid\" [disabled]=\"sending\" color=\"tertiary\">\n          <span translate>COMMON.BTN_SEND</span>\n          <ion-icon slot=\"end\" name=\"send\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: RegisterForm, selector: "app-register-form", outputs: ["onCancel", "onSubmit"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterModal, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-register-modal', template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"form.isBeginning()\" (click)=\"cancel()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"!form.isBeginning()\" (click)=\"form.slidePrev()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title translate>REGISTER.TITLE</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-spinner *ngIf=\"sending\"></ion-spinner>\n\n      <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <ion-button *ngIf=\"form.isEnd() && !sending\" (click)=\"doSubmit()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"send\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-register-form #form\n                     (onSubmit)=\"doSubmit()\"\n                     (onCancel)=\"cancel()\">\n  </app-register-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <!-- buttons -->\n  <ion-toolbar>\n\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button *ngIf=\"form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"form.slidePrev()\" [disabled]=\"sending\">\n          <ion-icon slot=\"start\" name=\"arrow-back\"></ion-icon>\n          <ion-label translate>COMMON.BTN_BACK</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" fill=\"solid\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_NEXT</ion-label>\n          <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n        </ion-button>\n\n        <ion-button *ngIf=\"form.isEnd()\" (click)=\"doSubmit()\" fill=\"solid\" [disabled]=\"sending\" color=\"tertiary\">\n          <span translate>COMMON.BTN_SEND</span>\n          <ion-icon slot=\"end\" name=\"send\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n" }]
-        }], ctorParameters: function () { return [{ type: AccountService }, { type: i2.ModalController }]; }, propDecorators: { form: [{
-                type: ViewChild,
-                args: ['form', { static: true }]
-            }] } });
-
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-class AppForm {
-    constructor(injector, form) {
-        this._subscription = new Subscription();
-        this._enable = false;
-        this.i18nFieldPrefix = null;
-        this.destroySubject = new Subject();
-        this.readySubject = new BehaviorSubject(false);
-        this.loadingSubject = new BehaviorSubject(true);
-        this.errorSubject = new BehaviorSubject(undefined);
-        this.debug = false;
-        this.onCancel = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        if (form)
-            this.setForm(form);
-        this.translate = injector.get(TranslateService);
-        this.settings = injector.get(LocalSettingsService);
-        this.errorTranslator = injector.get(FormErrorTranslator);
-        this.autocompleteHelper = new MatAutocompleteConfigHolder(this.settings && {
-            getUserAttributes: (a, b) => this.settings.getFieldDisplayAttributes(a, b)
-        });
-        this.autocompleteFields = this.autocompleteHelper.fields;
-    }
-    /**
-     *  @deprecated
-     */
-    set _loading(value) {
-        this.loadingSubject.next(value);
-    }
-    /**
-     *  @deprecated
-     */
-    get _loading() {
-        return this.loadingSubject.value;
-    }
-    /**
-     *  @deprecated
-     */
-    get _$ready() {
-        return this.readySubject;
-    }
-    /**
-     *  @deprecated
-     */
-    get _$loading() {
-        return this.loadingSubject;
-    }
-    get error() {
-        return this.errorSubject.value;
-    }
-    set error(error) {
-        this.setError(error);
-    }
-    get loading() {
-        return this.loadingSubject.value;
-    }
-    get loaded() {
-        return !this.loadingSubject.value;
-    }
-    get value() {
-        return this.form.value;
-    }
-    set value(data) {
-        this.setValue(data);
-    }
-    get dirty() {
-        var _a;
-        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.dirty) || false;
-    }
-    get invalid() {
-        return !this.form || this.form.invalid;
-    }
-    get pending() {
-        return !this.form || (this.form.dirty && this.form.pending);
-    }
-    get valid() {
-        var _a;
-        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
-    }
-    get empty() {
-        return !this.form || (!this.form.dirty && !this.form.touched);
-    }
-    get touched() {
-        var _a;
-        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.touched) || false;
-    }
-    get untouched() {
-        return !this.form || this.form.untouched;
-    }
-    get enabled() {
-        return this._enable;
-    }
-    get disabled() {
-        return !this._enable;
-    }
-    disable(opts) {
-        var _a;
-        (_a = this.form) === null || _a === void 0 ? void 0 : _a.disable(opts);
-        if (this._enable) {
-            this._enable = false;
-            if (!opts || opts.emitEvent !== true)
-                this.markForCheck();
-        }
-    }
-    enable(opts) {
-        var _a;
-        (_a = this.form) === null || _a === void 0 ? void 0 : _a.enable(opts);
-        if (!this._enable) {
-            this._enable = true;
-            if (!opts || opts.emitEvent !== true)
-                this.markForCheck();
-        }
-    }
-    get destroyed() {
-        var _a;
-        return ((_a = this.destroySubject) === null || _a === void 0 ? void 0 : _a.closed) !== false;
-    }
-    set form(value) {
-        this.setForm(value);
-    }
-    get form() {
-        return this._form;
-    }
-    ngOnInit() {
-        this._enable ? this.enable() : this.disable();
-        this.errorTranslatorOptions = this.errorTranslatorOptions || {
-            controlPathTranslator: this
-        };
-    }
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
-        this.readySubject.unsubscribe();
-        this.loadingSubject.unsubscribe();
-        this.errorSubject.unsubscribe();
-        this.onCancel.unsubscribe();
-        this.onSubmit.unsubscribe();
-        this.destroySubject.next();
-        this.destroySubject.unsubscribe();
-    }
-    cancel() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.onCancel.emit();
-        });
-    }
-    /**
-     *
-     * @param event
-     * @param opts allow to skip validation check, using {checkValid: false}
-     */
-    doSubmit(event, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._form) {
-                this.markAllAsTouched({ emitEvent: true });
-                return;
-            }
-            // Check if valid (if not disabled)
-            if ((!opts || opts.checkValid !== false) && !this._form.valid) {
-                // Wait validation end
-                yield AppFormUtils.waitWhilePending(this._form);
-                // Form is invalid: exit (+ log if debug)
-                if (this._form.invalid) {
-                    this.markAllAsTouched({ emitEvent: true });
-                    if (this.debug)
-                        AppFormUtils.logFormErrors(this._form);
-                    return;
-                }
-            }
-            // Emit event
-            this.onSubmit.emit(event);
-        });
-    }
-    setForm(form) {
-        if (this._form !== form) {
-            this._form = form;
-            this._subscription.add(this._form.statusChanges.subscribe(status => this.markForCheck()));
-        }
-    }
-    setValue(data, opts) {
-        if (!data) {
-            console.warn('[form] Trying to set an empty value to form. Skipping');
-            return;
-        }
-        // DEBUG
-        //if (this.debug) console.debug('[form] Updating form (using entity)', data);
-        // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
-        AppFormUtils.copyEntity2Form(data, this.form, Object.assign({ emitEvent: false, onlySelf: true }, opts));
-        if (!opts || opts.emitEvent !== true) {
-            this.markForCheck();
-        }
+            mainProfile: [data && (data.mainProfile || PersonUtils.getMainProfile(data.profiles)) || 'GUEST', Validators.required],
+            statusId: [data && data.statusId || StatusIds.TEMPORARY, Validators.required],
+            pubkey: [data && data.pubkey || null, Validators.compose([Validators.required, SharedValidators.pubkey])]
+        };
+        // Add additional fields
+        this.accountService.additionalFields.forEach(field => {
+            //console.debug("[register-form] Add additional field {" + field.name + "} to form", field);
+            formDef[field.key] = [data && data[field.key] || null, this.getValidators(field)];
+        });
+        return formDef;
     }
-    reset(data, opts) {
-        if (data) {
-            if (this.debug)
-                console.debug('[form] Resetting form (using entity)', data);
-            // Convert object to json, then apply it to form (e.g. convert 'undefined' into 'null')
-            const json = AppFormUtils.getFormValueFromEntity(data, this.form);
-            this.form.reset(json, { emitEvent: false, onlySelf: true });
+    getValidators(field) {
+        const validatorFns = [];
+        if (field.extra && field.extra.account && field.extra.account.required) {
+            validatorFns.push(Validators.required);
         }
-        else {
-            this.form.reset(null, { emitEvent: false, onlySelf: true });
+        if (field.type === 'entity') {
+            validatorFns.push(SharedValidators.entity);
         }
-        if (!opts || opts.emitEvent !== true)
-            this.markForCheck();
+        return validatorFns.length ? Validators.compose(validatorFns) : validatorFns.length === 1 ? validatorFns[0] : undefined;
     }
-    markAsPristine(opts) {
-        this.form.markAsPristine(opts);
-        if (!opts || opts.emitEvent !== false)
-            this.markForCheck();
+}
+AccountValidatorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AccountValidatorService, deps: [{ token: i1$2.UntypedFormBuilder }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable });
+AccountValidatorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AccountValidatorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AccountValidatorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: AccountService }]; } });
+
+class RegisterForm {
+    constructor(accountService, accountValidatorService, formBuilder, environment, settings) {
+        this.accountService = accountService;
+        this.accountValidatorService = accountValidatorService;
+        this.formBuilder = formBuilder;
+        this.environment = environment;
+        this.settings = settings;
+        this.debug = false;
+        this.subscriptions = [];
+        this.sending = false;
+        this.showPwd = false;
+        this.showConfirmPwd = false;
+        this.onCancel = new EventEmitter();
+        this.onSubmit = new EventEmitter();
+        this.referentialToString = referentialToString;
+        this.forms = [];
+        // Email form
+        this.forms.push(formBuilder.group({
+            email: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.email]), this.emailAvailability(this.accountService)),
+            confirmEmail: new UntypedFormControl(null, Validators.compose([Validators.required, this.equalsValidator('email')]))
+        }));
+        // Password form
+        this.forms.push(formBuilder.group({
+            password: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(8)])),
+            confirmPassword: new UntypedFormControl(null, Validators.compose([Validators.required, this.equalsValidator('password')]))
+        }));
+        // Detail form
+        const formDetailDef = {
+            lastName: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(2)])),
+            firstName: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(2)]))
+        };
+        // Prepare autocomplete settings
+        this.autocompleteHelper = new MatAutocompleteConfigHolder(settings && {
+            getUserAttributes: (a, b) => settings.getFieldDisplayAttributes(a, b)
+        });
+        // Add additional fields to details form
+        this.additionalFields = this.accountService.additionalFields
+            // Keep only required fields
+            .filter(field => field.extra && field.extra.registration && field.extra.registration.required);
+        this.additionalFields.forEach(field => {
+            //if (this.debug) console.debug("[register-form] Add additional field {" + field.name + "} to form", field);
+            formDetailDef[field.key] = new UntypedFormControl(null, this.accountValidatorService.getValidators(field));
+            if (field.type === 'entity') {
+                field.autocomplete = this.autocompleteHelper.add(field.key, field.autocomplete);
+            }
+        });
+        this.forms.push(formBuilder.group(formDetailDef));
+        this.form = formBuilder.group({
+            emailStep: this.forms[0],
+            passwordStep: this.forms[1],
+            detailsStep: this.forms[2]
+        });
     }
-    markAsUntouched(opts) {
-        this.form.markAsUntouched(opts);
-        if (!opts || opts.emitEvent !== false)
-            this.markForCheck();
+    ngOnInit() {
+        // For DEV only ------------------------
+        if (!this.environment.production) {
+            this.form.setValue({
+                emailStep: {
+                    email: 'contact@e-is.pro',
+                    confirmEmail: 'contact@e-is.pro'
+                },
+                passwordStep: {
+                    password: 'contactera',
+                    confirmPassword: 'contactera'
+                },
+                detailsStep: {
+                    lastName: 'Lavenier 2',
+                    firstName: 'Benoit',
+                    department: null
+                }
+            });
+        }
     }
-    /**
-     * @deprecated prefer to use markAllAsTouched()
-     * @param opts
-     */
-    markAsTouched(opts) {
-        // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
-        console.warn('TODO: Replace this call by markAllAsTouched() - because of changes in ngx-components >= 0.16.0');
-        AppFormUtils.markAsTouched(this.form, opts);
-        if (!opts || opts.emitEvent !== false)
-            this.markForCheck();
+    get value() {
+        const result = {
+            username: this.form.value.emailStep.email,
+            password: this.form.value.passwordStep.password,
+            account: new Account()
+        };
+        result.account.fromObject(this.form.value.detailsStep);
+        result.account.email = result.username;
+        return result;
     }
-    markAllAsTouched(opts) {
-        // this.form.markAllAsTouched() // This is not working well (e.g. in TripForm)
-        AppFormUtils.markAllAsTouched(this.form, opts);
-        if (!opts || opts.emitEvent !== false)
-            this.markForCheck();
+    get valid() {
+        return this.form.valid;
     }
-    markAsDirty(opts) {
-        this.form.markAsDirty(opts);
-        if (!opts || opts.emitEvent !== false)
-            this.markForCheck();
+    isEnd() {
+        return this.stepper.selectedIndex === 2;
     }
-    markAsLoading(opts) {
-        this.setLoading(true, opts);
+    isBeginning() {
+        return this.stepper.selectedIndex === 0;
     }
-    markAsLoaded(opts) {
-        this.setLoading(false, opts);
+    slidePrev() {
+        return this.stepper.previous();
     }
-    markAsReady(opts) {
-        if (this.readySubject.value !== true) {
-            this.readySubject.next(true);
-            // If subclasses implements OnReady
-            if (typeof this['ngOnReady'] === 'function') {
-                this.ngOnReady();
-            }
+    slideNext(event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
         }
+        return this.stepper.next();
     }
-    /**
-     * Wait form is ready
-     * @param opts
-     */
-    ready(opts) {
-        if (this.readySubject.value)
-            return Promise.resolve();
-        return waitForTrue(this.readySubject, opts);
+    equalsValidator(otherControlName) {
+        return function (c) {
+            if (c.parent && c.value !== c.parent.value[otherControlName]) {
+                return {
+                    equals: true
+                };
+            }
+            return null;
+        };
     }
-    /**
-     * Wait form is not busy (=loaded)
-     * @param opts
-     */
-    waitIdle(opts) {
-        if (!this.loadingSubject.value)
-            return Promise.resolve();
-        return waitForFalse(this.loadingSubject, opts);
+    emailAvailability(accountService) {
+        return function (control) {
+            return timer(500).pipe(mergeMap(() => accountService.checkEmailAvailable(control.value)
+                .then(res => null)
+                .catch(err => {
+                console.error(err);
+                return { availability: true };
+            })));
+        };
     }
-    updateValueAndValidity(opts) {
-        AppFormUtils.updateValueAndValidity(this.form, opts);
-        if (!opts || opts.emitEvent !== false)
-            this.markForCheck();
+    cancel() {
+        this.onCancel.emit();
     }
-    translateControlPath(path) {
-        var _a;
-        const i18nFieldName = this.getI18nFieldName(path);
-        return ((_a = this.translate) === null || _a === void 0 ? void 0 : _a.instant(i18nFieldName)) || i18nFieldName;
+    doSubmit(event) {
+        if (this.form.invalid)
+            return;
+        this.sending = true;
+        this.onSubmit.emit(this.value);
     }
-    /* -- protected methods -- */
-    getFormError(form, opts) {
-        if (!form || !this.errorTranslator)
-            return undefined;
-        return this.errorTranslator.translateFormErrors(this.form, Object.assign({ controlPathTranslator: this }, opts));
+    markAsTouched() {
+        this.form.markAsTouched();
     }
-    getI18nFieldName(path) {
-        return (this.i18nFieldPrefix || '') + changeCaseToUnderscore(path).toUpperCase();
+    disable() {
+        this.form.disable();
     }
-    registerSubscription(sub) {
-        this._subscription.add(sub);
+    enable() {
+        this.form.enable();
     }
-    unregisterSubscription(sub) {
-        this._subscription.remove(sub);
+}
+RegisterForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterForm, deps: [{ token: AccountService }, { token: AccountValidatorService }, { token: i1$2.UntypedFormBuilder }, { token: ENVIRONMENT }, { token: LocalSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+RegisterForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RegisterForm, selector: "app-register-form", outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{'REGISTER.STEP_EMAIL'|translate}}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <input matInput\n               [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.EMAIL'|translate\"\n          formControlName=\"email\" autocomplete=\"off\" required>\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\">\n          <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>REGISTER.ERROR.EMAIL_ALREADY_REGISTERED</mat-error>\n\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <input matInput autocomplete=\"off\" matFormFieldControl [placeholder]=\"'REGISTER.CONFIRM_EMAIL'|translate\" formControlName=\"confirmEmail\">\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_PASSWORD'|translate}}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.PASSWORD'|translate\"\n               formControlName=\"password\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showPwd ? 'text' : 'password'\"\n               required>\n        <button matSuffix mat-icon-button\n                type=\"button\"\n                (click)=\"showPwd = !showPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 8} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'REGISTER.CONFIRM_PASSWORD'|translate\"\n               formControlName=\"confirmPassword\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showConfirmPwd ? 'text' : 'password'\"\n               required>\n        <button mat-icon-button matSuffix\n                (click)=\"showConfirmPwd = !showConfirmPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showConfirmPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n\n    <form [formGroup]=\"forms[2]\" (ngSubmit)=\"doSubmit($event)\" class=\"form-container ion-padding\" (keyup.enter)=\"doSubmit()\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_USER_DETAILS'|translate}}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.LAST_NAME'|translate\" formControlName=\"lastName\" autocomplete=\"section-blue family-name\"\n          required>\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.FIRST_NAME'|translate\" formControlName=\"firstName\" autocomplete=\"section-blue given-name\"\n          required>\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field *ngFor=\"let field of additionalFields\"\n                      [definition]=\"field\"\n                      [formControlName]=\"field.key\"\n                      [required]=\"true\">\n      </app-form-field>\n\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i12$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i12$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-register-form', template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{'REGISTER.STEP_EMAIL'|translate}}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <input matInput\n               [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.EMAIL'|translate\"\n          formControlName=\"email\" autocomplete=\"off\" required>\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\">\n          <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>REGISTER.ERROR.EMAIL_ALREADY_REGISTERED</mat-error>\n\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <input matInput autocomplete=\"off\" matFormFieldControl [placeholder]=\"'REGISTER.CONFIRM_EMAIL'|translate\" formControlName=\"confirmEmail\">\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_PASSWORD'|translate}}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.PASSWORD'|translate\"\n               formControlName=\"password\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showPwd ? 'text' : 'password'\"\n               required>\n        <button matSuffix mat-icon-button\n                type=\"button\"\n                (click)=\"showPwd = !showPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 8} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'REGISTER.CONFIRM_PASSWORD'|translate\"\n               formControlName=\"confirmPassword\"\n               autocomplete=\"section-red new-password\"\n               [type]=\"showConfirmPwd ? 'text' : 'password'\"\n               required>\n        <button mat-icon-button matSuffix\n                (click)=\"showConfirmPwd = !showConfirmPwd\"\n                tabindex=\"-1\">\n          <mat-icon>{{showConfirmPwd ? 'visibility_off' : 'visibility'}}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n\n    </form>\n  </mat-step>\n\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n\n    <form [formGroup]=\"forms[2]\" (ngSubmit)=\"doSubmit($event)\" class=\"form-container ion-padding\" (keyup.enter)=\"doSubmit()\">\n\n      <ng-template matStepLabel>{{'REGISTER.STEP_USER_DETAILS'|translate}}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.LAST_NAME'|translate\" formControlName=\"lastName\" autocomplete=\"section-blue family-name\"\n          required>\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <input matInput [placeholder]=\"'USER.FIRST_NAME'|translate\" formControlName=\"firstName\" autocomplete=\"section-blue given-name\"\n          required>\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field *ngFor=\"let field of additionalFields\"\n                      [definition]=\"field\"\n                      [formControlName]=\"field.key\"\n                      [required]=\"true\">\n      </app-form-field>\n\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: AccountService }, { type: AccountValidatorService }, { type: i1$2.UntypedFormBuilder }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ENVIRONMENT]
+                    }] }, { type: LocalSettingsService }];
+    }, propDecorators: { stepper: [{
+                type: ViewChild,
+                args: ['stepper', { static: true }]
+            }], onCancel: [{
+                type: Output
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
+class RegisterModal {
+    constructor(accountService, viewCtrl) {
+        this.accountService = accountService;
+        this.viewCtrl = viewCtrl;
+        this.sending = false;
     }
-    registerAutocompleteField(fieldName, opts) {
-        return this.autocompleteHelper.add(fieldName, opts);
+    cancel() {
+        console.debug('[register] cancelled');
+        this.viewCtrl.dismiss();
     }
-    setError(value, opts) {
-        if (this.errorSubject.value !== value) {
-            this.errorSubject.next(value);
-            if (!opts || opts.emitEvent !== false) {
-                this.markForCheck();
+    doSubmit(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.form.form.disabled || this.sending)
+                return; // Skip
+            if (!this.form.valid || !this.form.isEnd()) {
+                this.form.markAsTouched();
+                return;
             }
-        }
-    }
-    markForCheck() {
-        // Should be overwritten by subclasses
-        console.warn('markForCheck() has been called, but is not overwritten by component ' + this.constructor.name);
-    }
-    /* -- private function -- */
-    setLoading(value, opts) {
-        if (this.loadingSubject.value !== value) {
-            this.loadingSubject.next(value);
-            if (!opts || opts.emitEvent !== false) {
-                this.markForCheck();
+            this.sending = true;
+            const data = this.form.value;
+            this.form.disable();
+            try {
+                console.debug('[register] Sending registration to server...', data);
+                const res = yield this.accountService.register(data);
+                console.debug('[register] Account registered!');
+                yield this.viewCtrl.dismiss();
             }
-        }
+            catch (err) {
+                this.form.error = err && err.message || err;
+                this.form.enable();
+            }
+            finally {
+                this.sending = false;
+            }
+        });
     }
 }
-AppForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppForm, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormGroup }], target: i0.ɵɵFactoryTarget.Directive });
-AppForm.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: AppForm, inputs: { debug: "debug", tabindex: "tabindex", errorTranslatorOptions: "errorTranslatorOptions", form: "form" }, outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppForm, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$2.UntypedFormGroup }]; }, propDecorators: { debug: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], errorTranslatorOptions: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], onCancel: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
+RegisterModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterModal, deps: [{ token: AccountService }, { token: i2.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+RegisterModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RegisterModal, selector: "app-register-modal", viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"form.isBeginning()\" (click)=\"cancel()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"!form.isBeginning()\" (click)=\"form.slidePrev()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title translate>REGISTER.TITLE</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-spinner *ngIf=\"sending\"></ion-spinner>\n\n      <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <ion-button *ngIf=\"form.isEnd() && !sending\" (click)=\"doSubmit()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"send\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-register-form #form\n                     (onSubmit)=\"doSubmit()\"\n                     (onCancel)=\"cancel()\">\n  </app-register-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <!-- buttons -->\n  <ion-toolbar>\n\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button *ngIf=\"form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"form.slidePrev()\" [disabled]=\"sending\">\n          <ion-icon slot=\"start\" name=\"arrow-back\"></ion-icon>\n          <ion-label translate>COMMON.BTN_BACK</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" fill=\"solid\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_NEXT</ion-label>\n          <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n        </ion-button>\n\n        <ion-button *ngIf=\"form.isEnd()\" (click)=\"doSubmit()\" fill=\"solid\" [disabled]=\"sending\" color=\"tertiary\">\n          <span translate>COMMON.BTN_SEND</span>\n          <ion-icon slot=\"end\" name=\"send\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: RegisterForm, selector: "app-register-form", outputs: ["onCancel", "onSubmit"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RegisterModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-register-modal', template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"form.isBeginning()\" (click)=\"cancel()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"!form.isBeginning()\" (click)=\"form.slidePrev()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title translate>REGISTER.TITLE</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-spinner *ngIf=\"sending\"></ion-spinner>\n\n      <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <ion-button *ngIf=\"form.isEnd() && !sending\" (click)=\"doSubmit()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"send\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-register-form #form\n                     (onSubmit)=\"doSubmit()\"\n                     (onCancel)=\"cancel()\">\n  </app-register-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <!-- buttons -->\n  <ion-toolbar>\n\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button *ngIf=\"form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"form.slidePrev()\" [disabled]=\"sending\">\n          <ion-icon slot=\"start\" name=\"arrow-back\"></ion-icon>\n          <ion-label translate>COMMON.BTN_BACK</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" fill=\"solid\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_NEXT</ion-label>\n          <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n        </ion-button>\n\n        <ion-button *ngIf=\"form.isEnd()\" (click)=\"doSubmit()\" fill=\"solid\" [disabled]=\"sending\" color=\"tertiary\">\n          <span translate>COMMON.BTN_SEND</span>\n          <ion-icon slot=\"end\" name=\"send\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n\n\n  </ion-toolbar>\n</ion-footer>\n" }]
+        }], ctorParameters: function () { return [{ type: AccountService }, { type: i2.ModalController }]; }, propDecorators: { form: [{
+                type: ViewChild,
+                args: ['form', { static: true }]
             }] } });
 
 class AppAuthForm extends AppForm {
@@ -23118,8 +23343,8 @@ class SettingsPage extends AppForm {
     }
     showSelectPeerModal(opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            const peer = yield this.network.showSelectPeerModal(opts);
-            if (peer && peer.url) {
+            const peer = yield this.network.showSelectPeerModal(Object.assign({ showSetManuallyButton: true }, opts));
+            if (peer === null || peer === void 0 ? void 0 : peer.url) {
                 const control = this.form.get('peerUrl');
                 control.setValue(peer.url, { emitEvent: true, onlySelf: false });
                 control.markAsDirty({ onlySelf: false });
@@ -23176,12 +23401,12 @@ class SettingsPage extends AppForm {
 SettingsPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SettingsPage, deps: [{ token: i0.Injector }, { token: PlatformService }, { token: i1$5.Router }, { token: LocalSettingsValidatorService }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: APP_LOCALES }], target: i0.ɵɵFactoryTarget.Component });
 SettingsPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SettingsPage, selector: "page-settings", providers: [
         { provide: ValidatorService, useExisting: LocalSettingsValidatorService },
-    ], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <ion-label>\n      <mat-icon><ion-icon slot=\"start\" name=\"refresh\"></ion-icon></mat-icon>&nbsp;\n      <span translate>COMMON.BTN_RESET</span>\n    </ion-label>\n  </button>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col class=\"ion-padding\">\n\n          <!-- error -->\n          <ion-item *ngIf=\"error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n          </ion-item>\n\n          <p [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\" formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <ion-label>\n      <mat-icon><ion-icon slot=\"start\" name=\"refresh\"></ion-icon></mat-icon>&nbsp;\n      <span translate>COMMON.BTN_RESET</span>\n    </ion-label>\n  </button>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col class=\"ion-padding\">\n\n          <!-- error -->\n          <ion-item *ngIf=\"error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n          </ion-item>\n\n          <p [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\"\n                   formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SettingsPage, decorators: [{
             type: Component,
             args: [{ selector: 'page-settings', providers: [
                         { provide: ValidatorService, useExisting: LocalSettingsValidatorService },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <ion-label>\n      <mat-icon><ion-icon slot=\"start\" name=\"refresh\"></ion-icon></mat-icon>&nbsp;\n      <span translate>COMMON.BTN_RESET</span>\n    </ion-label>\n  </button>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col class=\"ion-padding\">\n\n          <!-- error -->\n          <ion-item *ngIf=\"error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n          </ion-item>\n\n          <p [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\" formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <ion-label>\n      <mat-icon><ion-icon slot=\"start\" name=\"refresh\"></ion-icon></mat-icon>&nbsp;\n      <span translate>COMMON.BTN_RESET</span>\n    </ion-label>\n  </button>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col class=\"ion-padding\">\n\n          <!-- error -->\n          <ion-item *ngIf=\"error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n          </ion-item>\n\n          <p [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\"\n                   formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: PlatformService }, { type: i1$5.Router }, { type: LocalSettingsValidatorService }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: AccountService }, { type: LocalSettingsService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -23644,197 +23869,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 }]
         }] });
 
-class TextForm extends AppForm {
-    constructor(injector, cd, formBuilder) {
-        super(injector);
-        this.injector = injector;
-        this.cd = cd;
-        this.formBuilder = formBuilder;
-        this.showError = true;
-        this.multiline = true;
-        this.autoHeight = false;
-        this.maxLength = 2000;
-        this.autofocus = false;
-        this.textAreaChanges = new EventEmitter();
-    }
-    ngOnInit() {
-        const form = this.formBuilder.group({
-            text: [null, isNotNil(this.maxLength)
-                    ? Validators.maxLength(this.maxLength)
-                    : undefined
-            ]
-        });
-        this.control = form.get('text');
-        this.setForm(form);
-        super.ngOnInit();
-    }
-    textAreaChanged(event) {
-        this.textAreaChanges.emit(this.control.value);
-    }
-    containerResize() {
-        var _a;
-        (_a = this.autosizeDirective) === null || _a === void 0 ? void 0 : _a.resizeToFitContent(true);
-    }
-    focusInput() {
-        if (this.textArea)
-            focusInput(this.textArea);
-        if (this.textInput)
-            focusInput(this.textInput);
-    }
-    markForCheck() {
-        this.cd.markForCheck();
-    }
-}
-TextForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-TextForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextForm, selector: "app-text-form", inputs: { showError: "showError", placeholder: "placeholder", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus" }, outputs: { textAreaChanges: "textAreaChanges" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "autosizeDirective", first: true, predicate: CdkTextareaAutosize, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea.fixed-height{height:11.5em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextForm, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-text-form', template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n  <mat-form-field *ngIf=\"multiline; else monoline\">\n    <textarea\n      #textArea\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"control.disabled\"\n      [class.fixed-height]=\"!autoHeight\"\n      [cdkTextareaAutosize]=\"autoHeight\"\n      (keyup)=\"textAreaChanged($event)\"\n      (keydown.control.enter)=\"onSubmit.emit($event)\"\n      [autofocus]=\"autofocus\"\n    ></textarea>\n    <mat-error *ngIf=\"control.hasError('maxlength')\">\n      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n    </mat-error>\n    <mat-hint *ngIf=\"maxLength\" align=\"end\">\n      {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n    </mat-hint>\n  </mat-form-field>\n  <ng-template #monoline>\n    <mat-form-field>\n      <input\n        #textInput\n        matInput\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"disabled\"\n        [appAutofocus]=\"autofocus\"\n        (keydown.control.enter)=\"onSubmit.emit($event)\"\n      />\n      <mat-error *ngIf=\"control.hasError('maxlength')\">\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: control.errors['maxlength'] }}\n      </mat-error>\n      <mat-hint *ngIf=\"maxLength\" align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n      </mat-hint>\n    </mat-form-field>\n  </ng-template>\n</form>\n", styles: ["textarea.fixed-height{height:11.5em}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.UntypedFormBuilder }]; }, propDecorators: { showError: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], multiline: [{
-                type: Input
-            }], autoHeight: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], autofocus: [{
-                type: Input
-            }], textAreaChanges: [{
-                type: Output
-            }], textArea: [{
-                type: ViewChild,
-                args: ['textArea']
-            }], textInput: [{
-                type: ViewChild,
-                args: ['textInput']
-            }], autosizeDirective: [{
-                type: ViewChild,
-                args: [CdkTextareaAutosize]
-            }] } });
-
-class TextPopover {
-    constructor(popoverController, translate) {
-        this.popoverController = popoverController;
-        this.translate = translate;
-        this.placeholder = '';
-        this.editing = true;
-        this.multiline = true;
-        this.maxLength = 2000;
-        this.autofocus = false;
-        this.subscription = new Subscription();
-    }
-    get disabled() {
-        return this.form.disabled;
-    }
-    get enabled() {
-        return this.form.enabled;
-    }
-    get valid() {
-        var _a;
-        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
-    }
-    get value() {
-        var _a;
-        return (_a = this.form) === null || _a === void 0 ? void 0 : _a.value.text;
-    }
-    ngOnInit() {
-        this.enable();
-    }
-    ngAfterViewInit() {
-        setTimeout(() => this.form.setValue({ text: this.text }), 0);
-    }
-    onValidate(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield waitWhilePending(this.form);
-            if (!this.valid) {
-                logFormErrors(this.form.control);
-                return;
-            }
-            try {
-                const value = this.value;
-                this.disable();
-                yield this.popoverController.dismiss(value);
-                this.form.error = null;
-            }
-            catch (err) {
-                this.form.error = (err && err.message) || err;
-                this.enable();
-            }
-        });
-    }
-    disable() {
-        this.form.disable();
-    }
-    enable() {
-        if (this.editing)
-            this.form.enable();
-    }
-    cancel() {
-        this.popoverController.dismiss();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-}
-TextPopover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextPopover, deps: [{ token: i2.PopoverController }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-TextPopover.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextPopover, selector: "app-text-popover", inputs: { text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", maxLength: "maxLength", autofocus: "autofocus" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "\n<ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autofocus]=\"editing && autofocus\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextPopover, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-text-popover', template: "\n<ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error|translate\"></ion-label>\n  </ion-item>\n\n  <app-text-form #form [placeholder]=\"placeholder\"\n                 [multiline]=\"multiline\"\n                 [maxLength]=\"maxLength\"\n                 [autofocus]=\"editing && autofocus\"\n                 (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n          [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
-        }], ctorParameters: function () { return [{ type: i2.PopoverController }, { type: i1$1.TranslateService }]; }, propDecorators: { form: [{
-                type: ViewChild,
-                args: ['form', { static: true }]
-            }], text: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], editing: [{
-                type: Input
-            }], multiline: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], autofocus: [{
-                type: Input
-            }] } });
-
-class AppTextPopoverModule {
-}
-AppTextPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AppTextPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, declarations: [
-        // Components
-        TextForm,
-        TextPopover
-    ], imports: [SharedModule, i1$1.TranslateModule], exports: [TranslateModule,
-        // Components
-        TextForm,
-        TextPopover] });
-AppTextPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, imports: [SharedModule,
-        TranslateModule.forChild(), TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppTextPopoverModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        SharedModule,
-                        TranslateModule.forChild()
-                    ],
-                    declarations: [
-                        // Components
-                        TextForm,
-                        TextPopover
-                    ],
-                    exports: [
-                        TranslateModule,
-                        // Components
-                        TextForm,
-                        TextPopover
-                    ]
-                }]
-        }] });
-
 class EntityMetadataComponent {
     constructor() {
         this.showRecorder = true;
@@ -33236,7 +33270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                     }] }];
     } });
 
-const moment = momentNamespace;
+const moment = momentImported;
 class UserEventTestingPage {
     constructor(userEventService, router, alertController, translateService) {
         this.userEventService = userEventService;
@@ -33578,5 +33612,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_STORAGE, APP_TESTING_PAGES, APP_USER_EVENT_SERVICE, AboutModal, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments, GalleryTestPage, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, Job, JobModule, JobProgression, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuOptions, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageService, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UsersPage, ZERO_PLACEHOLDER_CHAR, accountToString, adaptValueToControl, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isCapacitor, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$1 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, patchValueInArray, propertiesPathComparator, propertyComparator, propertyPathComparator, pushValueInArray, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_STORAGE, APP_TESTING_PAGES, APP_USER_EVENT_SERVICE, AboutModal, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments, GalleryTestPage, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, Job, JobModule, JobProgression, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuOptions, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageService, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UsersPage, ZERO_PLACEHOLDER_CHAR, accountToString, adaptValueToControl, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isCapacitor, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$1 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, patchValueInArray, propertiesPathComparator, propertyComparator, propertyPathComparator, pushValueInArray, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map