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

package/compodoc/components/AppsButtonComponent.html

@@ -120,7 +120,7 @@
     <h3>File</h3>
 </p>
 <p class="comment">
-    <code>src/lib/header/apps-button/apps-button.component.ts</code>
+    <code>src/lib/default-header/apps-button/apps-button.component.ts</code>
 </p>
 
 
@@ -131,7 +131,6 @@
     </p>
     <p class="comment">
                 <code>OnInit</code>
-                <code>OnDestroy</code>
     </p>
 
 
@@ -168,11 +167,13 @@
             <tr>
                 <td class="col-md-3">imports</td>
                 <td class="col-md-9">
-                            <code>NgIf</code>
-                            <code>NgFor</code>
-                            <code>MatButtonModule</code>
-                            <code>MatIconModule</code>
                             <code>NgOptimizedImage</code>
+                            <code>MatButton</code>
+                            <code>RouterLink</code>
+                            <code>MatAnchor</code>
+                            <code>MatIconButton</code>
+                            <code>MatIcon</code>
+                            <code>IconDirective</code>
                 </td>
             </tr>
 
@@ -218,12 +219,33 @@
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#hasApps" >hasApps</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
                                 <a href="#isOpen" >isOpen</a>
                             </li>
                         </ul>
                     </td>
                 </tr>
 
+                <tr>
+                    <td class="col-md-4">
+                        <h6><b>Methods</b></h6>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Public</span>
+                                <a href="#toggle" >toggle</a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
 
 
 
@@ -233,84 +255,56 @@
     </table>
 </section>
 
-    <section data-compodoc="block-constructor">
-    <h3 id="constructor">Constructor</h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-<code>constructor(grid: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>, appUrlService: <a href="../injectables/AppUrlService.html" target="_self">AppUrlService</a>, authenticationService: RxapAuthenticationService)</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/header/apps-button/apps-button.component.ts:51</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>grid</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>appUrlService</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="../injectables/AppUrlService.html" target="_self" >AppUrlService</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>authenticationService</td>
-                                                  
-                                                        <td>
-                                                                    <code>RxapAuthenticationService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
 
 
 
+    <section data-compodoc="block-methods">
+    
+    <h3 id="methods">
+        Methods
+    </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="toggle"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                        <span ><b>toggle</b></span>
+                        <a href="#toggle"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                        <span class="modifier-icon icon ion-ios-reset"></span>
+                    <code>toggle()</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/apps-button/apps-button.component.ts:46</a></div>
+                        </td>
+                    </tr>
+
+
+            <tr>
+                <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" >void</a></code>
 
+                        </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</section>
     <section data-compodoc="block-properties">
     
     <h3 id="inputs">
@@ -331,12 +325,39 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>signal&lt;Array&lt;ExternalApps&gt;&gt;([])</code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.externalAppsService.activeAppList())</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="49" class="link-to-prism">src/lib/header/apps-button/apps-button.component.ts:49</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>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="hasApps"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>hasApps</b></span>
+                        <a href="#hasApps"><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.appList().length &gt; 0)</code>
+                    </td>
+                </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>
                         </td>
                     </tr>
 
@@ -350,6 +371,7 @@
                     <a name="isOpen"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
                         <span ><b>isOpen</b></span>
                         <a href="#isOpen"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -357,15 +379,21 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
+                        <i>Default value : </i><code>signal(false)</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/lib/header/apps-button/apps-button.component.ts:47</a></div>
+                                <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>
                         </td>
                     </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The signal that indicates if the app list is open</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -375,36 +403,24 @@
 
 
     <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 { NgOptimizedImage } from &#x27;@angular/common&#x27;;
+import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
-  OnDestroy,
+  computed,
+  inject,
   OnInit,
-  Optional,
   signal,
 } from &#x27;@angular/core&#x27;;
-import { RXAP_LAYOUT_APPS_GRID } from &#x27;../../tokens&#x27;;
-import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
-import { MatButtonModule } from &#x27;@angular/material/button&#x27;;
-import {
-  NgFor,
-  NgIf,
-  NgOptimizedImage,
-} from &#x27;@angular/common&#x27;;
-import {
-  AppUrlService,
-  ExternalApps,
-} from &#x27;../../app-url.service&#x27;;
-import { RxapAuthenticationService } from &#x27;@rxap/authentication&#x27;;
-import {
-  Subscription,
-  switchMap,
-} from &#x27;rxjs&#x27;;
 import {
-  filter,
-  tap,
-} from &#x27;rxjs/operators&#x27;;
+  MatAnchor,
+  MatButton,
+  MatIconButton,
+} from &#x27;@angular/material/button&#x27;;
+import { MatIcon } from &#x27;@angular/material/icon&#x27;;
+import { RouterLink } from &#x27;@angular/router&#x27;;
+import { IconDirective } from &#x27;@rxap/material-directives/icon&#x27;;
+import { ExternalAppsService } from &#x27;../../external-apps.service&#x27;;
 
 @Component({
   selector: &#x27;rxap-apps-button&#x27;,
@@ -413,38 +429,31 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
-    MatButtonModule,
-    MatIconModule,
     NgOptimizedImage,
+    MatButton,
+    RouterLink,
+    MatAnchor,
+    MatIconButton,
+    MatIcon,
+    IconDirective,
   ],
 })
-export class AppsButtonComponent implements OnInit, OnDestroy {
-  public isOpen &#x3D; false;
-
-  public readonly appList &#x3D; signal&lt;Array&lt;ExternalApps&gt;&gt;([]);
-
-  private _subscription?: Subscription;
-
-  constructor(
-    @Optional()
-    @Inject(RXAP_LAYOUT_APPS_GRID)
-      grid: any,
-    private readonly appUrlService: AppUrlService,
-    private readonly authenticationService: RxapAuthenticationService,
-  ) {}
-
-  ngOnInit() {
-    this._subscription &#x3D; this.authenticationService.isAuthenticated$.pipe(
-      filter(Boolean),
-      switchMap(() &#x3D;&gt; this.appUrlService.getAppList()),
-      tap((apps) &#x3D;&gt; this.appList.set(apps)),
-    ).subscribe();
+export class AppsButtonComponent implements OnInit {
+  /**
+   * The signal that indicates if the app list is open
+   */
+  public readonly isOpen &#x3D; signal(false);
+
+  private 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);
+
+  public toggle(): void {
+    this.isOpen.update(isOpen &#x3D;&gt; !isOpen);
   }
 
-  ngOnDestroy() {
-    this._subscription?.unsubscribe();
+  public ngOnInit(): void {
+    this.externalAppsService.getAppList();
   }
 
 }
@@ -452,26 +461,61 @@ export class AppsButtonComponent implements OnInit, OnDestroy {
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;div *ngIf&#x3D;&quot;appList()?.length&quot; class&#x3D;&quot;flex flex-row items-center gap-8&quot;&gt;
-
-  &lt;div *ngIf&#x3D;&quot;isOpen&quot; class&#x3D;&quot;flex flex-row items-center gap-6&quot;&gt;
-
-    &lt;div *ngFor&#x3D;&quot;let app of appList()&quot; class&#x3D;&quot;h-10&quot;&gt;
-      &lt;a [href]&#x3D;&quot;app.href&quot; mat-stroked-button&gt;
-        &lt;span class&#x3D;&quot;flex flex-row items-center gap-4&quot;&gt;
-          &lt;img *ngIf&#x3D;&quot;app.image&quot; [alt]&#x3D;&quot;app.label&quot; [ngSrc]&#x3D;&quot;app.image&quot; height&#x3D;&quot;40&quot; width&#x3D;&quot;40&quot;&gt;
-          &lt;span class&#x3D;&quot;label grow-0&quot;&gt;{{app.label}}&lt;/span&gt;
-        &lt;/span&gt;
-      &lt;/a&gt;
-    &lt;/div&gt;
+        <pre class="line-numbers"><code class="language-html">@if (hasApps()) {
+  &lt;div class&#x3D;&quot;flex flex-row items-center gap-8&quot;&gt;
+
+    @if (isOpen()) {
+      &lt;div class&#x3D;&quot;flex flex-row items-center gap-6 h-10&quot;&gt;
+
+        @for (app of appList(); track app.label) {
+          @if (app.href) {
+            &lt;a [href]&#x3D;&quot;app.href&quot; [target]&#x3D;&quot;app.target ?? &#x27;_self&#x27;&quot; mat-stroked-button&gt;
+              &lt;span class&#x3D;&quot;flex flex-row items-center gap-4&quot;&gt;
+                @if (app.icon) {
+                  &lt;mat-icon [rxapIcon]&#x3D;&quot;app.icon&quot;&gt;&lt;/mat-icon&gt;
+                }
+                @if (app.image) {
+                  &lt;img [alt]&#x3D;&quot;app.label&quot; [ngSrc]&#x3D;&quot;app.image&quot; height&#x3D;&quot;40&quot; width&#x3D;&quot;40&quot;&gt;
+                }
+                &lt;span class&#x3D;&quot;label grow-0&quot;&gt;{{ app.label }}&lt;/span&gt;
+              &lt;/span&gt;
+            &lt;/a&gt;
+          } @else if (app.routerLink) {
+            &lt;a mat-stroked-button [routerLink]&#x3D;&quot;app.routerLink&quot;&gt;
+              &lt;span class&#x3D;&quot;flex flex-row items-center gap-4&quot;&gt;
+                @if (app.icon) {
+                  &lt;mat-icon [rxapIcon]&#x3D;&quot;app.icon&quot;&gt;&lt;/mat-icon&gt;
+                }
+                @if (app.image) {
+                  &lt;img [alt]&#x3D;&quot;app.label&quot; [ngSrc]&#x3D;&quot;app.image&quot; height&#x3D;&quot;40&quot; width&#x3D;&quot;40&quot;&gt;
+                }
+                &lt;span class&#x3D;&quot;label grow-0&quot;&gt;{{ app.label }}&lt;/span&gt;
+              &lt;/span&gt;
+            &lt;/a&gt;
+          } @else {
+            &lt;button mat-stroked-button [disabled]&#x3D;&quot;true&quot;&gt;
+              &lt;span class&#x3D;&quot;flex flex-row items-center gap-4&quot;&gt;
+                @if (app.icon) {
+                  &lt;mat-icon [rxapIcon]&#x3D;&quot;app.icon&quot;&gt;&lt;/mat-icon&gt;
+                }
+                @if (app.image) {
+                  &lt;img [alt]&#x3D;&quot;app.label&quot; [ngSrc]&#x3D;&quot;app.image&quot; height&#x3D;&quot;40&quot; width&#x3D;&quot;40&quot;&gt;
+                }
+                &lt;span class&#x3D;&quot;label grow-0&quot;&gt;{{ app.label }}&lt;/span&gt;
+              &lt;/span&gt;
+            &lt;/button&gt;
+          }
+        }
+
+      &lt;/div&gt;
+    }
+
+    &lt;button (click)&#x3D;&quot;toggle()&quot; mat-icon-button&gt;
+      &lt;mat-icon svgIcon&#x3D;&quot;apps&quot;&gt;&lt;/mat-icon&gt;
+    &lt;/button&gt;
 
   &lt;/div&gt;
-
-  &lt;button (click)&#x3D;&quot;isOpen &#x3D; !isOpen&quot; mat-icon-button&gt;
-    &lt;mat-icon svgIcon&#x3D;&quot;apps&quot;&gt;&lt;/mat-icon&gt;
-  &lt;/button&gt;
-
-&lt;/div&gt;
+}
 </code></pre>
     </div>
 
@@ -507,9 +551,9 @@ export class AppsButtonComponent implements OnInit, OnDestroy {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div *ngIf="appList()?.length" class="flex flex-row items-center gap-8">  <div *ngIf="isOpen" class="flex flex-row items-center gap-6">    <div *ngFor="let app of appList()" class="h-10">      <a [href]="app.href" mat-stroked-button>        <span class="flex flex-row items-center gap-4">          <img *ngIf="app.image" [alt]="app.label" [ngSrc]="app.image" height="40" width="40">          <span class="label grow-0">{{app.label}}</span>        </span>      </a>    </div>  </div>  <button (click)="isOpen = !isOpen" mat-icon-button>    <mat-icon svgIcon="apps"></mat-icon>  </button></div></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>@if (hasApps()) {  <div class="flex flex-row items-center gap-8">    @if (isOpen()) {      <div class="flex flex-row items-center gap-6 h-10">        @for (app of appList(); track app.label) {          @if (app.href) {            <a [href]="app.href" [target]="app.target ?? \'_self\'" mat-stroked-button>              <span class="flex flex-row items-center gap-4">                @if (app.icon) {                  <mat-icon [rxapIcon]="app.icon"></mat-icon>                }                @if (app.image) {                  <img [alt]="app.label" [ngSrc]="app.image" height="40" width="40">                }                <span class="label grow-0">{{ app.label }}</span>              </span>            </a>          } @else if (app.routerLink) {            <a mat-stroked-button [routerLink]="app.routerLink">              <span class="flex flex-row items-center gap-4">                @if (app.icon) {                  <mat-icon [rxapIcon]="app.icon"></mat-icon>                }                @if (app.image) {                  <img [alt]="app.label" [ngSrc]="app.image" height="40" width="40">                }                <span class="label grow-0">{{ app.label }}</span>              </span>            </a>          } @else {            <button mat-stroked-button [disabled]="true">              <span class="flex flex-row items-center gap-4">                @if (app.icon) {                  <mat-icon [rxapIcon]="app.icon"></mat-icon>                }                @if (app.image) {                  <img [alt]="app.label" [ngSrc]="app.image" height="40" width="40">                }                <span class="label grow-0">{{ app.label }}</span>              </span>            </button>          }        }      </div>    }    <button (click)="toggle()" mat-icon-button>      <mat-icon svgIcon="apps"></mat-icon>    </button>  </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': 'AppsButtonComponent'};
 </script>
 <script src="../js/tree.js"></script>