@sumaris-net/ngx-components 18.23.39 → 18.23.40

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

@@ -231,10 +231,10 @@ export class MenuComponent {
         event.stopPropagation();
         this.menuService.togglePinned(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [{ token: i1.AccountService }, { token: i2.NavController }, { token: i2.MenuController }, { token: i2.ModalController }, { token: i3.TranslateService }, { token: i0.ChangeDetectorRef }, { token: i4.MenuService }, { token: i5.Router }, { token: ENVIRONMENT }, { token: APP_BASE_HREF, optional: true }, { token: i5.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button\n                type=\"button\"\n                mat-flat-button\n                class=\"user-avatar\"\n                [class.primary]=\"!accountAvatar\"\n                [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"ion-color-primary\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              ></button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img\n                *ngIf=\"logo; else noLogo\"\n                [attr.src]=\"logo\"\n                [title]=\"'APP_NAME' | translate: { appName: appName }\"\n                alt=\"Logo\"\n                width=\"108px\"\n              />\n              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button\n                mat-button\n                type=\"button\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"selected\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              >\n                <ion-label class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{ accountName }}</b>\n                  </h3>\n                  <h4>{{ accountEmail }}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\n            [attr.src]=\"logo\"\n            [title]=\"'APP_NAME' | translate: { appName: appName }\"\n            width=\"150px;\"\n            alt=\"logo\"\n          />\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .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);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i7.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i12.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i13.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, deps: [{ token: i1.AccountService }, { token: i2.NavController }, { token: i2.MenuController }, { token: i2.ModalController }, { token: i3.TranslateService }, { token: i0.ChangeDetectorRef }, { token: i4.MenuService }, { token: i5.Router }, { token: ENVIRONMENT }, { token: APP_BASE_HREF, optional: true }, { token: i5.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button\n                type=\"button\"\n                mat-flat-button\n                class=\"user-avatar\"\n                [class.primary]=\"!accountAvatar\"\n                [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"ion-color-primary\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              ></button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img\n                *ngIf=\"logo; else noLogo\"\n                [attr.src]=\"logo\"\n                [title]=\"'APP_NAME' | translate: { appName: appName }\"\n                alt=\"Logo\"\n                width=\"108px\"\n              />\n              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button\n                mat-button\n                type=\"button\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"selected\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              >\n                <ion-label class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{ accountName }}</b>\n                  </h3>\n                  <h4>{{ accountEmail }}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\n            [attr.src]=\"logo\"\n            [title]=\"'APP_NAME' | translate: { appName: appName }\"\n            width=\"150px;\"\n            alt=\"logo\"\n          />\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .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);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i7.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i12.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i13.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button\n                type=\"button\"\n                mat-flat-button\n                class=\"user-avatar\"\n                [class.primary]=\"!accountAvatar\"\n                [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"ion-color-primary\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              ></button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img\n                *ngIf=\"logo; else noLogo\"\n                [attr.src]=\"logo\"\n                [title]=\"'APP_NAME' | translate: { appName: appName }\"\n                alt=\"Logo\"\n                width=\"108px\"\n              />\n              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button\n                mat-button\n                type=\"button\"\n                [routerLink]=\"['/account']\"\n                routerDirection=\"root\"\n                routerLinkActive=\"selected\"\n                (click)=\"close()\"\n                [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n              >\n                <ion-label class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{ accountName }}</b>\n                  </h3>\n                  <h4>{{ accountEmail }}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\n            [attr.src]=\"logo\"\n            [title]=\"'APP_NAME' | translate: { appName: appName }\"\n            width=\"150px;\"\n            alt=\"logo\"\n          />\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{badge}}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .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);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
         }], ctorParameters: () => [{ type: i1.AccountService }, { type: i2.NavController }, { type: i2.MenuController }, { type: i2.ModalController }, { type: i3.TranslateService }, { type: i0.ChangeDetectorRef }, { type: i4.MenuService }, { type: i5.Router }, { type: i14.Environment, decorators: [{

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

@@ -8,8 +8,8 @@ import { RxStateModule } from '../../shared/rx-state/rx-state.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AppMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AppMenuModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AppMenuModule, declarations: [
             // Components
             MenuComponent,
             // Directive
@@ -20,11 +20,11 @@ export class AppMenuModule {
             MenuComponent,
             // Directive
             SubMenuTabDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMenuModule, imports: [SharedModule, RouterModule, RxStateModule, TranslateModule.forChild(), 
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppMenuModule, imports: [SharedModule, RouterModule, RxStateModule, TranslateModule.forChild(), 
             // Modules
             TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SharedModule, RouterModule, RxStateModule, TranslateModule.forChild()],

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

@@ -640,10 +640,10 @@ export class MenuService extends StartableObservableService {
             child.parent = parent;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuService, deps: [{ token: i1.LocalSettingsService }, { token: i2.ConfigService }, { token: i3.AccountService }, { token: i4.Router }, { token: i5.ModalController }, { token: i5.AlertController }, { token: i5.NavController }, { token: i6.TranslateService }, { token: ENVIRONMENT }, { token: APP_MENU_OPTIONS, optional: true }, { token: APP_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuService, deps: [{ token: i1.LocalSettingsService }, { token: i2.ConfigService }, { token: i3.AccountService }, { token: i4.Router }, { token: i5.ModalController }, { token: i5.AlertController }, { token: i5.NavController }, { token: i6.TranslateService }, { token: ENVIRONMENT }, { token: APP_MENU_OPTIONS, optional: true }, { token: APP_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/src/app/core/menu/sub-menu-tab.directive.mjs

@@ -87,10 +87,10 @@ export class SubMenuTabDirective {
     get title() {
         return isNotNil(this.subMenuTitle) ? this.subMenuTitle : this.label;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuTabDirective, deps: [{ token: i1.MenuService }, { token: i2.MatTabGroup }, { token: i2.MatTab }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: { label: "label", disabled: "disabled", parentPath: "parentPath", path: "path", subMenuTitle: "subMenuTitle", subMenuBadge: "subMenuBadge", subMenuIcon: "subMenuIcon" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubMenuTabDirective, deps: [{ token: i1.MenuService }, { token: i2.MatTabGroup }, { token: i2.MatTab }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: { label: "label", disabled: "disabled", parentPath: "parentPath", path: "path", subMenuTitle: "subMenuTitle", subMenuBadge: "subMenuBadge", subMenuIcon: "subMenuIcon" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubMenuTabDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubMenuTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appSubMenuTab]',

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

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

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

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

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

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

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

@@ -12,10 +12,10 @@ export class AppUpdateOfflineModeCard {
     ngOnDestroy() {
         this.onUpdateClick.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppUpdateOfflineModeCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppUpdateOfflineModeCard, selector: "app-update-offline-mode-card", inputs: { progressionMessage: "progressionMessage", progressionValue: "progressionValue" }, outputs: { onUpdateClick: "onUpdateClick" }, ngImport: i0, template: "<!-- Update offline feature card-->\n<ion-card color=\"accent\" class=\"main ion-no-margin\" @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE' | translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP' | translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\" (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-text small{font-size:85%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppUpdateOfflineModeCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppUpdateOfflineModeCard, selector: "app-update-offline-mode-card", inputs: { progressionMessage: "progressionMessage", progressionValue: "progressionValue" }, outputs: { onUpdateClick: "onUpdateClick" }, ngImport: i0, template: "<!-- Update offline feature card-->\n<ion-card color=\"accent\" class=\"main ion-no-margin\" @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE' | translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP' | translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\" (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-text small{font-size:85%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppUpdateOfflineModeCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppUpdateOfflineModeCard, decorators: [{
             type: Component,
             args: [{ selector: 'app-update-offline-mode-card', changeDetection: ChangeDetectionStrategy.OnPush, animations: [slideUpDownAnimation], template: "<!-- Update offline feature card-->\n<ion-card color=\"accent\" class=\"main ion-no-margin\" @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE' | translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP' | translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\" (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-text small{font-size:85%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progressionMessage: [{

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

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