@sumaris-net/ngx-components 21.0.0-rc39 → 21.0.0-rc40

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

@@ -29301,7 +29301,7 @@ class AppImageGallerySlideshowComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGallerySlideshowComponent, deps: [{ token: i2$2.AlertController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGallerySlideshowComponent, isStandalone: false, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", imageSizeQueryParam: "imageSizeQueryParam", imageSize: "imageSize", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: i2$2.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$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGallerySlideshowComponent, isStandalone: false, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: ["wheelZoomStep", "wheelZoomStep", numberAttribute], maxZoomRatio: ["maxZoomRatio", "maxZoomRatio", numberAttribute], enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: ["editionQuality", "editionQuality", numberAttribute], imageSizeQueryParam: "imageSizeQueryParam", imageSize: "imageSize", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: i2$2.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$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGallerySlideshowComponent, decorators: [{
             type: Component,
@@ -29327,9 +29327,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], wheelZoomStep: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], maxZoomRatio: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], enableRotate: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -29342,7 +29344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }], editionFormat: [{
                 type: Input
             }], editionQuality: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], imageSizeQueryParam: [{
                 type: Input
             }], imageSize: [{
@@ -33859,6 +33862,9 @@ class MenuService extends StartableObservableService {
         return this._$splitPaneWhen.asObservable();
     }
     get enabled() {
+        return this._$enabled.value;
+    }
+    get enabled$() {
         return this._$enabled.asObservable();
     }
     get subMenuEnabled() {
@@ -34040,8 +34046,8 @@ class MenuService extends StartableObservableService {
                     text: translations['AUTH.LOGOUT.BTN_CONFIRM'],
                     cssClass: 'ion-color-primary',
                     handler: async () => {
-                        // Back to home
-                        await this.navController.navigateRoot('/');
+                        // Back to home route
+                        await this.navController.navigateRoot(this.environment.defaultRoute || '/');
                         // WARNING: logout should be done AFTER home redirection, because of cache clearing - see issue #5
                         this.accountService.logout();
                     },
@@ -34462,7 +34468,6 @@ class MenuComponent {
     accountAvatar;
     accountEmail;
     defaultAvatarImage;
-    _debug;
     _subscription = new Subscription();
     showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
     constructor(accountService, navController, menu, modalCtrl, translate, cd, menuService, router, environment, appBaseHref, route // Modal editor give 'null'
@@ -34481,7 +34486,6 @@ class MenuComponent {
         console.debug('[menu-component] Create');
         this.appVersion = environment.version;
         this.defaultAvatarImage = (appBaseHref || '/') + PersonUtils.DEFAULT_AVATAR_IMAGE;
-        this._debug = !environment.production;
     }
     async ngOnInit() {
         this.splitPane.when = await firstNotNilPromise(this.menuService.splitPaneWhen);
@@ -34493,7 +34497,7 @@ class MenuComponent {
         }));
         // Listen to menu service event
         this._subscription.add(this.menuService.splitPaneWhen.subscribe((value) => this.setSplitPaneWhen(value)));
-        this._subscription.add(this.menuService.enabled.subscribe((value) => this.enable(value)));
+        this._subscription.add(this.menuService.enabled$.subscribe((value) => this.enable(value)));
         this._subscription.add(this.menuService.opened
             // Avoid duplicated events
             .pipe(distinctUntilChanged())
@@ -48277,10 +48281,12 @@ class AccountPage extends AppForm {
     configService;
     cd;
     imageService;
+    menu;
     appBaseHref;
     tabGroup;
     propertiesTable;
     tokensTable;
+    alertCtrl = inject(AlertController);
     selectedTabIndex = 0;
     isLogin;
     changesSubscription;
@@ -48320,7 +48326,7 @@ class AccountPage extends AppForm {
     showApiTokens = false;
     showAvatar = false;
     avatarMaxSize;
-    constructor(injector, formBuilder, accountService, network, navController, validatorService, configService, cd, imageService, environment, locales, appBaseHref) {
+    constructor(injector, formBuilder, accountService, network, navController, validatorService, configService, cd, imageService, menu, environment, locales, appBaseHref) {
         super(injector, validatorService.getFormGroup(accountService.account, { withSettings: true }));
         this.formBuilder = formBuilder;
         this.accountService = accountService;
@@ -48330,6 +48336,7 @@ class AccountPage extends AppForm {
         this.configService = configService;
         this.cd = cd;
         this.imageService = imageService;
+        this.menu = menu;
         this.appBaseHref = appBaseHref;
         this.locales = locales;
         this.mobile = this.settings.mobile;
@@ -48461,6 +48468,9 @@ class AccountPage extends AppForm {
         this.markAsLoading();
         return this.accountService.reload();
     }
+    logout() {
+        return this.menu.logout();
+    }
     startListenChanges() {
         if (this.changesSubscription)
             return; // already started
@@ -48621,13 +48631,13 @@ class AccountPage extends AppForm {
     markAsSaved() {
         this.saving = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: NetworkService }, { token: i2$2.NavController }, { token: AccountValidatorService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: ImageService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_BASE_HREF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AccountPage, isStandalone: false, selector: "app-account-page", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }, { propertyName: "propertiesTable", first: true, predicate: ["propertiesTable"], descendants: true, static: true }, { propertyName: "tokensTable", first: true, predicate: ["tokensTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n    </ion-item>\n  }\n\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      dynamicHeight\n    >\n      <!-- TAB: user details -->\n      <mat-tab [label]=\"'ACCOUNT.USER_DETAILS.TITLE' | translate\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.USER_DETAILS.TITLE' | translate }}</ion-label>\n          @if (submitted && form.invalid) {\n            <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n          }\n        </ng-template>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <!-- Avatar block -->\n              @if (showAvatar) {\n                @let accountAvatar =\n                  form?.controls?.avatar?.value ||\n                  form?.value?.avatar ||\n                  accountService?.account?.avatar ||\n                  defaultAvatarImage;\n                @let isDefaultAvatar = accountAvatar?.endsWith(defaultAvatarImage);\n                <ion-item lines=\"none\" class=\"ion-margin-bottom\" style=\"--inner-padding-end: 0\">\n                  <ion-button\n                    slot=\"start\"\n                    fill=\"clear\"\n                    class=\"user-avatar\"\n                    [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                    (click)=\"onChangeAvatar($event)\"\n                    [disabled]=\"disabled\"\n                    [matTooltip]=\"'IMAGE.BTN_CAMERA_SOURCE' | translate\"\n                  >\n                    @if (!accountReadOnly && enabled) {\n                      <ion-icon [class.visible-hover]=\"!isDefaultAvatar\" name=\"camera\" slot=\"icon-only\"></ion-icon>\n                    }\n                  </ion-button>\n                </ion-item>\n              }\n\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    @if (form.controls.email.hasError('required') && form.controls.email.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.email.hasError('email') && form.controls.email.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid class=\"ion-no-padding ion-padding-bottom\">\n                      <ion-row>\n                        <ion-col color=\"danger\">\n                          <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\"></ion-icon>\n                          <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL' | translate\"></ion-text>\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row style=\"height: 51px\">\n                        <ion-col style=\"text-align: right\">\n                          <ion-text>\n                            <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION' | translate\"></small>\n                          </ion-text>\n                        </ion-col>\n                        <ion-col size=\"auto\">\n                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\n                        </ion-col>\n                      </ion-row>\n\n                      @if (email.error && !email.sending) {\n                        <ion-row>\n                          <ion-col>\n                            @if (email.error && !email.sending) {\n                              <span [innerHTML]=\"email.error | translate\"></span>\n                            }\n                          </ion-col>\n                        </ion-row>\n                      }\n                    </ion-grid>\n                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    @if (form.controls.lastName.hasError('required') && form.controls.lastName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    @if (form.controls.firstName.hasError('required') && form.controls.firstName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3>{{ 'ACCOUNT.SECURITY.TITLE' | translate }}</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3>{{ 'ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER' | translate }}</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      @if (form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>\n                          <span>{{ 'ERROR.FIELD_NOT_VALID_PUBKEY' | translate }}</span>\n                        </mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab [label]=\"'ACCOUNT.SETTINGS.TITLE' | translate\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.SETTINGS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select formControlName=\"locale\" required>\n              @for (item of locales; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n            @if (settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty) {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.TOKENS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [disabled]=\"!form.dirty || !valid || saving\">\n    <!-- error -->\n    @if (error && !mobile) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n      </ion-item>\n    }\n  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}.user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);overflow:hidden!important;font-size:var(--avatar-size, 96px)!important;line-height:var(--avatar-size, 96px);height:var(--avatar-size, 96px)!important;width:var(--avatar-size, 96px)!important;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);border-radius:50%;display:inline-block}.user-avatar ion-icon{position:fixed;left:0;bottom:16px;width:var(--avatar-size, 96px)}.user-avatar .visible-hover{display:none;visibility:hidden}.user-avatar:hover{background-color:rgba(var(--ion-color-secondary-rgb),.8);border:solid 2px var(--ion-color-secondary-shade);cursor:pointer}.user-avatar:hover .visible-hover{display:inline;visibility:visible}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"], dependencies: [{ kind: "component", type: i2$2.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$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter", "definitionChanged"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: NetworkService }, { token: i2$2.NavController }, { token: AccountValidatorService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: ImageService }, { token: MenuService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_BASE_HREF, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AccountPage, isStandalone: false, selector: "app-account-page", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }, { propertyName: "propertiesTable", first: true, predicate: ["propertiesTable"], descendants: true, static: true }, { propertyName: "tokensTable", first: true, predicate: ["tokensTable"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n    </ion-item>\n  }\n\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      dynamicHeight\n    >\n      <!-- TAB: user details -->\n      <mat-tab [label]=\"'ACCOUNT.USER_DETAILS.TITLE' | translate\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.USER_DETAILS.TITLE' | translate }}</ion-label>\n          @if (submitted && form.invalid) {\n            <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n          }\n        </ng-template>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <!-- Avatar block -->\n              @if (showAvatar) {\n                @let accountAvatar =\n                  form?.controls?.avatar?.value ||\n                  form?.value?.avatar ||\n                  accountService?.account?.avatar ||\n                  defaultAvatarImage;\n                @let isDefaultAvatar = accountAvatar?.endsWith(defaultAvatarImage);\n                <ion-item lines=\"none\" class=\"ion-margin-bottom\" style=\"--inner-padding-end: 0\">\n                  <ion-button\n                    slot=\"start\"\n                    fill=\"clear\"\n                    class=\"user-avatar\"\n                    [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                    (click)=\"onChangeAvatar($event)\"\n                    [disabled]=\"disabled\"\n                    [matTooltip]=\"'IMAGE.BTN_CAMERA_SOURCE' | translate\"\n                  >\n                    @if (!accountReadOnly && enabled) {\n                      <ion-icon [class.visible-hover]=\"!isDefaultAvatar\" name=\"camera\" slot=\"icon-only\"></ion-icon>\n                    }\n                  </ion-button>\n                </ion-item>\n              }\n\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    @if (form.controls.email.hasError('required') && form.controls.email.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.email.hasError('email') && form.controls.email.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid class=\"ion-no-padding ion-padding-bottom\">\n                      <ion-row>\n                        <ion-col color=\"danger\">\n                          <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\"></ion-icon>\n                          <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL' | translate\"></ion-text>\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row style=\"height: 51px\">\n                        <ion-col style=\"text-align: right\">\n                          <ion-text>\n                            <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION' | translate\"></small>\n                          </ion-text>\n                        </ion-col>\n                        <ion-col size=\"auto\">\n                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\n                        </ion-col>\n                      </ion-row>\n\n                      @if (email.error && !email.sending) {\n                        <ion-row>\n                          <ion-col>\n                            @if (email.error && !email.sending) {\n                              <span [innerHTML]=\"email.error | translate\"></span>\n                            }\n                          </ion-col>\n                        </ion-row>\n                      }\n                    </ion-grid>\n                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    @if (form.controls.lastName.hasError('required') && form.controls.lastName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    @if (form.controls.firstName.hasError('required') && form.controls.firstName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3>{{ 'ACCOUNT.SECURITY.TITLE' | translate }}</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header>\n                  <h3>{{ 'ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER' | translate }}</h3>\n                </ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      @if (form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>\n                          <span>{{ 'ERROR.FIELD_NOT_VALID_PUBKEY' | translate }}</span>\n                        </mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Logout (when no menu (e.g. ObsFish) -->\n              @if ((menu.enabled$ | async) !== true) {\n                <div class=\"ion-text-center\">\n                  <ion-button (click)=\"logout()\" color=\"danger\">\n                    <ion-icon slot=\"start\" name=\"log-out\"></ion-icon>\n                    {{ 'HOME.BTN_DISCONNECT' | translate }}\n                  </ion-button>\n                </div>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab [label]=\"'ACCOUNT.SETTINGS.TITLE' | translate\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.SETTINGS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select formControlName=\"locale\" required>\n              @for (item of locales; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n            @if (settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty) {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.TOKENS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [disabled]=\"!form.dirty || !valid || saving\">\n    <!-- error -->\n    @if (error && !mobile) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n      </ion-item>\n    }\n  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}.user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);overflow:hidden!important;font-size:var(--avatar-size, 96px)!important;line-height:var(--avatar-size, 96px);height:var(--avatar-size, 96px)!important;width:var(--avatar-size, 96px)!important;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);border-radius:50%;display:inline-block}.user-avatar ion-icon{position:fixed;left:0;bottom:16px;width:var(--avatar-size, 96px)}.user-avatar .visible-hover{display:none;visibility:hidden}.user-avatar:hover{background-color:rgba(var(--ion-color-secondary-rgb),.8);border:solid 2px var(--ion-color-secondary-shade);cursor:pointer}.user-avatar:hover .visible-hover{display:inline;visibility:visible}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"], dependencies: [{ kind: "component", type: i2$2.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$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter", "definitionChanged"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesTable, selector: "app-properties-table", inputs: ["definitions", "showToolbar"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserTokenTable, selector: "app-user-token-table", inputs: ["useSticky"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AccountPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-account-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n    </ion-item>\n  }\n\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      dynamicHeight\n    >\n      <!-- TAB: user details -->\n      <mat-tab [label]=\"'ACCOUNT.USER_DETAILS.TITLE' | translate\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.USER_DETAILS.TITLE' | translate }}</ion-label>\n          @if (submitted && form.invalid) {\n            <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n          }\n        </ng-template>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <!-- Avatar block -->\n              @if (showAvatar) {\n                @let accountAvatar =\n                  form?.controls?.avatar?.value ||\n                  form?.value?.avatar ||\n                  accountService?.account?.avatar ||\n                  defaultAvatarImage;\n                @let isDefaultAvatar = accountAvatar?.endsWith(defaultAvatarImage);\n                <ion-item lines=\"none\" class=\"ion-margin-bottom\" style=\"--inner-padding-end: 0\">\n                  <ion-button\n                    slot=\"start\"\n                    fill=\"clear\"\n                    class=\"user-avatar\"\n                    [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                    (click)=\"onChangeAvatar($event)\"\n                    [disabled]=\"disabled\"\n                    [matTooltip]=\"'IMAGE.BTN_CAMERA_SOURCE' | translate\"\n                  >\n                    @if (!accountReadOnly && enabled) {\n                      <ion-icon [class.visible-hover]=\"!isDefaultAvatar\" name=\"camera\" slot=\"icon-only\"></ion-icon>\n                    }\n                  </ion-button>\n                </ion-item>\n              }\n\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    @if (form.controls.email.hasError('required') && form.controls.email.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.email.hasError('email') && form.controls.email.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid class=\"ion-no-padding ion-padding-bottom\">\n                      <ion-row>\n                        <ion-col color=\"danger\">\n                          <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\"></ion-icon>\n                          <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL' | translate\"></ion-text>\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row style=\"height: 51px\">\n                        <ion-col style=\"text-align: right\">\n                          <ion-text>\n                            <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION' | translate\"></small>\n                          </ion-text>\n                        </ion-col>\n                        <ion-col size=\"auto\">\n                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\n                        </ion-col>\n                      </ion-row>\n\n                      @if (email.error && !email.sending) {\n                        <ion-row>\n                          <ion-col>\n                            @if (email.error && !email.sending) {\n                              <span [innerHTML]=\"email.error | translate\"></span>\n                            }\n                          </ion-col>\n                        </ion-row>\n                      }\n                    </ion-grid>\n                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    @if (form.controls.lastName.hasError('required') && form.controls.lastName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    @if (form.controls.firstName.hasError('required') && form.controls.firstName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3>{{ 'ACCOUNT.SECURITY.TITLE' | translate }}</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header><h3>{{ 'ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER' | translate }}</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      @if (form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>\n                          <span>{{ 'ERROR.FIELD_NOT_VALID_PUBKEY' | translate }}</span>\n                        </mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n                </ion-list>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab [label]=\"'ACCOUNT.SETTINGS.TITLE' | translate\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.SETTINGS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select formControlName=\"locale\" required>\n              @for (item of locales; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n            @if (settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty) {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.TOKENS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [disabled]=\"!form.dirty || !valid || saving\">\n    <!-- error -->\n    @if (error && !mobile) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n      </ion-item>\n    }\n  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}.user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);overflow:hidden!important;font-size:var(--avatar-size, 96px)!important;line-height:var(--avatar-size, 96px);height:var(--avatar-size, 96px)!important;width:var(--avatar-size, 96px)!important;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);border-radius:50%;display:inline-block}.user-avatar ion-icon{position:fixed;left:0;bottom:16px;width:var(--avatar-size, 96px)}.user-avatar .visible-hover{display:none;visibility:hidden}.user-avatar:hover{background-color:rgba(var(--ion-color-secondary-rgb),.8);border:solid 2px var(--ion-color-secondary-shade);cursor:pointer}.user-avatar:hover .visible-hover{display:inline;visibility:visible}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: AccountService }, { type: NetworkService }, { type: i2$2.NavController }, { type: AccountValidatorService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }, { type: ImageService }, { type: Environment, decorators: [{
+            args: [{ selector: 'app-account-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<app-toolbar\n  [title]=\"'ACCOUNT.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"dirty && !saving\"\n  [hasClose]=\"!dirty && !saving\"\n  (onValidate)=\"save()\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    @if (loading || saving) {\n      <!-- loader -->\n      <ion-spinner></ion-spinner>\n    } @else if (network.online) {\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n    </ion-item>\n  }\n\n  <form [formGroup]=\"form\" novalidate class=\"form-container\">\n    <mat-tab-group\n      #tabGroup\n      [(selectedIndex)]=\"selectedTabIndex\"\n      class=\"mat-mdc-tab-disabled-hidden\"\n      [mat-stretch-tabs]=\"mobile\"\n      dynamicHeight\n    >\n      <!-- TAB: user details -->\n      <mat-tab [label]=\"'ACCOUNT.USER_DETAILS.TITLE' | translate\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.USER_DETAILS.TITLE' | translate }}</ion-label>\n          @if (submitted && form.invalid) {\n            <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n          }\n        </ng-template>\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row>\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <!-- Avatar block -->\n              @if (showAvatar) {\n                @let accountAvatar =\n                  form?.controls?.avatar?.value ||\n                  form?.value?.avatar ||\n                  accountService?.account?.avatar ||\n                  defaultAvatarImage;\n                @let isDefaultAvatar = accountAvatar?.endsWith(defaultAvatarImage);\n                <ion-item lines=\"none\" class=\"ion-margin-bottom\" style=\"--inner-padding-end: 0\">\n                  <ion-button\n                    slot=\"start\"\n                    fill=\"clear\"\n                    class=\"user-avatar\"\n                    [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                    (click)=\"onChangeAvatar($event)\"\n                    [disabled]=\"disabled\"\n                    [matTooltip]=\"'IMAGE.BTN_CAMERA_SOURCE' | translate\"\n                  >\n                    @if (!accountReadOnly && enabled) {\n                      <ion-icon [class.visible-hover]=\"!isDefaultAvatar\" name=\"camera\" slot=\"icon-only\"></ion-icon>\n                    }\n                  </ion-button>\n                </ion-item>\n              }\n\n              <ion-list-header><p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate\"></p></ion-list-header>\n\n              <ion-list [inset]=\"mobile\">\n                <!-- Email -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n                    <input matInput formControlName=\"email\" autocomplete=\"section-red email\" />\n                    @if (form.controls.email.hasError('required') && form.controls.email.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.email.hasError('email') && form.controls.email.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                @if (email?.notConfirmed) {\n                  <ion-item lines=\"none\">\n                    <ion-grid class=\"ion-no-padding ion-padding-bottom\">\n                      <ion-row>\n                        <ion-col color=\"danger\">\n                          <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\"></ion-icon>\n                          <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL' | translate\"></ion-text>\n                        </ion-col>\n                      </ion-row>\n\n                      <ion-row style=\"height: 51px\">\n                        <ion-col style=\"text-align: right\">\n                          <ion-text>\n                            <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION' | translate\"></small>\n                          </ion-text>\n                        </ion-col>\n                        <ion-col size=\"auto\">\n                          @if (!email.sending) {\n                            <ion-button fill=\"solid\" color=\"secondary\" (click)=\"sendConfirmationEmail($event)\">\n                              {{ 'ACCOUNT.BTN_RESEND' | translate }}\n                            </ion-button>\n                          } @else {\n                            <ion-spinner class=\"ion-no-padding\"></ion-spinner>\n                          }\n                        </ion-col>\n                      </ion-row>\n\n                      @if (email.error && !email.sending) {\n                        <ion-row>\n                          <ion-col>\n                            @if (email.error && !email.sending) {\n                              <span [innerHTML]=\"email.error | translate\"></span>\n                            }\n                          </ion-col>\n                        </ion-row>\n                      }\n                    </ion-grid>\n                  </ion-item>\n                }\n                <!-- Last name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n                    <input\n                      matInput\n                      [appAutofocus]=\"true\"\n                      [autofocusDelay]=\"500\"\n                      formControlName=\"lastName\"\n                      autocomplete=\"section-blue family-name\"\n                      required\n                    />\n                    @if (form.controls.lastName.hasError('required') && form.controls.lastName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- First name -->\n                <ion-item lines=\"none\">\n                  <mat-form-field>\n                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n                    <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n                    @if (form.controls.firstName.hasError('required') && form.controls.firstName.dirty) {\n                      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                    }\n                    @if (form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty) {\n                      <mat-error>\n                        <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                      </mat-error>\n                    }\n                  </mat-form-field>\n                </ion-item>\n\n                <!-- Additional fields -->\n                @for (definition of additionalFields; track definition.key) {\n                  <ion-item lines=\"none\">\n                    <app-form-field\n                      [definition]=\"definition\"\n                      [formControlName]=\"definition.key\"\n                      [required]=\"\n                        (definition.extra && definition.extra.account && definition.extra.account.required) || false\n                      \"\n                    ></app-form-field>\n                  </ion-item>\n                }\n              </ion-list>\n\n              <!-- Security -->\n              @if (showSecurityDetails) {\n                <ion-list-header><h3>{{ 'ACCOUNT.SECURITY.TITLE' | translate }}</h3></ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <ion-item\n                    [button]=\"mobile\"\n                    routerDirection=\"forward\"\n                    lines=\"none\"\n                    (click)=\"openChangePasswordPage()\"\n                    [disabled]=\"disabled\"\n                  >\n                    @if (!mobile) {\n                      <ion-icon slot=\"start\" name=\"keypad\"></ion-icon>\n                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>\n                    }\n                    <ion-text color=\"tertiary\">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>\n                    @if (!mobile) {\n                      <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n                    }\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Technical details -->\n              @if (showTechnicalDetails) {\n                <ion-list-header>\n                  <h3>{{ 'ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER' | translate }}</h3>\n                </ion-list-header>\n\n                <ion-list [inset]=\"mobile\">\n                  <!-- profile -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>\n                      <input matInput hidden readonly=\"true\" formControlName=\"mainProfile\" required />\n                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>\n                      @if (form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n\n                  <!-- pubkey -->\n                  <ion-item lines=\"none\">\n                    <mat-form-field>\n                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>\n                      <input matInput readonly=\"true\" formControlName=\"pubkey\" required />\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                      }\n                      @if (form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty) {\n                        <mat-error>\n                          <span>{{ 'ERROR.FIELD_NOT_VALID_PUBKEY' | translate }}</span>\n                        </mat-error>\n                      }\n                    </mat-form-field>\n                  </ion-item>\n                </ion-list>\n              }\n\n              <!-- Logout (when no menu (e.g. ObsFish) -->\n              @if ((menu.enabled$ | async) !== true) {\n                <div class=\"ion-text-center\">\n                  <ion-button (click)=\"logout()\" color=\"danger\">\n                    <ion-icon slot=\"start\" name=\"log-out\"></ion-icon>\n                    {{ 'HOME.BTN_DISCONNECT' | translate }}\n                  </ion-button>\n                </div>\n              }\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab [label]=\"'ACCOUNT.SETTINGS.TITLE' | translate\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.SETTINGS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION' | translate\"></p>\n\n          <mat-form-field>\n            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>\n            <mat-select formControlName=\"locale\" required>\n              @for (item of locales; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n            @if (settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty) {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          @if (showLatLonFormat) {\n            @let control = settingsForm | formGetControl: 'latLongFormat';\n            <mat-form-field>\n              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n              <mat-select [formControl]=\"control\" required>\n                @for (item of latLongFormats; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.dirty && control.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          }\n        </div>\n\n        <!-- Options table -->\n        <div class=\"options-table\" [class.cdk-visually-hidden]=\"optionDefinitions | isEmptyArray\">\n          <app-properties-table\n            #propertiesTable\n            i18nColumnPrefix=\"ACCOUNT.SETTINGS.OPTIONS.\"\n            [definitions]=\"optionDefinitions\"\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-properties-table>\n        </div>\n      </mat-tab>\n\n      <!-- TAB: tokens -->\n      <mat-tab [label]=\"'ACCOUNT.TOKENS.TITLE' | translate\" formGroupName=\"tokens\" [disabled]=\"!showApiTokens\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"ticket\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{ 'ACCOUNT.TOKENS.TITLE' | translate }}</ion-label>\n        </ng-template>\n\n        <div class=\"ion-padding\">\n          <p [innerHTML]=\"'ACCOUNT.TOKENS.DESCRIPTION' | translate\"></p>\n        </div>\n        <!-- Tokens table -->\n        <div class=\"tokens-table\">\n          <app-user-token-table\n            #tokensTable\n            [disabled]=\"disabled\"\n            [canEdit]=\"true\"\n            [debug]=\"debug\"\n            (onDirty)=\"$event ? markAsDirty() : undefined\"\n          ></app-user-token-table>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save()\" [disabled]=\"!form.dirty || !valid || saving\">\n    <!-- error -->\n    @if (error && !mobile) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n      </ion-item>\n    }\n  </app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}.user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);overflow:hidden!important;font-size:var(--avatar-size, 96px)!important;line-height:var(--avatar-size, 96px);height:var(--avatar-size, 96px)!important;width:var(--avatar-size, 96px)!important;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);border-radius:50%;display:inline-block}.user-avatar ion-icon{position:fixed;left:0;bottom:16px;width:var(--avatar-size, 96px)}.user-avatar .visible-hover{display:none;visibility:hidden}.user-avatar:hover{background-color:rgba(var(--ion-color-secondary-rgb),.8);border:solid 2px var(--ion-color-secondary-shade);cursor:pointer}.user-avatar:hover .visible-hover{display:inline;visibility:visible}div.options-table{height:calc(100vh - 380px)}div.tokens-table{height:calc(100vh - 250px)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: AccountService }, { type: NetworkService }, { type: i2$2.NavController }, { type: AccountValidatorService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }, { type: ImageService }, { type: MenuService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
                 }] }, { type: undefined, decorators: [{
@@ -53667,11 +53677,11 @@ class MenuTestingPage extends AppTabEditor {
         this.$thirdTabBadge.next(this.$thirdTabBadge.value + 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MenuTestingPage, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2$2.NavController }, { token: i2$2.AlertController }, { token: i2.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MenuTestingPage, isStandalone: false, 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          @if (menuService.enabled | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i2$2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-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: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MenuTestingPage, isStandalone: false, 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          @if (menuService.enabled$ | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled$ | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i2$2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-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: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MenuTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-testing-menu', standalone: false, 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          @if (menuService.enabled | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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"] }]
+            args: [{ selector: 'app-testing-menu', standalone: false, 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          @if (menuService.enabled$ | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled$ | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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$5.ActivatedRoute }, { type: i1$5.Router }, { type: i2$2.NavController }, { type: i2$2.AlertController }, { type: i2.TranslateService }, { type: MenuService }], propDecorators: { subSelectedTabIndex: [{
                 type: Input
             }], subSelectedTabIndexChange: [{
@@ -53711,11 +53721,11 @@ class OtherMenuTestingPage extends MenuTestingPage {
         return this.getDefaultTitle() + ' ' + otherId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OtherMenuTestingPage, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2$2.NavController }, { token: i2$2.AlertController }, { token: i2.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: OtherMenuTestingPage, isStandalone: false, selector: "app-testing-menu-other", 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          @if (menuService.enabled | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i2$2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-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: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: OtherMenuTestingPage, isStandalone: false, selector: "app-testing-menu-other", 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          @if (menuService.enabled$ | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled$ | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle", "subMenuBadge", "subMenuIcon"] }, { kind: "component", type: i2$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i2$2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-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: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OtherMenuTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-testing-menu-other', standalone: false, 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          @if (menuService.enabled | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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"] }]
+            args: [{ selector: 'app-testing-menu-other', standalone: false, 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          @if (menuService.enabled$ | async) {\n            <ion-button (click)=\"enableMenu(false)\">Disable menu</ion-button>\n          }\n          @if ((menuService.enabled$ | async) !== true) {\n            <ion-button (click)=\"enableMenu(true)\">Enable menu</ion-button>\n          }\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-text [innerHTML]=\"$secondTabTitle | async\"></ion-text>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A second tab</p>\n\n        @if (showOtherLinks) {\n          <p>\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\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\n          [matBadge]=\"$thirdTabBadge | async\"\n          matBadgeColor=\"primary\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n        >\n          {{ thirdTabTitle }}\n        </ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        <p>A third tab (with a badge)</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$5.ActivatedRoute }, { type: i1$5.Router }, { type: i2$2.NavController }, { type: i2$2.AlertController }, { type: i2.TranslateService }, { type: MenuService }] });
 
 const routes$7 = [