@rxap/layout 19.1.0-dev.0 → 19.1.0-dev.2

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [19.1.0-dev.2](https://gitlab.com/rxap/packages/compare/@rxap/layout@19.1.0-dev.1...@rxap/layout@19.1.0-dev.2) (2025-05-09)
+
+### Features
+
+- **layout:** enhance navigation responsiveness for mobile and collapsed states ([0884432](https://gitlab.com/rxap/packages/commit/0884432174dadc54c503535af3c67f1a29dcedb5))
+- **layout:** make mobile query configurable in navigation config ([549eca1](https://gitlab.com/rxap/packages/commit/549eca12a27bb6b12b853e54bcd7408a710c42a6))
+
+# [19.1.0-dev.1](https://gitlab.com/rxap/packages/compare/@rxap/layout@19.1.0-dev.0...@rxap/layout@19.1.0-dev.1) (2025-04-30)
+
+### Features
+
+- **sidenav:** add openedChange event handling ([2302d85](https://gitlab.com/rxap/packages/commit/2302d857a92fc24ebbcc713afcd0f5831514c298))
+
 # [19.1.0-dev.0](https://gitlab.com/rxap/packages/compare/@rxap/layout@19.0.4-dev.5...@rxap/layout@19.1.0-dev.0) (2025-04-29)
 
 ### Features

package/compodoc/changelog.html

@@ -85,6 +85,17 @@
 <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.1.0-dev.1...@rxap/layout@19.1.0-dev.2">19.1.0-dev.2</a> (2025-05-09)</h1>
+<h3>Features</h3>
+<ul>
+<li><strong>layout:</strong> enhance navigation responsiveness for mobile and collapsed states (<a href="https://gitlab.com/rxap/packages/commit/0884432174dadc54c503535af3c67f1a29dcedb5">0884432</a>)</li>
+<li><strong>layout:</strong> make mobile query configurable in navigation config (<a href="https://gitlab.com/rxap/packages/commit/549eca12a27bb6b12b853e54bcd7408a710c42a6">549eca1</a>)</li>
+</ul>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@19.1.0-dev.0...@rxap/layout@19.1.0-dev.1">19.1.0-dev.1</a> (2025-04-30)</h1>
+<h3>Features</h3>
+<ul>
+<li><strong>sidenav:</strong> add openedChange event handling (<a href="https://gitlab.com/rxap/packages/commit/2302d857a92fc24ebbcc713afcd0f5831514c298">2302d85</a>)</li>
+</ul>
 <h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@19.0.4-dev.5...@rxap/layout@19.1.0-dev.0">19.1.0-dev.0</a> (2025-04-29)</h1>
 <h3>Features</h3>
 <ul>

package/compodoc/components/AppsButtonComponent.html

@@ -213,6 +213,11 @@
                                     <span class="modifier">Readonly</span>
                                 <a href="#appList" >appList</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#externalAppsService" >externalAppsService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -331,6 +336,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="externalAppsService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>externalAppsService</b></span>
+                        <a href="#externalAppsService"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(ExternalAppsService)</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/default-header/apps-button/apps-button.component.ts:41</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -439,7 +471,7 @@ export class AppsButtonComponent implements OnInit {
    */
   public readonly isOpen &#x3D; signal(false);
 
-  private readonly externalAppsService &#x3D; inject(ExternalAppsService);
+  protected readonly externalAppsService &#x3D; inject(ExternalAppsService);
   public readonly appList &#x3D; computed(() &#x3D;&gt; this.externalAppsService.activeAppList());
   public readonly hasApps &#x3D; computed(() &#x3D;&gt; this.appList().length &gt; 0);
 

package/compodoc/components/DefaultHeaderComponent.html

@@ -204,13 +204,28 @@
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#collapsable" >collapsable</a>
+                                <a href="#collapsed" >collapsed</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#defaultHeaderService" >defaultHeaderService</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
                                 <a href="#hasPortals" >hasPortals</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#isMobile" >isMobile</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#layoutComponentService" >layoutComponentService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -254,18 +269,18 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="collapsable"></a>
+                    <a name="collapsed"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>collapsable</b></span>
-                        <a href="#collapsable"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>collapsed</b></span>
+                        <a href="#collapsed"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutComponentService.collapsable())</code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutComponentService.collapsed())</code>
                     </td>
                 </tr>
                     <tr>
@@ -275,6 +290,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="defaultHeaderService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>defaultHeaderService</b></span>
+                        <a href="#defaultHeaderService"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(DefaultHeaderService)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/lib/default-header/default-header.component.ts:45</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -297,7 +339,61 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <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>
+                                <div class="io-line">Defined in <a href="" data-line="48" class="link-to-prism">src/lib/default-header/default-header.component.ts:48</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="isMobile"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>isMobile</b></span>
+                        <a href="#isMobile"><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.layoutComponentService.isMobile())</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/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="layoutComponentService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>layoutComponentService</b></span>
+                        <a href="#layoutComponentService"><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>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="38" class="link-to-prism">src/lib/default-header/default-header.component.ts:38</a></div>
                         </td>
                     </tr>
 
@@ -324,7 +420,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <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>
+                                <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>
 
@@ -351,7 +447,7 @@
                 </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>
+                                <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>
 
@@ -378,7 +474,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <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>
+                                <div class="io-line">Defined in <a href="" data-line="43" class="link-to-prism">src/lib/default-header/default-header.component.ts:43</a></div>
                         </td>
                     </tr>
 
@@ -428,13 +524,14 @@ import { UserProfileIconComponent } from &#x27;./user-profile-icon/user-profile-
 })
 export class DefaultHeaderComponent {
 
-  private readonly layoutComponentService &#x3D; inject(LayoutService);
+  protected readonly layoutComponentService &#x3D; inject(LayoutService);
 
-  public readonly collapsable &#x3D; computed(() &#x3D;&gt; this.layoutComponentService.collapsable());
+  public readonly collapsed &#x3D; computed(() &#x3D;&gt; this.layoutComponentService.collapsed());
+  public readonly isMobile &#x3D; computed(() &#x3D;&gt; this.layoutComponentService.isMobile());
   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);
+  protected readonly defaultHeaderService &#x3D; inject(DefaultHeaderService);
 
   public readonly portals &#x3D; computed(() &#x3D;&gt; this.defaultHeaderService.portals());
   public readonly hasPortals &#x3D; computed(() &#x3D;&gt; this.portals().length &gt; 0);
@@ -445,7 +542,7 @@ export class DefaultHeaderComponent {
 
     <div class="tab-pane fade " id="templateData">
         <pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;w-full flex flex-row gap-x-4 justify-between items-center&quot;&gt;
-  @if (collapsable()) {
+  @if (collapsed() || isMobile()) {
     &lt;rxap-sidenav-toggle-button&gt;&lt;/rxap-sidenav-toggle-button&gt;
   }
   &lt;div class&#x3D;&quot;grow flex flex-row gap-x-4 items-center&quot;&gt;
@@ -489,7 +586,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 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 (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 (collapsed() || isMobile()) {    <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 (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

@@ -197,6 +197,11 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#footerService" >footerService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -231,6 +236,33 @@
     <h3 id="inputs">
         Properties
     </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="footerService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>footerService</b></span>
+                        <a href="#footerService"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(FooterService)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/lib/footer/footer.component.ts:20</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -310,7 +342,7 @@ import { FooterService } from &#x27;../footer.service&#x27;;
 })
 export class FooterComponent {
 
-  private readonly footerService &#x3D; inject(FooterService);
+  protected readonly footerService &#x3D; inject(FooterService);
 
   public readonly portals &#x3D; computed(() &#x3D;&gt; this.footerService.portals());
   public readonly hasPortals &#x3D; computed(() &#x3D;&gt; this.portals().length &gt; 0);

package/compodoc/components/HeaderComponent.html

@@ -208,6 +208,11 @@
                                     <span class="modifier">Readonly</span>
                                 <a href="#hasPortals" >hasPortals</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#headerService" >headerService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -315,6 +320,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="headerService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>headerService</b></span>
+                        <a href="#headerService"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(HeaderService)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/lib/header/header.component.ts:31</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -380,7 +412,7 @@ export class HeaderComponent {
 
   public readonly color &#x3D; input&lt;ThemePalette&gt;();
 
-  private readonly headerService &#x3D; inject(HeaderService);
+  protected readonly headerService &#x3D; inject(HeaderService);
 
   public readonly portals &#x3D; computed(() &#x3D;&gt; this.headerService.portals());
   public readonly hasPortals &#x3D; computed(() &#x3D;&gt; this.portals().length &gt; 0);

package/compodoc/components/LayoutComponent.html

@@ -218,6 +218,11 @@
                                     <span class="modifier">Readonly</span>
                                 <a href="#logoHeight" >logoHeight</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#logoService" >logoService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -283,6 +288,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="logoService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>logoService</b></span>
+                        <a href="#logoService"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(LogoService)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="61" class="link-to-prism">src/lib/layout/layout.component.ts:61</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -417,7 +449,7 @@ import { SidenavComponent } from &#x27;../sidenav/sidenav.component&#x27;;
 })
 export class LayoutComponent {
 
-  private readonly logoService &#x3D; inject(LogoService);
+  protected readonly logoService &#x3D; inject(LogoService);
   public readonly logoSrc: Signal&lt;string&gt; &#x3D; computed(() &#x3D;&gt; this.logoService.src());
   public readonly logoWidth: Signal&lt;number&gt; &#x3D; computed(() &#x3D;&gt; this.logoService.width());
   public readonly logoHeight: Signal&lt;number&gt; &#x3D; computed(() &#x3D;&gt; this.logoService.height());

package/compodoc/components/NavigationComponent.html

@@ -219,10 +219,20 @@
                                     <span class="modifier">Readonly</span>
                                 <a href="#collapsed" >collapsed</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#injector" >injector</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                 <a href="#items" >items</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#layoutService" >layoutService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                 <a href="#level" >level</a>
@@ -231,6 +241,11 @@
                                     <span class="modifier">Public</span>
                                 <a href="#navigationItems" >navigationItems</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#navigationService" >navigationService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -597,6 +612,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="injector"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>injector</b></span>
+                        <a href="#injector"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(INJECTOR)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="64" class="link-to-prism">src/lib/navigation/navigation.component.ts:64</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -618,6 +660,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="layoutService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>layoutService</b></span>
+                        <a href="#layoutService"><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>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="56" class="link-to-prism">src/lib/navigation/navigation.component.ts:56</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -670,6 +739,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="navigationService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>navigationService</b></span>
+                        <a href="#navigationService"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(NavigationService)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="54" class="link-to-prism">src/lib/navigation/navigation.component.ts:54</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -740,7 +836,7 @@ import { NavigationItemComponent } from &#x27;./navigation-item/navigation-item.
     styleUrls: [&#x27;./navigation.component.scss&#x27;],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-  
+
     host: {
         class: &#x27;list-none dark:text-neutral-400 text-neutral-700&#x27;,
     },
@@ -758,9 +854,9 @@ export class NavigationComponent implements OnInit {
 
   public level &#x3D; input(0);
 
-  private readonly navigationService &#x3D; inject(NavigationService);
+  protected readonly navigationService &#x3D; inject(NavigationService);
 
-  private readonly layoutService &#x3D; inject(LayoutService);
+  protected readonly layoutService &#x3D; inject(LayoutService);
 
   public readonly collapsed &#x3D; computed(() &#x3D;&gt; this.layoutService.collapsed());
 
@@ -768,7 +864,7 @@ export class NavigationComponent implements OnInit {
 
   public readonly root &#x3D; input(false);
 
-  private readonly injector &#x3D; inject(INJECTOR);
+  protected readonly injector &#x3D; inject(INJECTOR);
 
   public ngOnInit(): void {
     if (this.root()) {