aril 0.0.44 → 0.0.46

package/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+	"extends": "../../.eslintrc.json",
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "aril",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "aril",
+						"style": "kebab-case"
+					}
+				],
+				"@angular-eslint/no-input-rename": "off",
+				"rules": {
+					"no-multiple-empty-lines": [
+						"error",
+						{
+							"max": 1,
+							"maxEOF": 0,
+							"maxBOF": 0
+						}
+					]
+				}
+			}
+		},
+		{
+			"files": ["*.html"]
+		}
+	]
+}

package/README.md

@@ -1,48 +1,48 @@
-# ARiL-UI-LIB
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.
-
-```
-> npx @angular/cli new workspace --no-create-application
-> npx ng generate library aril
-> npx ng add @angular-eslint/schematics
-> npm install prettier --save-dev
-> npx nx init
-> ng generate component button --flat --path projects/aril/ui/button/src
-```
-
-## Code Scaffolding
-
-Run `ng generate component|directive|pipe|service|class|guard|interface|enum|module --flat --path projects/aril/<subentry>/<feature>/src` to generate a new as you select.
-
-- > Note: Don't forget to add `--path` or else it will be added to the default project in your `angular.json` file.
-- > Note: subentry must be one of `boot|http|i18n|keycloak|theme|ui|util`.
-- > Note: Don't forget to add `index.ts` and `ng-package.json` for components of subentry points.
-- > Note: Don't forget to export component from `index.ts`.
-
-## Folder Scaffolding
-
-- main-entry (aril)
-  - sub-entry (boot|http|i18n|keycloak|theme|ui|util)
-    - feature (button,calendar etc.)
-      - src
-        - feature.component.ts
-        - feature.view.html
-      - index.ts
-      - ng-package.json
-    - index.ts
-    - ng-package.json
-
-## Build
-
-Run `ng build aril` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build aril`, go to the dist folder `cd dist` and run `npm publish`.
-
-> Note: Don't forget to increment the version number in `project.json` before build.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# ARiL-UI-LIB
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.
+
+```
+> npx @angular/cli new workspace --no-create-application
+> npx ng generate library aril
+> npx ng add @angular-eslint/schematics
+> npm install prettier --save-dev
+> npx nx init
+> ng generate component button --flat --path projects/aril/ui/button/src
+```
+
+## Code Scaffolding
+
+Run `ng generate component|directive|pipe|service|class|guard|interface|enum|module --flat --path projects/aril/<subentry>/<feature>/src` to generate a new as you select.
+
+- > Note: Don't forget to add `--path` or else it will be added to the default project in your `angular.json` file.
+- > Note: subentry must be one of `boot|http|i18n|keycloak|theme|ui|util`.
+- > Note: Don't forget to add `index.ts` and `ng-package.json` for components of subentry points.
+- > Note: Don't forget to export component from `index.ts`.
+
+## Folder Scaffolding
+
+- main-entry (aril)
+  - sub-entry (boot|http|i18n|keycloak|theme|ui|util)
+    - feature (button,calendar etc.)
+      - src
+        - feature.component.ts
+        - feature.view.html
+      - index.ts
+      - ng-package.json
+    - index.ts
+    - ng-package.json
+
+## Build
+
+Run `ng build aril` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build aril`, go to the dist folder `cd dist` and run `npm publish`.
+
+> Note: Don't forget to increment the version number in `project.json` before build.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/boot/config/api/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/api.service';
+export * from './src/api.service';

package/boot/config/api/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/config/api/src/api.service.ts

@@ -0,0 +1,57 @@
+import { HttpClient } from '@angular/common/http';
+import { isDevMode } from '@angular/core';
+
+import { firstValueFrom, tap } from 'rxjs';
+
+import { Apps } from 'aril/boot/config/apps';
+import { KeycloakManager } from 'aril/keycloak';
+
+import { ApiConfigsFactory } from './interfaces';
+
+export const API_CONFIGS = new ApiConfigsFactory();
+
+export function loadApiConfigs(
+	httpBackend: { httpClient: HttpClient },
+	keycloak: KeycloakManager,
+	appName: string
+): () => Promise<any> {
+	return () => {
+		const configDeps: Promise<any>[] = [];
+
+		const observable$ = httpBackend.httpClient
+			.get<ApiConfigsFactory>(isDevMode() ? './assets/local-configs/api.local.json' : './api.json')
+			.pipe(
+				tap((configs) => {
+					Object.assign(API_CONFIGS, { ...configs });
+
+					if (isDevMode()) (<any>globalThis).hostAPI = API_CONFIGS.api;
+
+					configDeps.push(keycloak.init(API_CONFIGS.keycloak));
+				})
+			);
+
+		return firstValueFrom(observable$).then(() => {
+			return Promise.all(configDeps);
+		});
+	};
+}
+
+/**
+ * micro-app cannot access its own api.json file when opened in host
+ * MNG has different controller (host, state-machine etc.)
+ */
+export function setApiConfigOnMFEMode(
+	httpBackend: { httpClient: HttpClient },
+	keycloak: KeycloakManager,
+	appName: string
+): () => void {
+	return () => {
+		if (isDevMode()) {
+			if (appName === Apps.MNG) API_CONFIGS.api = (<any>globalThis).hostAPI;
+			else API_CONFIGS.api = (<any>globalThis).hostAPI + '/' + appName + '/v1';
+		} else {
+			if (appName === Apps.MNG) API_CONFIGS.api = window.location.origin;
+			else API_CONFIGS.api = window.location.origin + '/' + appName + '/v1';
+		}
+	};
+}

package/boot/config/api/src/interfaces.ts

@@ -0,0 +1,13 @@
+export interface KeycloakConfig {
+	url: string;
+	realm: string;
+	clientId: string;
+}
+export class ApiConfigsFactory {
+	api: string = '';
+	keycloak: KeycloakConfig = {
+		url: '',
+		realm: '',
+		clientId: ''
+	};
+}

package/boot/config/apps/{index.d.ts → index.ts}

@@ -1,2 +1,2 @@
-export * from './src/apps.service';
-export * from './src/interfaces';
+export * from './src/apps.service';
+export * from './src/interfaces';

package/boot/config/apps/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/config/apps/src/apps.service.ts

@@ -0,0 +1,64 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable, inject, isDevMode } from '@angular/core';
+import { Router, Routes } from '@angular/router';
+
+import { MenuItem } from 'primeng/api';
+
+import {
+	WebComponentWrapper,
+	WebComponentWrapperOptions,
+	startsWith
+} from '@angular-architects/module-federation-tools';
+import { Observable, catchError, of, tap } from 'rxjs';
+
+import { AppMenuService } from 'aril/theme/layout';
+import { NotFoundComponent } from 'aril/util/custom_pages';
+
+import { MicroAppConfig } from './interfaces';
+import { ShadowDOMWrapperComponent } from './showdowDOMWrapper';
+
+@Injectable({ providedIn: 'root' })
+export class MicroAppService {
+	private router = inject(Router);
+	private appMenuService = inject(AppMenuService);
+
+	init(httpBackend: { httpClient: HttpClient }): () => Observable<MicroAppConfig[]> {
+		return () =>
+			httpBackend.httpClient
+				.get<MicroAppConfig[]>(isDevMode() ? './assets/local-configs/app.local.json' : './assets/app.json')
+				.pipe(
+					tap((apps: MicroAppConfig[]) => {
+						const routes = this.buildRoutes(apps);
+
+						this.router.resetConfig([...this.router.config, ...routes, { path: '**', component: NotFoundComponent }]);
+						this.setMenuItems(apps);
+					}),
+					catchError((err) => {
+						console.log('Error Micro Apps Loading', err);
+						return of();
+					})
+				);
+	}
+
+	buildRoutes(apps: MicroAppConfig[]): Routes {
+		const routes: Routes = apps.map((config) => ({
+			matcher: startsWith(config.remoteName),
+			component: config.shadowDomPassive ? WebComponentWrapper : ShadowDOMWrapperComponent,
+			data: config as WebComponentWrapperOptions
+		}));
+
+		return routes;
+	}
+
+	setMenuItems(apps: MicroAppConfig[]): void {
+		const menuItems: MenuItem[] = apps.map((config) => {
+			return {
+				label: config.remoteName,
+				icon: 'pi pi-fw pi-bars',
+				routerLink: config.remoteName
+			};
+		});
+
+		this.appMenuService.menuConfig.set({ items: menuItems });
+	}
+}

package/boot/config/apps/src/interfaces.ts

@@ -0,0 +1,27 @@
+import { RemoteConfig } from '@angular-architects/module-federation';
+
+export enum Apps {
+	THOR = 'thor',
+	CRM = 'crm',
+	WDM = 'wdm',
+	BILLING = 'billing',
+	PAYMENT = 'payment',
+	YEAP = 'yeap',
+	MD = 'md',
+	MW = 'mw',
+	LENA = 'lena',
+	HES = 'hes',
+	MTH = 'mth',
+	SIS = 'sis',
+	MNG = 'mng'
+}
+
+export type MicroAppConfig = RemoteConfig & {
+	remoteName: string;
+	exposedModule: string;
+	elementName: string;
+	shadowDomPassive?: boolean;
+	styleUrls?: string[];
+	// route: string;
+	// displayName: string;
+};

package/boot/config/apps/src/showdowDOMWrapper.ts

@@ -0,0 +1,28 @@
+import { Component, ElementRef, OnInit, Renderer2, ViewChild, ViewEncapsulation, inject } from '@angular/core';
+
+import { WebComponentWrapper } from '@angular-architects/module-federation-tools';
+
+@Component({
+	standalone: true,
+	template: '<div #vc></div>',
+	encapsulation: ViewEncapsulation.ShadowDom
+})
+export class ShadowDOMWrapperComponent extends WebComponentWrapper implements OnInit {
+	@ViewChild('vc', { read: ElementRef, static: true }) override vc!: ElementRef;
+
+	private renderer = inject(Renderer2);
+
+	ngOnInit(): void {
+		const shadowRoot = this.vc.nativeElement.parentNode;
+		const styleUrls = this['route'].snapshot.data.styleUrls || [];
+
+		// Inject styles into the Shadow DOM
+		styleUrls.forEach((url: string) => {
+			const link = this.renderer.createElement('link');
+			link.setAttribute('rel', 'stylesheet');
+			link.setAttribute('type', 'text/css');
+			link.setAttribute('href', url);
+			this.renderer.appendChild(shadowRoot, link);
+		});
+	}
+}

package/boot/config/plugins/{index.d.ts → index.ts}

@@ -1,2 +1,2 @@
-export * from './src/plugins.service';
-export * from './src/getNgZone';
+export * from './src/plugins.service';
+export * from './src/getNgZone';

package/boot/config/plugins/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/config/plugins/src/getNgZone.ts

@@ -0,0 +1,9 @@
+import { NgZone } from '@angular/core';
+
+export const getNgZone = () => {
+	if ((<any>globalThis).hostZone) {
+		return { provide: NgZone, useValue: (<any>globalThis).hostZone };
+	} else if ((<any>globalThis).mfeZone) {
+		return { provide: NgZone, useValue: (<any>globalThis).mfeZone };
+	} else return [];
+};

package/boot/config/plugins/src/interfaces.ts

@@ -0,0 +1,11 @@
+import { LoadRemoteModuleScriptOptions } from '@angular-architects/module-federation';
+
+interface PluginItem {
+	options: LoadRemoteModuleScriptOptions & { elementName: string };
+	props: { [key in string]: any };
+	events: { [key in string]: Function };
+}
+
+export type PluginConfigs = { [key in string]: PluginItem };
+
+export class FactoryClass {}

package/boot/config/plugins/src/plugins.service.ts

@@ -0,0 +1,82 @@
+import { HttpClient, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { APP_INITIALIZER, ApplicationConfig, Type, importProvidersFrom, isDevMode } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+import { createApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { DialogModule } from 'primeng/dialog';
+import { MessagesModule } from 'primeng/messages';
+import { ToastModule } from 'primeng/toast';
+
+import { KeycloakAngularModule } from 'keycloak-angular';
+import { Observable, catchError, of, tap } from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import { i18nFolderName, i18nModule } from 'aril/i18n';
+import { authInterceptor } from 'aril/keycloak';
+
+import { getNgZone } from './getNgZone';
+import { FactoryClass, PluginConfigs } from './interfaces';
+
+export const PLUGINS = new FactoryClass() as FactoryClass & PluginConfigs;
+
+export function loadPlugins(httpBackend: { httpClient: HttpClient }): () => Observable<any> {
+	return () => {
+		return httpBackend.httpClient
+			.get<PluginConfigs>(isDevMode() ? './assets/local-configs/plugin.local.json' : './assets/plugin.json')
+			.pipe(
+				tap((configs) => {
+					Object.assign(PLUGINS, { ...configs });
+				}),
+				catchError((err) => {
+					console.log('Error Plugins Loading', err);
+					return of();
+				})
+			);
+	};
+}
+
+export async function bootPlugin(selector: string, component: Type<any>) {
+	if (customElements.get(selector)) return;
+
+	const config: ApplicationConfig = {
+		providers: [
+			provideAnimations(),
+			provideHttpClient(withInterceptors([authInterceptor])),
+			importProvidersFrom(
+				i18nModule,
+				KeycloakAngularModule,
+				ConfirmDialogModule,
+				ConfirmPopupModule,
+				DialogModule,
+				MessagesModule,
+				ToastModule
+			),
+			getNgZone(),
+			MessageService,
+			ConfirmationService,
+			{
+				provide: APP_INITIALIZER,
+				useFactory: () => {
+					return () => {
+						if (isDevMode()) API_CONFIGS.api = (<any>globalThis).hostAPI;
+						else API_CONFIGS.api = window.location.origin;
+					};
+				},
+				multi: true
+			},
+			{
+				provide: i18nFolderName,
+				useValue: 'host'
+			}
+		]
+	};
+
+	const appRef = await createApplication(config);
+	const plugin = createCustomElement(component, { injector: appRef.injector });
+
+	customElements.define(selector, plugin);
+}

package/boot/host/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './src/bootstrap';
+export * from './src/bootstrap';

package/boot/host/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/host/src/app.component.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, NgZone, inject } from '@angular/core';
+import { Router, RouterOutlet } from '@angular/router';
+
+import { AppLayoutComponent } from 'aril/theme/layout';
+import { PubSubService } from 'aril/util/pub-sub';
+
+@Component({
+	standalone: true,
+	selector: 'aril-root',
+	template: ` <app-layout></app-layout> `,
+	imports: [RouterOutlet, AppLayoutComponent]
+})
+export class AppComponent {
+	constructor(router: Router, pubSubService: PubSubService) {
+		(<any>globalThis).hostZone = inject(NgZone);
+		(<any>globalThis).isHostMode = true;
+
+		pubSubService.subscribe('navigateBetweenApps', (data: any) => {
+			router.navigateByUrl(data.path);
+			pubSubService.publish({
+				name: 'navigateInApps',
+				data: data
+			});
+		});
+	}
+}

package/boot/host/src/bootstrap.ts

@@ -0,0 +1,61 @@
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+	Routes,
+	provideRouter,
+	withComponentInputBinding,
+	withHashLocation,
+	withViewTransitions
+} from '@angular/router';
+
+import { ConfirmationService, MessageService } from 'primeng/api';
+
+import { KeycloakAngularModule } from 'keycloak-angular';
+
+import { loadApiConfigs } from 'aril/boot/config/api';
+import { MicroAppService } from 'aril/boot/config/apps';
+import { loadPlugins } from 'aril/boot/config/plugins';
+import { HttpBackendService, stateMachineInterceptor } from 'aril/http';
+import { i18nFolderName, i18nModule } from 'aril/i18n';
+import { KeycloakManager, authInterceptor } from 'aril/keycloak';
+
+import { AppComponent } from './app.component';
+
+export const boot = (routes: Routes) => {
+	const appConfig: ApplicationConfig = {
+		providers: [
+			provideAnimations(),
+			provideHttpClient(withInterceptors([authInterceptor, stateMachineInterceptor])),
+			provideRouter(routes, withComponentInputBinding(), withHashLocation(), withViewTransitions()),
+			importProvidersFrom(i18nModule, KeycloakAngularModule),
+			MessageService,
+			ConfirmationService,
+			{
+				provide: APP_INITIALIZER,
+				useFactory: loadApiConfigs,
+				multi: true,
+				deps: [HttpBackendService, KeycloakManager, i18nFolderName]
+			},
+			{
+				provide: APP_INITIALIZER,
+				useFactory: (mAppService: MicroAppService, httpBackend: HttpBackendService) => mAppService.init(httpBackend),
+				multi: true,
+				deps: [MicroAppService, HttpBackendService]
+			},
+			{
+				provide: APP_INITIALIZER,
+				useFactory: loadPlugins,
+				multi: true,
+				deps: [HttpBackendService]
+			},
+			{
+				provide: i18nFolderName,
+				useValue: 'host'
+			}
+		]
+	};
+
+	bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+};

package/boot/index.ts

@@ -0,0 +1 @@
+export const aril_boot = 'ARiL-BOOT';

package/boot/mfe/{index.d.ts → index.ts}

@@ -1 +1 @@
-export { boot } from './src/bootstrap';
+export { boot } from './src/bootstrap';

package/boot/mfe/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/mfe/src/app.component.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, NgZone, inject } from '@angular/core';
+import { Router, RouterOutlet } from '@angular/router';
+
+import { ModuleFederationToolsModule } from '@angular-architects/module-federation-tools';
+
+import { AppLayoutComponent, AppMenuService, MFELayoutComponent } from 'aril/theme/layout';
+import { PubSubService } from 'aril/util/pub-sub';
+
+import { appName, menuItems } from './bootstrap';
+
+@Component({
+	standalone: true,
+	template: `
+		@if (isHostMode) {
+			<mfe-layout></mfe-layout>
+		} @else {
+			<app-layout></app-layout>
+		}
+	`,
+	imports: [RouterOutlet, ModuleFederationToolsModule, AppLayoutComponent, MFELayoutComponent]
+})
+export class AppComponent {
+	constructor(
+		private router: Router,
+		pubSubService: PubSubService,
+		appMenuService: AppMenuService
+	) {
+		if (!this.isHostMode && !(<any>globalThis).mfeZone) {
+			(<any>globalThis).mfeZone = inject(NgZone);
+		}
+
+		this.connectRouter();
+
+		(<any>globalThis).activeMF = appName;
+
+		pubSubService.subscribe('navigateInApps', (data: any) => {
+			if (data.path.startsWith(appName, 1)) router.navigateByUrl(data.path);
+		});
+
+		if (this.isHostMode) {
+			appMenuService.subMenuConfig.set({ items: structuredClone(menuItems), prefix: appName });
+		} else {
+			appMenuService.menuConfig.set({ items: structuredClone(menuItems), prefix: appName });
+		}
+	}
+
+	isHostMode = (<any>globalThis).isHostMode;
+
+	connectRouter() {
+		this.router.initialNavigation();
+
+		window.addEventListener('popstate', () => {
+			this.router.initialNavigation();
+		});
+	}
+}

package/boot/mfe/src/appComponentLoader.ts

@@ -0,0 +1,4 @@
+export const appComponentLoader = async () => {
+	const { AppComponent } = await import('./app.component');
+	return AppComponent;
+};