@sumaris-net/ngx-components 18.0.2-alpha6 → 18.0.2

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

@@ -6826,22 +6826,27 @@ class AppPropertiesUtils {
      *
      * @param {PropertyMap} [sources] - The source object from which properties are to be extracted.
      * @param {FormFieldDefinition[]} [definitions] - An optional array of definitions to be applied to the extracted properties.
+     * @param opts
      * @return {Property[] | Promise<Property[]>} An array of properties generated from the source object, or a promise resolving to that array.
      */
-    static arrayFromObject(sources, definitions) {
+    static arrayFromObject(sources, definitions, opts) {
         // DEBUG
         //console.debug(`[properties-utils] Convert property map into array of Property...`);
-        const targets = Array.isArray(sources)
+        let targets = Array.isArray(sources)
             ? sources.slice()
             : Object.getOwnPropertyNames(sources || {}).map((key) => ({
                 key,
                 value: sources[key],
             }));
         const jobs = [];
-        if (isNotEmptyArray(definitions)) {
-            for (let target of targets) {
+        if (!!definitions) {
+            targets = targets
+                .map((target) => {
                 // Find definition
                 const def = definitions.find((def) => def.key === target.key);
+                // Exclude no definition (if expected by user options)
+                if (!def && opts?.keepOrphan === false)
+                    return null;
                 // Deserialize from string
                 let propertyOrPromise = AppPropertyUtils.fromObject(target, def);
                 if (isPromise(propertyOrPromise)) {
@@ -6851,7 +6856,8 @@ class AppPropertiesUtils {
                     // Update the target value
                     target.value = propertyOrPromise.value;
                 }
-            }
+            })
+                .filter(isNotNil);
         }
         // Return as promise, when need
         if (jobs.length)
@@ -36682,17 +36688,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class UserTokenTable extends AppInMemoryTable {
     configService;
-    tokenScopes;
     useSticky = false;
     showScopes = false;
     defaultScope;
+    tokenScopes;
     constructor(injector, validatorService, configService, environment, tokenScopes) {
         super(injector, [...RESERVED_START_COLUMNS, 'name', 'scopes', 'lastUsedDate', 'expirationDate', 'creationDate', ...RESERVED_END_COLUMNS], UserToken, new InMemoryEntitiesService(UserToken, undefined, {
             filterFnFactory: () => () => true,
             equals: UserToken.equals,
         }), validatorService);
         this.configService = configService;
-        this.tokenScopes = tokenScopes;
+        this.tokenScopes = tokenScopes ?? [];
         this.inlineEdition = false;
         this.allowRowDetail = false;
         this.defaultSortBy = 'creationDate';
@@ -36736,8 +36742,12 @@ class UserTokenTable extends AppInMemoryTable {
         event?.preventDefault();
         event?.stopPropagation();
         const newToken = new UserToken();
-        if (isNotNilOrBlank(this.defaultScope)) {
-            newToken.scopes = [this.tokenScopes.find((scope) => scope.id === this.defaultScope)];
+        if (isNotNilOrBlank(this.defaultScope) && isNotEmptyArray(this.tokenScopes)) {
+            const scope = this.tokenScopes.find((scope) => scope.id === this.defaultScope);
+            if (!scope) {
+                console.warn("[token-table] Cannot found the default scope '${this.defaultScope}' in values of APP_USER_TOKEN_SCOPES!");
+            }
+            newToken.scopes = scope ? [scope] : [];
         }
         const modal = await this.modalCtrl.create({
             component: NewTokenModal,
@@ -37095,11 +37105,11 @@ class AccountPage extends AppForm {
         this.navController.navigateRoot('account/password');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: NetworkService }, { token: i2$1.NavController }, { token: AccountValidatorService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: APP_LOCALES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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 }, { propertyName: "tokensTable", first: true, predicate: ["tokensTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\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\" *ngIf=\"network.online\" (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  <!-- 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    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>\n                      ERROR.FIELD_REQUIRED\n                    </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                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid 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\"></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                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\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                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    <mat-error\n                      *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    <mat-error\n                      *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.SECURITY.TITLE</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item [button]=\"true\" (click)=\"openChangePasswordPage()\" routerDirection=\"root\" lines=\"none\">\n                    <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                    <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                        translate\n                      >\n                        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                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&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        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select 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\n              *ngIf=\"settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty\"\n              translate\n            >\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select formControlName=\"latLongFormat\" 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=\"\n                  settingsForm?.controls.latLongFormat.hasError('required') &&\n                  settingsForm?.controls.latLongFormat.dirty\n                \"\n                translate\n              >\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [debug]=\"debug\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab\n        label=\"{{ 'ACCOUNT.TOKENS.TITLE' | translate }}\"\n        formGroupName=\"tokens\"\n        [class.cdk-visually-hidden]=\"!showApiTokens\"\n      >\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [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)}div.tokens-table{height:calc(100vh - 250px)}\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: i2$1.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: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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 }, { propertyName: "tokensTable", first: true, predicate: ["tokensTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\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\" *ngIf=\"network.online\" (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  <!-- 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    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>\n                      ERROR.FIELD_REQUIRED\n                    </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                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid 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\"></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                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\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                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    <mat-error\n                      *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    <mat-error\n                      *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.SECURITY.TITLE</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item [button]=\"true\" (click)=\"openChangePasswordPage()\" routerDirection=\"root\" lines=\"none\">\n                    <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                    <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                        translate\n                      >\n                        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                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&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        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select 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\n              *ngIf=\"settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty\"\n              translate\n            >\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.' + item + '_PLACEHOLDER' | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [debug]=\"debug\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab\n        [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\"\n        formGroupName=\"tokens\"\n        [class.cdk-visually-hidden]=\"!showApiTokens\"\n      >\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [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)}div.tokens-table{height:calc(100vh - 250px)}\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: i2$1.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: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AccountPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-account-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\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\" *ngIf=\"network.online\" (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  <!-- 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    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>\n                      ERROR.FIELD_REQUIRED\n                    </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                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid 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\"></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                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\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                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    <mat-error\n                      *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    <mat-error\n                      *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.SECURITY.TITLE</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item [button]=\"true\" (click)=\"openChangePasswordPage()\" routerDirection=\"root\" lines=\"none\">\n                    <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                    <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                        translate\n                      >\n                        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                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&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        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select 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\n              *ngIf=\"settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty\"\n              translate\n            >\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select formControlName=\"latLongFormat\" 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=\"\n                  settingsForm?.controls.latLongFormat.hasError('required') &&\n                  settingsForm?.controls.latLongFormat.dirty\n                \"\n                translate\n              >\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [debug]=\"debug\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab\n        label=\"{{ 'ACCOUNT.TOKENS.TITLE' | translate }}\"\n        formGroupName=\"tokens\"\n        [class.cdk-visually-hidden]=\"!showApiTokens\"\n      >\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [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)}div.tokens-table{height:calc(100vh - 250px)}\n"] }]
+            args: [{ selector: 'app-account-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\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\" *ngIf=\"network.online\" (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  <!-- 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    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\" dynamicHeight>\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        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>\n                      ERROR.FIELD_REQUIRED\n                    </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                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid 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\"></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                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\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                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    <mat-error\n                      *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    <mat-error\n                      *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                      translate\n                    >\n                      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: { requiredLength: 2 } }}</span>\n                    </mat-error>\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.SECURITY.TITLE</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item [button]=\"true\" (click)=\"openChangePasswordPage()\" routerDirection=\"root\" lines=\"none\">\n                    <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                    <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                        translate\n                      >\n                        ERROR.FIELD_REQUIRED\n                      </mat-error>\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      <mat-error\n                        *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                        translate\n                      >\n                        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                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&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        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select 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\n              *ngIf=\"settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty\"\n              translate\n            >\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.' + item + '_PLACEHOLDER' | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [debug]=\"debug\"\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab\n        [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\"\n        formGroupName=\"tokens\"\n        [class.cdk-visually-hidden]=\"!showApiTokens\"\n      >\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [canEdit]=\"true\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [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)}div.tokens-table{height:calc(100vh - 250px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: AccountService }, { type: NetworkService }, { type: i2$1.NavController }, { type: AccountValidatorService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LOCALES]