@c8y/tutorial 1021.81.0 → 1022.3.2

package/src/hooks/generic-wizard/minimal-setup/multiple-entries-one.component.ts

@@ -1,5 +1,10 @@
 import { Component } from '@angular/core';
-import { WizardComponent } from '@c8y/ngx-components';
+import {
+  WizardComponent,
+  WizardHeaderComponent,
+  WizardBodyComponent,
+  WizardFooterComponent
+} from '@c8y/ngx-components';
 
 @Component({
   selector: 'multiple-entries-one-component',
@@ -10,7 +15,9 @@ import { WizardComponent } from '@c8y/ngx-components';
       <button class="btn btn-default" title="{{ 'Back' }}" (click)="back()">Back</button>
       <button class="btn btn-default" title="{{ 'Cancel' }}" (click)="cancel()">Cancel</button>
     </c8y-wizard-footer>
-  `
+  `,
+  standalone: true,
+  imports: [WizardHeaderComponent, WizardBodyComponent, WizardFooterComponent]
 })
 export class MultipleEntriesOne {
   constructor(private wizardComponent: WizardComponent) {}

package/src/hooks/generic-wizard/minimal-setup/multiple-entries-two.component.ts

@@ -1,5 +1,10 @@
 import { Component } from '@angular/core';
-import { WizardComponent } from '@c8y/ngx-components';
+import {
+  WizardComponent,
+  WizardHeaderComponent,
+  WizardBodyComponent,
+  WizardFooterComponent
+} from '@c8y/ngx-components';
 
 @Component({
   selector: 'multiple-entries-two-component',
@@ -10,7 +15,9 @@ import { WizardComponent } from '@c8y/ngx-components';
       <button class="btn btn-default" title="{{ 'Back' }}" (click)="back()">Back</button>
       <button class="btn btn-default" title="{{ 'Cancel' }}" (click)="cancel()">Cancel</button>
     </c8y-wizard-footer>
-  `
+  `,
+  standalone: true,
+  imports: [WizardHeaderComponent, WizardBodyComponent, WizardFooterComponent]
 })
 export class MultipleEntriesTwo {
   constructor(private wizardComponent: WizardComponent) {}

package/src/hooks/generic-wizard/wizard.module.ts

@@ -21,8 +21,15 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [MinimalSetupComponent, MultipleEntriesOne, MultipleEntriesTwo],
-  imports: [RouterModule.forChild(routes), CoreModule, FormsModule, ReactiveFormsModule],
+  imports: [
+    RouterModule.forChild(routes),
+    CoreModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MinimalSetupComponent,
+    MultipleEntriesOne,
+    MultipleEntriesTwo
+  ],
   /**
    * Adding the hooks to the providers:
    */

package/src/hooks/index.ts

@@ -1 +1,13 @@
-export * from './hooks.module';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+export function provideHooksSample() {
+  return [
+    hookNavigator(
+      new NavigatorNode({
+        priority: 90,
+        icon: 'u-turn',
+        label: 'Hooks'
+      })
+    )
+  ];
+}

package/src/hooks/navigator/index.ts

@@ -1 +1,12 @@
-export * from './navigator.module';
+import { hookNavigator } from '@c8y/ngx-components';
+import { ExampleNavigationFactory } from './navigator';
+
+export function provideHooksNavigatorSample() {
+  /**
+   * 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.
+   */
+  return [hookNavigator(ExampleNavigationFactory)];
+}

package/src/hooks/route/index.ts

@@ -1 +1,42 @@
-export * from './route.module';
+import { hookRoute, ViewContext } from '@c8y/ngx-components';
+import { RandomGuard } from './random.guard';
+
+export function provideRouteSample() {
+  return [
+    /**
+     * Route hooks allow you to use routes as child routes on a ViewContext. If used with a context
+     * the particular data is resolved automatically and the page is extended by a tab. Contexts
+     * are currently Application, Device, Group, Tenant and User. Note: All components used here
+     * needs to be used as EntryComponent!
+     * This example will add a device tab with all the context information as well as a randomly
+     * guarded context tab.
+     *
+     */
+    hookRoute([
+      {
+        path: 'context',
+        context: ViewContext.Device,
+        loadComponent: () =>
+          import('./device/device-tab-context.component').then(m => m.DeviceTabContextComponent),
+        label: 'Context',
+        priority: 1000,
+        icon: 'bell'
+      },
+      {
+        path: 'info',
+        context: ViewContext.Device,
+        loadComponent: () =>
+          import('./device/device-info.component').then(m => m.DeviceInfoComponent),
+        label: 'Info',
+        priority: 0,
+        icon: 'info',
+        /**
+         * An example of an route guard which randomly activates
+         * the child route. See Guards documentation from Angular
+         * for more details.
+         */
+        canActivate: [RandomGuard]
+      }
+    ])
+  ];
+}

package/src/hooks/stepper/basic-view/basic-view.component.ts

@@ -1,6 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { SetupStep, StepperService, Steppers } from '@c8y/ngx-components';
+import {
+  SetupStep,
+  StepperService,
+  Steppers,
+  TitleComponent,
+  StepperOutletComponent
+} from '@c8y/ngx-components';
 import { firstValueFrom } from 'rxjs';
+import { NgIf } from '@angular/common';
 
 /**
  * This is a standard angular component.
@@ -21,7 +28,9 @@ import { firstValueFrom } from 'rxjs';
         </div>
       </div>
     </div>
-  `
+  `,
+  standalone: true,
+  imports: [TitleComponent, NgIf, StepperOutletComponent]
 })
 export class BasicViewComponent implements OnInit {
   readonly stepperId = Steppers.SETUP;

package/src/hooks/stepper/stepper-hook.module.ts

@@ -13,8 +13,13 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [BasicViewComponent, Step1Component, Step2Component],
-  imports: [RouterModule.forChild(routes), CoreModule],
+  imports: [
+    RouterModule.forChild(routes),
+    CoreModule,
+    BasicViewComponent,
+    Step1Component,
+    Step2Component
+  ],
   /**
    * Adding the hooks to the providers:
    */

package/src/hooks/stepper/steps/step1.component.ts

@@ -1,7 +1,20 @@
 import { CdkStep } from '@angular/cdk/stepper';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { C8yStepper } from '@c8y/ngx-components';
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import {
+  C8yStepper,
+  FormGroupComponent,
+  RequiredInputPlaceholderDirective,
+  MessagesComponent,
+  MessageDirective,
+  C8yStepperButtons
+} from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-step-1-device',
@@ -22,7 +35,17 @@ import { C8yStepper } from '@c8y/ngx-components';
         (onNext)="goToNextStep($event)"
       ></c8y-stepper-buttons>
     </div>
-  `
+  `,
+  standalone: true,
+  imports: [
+    FormGroupComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    RequiredInputPlaceholderDirective,
+    MessagesComponent,
+    MessageDirective,
+    C8yStepperButtons
+  ]
 })
 export class Step1Component implements OnInit {
   formGroupStepOne: FormGroup;

package/src/hooks/stepper/steps/step2.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { C8yStepperButtons } from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-step-2-device',
@@ -10,7 +11,9 @@ import { Component } from '@angular/core';
       [showButtons]="{ next: false, cancel: false, back: true, custom: false }"
       [labels]="{ back: 'Got it!' }"
     ></c8y-stepper-buttons>
-  `
+  `,
+  standalone: true,
+  imports: [C8yStepperButtons]
 })
 export class Step2Component {
   close() {

package/src/hooks/widget-config/additional-config/additional-config.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+/**
+ * This is a standard angular component.
+ * Obviously it does not do anything.
+ */
+@Component({
+  selector: 'tut-additional-config-component',
+  template: 'Any additional configuration can be done here.',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class AdditionalConfigComponent {
+  editComponent = false;
+}

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

@@ -0,0 +1,18 @@
+<div class="card">
+  <div class="card-block">
+    <c8y-widget-config-section
+      *ngFor="let section of widgetConfigService.currentSections$ | async; let i = index"
+      [section]="section"
+    ></c8y-widget-config-section>
+  </div>
+
+  <div class="card-block">
+    <label>The configuration is:</label>
+    <code>
+      <pre>
+    {{ widgetConfigService.currentConfig$ | async | json }}
+  </pre
+      >
+    </code>
+  </div>
+</div>

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)[];
+}