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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [18.1.0-dev.1](https://gitlab.com/rxap/packages/compare/@rxap/layout@18.1.0-dev.0...@rxap/layout@18.1.0-dev.1) (2024-06-25)
+
+### Features
+
+- support static external apps ([c005399](https://gitlab.com/rxap/packages/commit/c005399314a3d7131d4bee429fc9ce85f92d87d5))
+
+# [18.1.0-dev.0](https://gitlab.com/rxap/packages/compare/@rxap/layout@18.0.3-dev.1...@rxap/layout@18.1.0-dev.0) (2024-06-24)
+
+### Bug Fixes
+
+- move language selector ([8cfbe0d](https://gitlab.com/rxap/packages/commit/8cfbe0ddc8417caa955dbe22dd5e85976149de51))
+
+### Features
+
+- add signal ([8f9e868](https://gitlab.com/rxap/packages/commit/8f9e8680e17e1a21a74a157516928b4b871561f9))
+- support custom settings components ([9349248](https://gitlab.com/rxap/packages/commit/9349248f0e64e314e4a1daffa4de835eb48c4d5c))
+- support router link for app buttons ([51b7502](https://gitlab.com/rxap/packages/commit/51b75025338d76cbdbfbc2f9654181b47fef122f))
+
 ## [18.0.3-dev.1](https://gitlab.com/rxap/packages/compare/@rxap/layout@18.0.3-dev.0...@rxap/layout@18.0.3-dev.1) (2024-06-21)
 
 **Note:** Version bump only for package @rxap/layout

package/README.md

@@ -8,6 +8,7 @@
 ![NPM](https://img.shields.io/npm/l/@rxap/layout)
 
 - [Installation](#installation)
+- [Get started](#get-started)
 - [Generators](#generators)
 
 # Installation
@@ -18,12 +19,277 @@ 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/forms@^18.0.1 @angular/material@^18.0.0 @angular/router@^18.0.1 @rxap/authentication@^18.0.3-dev.0 @rxap/authorization@^18.0.3-dev.0 @rxap/browser-utilities@^1.1.4-dev.0 @rxap/config@^18.1.1-dev.0 @rxap/data-source@^18.1.1-dev.0 @rxap/directives@^18.0.3-dev.0 @rxap/environment@^18.0.3-dev.0 @rxap/icon@^18.0.3-dev.0 @rxap/material-directives@^18.0.3-dev.0 @rxap/ngx-changelog@^18.0.3-dev.0 @rxap/ngx-localize@^18.0.3-dev.0 @rxap/ngx-status-check@^18.0.3-dev.0 @rxap/ngx-theme@^18.0.3-dev.0 @rxap/ngx-user@^18.0.3-dev.0 @rxap/services@^18.0.3-dev.0 @rxap/utilities@^16.2.4-dev.0 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.2 @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.1 @rxap/pattern@^1.1.5-dev.1 @rxap/utilities@^16.2.4-dev.1 rxjs@^7.8.1 
 ```
 **Execute the init generator:**
 ```bash
 yarn nx g @rxap/layout:init
 ```
+# Get started
+
+## Layout
+
+Create a new file `layout.routes.ts` in the `app` folder. This file will contain all child routes that should be loaded within the layout component.
+
+```typescript
+import { LayoutComponent, provideLayout } from '@rxap/layout';
+
+const ROUTES: Route[] = [
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [ ],
+    providers: [ provideLayout() ],
+  },
+];
+```
+
+Import the layout routes into the `app.routes.ts` file.
+
+```typescript
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    loadChildren: () => import('./layout.routes'),
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];
+```
+
+## Navigation
+
+Create a new file `app.navigation.ts` in the `app` folder. This file will contain the navigation items that should be displayed in the layout component.
+
+```typescript
+export const APP_NAVIGATION: () => NavigationWithInserts = () => [];
+```
+
+Provide the app navigation in the layout routes:
+
+```typescript
+import {
+  LayoutComponent,
+  ProvideNavigationConfig,
+  withNavigationService,
+} from '@rxap/layout';
+import { APP_NAVIGATION } from './app.navigation';
+
+const ROUTES: Route[] = [
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [ ],
+    providers: [
+      provideLayout(
+        withNavigationConfig(APP_NAVIGATION),
+      ),
+    ],
+  },
+];
+```
+
+### Navigation Item
+
+A navigation item represents a single item in the navigation sidebar. Each item has the required properties `label` and `routerLink`. The `label` property is the text that should be displayed in the sidebar. The `routerLink` property is the path that should be navigated to when the item is clicked.
+
+```typescript
+const item: NavigationItem = {
+  label: 'Home',
+  routerLink: '/',
+};
+```
+
+With the `children` property, a navigation item can have child items. The child items are displayed in a dropdown menu when the parent item is clicked.
+
+```typescript
+const item: NavigationItem = {
+  label: 'Home',
+  routerLink: '/',
+  children: [
+    {
+      label: 'Child',
+      routerLink: '/child',
+    },
+  ],
+};
+```
+
+#### Icon Property
+
+With the `icon` property, the item can be assigned an icon. The icon is displayed to the left of the label. If the navigation sidebar is collapsed, only the icon is displayed.
+
+```typescript
+const item: NavigationItem = {
+  label: 'Home',
+  routerLink: '/',
+  icon: { icon: 'home' },
+};
+```
+
+#### Status Property
+
+With the `status` property, a injectable token, class or function can be assigned to the item. The object must have the method `isVisible` which returns a boolean. If the method returns `false`, the item is not displayed in the navigation sidebar.
+
+```typescript
+@Injectable()
+class SetNavStatus {
+  isVisible(item: NavigationItem): boolean {
+    return false;
+  }
+}
+
+const item: NavigationItem = {
+  label: 'Home',
+  routerLink: '/',
+  status: SetNavStatus,
+};
+```
+
+### Navigation Divider Item
+
+A navigation divider item is a horizontal line that separates navigation items. It is used to group items in the navigation sidebar. It is required to set the property `divider` to `true`. With the optional property `title`, a title can be defined that is displayed below the divider.
+
+```typescript
+const item: NavigationDividerItem = {
+  divider: true,
+  title: 'Group',
+};
+```
+
+### Navigation Insert Item (WIP)
+
+A navigation insert item is a placeholder for a navigation item that should be inserted into the navigation sidebar. 
+The item is used to define where a dynamic navigation should be inserted. The `insert` property is the key that is used 
+identify the insert item. The `insert` property is required.
+
+```typescript
+const item: NavigationInsertItem = {
+  insert: 'insert-key',
+};
+```
+
+## Header
+
+The header is composed of the components from left to right: AppsButtonComponent, SettingsButtonComponent and UserProfileIconComponent.
+
+### Apps Button
+
+The apps buttons allow for a navigation between different applications. To configure the apps button, the config path 
+`navigation.apps` must be set with an array of object with the property `title` and ether `routerLink` or `href`. If the
+property `href` is set, the link is opened in a new tab. If the property `routerLink` the router is used to navigate.
+
+```json
+{
+  "navigation": {
+    "apps": [
+      {
+        "title": "App 1",
+        "routerLink": ["/", "app1"]
+      },
+      {
+        "title": "App 2",
+        "href": "https://app2.com"
+      }
+    ]
+  }
+}
+```
+
+> If the application is in production mode, the current `localId` is appended to the url defined in the `href` property.
+
+### Settings Button Customization (WIP)
+
+It is possible to add custom items to the settings menu. This custom item can be a component or a configuration object.
+
+> 
+
+#### Configuration Object
+
+The action function is called when the item is clicked. It is possible to use the `inject` function to inject services.
+
+```typescript
+import {
+  LayoutComponent,
+  ProvideNavigationConfig,
+  withNavigationService,
+} from '@rxap/layout';
+import { APP_NAVIGATION } from './app.navigation';
+
+const ROUTES: Route[] = [
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [ ],
+    providers: [
+      provideLayout(
+        withNavigationConfig(APP_NAVIGATION),
+        withSettingsMenuItems(
+          {
+            label: 'Custom Item',
+            icon: { icon: 'home' },
+            action: () => inject(MatDialog).open(MyCustomDialogComponent),
+          }
+        )
+      ),
+    ],
+  },
+];
+```
+
+#### Component
+
+If a component is provided ensure the component template uses the `mat-menu-item` component:
+
+```angular17html
+<button mat-menu-item>My Custom Item</button>
+```
+
+```typescript
+import {
+  LayoutComponent,
+  ProvideNavigationConfig,
+  withNavigationService,
+} from '@rxap/layout';
+import { APP_NAVIGATION } from './app.navigation';
+
+const ROUTES: Route[] = [
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [ ],
+    providers: [
+      provideLayout(
+        withNavigationConfig(APP_NAVIGATION),
+        withSettingsMenuItems(
+          MyCustomMenuItemComponent
+        )
+      ),
+    ],
+  },
+];
+```
+
+### User Profile (WIP)
+
+...
+
+## Dynamic Footer
+
+With the directive `rxapFooter` it is possible to define a dynamic footer. When the directive is used on a `<ng-template>` in a component,
+that is rendered in the layout component, the template is rendered in the footer of the layout component.
+
+```angular17html
+<mat-card>
+  ...
+</mat-card>
+<ng-template rxapFooter>
+  <button mat-button>A button in the layout footer</button>
+</ng-template>
+```
+
 # Generators
 
 ## init

package/compodoc/changelog.html

@@ -85,6 +85,22 @@
 <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.0...@rxap/layout@18.1.0-dev.1">18.1.0-dev.1</a> (2024-06-25)</h1>
+<h3>Features</h3>
+<ul>
+<li>support static external apps (<a href="https://gitlab.com/rxap/packages/commit/c005399314a3d7131d4bee429fc9ce85f92d87d5">c005399</a>)</li>
+</ul>
+<h1><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.0.3-dev.1...@rxap/layout@18.1.0-dev.0">18.1.0-dev.0</a> (2024-06-24)</h1>
+<h3>Bug Fixes</h3>
+<ul>
+<li>move language selector (<a href="https://gitlab.com/rxap/packages/commit/8cfbe0ddc8417caa955dbe22dd5e85976149de51">8cfbe0d</a>)</li>
+</ul>
+<h3>Features</h3>
+<ul>
+<li>add signal (<a href="https://gitlab.com/rxap/packages/commit/8f9e8680e17e1a21a74a157516928b4b871561f9">8f9e868</a>)</li>
+<li>support custom settings components (<a href="https://gitlab.com/rxap/packages/commit/9349248f0e64e314e4a1daffa4de835eb48c4d5c">9349248</a>)</li>
+<li>support router link for app buttons (<a href="https://gitlab.com/rxap/packages/commit/51b75025338d76cbdbfbc2f9654181b47fef122f">51b7502</a>)</li>
+</ul>
 <h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.0.3-dev.0...@rxap/layout@18.0.3-dev.1">18.0.3-dev.1</a> (2024-06-21)</h2>
 <p><strong>Note:</strong> Version bump only for package @rxap/layout</p>
 <h2><a href="https://gitlab.com/rxap/packages/compare/@rxap/layout@18.0.2...@rxap/layout@18.0.3-dev.0">18.0.3-dev.0</a> (2024-06-20)</h2>