@rxap/layout 19.0.1-dev.1 → 19.0.1-dev.12

package/docs/wiki/Class.SidenavToggleButtonComponent.md

@@ -0,0 +1,35 @@
+[@rxap/layout](../wiki/globals) / SidenavToggleButtonComponent
+
+# Class: SidenavToggleButtonComponent
+
+Defined in: [default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:21](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts#L21)
+
+## Constructors
+
+### new SidenavToggleButtonComponent()
+
+> **new SidenavToggleButtonComponent**(): [`SidenavToggleButtonComponent`](../wiki/Class.SidenavToggleButtonComponent)
+
+#### Returns
+
+[`SidenavToggleButtonComponent`](../wiki/Class.SidenavToggleButtonComponent)
+
+## Properties
+
+### opened
+
+> `readonly` **opened**: `Signal`\<`boolean`\>
+
+Defined in: [default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:25](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts#L25)
+
+## Methods
+
+### toggle()
+
+> **toggle**(): `void`
+
+Defined in: [default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts:27](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/default-header/sidenav-toggle-button/sidenav-toggle-button.component.ts#L27)
+
+#### Returns
+
+`void`

package/docs/wiki/Class.UserProfileIconComponent.md

@@ -0,0 +1,43 @@
+[@rxap/layout](../wiki/globals) / UserProfileIconComponent
+
+# Class: UserProfileIconComponent
+
+Defined in: [default-header/user-profile-icon/user-profile-icon.component.ts:27](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/default-header/user-profile-icon/user-profile-icon.component.ts#L27)
+
+## Constructors
+
+### new UserProfileIconComponent()
+
+> **new UserProfileIconComponent**(): [`UserProfileIconComponent`](../wiki/Class.UserProfileIconComponent)
+
+#### Returns
+
+[`UserProfileIconComponent`](../wiki/Class.UserProfileIconComponent)
+
+## Properties
+
+### profile
+
+> `readonly` **profile**: `InputSignal`\<`unknown`\>
+
+Defined in: [default-header/user-profile-icon/user-profile-icon.component.ts:32](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/default-header/user-profile-icon/user-profile-icon.component.ts#L32)
+
+***
+
+### username
+
+> `readonly` **username**: `Signal`\<`null` \| `string`\>
+
+Defined in: [default-header/user-profile-icon/user-profile-icon.component.ts:34](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/default-header/user-profile-icon/user-profile-icon.component.ts#L34)
+
+## Methods
+
+### logout()
+
+> **logout**(): `void`
+
+Defined in: [default-header/user-profile-icon/user-profile-icon.component.ts:42](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/default-header/user-profile-icon/user-profile-icon.component.ts#L42)
+
+#### Returns
+
+`void`

package/docs/wiki/Function.IsNavigationDividerItem.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / IsNavigationDividerItem
+
+# Function: IsNavigationDividerItem()
+
+> **IsNavigationDividerItem**(`item`): `item is NavigationDividerItem`
+
+Defined in: [navigation/navigation-item.ts:22](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L22)
+
+## Parameters
+
+### item
+
+`any`
+
+## Returns
+
+`item is NavigationDividerItem`

package/docs/wiki/Function.IsNavigationInsertItem.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / IsNavigationInsertItem
+
+# Function: IsNavigationInsertItem()
+
+> **IsNavigationInsertItem**(`item`): `item is NavigationInsertItem`
+
+Defined in: [navigation/navigation-item.ts:32](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L32)
+
+## Parameters
+
+### item
+
+`any`
+
+## Returns
+
+`item is NavigationInsertItem`

package/docs/wiki/Function.IsNavigationItem.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / IsNavigationItem
+
+# Function: IsNavigationItem()
+
+> **IsNavigationItem**(`item`): `item is NavigationItem<Navigation>`
+
+Defined in: [navigation/navigation-item.ts:56](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L56)
+
+## Parameters
+
+### item
+
+`any`
+
+## Returns
+
+`item is NavigationItem<Navigation>`

package/docs/wiki/Function.provideExternalApps.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / provideExternalApps
+
+# Function: provideExternalApps()
+
+> **provideExternalApps**(...`apps`): `Provider`[]
+
+Defined in: [provide.ts:45](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L45)
+
+## Parameters
+
+### apps
+
+...`AppsNavigationConfig`[]
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.provideLayout.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / provideLayout
+
+# Function: provideLayout()
+
+> **provideLayout**(...`additionalProviders`): `Provider`[]
+
+Defined in: [provide.ts:34](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L34)
+
+## Parameters
+
+### additionalProviders
+
+...`Provider`[]
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withDefaultHeaderComponent.md

@@ -0,0 +1,11 @@
+[@rxap/layout](../wiki/globals) / withDefaultHeaderComponent
+
+# Function: withDefaultHeaderComponent()
+
+> **withDefaultHeaderComponent**(): `Provider`
+
+Defined in: [provide.ts:132](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L132)
+
+## Returns
+
+`Provider`

package/docs/wiki/Function.withDefaultHeaderItems.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / withDefaultHeaderItems
+
+# Function: withDefaultHeaderItems()
+
+> **withDefaultHeaderItems**(...`items`): `Provider`[]
+
+Defined in: [provide.ts:96](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L96)
+
+## Parameters
+
+### items
+
+...([`DefaultHeaderItemComponent`](../wiki/TypeAlias.DefaultHeaderItemComponent) \| () => [`DefaultHeaderItemComponent`](../wiki/TypeAlias.DefaultHeaderItemComponent) \| `Promise`\<[`DefaultHeaderItemComponent`](../wiki/TypeAlias.DefaultHeaderItemComponent)\>)[]
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withFooterComponents.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / withFooterComponents
+
+# Function: withFooterComponents()
+
+> **withFooterComponents**(`components`): `Provider`[]
+
+Defined in: [provide.ts:123](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L123)
+
+## Parameters
+
+### components
+
+`ComponentType`\<`unknown`\>[]
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withHeaderComponents.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / withHeaderComponents
+
+# Function: withHeaderComponents()
+
+> **withHeaderComponents**(`components`): `Provider`[]
+
+Defined in: [provide.ts:114](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L114)
+
+## Parameters
+
+### components
+
+`ComponentType`\<`unknown`\>[]
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withNavigationConfig.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / withNavigationConfig
+
+# Function: withNavigationConfig()
+
+> **withNavigationConfig**(`config`): `Provider`[]
+
+Defined in: [provide.ts:58](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L58)
+
+## Parameters
+
+### config
+
+[`NavigationWithInserts`](../wiki/TypeAlias.NavigationWithInserts) | () => [`NavigationWithInserts`](../wiki/TypeAlias.NavigationWithInserts)
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withNavigationInserts.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / withNavigationInserts
+
+# Function: withNavigationInserts()
+
+> **withNavigationInserts**(`inserts`): `Provider`[]
+
+Defined in: [provide.ts:70](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L70)
+
+## Parameters
+
+### inserts
+
+`Record`\<`string`, [`NavigationWithInserts`](../wiki/TypeAlias.NavigationWithInserts)\>
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withReleaseInfoModules.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / withReleaseInfoModules
+
+# Function: withReleaseInfoModules()
+
+> **withReleaseInfoModules**(...`module`): `Provider`[]
+
+Defined in: [provide.ts:104](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L104)
+
+## Parameters
+
+### module
+
+...[`ReleaseInfoModule`](../wiki/Interface.ReleaseInfoModule)[]
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withSettingsMenuItems.md

@@ -0,0 +1,17 @@
+[@rxap/layout](../wiki/globals) / withSettingsMenuItems
+
+# Function: withSettingsMenuItems()
+
+> **withSettingsMenuItems**(...`items`): `Provider`[]
+
+Defined in: [provide.ts:77](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L77)
+
+## Parameters
+
+### items
+
+...([`SettingsMenuItem`](../wiki/Interface.SettingsMenuItem) \| [`SettingsMenuItemComponent`](../wiki/TypeAlias.SettingsMenuItemComponent) \| () => [`SettingsMenuItemComponent`](../wiki/TypeAlias.SettingsMenuItemComponent) \| `Promise`\<[`SettingsMenuItemComponent`](../wiki/TypeAlias.SettingsMenuItemComponent)\>)[]
+
+## Returns
+
+`Provider`[]

package/docs/wiki/Function.withUserProfileDataSource.md

@@ -0,0 +1,21 @@
+[@rxap/layout](../wiki/globals) / withUserProfileDataSource
+
+# Function: withUserProfileDataSource()
+
+> **withUserProfileDataSource**(`dataSource`, `useClass`): `Provider`
+
+Defined in: [provide.ts:139](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/provide.ts#L139)
+
+## Parameters
+
+### dataSource
+
+`Constructor`\<`DataSource`\<`unknown`, `DataSourceViewer`\>\>
+
+### useClass
+
+`boolean` = `false`
+
+## Returns
+
+`Provider`

package/docs/wiki/Home.md

@@ -0,0 +1,300 @@
+# @rxap/layout
+
+[![npm version](https://img.shields.io/npm/v/@rxap/layout?style=flat-square)](https://www.npmjs.com/package/@rxap/layout)
+[![commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](https://commitizen.github.io/cz-cli/)
+[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@rxap/layout)
+![npm](https://img.shields.io/npm/dm/@rxap/layout)
+![NPM](https://img.shields.io/npm/l/@rxap/layout)
+
+- [Installation](../wiki/#installation)
+- [Get started](../wiki/#get-started)
+- [Generators](../wiki/#generators)
+
+# Installation
+
+**Add the package to your workspace:**
+```bash
+yarn add @rxap/layout
+```
+**Install peer dependencies:**
+```bash
+yarn add @angular/animations@^19.1.3 @angular/cdk@^19.1.1 @angular/common@^19.1.3 @angular/core@^19.1.3 @angular/material@^19.1.1 @angular/router@^19.1.3 @rxap/browser-utilities@^1.1.10-dev.4 @rxap/config@^19.0.1-dev.4 @rxap/data-source@^19.0.1-dev.4 @rxap/environment@^19.0.1-dev.4 @rxap/material-directives@^19.0.1-dev.4 @rxap/ngx-pub-sub@^19.0.1-dev.4 @rxap/ngx-theme@^19.0.1-dev.4 @rxap/pattern@^1.1.11-dev.4 @rxap/utilities@^16.4.2-dev.4 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
+> Initialize the package in the workspace
+
+```bash
+yarn nx g @rxap/layout:init
+```

package/docs/wiki/Interface.NavigationDividerItem.md

@@ -0,0 +1,21 @@
+[@rxap/layout](../wiki/globals) / NavigationDividerItem
+
+# Interface: NavigationDividerItem
+
+Defined in: [navigation/navigation-item.ts:17](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L17)
+
+## Properties
+
+### divider
+
+> **divider**: `boolean`
+
+Defined in: [navigation/navigation-item.ts:18](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L18)
+
+***
+
+### title?
+
+> `optional` **title**: `string`
+
+Defined in: [navigation/navigation-item.ts:19](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L19)

package/docs/wiki/Interface.NavigationInsertItem.md

@@ -0,0 +1,13 @@
+[@rxap/layout](../wiki/globals) / NavigationInsertItem
+
+# Interface: NavigationInsertItem
+
+Defined in: [navigation/navigation-item.ts:28](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L28)
+
+## Properties
+
+### insert
+
+> **insert**: `string`
+
+Defined in: [navigation/navigation-item.ts:29](https://gitlab.com/rxap/packages/-/blob/d154f059843da9547b2cf8a851a1fa67ef976968/packages/angular/layout/src/lib/navigation/navigation-item.ts#L29)