@sumaris-net/ngx-components 18.23.59 → 18.23.60

package/esm2022/src/app/core/menu/testing/menu.testing.mjs

@@ -148,10 +148,10 @@ export class MenuTestingPage extends AppTabEditor {
         console.log('incrementThirdTabBadge');
         this.$thirdTabBadge.next(this.$thirdTabBadge.value + 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingPage, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i3.TranslateService }, { token: i4.MenuService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuTestingPage, selector: "app-testing-menu", inputs: { subSelectedTabIndex: "subSelectedTabIndex" }, outputs: { subSelectedTabIndexChange: "subSelectedTabIndexChange" }, viewQueries: [{ propertyName: "subTabGroup", first: true, predicate: ["subTabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon>information-circle</mat-icon>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"settings\"></ion-icon></mat-icon>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuBadge]=\"$thirdTabBadge | async\"\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [matBadge]=\"$thirdTabBadge | async\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>\n          A third tab (with a badge)\n        </p>\n        <ion-button (click)=\"incrementThirdTabBadge()\">Increment badge count</ion-button>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"person\"></ion-icon></mat-icon>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { 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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.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: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i10.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuTestingPage, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i3.TranslateService }, { token: i4.MenuService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MenuTestingPage, selector: "app-testing-menu", inputs: { subSelectedTabIndex: "subSelectedTabIndex" }, outputs: { subSelectedTabIndexChange: "subSelectedTabIndexChange" }, viewQueries: [{ propertyName: "subTabGroup", first: true, predicate: ["subTabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon>information-circle</mat-icon>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"settings\"></ion-icon></mat-icon>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuBadge]=\"$thirdTabBadge | async\"\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [matBadge]=\"$thirdTabBadge | async\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>\n          A third tab (with a badge)\n        </p>\n        <ion-button (click)=\"incrementThirdTabBadge()\">Increment badge count</ion-button>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"person\"></ion-icon></mat-icon>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { 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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.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: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i10.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuTestingPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-testing-menu', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title [innerHTML]=\"$title | async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    (selectedTabChange)=\"onTabChange($event)\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    dynamicHeight\n    [mat-stretch-tabs]=\"toggleStretchTab.checked\"\n  >\n    <!-- TAB: 1 -->\n    <mat-tab\n      label=\"Details\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuTitle]=\"($title | async) || ''\"\n      [parentPath]=\"parentPath\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon>information-circle</mat-icon>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A first tab</p>\n\n        <p [class.cdk-visually-hidden]=\"showThirdTab\">\n          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>\n        </p>\n\n        <p>\n          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeTitle($event)\">Change page title</ion-button>\n\n          <ion-button (click)=\"addSubMenuItem($event)\">Add sub menu other 3</ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, true)\">\n            Add sub menu (outside route) - pinned\n          </ion-button>\n\n          <ion-button (click)=\"addOutsideRouteSubMenuItem($event, false)\">\n            Add sub menu (outside route) - not pinned\n          </ion-button>\n        </p>\n\n        <p>\n          &nbsp;&nbsp;\n          <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled | async\">Disable menu</ion-button>\n          <ion-button (click)=\"enableMenu(true)\" *ngIf=\"(menuService.enabled | async) !== true\">Enable menu</ion-button>\n          <ion-button (click)=\"toggleSplitPaneWhen()\" [disabled]=\"(menuService.enabled | async) !== true\">\n            Toggle split pane\n          </ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab\n      label=\"Second\"\n      class=\"ion-padding\"\n      appSubMenuTab\n      [subMenuIcon]=\"{ icon: 'settings' }\"\n      [subMenuTitle]=\"$secondTabTitle | async\"\n    >\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"settings\"></ion-icon></mat-icon>\n        <ion-label [innerHTML]=\"$secondTabTitle | async\"></ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        <p *ngIf=\"showOtherLinks\">\n          Navigate to :\n          <a [routerLink]=\"childPath + '/1'\">{{ childPath }}/1</a>\n          <br />\n          Navigate to :\n          <a [routerLink]=\"childPath + '/2'\">{{ childPath }}/2</a>\n        </p>\n\n        <p>\n          <ion-button (click)=\"changeSecondTabTitle($event)\">Change tab label</ion-button>\n        </p>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab\n      [label]=\"thirdTabTitle\"\n      class=\"ion-padding\"\n      [disabled]=\"!showThirdTab && !toggleThird.checked\"\n      appSubMenuTab\n      [subMenuBadge]=\"$thirdTabBadge | async\"\n      [subMenuIcon]=\"{ icon: 'none' }\"\n    >\n      <ng-template mat-tab-label>\n        <ion-label [matBadge]=\"$thirdTabBadge | async\" matBadgeColor=\"primary\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>\n          A third tab (with a badge)\n        </p>\n        <ion-button (click)=\"incrementThirdTabBadge()\">Increment badge count</ion-button>\n      </div>\n    </mat-tab>\n\n    <!-- TAB: 4 -->\n    <mat-tab appSubMenuTab [subMenuIcon]=\"{ icon: 'person' }\" label=\"Sub Tab\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <mat-icon><ion-icon name=\"person\"></ion-icon></mat-icon>\n        <ion-label>Sub Tab</ion-label>\n      </ng-template>\n\n      <mat-tab-group\n        #subTabGroup\n        [(selectedIndex)]=\"subSelectedTabIndex\"\n        (selectedTabChange)=\"onTabChange($event, 'subtab')\"\n        class=\"mat-mdc-tab-disabled-hidden\"\n        dynamicHeight\n      >\n        <mat-tab label=\"Sub1\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub1</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>First SubTab</p>\n          </div>\n        </mat-tab>\n\n        <mat-tab label=\"Sub2\" class=\"ion-padding\">\n          <ng-template mat-tab-label>\n            <ion-label>Sub2</ion-label>\n          </ng-template>\n\n          <div class=\"ion-padding\">\n            <p>Second SubTab</p>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.NavController }, { type: i2.AlertController }, { type: i3.TranslateService }, { type: i4.MenuService }], propDecorators: { subSelectedTabIndex: [{

package/esm2022/src/app/core/menu/testing/menu.testing.module.mjs

@@ -45,11 +45,11 @@ const routes = [
     },
 ];
 export class MenuTestingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingModule, declarations: [MenuTestingPage, OtherMenuTestingPage], imports: [CommonModule, i1.RouterModule, AppMenuModule, SharedModule], exports: [RouterModule, MenuTestingPage, OtherMenuTestingPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingModule, imports: [CommonModule, RouterModule.forChild(routes), AppMenuModule, SharedModule, RouterModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: MenuTestingModule, declarations: [MenuTestingPage, OtherMenuTestingPage], imports: [CommonModule, i1.RouterModule, AppMenuModule, SharedModule], exports: [RouterModule, MenuTestingPage, OtherMenuTestingPage] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuTestingModule, imports: [CommonModule, RouterModule.forChild(routes), AppMenuModule, SharedModule, RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule.forChild(routes), AppMenuModule, SharedModule],

package/esm2022/src/app/core/offline/update-offline-mode-card.component.mjs

@@ -12,10 +12,10 @@ export class AppUpdateOfflineModeCard {
     ngOnDestroy() {
         this.onUpdateClick.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppUpdateOfflineModeCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppUpdateOfflineModeCard, selector: "app-update-offline-mode-card", inputs: { progressionMessage: "progressionMessage", progressionValue: "progressionValue" }, outputs: { onUpdateClick: "onUpdateClick" }, ngImport: i0, template: "<!-- Update offline feature card-->\n<ion-card color=\"accent\" class=\"main ion-no-margin\" @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE' | translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP' | translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\" (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-text small{font-size:85%}\n"], dependencies: [{ kind: "directive", type: i1.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.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { 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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppUpdateOfflineModeCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppUpdateOfflineModeCard, selector: "app-update-offline-mode-card", inputs: { progressionMessage: "progressionMessage", progressionValue: "progressionValue" }, outputs: { onUpdateClick: "onUpdateClick" }, ngImport: i0, template: "<!-- Update offline feature card-->\n<ion-card color=\"accent\" class=\"main ion-no-margin\" @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE' | translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP' | translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\" (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-text small{font-size:85%}\n"], dependencies: [{ kind: "directive", type: i1.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.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { 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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppUpdateOfflineModeCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppUpdateOfflineModeCard, decorators: [{
             type: Component,
             args: [{ selector: 'app-update-offline-mode-card', changeDetection: ChangeDetectionStrategy.OnPush, animations: [slideUpDownAnimation], template: "<!-- Update offline feature card-->\n<ion-card color=\"accent\" class=\"main ion-no-margin\" @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE' | translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP' | translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\" (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-text small{font-size:85%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progressionMessage: [{

package/esm2022/src/app/core/offline/update-offline-mode-card.module.mjs

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

package/esm2022/src/app/core/peer/select-peer.modal.mjs

@@ -302,10 +302,10 @@ export class SelectPeerModal extends RxState {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectPeerModal, deps: [{ token: i1.ModalController }, { token: i1.PopoverController }, { token: i2.TranslateService }, { token: i3.HttpClient }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }, { token: APP_LOGGING_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectPeerModal, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", peerFilter: "peerFilter", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        <ion-button\n          (click)=\"refresh($event)\"\n          *ngIf=\"onRefresh.observed\"\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\n        >\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  <ion-toolbar *ngIf=\"showSearchBar\">\n    <ion-searchbar\n      #searchbar\n      animated\n      type=\"search\"\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\n      show-clear-button=\"always\"\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n      [(ngModel)]=\"searchText\"\n      (ionCancel)=\"toggleSearchBar()\"\n    ></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span translate>NETWORK.PEER.OFFLINE</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.HighlightPipe, name: "highlight" }, { kind: "pipe", type: i12.NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: i13.IsNilPipe, name: "isNil" }, { kind: "pipe", type: i14.BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: i15.ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectPeerModal, deps: [{ token: i1.ModalController }, { token: i1.PopoverController }, { token: i2.TranslateService }, { token: i3.HttpClient }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }, { token: APP_LOGGING_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectPeerModal, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", peerFilter: "peerFilter", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        <ion-button\n          (click)=\"refresh($event)\"\n          *ngIf=\"onRefresh.observed\"\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\n        >\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  <ion-toolbar *ngIf=\"showSearchBar\">\n    <ion-searchbar\n      #searchbar\n      animated\n      type=\"search\"\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\n      show-clear-button=\"always\"\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n      [(ngModel)]=\"searchText\"\n      (ionCancel)=\"toggleSearchBar()\"\n    ></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span translate>NETWORK.PEER.OFFLINE</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.HighlightPipe, name: "highlight" }, { kind: "pipe", type: i12.NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: i13.IsNilPipe, name: "isNil" }, { kind: "pipe", type: i14.BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: i15.ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectPeerModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectPeerModal, decorators: [{
             type: Component,
             args: [{ selector: 'select-peer-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation], template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        <ion-button\n          (click)=\"refresh($event)\"\n          *ngIf=\"onRefresh.observed\"\n          [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\"\n        >\n          <mat-icon slot=\"icon-only\">refresh</mat-icon>\n        </ion-button>\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  <ion-toolbar *ngIf=\"showSearchBar\">\n    <ion-searchbar\n      #searchbar\n      animated\n      type=\"search\"\n      [class.cdk-visually-hidden]=\"!showSearchBar\"\n      show-clear-button=\"always\"\n      [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n      [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n      [(ngModel)]=\"searchText\"\n      (ionCancel)=\"toggleSearchBar()\"\n    ></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span translate>NETWORK.PEER.OFFLINE</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-header-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"] }]
         }], ctorParameters: () => [{ type: i1.ModalController }, { type: i1.PopoverController }, { type: i2.TranslateService }, { type: i3.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i16.Environment, decorators: [{

package/esm2022/src/app/core/peer/select-peer.module.mjs

@@ -9,15 +9,15 @@ import { FormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppSelectPeerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppSelectPeerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AppSelectPeerModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppSelectPeerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AppSelectPeerModule, declarations: [
             // Network
             SelectPeerModal], imports: [SharedModule, i1.TranslateModule, AppTextPopoverModule, CorePipesModule, FormsModule], exports: [TranslateModule,
             // Components
             SelectPeerModal] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppSelectPeerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [SharedModule, TranslateModule.forChild(), AppTextPopoverModule, CorePipesModule, FormsModule, TranslateModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppSelectPeerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [SharedModule, TranslateModule.forChild(), AppTextPopoverModule, CorePipesModule, FormsModule, TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppSelectPeerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppSelectPeerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/src/app/core/register/register-confirm.page.mjs

@@ -80,10 +80,10 @@ export class RegisterConfirmPage {
             this.loading = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterConfirmPage, deps: [{ token: i1.PlatformService }, { token: i2.AccountService }, { token: i3.ActivatedRoute }, { token: i4.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegisterConfirmPage, selector: "app-register-confirm-page", ngImport: i0, template: "<app-toolbar [title]=\"'REGISTER.CONFIRMED.TITLE' | translate\" color=\"primary\"></app-toolbar>\n\n<ion-content class=\"bg-image-cover center ion-padding\" [ngStyle]=\"contentStyle\">\n  <p class=\"hidden-xs ion-padding\">\n    &nbsp;\n    <br />\n    <br />\n  </p>\n  <p class=\"hidden-xs\">&nbsp;</p>\n\n  <ion-card>\n    <ion-card-content>\n      <div>\n        <ng-container *ngIf=\"loading\">\n          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>\n          <p><ion-spinner></ion-spinner></p>\n        </ng-container>\n\n        <!-- error -->\n        <ion-item *ngIf=\"!loading && error\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"error ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </div>\n\n      <div *ngIf=\"!loading && !error\">\n        <h3>\n          <ion-icon name=\"checkmark\"></ion-icon>\n          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>\n        </h3>\n\n        <ion-text>\n          <p [innerHTML]=\"'REGISTER.CONFIRMED.SUCCESS' | translate: { email: email }\"></p>\n          <p *ngIf=\"!isLogin\" [innerHTML]=\"'REGISTER.CONFIRMED.LOGIN_HELP' | translate\"></p>\n        </ion-text>\n      </div>\n    </ion-card-content>\n\n    <ion-footer *ngIf=\"!loading\">\n      <ion-button expand=\"full\" color=\"primary\" [routerLink]=\"['/account']\" *ngIf=\"!isLogin\">\n        <ion-icon name=\"log-in\" slot=\"start\"></ion-icon>\n        <span translate>AUTH.BTN_LOGIN</span>\n      </ion-button>\n\n      <ion-button expand=\"full\" color=\"secondary\" [routerLink]=\"['/account']\" *ngIf=\"isLogin\">\n        <ion-icon name=\"contact\" slot=\"start\"></ion-icon>\n        <span translate>HOME.BTN_MY_ACCOUNT</span>\n      </ion-button>\n    </ion-footer>\n  </ion-card>\n</ion-content>\n", styles: [".center,ion-text,ion-card img,ion-card,ion-content{text-align:center;display:inline-block}ion-content{--ion-background-color: transparent;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;display:inline-block;padding:15px}ion-card{padding:var(--ion-padding);background-color:var(--ion-card-background-color);min-width:240px;max-width:400px;z-index:9}ion-card button{margin-top:16px}ion-card img{max-width:250px}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:auto;max-width:260px}ion-content ion-card ion-footer ion-button{margin-top:8px}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.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: i6.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i6.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i6.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i6.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i6.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i6.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: i6.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i6.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i6.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i6.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i7.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RegisterConfirmPage, deps: [{ token: i1.PlatformService }, { token: i2.AccountService }, { token: i3.ActivatedRoute }, { token: i4.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RegisterConfirmPage, selector: "app-register-confirm-page", ngImport: i0, template: "<app-toolbar [title]=\"'REGISTER.CONFIRMED.TITLE' | translate\" color=\"primary\"></app-toolbar>\n\n<ion-content class=\"bg-image-cover center ion-padding\" [ngStyle]=\"contentStyle\">\n  <p class=\"hidden-xs ion-padding\">\n    &nbsp;\n    <br />\n    <br />\n  </p>\n  <p class=\"hidden-xs\">&nbsp;</p>\n\n  <ion-card>\n    <ion-card-content>\n      <div>\n        <ng-container *ngIf=\"loading\">\n          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>\n          <p><ion-spinner></ion-spinner></p>\n        </ng-container>\n\n        <!-- error -->\n        <ion-item *ngIf=\"!loading && error\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"error ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </div>\n\n      <div *ngIf=\"!loading && !error\">\n        <h3>\n          <ion-icon name=\"checkmark\"></ion-icon>\n          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>\n        </h3>\n\n        <ion-text>\n          <p [innerHTML]=\"'REGISTER.CONFIRMED.SUCCESS' | translate: { email: email }\"></p>\n          <p *ngIf=\"!isLogin\" [innerHTML]=\"'REGISTER.CONFIRMED.LOGIN_HELP' | translate\"></p>\n        </ion-text>\n      </div>\n    </ion-card-content>\n\n    <ion-footer *ngIf=\"!loading\">\n      <ion-button expand=\"full\" color=\"primary\" [routerLink]=\"['/account']\" *ngIf=\"!isLogin\">\n        <ion-icon name=\"log-in\" slot=\"start\"></ion-icon>\n        <span translate>AUTH.BTN_LOGIN</span>\n      </ion-button>\n\n      <ion-button expand=\"full\" color=\"secondary\" [routerLink]=\"['/account']\" *ngIf=\"isLogin\">\n        <ion-icon name=\"contact\" slot=\"start\"></ion-icon>\n        <span translate>HOME.BTN_MY_ACCOUNT</span>\n      </ion-button>\n    </ion-footer>\n  </ion-card>\n</ion-content>\n", styles: [".center,ion-text,ion-card img,ion-card,ion-content{text-align:center;display:inline-block}ion-content{--ion-background-color: transparent;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;display:inline-block;padding:15px}ion-card{padding:var(--ion-padding);background-color:var(--ion-card-background-color);min-width:240px;max-width:400px;z-index:9}ion-card button{margin-top:16px}ion-card img{max-width:250px}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:auto;max-width:260px}ion-content ion-card ion-footer ion-button{margin-top:8px}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.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: i6.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i6.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i6.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i6.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i6.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i6.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: i6.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i6.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i6.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i6.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i7.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8.ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterConfirmPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RegisterConfirmPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-register-confirm-page', template: "<app-toolbar [title]=\"'REGISTER.CONFIRMED.TITLE' | translate\" color=\"primary\"></app-toolbar>\n\n<ion-content class=\"bg-image-cover center ion-padding\" [ngStyle]=\"contentStyle\">\n  <p class=\"hidden-xs ion-padding\">\n    &nbsp;\n    <br />\n    <br />\n  </p>\n  <p class=\"hidden-xs\">&nbsp;</p>\n\n  <ion-card>\n    <ion-card-content>\n      <div>\n        <ng-container *ngIf=\"loading\">\n          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>\n          <p><ion-spinner></ion-spinner></p>\n        </ng-container>\n\n        <!-- error -->\n        <ion-item *ngIf=\"!loading && error\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"error ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </div>\n\n      <div *ngIf=\"!loading && !error\">\n        <h3>\n          <ion-icon name=\"checkmark\"></ion-icon>\n          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>\n        </h3>\n\n        <ion-text>\n          <p [innerHTML]=\"'REGISTER.CONFIRMED.SUCCESS' | translate: { email: email }\"></p>\n          <p *ngIf=\"!isLogin\" [innerHTML]=\"'REGISTER.CONFIRMED.LOGIN_HELP' | translate\"></p>\n        </ion-text>\n      </div>\n    </ion-card-content>\n\n    <ion-footer *ngIf=\"!loading\">\n      <ion-button expand=\"full\" color=\"primary\" [routerLink]=\"['/account']\" *ngIf=\"!isLogin\">\n        <ion-icon name=\"log-in\" slot=\"start\"></ion-icon>\n        <span translate>AUTH.BTN_LOGIN</span>\n      </ion-button>\n\n      <ion-button expand=\"full\" color=\"secondary\" [routerLink]=\"['/account']\" *ngIf=\"isLogin\">\n        <ion-icon name=\"contact\" slot=\"start\"></ion-icon>\n        <span translate>HOME.BTN_MY_ACCOUNT</span>\n      </ion-button>\n    </ion-footer>\n  </ion-card>\n</ion-content>\n", styles: [".center,ion-text,ion-card img,ion-card,ion-content{text-align:center;display:inline-block}ion-content{--ion-background-color: transparent;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;display:inline-block;padding:15px}ion-card{padding:var(--ion-padding);background-color:var(--ion-card-background-color);min-width:240px;max-width:400px;z-index:9}ion-card button{margin-top:16px}ion-card img{max-width:250px}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:auto;max-width:260px}ion-content ion-card ion-footer ion-button{margin-top:8px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i2.AccountService }, { type: i3.ActivatedRoute }, { type: i4.ConfigService }] });

package/esm2022/src/app/core/register/register.form.mjs

@@ -177,10 +177,10 @@ export class RegisterForm {
     enable() {
         this.form.enable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterForm, deps: [{ token: i1.AccountService }, { token: i2.AccountValidatorService }, { token: i3.UntypedFormBuilder }, { token: ENVIRONMENT }, { token: i4.LocalSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RegisterForm, selector: "app-register-form", outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n        <input\n          matInput\n          [appAutofocus]=\"true\"\n          [autofocusDelay]=\"500\"\n          formControlName=\"email\"\n          autocomplete=\"off\"\n          required\n        />\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error\n          *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\"\n        >\n          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>\n          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>\n        <input matInput autocomplete=\"off\" matFormFieldControl formControlName=\"confirmEmail\"/>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.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=\"controls.password.hasError('required') && controls.password.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 8} }}</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=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n    <form\n      [formGroup]=\"forms[2]\"\n      (ngSubmit)=\"doSubmit($event)\"\n      class=\"form-container ion-padding\"\n      (keyup.enter)=\"doSubmit()\"\n    >\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"lastName\" autocomplete=\"section-blue family-name\" required/>\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\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 *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      @for (field of additionalFields; track field.key) {\n        @if (field.extra.registration?.description; as description) {\n          <ion-text>\n            <p [innerHTML]=\"description | translate\"></p>\n          </ion-text>\n        }\n        <app-form-field\n          [definition]=\"field\"\n          [formControlName]=\"field.key\"\n          [required]=\"field.extra?.registration.required ?? field.extra?.account.required ?? false\"\n        ></app-form-field>\n      }\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i6.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: i6.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i6.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i7.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i12.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i12.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i13.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i14.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: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RegisterForm, deps: [{ token: i1.AccountService }, { token: i2.AccountValidatorService }, { token: i3.UntypedFormBuilder }, { token: ENVIRONMENT }, { token: i4.LocalSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RegisterForm, selector: "app-register-form", outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n        <input\n          matInput\n          [appAutofocus]=\"true\"\n          [autofocusDelay]=\"500\"\n          formControlName=\"email\"\n          autocomplete=\"off\"\n          required\n        />\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error\n          *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\"\n        >\n          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>\n          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>\n        <input matInput autocomplete=\"off\" matFormFieldControl formControlName=\"confirmEmail\"/>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.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=\"controls.password.hasError('required') && controls.password.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 8} }}</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=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n    <form\n      [formGroup]=\"forms[2]\"\n      (ngSubmit)=\"doSubmit($event)\"\n      class=\"form-container ion-padding\"\n      (keyup.enter)=\"doSubmit()\"\n    >\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"lastName\" autocomplete=\"section-blue family-name\" required/>\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\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 *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      @for (field of additionalFields; track field.key) {\n        @if (field.extra.registration?.description; as description) {\n          <ion-text>\n            <p [innerHTML]=\"description | translate\"></p>\n          </ion-text>\n        }\n        <app-form-field\n          [definition]=\"field\"\n          [formControlName]=\"field.key\"\n          [required]=\"field.extra?.registration.required ?? field.extra?.account.required ?? false\"\n        ></app-form-field>\n      }\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i6.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: i6.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i6.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i7.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i12.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i12.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i13.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i14.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: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RegisterForm, decorators: [{
             type: Component,
             args: [{ selector: 'app-register-form', template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n        <input\n          matInput\n          [appAutofocus]=\"true\"\n          [autofocusDelay]=\"500\"\n          formControlName=\"email\"\n          autocomplete=\"off\"\n          required\n        />\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error\n          *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\"\n        >\n          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>\n          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>\n        <input matInput autocomplete=\"off\" matFormFieldControl formControlName=\"confirmEmail\"/>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.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=\"controls.password.hasError('required') && controls.password.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 8} }}</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=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n    <form\n      [formGroup]=\"forms[2]\"\n      (ngSubmit)=\"doSubmit($event)\"\n      class=\"form-container ion-padding\"\n      (keyup.enter)=\"doSubmit()\"\n    >\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"lastName\" autocomplete=\"section-blue family-name\" required/>\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\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 *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: {requiredLength: 2} }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      @for (field of additionalFields; track field.key) {\n        @if (field.extra.registration?.description; as description) {\n          <ion-text>\n            <p [innerHTML]=\"description | translate\"></p>\n          </ion-text>\n        }\n        <app-form-field\n          [definition]=\"field\"\n          [formControlName]=\"field.key\"\n          [required]=\"field.extra?.registration.required ?? field.extra?.account.required ?? false\"\n        ></app-form-field>\n      }\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.AccountService }, { type: i2.AccountValidatorService }, { type: i3.UntypedFormBuilder }, { type: i15.Environment, decorators: [{

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

@@ -42,10 +42,10 @@ export class RegisterModal {
             this.sending = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterModal, deps: [{ token: i1.AccountService }, { token: i2.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegisterModal, selector: "app-register-modal", viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"form.isBeginning()\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"!form.isBeginning()\" (click)=\"form.slidePrev()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title translate>REGISTER.TITLE</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-spinner *ngIf=\"sending\"></ion-spinner>\n\n      <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" visible-xs visible-sm visible-mobile>\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <ion-button *ngIf=\"form.isEnd() && !sending\" (click)=\"doSubmit()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"send\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-register-form #form (onSubmit)=\"doSubmit()\" (onCancel)=\"cancel()\"></app-register-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <!-- buttons -->\n  <ion-toolbar>\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button *ngIf=\"form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          *ngIf=\"!form.isBeginning()\"\n          fill=\"clear\"\n          color=\"dark\"\n          (click)=\"form.slidePrev()\"\n          [disabled]=\"sending\"\n        >\n          <ion-icon slot=\"start\" name=\"arrow-back\"></ion-icon>\n          <ion-label translate>COMMON.BTN_BACK</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" fill=\"solid\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_NEXT</ion-label>\n          <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n        </ion-button>\n\n        <ion-button *ngIf=\"form.isEnd()\" (click)=\"doSubmit()\" fill=\"solid\" [disabled]=\"sending\" color=\"tertiary\">\n          <span translate>COMMON.BTN_SEND</span>\n          <ion-icon slot=\"end\" name=\"send\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i5.RegisterForm, selector: "app-register-form", outputs: ["onCancel", "onSubmit"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RegisterModal, deps: [{ token: i1.AccountService }, { token: i2.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RegisterModal, selector: "app-register-modal", viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"form.isBeginning()\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"!form.isBeginning()\" (click)=\"form.slidePrev()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title translate>REGISTER.TITLE</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-spinner *ngIf=\"sending\"></ion-spinner>\n\n      <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" visible-xs visible-sm visible-mobile>\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <ion-button *ngIf=\"form.isEnd() && !sending\" (click)=\"doSubmit()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"send\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-register-form #form (onSubmit)=\"doSubmit()\" (onCancel)=\"cancel()\"></app-register-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <!-- buttons -->\n  <ion-toolbar>\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button *ngIf=\"form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          *ngIf=\"!form.isBeginning()\"\n          fill=\"clear\"\n          color=\"dark\"\n          (click)=\"form.slidePrev()\"\n          [disabled]=\"sending\"\n        >\n          <ion-icon slot=\"start\" name=\"arrow-back\"></ion-icon>\n          <ion-label translate>COMMON.BTN_BACK</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" fill=\"solid\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_NEXT</ion-label>\n          <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n        </ion-button>\n\n        <ion-button *ngIf=\"form.isEnd()\" (click)=\"doSubmit()\" fill=\"solid\" [disabled]=\"sending\" color=\"tertiary\">\n          <span translate>COMMON.BTN_SEND</span>\n          <ion-icon slot=\"end\" name=\"send\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i5.RegisterForm, selector: "app-register-form", outputs: ["onCancel", "onSubmit"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RegisterModal, decorators: [{
             type: Component,
             args: [{ selector: 'app-register-modal', template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"form.isBeginning()\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"!form.isBeginning()\" (click)=\"form.slidePrev()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title translate>REGISTER.TITLE</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-spinner *ngIf=\"sending\"></ion-spinner>\n\n      <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" visible-xs visible-sm visible-mobile>\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <ion-button *ngIf=\"form.isEnd() && !sending\" (click)=\"doSubmit()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"send\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-register-form #form (onSubmit)=\"doSubmit()\" (onCancel)=\"cancel()\"></app-register-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <!-- buttons -->\n  <ion-toolbar>\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button *ngIf=\"form.isBeginning()\" fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button\n          *ngIf=\"!form.isBeginning()\"\n          fill=\"clear\"\n          color=\"dark\"\n          (click)=\"form.slidePrev()\"\n          [disabled]=\"sending\"\n        >\n          <ion-icon slot=\"start\" name=\"arrow-back\"></ion-icon>\n          <ion-label translate>COMMON.BTN_BACK</ion-label>\n        </ion-button>\n\n        <ion-button *ngIf=\"!form.isEnd()\" (click)=\"form.slideNext()\" fill=\"solid\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_NEXT</ion-label>\n          <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n        </ion-button>\n\n        <ion-button *ngIf=\"form.isEnd()\" (click)=\"doSubmit()\" fill=\"solid\" [disabled]=\"sending\" color=\"tertiary\">\n          <span translate>COMMON.BTN_SEND</span>\n          <ion-icon slot=\"end\" name=\"send\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
         }], ctorParameters: () => [{ type: i1.AccountService }, { type: i2.ModalController }], propDecorators: { form: [{