@sumaris-net/ngx-components 1.4.4 → 1.5.1

package/bundles/sumaris-net.ngx-components.umd.js

@@ -511,9 +511,7 @@
         return value.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
     }
     function removeDiacritics(text) {
-        return text.normalize('NFD')
-            //
-            .replace(/[\u0300-\u036f]/g, '');
+        return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
     }
     function suggestFromArray(items, value, opts) {
         var _this = this;
@@ -1268,7 +1266,6 @@
             this.debounceTime = null;
             this.i18nPrefix = 'REFERENTIAL.';
             this.noResultMessage = 'COMMON.NO_RESULT';
-            this.matAutocompletePosition = 'auto';
             this.multiple = false;
             this.itemSize = '48px';
             this.fetchMoreThreshold = '15%';
@@ -1435,6 +1432,7 @@
             this.debounceTime = toNumber(this.debounceTime, 250);
             this.highlightAccent = toBoolean(this.highlightAccent, false);
             this.suggestLengthThreshold = this.suggestLengthThreshold || 0;
+            this.matAutocompletePosition = this.matAutocompletePosition || (this.mobile && this.searchable ? 'above' : 'auto'); // On mobile, set position to above (because of bottom keyboard)
             // No suggestFn: filter on the given items
             if (!this.suggestFn) {
                 var suggestFromArrayFn_1 = function (value, filter) { return __awaiter(_this, void 0, void 0, function () {
@@ -1486,9 +1484,10 @@
             // Filter if not enough character
             operators.filter(function (value) { return value.length >= _this.suggestLengthThreshold; }), 
             // Wait a debounce time
-            operators.debounceTime(this.debounceTime), 
+            operators.debounceTime(this.debounceTime)
             // DEBUG
-            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Search text changes:', value); })), 
+            //tap((value) => console.debug(this.logPrefix + ' Search text changes:', value)),
+            ), 
             // Object set: use it (no distinctUntilChanged() pipe need)
             this.formControl.valueChanges
                 .pipe(operators.startWith(this.formControl.value), operators.filter(function (value) { return (_this.searchable && isNotNil(value) && typeof value === 'object'); }), operators.tap(function (value) {
@@ -1503,9 +1502,10 @@
                         _this.matInputText.nativeElement.value = _this.displayValue;
                     }
                 }
-            }), 
+            })
             // DEBUG
-            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Received an object value: ', value); })), 
+            //tap(value => console.debug(this.logPrefix + ' Received an object value: ', value))
+            ), 
             // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
             rxjs.merge(
             // Focus or click => Load all
@@ -1514,16 +1514,12 @@
             // On dropdown button click
             this.onDropButtonClick
                 .pipe(operators.filter(function (event) { return _this.enabled && _this.searchable && (!event || !event.defaultPrevented); }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; })), rxjs.merge(this.$inputItems, this._filter$)
-                .pipe(operators.filter(function (event) { return _this.enabled && _this.searchable; }), operators.map(function (_) { return _this.formControl.value; }), 
-            // DEBUG
-            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Received $inputItems or filter event: ', value); })))
+                .pipe(operators.filter(function (event) { return _this.enabled && _this.searchable; }), operators.map(function (_) { return _this.formControl.value; })))
                 .pipe(
             // If value is a string (and is not = '*'), filter if not enough character
             operators.filter(function (value) { return value === '*' || !(typeof value === 'string') || value.length >= _this.suggestLengthThreshold; }), 
             // Distinguish changes
-            operators.distinctUntilChanged(), 
-            // DEBUG
-            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Received update event: ', value); })))
+            operators.distinctUntilChanged()))
                 .pipe(
             // Suggest values
             operators.mergeMap(function (value) { return _this.suggest(value, _this.filter); }), 
@@ -1687,7 +1683,7 @@
             // If combo is empty, or if has content but should force to show panel on focus
             if (!hasContent || (this.showPanelOnFocus && this.showAllOnFocus)) {
                 // DEBUG
-                console.debug(this.logPrefix + ' Emit focus event');
+                //console.debug(this.logPrefix + ' Emit focus event');
                 this.onFocus.emit(event);
                 return true;
             }
@@ -12150,6 +12146,14 @@
             this._storageKey = ENTITIES_STORAGE_KEY_PREFIX + '#' + name;
             this._mapToLightEntity = this.createLightEntityMapFn(this.policy);
         }
+        Object.defineProperty(EntityStore.prototype, "length", {
+            get: function () {
+                var _a;
+                return ((_a = this._cache) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(EntityStore.prototype, "cache", {
             get: function () {
                 return this._cache;
@@ -12188,12 +12192,12 @@
         };
         EntityStore.prototype.load = function (id, opts) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (!(this._mapToLightEntity && (!opts || opts.fullLoad !== false))) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.loadFullEntity(id, opts)];
-                        case 1: return [2 /*return*/, _a.sent()];
+                        case 1: return [2 /*return*/, _b.sent()];
                         case 2: return [2 /*return*/, this.loadCachedEntity(id, opts)];
                     }
                 });
@@ -12233,20 +12237,20 @@
          */
         EntityStore.prototype.loadAll = function (variables, opts) {
             return __awaiter(this, void 0, void 0, function () {
-                var res, _a;
+                var res, _b;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             res = this.reduceAndSort(this._cache, variables);
                             if (!(this._mapToLightEntity && isNotEmptyArray(res.data) && (opts && opts.fullLoad === true))) return [3 /*break*/, 2];
                             // Load full entities, one by one
-                            _a = res;
+                            _b = res;
                             return [4 /*yield*/, chainPromises((res.data || []).map(function (e) { return function () { return _this.load(e.id); }; }))];
                         case 1:
                             // Load full entities, one by one
-                            _a.data = _b.sent();
-                            _b.label = 2;
+                            _b.data = _c.sent();
+                            _c.label = 2;
                         case 2: return [2 /*return*/, res];
                     }
                 });
@@ -12363,8 +12367,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var dirtyIndexes, entities;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             opts = Object.assign({ skipIfPristine: this.policy.skipNonLocalEntities }, opts);
                             // Skip is not dirty
@@ -12388,7 +12392,7 @@
                             return [4 /*yield*/, this.storage.remove(this._storageKey)];
                         case 1:
                             // Clean the local storage
-                            _a.sent();
+                            _b.sent();
                             return [3 /*break*/, 7];
                         case 2:
                             if (!this.isByIdMode) return [3 /*break*/, 5];
@@ -12396,7 +12400,7 @@
                             return [4 /*yield*/, this.storage.set(this.storageKeyById, entities.filter(isNotNil).map(function (e) { return e.id; }))];
                         case 3:
                             // Save ids
-                            _a.sent();
+                            _b.sent();
                             // Saved dirty entities
                             return [4 /*yield*/, Promise.all(dirtyIndexes
                                     .map(function (index) {
@@ -12406,15 +12410,15 @@
                                 }))];
                         case 4:
                             // Saved dirty entities
-                            _a.sent();
+                            _b.sent();
                             console.info("[entity-storage] Persisting " + dirtyIndexes.length + "/" + entities.length + " " + this.name + "(s)...");
                             return [3 /*break*/, 7];
                         case 5:
                             console.info("[entity-storage] Persisting " + entities.length + " " + this.name + "(s)...");
                             return [4 /*yield*/, this.storage.set(this._storageKey, entities)];
                         case 6:
-                            _a.sent();
-                            _a.label = 7;
+                            _b.sent();
+                            _b.label = 7;
                         case 7: return [2 /*return*/, entities.length];
                     }
                 });
@@ -12424,14 +12428,14 @@
             return __awaiter(this, void 0, void 0, function () {
                 var entities, res, values, ids, migration, oldKeysToClean, storageKeys, storageKeys, err_1;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0: return [4 /*yield*/, Promise.all([
                                 this.storage.get(this._storageKey),
                                 this.storage.get(this.storageKeyById)
                             ])];
                         case 1:
-                            res = _a.sent();
+                            res = _b.sent();
                             values = res[0] && Array.isArray(res[0]) ? res[0] : null;
                             ids = res[1] && Array.isArray(res[1]) ? res[1] : null;
                             migration = false;
@@ -12440,7 +12444,7 @@
                             storageKeys = ids.map(function (id) { return _this._storageKey + '#' + id; });
                             return [4 /*yield*/, chainPromises(storageKeys.map(function (key) { return function () { return _this.storage.get(key); }; }))];
                         case 2:
-                            entities = _a.sent();
+                            entities = _b.sent();
                             return [3 /*break*/, 4];
                         case 3:
                             if (isNotNil(values)) {
@@ -12448,7 +12452,7 @@
                                 migration = true;
                                 oldKeysToClean = [this._storageKey];
                             }
-                            _a.label = 4;
+                            _b.label = 4;
                         case 4: return [3 /*break*/, 8];
                         case 5:
                             if (!isNotNil(values)) return [3 /*break*/, 6];
@@ -12460,10 +12464,10 @@
                             return [4 /*yield*/, chainPromises(storageKeys.map(function (key) { return function () { return _this.storage.get(key); }; }))];
                         case 7:
                             // Load entity by id (one by one)
-                            entities = _a.sent();
+                            entities = _b.sent();
                             migration = true;
                             oldKeysToClean = __spread(storageKeys, [this.storageKeyById]);
-                            _a.label = 8;
+                            _b.label = 8;
                         case 8:
                             // OK, there is something in storage...
                             if (isNotEmptyArray(entities)) {
@@ -12478,23 +12482,23 @@
                             this.setEntities(entities || [], Object.assign(Object.assign({}, opts), { emitEvent: false }));
                             this._dirty = false;
                             if (!migration) return [3 /*break*/, 14];
-                            _a.label = 9;
+                            _b.label = 9;
                         case 9:
-                            _a.trys.push([9, 13, , 14]);
+                            _b.trys.push([9, 13, , 14]);
                             console.warn("[entity-storage] - Migrate " + this.name + " into {mode: '" + this.policy.mode + "'}...");
                             // Force to persist, using the new mode
                             return [4 /*yield*/, this.persist({ skipIfPristine: false /* force persist using the new mode */ })];
                         case 10:
                             // Force to persist, using the new mode
-                            _a.sent();
+                            _b.sent();
                             if (!isNotEmptyArray(oldKeysToClean)) return [3 /*break*/, 12];
                             return [4 /*yield*/, chainPromises(oldKeysToClean.map(function (key) { return function () { return _this.storage.remove(key); }; }))];
                         case 11:
-                            _a.sent();
-                            _a.label = 12;
+                            _b.sent();
+                            _b.label = 12;
                         case 12: return [3 /*break*/, 14];
                         case 13:
-                            err_1 = _a.sent();
+                            err_1 = _b.sent();
                             console.error(err_1);
                             throw { code: ErrorCodes$2.ENTITY_STORAGE_MIGRATION_FAILED, message: 'ERROR.ENTITY_STORAGE_MIGRATION_FAILED', details: err_1 };
                         case 14:
@@ -12515,10 +12519,10 @@
             }
         };
         EntityStore.prototype.markAsPristine = function (opts) {
-            var e_1, _a;
+            var e_1, _b;
             try {
-                for (var _b = __values(this._statusById.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var s = _c.value;
+                for (var _c = __values(this._statusById.values()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var s = _d.value;
                     if (isNotNil(s)) {
                         s.dirty = false;
                     }
@@ -12527,7 +12531,7 @@
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
@@ -12548,8 +12552,8 @@
         EntityStore.prototype.loadFullEntity = function (id, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var status, index, fullData;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             status = this._statusById.get(id);
                             index = status && status.index;
@@ -12559,10 +12563,10 @@
                             console.debug("[entity-storage] Full reloading " + this.name + "#" + id + "...");
                             return [4 /*yield*/, this.storage.get(this._storageKey + '#' + id)];
                         case 1:
-                            fullData = _a.sent();
+                            fullData = _b.sent();
                             if (fullData)
                                 return [2 /*return*/, fullData];
-                            _a.label = 2;
+                            _b.label = 2;
                         case 2: 
                         // Load from the cache, if dirty OR if storage is not splited by id
                         return [2 /*return*/, this._cache[index]];
@@ -13229,11 +13233,17 @@
                                 console.warn("[entities-storage] Persisting " + entityName + ": store not found!");
                                 return;
                             }
-                            return entityStore.persist()
+                            // SKip store if not dirty
+                            if (!entityStore.dirty)
+                                return Promise.resolve(); // Skip
+                            // Persist store
+                            return (entityStore.dirty ? entityStore.persist() : Promise.resolve(entityStore.length))
                                 .then(function (count) {
                                 // If no entity found, remove from the entity names array
                                 if (!count) {
-                                    entityNames.splice(entityNames.findIndex(function (e) { return e === entityName; }), 1);
+                                    var entityNameIndex = entityNames.findIndex(function (e) { return e === entityName; });
+                                    if (entityNameIndex !== -1)
+                                        entityNames.splice(entityNameIndex, 1);
                                 }
                             });
                         }; }))
@@ -19629,6 +19639,9 @@
         AppForm.prototype.registerSubscription = function (sub) {
             return this._subscription.add(sub);
         };
+        AppForm.prototype.unregisterSubscription = function (sub) {
+            this._subscription.remove(sub);
+        };
         AppForm.prototype.registerAutocompleteField = function (fieldName, opts) {
             return this.autocompleteHelper.add(fieldName, opts);
         };
@@ -20466,13 +20479,14 @@
         { type: AccountService }
     ]; };
 
-    var AccountPage = /** @class */ (function (_super) {
-        __extends(AccountPage, _super);
-        function AccountPage(injector, router, formBuilder, accountService, validatorService, settingsValidatorService, translate, settings, cd, locales) {
-            var _this = _super.call(this, injector, validatorService.getFormGroup(accountService.account)) || this;
-            _this.router = router;
+    var AccountPage = /** @class */ (function (_super_1) {
+        __extends(AccountPage, _super_1);
+        function AccountPage(injector, formBuilder, accountService, network, router, validatorService, settingsValidatorService, translate, settings, cd, locales) {
+            var _this = _super_1.call(this, injector, validatorService.getFormGroup(accountService.account)) || this;
             _this.formBuilder = formBuilder;
             _this.accountService = accountService;
+            _this.network = network;
+            _this.router = router;
             _this.validatorService = validatorService;
             _this.settingsValidatorService = settingsValidatorService;
             _this.translate = translate;
@@ -20513,21 +20527,38 @@
             return _this;
         }
         AccountPage.prototype.ngOnDestroy = function () {
-            _super.prototype.ngOnDestroy.call(this);
+            var _a;
+            _super_1.prototype.ngOnDestroy.call(this);
             this.stopListenChanges();
+            (_a = this.networkSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         };
         AccountPage.prototype.onLogin = function (account) {
+            var _this = this;
+            var _a;
             console.debug('[account] Logged account: ', account);
             this.isLogin = true;
             this.setValue(account);
             this.email.confirmed = account && account.email && (account.statusId !== StatusIds.TEMPORARY);
             this.email.notConfirmed = account && account.email && (!account.statusId || account.statusId === StatusIds.TEMPORARY);
-            this.enable();
-            this.markAsPristine();
-            this.startListenChanges();
-            this.markAsLoaded();
+            (_a = this.networkSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.networkSubscription = this.network.onNetworkStatusChanges
+                .pipe(operators.map(function (connectionType) { return connectionType !== 'none'; }))
+                .subscribe(function (online) {
+                if (online) {
+                    _this.enable();
+                    _this.markAsPristine();
+                    _this.startListenChanges();
+                }
+                else {
+                    _this.disable();
+                    _this.markAsPristine();
+                    _this.stopListenChanges();
+                }
+                _this.markAsLoaded();
+            });
         };
         AccountPage.prototype.onLogout = function () {
+            var _a;
             this.isLogin = false;
             this.email.confirmed = false;
             this.email.notConfirmed = false;
@@ -20535,13 +20566,14 @@
             this.email.error = undefined;
             this.form.reset();
             this.disable();
+            (_a = this.networkSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
             this.stopListenChanges();
             // Back to home
             this.router.navigateByUrl('/');
         };
         AccountPage.prototype.refresh = function (event) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     this.disable();
                     this.markAsLoading();
                     return [2 /*return*/, this.accountService.refresh()];
@@ -20562,8 +20594,8 @@
         AccountPage.prototype.sendConfirmationEmail = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var json, err_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             json = this.form.value;
                             json.email = this.form.controls['email'].value;
@@ -20573,17 +20605,17 @@
                             }
                             this.email.sending = true;
                             console.debug('[account] Sending confirmation email...');
-                            _a.label = 1;
+                            _b.label = 1;
                         case 1:
-                            _a.trys.push([1, 3, , 4]);
+                            _b.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, this.accountService.sendConfirmationEmail(json.email, json.settings && json.settings.locale || this.translate.currentLang)];
                         case 2:
-                            _a.sent();
+                            _b.sent();
                             console.debug('[account] Confirmation email sent.');
                             this.email.sending = false;
                             return [3 /*break*/, 4];
                         case 3:
-                            err_1 = _a.sent();
+                            err_1 = _b.sent();
                             this.email.sending = false;
                             this.email.error = err_1 && err_1.message || err_1;
                             return [3 /*break*/, 4];
@@ -20595,41 +20627,41 @@
         AccountPage.prototype.save = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var newAccount, err_2;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (this.saving)
-                                return [2 /*return*/];
+                                return [2 /*return*/, false];
                             if (!!this.form.valid) return [3 /*break*/, 2];
                             return [4 /*yield*/, AppFormUtils.waitWhilePending(this.form)];
                         case 1:
-                            _a.sent();
+                            _b.sent();
                             if (this.form.invalid) {
                                 AppFormUtils.logFormErrors(this.form);
                                 this.form.markAllAsTouched();
-                                return [2 /*return*/];
+                                return [2 /*return*/, false];
                             }
-                            _a.label = 2;
+                            _b.label = 2;
                         case 2:
                             this.submitted = true;
                             this.saving = true;
                             this.error = undefined;
                             newAccount = exports.Account.fromObject(Object.assign(Object.assign({}, (this.accountService.account.asObject())), (this.form.value)));
                             console.debug('[account] Saving account...', newAccount);
-                            _a.label = 3;
+                            _b.label = 3;
                         case 3:
-                            _a.trys.push([3, 5, 6, 7]);
+                            _b.trys.push([3, 5, 6, 7]);
                             this.disable();
                             return [4 /*yield*/, this.accountService.save(newAccount)];
                         case 4:
-                            _a.sent();
+                            _b.sent();
                             this.markAsPristine();
-                            return [3 /*break*/, 7];
+                            return [2 /*return*/, true];
                         case 5:
-                            err_2 = _a.sent();
+                            err_2 = _b.sent();
                             console.error(err_2);
                             this.error = err_2 && err_2.message || err_2;
-                            return [3 /*break*/, 7];
+                            return [2 /*return*/, false];
                         case 6:
                             this.saving = false;
                             this.enable();
@@ -20641,7 +20673,7 @@
         };
         AccountPage.prototype.enable = function () {
             var _this = this;
-            _super.prototype.enable.call(this);
+            _super_1.prototype.enable.call(this);
             // Some fields are always disable
             this.form.controls.email.disable();
             this.form.controls.mainProfile.disable();
@@ -20654,6 +20686,17 @@
             });
             this.markForCheck();
         };
+        AccountPage.prototype.cancel = function () {
+            var _super = Object.create(null, {
+                cancel: { get: function () { return _super_1.prototype.cancel; } }
+            });
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    _super.cancel.call(this);
+                    return [2 /*return*/];
+                });
+            });
+        };
         AccountPage.prototype.markForCheck = function () {
             this.cd.markForCheck();
         };
@@ -20662,16 +20705,17 @@
     AccountPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-page-account',
-                    template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"form.dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\">\n\n  <ion-buttons slot=\"end\">\n    <!-- loader -->\n    <ion-spinner *ngIf=\"loading || saving; else endButtons\"></ion-spinner>\n\n    <ng-template #endButtons>\n      <!-- refresh button -->\n      <ion-button [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</app-toolbar>\n\n<ion-content>\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  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <mat-tab-group>\n\n      <!-- TAB: user details -->\n      <mat-tab label=\"{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}</ion-label>\n          <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\" *ngIf=\"submitted && form.invalid\"></ion-icon>\n        </ng-template>\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=\"3\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION'|translate\"></p>\n\n              <!--h1>Identit\u00E9</h1-->\n\n              <!-- Email -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.EMAIL'|translate\"\n                  formControlName=\"email\" autocomplete=\"section-red email\">\n                <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.email.hasError('email') && form.controls.email.dirty\">\n                  <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <ion-grid *ngIf=\"email.notConfirmed\" class=\"ion-no-padding ion-padding-bottom\">\n                <ion-row>\n                  <ion-col color=\"danger\">\n                    <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n                    <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL'|translate\"></ion-text>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row style=\"height: 51px;\">\n                  <ion-col style=\"text-align: right;\">\n                    <ion-text>\n                      <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION'|translate\"></small>\n                    </ion-text>\n                  </ion-col>\n                  <ion-col size=\"auto\">\n                    <ion-button fill=\"solid\" color=\"secondary\" *ngIf=\"!email.sending\" (click)=\"sendConfirmationEmail($event)\">\n                      {{'ACCOUNT.BTN_RESEND'|translate}}\n                    </ion-button>\n                    <ion-spinner class=\"ion-no-padding\" *ngIf=\"email.sending\"></ion-spinner>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row *ngIf=\"email.error && !email.sending\">\n                  <ion-col>\n                    <span *ngIf=\"email.error && !email.sending\" [innerHTML]=\"email.error|translate\"></span>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <!-- Last name -->\n              <mat-form-field>\n                <input matInput [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.LAST_NAME'|translate\"\n                       formControlName=\"lastName\"\n                       autocomplete=\"section-blue family-name\"\n                       required>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('minlength') && form.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=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n\n              <!-- Additional fields -->\n              <ng-container *ngFor=\"let definition of additionalFields\">\n                <app-form-field [definition]=\"definition\"\n                                [formControlName]=\"definition.key\"\n                                [required]=\"definition.extra && definition.extra.account && definition.extra.account.required || false\">\n                </app-form-field>\n              </ng-container>\n\n              <h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3>\n\n              <!-- profile -->\n              <mat-form-field>\n                <input matInput hidden readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PROFILE'|translate\"\n                  formControlName=\"mainProfile\" required>\n                <span>{{'USER.PROFILE_ENUM.'+form.controls.mainProfile.value | translate}}</span>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- pubkey -->\n              <mat-form-field>\n                <input matInput readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PUBKEY'|translate\" formControlName=\"pubkey\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\">\n                  <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n                </mat-error>\n              </mat-form-field>\n\n            </ion-col>\n\n            <!-- right  margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab label=\"{{'ACCOUNT.SETTINGS.TITLE'|translate}}\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>\n        </ng-template>\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=\"3\">&nbsp;\n            </ion-col>\n\n            <ion-col class=\"ion-padding\">\n\n              <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION'|translate\"></p>\n\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.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=\"settingsForm.controls.locale.hasError('required') && settingsForm.controls.locale.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- lat/long format-->\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.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 *ngIf=\"settingsForm.controls.latLongFormat.hasError('required') && settingsForm.controls.latLongFormat.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <form formGroupName=\"content\">\n\n\n              </form>\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n    </mat-tab-group>\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",
+                    template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"form.dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\">\n\n  <ion-buttons slot=\"end\">\n    <!-- loader -->\n    <ion-spinner *ngIf=\"loading || saving; else endButtons\"></ion-spinner>\n\n    <ng-template #endButtons>\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                  *ngIf=\"network.online\"\n                  (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\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  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <mat-tab-group>\n\n      <!-- TAB: user details -->\n      <mat-tab label=\"{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}</ion-label>\n          <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\" *ngIf=\"submitted && form.invalid\"></ion-icon>\n        </ng-template>\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=\"3\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION'|translate\"></p>\n\n              <!--h1>Identit\u00E9</h1-->\n\n              <!-- Email -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.EMAIL'|translate\"\n                  formControlName=\"email\" autocomplete=\"section-red email\">\n                <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.email.hasError('email') && form.controls.email.dirty\">\n                  <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <ion-grid *ngIf=\"email.notConfirmed\" class=\"ion-no-padding ion-padding-bottom\">\n                <ion-row>\n                  <ion-col color=\"danger\">\n                    <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n                    <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL'|translate\"></ion-text>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row style=\"height: 51px;\">\n                  <ion-col style=\"text-align: right;\">\n                    <ion-text>\n                      <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION'|translate\"></small>\n                    </ion-text>\n                  </ion-col>\n                  <ion-col size=\"auto\">\n                    <ion-button fill=\"solid\" color=\"secondary\" *ngIf=\"!email.sending\" (click)=\"sendConfirmationEmail($event)\">\n                      {{'ACCOUNT.BTN_RESEND'|translate}}\n                    </ion-button>\n                    <ion-spinner class=\"ion-no-padding\" *ngIf=\"email.sending\"></ion-spinner>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row *ngIf=\"email.error && !email.sending\">\n                  <ion-col>\n                    <span *ngIf=\"email.error && !email.sending\" [innerHTML]=\"email.error|translate\"></span>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <!-- Last name -->\n              <mat-form-field>\n                <input matInput [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.LAST_NAME'|translate\"\n                       formControlName=\"lastName\"\n                       autocomplete=\"section-blue family-name\"\n                       required>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('minlength') && form.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=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n\n              <!-- Additional fields -->\n              <ng-container *ngFor=\"let definition of additionalFields\">\n                <app-form-field [definition]=\"definition\"\n                                [formControlName]=\"definition.key\"\n                                [required]=\"definition.extra && definition.extra.account && definition.extra.account.required || false\">\n                </app-form-field>\n              </ng-container>\n\n              <h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3>\n\n              <!-- profile -->\n              <mat-form-field>\n                <input matInput hidden readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PROFILE'|translate\"\n                  formControlName=\"mainProfile\" required>\n                <span>{{'USER.PROFILE_ENUM.'+form.controls.mainProfile.value | translate}}</span>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- pubkey -->\n              <mat-form-field>\n                <input matInput readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PUBKEY'|translate\" formControlName=\"pubkey\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\">\n                  <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n                </mat-error>\n              </mat-form-field>\n\n            </ion-col>\n\n            <!-- right  margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab label=\"{{'ACCOUNT.SETTINGS.TITLE'|translate}}\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>\n        </ng-template>\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=\"3\">&nbsp;\n            </ion-col>\n\n            <ion-col class=\"ion-padding\">\n\n              <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION'|translate\"></p>\n\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.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=\"settingsForm.controls.locale.hasError('required') && settingsForm.controls.locale.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- lat/long format-->\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.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 *ngIf=\"settingsForm.controls.latLongFormat.hasError('required') && settingsForm.controls.latLongFormat.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <form formGroupName=\"content\">\n\n\n              </form>\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n    </mat-tab-group>\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: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form,form mat-form-field{width:100%}"]
                 },] }
     ];
     AccountPage.ctorParameters = function () { return [
         { type: i0.Injector },
-        { type: i3.Router },
         { type: i1.FormBuilder },
         { type: AccountService },
+        { type: NetworkService },
+        { type: i3.Router },
         { type: AccountValidatorService },
         { type: UserSettingsValidatorService },
         { type: i1$2.TranslateService },
@@ -21219,6 +21263,7 @@
                             if (this.saving)
                                 return [2 /*return*/]; // Skip
                             event === null || event === void 0 ? void 0 : event.preventDefault();
+                            event === null || event === void 0 ? void 0 : event.stopPropagation();
                             // Remove all empty controls
                             this.propertiesFormHelper.removeAllEmpty();
                             if (!!this.form.valid) return [3 /*break*/, 2];
@@ -21423,7 +21468,7 @@
     SettingsPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'page-settings',
-                    template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"form.dirty && !saving\"\n             [hasClose]=\"!form.dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [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.controls.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",
+                    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\" [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.controls.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",
                     providers: [
                         { provide: ngxMaterialTable.ValidatorService, useExisting: LocalSettingsValidatorService },
                     ],