@sumaris-net/ngx-components 2.5.0-beta3 → 2.5.0

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

@@ -61,7 +61,7 @@ import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObse
 import { filter, map, takeUntil, first, switchMap, tap, debounceTime, startWith, distinctUntilChanged, mergeMap, catchError, throttleTime, skip, bufferWhen, mapTo, take } from 'rxjs/operators';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import * as i1 from '@ionic/angular';
-import { IonicModule, Platform, ToastController, IonicSafeString, createAnimation, IonicRouteStrategy, ModalController, AlertController, IonContent, IonItem, IonModal, IonInfiniteScroll } from '@ionic/angular';
+import { IonicModule, Platform, ToastController, IonicSafeString, createAnimation, IonicRouteStrategy, ModalController, AlertController, IonContent, IonRouterOutlet, IonItem, IonModal, IonInfiniteScroll } from '@ionic/angular';
 import { Capacitor } from '@capacitor/core';
 import { Keyboard } from '@capacitor/keyboard';
 import * as i1$2 from '@ngx-translate/core';
@@ -2503,7 +2503,7 @@ class MatAutocompleteField {
                 return;
             // Hide the panel (will be show when ready)
             this.matSelect.panelClass = 'cdk-visually-hidden';
-            let revertOverlayCallback;
+            let subscription;
             this._subscription.add(this.matSelect.openedChange
                 .subscribe((open) => __awaiter(this, void 0, void 0, function* () {
                 if (open) {
@@ -2514,13 +2514,17 @@ class MatAutocompleteField {
                     this._fixMatSelectPanelPosition(overlayPane);
                     // Fix overlay, for searchbar
                     if (this.showSearchBar) {
-                        revertOverlayCallback = yield this._fixSearchbarOverlay(panelElement, overlayPane);
+                        subscription = yield this._fixSearchbarOverlay(panelElement, overlayPane);
+                        this._subscription.add(subscription);
                     }
                     // Show the panel
                     this.renderer.removeClass(panelElement, 'cdk-visually-hidden');
                 }
-                else if (revertOverlayCallback) {
-                    revertOverlayCallback();
+                // ON close
+                else if (subscription) {
+                    subscription.unsubscribe();
+                    this._subscription.remove(subscription);
+                    subscription = null;
                 }
             })));
         });
@@ -2560,11 +2564,11 @@ class MatAutocompleteField {
             this.renderer.setStyle(overlayPane, 'margin-top', `-${shiftTop}px`);
             this.renderer.setStyle(overlayPane, 'margin-left', `-${shiftLeft}px`);
             // Return the reverse function, to replace the container in body
-            return () => {
+            return new Subscription(() => {
                 // DEBUG
                 console.debug(`${this.logPrefix} moving the "cdk-overlay" container from the "ion-modal" to the "body" container`);
                 this.renderer.appendChild(originalParent /*this.document.body*/, overlayContainer);
-            };
+            });
         });
     }
 }
@@ -2760,6 +2764,12 @@ class DateUtils {
         value[MOMENT_NO_TIME_PROPERTY] = true;
         return value;
     }
+    static markTime(value) {
+        if (!value)
+            return undefined;
+        delete value[MOMENT_NO_TIME_PROPERTY];
+        return value;
+    }
     static isNoTime(value) {
         return (value === null || value === void 0 ? void 0 : value[MOMENT_NO_TIME_PROPERTY]) === true;
     }
@@ -6506,9 +6516,9 @@ class MatDateTime {
             .subscribe((_) => this.onFormChange()));
         // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
         this._subscription.add(this.formControl.statusChanges
-            .pipe(filter((_) => !this.readonly && !this._writing && !this._disabling) // Skip
+            .pipe(filter((_) => !this._readonly && !this._writing && !this._disabling) // Skip
         )
-            .subscribe(() => this.markForCheck()));
+            .subscribe((_) => this.markForCheck()));
         this._writing = false;
     }
     ngAfterViewInit() {
@@ -19356,28 +19366,29 @@ class ToolbarComponent {
                 const replaceUrl = !this.routerOutlet.canGoBack();
                 // Relative href
                 if (this._backHref.startsWith('.')) {
-                    yield this.router.navigate([this._backHref], { relativeTo: this.route, replaceUrl });
+                    return this.router.navigate([this._backHref], { relativeTo: this.route, replaceUrl });
                 }
                 else {
-                    yield this.router.navigateByUrl(this._backHref, { replaceUrl });
+                    return this.router.navigateByUrl(this._backHref, { replaceUrl });
                 }
             }
             else if (this.routerOutlet.canGoBack()) {
-                yield this.routerOutlet.pop();
+                return this.routerOutlet.pop();
             }
             else if (this._defaultBackHref) {
                 // Relative href
                 if (this._defaultBackHref.startsWith('.')) {
-                    yield this.router.navigate([this._defaultBackHref], { relativeTo: this.route, replaceUrl: true });
+                    return this.router.navigate([this._defaultBackHref], { relativeTo: this.route, replaceUrl: true });
                 }
                 else {
-                    yield this.router.navigateByUrl(this._defaultBackHref, {
+                    return this.router.navigateByUrl(this._defaultBackHref, {
                         replaceUrl: true
                     });
                 }
             }
             else {
                 console.error('[toolbar] Cannot go back. Missing attribute \'defaultBackHref\' or \'backHref\'');
+                return false;
             }
         });
     }
@@ -20015,9 +20026,9 @@ class CustomReuseStrategy extends IonicRouteStrategy {
      * @param curr
      */
     shouldReuseRoute(future, curr) {
-        const result = super.shouldReuseRoute(future, curr);
+        const reuse = super.shouldReuseRoute(future, curr);
         // Is sam route config
-        if (!result && future.routeConfig && future.routeConfig === curr.routeConfig) {
+        if (!reuse && future.routeConfig && future.routeConfig === curr.routeConfig) {
             // Read the parameter name, where id is stored
             const pathIdParam = future.routeConfig.data && future.routeConfig.data.pathIdParam || 'id';
             // Read the current route id
@@ -20028,11 +20039,17 @@ class CustomReuseStrategy extends IonicRouteStrategy {
             const futureId = future.params[pathIdParam] === 'new'
                 ? (future.queryParams[pathIdParam] || future.queryParams['id'] || 'new') // e.g. path like '/new/?id=<ID>'
                 : future.params[pathIdParam]; // e.g. path like '/<ID>'
-            // Reuse if same ID, but never when 'new' expected
-            return futureId !== 'new' && currId !== 'new'
-                && futureId === currId;
+            // Reuse if same ID, using a futureId, if exists
+            if (isNotNil(futureId)) {
+                // Allow reuse when changing from /new to /new?id=:id
+                if (currId === 'new' && isNil(curr.queryParams[pathIdParam]) && future.params[pathIdParam] === 'new' && isNotNil(future.queryParams[pathIdParam])) {
+                    return true;
+                }
+                // Allow reuse same id, expect when expected '/new'
+                return futureId !== 'new' && futureId === currId;
+            }
         }
-        return result;
+        return reuse;
     }
 }
 CustomReuseStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomReuseStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
@@ -27372,7 +27389,7 @@ class AccountPage extends AppForm {
     }
     get valid() {
         var _a;
-        return super.valid && ((_a = this.propertiesTable) === null || _a === void 0 ? void 0 : _a.valid);
+        return super.valid && (((_a = this.propertiesTable) === null || _a === void 0 ? void 0 : _a.valid) || true);
     }
     ngOnInit() {
         super.ngOnInit();
@@ -27464,8 +27481,10 @@ class AccountPage extends AppForm {
                     propertiesEntities.push(PropertyEntity.fromObject({ id: key, value: properties[key] }));
                 }
             });
-            yield this.propertiesTable.ready();
-            this.propertiesTable.value = propertiesEntities;
+            if (this.propertiesTable) {
+                yield this.propertiesTable.ready();
+                this.propertiesTable.value = propertiesEntities;
+            }
         });
     }
     refresh(event) {
@@ -27523,14 +27542,16 @@ class AccountPage extends AppForm {
             this.saving = true;
             this.error = undefined;
             const newAccount = Account.fromObject(Object.assign(Object.assign({}, (this.accountService.account.asObject())), (this.form.value)));
-            // merge properties
-            yield this.propertiesTable.save();
-            const propertyEntities = this.propertiesTable.value || [];
-            const properties = propertyEntities.reduce((res, item) => {
-                res[item.id] = item.value;
-                return res;
-            }, {});
-            newAccount.settings.merge({ properties }, ['properties']);
+            if (this.propertiesTable) {
+                // merge properties
+                yield this.propertiesTable.save();
+                const propertyEntities = this.propertiesTable.value || [];
+                const properties = propertyEntities.reduce((res, item) => {
+                    res[item.id] = item.value;
+                    return res;
+                }, {});
+                newAccount.settings.merge({ properties }, ['properties']);
+            }
             console.debug('[account] Saving account...', newAccount);
             try {
                 this.disable();
@@ -27601,10 +27622,10 @@ class AccountPage extends AppForm {
     }
 }
 AccountPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: NetworkService }, { token: i1$6.Router }, { token: AccountValidatorService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: APP_LOCALES }], target: i0.ɵɵFactoryTarget.Component });
-AccountPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccountPage, selector: "app-account-page", viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }, { propertyName: "propertiesTable", first: true, predicate: ["propertiesTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\"\n             (onClose)=\"close($event)\">\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 && mobile\" 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 class=\"form-container\">\n\n    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <div class=\"ion-padding\">\n\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\n            </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\n            </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\n            </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\n            </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        </div>\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        <div 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\n            </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\n            </mat-error>\n          </mat-form-field>\n\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n\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 || !valid || saving\">\n    <!-- error -->\n    <ion-item *ngIf=\"error && !mobile\" 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  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}div.options-table{height:calc(100vh - 380px)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { 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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i15.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i15.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i15.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "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: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AccountPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccountPage, selector: "app-account-page", viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }, { propertyName: "propertiesTable", first: true, predicate: ["propertiesTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\"\n             (onClose)=\"close($event)\">\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 && mobile\" 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 class=\"form-container\">\n\n    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <div class=\"ion-padding\">\n\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\n            </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\n            </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\n            </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\n            </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        </div>\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        <div 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\n            </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\n            </mat-error>\n          </mat-form-field>\n\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" *ngIf=\"optionDefinitions | isNotEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n\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 || !valid || saving\">\n    <!-- error -->\n    <ion-item *ngIf=\"error && !mobile\" 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  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}div.options-table{height:calc(100vh - 380px)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { 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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i15.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i15.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i15.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "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: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccountPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-account-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\"\n             (onClose)=\"close($event)\">\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 && mobile\" 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 class=\"form-container\">\n\n    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <div class=\"ion-padding\">\n\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\n            </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\n            </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\n            </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\n            </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        </div>\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        <div 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\n            </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\n            </mat-error>\n          </mat-form-field>\n\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n\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 || !valid || saving\">\n    <!-- error -->\n    <ion-item *ngIf=\"error && !mobile\" 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  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}div.options-table{height:calc(100vh - 380px)}\n"] }]
+            args: [{ selector: 'app-account-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\"\n             (onClose)=\"close($event)\">\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 && mobile\" 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 class=\"form-container\">\n\n    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <div class=\"ion-padding\">\n\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\n            </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\n            </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\n            </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\n            </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        </div>\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        <div 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\n            </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\n            </mat-error>\n          </mat-form-field>\n\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" *ngIf=\"optionDefinitions | isNotEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n\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 || !valid || saving\">\n    <!-- error -->\n    <ion-item *ngIf=\"error && !mobile\" 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  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}div.options-table{height:calc(100vh - 380px)}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: AccountService }, { type: NetworkService }, { type: i1$6.Router }, { type: AccountValidatorService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -29018,6 +29039,7 @@ class AppEntityEditor extends AppTabEditor {
             enableListenChanges: ((_a = this.environment.entityEditor) === null || _a === void 0 ? void 0 : _a.enableListenChanges) || false, listenIntervalInSeconds: toNumber((_b = this.environment.entityEditor) === null || _b === void 0 ? void 0 : _b.listenIntervalInSeconds, 0), pathIdAttribute: 'id', autoLoad: true, autoUpdateRoute: true, i18nPrefix: '' }, options);
         this.settings = injector.get(LocalSettingsService);
         this.errorTranslator = injector.get(FormErrorTranslator);
+        this.routerOutlet = injector.get(IonRouterOutlet);
         this.cd = injector.get(ChangeDetectorRef);
         this.dateFormat = injector.get(DateFormatService);
         this.toastController = injector.get(ToastController);
@@ -29254,41 +29276,18 @@ class AppEntityEditor extends AppTabEditor {
      */
     updateTabAndRoute(data, opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.queryParams = this.queryParams || {};
+            const queryParams = Object.assign({}, this.queryParams);
             // Open the next tab
             this.updateTabIndex(opts && opts.openTabIndex);
-            // Save the opened tab into the queryParams
-            this.queryParams.tab = this.selectedTabIndex;
             // Update route location
-            if (isNotNil(data === null || data === void 0 ? void 0 : data.id)) {
-                const queryParams = Object.assign({}, this.queryParams);
-                queryParams[this._pathIdAttribute] = data.id;
-                if (this.debug)
-                    console.debug('[entity-editor] Updating route using params: ', queryParams);
-                yield this.router.navigate(['.'], {
-                    relativeTo: this.route,
-                    queryParams
-                });
-            }
-            // Move to ../new
-            else {
-                const queryParams = Object.assign({}, this.queryParams);
-                queryParams[this._pathIdAttribute] = 'new';
-                if (this.debug)
-                    console.debug('[entity-editor] Updating route to \'../new\' using params: ', queryParams);
-                yield this.router.navigate(['..', 'new'], {
-                    relativeTo: this.route,
-                    queryParams
-                });
-            }
-            yield this.updateRoute(data, this.queryParams);
+            yield this.updateRoute(data, Object.assign(Object.assign({}, queryParams), { tab: this.selectedTabIndex }));
         });
     }
     /**
      * Update the route location, and open the next tab
      */
     updateTabIndex(tabIndex) {
-        if (isNotNil(tabIndex) && tabIndex !== this.selectedTabIndex) {
+        if (isNotNil(tabIndex) && tabIndex >= 0 && tabIndex !== this.selectedTabIndex) {
             this.selectedTabIndex = tabIndex;
             this.markForCheck();
         }
@@ -29612,7 +29611,7 @@ class AppEntityEditor extends AppTabEditor {
         let parentUrl = this.defaultBackHref;
         // Remove query params
         if (withQueryParams !== true && parentUrl && parentUrl.indexOf('?') !== -1) {
-            parentUrl = parentUrl.substr(0, parentUrl.indexOf('?'));
+            parentUrl = parentUrl.substring(0, parentUrl.indexOf('?'));
         }
         return parentUrl;
     }
@@ -29637,18 +29636,50 @@ class AppEntityEditor extends AppTabEditor {
             this.markForCheck();
         }
     }
+    /**
+     * Update the route, without reloading the component
+     * @param data
+     * @param queryParams
+     * @protected
+     */
     updateRoute(data, queryParams) {
         return __awaiter(this, void 0, void 0, function* () {
-            const path = this.computePageUrl(isNotNil(data.id) ? data.id : 'new');
-            const commands = (path && typeof path === 'string') ? path.split('/') : path;
-            if (isNotEmptyArray(commands)) {
-                return yield this.router.navigate(commands, {
-                    replaceUrl: true,
-                    queryParams: this.queryParams
-                });
+            const currId = this.route.snapshot.paramMap.get(this.pathIdAttribute);
+            const futureId = isNotNil(data.id) ? data.id.toString() : 'new';
+            this.queryParams = Object.assign(Object.assign({}, this.queryParams), queryParams);
+            if (currId === futureId) {
+                // Update queryParam only (not the path)
+                if (!equals(this.route.snapshot.queryParams, this.queryParams)) {
+                    if (this.debug)
+                        console.debug('[entity-editor] Updating route using queryParams: ', queryParams);
+                    return yield this.router.navigate(['.'], {
+                        relativeTo: this.route,
+                        queryParams: this.queryParams
+                    });
+                }
             }
             else {
-                console.warn('Skip page route update. Invalid page path: ', path);
+                // Current route was '/new' => change to '/new?id=:id' (to allow CustomReuseStrategy to detect that route can be reused)
+                if (currId === 'new') {
+                    const res = yield this.router.navigate(['.'], {
+                        relativeTo: this.route,
+                        replaceUrl: true,
+                        queryParams: Object.assign(Object.assign({}, this.queryParams), { [this.pathIdAttribute]: futureId })
+                    });
+                    if (!res)
+                        return false;
+                }
+                const path = this.computePageUrl(isNotNil(data.id) ? data.id : 'new');
+                const commands = (path && typeof path === 'string') ? path.split('/').slice(1) : path;
+                if (isNotEmptyArray(commands)) {
+                    if (this.debug)
+                        console.debug('[entity-editor] Updating route to: ' + path);
+                    return yield this.router.navigate(commands, {
+                        replaceUrl: true,
+                        queryParams: this.queryParams
+                    });
+                }
+                return Promise.reject('Missing page URL');
             }
         });
     }