@spike-rabbit/dashboards-ng 49.0.0-next.1

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License
+
+Copyright (c) Siemens 2016 - 2025
+
+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
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,230 @@
+# Siemens Dashboards
+
+## Usage
+
+Check out our [dashboard demo project](../dashboards-demo/) for examples on how
+to integrate the Siemens Dashboards library in your project.
+
+### Install dependencies
+
+To use the Siemens Dashboards in your project, add it to your dependencies
+by executing:
+
+```sh
+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.
+
+### Standalone
+
+Import and include the `SiFlexibleDashboardComponent` in the component that shall provide the dashboard.
+Optionally, configure the grid and the widget storage in the global app configuration providers.
+
+```ts
+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(),
+  provideNgxTranslateForElement(),
+  provideHttpClient(withInterceptorsFromDi())
+];
+```
+
+### Modules
+
+Import the library to your Angular `AppModule`, mostly residing in your
+`src/app/app.modules.ts` file as follows:
+
+```ts
+// [...]
+// Import this library
+import { SiDashboardsNgModule } from '@spike-rabbit/dashboards-ng';
+// Import needed peer dependency
+import { SiTranslateModule } from '@spike-rabbit/element-translate-ng/translate';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+
+    // Import this library
+    SiDashboardsNgModule.forRoot({})
+  ],
+  providers: [
+    provideNgxTranslateForElement()
+  ]
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+Add `gridstack` CSS files to you 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"
+],
+"allowedCommonJsDependencies": [
+  "gridstack"
+],
+```
+
+### Add the dashboard to your application
+
+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.
+
+The component expects to be added to a flex container with a defined height, as it grows in height
+to the available space, following the [Fixed-height](https://element.siemens.io/fundamentals/layouts/content/#fixed-height)
+concept.
+
+For testing, set `style="display: flex; block-size: 800px;"` to the parent element. Please
+note that the `si-flexible-dashboard` comes with the correct page margins.
+
+```html
+<div style="display: flex; block-size: 800px;">
+  <si-flexible-dashboard heading="Sample Dashboard" [widgetCatalog]="[]">
+    <div filters-slot><button class="btn btn-secondary">My Menu</button></div>
+  </si-flexible-dashboard>
+</div>
+```
+
+The correct approach is to use the full page height as explained at
+[Fixed-height](https://element.siemens.io/fundamentals/layouts/content/#fixed-height).
+
+```html
+<div class="has-navbar-fixed-top si-layout-fixed-height h-100">
+  <si-application-header> ... </si-application-header>
+  <div class="si-layout-fixed-height">
+    <si-flexible-dashboard heading="Sample Dashboard" [widgetCatalog]="[]">
+      <div filters-slot><button class="btn btn-secondary">My Menu</button></div>
+    </si-flexible-dashboard>
+  </div>
+</div>
+```
+
+### Translations
+
+The dashboards 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/`
+and provides you all used keys. You should include the keys in your translation
+files and update the translations to your need.
+
+For a quick test you can include the files from the library in your app.
+Copy the files to your target by updated the `assets` definition in the `angular.json`
+file.
+
+```json
+{
+  "glob": "**/*",
+  "input": "node_modules/@spike-rabbit/dashboards-ng/assets/i18n",
+  "output": "./assets/i18n/dashboard/"
+}
+```
+
+Use the `MultiTranslateHttpLoader` to load your and the library translation
+files.
+
+```ts
+...
+export function createTranslateLoader(_httpBackend: HttpBackend) {
+  return new MultiTranslateHttpLoader(_httpBackend, ['/assets/i18n/', '/assets/i18n/dashboard/']);
+}
+
+...
+
+TranslateModule.forRoot({
+  loader: {
+    provide: TranslateLoader,
+    useFactory: (createTranslateLoader),
+    deps: [HttpBackend]
+  }
+})
+```
+
+### 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
+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 library ships with a [hello-widget](./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).
+The Angular component should export the template as the public attribute `footer`.
+
+```ts
+`@ViewChild('footer', { static: true }) footer?: TemplateRef<unknown>;`;
+```
+
+### 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
+`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.
+
+```ts
+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.
+
+```ts
+SiDashboardsNgModule.forRoot({
+  config: {},
+  dashboardApi: {
+    provide: SiWidgetStorage,
+    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).
+
+To configure all dashboard instances, you can leverage dependency injection when importing
+the `SiDashboardsNgModule` using `SiDashboardsNgModule.forRoot({...})`.
+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)
+
+## License
+
+Code and documentation copyright 2021-2025 Siemens AG.
+
+See [LICENSE.md](../../LICENSE.md).

package/assets/i18n/de.json

@@ -0,0 +1,46 @@
+{
+  "DASHBOARD": {
+    "EDIT": "Bearbeiten",
+    "SAVE": "Speichern",
+    "CANCEL": "Abbrechen",
+    "ADD_WIDGET": "Widget hinzufügen",
+    "REMOVE_WIDGET_CONFIRMATION_DIALOG": {
+      "HEADING": "Widget entfernen",
+      "MESSAGE": "Möchten Sie wirklich das Widget entfernen?",
+      "REMOVE": "Entfernen",
+      "CANCEL": "Abbrechen"
+    },
+    "WIDGET_LIBRARY": {
+      "TITLE": "Widget hinzufügen",
+      "CANCEL": "Abbrechen",
+      "ADD": "Hinzufügen",
+      "NEXT": "Weiter",
+      "PREVIOUS": "Zurück",
+      "EMPTY": "Es sind keine Widgets vorhanden.",
+      "DISCARD_CONFIG_CHANGE_DIALOG": {
+        "HEADING": "Widgetkonfiguration geändert",
+        "MESSAGE": "Die Widgetkonfiguration wurde geändert. Möchten Sie die Änderungen verwerfen?",
+        "DISCARD": "Verwerfen",
+        "CANCEL": "Abbrechen"
+      }
+    },
+    "WIDGET_EDITOR_DIALOG": {
+      "TITLE": "Bearbeiten",
+      "CANCEL": "Abbrechen",
+      "SAVE": "Speichern",
+      "DISCARD_CONFIG_CHANGE_DIALOG": {
+        "HEADING": "Widgetkonfiguration geändert",
+        "MESSAGE": "Die Widgetkonfiguration wurde geändert. Möchten Sie die Änderungen verwerfen?",
+        "SAVE": "Speichern",
+        "DISCARD": "Verwerfen",
+        "CANCEL": "Abbrechen"
+      }
+    },
+    "WIDGET": {
+      "REMOVE": "Entfernen",
+      "EDIT": "Bearbeiten",
+      "EXPAND": "Vergrößern",
+      "RESTORE": "Verkleinern"
+    }
+  }
+}

package/assets/i18n/en.json

@@ -0,0 +1,46 @@
+{
+  "DASHBOARD": {
+    "EDIT": "Edit",
+    "SAVE": "Save",
+    "CANCEL": "Cancel",
+    "ADD_WIDGET": "Add widget",
+    "REMOVE_WIDGET_CONFIRMATION_DIALOG": {
+      "HEADING": "Remove widget",
+      "MESSAGE": "Do you really want to remove the widget?",
+      "REMOVE": "Remove",
+      "CANCEL": "Cancel"
+    },
+    "WIDGET_LIBRARY": {
+      "TITLE": "Add widget",
+      "CANCEL": "Cancel",
+      "ADD": "Add",
+      "NEXT": "Next",
+      "PREVIOUS": "Previous",
+      "EMPTY": "No widgets available.",
+      "DISCARD_CONFIG_CHANGE_DIALOG": {
+        "HEADING": "Widget configuration changed",
+        "MESSAGE": "The widget configuration changed. Do you want to discard the changes?",
+        "DISCARD": "Discard",
+        "CANCEL": "Cancel"
+      }
+    },
+    "WIDGET_EDITOR_DIALOG": {
+      "TITLE": "Edit",
+      "CANCEL": "Cancel",
+      "SAVE": "Save",
+      "DISCARD_CONFIG_CHANGE_DIALOG": {
+        "HEADING": "Widget configuration changed",
+        "MESSAGE": "The widget configuration changed. Do you want to discard the changes?",
+        "SAVE": "Save",
+        "DISCARD": "Discard",
+        "CANCEL": "Cancel"
+      }
+    },
+    "WIDGET": {
+      "REMOVE": "Remove",
+      "EDIT": "Edit",
+      "EXPAND": "Expand",
+      "RESTORE": "Restore"
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+import { loadRemoteModule } from '@angular-architects/module-federation';
+import { widgetFactoryRegistry } from '@spike-rabbit/dashboards-ng';
+import { Subject } from 'rxjs';
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * 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 registerModuleFederatedWidgetLoader = () => {
+    widgetFactoryRegistry.register('module-federation', setupRemoteComponent);
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { registerModuleFederatedWidgetLoader };
+//# sourceMappingURL=spike-rabbit-dashboards-ng-module-federation.mjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,21 @@
+import { SI_TRANSLATABLE_VALUES } from '@spike-rabbit/element-translate-ng/translate';
+
+/* eslint-disable */
+
+const provideSiDashboardsTranslatableOverrides = values => ({
+    useValue: values,
+    multi: true,
+    provide: SI_TRANSLATABLE_VALUES
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { provideSiDashboardsTranslatableOverrides };
+//# sourceMappingURL=spike-rabbit-dashboards-ng-translate.mjs.map

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

@@ -0,0 +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;;;;"}