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

package/compodoc/components/NavigationComponent.html

@@ -131,7 +131,6 @@
     </p>
     <p class="comment">
                 <code>OnInit</code>
-                <code>OnDestroy</code>
     </p>
 
 
@@ -220,20 +219,26 @@
                     <td class="col-md-4">
                         <ul class="index-list">
                             <li>
-                                    <span class="modifier"></span>
                                     <span class="modifier">Public</span>
-                                <a href="#_root" >_root</a>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#collapsed" >collapsed</a>
                             </li>
                             <li>
-                                    <span class="modifier"></span>
                                     <span class="modifier">Public</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#sidenav" >sidenav</a>
+                                <a href="#items" >items</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                <a href="#level" >level</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                <a href="#navigationItems" >navigationItems</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
-                                    <span class="modifier">Optional</span>
-                                <a href="#subscription" >subscription</a>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#root" >root</a>
                             </li>
                         </ul>
                     </td>
@@ -285,112 +290,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.rxap-root-navigation" >class.rxap-root-navigation</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="#root" >root</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(navigationService: <a href="../injectables/NavigationService.html" target="_self">NavigationService</a>, cdr: ChangeDetectorRef, sidenav: <a href="../injectables/SidenavComponentService.html" target="_self">SidenavComponentService</a>)</code>
-                    </td>
-                </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="56" class="link-to-prism">src/lib/navigation/navigation.component.ts:56</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>navigationService</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="../injectables/NavigationService.html" target="_self" >NavigationService</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>cdr</td>
-                                                  
-                                                        <td>
-                                                                    <code>ChangeDetectorRef</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>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
     <section data-compodoc="block-inputs">
     <h3 id="inputs">Inputs</h3>
@@ -401,16 +306,10 @@
                         <a name="items"></a>
                         <b>items</b>
                     </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#Navigation" target="_self" >Navigation</a></code>
-
-                    </td>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/lib/navigation/navigation.component.ts:53</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="51" class="link-to-prism">src/lib/navigation/navigation.component.ts:51</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -423,12 +322,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>
@@ -436,7 +329,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="56" class="link-to-prism">src/lib/navigation/navigation.component.ts:56</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/lib/navigation/navigation.component.ts:53</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -451,52 +344,18 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>boolean | string</code>
-
+                        <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/lib/navigation/navigation.component.ts:72</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/lib/navigation/navigation.component.ts:63</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.rxap-root-navigation"></a>
-                    <span class="name">
-                        <span ><b>class.rxap-root-navigation</b></span>
-                        <a href="#class.rxap-root-navigation"><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">
-                        <i>Default value : </i><code>false</code>
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/lib/navigation/navigation.component.ts:69</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-</section>
 
 
     <section data-compodoc="block-methods">
@@ -526,8 +385,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="109"
-                                    class="link-to-prism">src/lib/navigation/navigation.component.ts:109</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="90"
+                                    class="link-to-prism">src/lib/navigation/navigation.component.ts:90</a></div>
                         </td>
                     </tr>
 
@@ -595,8 +454,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="97"
-                                    class="link-to-prism">src/lib/navigation/navigation.component.ts:97</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="78"
+                                    class="link-to-prism">src/lib/navigation/navigation.component.ts:78</a></div>
                         </td>
                     </tr>
 
@@ -664,8 +523,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="103"
-                                    class="link-to-prism">src/lib/navigation/navigation.component.ts:103</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="84"
+                                    class="link-to-prism">src/lib/navigation/navigation.component.ts:84</a></div>
                         </td>
                     </tr>
 
@@ -721,32 +580,23 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="_root"></a>
+                    <a name="collapsed"></a>
                     <span class="name">
-                            <span class="modifier"></span>
                             <span class="modifier">Public</span>
-                        <span ><b>_root</b></span>
-                        <a href="#_root"><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>Default value : </i><code>false</code>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @HostBinding(&#x27;class.rxap-root-navigation&#x27;)<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="69" class="link-to-prism">src/lib/navigation/navigation.component.ts:69</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="59" class="link-to-prism">src/lib/navigation/navigation.component.ts:59</a></div>
                         </td>
                     </tr>
 
@@ -757,34 +607,17 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="sidenav"></a>
+                    <a name="items"></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>items</b></span>
+                        <a href="#items"><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="64" class="link-to-prism">src/lib/navigation/navigation.component.ts:64</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="51" class="link-to-prism">src/lib/navigation/navigation.component.ts:51</a></div>
                         </td>
                     </tr>
 
@@ -795,96 +628,83 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="subscription"></a>
+                    <a name="level"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
-                            <span class="modifier">Optional</span>
-                        <span ><b>subscription</b></span>
-                        <a href="#subscription"><span class="icon ion-ios-link"></span></a>
+                        <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">
-                        <i>Type : </i>    <code>Subscription</code>
-
+                        <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="54" class="link-to-prism">src/lib/navigation/navigation.component.ts:54</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/lib/navigation/navigation.component.ts:53</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="navigationItems"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                        <span ><b>navigationItems</b></span>
+                        <a href="#navigationItems"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
                 <tr>
                     <td class="col-md-4">
-                        <a name="root"></a>
-                        <span class="name"><b>root</b><a href="#root"><span class="icon ion-ios-link"></span></a></span>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.items() ?? [])</code>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="61" class="link-to-prism">src/lib/navigation/navigation.component.ts:61</a></div>
+                        </td>
+                    </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="root"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>root</b></span>
+                        <a href="#root"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
                 <tr>
                     <td class="col-md-4">
-                        <span class="accessor"><b>set</b><code>root(value: boolean | string)</code></span>
+                        <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
-                            <tr>
-                                <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/lib/navigation/navigation.component.ts:72</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>boolean | string</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="63" class="link-to-prism">src/lib/navigation/navigation.component.ts:63</a></div>
                         </td>
                     </tr>
-            </tbody>
-        </table>
+
+
+        </tbody>
+    </table>
 </section>
+
 </div>
 
 
@@ -896,28 +716,26 @@
 } from &#x27;@angular/common&#x27;;
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
+  computed,
   forwardRef,
-  HostBinding,
-  Inject,
-  Input,
-  OnDestroy,
+  inject,
+  INJECTOR,
+  input,
   OnInit,
+  runInInjectionContext,
   ViewEncapsulation,
 } from &#x27;@angular/core&#x27;;
+import { toSignal } from &#x27;@angular/core/rxjs-interop&#x27;;
 import { MatDividerModule } from &#x27;@angular/material/divider&#x27;;
-import { coerceBoolean } from &#x27;@rxap/utilities&#x27;;
-import { Subscription } from &#x27;rxjs&#x27;;
-import { tap } from &#x27;rxjs/operators&#x27;;
-import { SidenavComponentService } from &#x27;../sidenav/sidenav.component.service&#x27;;
+import { LayoutService } from &#x27;../layout.service&#x27;;
+import { NavigationService } from &#x27;../navigation.service&#x27;;
 import {
   Navigation,
   NavigationDividerItem,
   NavigationItem,
 } from &#x27;./navigation-item&#x27;;
 import { NavigationItemComponent } from &#x27;./navigation-item/navigation-item.component&#x27;;
-import { NavigationService } from &#x27;./navigation.service&#x27;;
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -939,48 +757,31 @@ import { NavigationService } from &#x27;./navigation.service&#x27;;
     AsyncPipe,
   ],
 })
-export class NavigationComponent implements OnInit, OnDestroy {
-  @Input()
-  public items!: Navigation;
-  public subscription?: Subscription;
-  @Input()
-  public level &#x3D; 0;
-
-  constructor(
-    @Inject(NavigationService)
-    private readonly navigationService: NavigationService,
-    @Inject(ChangeDetectorRef)
-    private readonly cdr: ChangeDetectorRef,
-    @Inject(SidenavComponentService)
-    public readonly sidenav: SidenavComponentService,
-  ) {
-  }
+export class NavigationComponent implements OnInit {
 
-  @HostBinding(&#x27;class.rxap-root-navigation&#x27;)
-  public _root &#x3D; false;
+  public items &#x3D; input&lt;Navigation&gt;();
 
-  @Input()
-  public set root(value: boolean | &#x27;&#x27;) {
-    this._root &#x3D; coerceBoolean(value);
-  }
+  public level &#x3D; input(0);
+
+  private readonly navigationService &#x3D; inject(NavigationService);
+
+  private readonly layoutService &#x3D; inject(LayoutService);
+
+  public readonly collapsed &#x3D; computed(() &#x3D;&gt; this.layoutService.collapsed());
+
+  public navigationItems &#x3D; computed(() &#x3D;&gt; this.items() ?? []);
+
+  public readonly root &#x3D; input(false);
+
+  private readonly injector &#x3D; inject(INJECTOR);
 
   public ngOnInit(): void {
-    if (this._root) {
-      this.items &#x3D; [];
-      this.subscription &#x3D; this.navigationService.config$
-                              .pipe(
-                                tap((navigation) &#x3D;&gt; (this.items &#x3D; navigation)),
-                                tap(() &#x3D;&gt; this.cdr.detectChanges()),
-                              )
-                              .subscribe();
+    if (this.root()) {
+      runInInjectionContext(this.injector, () &#x3D;&gt; {
+        this.navigationItems &#x3D; toSignal(this.navigationService.config$, { initialValue: [] });
+      });
     }
-    this.items ??&#x3D; [];
   }
-
-  public ngOnDestroy() {
-    this.subscription?.unsubscribe();
-  }
-
   // region type save item property
 
   // required to check the type of the item property in the ngFor loop
@@ -1012,16 +813,19 @@ export class NavigationComponent implements OnInit, OnDestroy {
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;ng-template [ngForOf]&#x3D;&quot;items&quot; let-item ngFor&gt;
+        <pre class="line-numbers"><code class="language-html">&lt;ng-template [ngForOf]&#x3D;&quot;navigationItems()&quot; let-item ngFor&gt;
   &lt;ng-template [ngIf]&#x3D;&quot;isNavigationDividerItem(item)&quot;&gt;
     &lt;mat-divider&gt;&lt;/mat-divider&gt;
-    &lt;div *ngIf&#x3D;&quot;(sidenav.collapsed$ | async) &#x3D;&#x3D;&#x3D; false&quot; class&#x3D;&quot;pl-5 h-6&quot;&gt;
-      &lt;span *ngIf&#x3D;&quot;item.title&quot;&gt;{{item.title}}&lt;/span&gt;
+    &lt;div *ngIf&#x3D;&quot;!collapsed() &amp;&amp; item.title&quot; class&#x3D;&quot;pl-5 h-6&quot;&gt;
+      {{item.title}}
     &lt;/div&gt;
   &lt;/ng-template&gt;
   &lt;ng-template [ngIf]&#x3D;&quot;isNavigationItem(item)&quot;&gt;
-    &lt;li [item]&#x3D;&quot;asNavigationItem(item)&quot; [level]&#x3D;&quot;level&quot; class&#x3D;&quot;dark:hover:text-white hover:text-black&quot;
-        rxap-navigation-item&gt;&lt;/li&gt;
+    &lt;li [item]&#x3D;&quot;asNavigationItem(item)&quot;
+        [level]&#x3D;&quot;level()&quot;
+        class&#x3D;&quot;dark:hover:text-white hover:text-black&quot;
+        rxap-navigation-item&gt;
+    &lt;/li&gt;
   &lt;/ng-template&gt;
 &lt;/ng-template&gt;
 </code></pre>
@@ -1059,9 +863,9 @@ export class NavigationComponent implements OnInit, OnDestroy {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><ng-template [ngForOf]="items" let-item ngFor>  <ng-template [ngIf]="isNavigationDividerItem(item)">    <mat-divider></mat-divider>    <div *ngIf="(sidenav.collapsed$ | async) === false" class="pl-5 h-6">      <span *ngIf="item.title">{{item.title}}</span>    </div>  </ng-template>  <ng-template [ngIf]="isNavigationItem(item)">    <li [item]="asNavigationItem(item)" [level]="level" class="dark:hover:text-white hover:text-black"        rxap-navigation-item></li>  </ng-template></ng-template></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><ng-template [ngForOf]="navigationItems()" let-item ngFor>  <ng-template [ngIf]="isNavigationDividerItem(item)">    <mat-divider></mat-divider>    <div *ngIf="!collapsed() && item.title" class="pl-5 h-6">      {{item.title}}    </div>  </ng-template>  <ng-template [ngIf]="isNavigationItem(item)">    <li [item]="asNavigationItem(item)"        [level]="level()"        class="dark:hover:text-white hover:text-black"        rxap-navigation-item>    </li>  </ng-template></ng-template></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': 'NavigationComponent'};
 </script>
 <script src="../js/tree.js"></script>