@rxap/layout 19.0.0-dev.1 → 19.0.0-dev.3

package/compodoc/components/SettingsButtonComponent.html

@@ -149,10 +149,6 @@
                 <td class="col-md-9"><code>rxap-settings-button</code></td>
             </tr>
 
-            <tr>
-                <td class="col-md-3">standalone</td>
-                <td class="col-md-9"><code>true</code></td>
-            </tr>
 
             <tr>
                 <td class="col-md-3">imports</td>
@@ -164,6 +160,7 @@
                             <code>MatMenuItem</code>
                             <code>CdkPortalOutlet</code>
                             <code>IconDirective</code>
+                            <code>NgIf</code>
                 </td>
             </tr>
 
@@ -311,8 +308,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <div class="io-line">Defined in <a href="" data-line="117"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:117</a></div>
                         </td>
                     </tr>
 
@@ -378,8 +375,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -445,8 +442,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -512,8 +509,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -579,8 +576,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -616,8 +613,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -653,8 +650,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -690,8 +687,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -757,8 +754,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <div class="io-line">Defined in <a href="" data-line="113"
+                                    class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:113</a></div>
                         </td>
                     </tr>
 
@@ -824,8 +821,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <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>
+                            <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>
 
@@ -897,7 +894,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <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>
+                                <div class="io-line">Defined in <a href="" data-line="78" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:78</a></div>
                         </td>
                     </tr>
 
@@ -924,7 +921,7 @@
                 </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>
+                                <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:75</a></div>
                         </td>
                     </tr>
 
@@ -944,15 +941,21 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>signal(
+                        <i>Type : </i>    <code>Signal&lt;ComponentPortal[]&gt;</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>toSignal(from(Promise.all(
     coerceArray(inject(RXAP_SETTINGS_MENU_ITEM_COMPONENT, { optional: true }))
-      .map(item &#x3D;&gt; new ComponentPortal(item, null, this.injector)),
-  )</code>
+      .map(item &#x3D;&gt; IsFunction(item) ? item() : item),
+  )).pipe(map(items &#x3D;&gt; items.map(item &#x3D;&gt; new ComponentPortal(item, null, this.injector)))), { initialValue: [] })</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/default-header/settings-button/settings-button.component.ts:54</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="62" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:62</a></div>
                         </td>
                     </tr>
 
@@ -977,7 +980,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <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>
+                                <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>
 
@@ -1003,7 +1006,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <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>
+                                <div class="io-line">Defined in <a href="" data-line="57" class="link-to-prism">src/lib/default-header/settings-button/settings-button.component.ts:57</a></div>
                         </td>
                     </tr>
 
@@ -1030,7 +1033,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <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>
+                                <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>
 
@@ -1047,14 +1050,17 @@
   CdkPortalOutlet,
   ComponentPortal,
 } from &#x27;@angular/cdk/portal&#x27;;
+import { NgIf } from &#x27;@angular/common&#x27;;
 import {
   Component,
   inject,
   Injector,
   isDevMode,
   runInInjectionContext,
+  Signal,
   signal,
 } from &#x27;@angular/core&#x27;;
+import { toSignal } from &#x27;@angular/core/rxjs-interop&#x27;;
 import { MatIconButton } from &#x27;@angular/material/button&#x27;;
 import { MatIcon } from &#x27;@angular/material/icon&#x27;;
 import {
@@ -1064,10 +1070,15 @@ import {
 } 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 { coerceArray } from &#x27;@rxap/utilities&#x27;;
+import {
+  coerceArray,
+  IsFunction,
+  ThemeDensity,
+} from &#x27;@rxap/utilities&#x27;;
+import { from } from &#x27;rxjs&#x27;;
+import { map } from &#x27;rxjs/operators&#x27;;
 import {
   RXAP_SETTINGS_MENU_ITEM,
   RXAP_SETTINGS_MENU_ITEM_COMPONENT,
@@ -1075,19 +1086,19 @@ import {
 import { SettingsMenuItem } from &#x27;../../types&#x27;;
 
 @Component({
-  selector: &#x27;rxap-settings-button&#x27;,
-  standalone: true,
-  templateUrl: &#x27;./settings-button.component.html&#x27;,
-  styleUrls: [ &#x27;./settings-button.component.scss&#x27; ],
-  imports: [
-    MatIconButton,
-    MatIcon,
-    MatMenu,
-    MatMenuTrigger,
-    MatMenuItem,
-    CdkPortalOutlet,
-    IconDirective,
-  ],
+    selector: &#x27;rxap-settings-button&#x27;,
+    templateUrl: &#x27;./settings-button.component.html&#x27;,
+    styleUrls: [&#x27;./settings-button.component.scss&#x27;],
+    imports: [
+        MatIconButton,
+        MatIcon,
+        MatMenu,
+        MatMenuTrigger,
+        MatMenuItem,
+        CdkPortalOutlet,
+        IconDirective,
+        NgIf,
+    ]
 })
 export class SettingsButtonComponent {
 
@@ -1096,10 +1107,10 @@ export class SettingsButtonComponent {
   public readonly theme &#x3D; inject(ThemeService);
   private readonly injector &#x3D; inject(Injector);
 
-  customItemComponents &#x3D; signal(
+  customItemComponents: Signal&lt;ComponentPortal&lt;unknown&gt;[]&gt; &#x3D; toSignal(from(Promise.all(
     coerceArray(inject(RXAP_SETTINGS_MENU_ITEM_COMPONENT, { optional: true }))
-      .map(item &#x3D;&gt; new ComponentPortal(item, null, this.injector)),
-  );
+      .map(item &#x3D;&gt; IsFunction(item) ? item() : item),
+  )).pipe(map(items &#x3D;&gt; items.map(item &#x3D;&gt; new ComponentPortal(item, null, this.injector)))), { initialValue: [] });
 
   customItems &#x3D; signal(coerceArray(inject(RXAP_SETTINGS_MENU_ITEM, { optional: true })));
 
@@ -1178,7 +1189,7 @@ export class SettingsButtonComponent {
   &lt;/button&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;mat-icon *ngIf&#x3D;&quot;item.icon as icon&quot; [rxapIcon]&#x3D;&quot;icon&quot;&gt;&lt;/mat-icon&gt;
       &lt;span&gt;{{ item.label }}&lt;/span&gt;
     &lt;/button&gt;
   }
@@ -1280,7 +1291,7 @@ export class SettingsButtonComponent {
 <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>    @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 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 *ngIf="item.icon as icon" [rxapIcon]="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'};

package/compodoc/components/SidenavComponent.html

@@ -153,10 +153,6 @@
                 <td class="col-md-9"><code>rxap-sidenav</code></td>
             </tr>
 
-            <tr>
-                <td class="col-md-3">standalone</td>
-                <td class="col-md-9"><code>true</code></td>
-            </tr>
 
             <tr>
                 <td class="col-md-3">imports</td>
@@ -329,8 +325,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="83"
-                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:83</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="82"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:82</a></div>
                         </td>
                     </tr>
 
@@ -368,8 +364,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="78"
-                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:78</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="77"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:77</a></div>
                         </td>
                     </tr>
 
@@ -405,8 +401,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="74"
-                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:74</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="73"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:73</a></div>
                         </td>
                     </tr>
 
@@ -454,7 +450,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:69</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="68" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:68</a></div>
                         </td>
                     </tr>
 
@@ -487,7 +483,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="68" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:68</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:67</a></div>
                         </td>
                     </tr>
 
@@ -520,7 +516,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="64" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:64</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:63</a></div>
                         </td>
                     </tr>
 
@@ -553,7 +549,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="66" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:66</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="65" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:65</a></div>
                         </td>
                     </tr>
 
@@ -586,7 +582,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="65" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:65</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="64" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:64</a></div>
                         </td>
                     </tr>
 
@@ -619,7 +615,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="70" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:70</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:69</a></div>
                         </td>
                     </tr>
 
@@ -652,7 +648,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:67</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="66" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:66</a></div>
                         </td>
                     </tr>
 
@@ -679,7 +675,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:71</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="70" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:70</a></div>
                         </td>
                     </tr>
 
@@ -706,7 +702,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:72</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:71</a></div>
                         </td>
                     </tr>
 
@@ -739,7 +735,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:63</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="62" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:62</a></div>
                         </td>
                     </tr>
 
@@ -786,26 +782,25 @@ import { SidenavFooterDirective } from &#x27;./sidenav-footer.directive&#x27;;
 import { SidenavHeaderDirective } from &#x27;./sidenav-header.directive&#x27;;
 
 @Component({
-  selector: &#x27;rxap-sidenav&#x27;,
-  templateUrl: &#x27;./sidenav.component.html&#x27;,
-  styleUrls: [ &#x27;./sidenav.component.scss&#x27; ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    MatIcon,
-    MatIconButton,
-    MatSidenav,
-    MatSidenavContainer,
-    MatSidenavContent,
-    NavigationComponent,
-    NgIf,
-    RouterOutlet,
-    NgClass,
-    NgStyle,
-    MatDivider,
-    NgTemplateOutlet,
-    MatButton,
-  ],
+    selector: &#x27;rxap-sidenav&#x27;,
+    templateUrl: &#x27;./sidenav.component.html&#x27;,
+    styleUrls: [&#x27;./sidenav.component.scss&#x27;],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        MatIcon,
+        MatIconButton,
+        MatSidenav,
+        MatSidenavContainer,
+        MatSidenavContent,
+        NavigationComponent,
+        NgIf,
+        RouterOutlet,
+        NgClass,
+        NgStyle,
+        MatDivider,
+        NgTemplateOutlet,
+        MatButton,
+    ]
 })
 export class SidenavComponent {
 

package/compodoc/components/SidenavToggleButtonComponent.html

@@ -153,10 +153,6 @@
                 <td class="col-md-9"><code>rxap-sidenav-toggle-button</code></td>
             </tr>
 
-            <tr>
-                <td class="col-md-3">standalone</td>
-                <td class="col-md-9"><code>true</code></td>
-            </tr>
 
             <tr>
                 <td class="col-md-3">imports</td>
@@ -266,8 +262,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="28"
-                                    class="link-to-prism">src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:28</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="27"
+                                    class="link-to-prism">src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:27</a></div>
                         </td>
                     </tr>
 
@@ -309,7 +305,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="26" class="link-to-prism">src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:26</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:25</a></div>
                         </td>
                     </tr>
 
@@ -333,15 +329,14 @@ import { MatIcon } from &#x27;@angular/material/icon&#x27;;
 import { LayoutService } from &#x27;../../layout.service&#x27;;
 
 @Component({
-  selector: &#x27;rxap-sidenav-toggle-button&#x27;,
-  templateUrl: &#x27;./sidenav-toggle-button.component.html&#x27;,
-  styleUrls: [ &#x27;./sidenav-toggle-button.component.scss&#x27; ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    MatIcon,
-    MatIconButton,
-  ],
+    selector: &#x27;rxap-sidenav-toggle-button&#x27;,
+    templateUrl: &#x27;./sidenav-toggle-button.component.html&#x27;,
+    styleUrls: [&#x27;./sidenav-toggle-button.component.scss&#x27;],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        MatIcon,
+        MatIconButton,
+    ]
 })
 export class SidenavToggleButtonComponent {
 

package/compodoc/components/UserProfileIconComponent.html

@@ -153,10 +153,6 @@
                 <td class="col-md-9"><code>rxap-user-profile-icon</code></td>
             </tr>
 
-            <tr>
-                <td class="col-md-3">standalone</td>
-                <td class="col-md-9"><code>true</code></td>
-            </tr>
 
             <tr>
                 <td class="col-md-3">imports</td>
@@ -271,7 +267,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:30</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:32</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -307,8 +303,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="40"
-                                    class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:40</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="42"
+                                    class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:42</a></div>
                         </td>
                     </tr>
 
@@ -345,7 +341,7 @@
             </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:30</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:32</a></div>
                         </td>
                     </tr>
 
@@ -378,7 +374,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:32</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:34</a></div>
                         </td>
                     </tr>
 
@@ -400,20 +396,22 @@
 } from &#x27;@angular/core&#x27;;
 import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
 import { MatMenuModule } from &#x27;@angular/material/menu&#x27;;
-import { PubSubService } from &#x27;@rxap/ngx-pub-sub&#x27;;
+import {
+  PubSubService,
+  RXAP_TOPICS,
+} from &#x27;@rxap/ngx-pub-sub&#x27;;
 import { EXTRACT_USERNAME_FROM_PROFILE } from &#x27;../../tokens&#x27;;
 import { ExtractUsernameFromProfileFn } from &#x27;../../types&#x27;;
 
 @Component({
-  selector: &#x27;rxap-user-profile-icon&#x27;,
-  templateUrl: &#x27;./user-profile-icon.component.html&#x27;,
-  styleUrls: [ &#x27;./user-profile-icon.component.scss&#x27; ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    MatMenuModule,
-    MatIconModule,
-  ],
+    selector: &#x27;rxap-user-profile-icon&#x27;,
+    templateUrl: &#x27;./user-profile-icon.component.html&#x27;,
+    styleUrls: [&#x27;./user-profile-icon.component.scss&#x27;],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        MatMenuModule,
+        MatIconModule,
+    ]
 })
 export class UserProfileIconComponent {
 
@@ -431,7 +429,7 @@ export class UserProfileIconComponent {
   });
 
   public logout() {
-    this.pubSubService.publish(&#x27;authentication.logout&#x27;);
+    this.pubSubService.publish(RXAP_TOPICS.authentication.logout);
   }