@smallpearl/ngx-helper 0.29.23

package/fesm2022/smallpearl-ngx-helper-mat-side-menu-layout.mjs

@@ -0,0 +1,930 @@
+import * as i1 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import * as i0 from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Input, HostBinding, ViewChildren, viewChildren, effect, runInInjectionContext, ViewChild, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { NavigationEnd, RouterOutlet } from '@angular/router';
+import { Subject, BehaviorSubject, takeUntil, tap, filter } from 'rxjs';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i2 from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i4$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i5$1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i7 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+
+class LayoutService {
+    breakpointObserver;
+    marginTop = 64;
+    toolbarHeight = 64;
+    smallScreen = false;
+    destroy = new Subject();
+    _previousUrl = '';
+    layoutChanged = new BehaviorSubject({
+        smallScreen: false,
+        toolbarHeight: 64,
+    });
+    constructor(breakpointObserver, router) {
+        this.breakpointObserver = breakpointObserver;
+        this.breakpointObserver
+            .observe([
+            Breakpoints.XSmall,
+            Breakpoints.Small,
+            Breakpoints.Medium,
+            Breakpoints.Large,
+            Breakpoints.XLarge,
+        ])
+            .pipe(takeUntil(this.destroy))
+            .subscribe((result) => {
+            let smallScreen = this.smallScreen;
+            let marginTop = this.marginTop;
+            for (const query of Object.keys(result.breakpoints)) {
+                if (result.breakpoints[query]) {
+                    if (query == Breakpoints.XSmall) {
+                        smallScreen = true;
+                        marginTop = 56;
+                        // } else if (query === Breakpoints.Small) {
+                        //   smallScreen = true;
+                        //   marginTop = 56;
+                    }
+                    else {
+                        smallScreen = false;
+                    }
+                }
+            }
+            if (this.smallScreen != smallScreen || this.marginTop != marginTop) {
+                this.smallScreen = smallScreen;
+                this.toolbarHeight = this.marginTop = marginTop;
+                const newLayout = {
+                    smallScreen: smallScreen,
+                    toolbarHeight: marginTop,
+                };
+                this.layoutChanged.next(newLayout);
+            }
+        });
+        // router.events
+        //   .pipe(
+        //     filter(
+        //       (e: RouterEvent) =>
+        //         e instanceof NavigationStart && (router.url.startsWith('/community') || router.url.startsWith('/company'))
+        //     ),
+        //     tap(() => {
+        //       // console.log(`URL: ${this.router.url}`);
+        //       this._previousUrl = router.url;
+        //     })
+        //   )
+        //   .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy.next();
+    }
+    get previousUrl() {
+        return this._previousUrl;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: LayoutService, deps: [{ token: i1.BreakpointObserver }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: LayoutService, providedIn: 'any' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'any' }]
+        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i1$1.Router }] });
+
+class SPMatMenuListItemComponent {
+    route;
+    router;
+    dialog;
+    cdr;
+    expanded = false;
+    highlighted = false;
+    ariaExpanded = this.expanded;
+    // The NavItem associated with this item.
+    item;
+    // This is an implementation property that is used to control with offset
+    // of the menu item from the start of the screen to indicate that an item
+    // is a child of a parent menu item.
+    depth;
+    // The parent of this menu item. Set only for child items. Will be undefined
+    // for top level menu items
+    parent;
+    showIcon = true;
+    // All child MenuListItemComponents so that we can check each one if
+    // the current url ends with the child component's NavItem.route.
+    // If it does then we have to mark this component as expanded.
+    children;
+    constructor(route, router, dialog, cdr) {
+        this.route = route;
+        this.router = router;
+        this.dialog = dialog;
+        this.cdr = cdr;
+        if (this.depth === undefined) {
+            this.depth = 1;
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() { }
+    // Return highlighted status
+    get isHighlighted() {
+        return this.highlighted;
+    }
+    toggleHighlight(highlight) {
+        if (highlight != this.highlighted) {
+            this.highlighted = highlight;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Expand a parent container menu item.
+     */
+    expand() {
+        if (!this.item?.route && !this.expanded) {
+            this.expanded = this.ariaExpanded = true;
+            this.cdr.detectChanges();
+            if (this.parent) {
+                this.parent.expand();
+            }
+        }
+    }
+    /**
+     * Collapse an expanded parent container menu item.
+     */
+    collapse() {
+        if (!this.item?.route && this.expanded) {
+            this.expanded = this.ariaExpanded = false;
+            this.cdr.detectChanges();
+        }
+    }
+    checkChildrenForHighlight(lastUrlSegment) {
+        let childHighlighted = false;
+        this.children.forEach((childItem) => {
+            if (childItem.item.route === lastUrlSegment) {
+                childItem.toggleHighlight(true);
+                childHighlighted = true;
+            }
+            else {
+                childItem.toggleHighlight(false);
+                if (childItem.item?.children) {
+                    if (childItem.checkChildrenForHighlight(lastUrlSegment)) {
+                        childHighlighted = true;
+                    }
+                }
+                childItem.expand(); // open the childItem
+            }
+        });
+        return childHighlighted; // Return highlighted state so that caller can
+        // expand itself.
+    }
+    // Item selection handler
+    onItemSelected(ev, item) {
+        this.dialog.closeAll();
+        // Leaf menu item, navigate the router to the item's route.
+        if (!item.children) {
+            if (item?.backButton && item?.backHref) {
+                // Idiotic way to implement Back button! This will conflict
+                // with the browser history as the current satellite app
+                // page would become the previous page to backHref page! A complex
+                // mechanism to navigate back accurately, by popping all the
+                // intermediate pages is beyond our scope for now.
+                this.router.navigateByUrl(item.backHref);
+            }
+            else if (item.route) {
+                this.router.navigate([item.route], {
+                    relativeTo: this.route,
+                    state: {
+                        backHref: window.location.pathname,
+                    },
+                });
+            }
+        }
+        else {
+            // Sub menu items, toogle the item to show/hide the child menu items.
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+            this.expanded = !this.expanded;
+            this.cdr.detectChanges();
+        }
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuListItemComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SPMatMenuListItemComponent, isStandalone: false, selector: "ngx-mat-menu-list-item", inputs: { highlighted: "highlighted", item: "item", depth: "depth", parent: "parent", showIcon: "showIcon" }, host: { properties: { "attr.aria-expanded": "this.ariaExpanded" } }, viewQueries: [{ propertyName: "children", predicate: SPMatMenuListItemComponent, descendants: true }], ngImport: i0, template: `
+    <a
+      *ngIf="item.children || item.route; else divider"
+      mat-list-item
+      [ngStyle]="{ 'padding-left': depth * 8 + 'px' }"
+      [disabled]="item.disabled"
+      [attr.routerLink]="!item.children ? item.route : null"
+      class="menu-list-item pl-8"
+      [ngClass]="{
+        highlighted: this.highlighted,
+        'not-highlighted': !this.highlighted,
+      }"
+      routerLinkActive="is-active"
+      (click)="onItemSelected($event, item)"
+    >
+      <mat-icon
+        *ngIf="
+          (item.icon && showIcon && !item.iconType) || item.iconType == 'mat'
+        "
+        class="menu-item-color"
+        matListItemIcon
+        >{{ item.icon }}</mat-icon
+      >
+      <i
+        *ngIf="item.icon && showIcon && item.iconType != 'mat'"
+        [class]="'menu-item-color ' + item.icon"
+      ></i>
+      <span class="menu-item-color">{{ item.text }}</span>
+      <span class="twistie-separator"></span>
+      <span *ngIf="item.children && item.children.length">
+        <mat-icon
+          class="menu-twistie menu-item-color"
+          [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'"
+        >
+          expand_more
+        </mat-icon>
+      </span>
+    </a>
+    <div>
+      <ngx-mat-menu-list-item
+        class="menu-child"
+        [showIcon]="showIcon"
+        [ngStyle]="{ display: expanded ? 'inherit' : 'none' }"
+        *ngFor="let child of item.children"
+        [item]="child"
+        [parent]="this"
+        [depth]="depth + 1"
+      ></ngx-mat-menu-list-item>
+    </div>
+    <ng-template #divider>
+      <div class="menu-divider"></div>
+    </ng-template>
+  `, isInline: true, styles: [".menu-list-item{margin-right:8px!important}.pl-8{padding-left:8px}.twistie-separator{flex:1 1 0%}.routeIcon{margin-right:10px;font-size:16pt}.menu-item-text{font-size:10pt}.menu-twistie{font-size:10pt;height:12px;width:12px}mat-icon{margin-left:8px!important;margin-right:8px!important}.menu-item-color{background-color:var(--sp-mat-menu-menu-item-bg-color)!important;color:var(--sp-mat-menu-menu-item-fg-color)!important}.highlighted,.highlighted .menu-item-color{background-color:var( --sp-mat-menu-highlighted-menu-item-bg-color )!important;color:var(--sp-mat-menu-highlighted-menu-item-fg-color)!important}.mdc-list-item{padding-right:0}.menu-divider{height:1em}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: SPMatMenuListItemComponent, selector: "ngx-mat-menu-list-item", inputs: ["highlighted", "item", "depth", "parent", "showIcon"] }], animations: [
+            trigger('indicatorRotate', [
+                state('collapsed', style({ transform: 'rotate(0deg)' })),
+                state('expanded', style({ transform: 'rotate(180deg)' })),
+                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-menu-list-item', template: `
+    <a
+      *ngIf="item.children || item.route; else divider"
+      mat-list-item
+      [ngStyle]="{ 'padding-left': depth * 8 + 'px' }"
+      [disabled]="item.disabled"
+      [attr.routerLink]="!item.children ? item.route : null"
+      class="menu-list-item pl-8"
+      [ngClass]="{
+        highlighted: this.highlighted,
+        'not-highlighted': !this.highlighted,
+      }"
+      routerLinkActive="is-active"
+      (click)="onItemSelected($event, item)"
+    >
+      <mat-icon
+        *ngIf="
+          (item.icon && showIcon && !item.iconType) || item.iconType == 'mat'
+        "
+        class="menu-item-color"
+        matListItemIcon
+        >{{ item.icon }}</mat-icon
+      >
+      <i
+        *ngIf="item.icon && showIcon && item.iconType != 'mat'"
+        [class]="'menu-item-color ' + item.icon"
+      ></i>
+      <span class="menu-item-color">{{ item.text }}</span>
+      <span class="twistie-separator"></span>
+      <span *ngIf="item.children && item.children.length">
+        <mat-icon
+          class="menu-twistie menu-item-color"
+          [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'"
+        >
+          expand_more
+        </mat-icon>
+      </span>
+    </a>
+    <div>
+      <ngx-mat-menu-list-item
+        class="menu-child"
+        [showIcon]="showIcon"
+        [ngStyle]="{ display: expanded ? 'inherit' : 'none' }"
+        *ngFor="let child of item.children"
+        [item]="child"
+        [parent]="this"
+        [depth]="depth + 1"
+      ></ngx-mat-menu-list-item>
+    </div>
+    <ng-template #divider>
+      <div class="menu-divider"></div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('indicatorRotate', [
+                            state('collapsed', style({ transform: 'rotate(0deg)' })),
+                            state('expanded', style({ transform: 'rotate(180deg)' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+                        ]),
+                    ], standalone: false, styles: [".menu-list-item{margin-right:8px!important}.pl-8{padding-left:8px}.twistie-separator{flex:1 1 0%}.routeIcon{margin-right:10px;font-size:16pt}.menu-item-text{font-size:10pt}.menu-twistie{font-size:10pt;height:12px;width:12px}mat-icon{margin-left:8px!important;margin-right:8px!important}.menu-item-color{background-color:var(--sp-mat-menu-menu-item-bg-color)!important;color:var(--sp-mat-menu-menu-item-fg-color)!important}.highlighted,.highlighted .menu-item-color{background-color:var( --sp-mat-menu-highlighted-menu-item-bg-color )!important;color:var(--sp-mat-menu-highlighted-menu-item-fg-color)!important}.mdc-list-item{padding-right:0}.menu-divider{height:1em}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2.MatDialog }, { type: i0.ChangeDetectorRef }], propDecorators: { highlighted: [{
+                type: Input
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], item: [{
+                type: Input
+            }], depth: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], children: [{
+                type: ViewChildren,
+                args: [SPMatMenuListItemComponent]
+            }] } });
+
+class SPMatMenuPaneComponent {
+    cdr;
+    layoutService;
+    router;
+    injector;
+    menuTitle = '';
+    showBackButton = false;
+    defaultBackButtonHref = '';
+    backButtonText = 'BACK';
+    menuItems = [];
+    brandingText = 'BRAND';
+    brandingImage = '';
+    matSideNav;
+    appVersion = '0.0';
+    menuPaneFooterContent;
+    showIcons = true;
+    baseUrl = '';
+    layout;
+    backButtonNavItem;
+    destroy = new Subject();
+    menuItemComps = viewChildren(SPMatMenuListItemComponent);
+    // So that if menuItems is specified via an async pipe, we can highlight the
+    // current URL after the menuItems are loaded.
+    menuItemComps$ = effect(() => {
+        const components = this.menuItemComps();
+        runInInjectionContext(this.injector, () => {
+            this.highlightUrlMenuItem(this.router.routerState.snapshot.url);
+        });
+    });
+    constructor(cdr, layoutService, router, injector) {
+        this.cdr = cdr;
+        this.layoutService = layoutService;
+        this.router = router;
+        this.injector = injector;
+    }
+    ngOnInit() {
+        this.layoutService.layoutChanged
+            .pipe(takeUntil(this.destroy), tap((newLayout) => {
+            // console.log(
+            //   'Layout changed - new toolbar height:',
+            //   newLayout.toolbarHeight
+            // );
+            this.layout = newLayout;
+            this.cdr.detectChanges();
+        }))
+            .subscribe();
+        if (this.showBackButton) {
+            this.backButtonNavItem = {
+                route: this.layoutService.previousUrl
+                    ? this.layoutService.previousUrl
+                    : this.defaultBackButtonHref,
+                text: this.backButtonText,
+                icon: 'arrow_back',
+                backButton: true,
+                backHref: window.history.state ? window.history.state['backHref'] : '#',
+            };
+            this.cdr.detectChanges();
+        }
+        this.router.events
+            .pipe(takeUntil(this.destroy), filter((e) => e instanceof NavigationEnd), tap((e) => {
+            if (this.matSideNav && this.layout.smallScreen) {
+                this.matSideNav.close();
+            }
+            const ne = e;
+            this.highlightUrlMenuItem(ne.urlAfterRedirects);
+        }))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy.next();
+    }
+    ngOnChanges(changes) {
+        if (changes['backButtonText']) {
+            if (this.backButtonNavItem) {
+                this.backButtonNavItem = {
+                    ...this.backButtonNavItem,
+                    text: this.backButtonText,
+                };
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.highlightUrlMenuItem(this.router.routerState.snapshot.url);
+    }
+    /**
+     * Highlights the menu item for the specified URL.
+     *
+     * @param url the full url of the current navigation
+     *
+     * The way this function works is like this.
+     *
+     * It first finds the NavItem matching the given URL in url arg. It does
+     * this by removing the baseUrl from the url and then comparing the
+     * NavItem.route attached to each SPMatMenuListItemComponent. This is done
+     * recursively covering all NavItem.children. When a matching NavItem is
+     * found, the function goes on to find the SPMatMenuListItemComponent which
+     * has this NavItem attached to it. This too is done recursively to find
+     * the innermost NavItem with matching URL.
+     *
+     * When a matching SPMatMenuListItemComponent is found, it first deselects
+     * the previous SPMatMenuListItemComponent selection and then goes on to
+     * select the newly matched SPMatMenuListItemComponent. If the
+     * SPMatMenuListItemComponent is a child of a parent NavItem, the parent
+     * NavItem is expanded. Similarly when deselecting the current selection,
+     * if it belongs to a parent NavItem and the parent is not shared by the
+     * currently matched SPMatMenuListItemComponent, it collapses the parent
+     * of the previously selected SPMatMenuListItemComponent. (Quite a mouthful
+     * of a sentence, but it's exactly how it works.)
+     */
+    highlightUrlMenuItem(url) {
+        // Remove baseUrl from our url-to-SPMatMenuListItem matching logic
+        const baseUrl = this.baseUrl.startsWith('/') ? this.baseUrl.substring(1) : this.baseUrl;
+        const baseUrlIndex = url.search(baseUrl);
+        if (baseUrlIndex != -1) {
+            url = url.substring(baseUrlIndex + baseUrl.length);
+        }
+        // Filter out empty strings so that we avoid a pointless iteration of the
+        // menuItemComps() array.
+        const urlParts = url.split('/').filter(u => !!u);
+        url = urlParts.join('/');
+        // console.log(`highlightCurrentUrlMenuItem - baseUrl: ${this.baseUrl} url: ${url}, urlParts: ${urlParts}`);
+        let highlightedItemFound = false;
+        // Function to find the NavItem for for the given url. Returns a NavItem
+        // if a matching NavItem is found, undefined otherwise.
+        const findNavItemForUrl = (baseUrl, navItem) => {
+            let matchingItem = undefined;
+            if (navItem.children) {
+                for (let index = 0; !matchingItem && index < navItem.children.length; index++) {
+                    matchingItem = findNavItemForUrl(baseUrl + (navItem?.route ?? ''), navItem.children[index]);
+                }
+            }
+            else if (navItem.route) {
+                if (url === navItem.route) {
+                    matchingItem = navItem;
+                }
+            }
+            return matchingItem;
+        };
+        let matchingNavItem = undefined;
+        for (let index = 0; !matchingNavItem && index < this.menuItemComps().length; index++) {
+            const element = this.menuItemComps()[index];
+            if (element?.item) {
+                matchingNavItem = findNavItemForUrl(url, element?.item);
+            }
+        }
+        // Function to find the SPMatMenuListItemComponent for the given NavItem.
+        // Returns SPMatMenuListItemComponent if a match is found, undefined
+        // otherwise.
+        const findMenuItemCompForNavItem = (menuItemComp, target) => {
+            let matchingMenuItemComp = undefined;
+            if (menuItemComp.item === target) {
+                matchingMenuItemComp = menuItemComp;
+            }
+            else if (menuItemComp.item?.children) {
+                for (let index = 0; !matchingMenuItemComp && index < menuItemComp.children.length; index++) {
+                    matchingMenuItemComp = findMenuItemCompForNavItem(menuItemComp.children.get(index), target);
+                }
+            }
+            return matchingMenuItemComp;
+        };
+        let matchingMenuItemComp = undefined;
+        if (matchingNavItem) {
+            for (let index = 0; !matchingMenuItemComp && index < this.menuItemComps().length; index++) {
+                const element = this.menuItemComps()[index];
+                matchingMenuItemComp = findMenuItemCompForNavItem(this.menuItemComps()[index], matchingNavItem);
+            }
+        }
+        if (matchingMenuItemComp) {
+            this.highlightMenuItemComp(matchingMenuItemComp);
+        }
+        // old logic, which is a little confusing and depends on state stored
+        // in SPMatMenuListItemComponent.
+        /*
+          for (let index = 0; !highlightedItemFound && index < urlParts.length; index++) {
+            const lastUrlSegment = urlParts[index];
+            this.menuItemComps().find(menuItemComp => {
+              const route = menuItemComp.item?.route;
+              if (route === lastUrlSegment) {
+                if (!menuItemComp.item?.children) {
+                  menuItemComp.toggleHighlight(true);
+                  highlightedItemFound = true;
+                } else if (menuItemComp.checkChildrenForHighlight(lastUrlSegment)) {
+                  menuItemComp.expand();
+                  highlightedItemFound = true;
+                }
+              } else {
+                menuItemComp.toggleHighlight(false);
+                if (menuItemComp.item?.children) {
+                  if (menuItemComp.checkChildrenForHighlight(lastUrlSegment)) {
+                    menuItemComp.expand();
+                    highlightedItemFound = true
+                  };
+                }
+              }
+            });
+          }
+        */
+    }
+    // To keep track of current highlighted SPMatMenuListItemComponent.
+    _curHighlitedMenuItemComp;
+    highlightMenuItemComp(menuItemComp) {
+        // Deslect currently highliged SPMatMenuListItemComponent if it's different
+        // from the menuItemComp arg.
+        const lastHighlitedMenuItemComp = this._curHighlitedMenuItemComp;
+        if (this._curHighlitedMenuItemComp && this._curHighlitedMenuItemComp !== menuItemComp) {
+            this._curHighlitedMenuItemComp.toggleHighlight(false);
+            this._curHighlitedMenuItemComp = undefined;
+        }
+        menuItemComp.toggleHighlight(true);
+        if (lastHighlitedMenuItemComp && lastHighlitedMenuItemComp?.parent) {
+            lastHighlitedMenuItemComp.parent.collapse();
+        }
+        if (menuItemComp.parent) {
+            menuItemComp.parent.expand();
+        }
+        this._curHighlitedMenuItemComp = menuItemComp;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuPaneComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: LayoutService }, { token: i1$1.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.6", type: SPMatMenuPaneComponent, isStandalone: false, selector: "ngx-mat-menu-pane", inputs: { menuTitle: "menuTitle", showBackButton: "showBackButton", defaultBackButtonHref: "defaultBackButtonHref", backButtonText: "backButtonText", menuItems: "menuItems", brandingText: "brandingText", brandingImage: "brandingImage", matSideNav: "matSideNav", appVersion: "appVersion", menuPaneFooterContent: "menuPaneFooterContent", showIcons: "showIcons", baseUrl: "baseUrl" }, viewQueries: [{ propertyName: "menuItemComps", predicate: SPMatMenuListItemComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="menu-pane-wrapper">
+      <div class="sidenav-branding mat-toolbar-single-row">
+        <div class="branding branding-logo">
+          <img *ngIf="brandingImage" [src]="brandingImage" />
+        </div>
+        <h4 class="mat-typography branding branding-text">
+          {{ brandingText }}
+        </h4>
+      </div>
+      <div class="sidenav-menu">
+        <div *ngIf="menuTitle" class="mat-body title">{{ menuTitle }}</div>
+        <mat-nav-list>
+          <ngx-mat-menu-list-item
+            *ngIf="backButtonNavItem"
+            [item]="backButtonNavItem"
+          ></ngx-mat-menu-list-item>
+          <ngx-mat-menu-list-item
+            *ngFor="let item of menuItems"
+            [item]="item"
+            [showIcon]="showIcons"
+          ></ngx-mat-menu-list-item>
+        </mat-nav-list>
+      </div>
+      <div class="sidenav-version" *ngIf="menuPaneFooterContent">
+        <ng-container *ngTemplateOutlet="menuPaneFooterContent"> </ng-container>
+      </div>
+    </div>
+  `, isInline: true, styles: [".app-is-mobile .app-toolbar{position:fixed;z-index:2}h1.app-name{margin:auto auto auto 0}.sidenav-container{flex:1}.app-is-mobile .sidenav-container{display:inherit}.spacer{flex:1 1 auto}.menu-pane-wrapper{display:flex;flex-direction:column;height:100%}.sidenav-branding{border-bottom:1px solid var(--sp-mat-menu-border-color);display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 12px}.sidenav-menu{flex:1;overflow-x:hidden}.sidenav-menu .title{text-align:center;padding:.5em .1em 0;font-weight:bolder;font-size:1.1em}.sidenav-version{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border-top:1px solid var(--sp-mat-menu-border-color);font-size:smaller}.sidenav-version a{color:var(--vendor-foreground-color)!important}.branding{height:100%;display:flex;flex-direction:column;justify-content:center}.branding-logo img{width:32px;height:32px}.branding-text{overflow:auto;text-overflow:ellipsis;white-space:nowrap;font-size:1.1em;font-weight:bolder;margin:0 4px}.sidenav-content{padding:12px;height:calc(100% - 56px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: SPMatMenuListItemComponent, selector: "ngx-mat-menu-list-item", inputs: ["highlighted", "item", "depth", "parent", "showIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuPaneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-menu-pane', template: `
+    <div class="menu-pane-wrapper">
+      <div class="sidenav-branding mat-toolbar-single-row">
+        <div class="branding branding-logo">
+          <img *ngIf="brandingImage" [src]="brandingImage" />
+        </div>
+        <h4 class="mat-typography branding branding-text">
+          {{ brandingText }}
+        </h4>
+      </div>
+      <div class="sidenav-menu">
+        <div *ngIf="menuTitle" class="mat-body title">{{ menuTitle }}</div>
+        <mat-nav-list>
+          <ngx-mat-menu-list-item
+            *ngIf="backButtonNavItem"
+            [item]="backButtonNavItem"
+          ></ngx-mat-menu-list-item>
+          <ngx-mat-menu-list-item
+            *ngFor="let item of menuItems"
+            [item]="item"
+            [showIcon]="showIcons"
+          ></ngx-mat-menu-list-item>
+        </mat-nav-list>
+      </div>
+      <div class="sidenav-version" *ngIf="menuPaneFooterContent">
+        <ng-container *ngTemplateOutlet="menuPaneFooterContent"> </ng-container>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".app-is-mobile .app-toolbar{position:fixed;z-index:2}h1.app-name{margin:auto auto auto 0}.sidenav-container{flex:1}.app-is-mobile .sidenav-container{display:inherit}.spacer{flex:1 1 auto}.menu-pane-wrapper{display:flex;flex-direction:column;height:100%}.sidenav-branding{border-bottom:1px solid var(--sp-mat-menu-border-color);display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 12px}.sidenav-menu{flex:1;overflow-x:hidden}.sidenav-menu .title{text-align:center;padding:.5em .1em 0;font-weight:bolder;font-size:1.1em}.sidenav-version{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border-top:1px solid var(--sp-mat-menu-border-color);font-size:smaller}.sidenav-version a{color:var(--vendor-foreground-color)!important}.branding{height:100%;display:flex;flex-direction:column;justify-content:center}.branding-logo img{width:32px;height:32px}.branding-text{overflow:auto;text-overflow:ellipsis;white-space:nowrap;font-size:1.1em;font-weight:bolder;margin:0 4px}.sidenav-content{padding:12px;height:calc(100% - 56px);overflow:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: LayoutService }, { type: i1$1.Router }, { type: i0.Injector }], propDecorators: { menuTitle: [{
+                type: Input
+            }], showBackButton: [{
+                type: Input
+            }], defaultBackButtonHref: [{
+                type: Input
+            }], backButtonText: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], brandingText: [{
+                type: Input
+            }], brandingImage: [{
+                type: Input
+            }], matSideNav: [{
+                type: Input
+            }], appVersion: [{
+                type: Input
+            }], menuPaneFooterContent: [{
+                type: Input
+            }], showIcons: [{
+                type: Input
+            }], baseUrl: [{
+                type: Input
+            }] } });
+
+class SPMatMenuLayoutComponent {
+    layoutService;
+    cdr;
+    menuNav;
+    layout;
+    destroy = new Subject();
+    containerHeight = 500;
+    topBottomPadding = 6;
+    baseUrl = '';
+    showBackButton = false;
+    defaultBackButtonHref = '';
+    backButtonText = 'BACK';
+    brandingImage = '';
+    brandingText = '';
+    appTitle = '';
+    menuTitle = '';
+    menuItems = [];
+    // Template Partials for configurable portions of the layout
+    menuPaneFooterContent;
+    toolbarEndContent;
+    infoPaneContent;
+    toolbarTitleContent;
+    // Width of the info pane on the right (or left for LTR) of the screen.
+    infoPaneMinWidth = 250;
+    infoPaneMaxWidth = 400;
+    contentContainerClass = '';
+    showIcons = true;
+    // Allows querying infoPane to activate it or to set its attributes
+    infoPane;
+    constructor(layoutService, cdr) {
+        this.layoutService = layoutService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.layoutService.layoutChanged
+            .pipe(takeUntil(this.destroy), tap((newLayout) => {
+            this.layout = newLayout;
+            this.containerHeight =
+                window.innerHeight -
+                    (newLayout.toolbarHeight + this.topBottomPadding * 2);
+            this.cdr.detectChanges();
+        }))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy.next();
+        this.destroy.complete();
+    }
+    onToggleMenuPane() {
+        if (this.menuNav) {
+            this.menuNav.toggle();
+        }
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuLayoutComponent, deps: [{ token: LayoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SPMatMenuLayoutComponent, isStandalone: false, selector: "sp-mat-menu-layout", inputs: { baseUrl: "baseUrl", showBackButton: "showBackButton", defaultBackButtonHref: "defaultBackButtonHref", backButtonText: "backButtonText", brandingImage: "brandingImage", brandingText: "brandingText", appTitle: "appTitle", menuTitle: "menuTitle", menuItems: "menuItems", menuPaneFooterContent: "menuPaneFooterContent", toolbarEndContent: "toolbarEndContent", infoPaneContent: "infoPaneContent", toolbarTitleContent: "toolbarTitleContent", infoPaneMinWidth: "infoPaneMinWidth", infoPaneMaxWidth: "infoPaneMaxWidth", contentContainerClass: "contentContainerClass", showIcons: "showIcons" }, viewQueries: [{ propertyName: "menuNav", first: true, predicate: ["menuNav"], descendants: true }, { propertyName: "infoPane", first: true, predicate: ["infoPane"], descendants: true }], ngImport: i0, template: `
+    <mat-sidenav-container class="layout-container">
+      <mat-sidenav
+        class="layout-menu-pane"
+        opened
+        #menuNav
+        [mode]="layout.smallScreen ? 'over' : 'side'"
+        [opened]="!layout.smallScreen"
+        [fixedInViewport]="layout.smallScreen"
+      >
+        <div class="layout-menu-container">
+          <ngx-mat-menu-pane
+            [baseUrl]="baseUrl"
+            [showBackButton]="showBackButton"
+            [showIcons]="showIcons"
+            [defaultBackButtonHref]="defaultBackButtonHref"
+            [backButtonText]="backButtonText"
+            [brandingImage]="brandingImage"
+            [brandingText]="brandingText"
+            [menuItems]="menuItems"
+            [matSideNav]="menuNav"
+            [menuPaneFooterContent]="menuPaneFooterContent"
+            [menuTitle]="menuTitle"
+            class="h-100"
+          ></ngx-mat-menu-pane>
+        </div>
+      </mat-sidenav>
+
+      <mat-sidenav
+        [ngStyle]="{
+          'min-width.px': infoPaneMinWidth,
+          'max-width.px': infoPaneMaxWidth
+        }"
+        #infoPane
+        closed
+        mode="over"
+        position="end"
+      >
+        <ng-container *ngTemplateOutlet="infoPaneContent"></ng-container>
+      </mat-sidenav>
+
+      <mat-sidenav-content class="layout-content">
+        <mat-toolbar class="layout-content-toolbar">
+          <button mat-icon-button (click)="onToggleMenuPane()">
+            <mat-icon>menu</mat-icon>
+          </button>
+          <ng-template #defaultToolbarTitle>
+            <h4>{{ appTitle }}</h4>
+          </ng-template>
+          <ng-container
+            *ngTemplateOutlet="
+              toolbarTitleContent ? toolbarTitleContent : defaultToolbarTitle
+            "
+          ></ng-container>
+          <span class="spacer"></span>
+          <ng-container *ngTemplateOutlet="toolbarEndContent"></ng-container>
+        </mat-toolbar>
+        <div class="layout-content-content" [class]="contentContainerClass">
+          <router-outlet></router-outlet>
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `, isInline: true, styles: [".layout-menu-pane{background-color:var(--sp-mat-menu-bg-color)!important;color:var(--sp-mat-menu-fg-color)!important}.layout-container{position:absolute;inset:0}.layout-menu-container{height:100%;max-width:var(--sp-mat-menu-sidemenu-max-width, 50%);min-width:var(--sp-mat-menu-sidemenu-min-width, 250px);text-wrap:nowrap;overflow-x:scroll;overflow-y:scroll}.layout-content{height:100vh;display:flex;flex-direction:column}.layout-content-toolbar{border-bottom:1px solid var(--sp-mat-menu-toolbar-border-color);flex-grow:0;background-color:var(--sp-mat-menu-toolbar-bg-color);color:var(--sp-mat-menu-toolbar-fg-color);padding:0;min-height:var(--mat-toolbar-standard-height);max-height:var(--mat-toolbar-standard-height)}.layout-content-content{flex-grow:1;overflow:hidden}.h-100{height:100%}.spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: SPMatMenuPaneComponent, selector: "ngx-mat-menu-pane", inputs: ["menuTitle", "showBackButton", "defaultBackButtonHref", "backButtonText", "menuItems", "brandingText", "brandingImage", "matSideNav", "appVersion", "menuPaneFooterContent", "showIcons", "baseUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-mat-menu-layout', template: `
+    <mat-sidenav-container class="layout-container">
+      <mat-sidenav
+        class="layout-menu-pane"
+        opened
+        #menuNav
+        [mode]="layout.smallScreen ? 'over' : 'side'"
+        [opened]="!layout.smallScreen"
+        [fixedInViewport]="layout.smallScreen"
+      >
+        <div class="layout-menu-container">
+          <ngx-mat-menu-pane
+            [baseUrl]="baseUrl"
+            [showBackButton]="showBackButton"
+            [showIcons]="showIcons"
+            [defaultBackButtonHref]="defaultBackButtonHref"
+            [backButtonText]="backButtonText"
+            [brandingImage]="brandingImage"
+            [brandingText]="brandingText"
+            [menuItems]="menuItems"
+            [matSideNav]="menuNav"
+            [menuPaneFooterContent]="menuPaneFooterContent"
+            [menuTitle]="menuTitle"
+            class="h-100"
+          ></ngx-mat-menu-pane>
+        </div>
+      </mat-sidenav>
+
+      <mat-sidenav
+        [ngStyle]="{
+          'min-width.px': infoPaneMinWidth,
+          'max-width.px': infoPaneMaxWidth
+        }"
+        #infoPane
+        closed
+        mode="over"
+        position="end"
+      >
+        <ng-container *ngTemplateOutlet="infoPaneContent"></ng-container>
+      </mat-sidenav>
+
+      <mat-sidenav-content class="layout-content">
+        <mat-toolbar class="layout-content-toolbar">
+          <button mat-icon-button (click)="onToggleMenuPane()">
+            <mat-icon>menu</mat-icon>
+          </button>
+          <ng-template #defaultToolbarTitle>
+            <h4>{{ appTitle }}</h4>
+          </ng-template>
+          <ng-container
+            *ngTemplateOutlet="
+              toolbarTitleContent ? toolbarTitleContent : defaultToolbarTitle
+            "
+          ></ng-container>
+          <span class="spacer"></span>
+          <ng-container *ngTemplateOutlet="toolbarEndContent"></ng-container>
+        </mat-toolbar>
+        <div class="layout-content-content" [class]="contentContainerClass">
+          <router-outlet></router-outlet>
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".layout-menu-pane{background-color:var(--sp-mat-menu-bg-color)!important;color:var(--sp-mat-menu-fg-color)!important}.layout-container{position:absolute;inset:0}.layout-menu-container{height:100%;max-width:var(--sp-mat-menu-sidemenu-max-width, 50%);min-width:var(--sp-mat-menu-sidemenu-min-width, 250px);text-wrap:nowrap;overflow-x:scroll;overflow-y:scroll}.layout-content{height:100vh;display:flex;flex-direction:column}.layout-content-toolbar{border-bottom:1px solid var(--sp-mat-menu-toolbar-border-color);flex-grow:0;background-color:var(--sp-mat-menu-toolbar-bg-color);color:var(--sp-mat-menu-toolbar-fg-color);padding:0;min-height:var(--mat-toolbar-standard-height);max-height:var(--mat-toolbar-standard-height)}.layout-content-content{flex-grow:1;overflow:hidden}.h-100{height:100%}.spacer{flex:1 1 auto}\n"] }]
+        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { menuNav: [{
+                type: ViewChild,
+                args: ['menuNav']
+            }], baseUrl: [{
+                type: Input
+            }], showBackButton: [{
+                type: Input
+            }], defaultBackButtonHref: [{
+                type: Input
+            }], backButtonText: [{
+                type: Input
+            }], brandingImage: [{
+                type: Input
+            }], brandingText: [{
+                type: Input
+            }], appTitle: [{
+                type: Input
+            }], menuTitle: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], menuPaneFooterContent: [{
+                type: Input
+            }], toolbarEndContent: [{
+                type: Input
+            }], infoPaneContent: [{
+                type: Input
+            }], toolbarTitleContent: [{
+                type: Input
+            }], infoPaneMinWidth: [{
+                type: Input
+            }], infoPaneMaxWidth: [{
+                type: Input
+            }], contentContainerClass: [{
+                type: Input
+            }], showIcons: [{
+                type: Input
+            }], infoPane: [{
+                type: ViewChild,
+                args: ['infoPane']
+            }] } });
+
+class SPMatMenuLayoutModule {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuLayoutModule, declarations: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent], imports: [CommonModule,
+            RouterOutlet,
+            MatSidenavModule,
+            MatToolbarModule,
+            MatIconModule,
+            MatButtonModule,
+            MatMenuModule,
+            MatDialogModule,
+            MatListModule], exports: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent] });
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuLayoutModule, imports: [CommonModule,
+            MatSidenavModule,
+            MatToolbarModule,
+            MatIconModule,
+            MatButtonModule,
+            MatMenuModule,
+            MatDialogModule,
+            MatListModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatMenuLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent],
+                    imports: [
+                        CommonModule,
+                        RouterOutlet,
+                        MatSidenavModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatDialogModule,
+                        MatListModule
+                    ],
+                    exports: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LayoutService, SPMatMenuLayoutComponent, SPMatMenuLayoutModule, SPMatMenuListItemComponent, SPMatMenuPaneComponent };
+//# sourceMappingURL=smallpearl-ngx-helper-mat-side-menu-layout.mjs.map