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

package/compodoc/components/FooterComponent.html

@@ -161,11 +161,8 @@
             <tr>
                 <td class="col-md-3">imports</td>
                 <td class="col-md-9">
-                            <code>NgIf</code>
                             <code>MatToolbarModule</code>
-                            <code>NgFor</code>
                             <code>PortalModule</code>
-                            <code>AsyncPipe</code>
                 </td>
             </tr>
 
@@ -207,7 +204,12 @@
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#footerService" >footerService</a>
+                                <a href="#hasPortals" >hasPortals</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#portals" >portals</a>
                             </li>
                         </ul>
                     </td>
@@ -222,54 +224,6 @@
     </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(footerService: FooterService)</code>
-                    </td>
-                </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/lib/footer/footer.component.ts:22</a></div>
-                            </td>
-                        </tr>
-
-                <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>footerService</td>
-                                                  
-                                                        <td>
-                                                                    <code>FooterService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
 
 
@@ -285,24 +239,50 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="footerService"></a>
+                    <a name="hasPortals"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>footerService</b></span>
-                        <a href="#footerService"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>hasPortals</b></span>
+                        <a href="#hasPortals"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>FooterService</code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.portals().length &gt; 0)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/lib/footer/footer.component.ts:24</a></div>
+                        </td>
+                    </tr>
 
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="portals"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>portals</b></span>
+                        <a href="#portals"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.footerService.portals())</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/lib/footer/footer.component.ts:25</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/lib/footer/footer.component.ts:23</a></div>
                         </td>
                     </tr>
 
@@ -315,18 +295,15 @@
 
 
     <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 { PortalModule } from &#x27;@angular/cdk/portal&#x27;;
+import {
   ChangeDetectionStrategy,
   Component,
+  computed,
+  inject,
 } from &#x27;@angular/core&#x27;;
-import { FooterService } from &#x27;@rxap/services&#x27;;
-import { PortalModule } from &#x27;@angular/cdk/portal&#x27;;
 import { MatToolbarModule } from &#x27;@angular/material/toolbar&#x27;;
-import {
-  AsyncPipe,
-  NgFor,
-  NgIf,
-} from &#x27;@angular/common&#x27;;
+import { FooterService } from &#x27;../footer.service&#x27;;
 
 @Component({
   selector: &#x27;rxap-footer&#x27;,
@@ -334,27 +311,29 @@ import {
   styleUrls: [ &#x27;./footer.component.scss&#x27; ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [ NgIf, MatToolbarModule, NgFor, PortalModule, AsyncPipe ],
+  imports: [ MatToolbarModule, PortalModule ],
 })
 export class FooterComponent {
 
-  constructor(
-    public readonly footerService: FooterService,
-  ) {
-  }
+  private 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);
 
 }
 </code></pre>
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;ng-template [ngIf]&#x3D;&quot;footerService.portals()&quot; let-portals&gt;
-  &lt;mat-toolbar *ngIf&#x3D;&quot;portals.length&quot; class&#x3D;&quot;footer mat-elevation-z1&quot;&gt;
-    &lt;mat-toolbar-row *ngFor&#x3D;&quot;let portal of portals&quot;&gt;
-      &lt;ng-template [cdkPortalOutlet]&#x3D;&quot;portal&quot;&gt;&lt;/ng-template&gt;
-    &lt;/mat-toolbar-row&gt;
+        <pre class="line-numbers"><code class="language-html">@if (hasPortals()) {
+  &lt;mat-toolbar class&#x3D;&quot;mat-elevation-z1&quot;&gt;
+    @for (portal of portals(); track portal) {
+      &lt;mat-toolbar-row&gt;
+        &lt;ng-template [cdkPortalOutlet]&#x3D;&quot;portal&quot;&gt;&lt;/ng-template&gt;
+      &lt;/mat-toolbar-row&gt;
+    }
   &lt;/mat-toolbar&gt;
-&lt;/ng-template&gt;
+}
 </code></pre>
     </div>
 
@@ -390,9 +369,9 @@ export class FooterComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><ng-template [ngIf]="footerService.portals()" let-portals>  <mat-toolbar *ngIf="portals.length" class="footer mat-elevation-z1">    <mat-toolbar-row *ngFor="let portal of portals">      <ng-template [cdkPortalOutlet]="portal"></ng-template>    </mat-toolbar-row>  </mat-toolbar></ng-template></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 (hasPortals()) {  <mat-toolbar class="mat-elevation-z1">    @for (portal of portals(); track portal) {      <mat-toolbar-row>        <ng-template [cdkPortalOutlet]="portal"></ng-template>      </mat-toolbar-row>    }  </mat-toolbar>}</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': 'FooterComponent'};
 </script>
 <script src="../js/tree.js"></script>