@c8y/tutorial 1019.0.3

package/src/hello/hello.component.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+/**
+ * The hello.component shows a short introduction text and
+ * a little list of things that you can discover within this
+ * tutorial application.
+ */
+@Component({
+  selector: 'hello',
+  template: `
+    <!-- The c8y-title component will display the given string (here: "Hello") in the header as title -->
+    <c8y-title>Hello</c8y-title>
+    <div class="card">
+      <div class="card-header separator">
+        <h4 class="card-title">{{ introductionText }}</h4>
+      </div>
+      <div class="card-block">
+        <ul>
+          <li>Navigator (panel on the left)</li>
+          <li><a href="#/lists/list-check">Lists</a></li>
+          <li><a href="#/hooks/action">Hooks</a></li>
+          <li><a href="#/quick-link">Quick link</a></li>
+          <li><a href="#/dynamic-forms/introduction">Dynamic forms</a></li>
+          <li><a href="#/help">Help</a></li>
+          <li><a href="#/popconfirm">Pop confirm</a></li>
+          <li><a href="#/css">Styles</a></li>
+          <li><a href="#/grids/client-grid-example">Grid</a></li>
+          <li><a href="#/css">Styles</a></li>
+          <li><a href="#/input">Input</a></li>
+          <li><a href="#/maps/simple">Maps</a></li>
+          <li><a href="#/translations/text-translation/service-translation">Translations</a></li>
+          <li><a href="#/realtime">Realtime</a></li>
+          <li><a href="#/stepper">Stepper</a></li>
+          <li><a href="#/time-picker">Time picker</a></li>
+          <li><a href="#/dashboards/custom">Dashboards</a></li>
+          <li>
+            <a href="#/provider-configuration/introduction-example">Providers configuration </a>
+          </li>
+          <li><a href="#/properties-list">Properties list</a></li>
+        </ul>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class HelloComponent {
+  introductionText: string;
+
+  constructor() {
+    this.introductionText =
+      '... this basic Application will show you some concepts and components about';
+  }
+}

package/src/hello/hello.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HelloComponent } from './hello.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'hello',
+    pathMatch: 'full'
+  },
+  {
+    path: 'hello',
+    component: HelloComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)]
+})
+export class HelloModule {}

package/src/hello/index.ts

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

package/src/help/help-example.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { CommonModule, CoreModule } from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { DeviceListModule } from '@c8y/ngx-components/device-list';
+@Component({
+  selector: 'help-example',
+  template: `<c8y-title>Context help</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <div>
+          The "Help" component adds contextual help to the action bar(question mark icon). The
+          content of contextual help comes from the user guide.
+        </div>
+      </div>
+    </div>
+
+    <c8y-help
+      src="/docs/device-management-application/viewing-all-devices/#viewing-all-devices"
+    ></c8y-help> `,
+  standalone: true,
+  imports: [CoreModule, CommonModule, DeviceGridModule, DeviceListModule]
+})
+export class HelpExampleComponent {}

package/src/help/help-example.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'help',
+      loadComponent: () => import('./help-example.component').then(m => m.HelpExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/help',
+        label: 'Help',
+        icon: 'hand-o-right',
+        priority: 80
+      })
+    )
+  ]
+})
+export class HelpExampleModule {}

package/src/hooks/action/action.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookAction, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { ExampleActionFactory } from './action';
+
+/**
+ * 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 = [
+  hookAction(ExampleActionFactory),
+  hookRoute({
+    path: 'hooks/action',
+    loadComponent: () => import('./basic-view/basic-view.component').then(m => m.BasicViewComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 100,
+      path: 'hooks/action',
+      icon: 'increase',
+      label: 'Action',
+      parent: 'Hooks'
+    })
+  )
+];
+
+@NgModule({
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [...hooks]
+})
+export class ActionModule {}

package/src/hooks/action/action.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Action, ActionFactory } from '@c8y/ngx-components';
+import { get } from 'lodash-es';
+import { LogoutActionComponent } from './logout-action/logout-action.component';
+
+/**
+ * Actions are available through a button (+) within the header.
+ * The actions button is always visible within the header.
+ */
+@Injectable()
+export class ExampleActionFactory implements ActionFactory {
+  // Implement the get()-method, otherwise the ExampleActionFactory
+  // implements the ActionFactory interface incorrectly (!)
+  get(activatedRoute?: ActivatedRoute) {
+    // You can have more than one action
+    // The actions button is rendered as a dropdown of buttons
+    const actions: Action[] = [];
+
+    const isActionNode: boolean = get(activatedRoute, 'snapshot.url[1].path') === 'action';
+
+    if (isActionNode) {
+      // Mandatory for an Action is just a label (string)
+      const someDeviceAction: Action = {
+        label: 'Custom action',
+        action: () => console.log('Custom action is triggered.'),
+        disabled: true,
+        priority: 1
+      };
+
+      const customLogoutButton: Action = {
+        component: LogoutActionComponent
+      };
+
+      actions.push(someDeviceAction);
+      actions.push(customLogoutButton);
+    }
+
+    return actions;
+  }
+}

package/src/hooks/action/basic-view/basic-view.component.html

@@ -0,0 +1,8 @@
+<!-- The c8y-title component will display the given string (here: "Action hook example") in the header as title -->
+<c8y-title>Action</c8y-title>
+<div class="card">
+  <div class="card-block">
+    <p>This is the example of <code>hookAction</code>.</p>
+    <p>See the <code>Logout</code> and <code>Actions</code> buttons in the upper right corner.</p>
+  </div>
+</div>

package/src/hooks/action/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/action/index.ts

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

package/src/hooks/action/logout-action/logout-action.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CoreModule, LoginService } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'app-logout-action',
+  template: `<button class="main-header-button" title="Logout" type="button" (click)="logout()">
+    <i class="icon-2x" c8yIcon="sign-out"></i>
+  </button> `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class LogoutActionComponent {
+  constructor(private loginService: LoginService) {}
+
+  logout() {
+    this.loginService.logout();
+  }
+}

package/src/hooks/action-bar/action-bar.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookActionBar, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { ExampleActionBarFactory } from './action-bar';
+
+/**
+ * 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 = [
+  hookActionBar(ExampleActionBarFactory),
+  hookRoute({
+    path: 'hooks/action-bar',
+    loadComponent: () => import('./basic-view/basic-view.component').then(m => m.BasicViewComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 100,
+      path: 'hooks/action-bar',
+      icon: 'arrows-left-right-diagonal',
+      label: 'Action Bar',
+      parent: 'Hooks'
+    })
+  )
+];
+
+@NgModule({
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [...hooks]
+})
+export class ActionBarModule {}

package/src/hooks/action-bar/action-bar.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ActionBarFactory, ActionBarItem } from '@c8y/ngx-components';
+import { get } from 'lodash-es';
+import { RefreshActionComponent } from './refresh-element/refresh-element.component';
+
+/**
+ * This actions bar button is only visible at 'action-bar' path.
+ */
+@Injectable()
+export class ExampleActionBarFactory implements ActionBarFactory {
+  get(activatedRoute?: ActivatedRoute) {
+    const actions: ActionBarItem[] = [];
+
+    const isActionBarNode: boolean = get(activatedRoute, 'snapshot.url[1].path') === 'action-bar';
+
+    if (isActionBarNode) {
+      actions.push({
+        priority: 500,
+        // If the element is enclosed withing "c8y-action-bar-item" then placement refers to this element.
+        placement: 'right',
+        component: RefreshActionComponent
+      });
+    }
+
+    return actions;
+  }
+}

package/src/hooks/action-bar/basic-view/basic-view.component.html

@@ -0,0 +1,8 @@
+<!-- The c8y-title component will display the given string (here: "Action bar hook example") in the header as title -->
+<c8y-title>Action bar</c8y-title>
+<div class="card">
+  <div class="card-block">
+    <p>This is the example of <code>hookActionBar</code>.</p>
+    <p>See the <code>"Refresh"</code> button in the action bar.</p>
+  </div>
+</div>

package/src/hooks/action-bar/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-bar-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/action-bar/index.ts

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

package/src/hooks/action-bar/refresh-element/refresh-element.component.html

@@ -0,0 +1,15 @@
+<c8y-action-bar-item [placement]="'right'">
+  <li>
+    <a
+      class="btn btn-link"
+      title="{{ 'Only pretends to do something...' }}"
+      (click)="refresh()"
+    >
+      <i
+        c8yIcon="refresh"
+        [ngClass]="{ 'icon-spin': requestInProgress }"
+      ></i>
+      {{ 'Refresh' }}
+    </a>
+  </li>
+</c8y-action-bar-item>

package/src/hooks/action-bar/refresh-element/refresh-element.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-refresh-element',
+  templateUrl: './refresh-element.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class RefreshActionComponent {
+  requestInProgress: boolean;
+
+  refresh(): void {
+    this.requestInProgress = true;
+
+    setTimeout(() => {
+      console.log('Carbon footprint enlarged.');
+      this.requestInProgress = false;
+    }, 1000);
+  }
+}

package/src/hooks/breadcrumbs/basic-view/basic-view.component.html

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

package/src/hooks/breadcrumbs/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-breadcrumb-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/breadcrumbs/breadcrumbs.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookBreadcrumb, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { ExampleBreadcrumbFactory } from './breadcrumbs';
+
+/**
+ * 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 = [
+  hookBreadcrumb(ExampleBreadcrumbFactory),
+  hookRoute({
+    path: 'hooks/breadcrumbs',
+    loadComponent: () => import('./basic-view/basic-view.component').then(m => m.BasicViewComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 80,
+      path: 'hooks/breadcrumbs',
+      icon: 'forward',
+      label: 'Breadcrumbs',
+      parent: 'Hooks'
+    })
+  )
+];
+
+@NgModule({
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [...hooks]
+})
+export class BreadcrumbsModule {}

package/src/hooks/breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Breadcrumb, BreadcrumbFactory, BreadcrumbItem } from '@c8y/ngx-components';
+import { get } from 'lodash-es';
+
+/**
+ * A breadcrumb is a type of secondary navigation scheme that reveals the user’s location
+ * in the application.
+ */
+@Injectable()
+export class ExampleBreadcrumbFactory implements BreadcrumbFactory {
+  // Inject the angular Router
+  constructor(private router: Router) {}
+
+  // Implement the get()-method, otherwise the ExampleBreadcrumbFactory
+  // implements the BreadcrumbFactory interface incorrectly (!)
+  get(activatedRoute?: ActivatedRoute) {
+    // Mandatory for a Breadcrumb is an array of BreadcrumbItem
+    const breadcrumb: Breadcrumb = { items: [] };
+    // Mandatory for a BreadcrumbItem is:
+    //  - path (string)
+    //  - label (string)
+    const breadcrumbItems: BreadcrumbItem[] = [];
+
+    const isTabNode: boolean =
+      get(activatedRoute, 'snapshot.routeConfig.path') === 'tabs/outstanding' ||
+      get(activatedRoute, 'snapshot.routeConfig.path') === 'tabs/awesome';
+
+    const isBreadcrumbsNode: boolean =
+      get(activatedRoute, 'snapshot.routeConfig.path') === 'hooks/breadcrumbs';
+
+    if (isTabNode) {
+      /**
+       * Use angular router to decide if breadcrumbs should be shown.
+       * The following breadcrumbs are displayed if the URL matches
+       * something like: .../apps/tutorial-application/#/tabs/
+       */
+      if (this.router.url.match(/tabs/g)) {
+        breadcrumbItems.push({
+          label: 'tabs',
+          icon: 'plane',
+          path: '/tabs'
+        });
+
+        // if the URL is: .../apps/tutorial-application/#/tabs/awesome
+        // we add another breadcrumb to show!
+        if (this.router.url.match(/awesome/g)) {
+          breadcrumbItems.push({
+            label: 'awesome',
+            path: '/tabs/awesome'
+          });
+        }
+
+        // if the URL is: .../apps/tutorial-application/#/tabs/outstanding
+        // we add another breadcrumb to show!
+        if (this.router.url.match(/outstanding/g)) {
+          breadcrumbItems.push({
+            label: 'outstanding',
+            path: '/tabs/outstanding'
+          });
+        }
+      }
+    }
+
+    if (isBreadcrumbsNode) {
+      /**
+       * Use angular router to decide if breadcrumbs should be shown.
+       * The following breadcrumbs are displayed if the URL matches
+       * something like: .../apps/tutorial-application/#/hooks/
+       */
+      if (this.router.url.match(/hooks/g)) {
+        breadcrumbItems.push({
+          label: 'hooks',
+          icon: 'forward',
+          path: '/hooks/action'
+        });
+
+        // if the URL is: .../apps/tutorial-application/#/hooks/breadcrumb
+        // we add another breadcrumb to show!
+        if (this.router.url.match(/hooks\/breadcrumbs/g)) {
+          breadcrumbItems.push({
+            label: 'breadcrumbs',
+            icon: 'forward',
+            path: '/hooks/breadcrumbs'
+          });
+        }
+      }
+
+      breadcrumb.items = breadcrumbItems;
+      return breadcrumb;
+    }
+  }
+}

package/src/hooks/breadcrumbs/index.ts

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

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

@@ -0,0 +1,11 @@
+<!-- The c8y-title component will display the given string (here: "Component hook example") in the header as title -->
+<c8y-title>Component</c8y-title>
+<div class="card">
+  <div class="card-block">
+    <c8y-dynamic-component
+      componentId="simple.component"
+      [config]="{ text: 'Hello world' }"
+      [mode]="editComponent ? 'config' : 'component'"
+    ></c8y-dynamic-component>
+  </div>
+</div>

package/src/hooks/component/basic-view/basic-view.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-basic-component-hook-view',
+  templateUrl: './basic-view.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class BasicViewComponent {
+  editComponent = false;
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'tut-simple-component',
+  template: `<p>Hello there! I am a simple component added by <code>hookComponent</code>.</p>`,
+  standalone: true
+})
+export class SimpleComponent {}

package/src/hooks/component/component.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookComponent, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+/**
+ * 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 = [
+  hookRoute({
+    path: 'hooks/component',
+    loadComponent: () => import('./basic-view/basic-view.component').then(m => m.BasicViewComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 70,
+      path: 'hooks/component',
+      icon: 'blockly',
+      label: 'Component',
+      parent: 'Hooks'
+    })
+  ),
+  hookComponent({
+    id: 'simple.component',
+    label: 'My simple component',
+    description: 'Nothing to describe',
+    loadComponent: () => import('./basic-view/simple.component').then(m => m.SimpleComponent)
+  })
+];
+
+@NgModule({
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [...hooks]
+})
+export class ComponentModule {}

package/src/hooks/component/index.ts

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

package/src/hooks/drawer/index.ts

@@ -0,0 +1,2 @@
+export * from './right-drawer-tutorial/right-drawer.module';
+export * from './left-drawer-tutorial/left-drawer.module';

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

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

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

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