@spike-rabbit/dashboards-ng 49.0.1 → 49.13.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) Siemens 2016 - 2025
+Copyright (c) Siemens 2016 - 2026
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the “Software”), to deal in

package/README.md

@@ -2,7 +2,7 @@
 
 ## Usage
 
-Check out our [dashboard demo project](../dashboards-demo/) for examples on how
+Check out our [dashboard demo project](https://github.com/siemens/element/blob/main/projects/dashboards-demo/) for examples on how
 to integrate the Siemens Dashboards library in your project.
 
 ### Install dependencies
@@ -16,8 +16,7 @@ npm install --save @spike-rabbit/dashboards-ng gridstack
 
 ### Add libraries to your project
 
-The library supports standalone components and modules. However, the widgets when not using web components
-or module federation still need a module definition.
+The library supports standalone components and modules.
 
 ### Standalone
 
@@ -29,17 +28,14 @@ providers: [
   provideRouter(routes, withHashLocation()),
   { provide: SI_WIDGET_STORE, useClass: AppWidgetStorage },
   { provide: SI_DASHBOARD_CONFIGURATION, useValue: config },
-  importProvidersFrom(
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: createTranslateLoader,
-        deps: [HttpBackend]
-      }
-    }),
-    SiTranslateNgxTModule
-  ),
-  provideAnimations(),
+  provideTranslateService({
+    loader: {
+      provide: TranslateLoader,
+      useFactory: createTranslateLoader,
+      deps: [HttpBackend]
+    },
+    missingTranslationHandler: provideMissingTranslationHandlerForElement()
+  }),
   provideNgxTranslateForElement(),
   provideHttpClient(withInterceptorsFromDi())
 ];
@@ -63,7 +59,7 @@ import { SiTranslateModule } from '@spike-rabbit/element-translate-ng/translate'
     BrowserModule,
 
     // Import this library
-    SiDashboardsNgModule.forRoot({})
+    SiDashboardsNgModule
   ],
   providers: [
     provideNgxTranslateForElement()
@@ -73,14 +69,13 @@ import { SiTranslateModule } from '@spike-rabbit/element-translate-ng/translate'
 export class AppModule { }
 ```
 
-Add `gridstack` CSS files to you application by editing
+Add `gridstack` CSS files to your application by editing
 the `angular.json` file.
 
 ```json
 "styles": [
   "src/styles.scss",
-  "node_modules/gridstack/dist/gridstack.css",
-  "node_modules/gridstack/dist/gridstack-extra.css"
+  "node_modules/gridstack/dist/gridstack.css"
 ],
 "allowedCommonJsDependencies": [
   "gridstack"
@@ -89,7 +84,7 @@ the `angular.json` file.
 
 ### Add the dashboard to your application
 
-To add the dashboard to your application, add the `si-flexible-dashboard component
+To add the dashboard to your application, add the `si-flexible-dashboard` component
 to your template. Configure the widget catalog by setting the _widgetCatalog_ input
 property.
 
@@ -124,7 +119,7 @@ The correct approach is to use the full page height as explained at
 
 ### Translations
 
-The dashboards comes with a couple of components with i18n support.
+The dashboard comes with a couple of components with i18n support.
 The library uses translation keys in the components and ships English
 and German (`en.json`, `de.json`) translations for demonstration. The
 files are located at the folder `node_modules/@spike-rabbit/dashboards-ng/assets/i18n/`
@@ -154,7 +149,7 @@ export function createTranslateLoader(_httpBackend: HttpBackend) {
 
 ...
 
-TranslateModule.forRoot({
+provideTranslateService({
   loader: {
     provide: TranslateLoader,
     useFactory: (createTranslateLoader),
@@ -166,29 +161,186 @@ TranslateModule.forRoot({
 ### Widget development
 
 You can develop your own widgets that are managed by the dashboard. One or multiple widgets
-have to be provided by an Angular module and described by a `Widget` object, that includes
+have to be provided by an Angular module or standalone and described by a `Widget` object, that includes
 the meta information and the Angular widget instance component and editor names that are
 used to instantiate the widget at runtime.
 
-The widget instance component has to implement the `WidgetInstance` interface and the
-editor has to implement the `WidgetInstanceEditor` interface. You have to provide a
-module loader function that is used to load the widget when needed.
+The widget instance component must implement the `WidgetInstance` interface and the
+editor must implement the `WidgetInstanceEditor` interface. You must provide either
+a module loader function with module name or a component loader function for standalone components
+that is used to load the widget when needed.
 
-The library ships with a [hello-widget](./src/app/widgets/hello-widget/) example for illustration.
+The library ships with a [hello-widget](https://github.com/siemens/element/blob/main/projects/dashboards-demo/src/app/widgets/hello-widget/) example for illustration.
 
 E.g. a widget implements a user interface that is added at runtime into the body of a dashboard card.
 Optionally, the widget template may include a `<ng-template/>` to provides a footer implementation like
-`<ng-template #footer><a [siLink]="link">Go to issues</a></ng-template>` in the [value-widget](./src/app/widgets/charts/value-widget.component.ts).
+`<ng-template #footer><a [siLink]="link">Go to issues</a></ng-template>` in the [value-widget](https://github.com/siemens/element/blob/main/projects/dashboards-demo/src/app/widgets/charts/value-widget.component.ts).
 The Angular component should export the template as the public attribute `footer`.
 
 ```ts
-`@ViewChild('footer', { static: true }) footer?: TemplateRef<unknown>;`;
+@ViewChild('footer', { static: true }) footer?: TemplateRef<unknown>;
+```
+
+### Remote Widget Loading (Microfrontends)
+
+The flexible dashboard supports loading widgets as remote microfrontends, allowing widgets to be deployed and updated independently from the host application. Three integration options are available:
+
+#### Pure Module Federation (Webpack-based)
+
+Uses `@angular-architects/module-federation` to share code between host and remote applications. Both host and remotes must use Webpack as the bundler.
+
+Register the loader in your application bootstrap:
+
+```ts
+import { registerModuleFederatedWidgetLoader } from '@spike-rabbit/dashboards-ng/module-federation';
+
+registerModuleFederatedWidgetLoader();
+```
+
+```
++-------------------------+       +----------------------------------+
+| Host App                |       | @angular-architects/             |
+| Module Federation       |------>| module-federation                |
+| (webpack)               |       |                                  |
++------------+------------+       +---------------^------------------+
+             |                                    |
+  registerModuleFederatedWidgetLoader             |
+             |                                    |
++------------v------------+       +---------------+------------------+
+| @spike-rabbit/dashboards-ng/ |       | Remote Widget                    |
+| module-federation       |       | Module Federation                |
++-------------------------+       | (webpack)                        |
+                                  +----------------------------------+
+```
+
+#### Pure Native Federation (ESM-based)
+
+Uses `@angular-architects/native-federation` with ES Module-based federation, independent of the bundler. Works with any build tool (esbuild, Vite, Webpack). Recommended for modern Angular applications.
+
+Register the loader in your application bootstrap:
+
+```ts
+import { registerNativeFederatedWidgetLoader } from '@spike-rabbit/dashboards-ng/native-federation';
+
+registerNativeFederatedWidgetLoader();
+```
+
+```
++-------------------------+       +----------------------------------+
+| Host App                |       | @angular-architects/             |
+| Native Federation       |------>| native-federation                |
+| (esbuild/Vite/webpack)  |       |                                  |
++------------+------------+       +---------------^------------------+
+             |                                    |
+  registerNativeFederatedWidgetLoader             |
+             |                                    |
++------------v------------+       +---------------+------------------+
+| @spike-rabbit/dashboards-ng/ |       | Remote Widget                    |
+| native-federation       |       | Native Federation                |
++-------------------------+       | (esbuild)                        |
+                                  +----------------------------------+
+```
+
+#### Hybrid/Bridge (Native Federation + Module Federation)
+
+Enables a Native Federation shell to load Module Federation remotes using `@module-federation/runtime`. Useful for gradual migration or when integrating existing Webpack-based remotes into a modern ESM-based host.
+
+Register the loader with your Module Federation instance:
+
+```ts
+import { registerModuleFederatedWidgetLoader } from '@spike-rabbit/dashboards-ng/native-federation/mf-bridge';
+
+registerModuleFederatedWidgetLoader(mfInstance);
+```
+
+```
++-------------------------+       +----------------------------------+
+| Host App                |       | @angular-architects/             |
+| Native Federation       |------>| native-federation                |
+| (esbuild)               |       |                                  |
++------------+------------+       +----------------------------------+
+             |
+             | registerModuleFederatedWidgetLoader(mfInstance)
+             |
++------------v-----------------------+
+| @spike-rabbit/dashboards-ng/            |
+| native-federation/mf-bridge        |
++------------+-----------------------+
+             |
+             | loads
+             |
++------------v------------+       +----------------------------------+
+| @module-federation/     |       | Remote Widget                    |
+| runtime                 |------>| Module Federation                |
++-------------------------+       | (webpack)                        |
+                                  +----------------------------------+
+```
+
+For more details, refer to [Combining Native Federation and Module Federation](https://www.angulararchitects.io/blog/combining-native-federation-and-module-federation/).
+
+#### Running the Demo Application
+
+The [dashboard demo project](https://github.com/siemens/element/blob/main/projects/dashboards-demo/) includes examples of all microfrontend modes. Use these npm scripts to run locally:
+
+```sh
+# Module Federation mode (Webpack-based host and remotes)
+pnpm run dashboards-demo:run-all:local
+
+# Native Federation mode with Hybrid/Bridge support (ESM-based host with both Native and Module Federation remotes)
+pnpm run dashboards-demo:run-all:esm:local
+```
+
+### Widget instance ID generation
+
+Each widget instance on a dashboard requires a unique ID for identification and persistence. The library
+provides a flexible system for generating these IDs through the `SiWidgetIdProvider` abstract class.
+
+#### Default ID generation
+
+By default, the library uses `SiWidgetDefaultIdProvider`, which generates unique IDs using
+a RFC4122 version 4 UUID (e.g.,`'550e8400-e29b-41d4-a716-446655440000'`). This default implementation
+uses `crypto.randomUUID()` to ensure cryptographically secure uniqueness with 122 bits of entropy.
+
+#### Custom ID generation
+
+To implement custom ID generation logic (e.g., UUID-based, sequential or
+context-aware IDs), create a class that extends `SiWidgetIdProvider` and implement the
+`generateWidgetId` method:
+
+```ts
+import { Injectable } from '@angular/core';
+import { SiWidgetIdProvider } from '@spike-rabbit/dashboards-ng';
+
+@Injectable()
+export class CustomWidgetIdProvider extends SiWidgetIdProvider {
+  override generateWidgetId(widget: WidgetConfig, dashboardId?: string): string {
+    // Example: Create a composite ID from dashboard and widget type
+    const prefix = dashboardId ?? 'default';
+    const timestamp = Date.now();
+    return `${prefix}-${widget.widgetId}-${timestamp}`;
+  }
+}
+```
+
+#### Providing a custom ID provider
+
+To use your custom ID provider, register it in your application's providers:
+
+```ts
+// For standalone applications
+providers: [{ provide: SI_WIDGET_ID_PROVIDER, useClass: CustomWidgetIdProvider }];
+
+// For module-based applications
+@NgModule({
+  providers: [{ provide: SI_WIDGET_ID_PROVIDER, useClass: CustomWidgetIdProvider }]
+})
+export class AppModule {}
 ```
 
 ### Dashboard persistence
 
 The library persists a dashboard configuration by the default `SiDefaultWidgetStorage` implementation
-of the API [SiWidgetStorage](./projects/dashboards-ng/src/model/si-widget-storage.ts). The
+of the API [SiWidgetStorage](https://github.com/siemens/element/blob/main/projects/dashboards-ng/src/model/si-widget-storage.ts). The
 `SiDefaultWidgetStorage` uses the `Storage` implementation `sessionStorage`. You can set a different
 `Storage` like the `localStorage` by providing the `DEFAULT_WIDGET_STORAGE_TOKEN` in the related module.
 
@@ -197,34 +349,28 @@ providers: [..., { provide: DEFAULT_WIDGET_STORAGE_TOKEN, useValue: localStorage
 ```
 
 For persistence in a backend service, you should implement your own
-[SiWidgetStorage](./projects/dashboards-ng/src/model/si-widget-storage.ts) and provide it in
-the library module definition.
+[SiWidgetStorage](https://github.com/siemens/element/blob/main/projects/dashboards-ng/src/model/si-widget-storage.ts) and provide it in
+your module providers or application config.
 
 ```ts
-SiDashboardsNgModule.forRoot({
-  config: {},
-  dashboardApi: {
-    provide: SiWidgetStorage,
-    useClass: CustomWidgetStorage
-  }
-});
+providers: [{ provide: SI_WIDGET_STORE, useClass: CustomWidgetStorage }];
 ```
 
 ### Configuration
 
 The dashboard is configurable through the Angular inputs of the exposed components and by
 the usage of the configuration object `Config`, which includes a `GridConfig` and including
-the [GridStackOptions](./projects/dashboards-ng/src/model/gridstack.model.ts).
+the [GridStackOptions](https://github.com/siemens/element/blob/main/projects/dashboards-ng/src/model/gridstack.model.ts).
 
-To configure all dashboard instances, you can leverage dependency injection when importing
-the `SiDashboardsNgModule` using `SiDashboardsNgModule.forRoot({...})`.
+To configure all dashboard instances, you can leverage dependency injection by providing
+the `SI_DASHBOARD_CONFIGURATION` token in your providers.
 Alternatively, you have the option to configure individual dashboard instances by setting
 the input property `SiFlexibleDashboardComponent.config = {...}`.
 
-Here is the [demo](./src/app/pages/fixed-widgets-dashboard/fixed-widgets-dashboard.component.ts)
+Here is the [demo](https://github.com/siemens/element/blob/main/projects/dashboards-demo/src/app/pages/fixed-widgets-dashboard/fixed-widgets-dashboard.component.ts)
 
 ## License
 
-Code and documentation copyright 2021-2025 Siemens AG.
+Code and documentation Copyright (c) Siemens 2016 - 2026
 
-See [LICENSE.md](../../LICENSE.md).
+MIT, see [LICENSE.md](LICENSE.md).

package/fesm2022/spike-rabbit-dashboards-ng-module-federation.mjs

@@ -1,34 +1,27 @@
 import { loadRemoteModule } from '@angular-architects/module-federation';
-import { widgetFactoryRegistry } from '@spike-rabbit/dashboards-ng';
-import { Subject } from 'rxjs';
+import { handleFederatedModuleLoad, widgetFactoryRegistry } from '@spike-rabbit/dashboards-ng';
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-const setupRemoteComponent = (factory, componentName, host, injector, environmentInjector) => {
-    const result = new Subject();
-    loadRemoteModule(factory).then((module) => {
-        const componentType = module[factory[componentName]];
-        const widgetInstanceRef = host.createComponent(componentType, {
-            injector,
-            environmentInjector
-        });
-        result.next(widgetInstanceRef);
-        result.complete();
-    }, rejection => {
-        const msg = rejection
-            ? `Loading widget module ${factory.exposedModule} failed with ${JSON.stringify(rejection.toString())}`
-            : `Loading widget module ${factory.exposedModule} failed`;
-        result.error(msg);
-        result.complete();
-    });
-    return result;
-};
+const setupRemoteComponent = (factory, componentName, host, injector, environmentInjector) => handleFederatedModuleLoad({
+    loadPromise: loadRemoteModule(factory),
+    factory,
+    componentName,
+    host,
+    injector,
+    environmentInjector
+});
 const registerModuleFederatedWidgetLoader = () => {
     widgetFactoryRegistry.register('module-federation', setupRemoteComponent);
 };
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */

package/fesm2022/spike-rabbit-dashboards-ng-module-federation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spike-rabbit-dashboards-ng-module-federation.mjs","sources":["../../../../projects/dashboards-ng/module-federation/index.ts","../../../../projects/dashboards-ng/module-federation/spike-rabbit-dashboards-ng-module-federation.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { loadRemoteModule } from '@angular-architects/module-federation';\nimport { ComponentRef, EnvironmentInjector, Injector, ViewContainerRef } from '@angular/core';\nimport {\n  FederatedModule,\n  SetupComponentFn,\n  widgetFactoryRegistry\n} from '@spike-rabbit/dashboards-ng';\nimport { Observable, Subject } from 'rxjs';\n\nconst setupRemoteComponent = <T>(\n  factory: FederatedModule,\n  componentName: string,\n  host: ViewContainerRef,\n  injector: Injector,\n  environmentInjector: EnvironmentInjector\n): Observable<ComponentRef<T>> => {\n  const result = new Subject<ComponentRef<T>>();\n\n  loadRemoteModule(factory).then(\n    (module: any) => {\n      const componentType = module[factory[componentName]];\n      const widgetInstanceRef = host.createComponent<T>(componentType, {\n        injector,\n        environmentInjector\n      });\n      result.next(widgetInstanceRef);\n      result.complete();\n    },\n    rejection => {\n      const msg = rejection\n        ? `Loading widget module ${factory.exposedModule} failed with ${JSON.stringify(\n            rejection.toString()\n          )}`\n        : `Loading widget module ${factory.exposedModule} failed`;\n      result.error(msg);\n      result.complete();\n    }\n  );\n  return result;\n};\n\nexport const registerModuleFederatedWidgetLoader = (): void => {\n  widgetFactoryRegistry.register('module-federation', setupRemoteComponent as SetupComponentFn);\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;AAGG;AAUH,MAAM,oBAAoB,GAAG,CAC3B,OAAwB,EACxB,aAAqB,EACrB,IAAsB,EACtB,QAAkB,EAClB,mBAAwC,KACT;AAC/B,IAAA,MAAM,MAAM,GAAG,IAAI,OAAO,EAAmB;IAE7C,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAC5B,CAAC,MAAW,KAAI;QACd,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AACpD,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAI,aAAa,EAAE;YAC/D,QAAQ;YACR;AACD,SAAA,CAAC;AACF,QAAA,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC;QAC9B,MAAM,CAAC,QAAQ,EAAE;KAClB,EACD,SAAS,IAAG;QACV,MAAM,GAAG,GAAG;AACV,cAAE,CAAA,sBAAA,EAAyB,OAAO,CAAC,aAAa,CAAA,aAAA,EAAgB,IAAI,CAAC,SAAS,CAC1E,SAAS,CAAC,QAAQ,EAAE,CACrB,CAAA;AACH,cAAE,CAAA,sBAAA,EAAyB,OAAO,CAAC,aAAa,SAAS;AAC3D,QAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;QACjB,MAAM,CAAC,QAAQ,EAAE;AACnB,KAAC,CACF;AACD,IAAA,OAAO,MAAM;AACf,CAAC;AAEM,MAAM,mCAAmC,GAAG,MAAW;AAC5D,IAAA,qBAAqB,CAAC,QAAQ,CAAC,mBAAmB,EAAE,oBAAwC,CAAC;AAC/F;;AC/CA;;AAEG;;;;"}
+{"version":3,"file":"spike-rabbit-dashboards-ng-module-federation.mjs","sources":["../../../../projects/dashboards-ng/module-federation/register-loader.ts","../../../../projects/dashboards-ng/module-federation/index.ts","../../../../projects/dashboards-ng/module-federation/spike-rabbit-dashboards-ng-module-federation.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { loadRemoteModule } from '@angular-architects/module-federation';\nimport { ComponentRef, EnvironmentInjector, Injector, ViewContainerRef } from '@angular/core';\nimport {\n  FederatedModule,\n  FederatedModuleExports,\n  handleFederatedModuleLoad,\n  SetupComponentFn,\n  widgetFactoryRegistry\n} from '@spike-rabbit/dashboards-ng';\nimport { Observable } from 'rxjs';\n\nconst setupRemoteComponent = <T>(\n  factory: FederatedModule,\n  componentName: string,\n  host: ViewContainerRef,\n  injector: Injector,\n  environmentInjector: EnvironmentInjector\n): Observable<ComponentRef<T>> =>\n  handleFederatedModuleLoad({\n    loadPromise: loadRemoteModule<FederatedModuleExports<T>>(factory),\n    factory,\n    componentName,\n    host,\n    injector,\n    environmentInjector\n  });\n\nexport const registerModuleFederatedWidgetLoader = (): void => {\n  widgetFactoryRegistry.register('module-federation', setupRemoteComponent as SetupComponentFn);\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport { registerModuleFederatedWidgetLoader } from './register-loader';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;AAGG;AAYH,MAAM,oBAAoB,GAAG,CAC3B,OAAwB,EACxB,aAAqB,EACrB,IAAsB,EACtB,QAAkB,EAClB,mBAAwC,KAExC,yBAAyB,CAAC;AACxB,IAAA,WAAW,EAAE,gBAAgB,CAA4B,OAAO,CAAC;IACjE,OAAO;IACP,aAAa;IACb,IAAI;IACJ,QAAQ;IACR;AACD,CAAA,CAAC;AAEG,MAAM,mCAAmC,GAAG,MAAW;AAC5D,IAAA,qBAAqB,CAAC,QAAQ,CAAC,mBAAmB,EAAE,oBAAwC,CAAC;AAC/F;;ACjCA;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/spike-rabbit-dashboards-ng-native-federation-mf-bridge.mjs

@@ -0,0 +1,31 @@
+import { handleFederatedModuleLoad, widgetFactoryRegistry } from '@spike-rabbit/dashboards-ng';
+
+function setupRemoteComponent(factory, componentName, host, injector, environmentInjector) {
+    return handleFederatedModuleLoad({
+        loadPromise: this.loadRemote(factory.id, factory.options),
+        factory,
+        componentName,
+        host,
+        injector,
+        environmentInjector
+    });
+}
+/**
+ * Use this when having native federation shell and remote module is using module federation.
+ * @param mfInstance - The ModuleFederation instance returned by `createInstance` from '\@module-federation/runtime'
+ */
+const registerModuleFederatedWidgetLoader = (mfInstance) => {
+    widgetFactoryRegistry.register('native-federation-module-bridge', setupRemoteComponent.bind(mfInstance));
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { registerModuleFederatedWidgetLoader };
+//# sourceMappingURL=spike-rabbit-dashboards-ng-native-federation-mf-bridge.mjs.map

package/fesm2022/spike-rabbit-dashboards-ng-native-federation-mf-bridge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spike-rabbit-dashboards-ng-native-federation-mf-bridge.mjs","sources":["../../../../projects/dashboards-ng/native-federation/mf-bridge/register-loader.ts","../../../../projects/dashboards-ng/native-federation/mf-bridge/index.ts","../../../../projects/dashboards-ng/native-federation/mf-bridge/spike-rabbit-dashboards-ng-native-federation-mf-bridge.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ComponentRef, EnvironmentInjector, Injector, ViewContainerRef } from '@angular/core';\nimport { ModuleFederation } from '@module-federation/runtime';\nimport {\n  FederatedBridgeModule,\n  FederatedModuleExports,\n  handleFederatedModuleLoad,\n  SetupComponentFn,\n  widgetFactoryRegistry\n} from '@spike-rabbit/dashboards-ng';\nimport { Observable } from 'rxjs';\n\nfunction setupRemoteComponent<T>(\n  this: ModuleFederation,\n  factory: FederatedBridgeModule,\n  componentName: string,\n  host: ViewContainerRef,\n  injector: Injector,\n  environmentInjector: EnvironmentInjector\n): Observable<ComponentRef<T>> {\n  return handleFederatedModuleLoad({\n    loadPromise: this.loadRemote<FederatedModuleExports<T>>(factory.id, factory.options),\n    factory,\n    componentName,\n    host,\n    injector,\n    environmentInjector\n  });\n}\n\n/**\n * Use this when having native federation shell and remote module is using module federation.\n * @param mfInstance - The ModuleFederation instance returned by `createInstance` from '\\@module-federation/runtime'\n */\nexport const registerModuleFederatedWidgetLoader = (mfInstance: ModuleFederation): void => {\n  widgetFactoryRegistry.register(\n    'native-federation-module-bridge',\n    setupRemoteComponent.bind(mfInstance) as SetupComponentFn\n  );\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport { registerModuleFederatedWidgetLoader } from './register-loader';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAeA,SAAS,oBAAoB,CAE3B,OAA8B,EAC9B,aAAqB,EACrB,IAAsB,EACtB,QAAkB,EAClB,mBAAwC,EAAA;AAExC,IAAA,OAAO,yBAAyB,CAAC;AAC/B,QAAA,WAAW,EAAE,IAAI,CAAC,UAAU,CAA4B,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC;QACpF,OAAO;QACP,aAAa;QACb,IAAI;QACJ,QAAQ;QACR;AACD,KAAA,CAAC;AACJ;AAEA;;;AAGG;AACI,MAAM,mCAAmC,GAAG,CAAC,UAA4B,KAAU;AACxF,IAAA,qBAAqB,CAAC,QAAQ,CAC5B,iCAAiC,EACjC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAqB,CAC1D;AACH;;AC1CA;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/spike-rabbit-dashboards-ng-native-federation.mjs

@@ -0,0 +1,30 @@
+import { loadRemoteModule } from '@angular-architects/native-federation';
+import { handleFederatedModuleLoad, widgetFactoryRegistry } from '@spike-rabbit/dashboards-ng';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const setupRemoteComponent = (factory, componentName, host, injector, environmentInjector) => handleFederatedModuleLoad({
+    loadPromise: loadRemoteModule(factory),
+    factory,
+    componentName,
+    host,
+    injector,
+    environmentInjector
+});
+const registerNativeFederatedWidgetLoader = () => {
+    widgetFactoryRegistry.register('native-federation', setupRemoteComponent);
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { registerNativeFederatedWidgetLoader };
+//# sourceMappingURL=spike-rabbit-dashboards-ng-native-federation.mjs.map

package/fesm2022/spike-rabbit-dashboards-ng-native-federation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spike-rabbit-dashboards-ng-native-federation.mjs","sources":["../../../../projects/dashboards-ng/native-federation/register-loader.ts","../../../../projects/dashboards-ng/native-federation/index.ts","../../../../projects/dashboards-ng/native-federation/spike-rabbit-dashboards-ng-native-federation.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { loadRemoteModule } from '@angular-architects/native-federation';\nimport { ComponentRef, EnvironmentInjector, Injector, ViewContainerRef } from '@angular/core';\nimport {\n  FederatedModule,\n  FederatedModuleExports,\n  handleFederatedModuleLoad,\n  SetupComponentFn,\n  widgetFactoryRegistry\n} from '@spike-rabbit/dashboards-ng';\nimport { Observable } from 'rxjs';\n\nconst setupRemoteComponent = <T>(\n  factory: FederatedModule,\n  componentName: string,\n  host: ViewContainerRef,\n  injector: Injector,\n  environmentInjector: EnvironmentInjector\n): Observable<ComponentRef<T>> =>\n  handleFederatedModuleLoad({\n    loadPromise: loadRemoteModule<FederatedModuleExports<T>>(factory),\n    factory,\n    componentName,\n    host,\n    injector,\n    environmentInjector\n  });\n\nexport const registerNativeFederatedWidgetLoader = (): void => {\n  widgetFactoryRegistry.register('native-federation', setupRemoteComponent as SetupComponentFn);\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport { registerNativeFederatedWidgetLoader } from './register-loader';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;AAGG;AAYH,MAAM,oBAAoB,GAAG,CAC3B,OAAwB,EACxB,aAAqB,EACrB,IAAsB,EACtB,QAAkB,EAClB,mBAAwC,KAExC,yBAAyB,CAAC;AACxB,IAAA,WAAW,EAAE,gBAAgB,CAA4B,OAAO,CAAC;IACjE,OAAO;IACP,aAAa;IACb,IAAI;IACJ,QAAQ;IACR;AACD,CAAA,CAAC;AAEG,MAAM,mCAAmC,GAAG,MAAW;AAC5D,IAAA,qBAAqB,CAAC,QAAQ,CAAC,mBAAmB,EAAE,oBAAwC,CAAC;AAC/F;;ACjCA;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/spike-rabbit-dashboards-ng-translate.mjs

@@ -9,7 +9,7 @@ const provideSiDashboardsTranslatableOverrides = values => ({
 });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 

package/fesm2022/spike-rabbit-dashboards-ng-translate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spike-rabbit-dashboards-ng-translate.mjs","sources":["../../../../projects/dashboards-ng/translate/si-translatable-keys.interface.ts","../../../../projects/dashboards-ng/translate/si-translatable-overrides.provider.ts","../../../../projects/dashboards-ng/translate/index.ts","../../../../projects/dashboards-ng/translate/spike-rabbit-dashboards-ng-translate.ts"],"sourcesContent":["/* eslint-disable */\n\n// Auto-generated file. Run 'yarn update-translatable-keys' to update.\n\nexport interface SiTranslatableKeys {\n  'DASHBOARD.ADD_WIDGET'?: string;\n  'DASHBOARD.CANCEL'?: string;\n  'DASHBOARD.EDIT'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.CANCEL'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.HEADING'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.MESSAGE'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.REMOVE'?: string;\n  'DASHBOARD.SAVE'?: string;\n  'DASHBOARD.WIDGET.EDIT'?: string;\n  'DASHBOARD.WIDGET.EXPAND'?: string;\n  'DASHBOARD.WIDGET.REMOVE'?: string;\n  'DASHBOARD.WIDGET.RESTORE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.CANCEL'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.CANCEL'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.DISCARD'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.HEADING'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.MESSAGE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.SAVE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.NEXT'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.PREVIOUS'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.SAVE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.TITLE'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.ADD'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.CANCEL'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.CANCEL'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.DISCARD'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.HEADING'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.MESSAGE'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.EMPTY'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.NEXT'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.PREVIOUS'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.TITLE'?: string;\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Provider } from '@angular/core';\nimport { SI_TRANSLATABLE_VALUES } from '@spike-rabbit/element-translate-ng/translate';\n\nimport { SiTranslatableKeys } from './si-translatable-keys.interface';\n\nexport const provideSiDashboardsTranslatableOverrides: (\n  values: SiTranslatableKeys\n) => Provider = values => ({\n  useValue: values,\n  multi: true,\n  provide: SI_TRANSLATABLE_VALUES\n});\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-translatable-keys.interface';\nexport * from './si-translatable-overrides.provider';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;MCSa,wCAAwC,GAErC,MAAM,KAAK;AACzB,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE;AACV,CAAA;;ACfD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"spike-rabbit-dashboards-ng-translate.mjs","sources":["../../../../projects/dashboards-ng/translate/si-translatable-keys.interface.ts","../../../../projects/dashboards-ng/translate/si-translatable-overrides.provider.ts","../../../../projects/dashboards-ng/translate/index.ts","../../../../projects/dashboards-ng/translate/spike-rabbit-dashboards-ng-translate.ts"],"sourcesContent":["/* eslint-disable */\n\n// Auto-generated file. Run 'npx update-translatable-keys' to update.\n\nexport interface SiTranslatableKeys {\n  'DASHBOARD.A11Y.WIDGETS_LIST'?: string;\n  'DASHBOARD.ADD_WIDGET'?: string;\n  'DASHBOARD.CANCEL'?: string;\n  'DASHBOARD.EDIT'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.CANCEL'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.HEADING'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.MESSAGE'?: string;\n  'DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.REMOVE'?: string;\n  'DASHBOARD.SAVE'?: string;\n  'DASHBOARD.WIDGET.A11Y.ACTIVATED'?: string;\n  'DASHBOARD.WIDGET.A11Y.DEACTIVATED'?: string;\n  'DASHBOARD.WIDGET.A11Y.DESCRIPTION'?: string;\n  'DASHBOARD.WIDGET.A11Y.MOVED'?: string;\n  'DASHBOARD.WIDGET.A11Y.RESIZED'?: string;\n  'DASHBOARD.WIDGET.EDIT'?: string;\n  'DASHBOARD.WIDGET.EXPAND'?: string;\n  'DASHBOARD.WIDGET.REMOVE'?: string;\n  'DASHBOARD.WIDGET.RESTORE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.CANCEL'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.CANCEL'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.DISCARD'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.HEADING'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.MESSAGE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.SAVE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.NEXT'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.PREVIOUS'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.SAVE'?: string;\n  'DASHBOARD.WIDGET_EDITOR_DIALOG.TITLE'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.ADD'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.CANCEL'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.CANCEL'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.DISCARD'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.HEADING'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.MESSAGE'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.EMPTY'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.NEXT'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.PREVIOUS'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.TITLE'?: string;\n  'DASHBOARD.WIDGET_LIBRARY.WIDGET_CATALOG_LIST'?: string;\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Provider } from '@angular/core';\nimport { SI_TRANSLATABLE_VALUES } from '@spike-rabbit/element-translate-ng/translate';\n\nimport { SiTranslatableKeys } from './si-translatable-keys.interface';\n\nexport const provideSiDashboardsTranslatableOverrides: (\n  values: SiTranslatableKeys\n) => Provider = values => ({\n  useValue: values,\n  multi: true,\n  provide: SI_TRANSLATABLE_VALUES\n});\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-translatable-keys.interface';\nexport * from './si-translatable-overrides.provider';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;MCSa,wCAAwC,GAErC,MAAM,KAAK;AACzB,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE;AACV,CAAA;;ACfD;;;AAGG;;ACHH;;AAEG;;;;"}