@c8y/tutorial 1019.0.3

package/src/hooks/drawer/right-drawer-tutorial/right-drawer-tutorial.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-right-drawer-tutorial',
+  template: `<p>right-drawer-tutorial works!</p>`,
+  standalone: true
+})
+export class RightDrawerTutorialComponent {}

package/src/hooks/drawer/right-drawer-tutorial/right-drawer.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RightDrawerTutorialComponent } from './right-drawer-tutorial.component';
+import { hookDrawer } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookDrawer([{ component: RightDrawerTutorialComponent, position: 'right', priority: 20 }])
+  ]
+})
+export class RightDrawerModule {}

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

@@ -0,0 +1 @@
+export * from './wizard.module';

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'container-component',
+  template: `
+    <c8y-wizard-header> New header </c8y-wizard-header>
+    <c8y-wizard-body> New body </c8y-wizard-body>
+  `
+})
+export class MinimalSetupComponent {
+  // In this case cancel method is not required, because it is the default button when the <c8y-wizard-footer> tag is missing.
+}

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { WizardComponent } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'multiple-entries-one-component',
+  template: `
+    <c8y-wizard-header> New header entry 1 </c8y-wizard-header>
+    <c8y-wizard-body> New body </c8y-wizard-body>
+    <c8y-wizard-footer>
+      <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>
+  `
+})
+export class MultipleEntriesOne {
+  constructor(private wizardComponent: WizardComponent) {}
+
+  cancel() {
+    this.wizardComponent.close('Cancel triggered');
+  }
+
+  back() {
+    this.wizardComponent.reset('Reset triggered');
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { WizardComponent } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'multiple-entries-two-component',
+  template: `
+    <c8y-wizard-header> New header entry 2 </c8y-wizard-header>
+    <c8y-wizard-body> New body </c8y-wizard-body>
+    <c8y-wizard-footer>
+      <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>
+  `
+})
+export class MultipleEntriesTwo {
+  constructor(private wizardComponent: WizardComponent) {}
+
+  cancel() {
+    this.wizardComponent.close('Cancel triggered');
+  }
+
+  back() {
+    this.wizardComponent.reset();
+  }
+}

package/src/hooks/generic-wizard/minimal-setup/stepper-example.component.html

@@ -0,0 +1,38 @@
+<c8y-wizard-header> New header </c8y-wizard-header>
+<c8y-wizard-body
+  ><c8y-stepper>
+    <cdk-step [stepControl]="formGroupStepOne" label="Device name">
+      <div class="m-l-40 m-r-40 m-t-32">
+        <h4 title="Device name" class="p-b-8">Enter the device name</h4>
+        <c8y-form-group>
+          <div [formGroup]="formGroupStepOne">
+            <input
+              class="form-control"
+              type="text"
+              #nameRef
+              formControlName="name"
+              placeholder="MyDevice"
+              required
+            />
+            <c8y-messages>
+              <c8y-message [name]="'required'" [text]="'Enter the name of the Device'"></c8y-message>
+            </c8y-messages>
+          </div>
+        </c8y-form-group>
+      </div>
+      <c8y-stepper-buttons></c8y-stepper-buttons>
+    </cdk-step>
+    <cdk-step state="final" label="Job done!">
+      <div class="m-l-40 m-r-40 m-t-32">
+        <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
+      </div>
+    </cdk-step></c8y-stepper
+  ></c8y-wizard-body
+>
+<c8y-wizard-footer *ngIf="stepper.selectedIndex === 0"> </c8y-wizard-footer>
+
+<c8y-wizard-footer *ngIf="stepper.selectedIndex === 1">
+  <button (click)="done()" class="btn btn-default" title="{{ 'Done' }}">
+    {{ 'Done' }}
+  </button>
+</c8y-wizard-footer>

package/src/hooks/generic-wizard/minimal-setup/stepper-example.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { C8yStepper, CoreModule, WizardComponent } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'container-component',
+  templateUrl: 'stepper-example.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class StepperExampleComponent implements OnInit {
+  formGroupStepOne: FormGroup;
+  @ViewChild(C8yStepper, { static: true })
+  stepper: C8yStepper;
+  constructor(
+    private wizardComponent: WizardComponent,
+    private fb: FormBuilder
+  ) {}
+
+  ngOnInit() {
+    this.formGroupStepOne = this.fb.group({
+      name: ['', Validators.required]
+    });
+  }
+
+  cancel() {
+    this.wizardComponent.close('Cancel triggered');
+  }
+
+  done() {
+    this.wizardComponent.close('Close triggered');
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Tab } from '@c8y/ngx-components';
+import { Router } from '@angular/router';
+
+@Injectable()
+export class WizardTabs {
+  constructor(public router: Router) {}
+
+  get() {
+    const tabs: Tab[] = [];
+
+    if (this.router.url.match(/wizard/g)) {
+      tabs.push({
+        icon: 'rocket',
+        priority: 1000,
+        label: 'Minimal setup',
+        path: 'wizard/minimal-setup'
+      } as Tab);
+    }
+    return tabs;
+  }
+}

package/src/hooks/generic-wizard/wizard.component.html

@@ -0,0 +1,51 @@
+<c8y-title>Wizard minimal setup example</c8y-title>
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title">Example with only one menu entry.</h4>
+  </div>
+  <div class="card-block">
+    In this example the wizard currently has only one menu entry, which means that the id of the
+    wizard is unique. If the wizard contains only one entry without a path, the list will be skipped.
+    <br />
+
+    <b>Note:</b> If no additional buttons are added, the wizard will automatically add the cancel
+    button.
+  </div>
+  <div class="card-footer">
+    <button (click)="showOneEntryExample()" type="button" class="btn btn-primary" title="wizard">
+      Wizard
+    </button>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title">Example with multiple menu entries.</h4>
+  </div>
+  <div class="card-block">
+    In this example the wizard will have multiple menu entries, which means that every menu entry
+    will share the same 'wizardId'.
+  </div>
+  <div class="card-footer">
+    <button
+      (click)="showMultipleEntriesExample()"
+      type="button"
+      class="btn btn-primary"
+      title="wizard"
+    >
+      Wizard
+    </button>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title">Example with stepper.</h4>
+  </div>
+  <div class="card-block">In this example the wizard will be used with a stepper.</div>
+  <div class="card-footer">
+    <button (click)="showStepperExample()" type="button" class="btn btn-primary" title="wizard">
+      Wizard
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { HeaderModule, WizardConfig, WizardModalService } from '@c8y/ngx-components';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'container-component',
+  templateUrl: 'wizard.component.html',
+  standalone: true,
+  imports: [HeaderModule]
+})
+export class ContainerComponent {
+  destroy$: Subject<boolean> = new Subject<boolean>();
+
+  constructor(private wizardModalService: WizardModalService) {}
+
+  showOneEntryExample() {
+    const wizardConfig: WizardConfig = {
+      headerText: 'One Menu Entry Example',
+      headerIcon: 'rocket',
+      bodyHeaderIcon: 'rocket'
+    };
+
+    const initialState: any = {
+      id: 'singleEntry',
+      wizardConfig
+    };
+    const modalOptions = { initialState };
+
+    this.wizardModalService.show(modalOptions);
+  }
+
+  showMultipleEntriesExample() {
+    const wizardConfig: WizardConfig = {
+      headerText: 'Multiple Entries example',
+      headerIcon: 'rocket',
+      bodyHeaderText: 'Select methods',
+      bodyHeaderIcon: 'rocket'
+    };
+
+    const initialState: any = {
+      id: 'multipleEntries',
+      wizardConfig
+    };
+
+    const modalOptions = { initialState };
+
+    const modalRef = this.wizardModalService.show(modalOptions);
+
+    modalRef.content.onSelect.pipe(takeUntil(this.destroy$)).subscribe(menuEntry => {
+      // handle menu entry
+      console.log(menuEntry);
+    });
+
+    modalRef.content.onClose.pipe(takeUntil(this.destroy$)).subscribe(result => {
+      // handle result
+      console.log(result);
+    });
+
+    modalRef.content.onReset.pipe(takeUntil(this.destroy$)).subscribe(result => {
+      // handle result
+      console.log(result);
+    });
+  }
+
+  showStepperExample() {
+    const wizardConfig: WizardConfig = {
+      headerText: 'Stepper Example',
+      headerIcon: 'c8y-icon-modules',
+      bodyHeaderIcon: 'c8y-icon-modules'
+    };
+
+    const initialState: any = {
+      id: 'stepperExample',
+      wizardConfig
+    };
+    const modalOptions = { initialState };
+
+    this.wizardModalService.show(modalOptions);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
+  }
+}

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

@@ -0,0 +1,79 @@
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
+import { CoreModule, hookNavigator, hookWizard, hookTab } from '@c8y/ngx-components';
+import { MinimalSetupComponent } from './minimal-setup/minimal-setup.component';
+import { MultipleEntriesOne } from './minimal-setup/multiple-entries-one.component';
+import { MultipleEntriesTwo } from './minimal-setup/multiple-entries-two.component';
+import { StepperExampleComponent } from './minimal-setup/stepper-example.component';
+import { WizardTabs } from './wizard-tabs';
+import { ContainerComponent } from './wizard.component';
+
+const routes: Routes = [
+  {
+    path: 'wizard',
+    redirectTo: 'wizard/minimal-setup'
+  },
+  {
+    path: 'wizard/minimal-setup',
+    component: ContainerComponent
+  }
+];
+
+@NgModule({
+  declarations: [MinimalSetupComponent, MultipleEntriesOne, MultipleEntriesTwo],
+  imports: [RouterModule.forChild(routes), CoreModule, FormsModule, ReactiveFormsModule],
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [
+    hookTab(WizardTabs),
+    hookNavigator({
+      label: 'Wizard',
+      icon: 'body',
+      priority: 0,
+      path: 'wizard/minimal-setup',
+      parent: 'Hooks',
+      // TODO: clarify why preventDuplicates is needed
+      preventDuplicates: true
+    }),
+    hookWizard({
+      wizardId: 'singleEntry',
+      // The container component is responsible for handling subsequent steps in the wizard.
+      component: MinimalSetupComponent,
+      // Menu entry name
+      name: "Doesn't matter as it won't be shown anyway since it is a single entry.",
+      // Menu entry icon
+      c8yIcon: 'upload'
+    }),
+    hookWizard({
+      // entry ID, observe that it shares the same ID as the entry below.
+      wizardId: 'multipleEntries',
+      // The container component is responsible for handling subsequent steps in the wizard.
+      component: MultipleEntriesOne,
+      // Menu entry name
+      name: 'Entry 1',
+      // Menu entry icon
+      c8yIcon: 'upload'
+    }),
+    hookWizard({
+      wizardId: 'multipleEntries',
+      // The container component is responsible for handling subsequent steps in the wizard.
+      component: MultipleEntriesTwo,
+      // Menu entry name
+      name: 'Entry 2',
+      // Menu entry icon
+      c8yIcon: 'upload'
+    }),
+    hookWizard({
+      wizardId: 'stepperExample',
+      // The container component is responsible for handling subsequent steps in the wizard.
+      component: StepperExampleComponent,
+      // Menu entry name
+      name: "Doesn't matter as it won't be shown anyway since it is a single entry.",
+      // Menu entry icon
+      c8yIcon: 'upload'
+    })
+  ]
+})
+export class WizardModule {}

package/src/hooks/hooks.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CoreModule, NavigatorNode, hookNavigator } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CoreModule],
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [
+    hookNavigator(
+      new NavigatorNode({
+        priority: 90,
+        icon: 'u-turn',
+        label: 'Hooks'
+      })
+    )
+  ]
+})
+export class HooksModule {}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './hooks.module';

package/src/hooks/navigator/index.ts

@@ -0,0 +1 @@
+export * from './navigator.module';

package/src/hooks/navigator/navigator.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator } from '@c8y/ngx-components';
+import { ExampleNavigationFactory } from './navigator';
+
+/**
+ * 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 hooks = [hookNavigator(ExampleNavigationFactory)];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [...hooks]
+})
+export class NavigatorModule {}

package/src/hooks/navigator/navigator.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { NavigatorNode, NavigatorNodeFactory } from '@c8y/ngx-components';
+import { TimeNavigatorNodeComponent } from './time-navigator-node/time-navigator-node.component';
+
+@Injectable()
+export class ExampleNavigationFactory implements NavigatorNodeFactory {
+  // Implement the get()-method, otherwise the ExampleNavigationFactory
+  // implements the NavigatorNodeFactory interface incorrectly (!)
+  get() {
+    const navs: NavigatorNode[] = [];
+
+    /**
+     * mandatory for a NavigatorNode is:
+     *  - label (string)
+     *  - path (string)
+     * A click on the NavigatorNode will load the given path. Therefore angular loads the
+     * component specified for the corresponding path
+     */
+    navs.push(
+      new NavigatorNode({
+        label: 'Hello',
+        icon: 'rocket',
+        path: '/hello',
+        priority: 100
+      })
+    );
+
+    navs.push({
+      component: TimeNavigatorNodeComponent,
+      priority: -Infinity
+    } as NavigatorNode);
+
+    return navs;
+  }
+}

package/src/hooks/navigator/time-navigator-node/time-navigator-node.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { Observable, timer } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-time-navigator-node',
+  template: `<p class="text-center">Current time:</p>
+    <p class="text-center">{{ currentTime$ | async | date: 'medium' }}</p> `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class TimeNavigatorNodeComponent {
+  currentTime$: Observable<Date>;
+
+  constructor() {
+    this.currentTime$ = timer(0, 1000).pipe(map(() => new Date()));
+  }
+}

package/src/hooks/navigator-route/basic-view/basic-view.component.html

@@ -0,0 +1,7 @@
+<!-- The c8y-title component will display the given string (here: "Action hook example") in the header as title -->
+<c8y-title>Navigator & route</c8y-title>
+<div class="card">
+  <div class="card-block">
+    <p>This is the example of <code>hookNavigator</code> and <code>hookRoute</code>.</p>
+  </div>
+</div>

package/src/hooks/navigator-route/basic-view/basic-view.component.ts

@@ -0,0 +1,18 @@
+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-basic-action-hook-view',
+  templateUrl: './basic-view.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class BasicViewComponent {
+  /**
+   * Your content of the Basic View goes in here!
+   */
+}

package/src/hooks/navigator-route/index.ts

@@ -0,0 +1 @@
+export * from './navigator-route.module';

package/src/hooks/navigator-route/navigator-route.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export const hooks = [
+  hookRoute({
+    path: 'hooks/navigator-route',
+    loadComponent: () => import('./basic-view/basic-view.component').then(m => m.BasicViewComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 60,
+      path: 'hooks/navigator-route',
+      icon: 'navigation',
+      label: 'Navigator-route',
+      parent: 'Hooks'
+    })
+  )
+];
+
+@NgModule({
+  imports: [],
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [...hooks]
+})
+export class NavigatorRouteModule {}

package/src/hooks/route/device/device-info.component.html

@@ -0,0 +1,2 @@
+<c8y-title>Info for {{ route.snapshot.parent.data.contextData.name }}</c8y-title>
+<p>This route has a CanActivate guard attached which randomly activates it.</p>

package/src/hooks/route/device/device-info.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'device-info',
+  templateUrl: './device-info.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class DeviceInfoComponent {
+  constructor(public route: ActivatedRoute) {}
+}

package/src/hooks/route/device/device-tab-context.component.html

@@ -0,0 +1,15 @@
+<c8y-title>Context for {{ route.snapshot.parent.data.contextData.name }}</c8y-title>
+
+<strong>route.snapshot.parent.data.context:</strong>
+<pre>
+  <code>
+    {{route.snapshot.parent.data.context | json}}
+  </code>
+</pre>
+
+<strong>route.snapshot.parent.data.contextData:</strong>
+<pre>
+  <code>
+    {{route.snapshot.parent.data.contextData | json}}
+  </code>
+</pre>

package/src/hooks/route/device/device-tab-context.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'device-tab-context',
+  templateUrl: './device-tab-context.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class DeviceTabContextComponent {
+  constructor(public route: ActivatedRoute) {}
+}

package/src/hooks/route/index.ts

@@ -0,0 +1 @@
+export * from './route.module';

package/src/hooks/route/random.guard.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class RandomGuard implements CanActivate {
+  private random = Math.random() > 0.1;
+
+  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
+    return this.random;
+  }
+}