@rxap/layout 18.1.0-dev.2 → 18.1.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [18.1.0](https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.3...@rxap/layout@18.1.0) (2024-06-28)
+
+**Note:** Version bump only for package @rxap/layout
+
+# [18.1.0-dev.3](https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.2...@rxap/layout@18.1.0-dev.3) (2024-06-25)
+
+**Note:** Version bump only for package @rxap/layout
+
 # [18.1.0-dev.2](https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.1...@rxap/layout@18.1.0-dev.2) (2024-06-25)
 
 **Note:** Version bump only for package @rxap/layout

package/README.md

@@ -19,7 +19,7 @@ yarn add @rxap/layout
 ```
 **Install peer dependencies:**
 ```bash
-yarn add @angular/animations@^18.0.1 @angular/cdk@^18.0.0 @angular/common@^18.0.1 @angular/core@^18.0.1 @angular/material@^18.0.0 @angular/router@^18.0.1 @rxap/browser-utilities@^1.1.4-dev.1 @rxap/config@^18.1.1-dev.3 @rxap/environment@^18.0.3-dev.2 @rxap/material-directives@^18.0.3-dev.1 @rxap/ngx-pub-sub@^18.0.3-dev.1 @rxap/ngx-theme@^18.0.3-dev.1 @rxap/ngx-user@^18.0.3-dev.2 @rxap/pattern@^1.1.5-dev.1 @rxap/utilities@^16.2.4-dev.1 rxjs@^7.8.1 
+yarn add @angular/animations@^18.0.1 @angular/cdk@^18.0.0 @angular/common@^18.0.1 @angular/core@^18.0.1 @angular/material@^18.0.0 @angular/router@^18.0.1 @rxap/browser-utilities@^1.1.4-dev.1 @rxap/config@^18.1.1-dev.4 @rxap/environment@^18.0.3-dev.2 @rxap/material-directives@^18.0.3-dev.1 @rxap/ngx-pub-sub@^18.0.3-dev.2 @rxap/ngx-theme@^18.0.3-dev.1 @rxap/ngx-user@^18.0.3-dev.2 @rxap/pattern@^1.1.5-dev.1 @rxap/utilities@^16.2.4-dev.1 rxjs@^7.8.1 
 ```
 **Execute the init generator:**
 ```bash

package/compodoc/changelog.html

@@ -85,6 +85,10 @@
 <h1>Change Log</h1>
 <p>All notable changes to this project will be documented in this file.
 See <a href="https://conventionalcommits.org">Conventional Commits</a> for commit guidelines.</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.3...@rxap/layout@18.1.0">18.1.0</a> (2024-06-28)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.2...@rxap/layout@18.1.0-dev.3">18.1.0-dev.3</a> (2024-06-25)</h1>
+<p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
 <h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.1...@rxap/layout@18.1.0-dev.2">18.1.0-dev.2</a> (2024-06-25)</h1>
 <p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
 <h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.0...@rxap/layout@18.1.0-dev.1">18.1.0-dev.1</a> (2024-06-25)</h1>

package/compodoc/components/BaseLayoutComponent.html

@@ -220,11 +220,9 @@ export class BaseLayoutComponent {}
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;flex flex-col h-screen justify-between&quot;&gt;
-  &lt;rxap-header class&#x3D;&quot;z-10 w-full fixed top-0&quot;&gt;&lt;/rxap-header&gt;
-  &lt;ng-content&gt;&lt;/ng-content&gt;
-  &lt;rxap-footer class&#x3D;&quot;z-10 w-full fixed bottom-0&quot;&gt;&lt;/rxap-footer&gt;
-&lt;/div&gt;
+        <pre class="line-numbers"><code class="language-html">&lt;rxap-header class&#x3D;&quot;z-10 w-full fixed top-0&quot;&gt;&lt;/rxap-header&gt;
+&lt;ng-content&gt;&lt;/ng-content&gt;
+&lt;rxap-footer class&#x3D;&quot;z-10 w-full fixed bottom-0&quot;&gt;&lt;/rxap-footer&gt;
 </code></pre>
     </div>
 
@@ -254,7 +252,7 @@ export class BaseLayoutComponent {}
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div class="flex flex-col h-screen justify-between">  <rxap-header class="z-10 w-full fixed top-0"></rxap-header>  <ng-content></ng-content>  <rxap-footer class="z-10 w-full fixed bottom-0"></rxap-footer></div></div>'
+        var COMPONENT_TEMPLATE = '<div><rxap-header class="z-10 w-full fixed top-0"></rxap-header><ng-content></ng-content><rxap-footer class="z-10 w-full fixed bottom-0"></rxap-footer></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': 'BaseLayoutComponent'};

package/compodoc/components/LayoutComponent.html

@@ -496,26 +496,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
                 <p class="comment">
                     <code>./layout.component.scss</code>
                 </p>
-                <pre class="line-numbers"><code class="language-scss">:host {
-  .collapsable {
-
-    &amp;:not(.mat-drawer-opened) {
-      transform: translateX(calc(-100% + 64px)) !important;
-      visibility: visible !important;
-      box-shadow: inherit !important;
-      transition-property: transform;
-      transition-delay: 250ms;
-      display: flex;
-      border-right: solid 1px rgba(0, 0, 0, .12);
-    }
-
-    ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar {
-      display: none; /* Chrome, Safari, Opera*/
-    }
-
-  }
-}
-</code></pre>
+                <pre class="line-numbers"><code class="language-scss"></code></pre>
     </div>
 
     <div class="tab-pane fade " id="tree">

package/compodoc/components/MinimalLayoutComponent.html

@@ -160,6 +160,8 @@
                             <code>RouterOutlet</code>
                                 <code><a href="../components/BaseLayoutComponent.html" target="_self" >BaseLayoutComponent</a></code>
                                 <code><a href="../components/NavigationProgressBarComponent.html" target="_self" >NavigationProgressBarComponent</a></code>
+                                <code><a href="../components/HeaderComponent.html" target="_self" >HeaderComponent</a></code>
+                                <code><a href="../components/FooterComponent.html" target="_self" >FooterComponent</a></code>
                 </td>
             </tr>
 
@@ -204,12 +206,14 @@
 } from &#x27;@angular/core&#x27;;
 import { RouterOutlet } from &#x27;@angular/router&#x27;;
 import { BaseLayoutComponent } from &#x27;../base-layout/base-layout.component&#x27;;
+import { FooterComponent } from &#x27;../footer/footer.component&#x27;;
+import { HeaderComponent } from &#x27;../header/header.component&#x27;;
 import { NavigationProgressBarComponent } from &#x27;../navigation-progress-bar/navigation-progress-bar.component&#x27;;
 
 @Component({
   selector: &#x27;rxap-minimal-layout&#x27;,
   standalone: true,
-  imports: [ RouterOutlet, BaseLayoutComponent, NavigationProgressBarComponent ],
+  imports: [ RouterOutlet, BaseLayoutComponent, NavigationProgressBarComponent, HeaderComponent, FooterComponent ],
   templateUrl: &#x27;./minimal-layout.component.html&#x27;,
   styleUrl: &#x27;./minimal-layout.component.scss&#x27;,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -219,10 +223,10 @@ export class MinimalLayoutComponent {}
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;rxap-base-layout&gt;
-  &lt;rxap-navigation-progress-bar&gt;&lt;/rxap-navigation-progress-bar&gt;
-  &lt;router-outlet&gt;&lt;/router-outlet&gt;
-&lt;/rxap-base-layout&gt;
+        <pre class="line-numbers"><code class="language-html">&lt;rxap-header class&#x3D;&quot;z-10 w-full fixed top-0&quot;&gt;&lt;/rxap-header&gt;
+&lt;rxap-navigation-progress-bar&gt;&lt;/rxap-navigation-progress-bar&gt;
+&lt;router-outlet&gt;&lt;/router-outlet&gt;
+&lt;rxap-footer class&#x3D;&quot;z-10 w-full fixed bottom-0&quot;&gt;&lt;/rxap-footer&gt;
 </code></pre>
     </div>
 
@@ -252,7 +256,7 @@ export class MinimalLayoutComponent {}
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><rxap-base-layout>  <rxap-navigation-progress-bar></rxap-navigation-progress-bar>  <router-outlet></router-outlet></rxap-base-layout></div>'
+        var COMPONENT_TEMPLATE = '<div><rxap-header class="z-10 w-full fixed top-0"></rxap-header><rxap-navigation-progress-bar></rxap-navigation-progress-bar><router-outlet></router-outlet><rxap-footer class="z-10 w-full fixed bottom-0"></rxap-footer></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': 'MinimalLayoutComponent'};

package/compodoc/components/SidenavComponent.html

@@ -923,71 +923,6 @@ export class SidenavComponent {
 
   }
 }
-
-
-.rxap-container {
-  height: 100%;
-
-  .inner {
-    height: 100%;
-
-    .header {
-      padding-bottom: 12px;
-    }
-
-    .footer {
-      padding-top: 12px;
-    }
-
-    .nav-container {
-      overflow-y: scroll;
-      padding-top: 12px;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      /* Track */
-      &::-webkit-scrollbar-track {
-        border-radius: 2px;
-      }
-
-      /* Handle */
-      &::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-      }
-
-    }
-
-
-  }
-
-  .sidebar-toggle {
-    min-height: 48px;
-
-    .sidebar-toggle-inner {
-      padding: 0 0;
-    }
-
-    .arrow {
-      transform: rotate(180deg);
-    }
-
-    &.collapsed {
-
-      .arrow {
-        transform: initial;
-      }
-
-      .sidebar-toggle-inner {
-        justify-content: space-around !important;
-      }
-
-    }
-
-  }
-
-}
 </code></pre>
     </div>
 

package/compodoc/dependencies.html

@@ -127,13 +127,13 @@
         <li>
             <b>@rxap/browser-utilities</b> : ^1.1.4-dev.1</li>
         <li>
-            <b>@rxap/config</b> : ^18.1.1-dev.3</li>
+            <b>@rxap/config</b> : ^18.1.1-dev.4</li>
         <li>
             <b>@rxap/environment</b> : ^18.0.3-dev.2</li>
         <li>
             <b>@rxap/material-directives</b> : ^18.0.3-dev.1</li>
         <li>
-            <b>@rxap/ngx-pub-sub</b> : ^18.0.3-dev.1</li>
+            <b>@rxap/ngx-pub-sub</b> : ^18.0.3-dev.2</li>
         <li>
             <b>@rxap/ngx-theme</b> : ^18.0.3-dev.1</li>
         <li>

package/compodoc/index.html

@@ -97,7 +97,7 @@
 <h1>Installation</h1>
 <p><strong>Add the package to your workspace:</strong></p>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn add &#64;rxap/layout</code></pre></div><p><strong>Install peer dependencies:</strong></p>
-<b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn add &#64;angular/animations&#64;^18.0.1 &#64;angular/cdk&#64;^18.0.0 &#64;angular/common&#64;^18.0.1 &#64;angular/core&#64;^18.0.1 &#64;angular/material&#64;^18.0.0 &#64;angular/router&#64;^18.0.1 &#64;rxap/browser-utilities&#64;^1.1.4-dev.1 &#64;rxap/config&#64;^18.1.1-dev.3 &#64;rxap/environment&#64;^18.0.3-dev.2 &#64;rxap/material-directives&#64;^18.0.3-dev.1 &#64;rxap/ngx-pub-sub&#64;^18.0.3-dev.1 &#64;rxap/ngx-theme&#64;^18.0.3-dev.1 &#64;rxap/ngx-user&#64;^18.0.3-dev.2 &#64;rxap/pattern&#64;^1.1.5-dev.1 &#64;rxap/utilities&#64;^16.2.4-dev.1 rxjs&#64;^7.8.1 </code></pre></div><p><strong>Execute the init generator:</strong></p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn add &#64;angular/animations&#64;^18.0.1 &#64;angular/cdk&#64;^18.0.0 &#64;angular/common&#64;^18.0.1 &#64;angular/core&#64;^18.0.1 &#64;angular/material&#64;^18.0.0 &#64;angular/router&#64;^18.0.1 &#64;rxap/browser-utilities&#64;^1.1.4-dev.1 &#64;rxap/config&#64;^18.1.1-dev.4 &#64;rxap/environment&#64;^18.0.3-dev.2 &#64;rxap/material-directives&#64;^18.0.3-dev.1 &#64;rxap/ngx-pub-sub&#64;^18.0.3-dev.2 &#64;rxap/ngx-theme&#64;^18.0.3-dev.1 &#64;rxap/ngx-user&#64;^18.0.3-dev.2 &#64;rxap/pattern&#64;^1.1.5-dev.1 &#64;rxap/utilities&#64;^16.2.4-dev.1 rxjs&#64;^7.8.1 </code></pre></div><p><strong>Execute the init generator:</strong></p>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-bash">yarn nx g &#64;rxap/layout:init</code></pre></div><h1>Get started</h1>
 <h2>Layout</h2>
 <p>Create a new file <code>layout.routes.ts</code> in the <code>app</code> folder. This file will contain all child routes that should be loaded within the layout component.</p>