@rxap/layout 19.0.4-dev.5 → 19.1.0-dev.1

package/compodoc/components/SidenavComponent.html

@@ -164,12 +164,10 @@
                             <code>MatSidenavContent</code>
                                 <code><a href="../components/NavigationComponent.html" target="_self" >NavigationComponent</a></code>
                             <code>NgIf</code>
-                            <code>RouterOutlet</code>
                             <code>NgClass</code>
                             <code>NgStyle</code>
                             <code>MatDivider</code>
                             <code>NgTemplateOutlet</code>
-                            <code>MatButton</code>
                 </td>
             </tr>
 
@@ -233,6 +231,11 @@
                                     <span class="modifier">Readonly</span>
                                 <a href="#fixedTopGap" >fixedTopGap</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>
                                     <span class="modifier">Readonly</span>
@@ -243,6 +246,11 @@
                                     <span class="modifier">Readonly</span>
                                 <a href="#pinned" >pinned</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#sidenav" >sidenav</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -274,6 +282,9 @@
                                     <span class="modifier">Async</span>
                                 <a href="#closeSidenav" >closeSidenav</a>
                             </li>
+                            <li>
+                                <a href="#onOpenedChanged" >onOpenedChanged</a>
+                            </li>
                             <li>
                                     <span class="modifier">Async</span>
                                 <a href="#openSidenav" >openSidenav</a>
@@ -325,8 +336,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="82"
-                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:82</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="79"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:79</a></div>
                         </td>
                     </tr>
 
@@ -342,6 +353,73 @@
             </tr>
         </tbody>
     </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="onOpenedChanged"></a>
+                    <span class="name">
+                        <span ><b>onOpenedChanged</b></span>
+                        <a href="#onOpenedChanged"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+<code>onOpenedChanged(opened: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code>
+                </td>
+            </tr>
+
+
+                    <tr>
+                        <td class="col-md-4">
+                            <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>
+
+
+            <tr>
+                <td class="col-md-4">
+
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                                <td>Type</td>
+                                            <td>Optional</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>opened</td>
+                                            <td>
+                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+                                            </td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
+
+                        </div>
+                            <div class="io-description">
+                                
+                            </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -364,8 +442,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="77"
-                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:77</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="74"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:74</a></div>
                         </td>
                     </tr>
 
@@ -401,8 +479,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="73"
-                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:73</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>
 
@@ -450,7 +528,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="61" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:61</a></div>
                         </td>
                     </tr>
 
@@ -483,7 +561,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="60" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:60</a></div>
                         </td>
                     </tr>
 
@@ -516,7 +594,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="56" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:56</a></div>
                         </td>
                     </tr>
 
@@ -549,7 +627,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="58" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:58</a></div>
                         </td>
                     </tr>
 
@@ -582,7 +660,34 @@
                 </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="57" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:57</a></div>
+                        </td>
+                    </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="51" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:51</a></div>
                         </td>
                     </tr>
 
@@ -615,7 +720,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="62" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:62</a></div>
                         </td>
                     </tr>
 
@@ -648,7 +753,34 @@
                 </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="59" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:59</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="sidenav"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>sidenav</b></span>
+                        <a href="#sidenav"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>viewChild(MatSidenav)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:53</a></div>
                         </td>
                     </tr>
 
@@ -675,7 +807,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="63" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:63</a></div>
                         </td>
                     </tr>
 
@@ -702,7 +834,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="64" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:64</a></div>
                         </td>
                     </tr>
 
@@ -735,7 +867,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="62" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:62</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="55" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:55</a></div>
                         </td>
                     </tr>
 
@@ -763,10 +895,7 @@ import {
   Signal,
   viewChild,
 } from &#x27;@angular/core&#x27;;
-import {
-  MatButton,
-  MatIconButton,
-} from &#x27;@angular/material/button&#x27;;
+import { MatIconButton } from &#x27;@angular/material/button&#x27;;
 import { MatDivider } from &#x27;@angular/material/divider&#x27;;
 import { MatIcon } from &#x27;@angular/material/icon&#x27;;
 import {
@@ -775,39 +904,35 @@ import {
   MatSidenavContainer,
   MatSidenavContent,
 } from &#x27;@angular/material/sidenav&#x27;;
-import { RouterOutlet } from &#x27;@angular/router&#x27;;
 import { LayoutService } from &#x27;../layout.service&#x27;;
 import { NavigationComponent } from &#x27;../navigation/navigation.component&#x27;;
 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,
-    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,
+    NgClass,
+    NgStyle,
+    MatDivider,
+    NgTemplateOutlet,
+  ],
 })
 export class SidenavComponent {
 
-  private readonly layoutService &#x3D; inject(LayoutService);
-
+  protected readonly layoutService &#x3D; inject(LayoutService);
 
-  private readonly sidenav &#x3D; viewChild(MatSidenav);
+  protected readonly sidenav &#x3D; viewChild(MatSidenav);
 
   public readonly sidenavMode: Signal&lt;MatDrawerMode&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.mode());
   public readonly fixedBottomGap: Signal&lt;number&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.fixedBottomGap());
@@ -824,6 +949,10 @@ export class SidenavComponent {
     this.layoutService.togglePinned();
   }
 
+  onOpenedChanged(opened: boolean) {
+    this.layoutService.opened.set(opened);
+  }
+
   async openSidenav() {
     await this.sidenav()?.open();
     this.layoutService.openSidenav();
@@ -850,6 +979,7 @@ export class SidenavComponent {
     [mode]&#x3D;&quot;sidenavMode()&quot;
     [ngClass]&#x3D;&quot;{ collapsable: collapsable() }&quot;
     [opened]&#x3D;&quot;opened()&quot;
+    (openedChange)&#x3D;&quot;onOpenedChanged($event)&quot;
   &gt;
     &lt;div (mouseleave)&#x3D;&quot;collapsable() &amp;&amp; !pinned() &amp;&amp; closeSidenav()&quot;
          class&#x3D;&quot;h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch&quot;&gt;
@@ -951,7 +1081,7 @@ export class SidenavComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><mat-sidenav-container [ngStyle]="{    \'padding-top.px\': fixedTopGap(),    \'padding-bottom.px\': fixedBottomGap(),  }" class="h-full">  <mat-sidenav    [fixedBottomGap]="fixedBottomGap()"    [fixedInViewport]="fixedInViewport()"    [fixedTopGap]="fixedTopGap()"    [mode]="sidenavMode()"    [ngClass]="{ collapsable: collapsable() }"    [opened]="opened()"  >    <div (mouseleave)="collapsable() && !pinned() && closeSidenav()"         class="h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch">      <div (click)="togglePinned()" *ngIf="collapsable()"           class="pl-2 self-stretch grow-0 flex flex-row justify-between items-center">        <span class="text-lg" i18n>Navigation</span>        <div class="flex flex-row items-center justify-center" style="width: 64px">          <button mat-icon-button>            <mat-icon *ngIf="!pinned()">radio_button_unchecked</mat-icon>            <mat-icon *ngIf="pinned()">radio_button_checked</mat-icon>          </button>        </div>      </div>      @if (sidenavHeaderDirective()?.template; as template) {        <div [ngClass]="{ hidden: collapsed() }" class="header grow-0">          <ng-container *ngTemplateOutlet="template"></ng-container>        </div>        <mat-divider [ngClass]="{ hidden: collapsed() }" class="grow-0"></mat-divider>      }      <ul        (mouseenter)="collapsable() && !pinned() && openSidenav()"        class="grow self-stretch"        [root]="true"        rxap-navigation      >      </ul>      @if (sidenavFooterDirective()?.template; as template) {        <mat-divider [ngClass]="{ hidden: collapsed() }" class="grow-0"></mat-divider>        <div [ngClass]="{ hidden: collapsed() }" class="footer grow-0">          <ng-container *ngTemplateOutlet="template"></ng-container>        </div>      }    </div>  </mat-sidenav>  <mat-sidenav-content [ngClass]="{ \'ml-16\': collapsable() }" class="p-4">    <ng-content></ng-content>  </mat-sidenav-content></mat-sidenav-container></div>'
+        var COMPONENT_TEMPLATE = '<div><mat-sidenav-container [ngStyle]="{    \'padding-top.px\': fixedTopGap(),    \'padding-bottom.px\': fixedBottomGap(),  }" class="h-full">  <mat-sidenav    [fixedBottomGap]="fixedBottomGap()"    [fixedInViewport]="fixedInViewport()"    [fixedTopGap]="fixedTopGap()"    [mode]="sidenavMode()"    [ngClass]="{ collapsable: collapsable() }"    [opened]="opened()"    (openedChange)="onOpenedChanged($event)"  >    <div (mouseleave)="collapsable() && !pinned() && closeSidenav()"         class="h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch">      <div (click)="togglePinned()" *ngIf="collapsable()"           class="pl-2 self-stretch grow-0 flex flex-row justify-between items-center">        <span class="text-lg" i18n>Navigation</span>        <div class="flex flex-row items-center justify-center" style="width: 64px">          <button mat-icon-button>            <mat-icon *ngIf="!pinned()">radio_button_unchecked</mat-icon>            <mat-icon *ngIf="pinned()">radio_button_checked</mat-icon>          </button>        </div>      </div>      @if (sidenavHeaderDirective()?.template; as template) {        <div [ngClass]="{ hidden: collapsed() }" class="header grow-0">          <ng-container *ngTemplateOutlet="template"></ng-container>        </div>        <mat-divider [ngClass]="{ hidden: collapsed() }" class="grow-0"></mat-divider>      }      <ul        (mouseenter)="collapsable() && !pinned() && openSidenav()"        class="grow self-stretch"        [root]="true"        rxap-navigation      >      </ul>      @if (sidenavFooterDirective()?.template; as template) {        <mat-divider [ngClass]="{ hidden: collapsed() }" class="grow-0"></mat-divider>        <div [ngClass]="{ hidden: collapsed() }" class="footer grow-0">          <ng-container *ngTemplateOutlet="template"></ng-container>        </div>      }    </div>  </mat-sidenav>  <mat-sidenav-content [ngClass]="{ \'ml-16\': collapsable() }" class="p-4">    <ng-content></ng-content>  </mat-sidenav-content></mat-sidenav-container></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': 'SidenavComponent'};

package/compodoc/components/SidenavToggleButtonComponent.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="#layoutComponentService" >layoutComponentService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -285,6 +290,33 @@
     <h3 id="inputs">
         Properties
     </h3>
+    <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="23" class="link-to-prism">src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:23</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -340,7 +372,7 @@ import { LayoutService } from &#x27;../../layout.service&#x27;;
 })
 export class SidenavToggleButtonComponent {
 
-  private readonly layoutComponentService &#x3D; inject(LayoutService);
+  protected readonly layoutComponentService &#x3D; inject(LayoutService);
 
   public readonly opened &#x3D; computed(() &#x3D;&gt; this.layoutComponentService.opened());
 

package/compodoc/components/UserProfileIconComponent.html

@@ -197,11 +197,21 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#extractUsernameFromProfile" >extractUsernameFromProfile</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
                                 <a href="#profile" >profile</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#pubSubService" >pubSubService</a>
+                            </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
@@ -326,6 +336,39 @@
     <h3 id="inputs">
         Properties
     </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="extractUsernameFromProfile"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>extractUsernameFromProfile</b></span>
+                        <a href="#extractUsernameFromProfile"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#ExtractUsernameFromProfileFn" target="_self" >ExtractUsernameFromProfileFn</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(EXTRACT_USERNAME_FROM_PROFILE)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:29</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -346,6 +389,33 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="pubSubService"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>pubSubService</b></span>
+                        <a href="#pubSubService"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(PubSubService)</code>
+                    </td>
+                </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>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -415,8 +485,8 @@ import { ExtractUsernameFromProfileFn } from &#x27;../../types&#x27;;
 })
 export class UserProfileIconComponent {
 
-  private readonly extractUsernameFromProfile: ExtractUsernameFromProfileFn &#x3D; inject(EXTRACT_USERNAME_FROM_PROFILE);
-  private readonly pubSubService &#x3D; inject(PubSubService);
+  protected readonly extractUsernameFromProfile: ExtractUsernameFromProfileFn &#x3D; inject(EXTRACT_USERNAME_FROM_PROFILE);
+  protected readonly pubSubService &#x3D; inject(PubSubService);
 
   public readonly profile &#x3D; input.required();