@sumaris-net/ngx-components 18.23.58 → 18.23.59

package/esm2022/src/app/core/about/about.modal.mjs

@@ -94,10 +94,10 @@ export class AboutModal {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AboutModal, deps: [{ token: i1.TranslateService }, { token: i2.ModalController }, { token: i3.ConfigService }, { token: i4.NetworkService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }, { token: APP_ABOUT_DEVELOPERS, optional: true }, { token: APP_ABOUT_PARTNERS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AboutModal, selector: "app-about-modal", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-title>\n      {{ 'ABOUT.TITLE' | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{ 'COMMON.BTN_CLOSE' | translate }}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-list lines=\"none\">\n    <!-- Peer info -->\n    @if (config$ | async; as config) {\n      <ion-item>\n        <span slot=\"start\">&nbsp;</span>\n        <ion-label class=\"ion-text-wrap\">\n          <h2>\n            <b>{{ config.label | capitalize }}</b>\n            @if (config.name) {\n              -\n              <span [innerHTML]=\"config.name\"></span>\n            }\n          </h2>\n\n          @if (config.description) {\n            <p>\n              <markdown [data]=\"config.description\" emoji></markdown>\n            </p>\n          }\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          @if (name) {\n            <small>{{ 'ABOUT.POWERED_BY' | translate }}</small>\n            {{ name }}\n          }\n          @if (version) {\n            <span [innerHTML]=\"'ABOUT.VERSION' | translate: { version: version }\"></span>\n          }\n          @if(allowVersionDetails) {\n            &nbsp;\n            <small>\n              <a (click)=\"showVersionDetails=!showVersionDetails\" tappable>\n                {{'COMMON.BTN_SHOW_MORE' | translate}}\n                <ion-icon [name]=\"!showVersionDetails ? 'chevron-down' : 'chevron-up'\"></ion-icon>\n              </a>\n            </small>\n          }\n        </h2>\n\n        <!-- version details -->\n        @if (showVersionDetails) {\n          <p class=\"version-details\">\n            <!-- App version -->\n            @if (buildDate) {\n              <small>\n                <ion-icon name=\"logo-angular\"></ion-icon>\n                <span [innerHTML]=\"'ABOUT.APP_VERSION' | translate: { version: version }\"></span>\n                &nbsp;\n                <ion-icon name=\"time-outline\"></ion-icon>\n                {{ buildDate | dateFormat: { time: true, seconds: false } }}\n              </small>\n              <br/>\n            }\n            <!-- Pod version -->\n            @if (nodeInfo?.softwareVersion && nodeInfo.buildDate) {\n                <small>\n                  <ion-icon name=\"server\"></ion-icon>\n                  <span [innerHTML]=\"'ABOUT.POD_VERSION' | translate: { version: nodeInfo.softwareVersion }\"></span>\n                  &nbsp;\n                  <ion-icon name=\"time-outline\"></ion-icon>\n                  {{ nodeInfo.buildDate | dateFormat: { time: true, seconds: false } }}\n                </small>\n            }\n          </p>\n        }\n\n        <!-- license-->\n        <p [innerHTML]=\"'ABOUT.LICENSE' | translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    <ion-item *ngIf=\"forumUrl || helpUrl\">\n      <mat-icon slot=\"start\">help_outline</mat-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.HELP' | translate }}\n        </p>\n        <p>\n          <ion-button fill=\"solid\" color=\"accent\" href=\"{{ helpUrl }}\" target=\"help\" size=\"default\">\n            <mat-icon slot=\"start\">description</mat-icon>\n            <ion-text translate>ABOUT.USER_MANUAL</ion-text>\n          </ion-button>\n          <ion-button fill=\"solid\" color=\"secondary\" href=\"{{ forumUrl }}\" target=\"forum\" size=\"default\">\n            <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n            <ion-text translate>ABOUT.FORUM</ion-text>\n          </ion-button>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Report issue -->\n    <ion-item *ngIf=\"reportIssueUrl\">\n      <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.REPORT_ISSUE' | translate }}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{ reportIssueUrl }}\" target=\"_system\" translate>ABOUT.BTN_REPORT_ISSUE</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Source code -->\n    <ion-item *ngIf=\"sourceUrl\">\n      <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.SOURCE_CODE' | translate }}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{ sourceUrl }}\" target=\"_system\">{{ sourceUrl }}</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Developers -->\n    <ion-item *ngIf=\"developers | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.DEVELOPED_BY' | translate }}\n        </p>\n        <ion-list lines=\"none\">\n          <ion-item *ngFor=\"let item of developers\" class=\"ion-no-padding\">\n            <ion-label>\n              <p>\n                <a color=\"primary\" href=\"{{ item.siteUrl }}\" target=\"_system\">{{ item.name || item.label }}</a>\n              </p>\n            </ion-label>\n            <ion-img slot=\"end\" [src]=\"item.logo\" />\n          </ion-item>\n        </ion-list>\n      </ion-label>\n    </ion-item>\n\n    <!-- Partners -->\n    <ion-item class=\"item-partners\" *ngIf=\"partners | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n      <ion-text>\n        <p>{{ 'ABOUT.PARTNERS' | translate }}</p>\n        <p>\n          <a *ngFor=\"let item of partners\" href=\"{{ item.siteUrl }}\" class=\"partners\" target=\"_system\">\n            <img *ngIf=\"item.logo; else partnerName\" [src]=\"item.logo\" [alt]=\"item.label\" />\n            <ng-template #partnerName>\n              <ion-text>{{ item.label }}</ion-text>\n            </ng-template>\n          </a>\n        </p>\n      </ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i9.NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: i10.CapitalizePipe, name: "capitalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AboutModal, deps: [{ token: i1.TranslateService }, { token: i2.ModalController }, { token: i3.ConfigService }, { token: i4.NetworkService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }, { token: APP_ABOUT_DEVELOPERS, optional: true }, { token: APP_ABOUT_PARTNERS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AboutModal, selector: "app-about-modal", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-title>\n      {{ 'ABOUT.TITLE' | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{ 'COMMON.BTN_CLOSE' | translate }}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-list lines=\"none\">\n    <!-- Peer info -->\n    @if (config$ | async; as config) {\n      <ion-item>\n        <span slot=\"start\">&nbsp;</span>\n        <ion-label class=\"ion-text-wrap\">\n          <h2>\n            <b>{{ config.label | capitalize }}</b>\n            @if (config.name) {\n              -\n              <span [innerHTML]=\"config.name\"></span>\n            }\n          </h2>\n\n          @if (config.description) {\n            <p>\n              <markdown [data]=\"config.description\" emoji></markdown>\n            </p>\n          }\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          @if (name) {\n            <small>{{ 'ABOUT.POWERED_BY' | translate }}</small>\n            {{ name }}\n          }\n          @if (version) {\n            <span [innerHTML]=\"'ABOUT.VERSION' | translate: { version: version }\"></span>\n          }\n          @if(allowVersionDetails) {\n            &nbsp;\n            <small>\n              <a (click)=\"showVersionDetails=!showVersionDetails\" tappable>\n                {{'COMMON.BTN_SHOW_MORE' | translate}}\n                <ion-icon [name]=\"!showVersionDetails ? 'chevron-down' : 'chevron-up'\"></ion-icon>\n              </a>\n            </small>\n          }\n        </h2>\n\n        <!-- version details -->\n        @if (showVersionDetails) {\n          <p class=\"version-details\">\n            <!-- App version -->\n            @if (buildDate) {\n              <small>\n                <ion-icon name=\"logo-angular\"></ion-icon>\n                <span [innerHTML]=\"'ABOUT.APP_VERSION' | translate: { version: version }\"></span>\n                &nbsp;\n                <ion-icon name=\"time-outline\"></ion-icon>\n                {{ buildDate | dateFormat: { time: true, seconds: false } }}\n              </small>\n              <br/>\n            }\n            <!-- Pod version -->\n            @if (nodeInfo?.softwareVersion && nodeInfo.buildDate) {\n                <small>\n                  <ion-icon name=\"server\"></ion-icon>\n                  <span [innerHTML]=\"'ABOUT.POD_VERSION' | translate: { version: nodeInfo.softwareVersion }\"></span>\n                  &nbsp;\n                  <ion-icon name=\"time-outline\"></ion-icon>\n                  {{ nodeInfo.buildDate | dateFormat: { time: true, seconds: false } }}\n                </small>\n            }\n          </p>\n        }\n\n        <!-- license-->\n        <p [innerHTML]=\"'ABOUT.LICENSE' | translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    <ion-item *ngIf=\"forumUrl || helpUrl\">\n      <mat-icon slot=\"start\">help_outline</mat-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.HELP' | translate }}\n        </p>\n        <p>\n          <ion-button fill=\"solid\" color=\"accent\" href=\"{{ helpUrl }}\" target=\"help\" size=\"default\">\n            <mat-icon slot=\"start\">description</mat-icon>\n            <ion-text translate>ABOUT.USER_MANUAL</ion-text>\n          </ion-button>\n          <ion-button fill=\"solid\" color=\"secondary\" href=\"{{ forumUrl }}\" target=\"forum\" size=\"default\">\n            <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n            <ion-text translate>ABOUT.FORUM</ion-text>\n          </ion-button>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Report issue -->\n    <ion-item *ngIf=\"reportIssueUrl\">\n      <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.REPORT_ISSUE' | translate }}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{ reportIssueUrl }}\" target=\"_system\" translate>ABOUT.BTN_REPORT_ISSUE</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Source code -->\n    <ion-item *ngIf=\"sourceUrl\">\n      <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.SOURCE_CODE' | translate }}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{ sourceUrl }}\" target=\"_system\">{{ sourceUrl }}</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Developers -->\n    <ion-item *ngIf=\"developers | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.DEVELOPED_BY' | translate }}\n        </p>\n        <ion-list lines=\"none\">\n          <ion-item *ngFor=\"let item of developers\" class=\"ion-no-padding\">\n            <ion-label>\n              <p>\n                <a color=\"primary\" href=\"{{ item.siteUrl }}\" target=\"_system\">{{ item.name || item.label }}</a>\n              </p>\n            </ion-label>\n            <ion-img slot=\"end\" [src]=\"item.logo\" />\n          </ion-item>\n        </ion-list>\n      </ion-label>\n    </ion-item>\n\n    <!-- Partners -->\n    <ion-item class=\"item-partners\" *ngIf=\"partners | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n      <ion-text>\n        <p>{{ 'ABOUT.PARTNERS' | translate }}</p>\n        <p>\n          <a *ngFor=\"let item of partners\" href=\"{{ item.siteUrl }}\" class=\"partners\" target=\"_system\">\n            <img *ngIf=\"item.logo; else partnerName\" [src]=\"item.logo\" [alt]=\"item.label\" />\n            <ng-template #partnerName>\n              <ion-text>{{ item.label }}</ion-text>\n            </ng-template>\n          </a>\n        </p>\n      </ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i9.NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: i10.CapitalizePipe, name: "capitalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AboutModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AboutModal, decorators: [{
             type: Component,
             args: [{ selector: 'app-about-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-title>\n      {{ 'ABOUT.TITLE' | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{ 'COMMON.BTN_CLOSE' | translate }}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-list lines=\"none\">\n    <!-- Peer info -->\n    @if (config$ | async; as config) {\n      <ion-item>\n        <span slot=\"start\">&nbsp;</span>\n        <ion-label class=\"ion-text-wrap\">\n          <h2>\n            <b>{{ config.label | capitalize }}</b>\n            @if (config.name) {\n              -\n              <span [innerHTML]=\"config.name\"></span>\n            }\n          </h2>\n\n          @if (config.description) {\n            <p>\n              <markdown [data]=\"config.description\" emoji></markdown>\n            </p>\n          }\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          @if (name) {\n            <small>{{ 'ABOUT.POWERED_BY' | translate }}</small>\n            {{ name }}\n          }\n          @if (version) {\n            <span [innerHTML]=\"'ABOUT.VERSION' | translate: { version: version }\"></span>\n          }\n          @if(allowVersionDetails) {\n            &nbsp;\n            <small>\n              <a (click)=\"showVersionDetails=!showVersionDetails\" tappable>\n                {{'COMMON.BTN_SHOW_MORE' | translate}}\n                <ion-icon [name]=\"!showVersionDetails ? 'chevron-down' : 'chevron-up'\"></ion-icon>\n              </a>\n            </small>\n          }\n        </h2>\n\n        <!-- version details -->\n        @if (showVersionDetails) {\n          <p class=\"version-details\">\n            <!-- App version -->\n            @if (buildDate) {\n              <small>\n                <ion-icon name=\"logo-angular\"></ion-icon>\n                <span [innerHTML]=\"'ABOUT.APP_VERSION' | translate: { version: version }\"></span>\n                &nbsp;\n                <ion-icon name=\"time-outline\"></ion-icon>\n                {{ buildDate | dateFormat: { time: true, seconds: false } }}\n              </small>\n              <br/>\n            }\n            <!-- Pod version -->\n            @if (nodeInfo?.softwareVersion && nodeInfo.buildDate) {\n                <small>\n                  <ion-icon name=\"server\"></ion-icon>\n                  <span [innerHTML]=\"'ABOUT.POD_VERSION' | translate: { version: nodeInfo.softwareVersion }\"></span>\n                  &nbsp;\n                  <ion-icon name=\"time-outline\"></ion-icon>\n                  {{ nodeInfo.buildDate | dateFormat: { time: true, seconds: false } }}\n                </small>\n            }\n          </p>\n        }\n\n        <!-- license-->\n        <p [innerHTML]=\"'ABOUT.LICENSE' | translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    <ion-item *ngIf=\"forumUrl || helpUrl\">\n      <mat-icon slot=\"start\">help_outline</mat-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.HELP' | translate }}\n        </p>\n        <p>\n          <ion-button fill=\"solid\" color=\"accent\" href=\"{{ helpUrl }}\" target=\"help\" size=\"default\">\n            <mat-icon slot=\"start\">description</mat-icon>\n            <ion-text translate>ABOUT.USER_MANUAL</ion-text>\n          </ion-button>\n          <ion-button fill=\"solid\" color=\"secondary\" href=\"{{ forumUrl }}\" target=\"forum\" size=\"default\">\n            <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n            <ion-text translate>ABOUT.FORUM</ion-text>\n          </ion-button>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Report issue -->\n    <ion-item *ngIf=\"reportIssueUrl\">\n      <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.REPORT_ISSUE' | translate }}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{ reportIssueUrl }}\" target=\"_system\" translate>ABOUT.BTN_REPORT_ISSUE</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Source code -->\n    <ion-item *ngIf=\"sourceUrl\">\n      <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.SOURCE_CODE' | translate }}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{ sourceUrl }}\" target=\"_system\">{{ sourceUrl }}</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Developers -->\n    <ion-item *ngIf=\"developers | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{ 'ABOUT.DEVELOPED_BY' | translate }}\n        </p>\n        <ion-list lines=\"none\">\n          <ion-item *ngFor=\"let item of developers\" class=\"ion-no-padding\">\n            <ion-label>\n              <p>\n                <a color=\"primary\" href=\"{{ item.siteUrl }}\" target=\"_system\">{{ item.name || item.label }}</a>\n              </p>\n            </ion-label>\n            <ion-img slot=\"end\" [src]=\"item.logo\" />\n          </ion-item>\n        </ion-list>\n      </ion-label>\n    </ion-item>\n\n    <!-- Partners -->\n    <ion-item class=\"item-partners\" *ngIf=\"partners | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n      <ion-text>\n        <p>{{ 'ABOUT.PARTNERS' | translate }}</p>\n        <p>\n          <a *ngFor=\"let item of partners\" href=\"{{ item.siteUrl }}\" class=\"partners\" target=\"_system\">\n            <img *ngIf=\"item.logo; else partnerName\" [src]=\"item.logo\" [alt]=\"item.label\" />\n            <ng-template #partnerName>\n              <ion-text>{{ item.label }}</ion-text>\n            </ng-template>\n          </a>\n        </p>\n      </ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i2.ModalController }, { type: i3.ConfigService }, { type: i4.NetworkService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{

package/esm2022/src/app/core/about/about.module.mjs

@@ -7,11 +7,11 @@ import { MarkdownModule } from 'ngx-markdown';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppAboutModalModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAboutModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AppAboutModalModule, declarations: [AboutModal], imports: [SharedModule, IonicModule, i1.TranslateModule, MarkdownModule], exports: [TranslateModule, AboutModal] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAboutModalModule, imports: [SharedModule, IonicModule, TranslateModule.forChild(), MarkdownModule, TranslateModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppAboutModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AppAboutModalModule, declarations: [AboutModal], imports: [SharedModule, IonicModule, i1.TranslateModule, MarkdownModule], exports: [TranslateModule, AboutModal] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppAboutModalModule, imports: [SharedModule, IonicModule, TranslateModule.forChild(), MarkdownModule, TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAboutModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppAboutModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SharedModule, IonicModule, TranslateModule.forChild(), MarkdownModule],

package/esm2022/src/app/core/account/account.module.mjs

@@ -14,8 +14,8 @@ import { AppInstallUpgradeCardModule } from '../install/install-upgrade-card.mod
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppAccountModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AppAccountModule, declarations: [AccountPage, UserTokenTable, NewTokenForm, NewTokenModal], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppAccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AppAccountModule, declarations: [AccountPage, UserTokenTable, NewTokenForm, NewTokenModal], imports: [CommonModule,
             SharedModule, i1.TranslateModule, 
             // App modules
             AppFormButtonsBarModule,
@@ -31,7 +31,7 @@ export class AppAccountModule {
             NewTokenModal,
             // Sub modules
             AppChangePasswordModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAccountModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppAccountModule, imports: [CommonModule,
             SharedModule,
             TranslateModule.forChild(),
             // App modules
@@ -44,7 +44,7 @@ export class AppAccountModule {
             // Sub modules
             AppChangePasswordModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAccountModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppAccountModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/core/account/account.page.mjs

@@ -393,10 +393,10 @@ export class AccountPage extends AppForm {
     markAsSaved() {
         this.saving = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i2.AccountService }, { token: i3.NetworkService }, { token: i4.NavController }, { token: i5.AccountValidatorService }, { token: i6.ConfigService }, { token: i0.ChangeDetectorRef }, { token: i7.ImageService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_BASE_HREF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AccountPage, selector: "app-account-page", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, 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  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item 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\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      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        <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              <!-- Avatar block -->\n              @if (showAvatar) {\n                @let accountAvatar = form?.controls?.avatar?.value || form?.value?.avatar || accountService?.account?.avatar || defaultAvatarImage;\n                @let isDefaultAvatar = accountAvatar?.endsWith(defaultAvatarImage);\n                <ion-item lines=\"none\" class=\"ion-margin-bottom\" style=\"--inner-padding-end: 0\">\n                  <ion-button slot=\"start\" fill=\"clear\"\n                              class=\"user-avatar\"\n                              [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                              (click)=\"onChangeAvatar($event)\"\n                              [disabled]=\"disabled\"\n                              [matTooltip]=\"'IMAGE.BTN_CAMERA_SOURCE' | translate\"\n                  >\n                    @if (!accountReadOnly && enabled) {\n                      <ion-icon [class.visible-hover]=\"!isDefaultAvatar\" name=\"camera\" slot=\"icon-only\"></ion-icon>\n                    }\n                  </ion-button>\n                </ion-item>\n              }\n\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\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\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.ENUM.' + item | 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            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\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            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\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%}.user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);overflow:hidden!important;font-size:var(--avatar-size, 96px)!important;line-height:var(--avatar-size, 96px);height:var(--avatar-size, 96px)!important;width:var(--avatar-size, 96px)!important;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);border-radius:50%;display:inline-block}.user-avatar ion-icon{position:fixed;left:0;bottom:16px;width:var(--avatar-size, 96px)}.user-avatar .visible-hover{display:none;visibility:hidden}.user-avatar:hover{background-color:rgba(var(--ion-color-secondary-rgb),.8);border:solid 2px var(--ion-color-secondary-shade);cursor:pointer}.user-avatar:hover .visible-hover{display:inline;visibility:visible}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.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: i4.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.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: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "component", type: i4.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.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: i12.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.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: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "component", type: i15.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: i16.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i17.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i18.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: i19.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", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: i20.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: i21.AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: i22.AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: i23.UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i24.EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: i25.FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i2.AccountService }, { token: i3.NetworkService }, { token: i4.NavController }, { token: i5.AccountValidatorService }, { token: i6.ConfigService }, { token: i0.ChangeDetectorRef }, { token: i7.ImageService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_BASE_HREF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AccountPage, selector: "app-account-page", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, 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  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item 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\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      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        <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              <!-- Avatar block -->\n              @if (showAvatar) {\n                @let accountAvatar = form?.controls?.avatar?.value || form?.value?.avatar || accountService?.account?.avatar || defaultAvatarImage;\n                @let isDefaultAvatar = accountAvatar?.endsWith(defaultAvatarImage);\n                <ion-item lines=\"none\" class=\"ion-margin-bottom\" style=\"--inner-padding-end: 0\">\n                  <ion-button slot=\"start\" fill=\"clear\"\n                              class=\"user-avatar\"\n                              [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                              (click)=\"onChangeAvatar($event)\"\n                              [disabled]=\"disabled\"\n                              [matTooltip]=\"'IMAGE.BTN_CAMERA_SOURCE' | translate\"\n                  >\n                    @if (!accountReadOnly && enabled) {\n                      <ion-icon [class.visible-hover]=\"!isDefaultAvatar\" name=\"camera\" slot=\"icon-only\"></ion-icon>\n                    }\n                  </ion-button>\n                </ion-item>\n              }\n\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\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\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.ENUM.' + item | 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            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\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            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\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%}.user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);overflow:hidden!important;font-size:var(--avatar-size, 96px)!important;line-height:var(--avatar-size, 96px);height:var(--avatar-size, 96px)!important;width:var(--avatar-size, 96px)!important;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);border-radius:50%;display:inline-block}.user-avatar ion-icon{position:fixed;left:0;bottom:16px;width:var(--avatar-size, 96px)}.user-avatar .visible-hover{display:none;visibility:hidden}.user-avatar:hover{background-color:rgba(var(--ion-color-secondary-rgb),.8);border:solid 2px var(--ion-color-secondary-shade);cursor:pointer}.user-avatar:hover .visible-hover{display:inline;visibility:visible}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.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: i4.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.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: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "component", type: i4.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.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: i12.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.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: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "component", type: i15.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: i16.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i17.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i18.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: i19.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", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: i20.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: i21.AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: i22.AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: i23.UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i24.EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: i25.FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccountPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item 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\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      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        <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              <!-- Avatar block -->\n              @if (showAvatar) {\n                @let accountAvatar = form?.controls?.avatar?.value || form?.value?.avatar || accountService?.account?.avatar || defaultAvatarImage;\n                @let isDefaultAvatar = accountAvatar?.endsWith(defaultAvatarImage);\n                <ion-item lines=\"none\" class=\"ion-margin-bottom\" style=\"--inner-padding-end: 0\">\n                  <ion-button slot=\"start\" fill=\"clear\"\n                              class=\"user-avatar\"\n                              [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                              (click)=\"onChangeAvatar($event)\"\n                              [disabled]=\"disabled\"\n                              [matTooltip]=\"'IMAGE.BTN_CAMERA_SOURCE' | translate\"\n                  >\n                    @if (!accountReadOnly && enabled) {\n                      <ion-icon [class.visible-hover]=\"!isDefaultAvatar\" name=\"camera\" slot=\"icon-only\"></ion-icon>\n                    }\n                  </ion-button>\n                </ion-item>\n              }\n\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\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\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.ENUM.' + item | 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            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\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            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\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%}.user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);overflow:hidden!important;font-size:var(--avatar-size, 96px)!important;line-height:var(--avatar-size, 96px);height:var(--avatar-size, 96px)!important;width:var(--avatar-size, 96px)!important;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);border-radius:50%;display:inline-block}.user-avatar ion-icon{position:fixed;left:0;bottom:16px;width:var(--avatar-size, 96px)}.user-avatar .visible-hover{display:none;visibility:hidden}.user-avatar:hover{background-color:rgba(var(--ion-color-secondary-rgb),.8);border:solid 2px var(--ion-color-secondary-shade);cursor:pointer}.user-avatar:hover .visible-hover{display:inline;visibility:visible}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.UntypedFormBuilder }, { type: i2.AccountService }, { type: i3.NetworkService }, { type: i4.NavController }, { type: i5.AccountValidatorService }, { type: i6.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i7.ImageService }, { type: i26.Environment, decorators: [{

package/esm2022/src/app/core/account/new-token.form.mjs

@@ -91,10 +91,10 @@ export class NewTokenForm extends AppForm {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewTokenForm, deps: [{ token: i0.Injector }, { token: i1.UserTokenValidatorService }, { token: i2.AccountService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NewTokenForm, selector: "app-new-token-form", inputs: { showScopes: "showScopes", tokenScopes: "tokenScopes", existingNames: "existingNames", mobile: "mobile" }, usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\">\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col>\n        <mat-form-field>\n          <mat-label>{{ 'ACCOUNT.TOKENS.CREATE.NAME' | translate }}</mat-label>\n          <input\n            matInput\n            [appAutofocus]=\"true\"\n            [autofocusDelay]=\"500\"\n            formControlName=\"name\"\n            autocomplete=\"off\"\n            required\n            [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n          />\n          <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.touched\" translate>\n            ERROR.FIELD_REQUIRED\n          </mat-error>\n          <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>\n            ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS\n          </mat-error>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n    @if (showScopes) {\n      <ion-row>\n        <ion-col>\n          <mat-chips-field\n            formControlName=\"scopes\"\n            appearance=\"fill\"\n            chipColor=\"primary\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n            [config]=\"tokenConfig\"\n            [mobile]=\"mobile\"\n            [debug]=\"false\"\n            [required]=\"true\"\n            [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n          >\n            <mat-error *ngIf=\"form.controls.name.hasError('notEmptyArray') && form.controls.name.touched\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-chips-field>\n        </ion-col>\n      </ion-row>\n    }\n    <ion-row>\n      <ion-col>\n        <mat-date-field\n          formControlName=\"expirationDate\"\n          [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n          [mobile]=\"mobile\"\n          [required]=\"true\"\n          [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n        ></mat-date-field>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-button\n          *ngIf=\"form | formGetValue: 'token' | isNilOrBlank; else showToken\"\n          [title]=\"!showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate) : ''\"\n          (click)=\"generate($event)\"\n          [disabled]=\"form.invalid\"\n        >\n          {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate }}\n        </ion-button>\n        <ng-template #showToken>\n          <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>\n          <mat-form-field subscriptSizing=\"dynamic\">\n            <textarea\n              matInput\n              formControlName=\"token\"\n              readonly\n              style=\"height: auto; background-color: lightgray\"\n              rows=\"8\"\n            ></textarea>\n            <button\n              matSuffix\n              mat-icon-button\n              [title]=\"!showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate) : ''\"\n              (click)=\"copy($event)\"\n            >\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          </mat-form-field>\n        </ng-template>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: i4.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: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "directive", type: i5.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.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: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: i13.MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "showChips", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i14.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i15.IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: i15.IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i16.FormGetValuePipe, name: "formGetValue" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTokenForm, deps: [{ token: i0.Injector }, { token: i1.UserTokenValidatorService }, { token: i2.AccountService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NewTokenForm, selector: "app-new-token-form", inputs: { showScopes: "showScopes", tokenScopes: "tokenScopes", existingNames: "existingNames", mobile: "mobile" }, usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\">\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col>\n        <mat-form-field>\n          <mat-label>{{ 'ACCOUNT.TOKENS.CREATE.NAME' | translate }}</mat-label>\n          <input\n            matInput\n            [appAutofocus]=\"true\"\n            [autofocusDelay]=\"500\"\n            formControlName=\"name\"\n            autocomplete=\"off\"\n            required\n            [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n          />\n          <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.touched\" translate>\n            ERROR.FIELD_REQUIRED\n          </mat-error>\n          <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>\n            ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS\n          </mat-error>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n    @if (showScopes) {\n      <ion-row>\n        <ion-col>\n          <mat-chips-field\n            formControlName=\"scopes\"\n            appearance=\"fill\"\n            chipColor=\"primary\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n            [config]=\"tokenConfig\"\n            [mobile]=\"mobile\"\n            [debug]=\"false\"\n            [required]=\"true\"\n            [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n          >\n            <mat-error *ngIf=\"form.controls.name.hasError('notEmptyArray') && form.controls.name.touched\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-chips-field>\n        </ion-col>\n      </ion-row>\n    }\n    <ion-row>\n      <ion-col>\n        <mat-date-field\n          formControlName=\"expirationDate\"\n          [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n          [mobile]=\"mobile\"\n          [required]=\"true\"\n          [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n        ></mat-date-field>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-button\n          *ngIf=\"form | formGetValue: 'token' | isNilOrBlank; else showToken\"\n          [title]=\"!showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate) : ''\"\n          (click)=\"generate($event)\"\n          [disabled]=\"form.invalid\"\n        >\n          {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate }}\n        </ion-button>\n        <ng-template #showToken>\n          <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>\n          <mat-form-field subscriptSizing=\"dynamic\">\n            <textarea\n              matInput\n              formControlName=\"token\"\n              readonly\n              style=\"height: auto; background-color: lightgray\"\n              rows=\"8\"\n            ></textarea>\n            <button\n              matSuffix\n              mat-icon-button\n              [title]=\"!showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate) : ''\"\n              (click)=\"copy($event)\"\n            >\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          </mat-form-field>\n        </ng-template>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: i4.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: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "directive", type: i5.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.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: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: i13.MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "showChips", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i14.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i15.IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: i15.IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i16.FormGetValuePipe, name: "formGetValue" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewTokenForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTokenForm, decorators: [{
             type: Component,
             args: [{ selector: 'app-new-token-form', template: "<form class=\"form-container\" [formGroup]=\"form\">\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col>\n        <mat-form-field>\n          <mat-label>{{ 'ACCOUNT.TOKENS.CREATE.NAME' | translate }}</mat-label>\n          <input\n            matInput\n            [appAutofocus]=\"true\"\n            [autofocusDelay]=\"500\"\n            formControlName=\"name\"\n            autocomplete=\"off\"\n            required\n            [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n          />\n          <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.touched\" translate>\n            ERROR.FIELD_REQUIRED\n          </mat-error>\n          <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>\n            ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS\n          </mat-error>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n    @if (showScopes) {\n      <ion-row>\n        <ion-col>\n          <mat-chips-field\n            formControlName=\"scopes\"\n            appearance=\"fill\"\n            chipColor=\"primary\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n            [config]=\"tokenConfig\"\n            [mobile]=\"mobile\"\n            [debug]=\"false\"\n            [required]=\"true\"\n            [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n          >\n            <mat-error *ngIf=\"form.controls.name.hasError('notEmptyArray') && form.controls.name.touched\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-chips-field>\n        </ion-col>\n      </ion-row>\n    }\n    <ion-row>\n      <ion-col>\n        <mat-date-field\n          formControlName=\"expirationDate\"\n          [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n          [mobile]=\"mobile\"\n          [required]=\"true\"\n          [readonly]=\"form | formGetValue: 'token' | isNotNilOrBlank\"\n        ></mat-date-field>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-button\n          *ngIf=\"form | formGetValue: 'token' | isNilOrBlank; else showToken\"\n          [title]=\"!showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate) : ''\"\n          (click)=\"generate($event)\"\n          [disabled]=\"form.invalid\"\n        >\n          {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate }}\n        </ion-button>\n        <ng-template #showToken>\n          <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>\n          <mat-form-field subscriptSizing=\"dynamic\">\n            <textarea\n              matInput\n              formControlName=\"token\"\n              readonly\n              style=\"height: auto; background-color: lightgray\"\n              rows=\"8\"\n            ></textarea>\n            <button\n              matSuffix\n              mat-icon-button\n              [title]=\"!showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate) : ''\"\n              (click)=\"copy($event)\"\n            >\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          </mat-form-field>\n        </ng-template>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.UserTokenValidatorService }, { type: i2.AccountService }, { type: i0.ChangeDetectorRef }], propDecorators: { showScopes: [{

package/esm2022/src/app/core/account/new-token.modal.mjs

@@ -47,10 +47,10 @@ export class NewTokenModal extends AppEntityEditorModal {
     async getValue() {
         return this.newTokenForm.getValue();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewTokenModal, deps: [{ token: i0.Injector }, { token: i1.AccountService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewTokenModal, selector: "app-new-token-modal", inputs: { showScopes: "showScopes", tokenScopes: "tokenScopes", existingNames: "existingNames" }, viewQueries: [{ propertyName: "newTokenForm", first: true, predicate: NewTokenForm, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar\n  modalName=\"NewTokenModal\"\n  [title]=\"titleSubject | async\"\n  [color]=\"'secondary'\"\n  [showSpinner]=\"loading\"\n  [canValidate]=\"!loading && valid\"\n  (cancel)=\"close($event)\"\n  (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content class=\"ion-padding\">\n  <!-- error -->\n  <ion-item *ngIf=\"error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>\n\n  <app-new-token-form\n    [showScopes]=\"showScopes\"\n    [tokenScopes]=\"tokenScopes\"\n    [existingNames]=\"existingNames\"\n    [mobile]=\"mobile\"\n  ></app-new-token-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <ng-content></ng-content>\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"invalid ? 'clear' : 'solid'\"\n          [disabled]=\"disabled || loading || invalid\"\n          (click)=\"saveAndClose($event)\"\n          (keyup.enter)=\"saveAndClose($event)\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.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: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i5.ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "component", type: i6.NewTokenForm, selector: "app-new-token-form", inputs: ["showScopes", "tokenScopes", "existingNames", "mobile"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTokenModal, deps: [{ token: i0.Injector }, { token: i1.AccountService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTokenModal, selector: "app-new-token-modal", inputs: { showScopes: "showScopes", tokenScopes: "tokenScopes", existingNames: "existingNames" }, viewQueries: [{ propertyName: "newTokenForm", first: true, predicate: NewTokenForm, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar\n  modalName=\"NewTokenModal\"\n  [title]=\"titleSubject | async\"\n  [color]=\"'secondary'\"\n  [showSpinner]=\"loading\"\n  [canValidate]=\"!loading && valid\"\n  (cancel)=\"close($event)\"\n  (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content class=\"ion-padding\">\n  <!-- error -->\n  <ion-item *ngIf=\"error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>\n\n  <app-new-token-form\n    [showScopes]=\"showScopes\"\n    [tokenScopes]=\"tokenScopes\"\n    [existingNames]=\"existingNames\"\n    [mobile]=\"mobile\"\n  ></app-new-token-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <ng-content></ng-content>\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"invalid ? 'clear' : 'solid'\"\n          [disabled]=\"disabled || loading || invalid\"\n          (click)=\"saveAndClose($event)\"\n          (keyup.enter)=\"saveAndClose($event)\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.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: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i5.ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "component", type: i6.NewTokenForm, selector: "app-new-token-form", inputs: ["showScopes", "tokenScopes", "existingNames", "mobile"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewTokenModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTokenModal, decorators: [{
             type: Component,
             args: [{ selector: 'app-new-token-modal', template: "<app-modal-toolbar\n  modalName=\"NewTokenModal\"\n  [title]=\"titleSubject | async\"\n  [color]=\"'secondary'\"\n  [showSpinner]=\"loading\"\n  [canValidate]=\"!loading && valid\"\n  (cancel)=\"close($event)\"\n  (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content class=\"ion-padding\">\n  <!-- error -->\n  <ion-item *ngIf=\"error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>\n\n  <app-new-token-form\n    [showScopes]=\"showScopes\"\n    [tokenScopes]=\"tokenScopes\"\n    [existingNames]=\"existingNames\"\n    [mobile]=\"mobile\"\n  ></app-new-token-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <ng-content></ng-content>\n      </ion-col>\n\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"invalid ? 'clear' : 'solid'\"\n          [disabled]=\"disabled || loading || invalid\"\n          (click)=\"saveAndClose($event)\"\n          (keyup.enter)=\"saveAndClose($event)\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AccountService }], propDecorators: { showScopes: [{

package/esm2022/src/app/core/account/password/change-password.form.mjs

@@ -47,10 +47,10 @@ export class ChangePasswordForm extends AppForm {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordForm, selector: "app-change-password-form", inputs: { usernamePlaceholder: "usernamePlaceholder", emailValidator: "emailValidator", username: "username" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- Username -->\n  @let formControl = form | formGetControl: 'username';\n  <mat-form-field>\n    <mat-label>{{ usernamePlaceholder | translate }}</mat-label>\n    <input matInput formControlName=\"username\" readonly />\n\n    <!-- error -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('email') {\n          <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n        }\n      }\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Password -->\n  <mat-form-field>\n    <mat-label>{{ 'REGISTER.STEP_PASSWORD' | translate }}</mat-label>\n    <input\n      matInput\n      formControlName=\"password\"\n      autocomplete=\"section-red new-password\"\n      [type]=\"showPwd ? 'text' : 'password'\"\n      required\n    />\n    <button matSuffix mat-icon-button type=\"button\" (click)=\"showPwd = !showPwd\" tabindex=\"-1\">\n      <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </button>\n    <mat-error *ngIf=\"form.controls.password.hasError('required') && form.controls.password.touched\">\n      {{ 'ERROR.FIELD_REQUIRED' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.password.hasError('minlength') && form.controls.password.touched\">\n      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: form.controls.password.errors.minlength }}</span>\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Confirm password -->\n  <mat-form-field>\n    <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>\n    <input\n      matInput\n      formControlName=\"confirmPassword\"\n      autocomplete=\"section-red new-password\"\n      [type]=\"showConfirmPwd ? 'text' : 'password'\"\n      required\n    />\n    <button mat-icon-button matSuffix (click)=\"showConfirmPwd = !showConfirmPwd\" tabindex=\"-1\">\n      <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </button>\n    <mat-error *ngIf=\"form.controls.confirmPassword.hasError('required') && form.controls.confirmPassword.touched\">\n      {{ 'ERROR.FIELD_REQUIRED' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.confirmPassword.hasError('equals') && form.controls.confirmPassword.touched\">\n      <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n    </mat-error>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i9.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i10.FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChangePasswordForm, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChangePasswordForm, selector: "app-change-password-form", inputs: { usernamePlaceholder: "usernamePlaceholder", emailValidator: "emailValidator", username: "username" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- Username -->\n  @let formControl = form | formGetControl: 'username';\n  <mat-form-field>\n    <mat-label>{{ usernamePlaceholder | translate }}</mat-label>\n    <input matInput formControlName=\"username\" readonly />\n\n    <!-- error -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('email') {\n          <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n        }\n      }\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Password -->\n  <mat-form-field>\n    <mat-label>{{ 'REGISTER.STEP_PASSWORD' | translate }}</mat-label>\n    <input\n      matInput\n      formControlName=\"password\"\n      autocomplete=\"section-red new-password\"\n      [type]=\"showPwd ? 'text' : 'password'\"\n      required\n    />\n    <button matSuffix mat-icon-button type=\"button\" (click)=\"showPwd = !showPwd\" tabindex=\"-1\">\n      <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </button>\n    <mat-error *ngIf=\"form.controls.password.hasError('required') && form.controls.password.touched\">\n      {{ 'ERROR.FIELD_REQUIRED' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.password.hasError('minlength') && form.controls.password.touched\">\n      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: form.controls.password.errors.minlength }}</span>\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Confirm password -->\n  <mat-form-field>\n    <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>\n    <input\n      matInput\n      formControlName=\"confirmPassword\"\n      autocomplete=\"section-red new-password\"\n      [type]=\"showConfirmPwd ? 'text' : 'password'\"\n      required\n    />\n    <button mat-icon-button matSuffix (click)=\"showConfirmPwd = !showConfirmPwd\" tabindex=\"-1\">\n      <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </button>\n    <mat-error *ngIf=\"form.controls.confirmPassword.hasError('required') && form.controls.confirmPassword.touched\">\n      {{ 'ERROR.FIELD_REQUIRED' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.confirmPassword.hasError('equals') && form.controls.confirmPassword.touched\">\n      <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n    </mat-error>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i9.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i10.FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChangePasswordForm, decorators: [{
             type: Component,
             args: [{ selector: 'app-change-password-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- Username -->\n  @let formControl = form | formGetControl: 'username';\n  <mat-form-field>\n    <mat-label>{{ usernamePlaceholder | translate }}</mat-label>\n    <input matInput formControlName=\"username\" readonly />\n\n    <!-- error -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('email') {\n          <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n        }\n      }\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Password -->\n  <mat-form-field>\n    <mat-label>{{ 'REGISTER.STEP_PASSWORD' | translate }}</mat-label>\n    <input\n      matInput\n      formControlName=\"password\"\n      autocomplete=\"section-red new-password\"\n      [type]=\"showPwd ? 'text' : 'password'\"\n      required\n    />\n    <button matSuffix mat-icon-button type=\"button\" (click)=\"showPwd = !showPwd\" tabindex=\"-1\">\n      <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </button>\n    <mat-error *ngIf=\"form.controls.password.hasError('required') && form.controls.password.touched\">\n      {{ 'ERROR.FIELD_REQUIRED' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.password.hasError('minlength') && form.controls.password.touched\">\n      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: form.controls.password.errors.minlength }}</span>\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Confirm password -->\n  <mat-form-field>\n    <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>\n    <input\n      matInput\n      formControlName=\"confirmPassword\"\n      autocomplete=\"section-red new-password\"\n      [type]=\"showConfirmPwd ? 'text' : 'password'\"\n      required\n    />\n    <button mat-icon-button matSuffix (click)=\"showConfirmPwd = !showConfirmPwd\" tabindex=\"-1\">\n      <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </button>\n    <mat-error *ngIf=\"form.controls.confirmPassword.hasError('required') && form.controls.confirmPassword.touched\">\n      {{ 'ERROR.FIELD_REQUIRED' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"form.controls.confirmPassword.hasError('equals') && form.controls.confirmPassword.touched\">\n      <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n    </mat-error>\n  </mat-form-field>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { usernamePlaceholder: [{

package/esm2022/src/app/core/account/password/change-password.module.mjs

@@ -7,11 +7,11 @@ import { AppChangePasswordPage } from './change-password.page';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppChangePasswordModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppChangePasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AppChangePasswordModule, declarations: [ChangePasswordForm, AppChangePasswordPage], imports: [SharedModule, RouterModule, i1.TranslateModule], exports: [TranslateModule, ChangePasswordForm, AppChangePasswordPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppChangePasswordModule, imports: [SharedModule, RouterModule, TranslateModule.forChild(), TranslateModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppChangePasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AppChangePasswordModule, declarations: [ChangePasswordForm, AppChangePasswordPage], imports: [SharedModule, RouterModule, i1.TranslateModule], exports: [TranslateModule, ChangePasswordForm, AppChangePasswordPage] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppChangePasswordModule, imports: [SharedModule, RouterModule, TranslateModule.forChild(), TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppChangePasswordModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppChangePasswordModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SharedModule, RouterModule, TranslateModule.forChild()],