@c8y/tutorial 1021.80.1 → 1022.3.2

package/src/hooks/widget-config/basic-view/basic-edit.component.ts

@@ -0,0 +1,31 @@
+import { AsyncPipe, CommonModule, JsonPipe } from '@angular/common';
+import { Component, inject, OnInit, OnDestroy } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import {
+  WidgetConfigSectionComponent,
+  WidgetConfigService
+} from '@c8y/ngx-components/context-dashboard';
+import { referenceWidgetDefinition } from '../widget-config.providers';
+
+/**
+ * This is a standard angular component.
+ * It simply shows the edit view of the widget.
+ */
+@Component({
+  selector: 'tut-basic-widget-config-hook-view',
+  templateUrl: './basic-edit.component.html',
+  standalone: true,
+  imports: [CoreModule, CommonModule, WidgetConfigSectionComponent, AsyncPipe, JsonPipe]
+})
+export class BasicEditComponent implements OnInit, OnDestroy {
+  widgetConfigService = inject(WidgetConfigService);
+
+  ngOnInit(): void {
+    this.widgetConfigService.initConfig({});
+    this.widgetConfigService.selectWidget(referenceWidgetDefinition);
+  }
+
+  ngOnDestroy(): void {
+    this.widgetConfigService.deselectWidget();
+  }
+}

package/src/hooks/widget-config/widget-config.providers.ts

@@ -0,0 +1,59 @@
+import {
+  EmptyComponent,
+  NavigatorNode,
+  hookComponent,
+  hookNavigator,
+  hookRoute
+} from '@c8y/ngx-components';
+import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';
+
+export const referenceWidgetDefinition = {
+  id: 'reference.component',
+  label:
+    'A configuration is always attached to a component. This is an empty one, just for demo pruposes.',
+  description: 'Nothing to describe',
+  loadComponent: () => Promise.resolve(EmptyComponent)
+};
+
+/**
+ * Use our predefined InjectionTokens and provide your own classes to extend behavior
+ * and functionality of existing ones. Implement your own NavigationNodes, Tabs, Actions and Breadcrumbs.
+ * Note: Hooks should always be implemented in the module where they are used, so that
+ * a module can act standalone and has no dependencies on other modules.
+ */
+export const widgetConfigHookProviders = [
+  hookRoute({
+    path: 'hooks/widget-config',
+    loadComponent: () => import('./basic-view/basic-edit.component').then(m => m.BasicEditComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 70,
+      path: 'hooks/widget-config',
+      icon: 'edit',
+      label: 'Widget Config',
+      parent: 'Hooks'
+    })
+  ),
+  hookComponent(referenceWidgetDefinition),
+  // important
+  hookWidgetConfig({
+    widgetId: 'reference.component',
+    label: 'An additional Configuration for the simple component',
+    priority: 100,
+    expanded: true,
+    loadComponent: () =>
+      import('./additional-config/additional-config.component').then(
+        m => m.AdditionalConfigComponent
+      )
+  }),
+
+  hookWidgetConfig({
+    widgetId: 'reference.component',
+    label: 'The default asset selector.',
+    priority: 10,
+    loadComponent: () =>
+      import('@c8y/ngx-components/context-dashboard').then(m => m.WidgetAssetSelectorComponent)
+  })
+  // /important
+];

package/src/i18n.ts

@@ -16,3 +16,6 @@ import '@c8y/ngx-components/locales/pt_BR.po';
 import '@c8y/ngx-components/locales/zh_CN.po';
 import '@c8y/ngx-components/locales/zh_TW.po';
 // import './locales/de.po'; // <- adding additional strings to the german translation.
+
+import './translations/locales/pt_BR.po';
+import './translations/locales/it.po';

package/src/lazy/index.ts

@@ -1 +1,38 @@
-export * from './lazy-routing.module';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+const root = new NavigatorNode({
+  label: 'Lazy loaded',
+  icon: 'hourglass-start'
+});
+
+root.add(
+  new NavigatorNode({
+    path: '/lazy/one',
+    label: 'One',
+    icon: 'thermometer'
+  })
+);
+
+root.add(
+  new NavigatorNode({
+    path: '/lazy/two',
+    label: 'Two',
+    icon: 'thermometer-3'
+  })
+);
+
+export function provideLazySample() {
+  return [
+    /**
+     * Angular Routes.
+     * Within this array at least path (url) and components are linked.
+     */
+    hookRoute([
+      {
+        path: 'lazy',
+        loadChildren: () => import('./lazy-loaded.module').then(m => m.LazyLoadedModule)
+      }
+    ]),
+    hookNavigator(root)
+  ];
+}

package/src/lazy-widget/index.ts

@@ -1 +1,26 @@
-export * from './lazy-widget.module';
+import { hookWidget } from '@c8y/ngx-components';
+
+async function loadViewComponent() {
+  const { LazyWidgetViewComponent } = await import('./lazy-widget-view');
+  return LazyWidgetViewComponent;
+}
+
+async function loadConfigComponent() {
+  const { LazyWidgetConfigComponent } = await import('./lazy-widget-config');
+  return LazyWidgetConfigComponent;
+}
+
+export function provideLazyWidget() {
+  return [
+    hookWidget({
+      id: 'tutorial-lazy-widget',
+      label: 'Lazy Loaded Widget',
+      description: 'Lazy Loaded Widget',
+      loadComponent: loadViewComponent,
+      loadConfigComponent: loadConfigComponent,
+      data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model')
+      }
+    })
+  ];
+}

package/src/list/index.ts

@@ -1 +1,13 @@
-export * from './lists.module';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+export function provideListsSampleNavigator() {
+  return [
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Lists',
+        icon: 'c8y-device',
+        priority: 97
+      })
+    )
+  ];
+}

package/src/main.ts

@@ -1,5 +1,4 @@
 import './i18n';
-import { applyOptions, loadOptions } from '@c8y/bootstrap';
 
 const barHolder: HTMLElement | null = document.querySelector('body > .init-load');
 export const removeProgress = () => barHolder?.parentNode?.removeChild(barHolder);
@@ -7,14 +6,12 @@ export const removeProgress = () => barHolder?.parentNode?.removeChild(barHolder
 applicationSetup();
 
 async function applicationSetup() {
-  await applyOptions({
-    ...(await loadOptions())
-  });
+  const { loadMetaDataAndPerformBootstrap } = await import('@c8y/bootstrap');
+  const loadBootstrapModule = () =>
+    import(
+      /* webpackPreload: true */
+      './bootstrap'
+    );
 
-  const mod = await import(
-    /* webpackPreload: true */
-    './bootstrap'
-  );
-  const bootstrapApp = mod.bootstrap;
-  return bootstrapApp().then(removeProgress);
+  loadMetaDataAndPerformBootstrap(loadBootstrapModule).then(removeProgress);
 }

package/src/maps/{map-examples.module.ts → index.ts}

@@ -1,11 +1,7 @@
-import { NgModule } from '@angular/core';
 import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
 
-@NgModule({
-  declarations: [],
-  imports: [],
-  exports: [],
-  providers: [
+export function provideMapExampleNavigator() {
+  return [
     hookNavigator(
       new NavigatorNode({
         priority: 20,
@@ -13,6 +9,5 @@ import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
         label: 'Map examples'
       })
     )
-  ]
-})
-export class MapExamplesModule {}
+  ];
+}

package/src/provider-configuration/index.ts

@@ -1,3 +1 @@
 export * from './provider-configuration-example/demo-provider.guard';
-export * from './introduction-example/introduction.component';
-export * from './introduction-example/introduction.module';

package/src/provider-configuration/introduction-example/{introduction.module.ts → index.ts}

@@ -1,8 +1,7 @@
-import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
 
-@NgModule({
-  providers: [
+export function provideProviderConfigurationIntroduction() {
+  return [
     hookRoute({
       path: 'provider-configuration/introduction-example',
       loadComponent: () => import('./introduction.component').then(m => m.IntroductionComponent)
@@ -16,6 +15,5 @@ import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
         parent: 'Provider configuration'
       })
     )
-  ]
-})
-export class IntroductionModule {}
+  ];
+}

package/src/redirect-to-last-route/index.ts

@@ -1 +1,16 @@
-export * from './redirect-to-last-route.module';
+import { EmptyComponent, hookRoute } from '@c8y/ngx-components';
+import { RedirectToLastRouteGuardService } from './redirect-to-last-route-guard.service';
+import { inject } from '@angular/core';
+import { CanActivateFn } from '@angular/router';
+
+export function provideRedirectToLastRoute() {
+  return [
+    hookRoute({
+      path: 'pickLastRoute',
+      canActivate: [
+        ((...args) => inject(RedirectToLastRouteGuardService).canActivate(...args)) as CanActivateFn
+      ],
+      component: EmptyComponent
+    })
+  ];
+}

package/src/redirect-to-last-route/redirect-to-last-route-guard.service.ts

@@ -9,8 +9,17 @@ export class RedirectToLastRouteGuardService {
     if (!this.router.config.length) {
       return false;
     }
-    const lastRoute = this.router.config[this.router.config.length - 1];
-    this.router.navigate([lastRoute.path]);
+
+    for (let i = this.router.config.length - 1; i >= 0; i--) {
+      const route = this.router.config[i];
+      if (!route.path || route.path.includes('pickLastRoute')) {
+        continue;
+      }
+
+      this.router.navigate([route.path]);
+      return false;
+    }
+
     return false;
   };
 }

package/src/selector/alarm-event-selector-example/alarm-event-selector.module.ts

@@ -10,7 +10,7 @@ import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
     }),
     hookNavigator(
       new NavigatorNode({
-        label: 'alarm event selector example',
+        label: 'Alarm event selector example',
         path: '/selector/alarm-event-selector-example',
         icon: 'th-list',
         priority: 15

package/src/selector/asset-selector-example/general-example/asset-selector-example.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { InventoryService } from '@c8y/ngx-components/api';
 import { BehaviorSubject } from 'rxjs';
-import { IIdentified, IManagedObject } from '@c8y/client';
+import { InventoryService, IIdentified, IManagedObject } from '@c8y/client';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@c8y/ngx-components';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';

package/src/translations/index.ts

@@ -1 +1,13 @@
-export * from './translations.module';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+export function provideTranslationsNavigator() {
+  return [
+    hookNavigator(
+      new NavigatorNode({
+        priority: 20,
+        icon: 'rocket',
+        label: 'Translations'
+      })
+    )
+  ];
+}

package/src/user-menu/index.ts

@@ -1 +1,23 @@
-export * from './user-menu.module';
+import { EnvironmentProviders, Provider, inject, provideAppInitializer } from '@angular/core';
+import { AlertService, gettext, UserMenuService } from '@c8y/ngx-components';
+
+export function provideUserMenuSample() {
+  return [
+    provideAppInitializer(() => {
+      const initializerFn = ((userMenu: UserMenuService, alert: AlertService) => {
+        return () => {
+          userMenu.add({
+            icon: 'notification',
+            label: gettext('Notifications'),
+            priority: 0,
+            // method to be called when button in user menu is clicked
+            click: () => {
+              alert.info(gettext('Notification button clicked.'));
+            }
+          });
+        };
+      })(inject(UserMenuService), inject(AlertService));
+      return initializerFn();
+    })
+  ] satisfies (Provider | EnvironmentProviders)[];
+}

package/src/widget/demo-widget-config.component.ts

@@ -1,7 +1,13 @@
 import { Component, Input } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
-import { DynamicComponent, OnBeforeSave, AlertService } from '@c8y/ngx-components';
+import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
+import {
+  DynamicComponent,
+  OnBeforeSave,
+  AlertService,
+  FormGroupComponent
+} from '@c8y/ngx-components';
 import { omit } from 'lodash';
+import { JsonPipe } from '@angular/common';
 import { WidgetConfig } from './widget-config.model';
 
 @Component({
@@ -30,7 +36,9 @@ import { WidgetConfig } from './widget-config.model';
   // We connect our parent Form to this form (for disabling the save button)
   // you can also enable the button by using ContextServiceDashboard.formDisabled
   // property instead (by default it is enabled).
-  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  standalone: true,
+  imports: [FormGroupComponent, FormsModule, JsonPipe]
 })
 export class WidgetConfigDemo implements DynamicComponent, OnBeforeSave {
   /**

package/src/widget/demo-widget.component.ts

@@ -3,8 +3,10 @@ import {
   DismissAlertStrategy,
   DynamicComponentAlert,
   DynamicComponentAlertAggregator,
-  gettext
+  gettext,
+  DatePipe
 } from '@c8y/ngx-components';
+import { NgIf } from '@angular/common';
 import { WidgetConfig } from './widget-config.model';
 
 @Component({
@@ -31,7 +33,9 @@ import { WidgetConfig } from './widget-config.model';
         font-size: 2em;
       }
     `
-  ]
+  ],
+  standalone: true,
+  imports: [NgIf, DatePipe]
 })
 export class WidgetDemo implements OnChanges {
   @Input() config: WidgetConfig;

package/src/widget/index.ts

@@ -1 +1,41 @@
-export * from './demo-widget.module';
+import { DynamicComponentErrorStrategy, hookWidget } from '@c8y/ngx-components';
+import { WidgetDemo } from './demo-widget.component';
+import { WidgetConfigDemo } from './demo-widget-config.component';
+
+export function provideDemoWidget() {
+  return [
+    /**
+     * This demo widget provides an example on how
+     * to use the hookWidget. The component itself
+     * is implemented in the dashboard on the
+     * ../hello/hello.component.html by using the
+     * dynamic-component tag.
+     */
+    hookWidget({
+      id: 'angular.widget.demo',
+      label: 'My angular widget',
+      description: 'This is a description from  angular',
+      component: WidgetDemo,
+      configComponent: WidgetConfigDemo,
+      errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
+      /** new Angular-Dashboard definition */
+      data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        // The settings object can be used to configure the configComponent
+        settings: {
+          noNewWidgets: false, // Set this to true, to don't allow adding new widgets.
+          ng1: {
+            options: {
+              noDeviceTarget: false, // Set this to true to hide the AngularJS device selector.
+              groupsSelectable: false // Set this, if not only devices should be selectable.
+            }
+          }
+        },
+        // Settings that are attached to the display component (in this case: WidgetDemo)
+        displaySettings: {
+          globalTimeContext: true // Set this to true, to add a global time context binding
+        }
+      }
+    })
+  ];
+}

package/src/widget-resolvers/alternative-event.resolver.ts

@@ -1,7 +1,11 @@
 import { Injectable } from '@angular/core';
 import { EventService } from '@c8y/client';
 import { IEvent } from '@c8y/client';
-import { DynamicBulkIIdentifiedResolver, DynamicResolverService } from '@c8y/ngx-components';
+import {
+  DynamicBulkIIdentifiedResolver,
+  DynamicResolverService,
+  gettext
+} from '@c8y/ngx-components';
 
 /**
  * An short alternative to the DynamicEventResolver class using the abstract class DynamicBulkIIdentifiedResolver.
@@ -10,7 +14,9 @@ import { DynamicBulkIIdentifiedResolver, DynamicResolverService } from '@c8y/ngx
 export class SimpleDynamicEventResolver extends DynamicBulkIIdentifiedResolver<
   IEvent & { id: string | number }
 > {
-  protected typeForErrorMessage = 'event';
+  protected errorMessage = gettext(
+    'Unable to retrieve the following event: "{{entityName}}" ({{entityId}}).'
+  );
 
   constructor(
     protected dynamicResolver: DynamicResolverService,

package/src/widget-resolvers/index.ts

@@ -1 +1,47 @@
-export * from './widget-resolvers.module';
+import {
+  DynamicComponentErrorStrategy,
+  DynamicManagedObjectResolver,
+  DynamicWidgetDefinition,
+  hookWidget
+} from '@c8y/ngx-components';
+import { DynamicEventResolver } from './event.resolver';
+import { SimpleDynamicEventResolver } from './alternative-event.resolver';
+import { PropertiesLibraryResolver } from './event-property.resolver';
+
+export function provideWidgetsResolverSample() {
+  return [
+    hookWidget({
+      loadComponent: () =>
+        import('./widget-resolvers.component').then(m => m.WidgetResolversComponent),
+      loadConfigComponent: () =>
+        import('./widget-resolvers-config/widget-resolvers-config.component').then(
+          m => m.WidgetResolversConfigComponent
+        ),
+      id: 'widget-resolvers',
+      label: 'Demo Resolver Widget',
+      description: 'Widget demonstrating resolvers.',
+      resolve: {
+        source: DynamicManagedObjectResolver,
+        event: DynamicEventResolver || SimpleDynamicEventResolver,
+        property: PropertiesLibraryResolver
+      },
+      errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
+      data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        settings: {
+          noNewWidgets: false,
+          widgetDefaults: {
+            _width: 2,
+            _height: 2
+          },
+          ng1: {
+            options: {
+              noDeviceTarget: true,
+              groupsSelectable: false
+            }
+          }
+        }
+      }
+    } satisfies DynamicWidgetDefinition)
+  ];
+}

package/src/widget-resolvers/widget-resolvers-config/widget-resolvers-config.component.ts

@@ -1,16 +1,20 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
+import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
 import { EventService, IEvent, IManagedObject, InventoryService } from '@c8y/client';
 import {
   DynamicComponent,
   DynamicComponentAlert,
-  DynamicComponentAlertAggregator
+  DynamicComponentAlertAggregator,
+  FormGroupComponent
 } from '@c8y/ngx-components';
+import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-widget-resolvers-config',
   templateUrl: './widget-resolvers-config.component.html',
-  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  standalone: true,
+  imports: [FormGroupComponent, FormsModule, NgFor]
 })
 export class WidgetResolversConfigComponent implements OnInit, DynamicComponent {
   events: IEvent[];

package/src/widget-resolvers/widget-resolvers.component.ts

@@ -1,11 +1,15 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { IEvent, IManagedObject } from '@c8y/client';
 import { DynamicComponentAlertAggregator, DynamicComponent } from '@c8y/ngx-components';
+import { FormsModule } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
 import { WidgetConfig } from './widget-config.model';
 
 @Component({
   selector: 'app-widget-resolvers',
-  templateUrl: './widget-resolvers.component.html'
+  templateUrl: './widget-resolvers.component.html',
+  standalone: true,
+  imports: [FormsModule, JsonPipe]
 })
 export class WidgetResolversComponent implements OnInit, DynamicComponent {
   @Input() config: WidgetConfig;