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

package/compodoc/components/HeaderComponent.html

@@ -161,25 +161,9 @@
             <tr>
                 <td class="col-md-3">imports</td>
                 <td class="col-md-9">
-                            <code>MatToolbarModule</code>
-                            <code>NgClass</code>
-                            <code>NgIf</code>
-                            <code>MatButtonModule</code>
-                            <code>MatMenuModule</code>
-                            <code>MatIconModule</code>
-                            <code>MatFormFieldModule</code>
-                            <code>StopPropagationDirective</code>
-                            <code>MatSelectModule</code>
-                            <code>FormsModule</code>
-                            <code>MatOptionModule</code>
-                            <code>DataSourceCollectionDirective</code>
-                            <code>MatSlideToggleModule</code>
-                            <code>AsyncPipe</code>
-                                <code><a href="../components/NavigationProgressBarComponent.html" target="_self" >NavigationProgressBarComponent</a></code>
-                                <code><a href="../components/UserProfileIconComponent.html" target="_self" >UserProfileIconComponent</a></code>
-                                <code><a href="../components/AppsButtonComponent.html" target="_self" >AppsButtonComponent</a></code>
-                                <code><a href="../components/SettingsButtonComponent.html" target="_self" >SettingsButtonComponent</a></code>
-                                <code><a href="../components/SidenavToggleButtonComponent.html" target="_self" >SidenavToggleButtonComponent</a></code>
+                            <code>MatToolbar</code>
+                            <code>MatToolbarRow</code>
+                            <code>CdkPortalOutlet</code>
                 </td>
             </tr>
 
@@ -221,29 +205,17 @@
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#collapsable" >collapsable</a>
-                            </li>
-                            <li>
-                                    <span class="modifier"></span>
-                                    <span class="modifier"></span>
-                                    <span class="modifier">Public</span>
-                                <a href="#headerComponent" >headerComponent</a>
-                            </li>
-                            <li>
-                                    <span class="modifier"></span>
-                                    <span class="modifier">Public</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#headerComponentService" >headerComponentService</a>
+                                <a href="#color" >color</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#layoutComponentService" >layoutComponentService</a>
+                                <a href="#hasPortals" >hasPortals</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#opened" >opened</a>
+                                <a href="#portals" >portals</a>
                             </li>
                         </ul>
                     </td>
@@ -272,78 +244,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(headerComponentService: HeaderService, layoutComponentService: <a href="../injectables/LayoutComponentService.html" target="_self">LayoutComponentService</a>, headerComponent: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
-                    </td>
-                </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/lib/header/header.component.ts:71</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>headerComponentService</td>
-                                                  
-                                                        <td>
-                                                                    <code>HeaderService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>layoutComponentService</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="../injectables/LayoutComponentService.html" target="_self" >LayoutComponentService</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>headerComponent</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
     <section data-compodoc="block-inputs">
     <h3 id="inputs">Inputs</h3>
@@ -354,21 +254,10 @@
                         <a name="color"></a>
                         <b>color</b>
                     </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>ThemePalette</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>undefined</code>
-                    </td>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="68" class="link-to-prism">src/lib/header/header.component.ts:68</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/lib/header/header.component.ts:30</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -387,24 +276,18 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="collapsable"></a>
+                    <a name="color"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>collapsable</b></span>
-                        <a href="#collapsable"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>color</b></span>
+                        <a href="#color"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>Signal&lt;boolean&gt;</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/header/header.component.ts:70</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/lib/header/header.component.ts:30</a></div>
                         </td>
                     </tr>
 
@@ -415,72 +298,23 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="headerComponent"></a>
+                    <a name="hasPortals"></a>
                     <span class="name">
-                            <span class="modifier"></span>
-                            <span class="modifier"></span>
-                            <span class="modifier">Public</span>
-                        <span ><b>headerComponent</b></span>
-                        <a href="#headerComponent"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @Optional()<br />@Inject(RXAP_HEADER_COMPONENT)<br />
-                        </code>
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="77" class="link-to-prism">src/lib/header/header.component.ts:77</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="headerComponentService"></a>
-                    <span class="name">
-                            <span class="modifier"></span>
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>headerComponentService</b></span>
-                        <a href="#headerComponentService"><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>HeaderService</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @Inject(HeaderService)<br />
-                        </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="75" class="link-to-prism">src/lib/header/header.component.ts:75</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/lib/header/header.component.ts:35</a></div>
                         </td>
                     </tr>
 
@@ -491,52 +325,23 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="layoutComponentService"></a>
+                    <a name="portals"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>layoutComponentService</b></span>
-                        <a href="#layoutComponentService"><span class="icon ion-ios-link"></span></a>
+                        <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>Type : </i>        <code><a href="../injectables/LayoutComponentService.html" target="_self" >LayoutComponentService</a></code>
-
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.headerService.portals())</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="76" class="link-to-prism">src/lib/header/header.component.ts:76</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="opened"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                            <span class="modifier">Readonly</span>
-                        <span ><b>opened</b></span>
-                        <a href="#opened"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>Signal&lt;boolean&gt;</code>
-
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/lib/header/header.component.ts:71</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/lib/header/header.component.ts:34</a></div>
                         </td>
                     </tr>
 
@@ -549,41 +354,20 @@
 
 
     <div class="tab-pane fade  tab-source-code" id="source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
-  AsyncPipe,
-  NgClass,
-  NgIf,
-} from &#x27;@angular/common&#x27;;
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { CdkPortalOutlet } from &#x27;@angular/cdk/portal&#x27;;
 import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
-  Input,
-  Optional,
-  Signal,
+  computed,
+  inject,
+  input,
 } from &#x27;@angular/core&#x27;;
-import { FormsModule } from &#x27;@angular/forms&#x27;;
-import { MatButtonModule } from &#x27;@angular/material/button&#x27;;
+import { ThemePalette } from &#x27;@angular/material/core&#x27;;
 import {
-  MatOptionModule,
-  ThemePalette,
-} from &#x27;@angular/material/core&#x27;;
-import { MatFormFieldModule } from &#x27;@angular/material/form-field&#x27;;
-import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
-import { MatMenuModule } from &#x27;@angular/material/menu&#x27;;
-import { MatSelectModule } from &#x27;@angular/material/select&#x27;;
-import { MatSlideToggleModule } from &#x27;@angular/material/slide-toggle&#x27;;
-import { MatToolbarModule } from &#x27;@angular/material/toolbar&#x27;;
-import { DataSourceCollectionDirective } from &#x27;@rxap/data-source/directive&#x27;;
-import { StopPropagationDirective } from &#x27;@rxap/directives&#x27;;
-import { HeaderService } from &#x27;@rxap/services&#x27;;
-import { LayoutComponentService } from &#x27;../layout/layout.component.service&#x27;;
-import { RXAP_HEADER_COMPONENT } from &#x27;../tokens&#x27;;
-import { AppsButtonComponent } from &#x27;./apps-button/apps-button.component&#x27;;
-import { NavigationProgressBarComponent } from &#x27;./navigation-progress-bar/navigation-progress-bar.component&#x27;;
-import { SettingsButtonComponent } from &#x27;./settings-button/settings-button.component&#x27;;
-import { SidenavToggleButtonComponent } from &#x27;./sidenav-toggle-button/sidenav-toggle-button.component&#x27;;
-import { UserProfileIconComponent } from &#x27;./user-profile-icon/user-profile-icon.component&#x27;;
+  MatToolbar,
+  MatToolbarRow,
+} from &#x27;@angular/material/toolbar&#x27;;
+import { HeaderService } from &#x27;../header.service&#x27;;
 
 @Component({
   selector: &#x27;rxap-header&#x27;,
@@ -592,63 +376,34 @@ import { UserProfileIconComponent } from &#x27;./user-profile-icon/user-profile-
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    MatToolbarModule,
-    NgClass,
-    NgIf,
-    MatButtonModule,
-    MatMenuModule,
-    MatIconModule,
-    MatFormFieldModule,
-    StopPropagationDirective,
-    MatSelectModule,
-    FormsModule,
-    MatOptionModule,
-    DataSourceCollectionDirective,
-    MatSlideToggleModule,
-    AsyncPipe,
-    NavigationProgressBarComponent,
-    UserProfileIconComponent,
-    AppsButtonComponent,
-    SettingsButtonComponent,
-    SidenavToggleButtonComponent,
+    MatToolbar,
+    MatToolbarRow,
+    CdkPortalOutlet,
   ],
 })
 export class HeaderComponent {
 
-  @Input()
-  public color: ThemePalette &#x3D; undefined;
+  public readonly color &#x3D; input&lt;ThemePalette&gt;();
 
-  public readonly collapsable: Signal&lt;boolean&gt;;
-  public readonly opened: Signal&lt;boolean&gt;;
+  private readonly headerService &#x3D; inject(HeaderService);
 
-  constructor(
-    @Inject(HeaderService)
-    public readonly headerComponentService: HeaderService,
-    public readonly layoutComponentService: LayoutComponentService,
-    @Optional() @Inject(RXAP_HEADER_COMPONENT) public headerComponent: any,
-  ) {
-    this.collapsable &#x3D; layoutComponentService.collapsable;
-    this.opened &#x3D; layoutComponentService.opened;
-  }
+  public readonly portals &#x3D; computed(() &#x3D;&gt; this.headerService.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;mat-toolbar [color]&#x3D;&quot;color&quot; [ngClass]&#x3D;&quot;{ open: opened() }&quot; class&#x3D;&quot;mat-elevation-z3 header&quot;&gt;
-  &lt;div class&#x3D;&quot;w-full flex flex-row gap-x-4 justify-between items-center&quot;&gt;
-    &lt;rxap-sidenav-toggle-button *ngIf&#x3D;&quot;!collapsable()&quot;&gt;&lt;/rxap-sidenav-toggle-button&gt;
-    &lt;div class&#x3D;&quot;grow&quot;&gt;
-      &lt;ng-content&gt;&lt;/ng-content&gt;
-    &lt;/div&gt;
-    &lt;rxap-apps-button class&#x3D;&quot;grow-0&quot;&gt;&lt;/rxap-apps-button&gt;
-    &lt;rxap-settings-button class&#x3D;&quot;grow-0&quot;&gt;&lt;/rxap-settings-button&gt;
-    &lt;rxap-user-profile-icon class&#x3D;&quot;grow-0&quot;&gt;&lt;/rxap-user-profile-icon&gt;
-  &lt;/div&gt;
-&lt;/mat-toolbar&gt;
-
-&lt;rxap-navigation-progress-bar&gt;&lt;/rxap-navigation-progress-bar&gt;
+        <pre class="line-numbers"><code class="language-html">@if (hasPortals()) {
+  &lt;mat-toolbar [color]&#x3D;&quot;color()&quot; 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;
+}
 </code></pre>
     </div>
 
@@ -684,9 +439,9 @@ export class HeaderComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><mat-toolbar [color]="color" [ngClass]="{ open: opened() }" class="mat-elevation-z3 header">  <div class="w-full flex flex-row gap-x-4 justify-between items-center">    <rxap-sidenav-toggle-button *ngIf="!collapsable()"></rxap-sidenav-toggle-button>    <div class="grow">      <ng-content></ng-content>    </div>    <rxap-apps-button class="grow-0"></rxap-apps-button>    <rxap-settings-button class="grow-0"></rxap-settings-button>    <rxap-user-profile-icon class="grow-0"></rxap-user-profile-icon>  </div></mat-toolbar><rxap-navigation-progress-bar></rxap-navigation-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 (hasPortals()) {  <mat-toolbar [color]="color()" 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': 'HeaderComponent'};
 </script>
 <script src="../js/tree.js"></script>

package/compodoc/components/LanguageSelectorComponent.html

@@ -225,54 +225,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(language: LanguageSelectorService)</code>
-                    </td>
-                </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/lib/header/language-selector/language-selector.component.ts:34</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>language</td>
-                                                  
-                                                        <td>
-                                                                    <code>LanguageSelectorService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
 
 
@@ -299,13 +251,12 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>LanguageSelectorService</code>
-
+                        <i>Default value : </i><code>inject(LanguageSelectorService)</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/lib/header/language-selector/language-selector.component.ts:35</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/lib/header/language-selector/language-selector.component.ts:37</a></div>
                         </td>
                     </tr>
 
@@ -326,6 +277,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  inject,
 } from &#x27;@angular/core&#x27;;
 import { FormsModule } from &#x27;@angular/forms&#x27;;
 import { MatOptionModule } from &#x27;@angular/material/core&#x27;;
@@ -352,8 +304,8 @@ import { LanguageSelectorService } from &#x27;@rxap/ngx-localize&#x27;;
   ],
 })
 export class LanguageSelectorComponent {
-  constructor(public readonly language: LanguageSelectorService) {
-  }
+
+  public readonly language &#x3D; inject(LanguageSelectorService);
 
 }
 </code></pre>
@@ -430,7 +382,7 @@ export class LanguageSelectorComponent {
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
         var COMPONENT_TEMPLATE = '<div><ng-template [ngIf]="(language.languages | keyvalue).length">  <div>    <mat-form-field appearance="outline" class="language-selector" rxapStopPropagation>      <mat-label i18n>Select Language</mat-label>      <mat-select (ngModelChange)="language.setLanguage($event)" [ngModel]="language.selectedLanguage">        <mat-option *ngFor="let item of language.languages | keyvalue" [value]="item.key">{{item.value}}</mat-option>      </mat-select>    </mat-form-field>  </div></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 COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'BaseLayoutComponent', 'selector': 'rxap-base-layout'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LanguageSelectorComponent', 'selector': 'rxap-language-selector'},{'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': 'SignOutComponent', 'selector': 'rxap-sign-out'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'}];
     var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
     var ACTUAL_COMPONENT = {'name': 'LanguageSelectorComponent'};
 </script>