@rxap/layout 18.0.3-dev.1 → 18.1.0-dev.1

package/compodoc/components/NavigationItemComponent.html

@@ -221,6 +221,7 @@
                         <ul class="index-list">
                             <li>
                                     <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
                                 <a href="#active" >active</a>
                             </li>
                             <li>
@@ -228,15 +229,24 @@
                                 <a href="#children" >children</a>
                             </li>
                             <li>
-                                    <span class="modifier"></span>
                                     <span class="modifier">Public</span>
-                                <a href="#routerLinkActive" >routerLinkActive</a>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#collapsed" >collapsed</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#item" >item</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#itemClasses" >itemClasses</a>
                             </li>
                             <li>
-                                    <span class="modifier"></span>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#sidenav" >sidenav</a>
+                                <a href="#level" >level</a>
                             </li>
                         </ul>
                     </td>
@@ -285,148 +295,12 @@
                 </tr>
 
 
-                <tr>
-                    <td class="col-md-4">
-                        <h6><b>HostBindings</b></h6>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <ul class="index-list">
-                            <li>
-                                <a href="#class.active" >class.active</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
 
 
-                    <tr>
-                        <td class="col-md-4">
-                            <h6><b>Accessors</b></h6>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class="col-md-4">
-                            <ul class="index-list">
-                                <li>
-                                    <a href="#isActive" >isActive</a>
-                                </li>
-                            </ul>
-                        </td>
-                    </tr>
         </tbody>
     </table>
 </section>
 
-    <section data-compodoc="block-constructor">
-    <h3 id="constructor">Constructor</h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-<code>constructor(router: Router, sidenav: <a href="../injectables/SidenavComponentService.html" target="_self">SidenavComponentService</a>, elementRef: ElementRef, renderer: Renderer2, overlay: Overlay, viewContainerRef: ViewContainerRef)</code>
-                    </td>
-                </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:122</a></div>
-                            </td>
-                        </tr>
-
-                <tr>
-                    <td class="col-md-4">
-                            <div>
-                                    <b>Parameters :</b>
-                                    <table class="params">
-                                        <thead>
-                                            <tr>
-                                                <td>Name</td>
-                                                    <td>Type</td>
-                                                <td>Optional</td>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                                <tr>
-                                                        <td>router</td>
-                                                  
-                                                        <td>
-                                                                    <code>Router</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>sidenav</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="../injectables/SidenavComponentService.html" target="_self" >SidenavComponentService</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>elementRef</td>
-                                                  
-                                                        <td>
-                                                                    <code>ElementRef</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>renderer</td>
-                                                  
-                                                        <td>
-                                                                    <code>Renderer2</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>overlay</td>
-                                                  
-                                                        <td>
-                                                                    <code>Overlay</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>viewContainerRef</td>
-                                                  
-                                                        <td>
-                                                                    <code>ViewContainerRef</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
     <section data-compodoc="block-inputs">
     <h3 id="inputs">Inputs</h3>
@@ -438,12 +312,6 @@
                         <b>item</b>
                     </td>
                 </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../interfaces/NavigationItem.html" target="_self" >NavigationItem</a></code>
-
-                    </td>
-                </tr>
                 <tr>
                     <td class="col-md-4">
                         <i>Required : </i>&nbsp;<b>true</b>
@@ -451,7 +319,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:108</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:98</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -464,12 +332,6 @@
                         <b>level</b>
                     </td>
                 </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
-
-                    </td>
-                </tr>
                 <tr>
                     <td class="col-md-4">
                         <i>Default value : </i><code>0</code>
@@ -477,41 +339,13 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:98</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:94</a></div>
                             </td>
                         </tr>
             </tbody>
         </table>
 </section>
 
-    <section data-compodoc="block-properties">
-    <h3>HostBindings</h3>    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="class.active"></a>
-                    <span class="name">
-                        <span ><b>class.active</b></span>
-                        <a href="#class.active"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
-
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:113</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-</section>
 
 
     <section data-compodoc="block-methods">
@@ -541,8 +375,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="199"
-                                    class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:199</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="178"
+                                    class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:178</a></div>
                         </td>
                     </tr>
 
@@ -610,8 +444,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="187"
-                                    class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:187</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="166"
+                                    class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:166</a></div>
                         </td>
                     </tr>
 
@@ -679,8 +513,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="193"
-                                    class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:193</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="172"
+                                    class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:172</a></div>
                         </td>
                     </tr>
 
@@ -739,6 +573,7 @@
                     <a name="active"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
                         <span ><b>active</b></span>
                         <a href="#active"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -751,7 +586,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:110</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:99</a></div>
                         </td>
                     </tr>
 
@@ -783,7 +618,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:102</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:96</a></div>
                         </td>
                     </tr>
 
@@ -794,33 +629,23 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="routerLinkActive"></a>
+                    <a name="collapsed"></a>
                     <span class="name">
-                            <span class="modifier"></span>
                             <span class="modifier">Public</span>
-                        <span ><b>routerLinkActive</b></span>
-                        <a href="#routerLinkActive"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>collapsed</b></span>
+                        <a href="#collapsed"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>RouterLinkActive</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @ViewChild(RouterLinkActive, {static: true})<br />
-                        </code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.collapsed())</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:105</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:111</a></div>
                         </td>
                     </tr>
 
@@ -831,150 +656,126 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="sidenav"></a>
+                    <a name="item"></a>
                     <span class="name">
-                            <span class="modifier"></span>
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>sidenav</b></span>
-                        <a href="#sidenav"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>item</b></span>
+                        <a href="#item"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../injectables/SidenavComponentService.html" target="_self" >SidenavComponentService</a></code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @Inject(SidenavComponentService)<br />
-                        </code>
-                    </td>
-                </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:128</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:98</a></div>
                         </td>
                     </tr>
 
 
         </tbody>
     </table>
-</section>
-
-    <section data-compodoc="block-accessors">
-    <h3 id="accessors">
-        Accessors
-    </h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="itemClasses"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>itemClasses</b></span>
+                        <a href="#itemClasses"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
                 <tr>
                     <td class="col-md-4">
-                        <a name="isActive"></a>
-                        <span class="name"><b>isActive</b><a href="#isActive"><span class="icon ion-ios-link"></span></a></span>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; {
+    let classes &#x3D; &#x60;level-${ this.level() * 4 }&#x60;;
+    if (this.collapsed()) {
+      classes +&#x3D; &#x27; invisible&#x27;;
+    }
+    return classes;
+  })</code>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:101</a></div>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td class="col-md-4">
-                        <span class="accessor"><b>get</b><code>isActive()</code></span>
-                    </td>
-                </tr>
-                            <tr>
-                                <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:113</a></div>
-                                </td>
-                            </tr>
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="level"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>level</b></span>
+                        <a href="#level"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
                 <tr>
                     <td class="col-md-4">
-                        <span class="accessor"><b>set</b><code>isActive(value: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
+                        <i>Default value : </i><code>0</code>
                     </td>
                 </tr>
-                            <tr>
-                                <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:117</a></div>
-                                </td>
-                            </tr>
                     <tr>
                         <td class="col-md-4">
-
-                                <div class="io-description">
-                                        <b>Parameters :</b>
-                                        <table class="params">
-                                            <thead>
-                                                <tr>
-                                                    <td>Name</td>
-                                                        <td>Type</td>
-                                                    <td>Optional</td>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                    <tr>
-                                                            <td>value</td>
-                                                    
-                                                            <td>
-                                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
-                                                            </td>
-                                                    
-                                                        <td>
-                                                                No
-                                                        </td>
-                                                        
-                                                    </tr>
-                                            </tbody>
-                                        </table>
-                                </div>
-                                <div>
-                                </div>
-                                <div class="io-description">
-                                    <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                                </div>
+                                <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/lib/navigation/navigation-item/navigation-item.component.ts:94</a></div>
                         </td>
                     </tr>
-            </tbody>
-        </table>
+
+
+        </tbody>
+    </table>
 </section>
+
 </div>
 
 
     <div class="tab-pane fade  tab-source-code" id="source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
+  animate,
+  style,
+  transition,
+  trigger,
+} from &#x27;@angular/animations&#x27;;
+import {
+  NgClass,
+  NgIf,
+} from &#x27;@angular/common&#x27;;
+import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   ElementRef,
   forwardRef,
-  HostBinding,
-  Inject,
-  Input,
+  inject,
+  input,
   OnChanges,
   OnDestroy,
   Renderer2,
   signal,
   SimpleChanges,
-  ViewChild,
-  ViewContainerRef,
+  viewChild,
   ViewEncapsulation,
 } from &#x27;@angular/core&#x27;;
-import { Required } from &#x27;@rxap/utilities&#x27;;
-import {
-  animate,
-  style,
-  transition,
-  trigger,
-} from &#x27;@angular/animations&#x27;;
+import { MatRippleModule } from &#x27;@angular/material/core&#x27;;
+import { MatDividerModule } from &#x27;@angular/material/divider&#x27;;
+import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
 import {
   NavigationEnd,
   Router,
   RouterLink,
   RouterLinkActive,
 } from &#x27;@angular/router&#x27;;
+import { IconDirective } from &#x27;@rxap/material-directives/icon&#x27;;
 import {
   debounceTime,
   Subscription,
@@ -984,22 +785,13 @@ import {
   startWith,
   tap,
 } from &#x27;rxjs/operators&#x27;;
-import { Overlay } from &#x27;@angular/cdk/overlay&#x27;;
-import { SidenavComponentService } from &#x27;../../sidenav/sidenav.component.service&#x27;;
-import { NavigationComponent } from &#x27;../navigation.component&#x27;;
-import { MatDividerModule } from &#x27;@angular/material/divider&#x27;;
-import { IconDirective } from &#x27;@rxap/material-directives/icon&#x27;;
-import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
-import { MatRippleModule } from &#x27;@angular/material/core&#x27;;
-import {
-  NgClass,
-  NgIf,
-} from &#x27;@angular/common&#x27;;
+import { LayoutService } from &#x27;../../layout.service&#x27;;
 import {
   Navigation,
   NavigationDividerItem,
   NavigationItem,
 } from &#x27;../navigation-item&#x27;;
+import { NavigationComponent } from &#x27;../navigation.component&#x27;;
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -1036,53 +828,35 @@ import {
     MatDividerModule,
     forwardRef(() &#x3D;&gt; NavigationComponent),
     NgClass,
-  ],
+  ]
 })
 export class NavigationItemComponent
   implements OnChanges, OnDestroy {
 
-  @Input()
-  public level &#x3D; 0;
-
-  private _isActive &#x3D; false;
+  public readonly level &#x3D; input(0);
 
   public children: Navigation | null &#x3D; null;
 
-  @ViewChild(RouterLinkActive, { static: true })
-  public routerLinkActive!: RouterLinkActive;
+  public readonly item &#x3D; input.required&lt;NavigationItem&gt;();
+  public readonly active &#x3D; signal(false);
 
-  @Input({ required: true })
-  public item!: NavigationItem;
+  public readonly itemClasses &#x3D; computed(() &#x3D;&gt; {
+    let classes &#x3D; &#x60;level-${ this.level() * 4 }&#x60;;
+    if (this.collapsed()) {
+      classes +&#x3D; &#x27; invisible&#x27;;
+    }
+    return classes;
+  });
 
-  public active &#x3D; signal(false);
+  private readonly layoutService &#x3D; inject(LayoutService);
 
-  @HostBinding(&#x27;class.active&#x27;)
-  get isActive(): boolean {
-    return this._isActive;
-  }
-
-  set isActive(value: boolean) {
-    this._isActive &#x3D; value;
-    this.active.set(value);
-  }
+  public readonly collapsed &#x3D; computed(() &#x3D;&gt; this.layoutService.collapsed());
 
   private readonly _subscription &#x3D; new Subscription();
 
-  constructor(
-    @Inject(Router)
-    private readonly router: Router,
-    @Inject(SidenavComponentService)
-    public readonly sidenav: SidenavComponentService,
-    @Inject(ElementRef)
-    private readonly elementRef: ElementRef,
-    @Inject(Renderer2)
-    private readonly renderer: Renderer2,
-    @Inject(Overlay)
-    private readonly overlay: Overlay,
-    @Inject(ViewContainerRef)
-    private readonly viewContainerRef: ViewContainerRef,
-  ) {
-  }
+  private readonly router &#x3D; inject(Router);
+  private readonly elementRef &#x3D; inject(ElementRef);
+  private readonly renderer &#x3D; inject(Renderer2);
 
   public ngOnChanges(changes: SimpleChanges) {
     if (changes[&#x27;item&#x27;]) {
@@ -1105,13 +879,13 @@ export class NavigationItemComponent
               if (urlParts[0] &#x3D;&#x3D;&#x3D; &#x27;&#x27;) {
                 urlParts[0] &#x3D; &#x27;/&#x27;;
               }
-              for (let i &#x3D; 0; i &lt; this.item.routerLink.length; i++) {
-                if (urlParts[i] !&#x3D;&#x3D; this.item.routerLink[i]) {
+              for (let i &#x3D; 0; i &lt; this.item().routerLink.length; i++) {
+                if (urlParts[i] !&#x3D;&#x3D; this.item().routerLink[i]) {
                   isActive &#x3D; false;
                   break;
                 }
               }
-              this.isActive &#x3D; isActive;
+              this.active.set(isActive);
               if (isActive) {
                 this.renderer.addClass(this.elementRef.nativeElement, &#x27;active&#x27;);
               } else {
@@ -1161,33 +935,28 @@ export class NavigationItemComponent
         <pre class="line-numbers"><code class="language-html">&lt;div [ngClass]&#x3D;&quot;{
      &#x27;border-l-4 text-accent-400 border-accent-600&#x27;: active(),
      }&quot;&gt;
-  &lt;a [routerLink]&#x3D;&quot;item.routerLink&quot;
+  &lt;a [routerLink]&#x3D;&quot;item().routerLink&quot;
      class&#x3D;&quot;h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4&quot;
      matRipple
      routerLinkActive
 
   &gt;
     &lt;span
-      [ngClass]&#x3D;&quot;{
-        &#x27;pl-0&#x27;: level &#x3D;&#x3D;&#x3D; 0,
-        &#x27;pl-4&#x27;: level &#x3D;&#x3D;&#x3D; 1,
-        &#x27;pl-8&#x27;: level &#x3D;&#x3D;&#x3D; 2,
-        &#x27;pl-12&#x27;: level &#x3D;&#x3D;&#x3D; 3
-      }&quot;
+      [ngClass]&#x3D;&quot;itemClasses()&quot;
       class&#x3D;&quot;grow whitespace-nowrap&quot;
     &gt;
-      {{ item.label }}
+      {{ item().label }}
     &lt;/span&gt;
-    &lt;mat-icon *ngIf&#x3D;&quot;item.icon&quot; [rxapIcon]&#x3D;&quot;item.icon&quot;&gt;&lt;/mat-icon&gt;
+    &lt;mat-icon *ngIf&#x3D;&quot;item().icon&quot; [rxapIcon]&#x3D;&quot;item().icon&quot;&gt;&lt;/mat-icon&gt;
   &lt;/a&gt;
 
-  &lt;ng-container *ngIf&#x3D;&quot;item.children?.length &amp;&amp; active()&quot;&gt;
+  &lt;ng-container *ngIf&#x3D;&quot;item().children?.length &amp;&amp; active()&quot;&gt;
 
     &lt;mat-divider&gt;&lt;/mat-divider&gt;
 
     &lt;ul [@sub-nav]
         [items]&#x3D;&quot;children ?? []&quot;
-        [level]&#x3D;&quot;level + 1&quot;
+        [level]&#x3D;&quot;level() + 1&quot;
         rxap-navigation
     &gt;
     &lt;/ul&gt;
@@ -1231,9 +1000,9 @@ export class NavigationItemComponent
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div [ngClass]="{     \'border-l-4 text-accent-400 border-accent-600\': active(),     }">  <a [routerLink]="item.routerLink"     class="h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4"     matRipple     routerLinkActive  >    <span      [ngClass]="{        \'pl-0\': level === 0,        \'pl-4\': level === 1,        \'pl-8\': level === 2,        \'pl-12\': level === 3      }"      class="grow whitespace-nowrap"    >      {{ item.label }}    </span>    <mat-icon *ngIf="item.icon" [rxapIcon]="item.icon"></mat-icon>  </a>  <ng-container *ngIf="item.children?.length && active()">    <mat-divider></mat-divider>    <ul [@sub-nav]        [items]="children ?? []"        [level]="level + 1"        rxap-navigation    >    </ul>    <mat-divider></mat-divider>  </ng-container></div></div>'
-    var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LanguageSelectorComponent', 'selector': 'rxap-language-selector'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ResetButtonComponent', 'selector': 'rxap-reset-button'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'SignOutComponent', 'selector': 'rxap-sign-out'},{'name': 'ToggleWindowSidenavButtonComponent', 'selector': 'rxap-toggle-window-sidenav-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'},{'name': 'VersionComponent', 'selector': 'rxap-version'},{'name': 'WindowContainerSidenavComponent', 'selector': 'rxap-window-container-sidenav'}];
-    var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
+        var COMPONENT_TEMPLATE = '<div><div [ngClass]="{     \'border-l-4 text-accent-400 border-accent-600\': active(),     }">  <a [routerLink]="item().routerLink"     class="h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4"     matRipple     routerLinkActive  >    <span      [ngClass]="itemClasses()"      class="grow whitespace-nowrap"    >      {{ item().label }}    </span>    <mat-icon *ngIf="item().icon" [rxapIcon]="item().icon"></mat-icon>  </a>  <ng-container *ngIf="item().children?.length && active()">    <mat-divider></mat-divider>    <ul [@sub-nav]        [items]="children ?? []"        [level]="level() + 1"        rxap-navigation    >    </ul>    <mat-divider></mat-divider>  </ng-container></div></div>'
+    var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'BaseLayoutComponent', 'selector': 'rxap-base-layout'},{'name': 'DefaultHeaderComponent', 'selector': 'rxap-default-header'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'MinimalLayoutComponent', 'selector': 'rxap-minimal-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ReleaseInfoComponent', 'selector': 'rxap-release-info'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'}];
+    var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'HeaderDirective', 'selector': '[rxapHeader]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
     var ACTUAL_COMPONENT = {'name': 'NavigationItemComponent'};
 </script>
 <script src="../js/tree.js"></script>