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

package/compodoc/components/SettingsButtonComponent.html

@@ -120,19 +120,12 @@
     <h3>File</h3>
 </p>
 <p class="comment">
-    <code>src/lib/header/settings-button/settings-button.component.ts</code>
+    <code>src/lib/default-header/settings-button/settings-button.component.ts</code>
 </p>
 
 
 
 
-    <p class="comment">
-        <h3>Implements</h3>
-    </p>
-    <p class="comment">
-                <code>OnInit</code>
-                <code>OnDestroy</code>
-    </p>
 
 
 <section data-compodoc="block-metadata">
@@ -164,12 +157,13 @@
             <tr>
                 <td class="col-md-3">imports</td>
                 <td class="col-md-9">
-                            <code>CommonModule</code>
-                            <code>MatButtonModule</code>
-                            <code>MatIconModule</code>
-                                <code><a href="../components/LanguageSelectorComponent.html" target="_self" >LanguageSelectorComponent</a></code>
-                            <code>MatMenuModule</code>
-                            <code>PortalModule</code>
+                            <code>MatIconButton</code>
+                            <code>MatIcon</code>
+                            <code>MatMenu</code>
+                            <code>MatMenuTrigger</code>
+                            <code>MatMenuItem</code>
+                            <code>CdkPortalOutlet</code>
+                            <code>IconDirective</code>
                 </td>
             </tr>
 
@@ -219,11 +213,14 @@
                                 <a href="#availableTypographies" >availableTypographies</a>
                             </li>
                             <li>
-                                    <span class="modifier">Public</span>
-                                <a href="#isDevMode" >isDevMode</a>
+                                <a href="#customItemComponents" >customItemComponents</a>
+                            </li>
+                            <li>
+                                <a href="#customItems" >customItems</a>
                             </li>
                             <li>
-                                <a href="#items" >items</a>
+                                    <span class="modifier">Public</span>
+                                <a href="#isDevMode" >isDevMode</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
@@ -243,7 +240,7 @@
                     <td class="col-md-4">
                         <ul class="index-list">
                             <li>
-                                <a href="#openChangelogDialog" >openChangelogDialog</a>
+                                <a href="#clickItem" >clickItem</a>
                             </li>
                             <li>
                                 <a href="#previewDensity" >previewDensity</a>
@@ -284,90 +281,6 @@
     </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(theme: ThemeService, route: ActivatedRoute, injector: Injector, changelogService: ChangelogService)</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/header/settings-button/settings-button.component.ts:54</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>theme</td>
-                                                  
-                                                        <td>
-                                                                    <code>ThemeService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>route</td>
-                                                  
-                                                        <td>
-                                                                    <code>ActivatedRoute</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>injector</td>
-                                                  
-                                                        <td>
-                                                                    <code>Injector</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>changelogService</td>
-                                                  
-                                                        <td>
-                                                                    <code>ChangelogService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
 
 
@@ -382,24 +295,24 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="openChangelogDialog"></a>
+                    <a name="clickItem"></a>
                     <span class="name">
-                        <span ><b>openChangelogDialog</b></span>
-                        <a href="#openChangelogDialog"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>clickItem</b></span>
+                        <a href="#clickItem"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>openChangelogDialog()</code>
+<code>clickItem(item: <a href="../interfaces/SettingsMenuItem.html" target="_self">SettingsMenuItem</a>)</code>
                 </td>
             </tr>
 
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="85"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:85</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="109"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:109</a></div>
                         </td>
                     </tr>
 
@@ -407,10 +320,40 @@
             <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>item</td>
+                                            <td>
+                                                            <code><a href="../interfaces/SettingsMenuItem.html" target="_self" >SettingsMenuItem</a></code>
+                                            </td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </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-description">
+                                
+                            </div>
                 </td>
             </tr>
         </tbody>
@@ -435,8 +378,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="89"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:89</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="73"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:73</a></div>
                         </td>
                     </tr>
 
@@ -502,8 +445,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="113"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:113</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="97"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:97</a></div>
                         </td>
                     </tr>
 
@@ -569,8 +512,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="101"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:101</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="85"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:85</a></div>
                         </td>
                     </tr>
 
@@ -636,8 +579,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="93"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:93</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="77"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:77</a></div>
                         </td>
                     </tr>
 
@@ -673,8 +616,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="117"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:117</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="101"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:101</a></div>
                         </td>
                     </tr>
 
@@ -710,8 +653,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="105"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:105</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="89"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:89</a></div>
                         </td>
                     </tr>
 
@@ -747,8 +690,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="97"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:97</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="81"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:81</a></div>
                         </td>
                     </tr>
 
@@ -814,8 +757,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="121"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:121</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="105"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:105</a></div>
                         </td>
                     </tr>
 
@@ -881,8 +824,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="109"
-                                    class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:109</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="93"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:93</a></div>
                         </td>
                     </tr>
 
@@ -949,13 +892,12 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>string[] | null</code>
-
+                        <i>Default value : </i><code>this.theme.getAvailableThemes()</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:53</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="70" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:70</a></div>
                         </td>
                     </tr>
 
@@ -977,13 +919,40 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>string[] | null</code>
+                        <i>Default value : </i><code>this.theme.getAvailableTypographies()</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:67</a></div>
+                        </td>
+                    </tr>
 
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="customItemComponents"></a>
+                    <span class="name">
+                        <span ><b>customItemComponents</b></span>
+                        <a href="#customItemComponents"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>signal(
+    coerceArray(inject(RXAP_SETTINGS_MENU_ITEM_COMPONENT, { optional: true }))
+      .map(item &#x3D;&gt; new ComponentPortal(item, null, this.injector)),
+  )</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="50" class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:50</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="54" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:54</a></div>
                         </td>
                     </tr>
 
@@ -994,22 +963,21 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="isDevMode"></a>
+                    <a name="customItems"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isDevMode</b></span>
-                        <a href="#isDevMode"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>customItems</b></span>
+                        <a href="#customItems"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>isDevMode()</code>
+                        <i>Default value : </i><code>signal(coerceArray(inject(RXAP_SETTINGS_MENU_ITEM, { optional: true })))</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="40" class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:40</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="59" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:59</a></div>
                         </td>
                     </tr>
 
@@ -1020,21 +988,22 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="items"></a>
+                    <a name="isDevMode"></a>
                     <span class="name">
-                        <span ><b>items</b></span>
-                        <a href="#items"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Public</span>
+                        <span ><b>isDevMode</b></span>
+                        <a href="#isDevMode"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>signal&lt;Array&lt;ComponentPortal&lt;unknown&gt;&gt;&gt;([])</code>
+                        <i>Default value : </i><code>isDevMode()</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:41</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="49" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:49</a></div>
                         </td>
                     </tr>
 
@@ -1056,13 +1025,12 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>ThemeService</code>
-
+                        <i>Default value : </i><code>inject(ThemeService)</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="57" class="link-to-prism">src/lib/header/settings-button/settings-button.component.ts:57</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="51" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:51</a></div>
                         </td>
                     </tr>
 
@@ -1076,47 +1044,64 @@
 
     <div class="tab-pane fade  tab-source-code" id="source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
+  CdkPortalOutlet,
   ComponentPortal,
-  ComponentType,
-  PortalModule,
 } from &#x27;@angular/cdk/portal&#x27;;
-import { CommonModule } from &#x27;@angular/common&#x27;;
 import {
   Component,
+  inject,
   Injector,
   isDevMode,
-  OnDestroy,
-  OnInit,
+  runInInjectionContext,
   signal,
 } from &#x27;@angular/core&#x27;;
-import { MatButtonModule } from &#x27;@angular/material/button&#x27;;
-import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
-import { MatMenuModule } from &#x27;@angular/material/menu&#x27;;
-import { ActivatedRoute } from &#x27;@angular/router&#x27;;
-import { ChangelogService } from &#x27;@rxap/ngx-changelog&#x27;;
+import { MatIconButton } from &#x27;@angular/material/button&#x27;;
+import { MatIcon } from &#x27;@angular/material/icon&#x27;;
+import {
+  MatMenu,
+  MatMenuItem,
+  MatMenuTrigger,
+} from &#x27;@angular/material/menu&#x27;;
+import { IconDirective } from &#x27;@rxap/material-directives/icon&#x27;;
 import {
   ThemeDensity,
   ThemeService,
 } from &#x27;@rxap/ngx-theme&#x27;;
-import { Subscription } from &#x27;rxjs&#x27;;
+import { coerceArray } from &#x27;@rxap/utilities&#x27;;
 import {
-  map,
-  tap,
-} from &#x27;rxjs/operators&#x27;;
-import { LanguageSelectorComponent } from &#x27;../language-selector/language-selector.component&#x27;;
+  RXAP_SETTINGS_MENU_ITEM,
+  RXAP_SETTINGS_MENU_ITEM_COMPONENT,
+} from &#x27;../../tokens&#x27;;
+import { SettingsMenuItem } from &#x27;../../types&#x27;;
 
 @Component({
   selector: &#x27;rxap-settings-button&#x27;,
   standalone: true,
-  imports: [ CommonModule, MatButtonModule, MatIconModule, LanguageSelectorComponent, MatMenuModule, PortalModule ],
   templateUrl: &#x27;./settings-button.component.html&#x27;,
   styleUrls: [ &#x27;./settings-button.component.scss&#x27; ],
+  imports: [
+    MatIconButton,
+    MatIcon,
+    MatMenu,
+    MatMenuTrigger,
+    MatMenuItem,
+    CdkPortalOutlet,
+    IconDirective,
+  ],
 })
-export class SettingsButtonComponent implements OnInit, OnDestroy {
+export class SettingsButtonComponent {
 
   public isDevMode &#x3D; isDevMode();
-  items &#x3D; signal&lt;Array&lt;ComponentPortal&lt;unknown&gt;&gt;&gt;([]);
-  private _subscription?: Subscription;
+
+  public readonly theme &#x3D; inject(ThemeService);
+  private readonly injector &#x3D; inject(Injector);
+
+  customItemComponents &#x3D; signal(
+    coerceArray(inject(RXAP_SETTINGS_MENU_ITEM_COMPONENT, { optional: true }))
+      .map(item &#x3D;&gt; new ComponentPortal(item, null, this.injector)),
+  );
+
+  customItems &#x3D; signal(coerceArray(inject(RXAP_SETTINGS_MENU_ITEM, { optional: true })));
 
   private savePreviewDensityValue &#x3D; false;
   private currentDensityValue: ThemeDensity | null &#x3D; null;
@@ -1124,45 +1109,12 @@ export class SettingsButtonComponent implements OnInit, OnDestroy {
   private savePreviewTypographyValue &#x3D; false;
   private currentTypographyValue: string | null &#x3D; null;
 
-  public readonly availableTypographies: string[] | null;
+  public readonly availableTypographies &#x3D; this.theme.getAvailableTypographies();
   private savePreviewThemeValue &#x3D; false;
 
-  public readonly availableThemes: string[] | null;
+  public readonly availableThemes &#x3D; this.theme.getAvailableThemes();
   private currentThemeValue: string | null &#x3D; null;
 
-  constructor(
-    public readonly theme: ThemeService,
-    private readonly route: ActivatedRoute,
-    private readonly injector: Injector,
-    private readonly changelogService: ChangelogService,
-  ) {
-    this.availableThemes &#x3D; this.theme.getAvailableThemes();
-    this.availableTypographies &#x3D; this.theme.getAvailableTypographies();
-  }
-
-  ngOnDestroy() {
-    this._subscription?.unsubscribe();
-  }
-
-  ngOnInit() {
-    this._subscription &#x3D; this.route.data.pipe(
-      map(data &#x3D;&gt; this.getCustomMenuItems(data)),
-      map(items &#x3D;&gt; items.map(item &#x3D;&gt; new ComponentPortal(item, undefined, this.injector))),
-      tap(items &#x3D;&gt; this.items.set(items)),
-    ).subscribe();
-  }
-
-  private getCustomMenuItems(data: any): Array&lt;ComponentType&lt;unknown&gt;&gt; {
-    if (data?.layout?.header?.menu?.items?.length) {
-      return data.layout.header.menu.items;
-    }
-    return [];
-  }
-
-  openChangelogDialog() {
-    this.changelogService.showChangelogDialog();
-  }
-
   previewDensity(density: ThemeDensity) {
     this.theme.applyDensity(density);
   }
@@ -1199,6 +1151,9 @@ export class SettingsButtonComponent implements OnInit, OnDestroy {
     this.theme.setTheme(theme);
   }
 
+  clickItem(item: SettingsMenuItem) {
+    runInInjectionContext(this.injector, () &#x3D;&gt; item.action());
+  }
 }
 </code></pre>
     </div>
@@ -1210,22 +1165,26 @@ export class SettingsButtonComponent implements OnInit, OnDestroy {
 
 &lt;mat-menu #menu&#x3D;&quot;matMenu&quot;&gt;
   &lt;button (click)&#x3D;&quot;theme.toggleDarkTheme()&quot; mat-menu-item&gt;
-    &lt;mat-icon *ngIf&#x3D;&quot;theme.darkMode()&quot; svgIcon&#x3D;&quot;brightness-2&quot;&gt;&lt;/mat-icon&gt;
-    &lt;mat-icon *ngIf&#x3D;&quot;!theme.darkMode()&quot; svgIcon&#x3D;&quot;brightness-5&quot;&gt;&lt;/mat-icon&gt;
+    @if (theme.darkMode()) {
+      &lt;mat-icon svgIcon&#x3D;&quot;brightness-2&quot;&gt;&lt;/mat-icon&gt;
+    } @else {
+      &lt;mat-icon svgIcon&#x3D;&quot;brightness-5&quot;&gt;&lt;/mat-icon&gt;
+    }
     &lt;span i18n&gt;Mode&lt;/span&gt;
   &lt;/button&gt;
   &lt;button [matMenuTriggerFor]&#x3D;&quot;themeMenu&quot; mat-menu-item&gt;
     &lt;mat-icon svgIcon&#x3D;&quot;compare&quot;&gt;&lt;/mat-icon&gt;
     &lt;span i18n&gt;Theme&lt;/span&gt;
   &lt;/button&gt;
-  &lt;rxap-language-selector&gt;&lt;/rxap-language-selector&gt;
-  &lt;button (click)&#x3D;&quot;openChangelogDialog()&quot; mat-menu-item&gt;
-    &lt;mat-icon svgIcon&#x3D;&quot;format-list-numbered&quot;&gt;&lt;/mat-icon&gt;
-    &lt;span i18n&gt;What&#x27;s new&lt;/span&gt;
-  &lt;/button&gt;
-  &lt;ng-container *ngFor&#x3D;&quot;let item of items()&quot;&gt;
+  @for (item of customItems(); track item.label) {
+    &lt;button (click)&#x3D;&quot;clickItem(item)&quot; mat-menu-item&gt;
+      &lt;mat-icon [rxapIcon]&#x3D;&quot;item.icon&quot;&gt;&lt;/mat-icon&gt;
+      &lt;span&gt;{{ item.label }}&lt;/span&gt;
+    &lt;/button&gt;
+  }
+  @for (item of customItemComponents(); track item) {
     &lt;ng-template [cdkPortalOutlet]&#x3D;&quot;item&quot;&gt;&lt;/ng-template&gt;
-  &lt;/ng-container&gt;
+  }
 &lt;/mat-menu&gt;
 
 &lt;mat-menu #themeMenu&#x3D;&quot;matMenu&quot; xPosition&#x3D;&quot;before&quot;&gt;
@@ -1233,14 +1192,18 @@ export class SettingsButtonComponent implements OnInit, OnDestroy {
     &lt;mat-icon svgIcon&#x3D;&quot;move-resize&quot;&gt;&lt;/mat-icon&gt;
     &lt;span i18n&gt;Density&lt;/span&gt;
   &lt;/button&gt;
-  &lt;button *ngIf&#x3D;&quot;availableTypographies?.length&quot; [matMenuTriggerFor]&#x3D;&quot;themeFontMenu&quot; mat-menu-item&gt;
-    &lt;mat-icon svgIcon&#x3D;&quot;format-font&quot;&gt;&lt;/mat-icon&gt;
-    &lt;span i18n&gt;Font&lt;/span&gt;
-  &lt;/button&gt;
-  &lt;button *ngIf&#x3D;&quot;availableThemes?.length&quot; [matMenuTriggerFor]&#x3D;&quot;themePresetMenu&quot; mat-menu-item&gt;
-    &lt;mat-icon svgIcon&#x3D;&quot;shape-outline&quot;&gt;&lt;/mat-icon&gt;
-    &lt;span i18n&gt;Preset&lt;/span&gt;
-  &lt;/button&gt;
+  @if (availableTypographies?.length) {
+    &lt;button [matMenuTriggerFor]&#x3D;&quot;themeFontMenu&quot; mat-menu-item&gt;
+      &lt;mat-icon svgIcon&#x3D;&quot;format-font&quot;&gt;&lt;/mat-icon&gt;
+      &lt;span i18n&gt;Font&lt;/span&gt;
+    &lt;/button&gt;
+  }
+  @if (availableThemes?.length) {
+    &lt;button [matMenuTriggerFor]&#x3D;&quot;themePresetMenu&quot; mat-menu-item&gt;
+      &lt;mat-icon svgIcon&#x3D;&quot;shape-outline&quot;&gt;&lt;/mat-icon&gt;
+      &lt;span i18n&gt;Preset&lt;/span&gt;
+    &lt;/button&gt;
+  }
 &lt;/mat-menu&gt;
 
 &lt;mat-menu #themeDensityMenu&#x3D;&quot;matMenu&quot; xPosition&#x3D;&quot;before&quot;&gt;
@@ -1262,27 +1225,25 @@ export class SettingsButtonComponent implements OnInit, OnDestroy {
   &lt;/button&gt;
 &lt;/mat-menu&gt;
 &lt;mat-menu #themeFontMenu&#x3D;&quot;matMenu&quot; xPosition&#x3D;&quot;before&quot;&gt;
-  &lt;ng-template [ngIf]&#x3D;&quot;availableTypographies?.length&quot;&gt;
+  @for (typographyName of availableTypographies ?? []; track typographyName) {
     &lt;button (click)&#x3D;&quot;setTypography(typographyName)&quot;
             (mouseenter)&#x3D;&quot;previewTypography(typographyName)&quot;
             (mouseleave)&#x3D;&quot;restoreTypography()&quot;
-            *ngFor&#x3D;&quot;let typographyName of availableTypographies&quot;
             mat-menu-item&gt;
       {{ typographyName }}
     &lt;/button&gt;
-  &lt;/ng-template&gt;
+  }
 &lt;/mat-menu&gt;
 
 &lt;mat-menu #themePresetMenu&#x3D;&quot;matMenu&quot; xPosition&#x3D;&quot;before&quot;&gt;
-  &lt;ng-template [ngIf]&#x3D;&quot;availableThemes?.length&quot;&gt;
+  @for (themeName of availableThemes ?? []; track themeName) {
     &lt;button (click)&#x3D;&quot;setTheme(themeName)&quot;
             (mouseenter)&#x3D;&quot;previewTheme(themeName)&quot;
             (mouseleave)&#x3D;&quot;restoreTheme()&quot;
-            *ngFor&#x3D;&quot;let themeName of availableThemes&quot;
             mat-menu-item&gt;
       {{ themeName }}
     &lt;/button&gt;
-  &lt;/ng-template&gt;
+  }
 &lt;/mat-menu&gt;
 </code></pre>
     </div>
@@ -1319,9 +1280,9 @@ export class SettingsButtonComponent implements OnInit, OnDestroy {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><button [matMenuTriggerFor]="menu" mat-icon-button>  <mat-icon svgIcon="cog"></mat-icon></button><mat-menu #menu="matMenu">  <button (click)="theme.toggleDarkTheme()" mat-menu-item>    <mat-icon *ngIf="theme.darkMode()" svgIcon="brightness-2"></mat-icon>    <mat-icon *ngIf="!theme.darkMode()" svgIcon="brightness-5"></mat-icon>    <span i18n>Mode</span>  </button>  <button [matMenuTriggerFor]="themeMenu" mat-menu-item>    <mat-icon svgIcon="compare"></mat-icon>    <span i18n>Theme</span>  </button>  <rxap-language-selector></rxap-language-selector>  <button (click)="openChangelogDialog()" mat-menu-item>    <mat-icon svgIcon="format-list-numbered"></mat-icon>    <span i18n>What\'s new</span>  </button>  <ng-container *ngFor="let item of items()">    <ng-template [cdkPortalOutlet]="item"></ng-template>  </ng-container></mat-menu><mat-menu #themeMenu="matMenu" xPosition="before">  <button [matMenuTriggerFor]="themeDensityMenu" mat-menu-item>    <mat-icon svgIcon="move-resize"></mat-icon>    <span i18n>Density</span>  </button>  <button *ngIf="availableTypographies?.length" [matMenuTriggerFor]="themeFontMenu" mat-menu-item>    <mat-icon svgIcon="format-font"></mat-icon>    <span i18n>Font</span>  </button>  <button *ngIf="availableThemes?.length" [matMenuTriggerFor]="themePresetMenu" mat-menu-item>    <mat-icon svgIcon="shape-outline"></mat-icon>    <span i18n>Preset</span>  </button></mat-menu><mat-menu #themeDensityMenu="matMenu" xPosition="before">  <button (click)="setDensity(0)" (mouseenter)="previewDensity(0)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-l"></mat-icon>    <span i18n>Normal</span>  </button>  <button (click)="setDensity(-1)" (mouseenter)="previewDensity(-1)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-m"></mat-icon>    <span i18n>Dense</span>  </button>  <button (click)="setDensity(-2)" (mouseenter)="previewDensity(-2)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-s"></mat-icon>    <span i18n>Very Dense</span>  </button>  <button (click)="setDensity(-3)" (mouseenter)="previewDensity(-3)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-xs"></mat-icon>    <span i18n>Extreme Dense</span>  </button></mat-menu><mat-menu #themeFontMenu="matMenu" xPosition="before">  <ng-template [ngIf]="availableTypographies?.length">    <button (click)="setTypography(typographyName)"            (mouseenter)="previewTypography(typographyName)"            (mouseleave)="restoreTypography()"            *ngFor="let typographyName of availableTypographies"            mat-menu-item>      {{ typographyName }}    </button>  </ng-template></mat-menu><mat-menu #themePresetMenu="matMenu" xPosition="before">  <ng-template [ngIf]="availableThemes?.length">    <button (click)="setTheme(themeName)"            (mouseenter)="previewTheme(themeName)"            (mouseleave)="restoreTheme()"            *ngFor="let themeName of availableThemes"            mat-menu-item>      {{ themeName }}    </button>  </ng-template></mat-menu></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><button [matMenuTriggerFor]="menu" mat-icon-button>  <mat-icon svgIcon="cog"></mat-icon></button><mat-menu #menu="matMenu">  <button (click)="theme.toggleDarkTheme()" mat-menu-item>    @if (theme.darkMode()) {      <mat-icon svgIcon="brightness-2"></mat-icon>    } @else {      <mat-icon svgIcon="brightness-5"></mat-icon>    }    <span i18n>Mode</span>  </button>  <button [matMenuTriggerFor]="themeMenu" mat-menu-item>    <mat-icon svgIcon="compare"></mat-icon>    <span i18n>Theme</span>  </button>  @for (item of customItems(); track item.label) {    <button (click)="clickItem(item)" mat-menu-item>      <mat-icon [rxapIcon]="item.icon"></mat-icon>      <span>{{ item.label }}</span>    </button>  }  @for (item of customItemComponents(); track item) {    <ng-template [cdkPortalOutlet]="item"></ng-template>  }</mat-menu><mat-menu #themeMenu="matMenu" xPosition="before">  <button [matMenuTriggerFor]="themeDensityMenu" mat-menu-item>    <mat-icon svgIcon="move-resize"></mat-icon>    <span i18n>Density</span>  </button>  @if (availableTypographies?.length) {    <button [matMenuTriggerFor]="themeFontMenu" mat-menu-item>      <mat-icon svgIcon="format-font"></mat-icon>      <span i18n>Font</span>    </button>  }  @if (availableThemes?.length) {    <button [matMenuTriggerFor]="themePresetMenu" mat-menu-item>      <mat-icon svgIcon="shape-outline"></mat-icon>      <span i18n>Preset</span>    </button>  }</mat-menu><mat-menu #themeDensityMenu="matMenu" xPosition="before">  <button (click)="setDensity(0)" (mouseenter)="previewDensity(0)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-l"></mat-icon>    <span i18n>Normal</span>  </button>  <button (click)="setDensity(-1)" (mouseenter)="previewDensity(-1)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-m"></mat-icon>    <span i18n>Dense</span>  </button>  <button (click)="setDensity(-2)" (mouseenter)="previewDensity(-2)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-s"></mat-icon>    <span i18n>Very Dense</span>  </button>  <button (click)="setDensity(-3)" (mouseenter)="previewDensity(-3)" (mouseleave)="restoreDensity()" mat-menu-item>    <mat-icon svgIcon="size-xs"></mat-icon>    <span i18n>Extreme Dense</span>  </button></mat-menu><mat-menu #themeFontMenu="matMenu" xPosition="before">  @for (typographyName of availableTypographies ?? []; track typographyName) {    <button (click)="setTypography(typographyName)"            (mouseenter)="previewTypography(typographyName)"            (mouseleave)="restoreTypography()"            mat-menu-item>      {{ typographyName }}    </button>  }</mat-menu><mat-menu #themePresetMenu="matMenu" xPosition="before">  @for (themeName of availableThemes ?? []; track themeName) {    <button (click)="setTheme(themeName)"            (mouseenter)="previewTheme(themeName)"            (mouseleave)="restoreTheme()"            mat-menu-item>      {{ themeName }}    </button>  }</mat-menu></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': 'SettingsButtonComponent'};
 </script>
 <script src="../js/tree.js"></script>