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

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [19.0.0-dev.2](https://gitlab.com/rxap/packages/compare/@rxap/layout@19.0.0-dev.1...@rxap/layout@19.0.0-dev.2) (2025-01-03)
+
+**Note:** Version bump only for package @rxap/layout
+
 # [19.0.0-dev.1](https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.4-dev.0...@rxap/layout@19.0.0-dev.1) (2024-12-11)
 
 **Note:** Version bump only for package @rxap/layout

package/README.md

@@ -19,7 +19,7 @@ yarn add @rxap/layout
 ```
 **Install peer dependencies:**
 ```bash
-yarn add @angular/animations@^18.0.1 @angular/cdk@^18.0.0 @angular/common@^18.0.1 @angular/core@^18.0.1 @angular/material@^18.0.0 @angular/router@^18.0.1 @rxap/browser-utilities@^1.1.4 @rxap/config@^18.1.1 @rxap/environment@^18.0.3 @rxap/material-directives@^18.0.3 @rxap/ngx-pub-sub@^18.0.3 @rxap/ngx-theme@^18.0.3 @rxap/ngx-user@^18.0.3 @rxap/pattern@^1.1.5 @rxap/utilities@^16.2.4 rxjs@^7.8.1 
+yarn add @angular/animations@19.0.3 @angular/cdk@19.0.2 @angular/common@19.0.3 @angular/core@19.0.3 @angular/material@19.0.2 @angular/router@19.0.3 @rxap/browser-utilities@^1.1.9-dev.2 @rxap/config@^19.0.0-dev.2 @rxap/data-source@^19.0.0-dev.2 @rxap/environment@^19.0.0-dev.2 @rxap/material-directives@^19.0.0-dev.2 @rxap/ngx-pub-sub@^19.0.0-dev.2 @rxap/ngx-theme@^19.0.0-dev.2 @rxap/pattern@^1.1.10-dev.2 @rxap/utilities@^16.4.1-dev.2 rxjs@7.8.1 
 ```
 **Execute the init generator:**
 ```bash

package/compodoc/changelog.html

@@ -85,6 +85,95 @@
 <h1>Change Log</h1>
 <p>All notable changes to this project will be documented in this file.
 See <a href="https://conventionalcommits.org">Conventional Commits</a> for commit guidelines.</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@19.0.0-dev.1...@rxap/layout@19.0.0-dev.2">19.0.0-dev.2</a> (2025-01-03)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.4-dev.0...@rxap/layout@19.0.0-dev.1">19.0.0-dev.1</a> (2024-12-11)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.3...@rxap/layout@18.3.4-dev.0">18.3.4-dev.0</a> (2024-12-10)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.3-dev.1...@rxap/layout@18.3.3">18.3.3</a> (2024-12-10)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.3-dev.0...@rxap/layout@18.3.3-dev.1">18.3.3-dev.1</a> (2024-11-05)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.2...@rxap/layout@18.3.3-dev.0">18.3.3-dev.0</a> (2024-11-04)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.2-dev.3...@rxap/layout@18.3.2">18.3.2</a> (2024-10-28)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.2-dev.2...@rxap/layout@18.3.2-dev.3">18.3.2-dev.3</a> (2024-10-25)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.2-dev.1...@rxap/layout@18.3.2-dev.2">18.3.2-dev.2</a> (2024-10-25)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.2-dev.0...@rxap/layout@18.3.2-dev.1">18.3.2-dev.1</a> (2024-10-04)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.1...@rxap/layout@18.3.2-dev.0">18.3.2-dev.0</a> (2024-09-18)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.1-dev.1...@rxap/layout@18.3.1">18.3.1</a> (2024-09-18)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.1-dev.0...@rxap/layout@18.3.1-dev.1">18.3.1-dev.1</a> (2024-09-09)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.0...@rxap/layout@18.3.1-dev.0">18.3.1-dev.0</a> (2024-08-30)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.0-dev.4...@rxap/layout@18.3.0">18.3.0</a> (2024-08-22)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.0-dev.3...@rxap/layout@18.3.0-dev.4">18.3.0-dev.4</a> (2024-08-22)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.0-dev.2...@rxap/layout@18.3.0-dev.3">18.3.0-dev.3</a> (2024-08-21)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.0-dev.1...@rxap/layout@18.3.0-dev.2">18.3.0-dev.2</a> (2024-08-16)</h1>
+<h3>Features</h3>
+<ul>
+<li>support lazy component imports (<a href="https://gitlab.com/rxap/packages/commit/c308e328bc99f08b34811fbf0ecb91abcdd5a3d0">c308e32</a>)</li>
+</ul>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.3.0-dev.0...@rxap/layout@18.3.0-dev.1">18.3.0-dev.1</a> (2024-08-15)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.1-dev.2...@rxap/layout@18.3.0-dev.0">18.3.0-dev.0</a> (2024-08-15)</h1>
+<h3>Features</h3>
+<ul>
+<li>support custom header items (<a href="https://gitlab.com/rxap/packages/commit/d25a43064ddde547c95183dab50f28c52a70a35a">d25a430</a>)</li>
+</ul>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.1-dev.1...@rxap/layout@18.2.1-dev.2">18.2.1-dev.2</a> (2024-08-12)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.1-dev.0...@rxap/layout@18.2.1-dev.1">18.2.1-dev.1</a> (2024-08-12)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.0...@rxap/layout@18.2.1-dev.0">18.2.1-dev.0</a> (2024-08-07)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.0-dev.3...@rxap/layout@18.2.0">18.2.0</a> (2024-07-30)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.0-dev.2...@rxap/layout@18.2.0-dev.3">18.2.0-dev.3</a> (2024-07-30)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.0-dev.1...@rxap/layout@18.2.0-dev.2">18.2.0-dev.2</a> (2024-07-25)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.2.0-dev.0...@rxap/layout@18.2.0-dev.1">18.2.0-dev.1</a> (2024-07-24)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.2-dev.6...@rxap/layout@18.2.0-dev.0">18.2.0-dev.0</a> (2024-07-24)</h1>
+<h3>Features</h3>
+<ul>
+<li>provide ExternalApps as root service (<a href="https://gitlab.com/rxap/packages/commit/be0523923ff3ae759557fbd6fb88ec144ff810fa">be05239</a>)</li>
+</ul>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.2-dev.5...@rxap/layout@18.1.2-dev.6">18.1.2-dev.6</a> (2024-07-09)</h2>
+<h3>Bug Fixes</h3>
+<ul>
+<li>use static pub sub topics (<a href="https://gitlab.com/rxap/packages/commit/780d3f9aae3b272713ad9946e7938f1f13dd91a4">780d3f9</a>)</li>
+</ul>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.2-dev.4...@rxap/layout@18.1.2-dev.5">18.1.2-dev.5</a> (2024-07-03)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.2-dev.3...@rxap/layout@18.1.2-dev.4">18.1.2-dev.4</a> (2024-07-03)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.2-dev.2...@rxap/layout@18.1.2-dev.3">18.1.2-dev.3</a> (2024-07-03)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.2-dev.1...@rxap/layout@18.1.2-dev.2">18.1.2-dev.2</a> (2024-07-03)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.2-dev.0...@rxap/layout@18.1.2-dev.1">18.1.2-dev.1</a> (2024-07-03)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.1...@rxap/layout@18.1.2-dev.0">18.1.2-dev.0</a> (2024-07-02)</h2>
+<h3>Bug Fixes</h3>
+<ul>
+<li>improve support for router link types (<a href="https://gitlab.com/rxap/packages/commit/069f87e3a5b9615111cedca779f6a3c8ee0e13ea">069f87e</a>)</li>
+</ul>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.1-dev.0...@rxap/layout@18.1.1">18.1.1</a> (2024-06-30)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0...@rxap/layout@18.1.1-dev.0">18.1.1-dev.0</a> (2024-06-30)</h2>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
 <h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.3...@rxap/layout@18.1.0">18.1.0</a> (2024-06-28)</h1>
 <p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
 <h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.2...@rxap/layout@18.1.0-dev.3">18.1.0-dev.3</a> (2024-06-25)</h1>

package/compodoc/components/AppsButtonComponent.html

@@ -159,10 +159,6 @@
                 <td class="col-md-9"><code>rxap-apps-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>
@@ -287,8 +283,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="46"
-                                    class="link-to-prism">src/lib/default-header/apps-button/apps-button.component.ts:46</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="45"
+                                    class="link-to-prism">src/lib/default-header/apps-button/apps-button.component.ts:45</a></div>
                         </td>
                     </tr>
 
@@ -330,7 +326,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="43" class="link-to-prism">src/lib/default-header/apps-button/apps-button.component.ts:43</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="42" class="link-to-prism">src/lib/default-header/apps-button/apps-button.component.ts:42</a></div>
                         </td>
                     </tr>
 
@@ -357,7 +353,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/lib/default-header/apps-button/apps-button.component.ts:44</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="43" class="link-to-prism">src/lib/default-header/apps-button/apps-button.component.ts:43</a></div>
                         </td>
                     </tr>
 
@@ -384,7 +380,7 @@
                 </tr>
                     <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/apps-button/apps-button.component.ts:40</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/lib/default-header/apps-button/apps-button.component.ts:39</a></div>
                         </td>
                     </tr>
 
@@ -423,20 +419,19 @@ import { IconDirective } from &#x27;@rxap/material-directives/icon&#x27;;
 import { ExternalAppsService } from &#x27;../../external-apps.service&#x27;;
 
 @Component({
-  selector: &#x27;rxap-apps-button&#x27;,
-  templateUrl: &#x27;./apps-button.component.html&#x27;,
-  styleUrls: [ &#x27;./apps-button.component.scss&#x27; ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    NgOptimizedImage,
-    MatButton,
-    RouterLink,
-    MatAnchor,
-    MatIconButton,
-    MatIcon,
-    IconDirective,
-  ],
+    selector: &#x27;rxap-apps-button&#x27;,
+    templateUrl: &#x27;./apps-button.component.html&#x27;,
+    styleUrls: [&#x27;./apps-button.component.scss&#x27;],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgOptimizedImage,
+        MatButton,
+        RouterLink,
+        MatAnchor,
+        MatIconButton,
+        MatIcon,
+        IconDirective,
+    ]
 })
 export class AppsButtonComponent implements OnInit {
   /**

package/compodoc/components/BaseLayoutComponent.html

@@ -149,10 +149,6 @@
                 <td class="col-md-9"><code>rxap-base-layout</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>
@@ -205,15 +201,14 @@ import { FooterComponent } from &#x27;../footer/footer.component&#x27;;
 import { HeaderComponent } from &#x27;../header/header.component&#x27;;
 
 @Component({
-  selector: &#x27;rxap-base-layout&#x27;,
-  standalone: true,
-  imports: [
-    HeaderComponent,
-    FooterComponent,
-  ],
-  templateUrl: &#x27;./base-layout.component.html&#x27;,
-  styleUrl: &#x27;./base-layout.component.scss&#x27;,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: &#x27;rxap-base-layout&#x27;,
+    imports: [
+        HeaderComponent,
+        FooterComponent,
+    ],
+    templateUrl: &#x27;./base-layout.component.html&#x27;,
+    styleUrl: &#x27;./base-layout.component.scss&#x27;,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BaseLayoutComponent {}
 </code></pre>

package/compodoc/components/DefaultHeaderComponent.html

@@ -153,10 +153,6 @@
                 <td class="col-md-9"><code>rxap-default-header</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>
@@ -165,6 +161,8 @@
                                 <code><a href="../components/SettingsButtonComponent.html" target="_self" >SettingsButtonComponent</a></code>
                                 <code><a href="../components/SidenavToggleButtonComponent.html" target="_self" >SidenavToggleButtonComponent</a></code>
                                 <code><a href="../components/UserProfileIconComponent.html" target="_self" >UserProfileIconComponent</a></code>
+                            <code>MatToolbarRow</code>
+                            <code>CdkPortalOutlet</code>
                 </td>
             </tr>
 
@@ -211,13 +209,18 @@
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#layoutComponentService" >layoutComponentService</a>
+                                <a href="#hasPortals" >hasPortals</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
                                 <a href="#opened" >opened</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#portals" >portals</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -267,7 +270,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/lib/default-header/default-header.component.ts:35</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="40" class="link-to-prism">src/lib/default-header/default-header.component.ts:40</a></div>
                         </td>
                     </tr>
 
@@ -278,23 +281,23 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="layoutComponentService"></a>
+                    <a name="hasPortals"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>layoutComponentService</b></span>
-                        <a href="#layoutComponentService"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>hasPortals</b></span>
+                        <a href="#hasPortals"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>inject(LayoutService)</code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.portals().length &gt; 0)</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/lib/default-header/default-header.component.ts:33</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/lib/default-header/default-header.component.ts:47</a></div>
                         </td>
                     </tr>
 
@@ -321,7 +324,34 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="36" class="link-to-prism">src/lib/default-header/default-header.component.ts:36</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/lib/default-header/default-header.component.ts:41</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="portals"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>portals</b></span>
+                        <a href="#portals"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.defaultHeaderService.portals())</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="46" class="link-to-prism">src/lib/default-header/default-header.component.ts:46</a></div>
                         </td>
                     </tr>
 
@@ -343,12 +373,12 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>toSignal(this.userProfileService.connect(&#x27;user-profile&#x27;), { initialValue: null })</code>
+                        <i>Default value : </i><code>toSignal(inject(RXAP_USER_PROFILE_DATA_SOURCE).connect(&#x27;user-profile&#x27;), { initialValue: null })</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/lib/default-header/default-header.component.ts:39</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="42" class="link-to-prism">src/lib/default-header/default-header.component.ts:42</a></div>
                         </td>
                     </tr>
 
@@ -361,45 +391,53 @@
 
 
     <div class="tab-pane fade  tab-source-code" id="source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { CdkPortalOutlet } from &#x27;@angular/cdk/portal&#x27;;
+import {
   ChangeDetectionStrategy,
   Component,
   computed,
   inject,
 } from &#x27;@angular/core&#x27;;
 import { toSignal } from &#x27;@angular/core/rxjs-interop&#x27;;
+import { MatToolbarRow } from &#x27;@angular/material/toolbar&#x27;;
+import { HeaderService } from &#x27;../header.service&#x27;;
 import { LayoutService } from &#x27;../layout.service&#x27;;
-import { UserProfileDataSource } from &#x27;@rxap/ngx-user&#x27;;
+import { RXAP_USER_PROFILE_DATA_SOURCE } from &#x27;../tokens&#x27;;
 import { AppsButtonComponent } from &#x27;./apps-button/apps-button.component&#x27;;
+import { DefaultHeaderService } from &#x27;./default-header.service&#x27;;
 import { SettingsButtonComponent } from &#x27;./settings-button/settings-button.component&#x27;;
 import { SidenavToggleButtonComponent } from &#x27;./sidenav-toggle-button/sidenav-toggle-button.component&#x27;;
 import { UserProfileIconComponent } from &#x27;./user-profile-icon/user-profile-icon.component&#x27;;
 
 @Component({
-  selector: &#x27;rxap-default-header&#x27;,
-  standalone: true,
-  imports: [
-    AppsButtonComponent,
-    SettingsButtonComponent,
-    SidenavToggleButtonComponent,
-    UserProfileIconComponent,
-  ],
-  host: {
-    &#x27;class&#x27;: &#x27;grow&#x27;,
-  },
-  templateUrl: &#x27;./default-header.component.html&#x27;,
-  styleUrl: &#x27;./default-header.component.scss&#x27;,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: &#x27;rxap-default-header&#x27;,
+    imports: [
+        AppsButtonComponent,
+        SettingsButtonComponent,
+        SidenavToggleButtonComponent,
+        UserProfileIconComponent,
+        MatToolbarRow,
+        CdkPortalOutlet,
+    ],
+    host: {
+        &#x27;class&#x27;: &#x27;grow&#x27;,
+    },
+    templateUrl: &#x27;./default-header.component.html&#x27;,
+    styleUrl: &#x27;./default-header.component.scss&#x27;,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DefaultHeaderComponent {
 
-  public readonly layoutComponentService &#x3D; inject(LayoutService);
+  private readonly layoutComponentService &#x3D; inject(LayoutService);
 
   public readonly collapsable &#x3D; computed(() &#x3D;&gt; this.layoutComponentService.collapsable());
   public readonly opened &#x3D; computed(() &#x3D;&gt; this.layoutComponentService.opened());
+  public readonly profile &#x3D; toSignal(inject(RXAP_USER_PROFILE_DATA_SOURCE).connect(&#x27;user-profile&#x27;), { initialValue: null });
+
+  private readonly defaultHeaderService &#x3D; inject(DefaultHeaderService);
 
-  private readonly userProfileService: UserProfileDataSource &#x3D; inject(UserProfileDataSource);
-  public readonly profile &#x3D; toSignal(this.userProfileService.connect(&#x27;user-profile&#x27;), { initialValue: null });
+  public readonly portals &#x3D; computed(() &#x3D;&gt; this.defaultHeaderService.portals());
+  public readonly hasPortals &#x3D; computed(() &#x3D;&gt; this.portals().length &gt; 0);
 
 }
 </code></pre>
@@ -410,7 +448,10 @@ export class DefaultHeaderComponent {
   @if (!collapsable()) {
     &lt;rxap-sidenav-toggle-button&gt;&lt;/rxap-sidenav-toggle-button&gt;
   }
-  &lt;div class&#x3D;&quot;grow&quot;&gt;
+  &lt;div class&#x3D;&quot;grow flex flex-row gap-x-4 items-center&quot;&gt;
+    @for (portal of portals(); track portal) {
+      &lt;ng-template [cdkPortalOutlet]&#x3D;&quot;portal&quot;&gt;&lt;/ng-template&gt;
+    }
     &lt;ng-content&gt;&lt;/ng-content&gt;
   &lt;/div&gt;
   &lt;rxap-apps-button class&#x3D;&quot;grow-0&quot;&gt;&lt;/rxap-apps-button&gt;
@@ -448,7 +489,7 @@ export class DefaultHeaderComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div class="w-full flex flex-row gap-x-4 justify-between items-center">  @if (!collapsable()) {    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>  }  <div class="grow">    <ng-content></ng-content>  </div>  <rxap-apps-button class="grow-0"></rxap-apps-button>  <rxap-settings-button class="grow-0"></rxap-settings-button>  @if (this.profile(); as profile) {    <rxap-user-profile-icon [profile]="profile" class="grow-0"></rxap-user-profile-icon>  }</div></div>'
+        var COMPONENT_TEMPLATE = '<div><div class="w-full flex flex-row gap-x-4 justify-between items-center">  @if (!collapsable()) {    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>  }  <div class="grow flex flex-row gap-x-4 items-center">    @for (portal of portals(); track portal) {      <ng-template [cdkPortalOutlet]="portal"></ng-template>    }    <ng-content></ng-content>  </div>  <rxap-apps-button class="grow-0"></rxap-apps-button>  <rxap-settings-button class="grow-0"></rxap-settings-button>  @if (this.profile(); as profile) {    <rxap-user-profile-icon [profile]="profile" class="grow-0"></rxap-user-profile-icon>  }</div></div>'
     var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'BaseLayoutComponent', 'selector': 'rxap-base-layout'},{'name': 'DefaultHeaderComponent', 'selector': 'rxap-default-header'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'MinimalLayoutComponent', 'selector': 'rxap-minimal-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ReleaseInfoComponent', 'selector': 'rxap-release-info'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'}];
     var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'HeaderDirective', 'selector': '[rxapHeader]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
     var ACTUAL_COMPONENT = {'name': 'DefaultHeaderComponent'};

package/compodoc/components/FooterComponent.html

@@ -153,10 +153,6 @@
                 <td class="col-md-9"><code>rxap-footer</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>
@@ -255,7 +251,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/lib/footer/footer.component.ts:24</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/lib/footer/footer.component.ts:23</a></div>
                         </td>
                     </tr>
 
@@ -282,7 +278,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/lib/footer/footer.component.ts:23</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/lib/footer/footer.component.ts:22</a></div>
                         </td>
                     </tr>
 
@@ -306,12 +302,11 @@ import { MatToolbarModule } from &#x27;@angular/material/toolbar&#x27;;
 import { FooterService } from &#x27;../footer.service&#x27;;
 
 @Component({
-  selector: &#x27;rxap-footer&#x27;,
-  templateUrl: &#x27;./footer.component.html&#x27;,
-  styleUrls: [ &#x27;./footer.component.scss&#x27; ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [ MatToolbarModule, PortalModule ],
+    selector: &#x27;rxap-footer&#x27;,
+    templateUrl: &#x27;./footer.component.html&#x27;,
+    styleUrls: [&#x27;./footer.component.scss&#x27;],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatToolbarModule, PortalModule]
 })
 export class FooterComponent {
 

package/compodoc/components/HeaderComponent.html

@@ -153,10 +153,6 @@
                 <td class="col-md-9"><code>rxap-header</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>
@@ -257,7 +253,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/header/header.component.ts:30</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/lib/header/header.component.ts:29</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -287,7 +283,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/header/header.component.ts:30</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/lib/header/header.component.ts:29</a></div>
                         </td>
                     </tr>
 
@@ -314,7 +310,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/lib/header/header.component.ts:35</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/lib/header/header.component.ts:34</a></div>
                         </td>
                     </tr>
 
@@ -341,7 +337,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/lib/header/header.component.ts:34</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/lib/header/header.component.ts:33</a></div>
                         </td>
                     </tr>
 
@@ -370,16 +366,15 @@ import {
 import { HeaderService } from &#x27;../header.service&#x27;;
 
 @Component({
-  selector: &#x27;rxap-header&#x27;,
-  templateUrl: &#x27;./header.component.html&#x27;,
-  styleUrls: [ &#x27;./header.component.scss&#x27; ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    MatToolbar,
-    MatToolbarRow,
-    CdkPortalOutlet,
-  ],
+    selector: &#x27;rxap-header&#x27;,
+    templateUrl: &#x27;./header.component.html&#x27;,
+    styleUrls: [&#x27;./header.component.scss&#x27;],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        MatToolbar,
+        MatToolbarRow,
+        CdkPortalOutlet,
+    ]
 })
 export class HeaderComponent {