@smallpearl/ngx-helper 20.0.3 → 21.0.1

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

@@ -90,10 +90,10 @@ class LayoutService {
     get previousUrl() {
         return this._previousUrl;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", ngImport: i0, type: LayoutService, providedIn: 'any' });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", 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: "21.1.2", ngImport: i0, type: LayoutService, providedIn: 'any' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'any' }]
         }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i1$1.Router }] });
@@ -212,60 +212,65 @@ class SPMatMenuListItemComponent {
             this.cdr.detectChanges();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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"
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", 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: "17.0.0", version: "21.1.2", 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: `
+    @if (item.children || item.route) {
+      <a
+        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'"
+        routerLinkActive="is-active"
+        (click)="onItemSelected($event, item)"
         >
-          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{--mat-list-list-item-one-line-container-height: 44px;border-radius:0!important;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: [
+        @if (
+          (item.icon && showIcon && !item.iconType) || item.iconType == 'mat'
+          ) {
+          <mat-icon
+            class="menu-item-color"
+            matListItemIcon
+            >{{ item.icon }}</mat-icon
+            >
+          }
+          @if (item.icon && showIcon && item.iconType != 'mat') {
+            <i
+              [class]="'menu-item-color ' + item.icon"
+            ></i>
+          }
+          <span class="menu-item-color">{{ item.text }}</span>
+          <span class="twistie-separator"></span>
+          @if (item.children && item.children.length) {
+            <span>
+              <mat-icon
+                class="menu-twistie menu-item-color"
+                [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'"
+                >
+                expand_more
+              </mat-icon>
+            </span>
+          }
+        </a>
+      } @else {
+        <div class="menu-divider"></div>
+      }
+      <div>
+        @for (child of item.children; track child) {
+          <ngx-mat-menu-list-item
+            class="menu-child"
+            [showIcon]="showIcon"
+            [ngStyle]="{ display: expanded ? 'inherit' : 'none' }"
+            [item]="child"
+            [parent]="this"
+            [depth]="depth + 1"
+          ></ngx-mat-menu-list-item>
+        }
+      </div>
+    `, isInline: true, styles: [".menu-list-item{--mat-list-list-item-one-line-container-height: 44px;border-radius:0!important;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.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)' })),
@@ -273,61 +278,66 @@ class SPMatMenuListItemComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatMenuListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", 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"
+    @if (item.children || item.route) {
+      <a
+        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'"
+        routerLinkActive="is-active"
+        (click)="onItemSelected($event, item)"
         >
-          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: [
+        @if (
+          (item.icon && showIcon && !item.iconType) || item.iconType == 'mat'
+          ) {
+          <mat-icon
+            class="menu-item-color"
+            matListItemIcon
+            >{{ item.icon }}</mat-icon
+            >
+          }
+          @if (item.icon && showIcon && item.iconType != 'mat') {
+            <i
+              [class]="'menu-item-color ' + item.icon"
+            ></i>
+          }
+          <span class="menu-item-color">{{ item.text }}</span>
+          <span class="twistie-separator"></span>
+          @if (item.children && item.children.length) {
+            <span>
+              <mat-icon
+                class="menu-twistie menu-item-color"
+                [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'"
+                >
+                expand_more
+              </mat-icon>
+            </span>
+          }
+        </a>
+      } @else {
+        <div class="menu-divider"></div>
+      }
+      <div>
+        @for (child of item.children; track child) {
+          <ngx-mat-menu-list-item
+            class="menu-child"
+            [showIcon]="showIcon"
+            [ngStyle]="{ display: expanded ? 'inherit' : 'none' }"
+            [item]="child"
+            [parent]="this"
+            [depth]="depth + 1"
+          ></ngx-mat-menu-list-item>
+        }
+      </div>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('indicatorRotate', [
                             state('collapsed', style({ transform: 'rotate(0deg)' })),
                             state('expanded', style({ transform: 'rotate(180deg)' })),
@@ -570,68 +580,84 @@ class SPMatMenuPaneComponent {
         }
         this._curHighlitedMenuItemComp = menuItemComp;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", 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.0.0", version: "21.1.2", 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" />
+          @if (brandingImage) {
+            <img [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>
+        @if (menuTitle) {
+          <div 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>
+          @if (backButtonNavItem) {
+            <ngx-mat-menu-list-item
+              [item]="backButtonNavItem"
+            ></ngx-mat-menu-list-item>
+          }
+          @for (item of menuItems; track item) {
+            <ngx-mat-menu-list-item
+              [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>
+      @if (menuPaneFooterContent) {
+        <div class="sidenav-version">
+          <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{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 });
+    `, 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{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.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: "20.3.16", ngImport: i0, type: SPMatMenuPaneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", 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" />
+          @if (brandingImage) {
+            <img [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>
+        @if (menuTitle) {
+          <div 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>
+          @if (backButtonNavItem) {
+            <ngx-mat-menu-list-item
+              [item]="backButtonNavItem"
+            ></ngx-mat-menu-list-item>
+          }
+          @for (item of menuItems; track item) {
+            <ngx-mat-menu-list-item
+              [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>
+      @if (menuPaneFooterContent) {
+        <div class="sidenav-version">
+          <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{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"] }]
+    `, 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{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: [{
@@ -711,8 +737,8 @@ class SPMatMenuLayoutComponent {
             this.menuNav.toggle();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatMenuLayoutComponent, deps: [{ token: LayoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SPMatMenuLayoutComponent, deps: [{ token: LayoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", 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"
@@ -776,7 +802,7 @@ class SPMatMenuLayoutComponent {
     </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;overflow-x:clip}.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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "20.3.16", ngImport: i0, type: SPMatMenuLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SPMatMenuLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-mat-menu-layout', template: `
     <mat-sidenav-container class="layout-container">
@@ -884,8 +910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class SPMatMenuLayoutModule {
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatMenuLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: SPMatMenuLayoutModule, declarations: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent], imports: [CommonModule,
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SPMatMenuLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SPMatMenuLayoutModule, declarations: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent], imports: [CommonModule,
             RouterOutlet,
             MatSidenavModule,
             MatToolbarModule,
@@ -894,7 +920,7 @@ class SPMatMenuLayoutModule {
             MatMenuModule,
             MatDialogModule,
             MatListModule], exports: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent] });
-    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatMenuLayoutModule, imports: [CommonModule,
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SPMatMenuLayoutModule, imports: [CommonModule,
             MatSidenavModule,
             MatToolbarModule,
             MatIconModule,
@@ -903,7 +929,7 @@ class SPMatMenuLayoutModule {
             MatDialogModule,
             MatListModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SPMatMenuLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SPMatMenuLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SPMatMenuPaneComponent, SPMatMenuListItemComponent, SPMatMenuLayoutComponent],