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

package/compodoc/components/UserProfileIconComponent.html

@@ -120,7 +120,7 @@
     <h3>File</h3>
 </p>
 <p class="comment">
-    <code>src/lib/header/user-profile-icon/user-profile-icon.component.ts</code>
+    <code>src/lib/default-header/user-profile-icon/user-profile-icon.component.ts</code>
 </p>
 
 
@@ -163,8 +163,6 @@
                 <td class="col-md-9">
                             <code>MatMenuModule</code>
                             <code>MatIconModule</code>
-                            <code>NgIf</code>
-                            <code>AsyncPipe</code>
                 </td>
             </tr>
 
@@ -205,6 +203,12 @@
                         <ul class="index-list">
                             <li>
                                     <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#profile" >profile</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
                                 <a href="#username" >username</a>
                             </li>
                         </ul>
@@ -221,13 +225,26 @@
                         <ul class="index-list">
                             <li>
                                     <span class="modifier">Public</span>
-                                    <span class="modifier">Async</span>
                                 <a href="#logout" >logout</a>
                             </li>
                         </ul>
                     </td>
                 </tr>
 
+                <tr>
+                    <td class="col-md-4">
+                        <h6><b>Inputs</b></h6>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <ul class="index-list">
+                            <li>
+                                <a href="#profile" >profile</a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
 
 
 
@@ -236,83 +253,33 @@
     </table>
 </section>
 
-    <section data-compodoc="block-constructor">
-    <h3 id="constructor">Constructor</h3>
+
+    <section data-compodoc="block-inputs">
+    <h3 id="inputs">Inputs</h3>
         <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
                     <td class="col-md-4">
-<code>constructor(userProfileService: UserProfileDataSource<T>, authenticationService: RxapAuthenticationService, extractUsernameFromProfile: <a href="../undefineds/ExtractUsernameFromProfileFn.html" target="_self">ExtractUsernameFromProfileFn&lt;T&gt;</a>)</code>
+                        <a name="profile"></a>
+                        <b>profile</b>
                     </td>
                 </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="52" class="link-to-prism">src/lib/header/user-profile-icon/user-profile-icon.component.ts:52</a></div>
-                            </td>
-                        </tr>
-
                 <tr>
                     <td class="col-md-4">
-                            <div>
-                                    <b>Parameters :</b>
-                                    <table class="params">
-                                        <thead>
-                                            <tr>
-                                                <td>Name</td>
-                                                    <td>Type</td>
-                                                <td>Optional</td>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                                <tr>
-                                                        <td>userProfileService</td>
-                                                  
-                                                        <td>
-                                                                    <code>UserProfileDataSource&lt;T&gt;</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>authenticationService</td>
-                                                  
-                                                        <td>
-                                                                    <code>RxapAuthenticationService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>extractUsernameFromProfile</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="../miscellaneous/typealiases.html#ExtractUsernameFromProfileFn" target="_self" >ExtractUsernameFromProfileFn&lt;T&gt;</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
+                        <i>Required : </i>&nbsp;<b>true</b>
                     </td>
                 </tr>
+                        <tr>
+                            <td class="col-md-2" colspan="2">
+                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:30</a></div>
+                            </td>
+                        </tr>
             </tbody>
         </table>
 </section>
 
 
 
-
-
     <section data-compodoc="block-methods">
     
     <h3 id="methods">
@@ -325,7 +292,6 @@
                     <a name="logout"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
-                            <span class="modifier">Async</span>
                         <span ><b>logout</b></span>
                         <a href="#logout"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -341,8 +307,8 @@
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="74"
-                                    class="link-to-prism">src/lib/header/user-profile-icon/user-profile-icon.component.ts:74</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="40"
+                                    class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:40</a></div>
                         </td>
                     </tr>
 
@@ -351,7 +317,7 @@
                 <td class="col-md-4">
 
                         <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
 
                         </div>
                 </td>
@@ -364,6 +330,28 @@
     <h3 id="inputs">
         Properties
     </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="profile"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>profile</b></span>
+                        <a href="#profile"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </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">
         <tbody>
             <tr>
@@ -371,6 +359,7 @@
                     <a name="username"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
                         <span ><b>username</b></span>
                         <a href="#username"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -378,13 +367,18 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>Signal&lt;string | null&gt;</code>
-
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; {
+    const profile &#x3D; this.profile();
+    if (profile) {
+      return this.extractUsernameFromProfile(profile);
+    }
+    return null;
+  })</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="52" class="link-to-prism">src/lib/header/user-profile-icon/user-profile-icon.component.ts:52</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/lib/default-header/user-profile-icon/user-profile-icon.component.ts:32</a></div>
                         </td>
                     </tr>
 
@@ -398,40 +392,17 @@
 
     <div class="tab-pane fade  tab-source-code" id="source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
-  AsyncPipe,
-  NgIf,
-} from &#x27;@angular/common&#x27;;
-import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
-  InjectionToken,
-  Signal,
+  computed,
+  inject,
+  input,
 } from &#x27;@angular/core&#x27;;
-import { toSignal } from &#x27;@angular/core/rxjs-interop&#x27;;
 import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
 import { MatMenuModule } from &#x27;@angular/material/menu&#x27;;
-import { RxapAuthenticationService } from &#x27;@rxap/authentication&#x27;;
-import { UserProfileDataSource } from &#x27;@rxap/ngx-user&#x27;;
-import {
-  distinctUntilChanged,
-  filter,
-  skip,
-} from &#x27;rxjs&#x27;;
-import {
-  map,
-  switchMap,
-} from &#x27;rxjs/operators&#x27;;
-
-export type ExtractUsernameFromProfileFn&lt;T &#x3D; unknown&gt; &#x3D; (profile: T) &#x3D;&gt; string | null;
-
-export const EXTRACT_USERNAME_FROM_PROFILE &#x3D; new InjectionToken&lt;ExtractUsernameFromProfileFn&gt;(
-  &#x27;extract-username-from-profile&#x27;,
-  {
-    providedIn: &#x27;root&#x27;,
-    factory: () &#x3D;&gt; (profile: any) &#x3D;&gt; (profile ? profile.username ?? profile.email ?? profile.name : null) ?? null,
-  },
-);
+import { PubSubService } from &#x27;@rxap/ngx-pub-sub&#x27;;
+import { EXTRACT_USERNAME_FROM_PROFILE } from &#x27;../../tokens&#x27;;
+import { ExtractUsernameFromProfileFn } from &#x27;../../types&#x27;;
 
 @Component({
   selector: &#x27;rxap-user-profile-icon&#x27;,
@@ -442,36 +413,25 @@ export const EXTRACT_USERNAME_FROM_PROFILE &#x3D; new InjectionToken&lt;ExtractU
   imports: [
     MatMenuModule,
     MatIconModule,
-    NgIf,
-    AsyncPipe,
   ],
 })
-export class UserProfileIconComponent&lt;T &#x3D; unknown&gt; {
-
-  public username: Signal&lt;string | null&gt;;
-
-  constructor(
-    private readonly userProfileService: UserProfileDataSource&lt;T&gt;,
-    private readonly authenticationService: RxapAuthenticationService,
-    @Inject(EXTRACT_USERNAME_FROM_PROFILE)
-      extractUsernameFromProfile: ExtractUsernameFromProfileFn&lt;T&gt;,
-  ) {
-    this.username &#x3D; toSignal(this.authenticationService.isAuthenticated$.pipe(
-      filter(Boolean),
-      switchMap(() &#x3D;&gt; this.userProfileService.connect({
-        viewChange: this.authenticationService.isAuthenticated$.pipe(
-          skip(1),
-          filter(Boolean),
-          distinctUntilChanged(),
-        ),
-      })),
-      filter(Boolean),
-      map(extractUsernameFromProfile),
-    ), { initialValue: null });
-  }
+export class UserProfileIconComponent {
+
+  private readonly extractUsernameFromProfile: ExtractUsernameFromProfileFn &#x3D; inject(EXTRACT_USERNAME_FROM_PROFILE);
+  private readonly pubSubService &#x3D; inject(PubSubService);
+
+  public readonly profile &#x3D; input.required();
 
-  public async logout() {
-    await this.authenticationService.signOut();
+  public readonly username &#x3D; computed(() &#x3D;&gt; {
+    const profile &#x3D; this.profile();
+    if (profile) {
+      return this.extractUsernameFromProfile(profile);
+    }
+    return null;
+  });
+
+  public logout() {
+    this.pubSubService.publish(&#x27;authentication.logout&#x27;);
   }
 
 
@@ -481,18 +441,19 @@ export class UserProfileIconComponent&lt;T &#x3D; unknown&gt; {
 
     <div class="tab-pane fade " id="templateData">
         <pre class="line-numbers"><code class="language-html">&lt;button [matMenuTriggerFor]&#x3D;&quot;menu&quot;
-        [disabled]&#x3D;&quot;!username()&quot;
-        class&#x3D;&quot;profile-icon flex flex-row justify-center items-center&quot;&gt;
-  &lt;mat-icon class&#x3D;&quot;avatar-icon&quot; svgIcon&#x3D;&quot;account-circle&quot;&gt;&lt;/mat-icon&gt;
+        class&#x3D;&quot;rounded-full cursor-pointer outline-none overflow-hidden h-8 w-8 bg-center bg-no-repeat bg-cover flex flex-row justify-center items-center&quot;&gt;
+  &lt;mat-icon class&#x3D;&quot;h-8 w-8 text-[32px]&quot; svgIcon&#x3D;&quot;account-circle&quot;&gt;&lt;/mat-icon&gt;
 &lt;/button&gt;
 
 &lt;mat-menu #menu&#x3D;&quot;matMenu&quot; [yPosition]&#x3D;&quot;&#x27;below&#x27;&quot; class&#x3D;&quot;!max-w-none&quot;&gt;
+  @if (this.username(); as username) {
   &lt;button mat-menu-item&gt;
     &lt;span class&#x3D;&quot;flex flex-row gap-2&quot;&gt;
       &lt;mat-icon svgIcon&#x3D;&quot;account&quot;&gt;&lt;/mat-icon&gt;
-      &lt;span&gt;{{username()}}&lt;/span&gt;
+      &lt;span&gt;{{username}}&lt;/span&gt;
     &lt;/span&gt;
   &lt;/button&gt;
+  }
   &lt;button (click)&#x3D;&quot;logout()&quot; mat-menu-item&gt;
     &lt;span class&#x3D;&quot;flex flex-row gap-2&quot;&gt;
       &lt;mat-icon svgIcon&#x3D;&quot;logout&quot;&gt;&lt;/mat-icon&gt;
@@ -507,32 +468,7 @@ export class UserProfileIconComponent&lt;T &#x3D; unknown&gt; {
                 <p class="comment">
                     <code>./user-profile-icon.component.scss</code>
                 </p>
-                <pre class="line-numbers"><code class="language-scss">.profile-icon {
-  border-radius: 100%;
-  border: none;
-  height: 32px;
-  width: 32px;
-  overflow: hidden;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  .avatar-icon {
-    width: 32px;
-    height: 32px;
-    font-size: 32px;
-  }
-
-  &amp;:hover {
-    cursor: pointer;
-  }
-
-  &amp;:focus {
-    outline: none;
-  }
-
-}
-</code></pre>
+                <pre class="line-numbers"><code class="language-scss"></code></pre>
     </div>
 
     <div class="tab-pane fade " id="tree">
@@ -560,9 +496,9 @@ export class UserProfileIconComponent&lt;T &#x3D; unknown&gt; {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><button [matMenuTriggerFor]="menu"        [disabled]="!username()"        class="profile-icon flex flex-row justify-center items-center">  <mat-icon class="avatar-icon" svgIcon="account-circle"></mat-icon></button><mat-menu #menu="matMenu" [yPosition]="\'below\'" class="!max-w-none">  <button mat-menu-item>    <span class="flex flex-row gap-2">      <mat-icon svgIcon="account"></mat-icon>      <span>{{username()}}</span>    </span>  </button>  <button (click)="logout()" mat-menu-item>    <span class="flex flex-row gap-2">      <mat-icon svgIcon="logout"></mat-icon>      <span i18n>Logout</span>    </span>  </button></mat-menu></div>'
-    var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LanguageSelectorComponent', 'selector': 'rxap-language-selector'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ResetButtonComponent', 'selector': 'rxap-reset-button'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'SignOutComponent', 'selector': 'rxap-sign-out'},{'name': 'ToggleWindowSidenavButtonComponent', 'selector': 'rxap-toggle-window-sidenav-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'},{'name': 'VersionComponent', 'selector': 'rxap-version'},{'name': 'WindowContainerSidenavComponent', 'selector': 'rxap-window-container-sidenav'}];
-    var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
+        var COMPONENT_TEMPLATE = '<div><button [matMenuTriggerFor]="menu"        class="rounded-full cursor-pointer outline-none overflow-hidden h-8 w-8 bg-center bg-no-repeat bg-cover flex flex-row justify-center items-center">  <mat-icon class="h-8 w-8 text-[32px]" svgIcon="account-circle"></mat-icon></button><mat-menu #menu="matMenu" [yPosition]="\'below\'" class="!max-w-none">  @if (this.username(); as username) {  <button mat-menu-item>    <span class="flex flex-row gap-2">      <mat-icon svgIcon="account"></mat-icon>      <span>{{username}}</span>    </span>  </button>  }  <button (click)="logout()" mat-menu-item>    <span class="flex flex-row gap-2">      <mat-icon svgIcon="logout"></mat-icon>      <span i18n>Logout</span>    </span>  </button></mat-menu></div>'
+    var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'BaseLayoutComponent', 'selector': 'rxap-base-layout'},{'name': 'DefaultHeaderComponent', 'selector': 'rxap-default-header'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'MinimalLayoutComponent', 'selector': 'rxap-minimal-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ReleaseInfoComponent', 'selector': 'rxap-release-info'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'}];
+    var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'HeaderDirective', 'selector': '[rxapHeader]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
     var ACTUAL_COMPONENT = {'name': 'UserProfileIconComponent'};
 </script>
 <script src="../js/tree.js"></script>

package/compodoc/dependencies.html

@@ -120,44 +120,28 @@
             <b>@angular/common</b> : ^18.0.1</li>
         <li>
             <b>@angular/core</b> : ^18.0.1</li>
-        <li>
-            <b>@angular/forms</b> : ^18.0.1</li>
         <li>
             <b>@angular/material</b> : ^18.0.0</li>
         <li>
             <b>@angular/router</b> : ^18.0.1</li>
         <li>
-            <b>@rxap/authentication</b> : ^18.0.3-dev.0</li>
-        <li>
-            <b>@rxap/authorization</b> : ^18.0.3-dev.0</li>
-        <li>
-            <b>@rxap/browser-utilities</b> : ^1.1.4-dev.0</li>
-        <li>
-            <b>@rxap/config</b> : ^18.1.1-dev.0</li>
-        <li>
-            <b>@rxap/data-source</b> : ^18.1.1-dev.0</li>
-        <li>
-            <b>@rxap/directives</b> : ^18.0.3-dev.0</li>
-        <li>
-            <b>@rxap/environment</b> : ^18.0.3-dev.0</li>
-        <li>
-            <b>@rxap/icon</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/browser-utilities</b> : ^1.1.4-dev.1</li>
         <li>
-            <b>@rxap/material-directives</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/config</b> : ^18.1.1-dev.2</li>
         <li>
-            <b>@rxap/ngx-changelog</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/environment</b> : ^18.0.3-dev.2</li>
         <li>
-            <b>@rxap/ngx-localize</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/material-directives</b> : ^18.0.3-dev.1</li>
         <li>
-            <b>@rxap/ngx-status-check</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/ngx-pub-sub</b> : ^18.0.3-dev.1</li>
         <li>
-            <b>@rxap/ngx-theme</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/ngx-theme</b> : ^18.0.3-dev.1</li>
         <li>
-            <b>@rxap/ngx-user</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/ngx-user</b> : ^18.0.3-dev.1</li>
         <li>
-            <b>@rxap/services</b> : ^18.0.3-dev.0</li>
+            <b>@rxap/pattern</b> : ^1.1.5-dev.1</li>
         <li>
-            <b>@rxap/utilities</b> : ^16.2.4-dev.0</li>
+            <b>@rxap/utilities</b> : ^16.2.4-dev.1</li>
         <li>
             <b>rxjs</b> : ^7.8.1</li>
     </ul>