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

package/compodoc/components/NavigationProgressBarComponent.html

@@ -120,7 +120,7 @@
     <h3>File</h3>
 </p>
 <p class="comment">
-    <code>src/lib/header/navigation-progress-bar/navigation-progress-bar.component.ts</code>
+    <code>src/lib/navigation-progress-bar/navigation-progress-bar.component.ts</code>
 </p>
 
 
@@ -161,9 +161,7 @@
             <tr>
                 <td class="col-md-3">imports</td>
                 <td class="col-md-9">
-                            <code>NgIf</code>
-                            <code>MatProgressBarModule</code>
-                            <code>AsyncPipe</code>
+                            <code>MatProgressBar</code>
                 </td>
             </tr>
 
@@ -204,10 +202,10 @@
                         <ul class="index-list">
                             <li>
                                     <span class="modifier">Public</span>
-                                <a href="#navigating$" >navigating$</a>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#navigating" >navigating</a>
                             </li>
                             <li>
-                                    <span class="modifier"></span>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
                                 <a href="#router" >router</a>
@@ -225,55 +223,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">
-                                <span class="modifier">Public</span>
-                        <code>constructor(router: Router)</code>
-                    </td>
-                </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/lib/header/navigation-progress-bar/navigation-progress-bar.component.ts:37</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>router</td>
-                                                  
-                                                        <td>
-                                                                    <code>Router</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
 
 
@@ -289,23 +238,31 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="navigating$"></a>
+                    <a name="navigating"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
-                        <span ><b>navigating$</b></span>
-                        <a href="#navigating$"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>navigating</b></span>
+                        <a href="#navigating"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>Observable&lt;boolean&gt;</code>
-
+                        <i>Default value : </i><code>toSignal(this.router.events.pipe(
+    filter(
+      event &#x3D;&gt;
+        event instanceof NavigationStart ||
+        event instanceof NavigationEnd ||
+        event instanceof NavigationCancel,
+    ),
+    map(event &#x3D;&gt; event instanceof NavigationStart),
+  ), { initialValue: true })</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/lib/header/navigation-progress-bar/navigation-progress-bar.component.ts:37</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/lib/navigation-progress-bar/navigation-progress-bar.component.ts:33</a></div>
                         </td>
                     </tr>
 
@@ -318,7 +275,6 @@
                 <td class="col-md-4">
                     <a name="router"></a>
                     <span class="name">
-                            <span class="modifier"></span>
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
                         <span ><b>router</b></span>
@@ -328,22 +284,12 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>Router</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @Inject(Router)<br />
-                        </code>
+                        <i>Default value : </i><code>inject(Router)</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="40" class="link-to-prism">src/lib/header/navigation-progress-bar/navigation-progress-bar.component.ts:40</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/lib/navigation-progress-bar/navigation-progress-bar.component.ts:31</a></div>
                         </td>
                     </tr>
 
@@ -359,9 +305,10 @@
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
+  inject,
 } from &#x27;@angular/core&#x27;;
-import { Observable } from &#x27;rxjs&#x27;;
+import { toSignal } from &#x27;@angular/core/rxjs-interop&#x27;;
+import { MatProgressBar } from &#x27;@angular/material/progress-bar&#x27;;
 import {
   NavigationCancel,
   NavigationEnd,
@@ -372,11 +319,6 @@ import {
   filter,
   map,
 } from &#x27;rxjs/operators&#x27;;
-import { MatProgressBarModule } from &#x27;@angular/material/progress-bar&#x27;;
-import {
-  AsyncPipe,
-  NgIf,
-} from &#x27;@angular/common&#x27;;
 
 @Component({
   selector: &#x27;rxap-navigation-progress-bar&#x27;,
@@ -385,39 +327,31 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgIf,
-    MatProgressBarModule,
-    AsyncPipe,
+    MatProgressBar,
   ],
 })
 export class NavigationProgressBarComponent {
 
-  public navigating$: Observable&lt;boolean&gt;;
-
-  public constructor(
-    @Inject(Router) public readonly router: Router,
-  ) {
-    this.navigating$ &#x3D; this.router.events.pipe(
-      filter(
-        event &#x3D;&gt;
-          event instanceof NavigationStart ||
-          event instanceof NavigationEnd ||
-          event instanceof NavigationCancel,
-      ),
-      map(event &#x3D;&gt; event instanceof NavigationStart),
-    );
-  }
+  public readonly router &#x3D; inject(Router);
+
+  public readonly navigating &#x3D; toSignal(this.router.events.pipe(
+    filter(
+      event &#x3D;&gt;
+        event instanceof NavigationStart ||
+        event instanceof NavigationEnd ||
+        event instanceof NavigationCancel,
+    ),
+    map(event &#x3D;&gt; event instanceof NavigationStart),
+  ), { initialValue: true });
 
 }
 </code></pre>
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;mat-progress-bar
-  *ngIf&#x3D;&quot;navigating$ | async&quot;
-  color&#x3D;&quot;accent&quot;
-  mode&#x3D;&quot;indeterminate&quot;
-&gt;&lt;/mat-progress-bar&gt;
+        <pre class="line-numbers"><code class="language-html">@if (navigating()) {
+&lt;mat-progress-bar color&#x3D;&quot;accent&quot; mode&#x3D;&quot;indeterminate&quot;&gt;&lt;/mat-progress-bar&gt;
+}
 </code></pre>
     </div>
 
@@ -453,9 +387,9 @@ export class NavigationProgressBarComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><mat-progress-bar  *ngIf="navigating$ | async"  color="accent"  mode="indeterminate"></mat-progress-bar></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 (navigating()) {<mat-progress-bar color="accent" mode="indeterminate"></mat-progress-bar>}</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': 'NavigationProgressBarComponent'};
 </script>
 <script src="../js/tree.js"></script>