@c8y/tutorial 1019.6.10 → 1019.6.11

package/cumulocity.config.ts

@@ -173,11 +173,35 @@ export default {
         description: 'A sample for action bar hook.'
       },
       {
-        name: 'Breadcrumbs',
+        name: 'Breadcrumbs hook',
         module: 'BreadcrumbsModule',
         path: './src/hooks/breadcrumbs/breadcrumbs.module.ts',
         description: 'A sample for breadcrumbs hook.'
       },
+      {
+        name: 'Breadcrumbs expand',
+        module: 'BreadcrumbsExpandExampleModule',
+        path: './src/breadcrumbs/expand-example/breadcrumbs-expand-example.module.ts',
+        description: 'A sample for breadcrumbs.'
+      },
+      {
+        name: 'Breadcrumbs outlet',
+        module: 'BreadcrumbsOutletExampleModule',
+        path: './src/breadcrumbs/outlet/breadcrumbs-outlet-example.module.ts',
+        description: 'A sample for breadcrumb outlet.'
+      },
+      {
+        name: 'Breadcrumbs basic',
+        module: 'BreadcrumbsExampleModule',
+        path: './src/breadcrumbs/basic-example/breadcrumbs-example.module.ts',
+        description: 'A sample for breadcrumbs.'
+      },
+      {
+        name: 'Breadcrumbs content projection',
+        module: 'BreadcrumbsContentProjectionExampleModule',
+        path: './src/breadcrumbs/content-projection/breadcrumbs-content-projection-example.module.ts',
+        description: 'A sample for breadcrumbs content projection.'
+      },
       {
         name: 'Component',
         module: 'ComponentModule',
@@ -298,6 +322,12 @@ export default {
         path: './src/alert/alert-example.module.ts',
         description: 'A sample for alerts.'
       },
+      {
+        name: 'App icon example',
+        module: 'AppIconExampleModule',
+        path: './src/app-icon/app-icon-example.module.ts',
+        description: 'An example for App Icon component.'
+      },
       {
         name: 'Client grid example',
         module: 'ClientGridExampleModule',
@@ -538,6 +568,12 @@ export default {
         path: './src/hooks/state/hook-state.module.ts',
         description: 'This is an example for an Action added via service or factory.'
       },
+      {
+        name: 'Device connection status',
+        module: 'DeviceConnectionStatusExampleModule',
+        path: './src/device-connection-status/device-connection-status-example.module.ts',
+        description: 'This is an example of Device connection status icons.'
+      },
       {
         name: 'Pagination',
         module: 'PaginationExampleModule',
@@ -562,6 +598,10 @@ export default {
         'ActionModule',
         'ActionBarModule',
         'BreadcrumbsModule',
+        'BreadcrumbsExampleModule',
+        'BreadcrumbsExpandExampleModule',
+        'BreadcrumbsOutletExampleModule',
+        'BreadcrumbsContentProjectionExampleModule',
         'ComponentModule',
         'WizardModule',
         'StepperHookModule',
@@ -590,6 +630,7 @@ export default {
         'ServiceDashboardModule',
         'NamedContextDashboardModule',
         'AlertExampleModule',
+        'AppIconExampleModule',
         'RightDrawerModule',
         'LeftDrawerModule',
         'AssetSelectorExampleModule',
@@ -629,6 +670,7 @@ export default {
         'StepperModule',
         'ApplicationCardExampleModule',
         'HookStateModule',
+        'DeviceConnectionStatusExampleModule',
         'PaginationExampleModule'
       ]
     }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.6.10",
+  "version": "1019.6.11",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/devkit": "1019.6.10",
-    "@c8y/style": "1019.6.10",
-    "@c8y/ngx-components": "1019.6.10",
-    "@c8y/client": "1019.6.10",
-    "@c8y/bootstrap": "1019.6.10",
+    "@c8y/devkit": "1019.6.11",
+    "@c8y/style": "1019.6.11",
+    "@c8y/ngx-components": "1019.6.11",
+    "@c8y/client": "1019.6.11",
+    "@c8y/bootstrap": "1019.6.11",
     "@angular/cdk": "^16.2.11",
     "ngx-bootstrap": "11.0.2",
     "leaflet": "1.7.1",

package/src/__mocks/scoped-mocks/device-data-grid.ts

@@ -1,10 +1,13 @@
 import { IFetchResponse } from '@c8y/client';
 import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { filterObjectBySearchText, filterObjects } from '../utils/grid';
 import { generateResponse, handleRequest } from '../utils/common';
 import { Observable } from 'rxjs';
 import { generateDevice } from '../../__mocks/utils/generators/managedObjects';
 
 export class DeviceDataGridInterceptor implements HttpInterceptor {
+  // Check handleTotalPagesRequest
+  private totalPages = 100;
   intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
     return handleRequest(req, next, 'inventory/managedObjects', {
       POST: this.mockPOST.bind(this),
@@ -20,25 +23,60 @@ export class DeviceDataGridInterceptor implements HttpInterceptor {
   mockPUT(_requestDescriptor: string) {
     return null;
   }
-  private mockGET(_requestDescriptor: string) {
-    const responseGenerators = this.getResponseGenerators();
+  private mockGET(_requestDescriptor: string, statistics) {
+    const mockedQueryStringParameters = this.getMockedQueryStringParameters();
 
-    for (const urlPart in responseGenerators) {
+    for (const urlPart in mockedQueryStringParameters) {
       if (_requestDescriptor.includes(urlPart)) {
-        const generatorResult = responseGenerators[urlPart]();
+        const generatorResult = mockedQueryStringParameters[urlPart];
         if (generatorResult) {
-          return generateResponse(() => generatorResult);
+          if (statistics?.pageSize === 1) {
+            return this.handleTotalPagesRequest(statistics);
+          }
+          return this.handleDataRequest(_requestDescriptor, statistics);
         }
       }
     }
     return null;
   }
 
-  private getResponseGenerators() {
+  // Sets the totalPages number to 100. Enables pagination in the device grid.
+  // The device grid needs to know the total number of items.
+  private handleTotalPagesRequest(statistics) {
+    statistics.totalPages = this.totalPages;
+    return generateResponse(
+      () => ({
+        managedObjects: [],
+        ...(statistics?.next && { next: statistics.next.toString() })
+      }),
+      statistics
+    );
+  }
+
+  // Handles the data request. Returns data that populates the device grid.
+  private handleDataRequest(_requestDescriptor, statistics) {
+    // statistics?.pageSize depends on the "Items per page" dropdown, where pageSize can be set to 25, 50, or 100.
+    const devices = [...Array(statistics?.pageSize || 25)].map(() => generateDevice());
+
+    const filteredDevices = filterObjects(devices, _requestDescriptor);
+
+    const filteredDevicesByTextSearch = filterObjectBySearchText(
+      filteredDevices,
+      _requestDescriptor
+    );
+    return generateResponse(
+      () => ({
+        managedObjects: [...filteredDevicesByTextSearch],
+        ...(statistics?.next && { next: statistics.next.toString() })
+      }),
+      statistics
+    );
+  }
+
+  private getMockedQueryStringParameters() {
     return {
-      pageSize: () => ({
-        managedObjects: [...[...Array(25)].map(() => generateDevice())]
-      })
+      // Mock only requests that include a `pageSize` parameter.
+      pageSize: true
     };
   }
 }

package/src/__mocks/utils/common.ts

@@ -72,8 +72,10 @@ export function handleRequest(
   const { method = 'GET' } = req?.options || {};
 
   if (requestDescriptor.includes(urlPath) && handlers[method]) {
-    const response = handlers[method](requestDescriptor);
-    return response ? from(Promise.resolve(response)) : next.handle(req);
+    const statistics = generateStatistics(req?.options?.params);
+    const mockedResponse = handlers[method](requestDescriptor, statistics);
+
+    return mockedResponse ? from(Promise.resolve(mockedResponse)) : next.handle(req);
   }
   return next.handle(req);
 }
@@ -112,3 +114,22 @@ export function generateResponse<T>(bodyGenerator: () => T, statistics = DEFAULT
     });
   return newResponse as ResponseWithType<T & { statistics: typeof DEFAULT_STATISTICS }>;
 }
+
+/**
+ * Generates statistics by merging default statistics with external statistics.
+ *
+ * @param params A `Record<string, any>` object containing optional statistics parameters such as `totalPages`, `pageSize`, and `currentPage`.
+ *               - `totalPages` specifies the total number of pages.
+ *               - `pageSize` specifies the number of items per page.
+ *               - `currentPage` specifies the current page number.
+ * @returns A statistics object that enables and handles pagination in the mocked response.
+ */
+function generateStatistics(params: Record<string, any>): typeof DEFAULT_STATISTICS {
+  return {
+    ...DEFAULT_STATISTICS,
+    ...(params?.totalPages && { totalPages: params.totalPages }),
+    ...(params?.pageSize && { pageSize: params.pageSize }),
+    ...(params?.currentPage && { currentPage: params.currentPage }),
+    ...(params?.currentPage && { next: params.currentPage + 1 })
+  } as typeof DEFAULT_STATISTICS;
+}

package/src/__mocks/utils/grid.ts

@@ -58,6 +58,20 @@ export function filterObjects(objects: IManagedObject[], query: string): IManage
   );
 }
 
+/**
+ * Filters objects based on the provided search text
+ */
+export function filterObjectBySearchText(objects: IManagedObject[], query: string) {
+  const regex = /"text":"(.*?)"/;
+  const match = query.match(regex);
+
+  if (match) {
+    const textValue = match[1];
+    return objects.filter(object => filterByName(object, textValue));
+  }
+  return objects;
+}
+
 /**
  * Filters object by name
  */

package/src/app/app.module.ts

@@ -24,6 +24,7 @@ import { WidgetResolversModule } from '../widget-resolvers';
 import { MockModule } from '../__mocks';
 import { IntroductionModule } from '../provider-configuration';
 import { TranslationsModule } from '../translations';
+import { BreadcrumbsNodeModule } from '../breadcrumbs/breadcrumbs.module';
 
 @NgModule({
   declarations: [],
@@ -57,7 +58,8 @@ import { TranslationsModule } from '../translations';
       widgets: [...cockpitDefaultWidgets, ...deviceManagementDefaultWidgets]
     }),
     RedirectToLastRouteModule,
-    MockModule
+    MockModule,
+    BreadcrumbsNodeModule
   ],
 
   providers: [BsModalRef],

package/src/app-icon/app-icon-example.component.html

@@ -0,0 +1,109 @@
+<div class="container-fluid">
+  <div class="content-flex-50 separator-bottom p-t-16 p-b-16">
+    <p class="col-2 a-s-center text-medium">Default icon</p>
+    <div class="col-2 d-col a-i-center">
+      <!-- important -->
+      <c8y-app-icon
+        class="icon-36"
+        [app]="defaultApp1"
+        [contextPath]="defaultApp1.contextPath"
+        [name]="defaultApp1.name"
+      ></c8y-app-icon>
+      <!-- /important -->
+      <p class="text-center">{{defaultApp1.name}}</p>
+    </div>
+    <div class="col-2 d-col a-i-center">
+      <c8y-app-icon
+        class="icon-36"
+        [app]="defaultApp2"
+        [contextPath]="defaultApp2.contextPath"
+        [name]="defaultApp2.name"
+      ></c8y-app-icon>
+      <p class="text-center">{{defaultApp2.name}}</p>
+    </div>
+    <div class="col-2 d-col a-i-center">
+      <c8y-app-icon
+        class="icon-36"
+        [app]="defaultApp3"
+        [contextPath]="defaultApp3.contextPath"
+        [name]="defaultApp3.name"
+      ></c8y-app-icon>
+      <p class="text-center">{{defaultApp3.name}}</p>
+    </div>
+    <div class="col-2 d-col a-i-center">
+      <c8y-app-icon
+        class="icon-36"
+        [app]="defaultApp4"
+        [contextPath]="defaultApp4.contextPath"
+        [name]="defaultApp4.name"
+      ></c8y-app-icon>
+      <p class="text-center">{{defaultApp4.name}}</p>
+    </div>
+    <div class="col-2 d-col a-i-center">
+      <c8y-app-icon
+        class="icon-36"
+        [app]="defaultApp5"
+        [contextPath]="defaultApp5.contextPath"
+        [name]="defaultApp5.name"
+      ></c8y-app-icon>
+      <p class="text-center">{{defaultApp5.name}}</p>
+    </div>
+  </div>
+
+  <div class="content-flex-50 separator-bottom p-t-16 p-b-16" >
+    <p class="col-2 a-s-center text-medium">Custom icon</p>
+    <div class="col-2 d-col a-i-center">
+      <!-- important -->
+      <c8y-app-icon
+      class="icon-36"
+      [app]="customApp1"
+      [contextPath]="customApp1.contextPath"
+      [name]="customApp1.name"
+      ></c8y-app-icon>
+      <!-- /important -->
+      <p class="text-center">{{customApp1.name}}</p>
+    </div>
+    <div class="col-2 d-col a-i-center">
+      <c8y-app-icon
+      class="icon-36"
+      [app]="customApp2"
+      [contextPath]="customApp2.contextPath"
+      [name]="customApp2.name"
+      ></c8y-app-icon>
+      <p class="text-center">{{customApp2.name}}</p>
+    </div>
+    <div class="col-2 d-col a-i-center">
+      <c8y-app-icon
+      class="icon-36"
+      [app]="customApp3"
+      [contextPath]="customApp3.contextPath"
+      [name]="customApp3.name"
+      ></c8y-app-icon>
+      <p class="text-center">{{customApp3.name}}</p>
+    </div>
+  </div>
+
+  <div class="content-flex-50 p-t-16 p-b-16" >
+    <p class="col-2 text-medium a-s-center">Fallback icon</p>
+    <div class="col-2 d-col a-i-center">
+      <!-- important -->
+      <c8y-app-icon
+        [app]="appExample1"
+        class="icon-36"
+        [contextPath]="appExample1.contextPath"
+        [name]="appExample1.name"
+      ></c8y-app-icon>
+      <!-- /important -->
+      <p class="text-center">{{appExample1.name}}</p>
+    </div>
+    <div class="col-2 d-col a-i-center">
+      <c8y-app-icon
+        [app]="appExample2"
+        class="icon-36"
+        [contextPath]="appExample2.contextPath"
+        [name]="appExample2.name"
+      ></c8y-app-icon>
+      <p class="text-center">{{appExample2.name}}</p>
+    </div>
+  </div>
+</div>

package/src/app-icon/app-icon-example.component.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { IApplication } from '@c8y/client';
+import { CoreModule } from '@c8y/ngx-components';
+@Component({
+  selector: 'tut-app-icon-example',
+  templateUrl: './app-icon-example.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class AppIconExampleComponents {
+  appExample1: IApplication = {
+    name: 'Chat',
+    contextPath: 'chat'
+  };
+  appExample2: IApplication = {
+    name: 'Fleet Manager',
+    contextPath: 'fleetmanager'
+  };
+
+  customApp1: IApplication = {
+    name: 'Digital Twin Manager',
+    contextPath: 'dtm',
+    icon: { class: 'c8y-icon-enterprise' }
+  };
+  customApp2: IApplication = {
+    name: 'DataHub',
+    contextPath: 'datahub',
+    icon: { class: 'c8y-icon-data-hub ' }
+  };
+  customApp3: IApplication = {
+    name: 'OEE',
+    contextPath: 'oee',
+    icon: { class: 'c8y-icon-oee' }
+  };
+
+  defaultApp1: IApplication = {
+    name: 'Cockpit',
+    contextPath: 'cockpit'
+  };
+  defaultApp2: IApplication = {
+    name: 'Device Management',
+    contextPath: 'devicemanagement'
+  };
+  defaultApp3: IApplication = {
+    name: 'Administration',
+    contextPath: 'administration'
+  };
+  defaultApp4: IApplication = {
+    name: 'Analytics Builder',
+    contextPath: 'analyticsbuilder'
+  };
+  defaultApp5: IApplication = {
+    name: 'Apama EPL',
+    contextPath: 'apamaepl'
+  };
+}

package/src/app-icon/app-icon-example.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'app-icon',
+      loadComponent: () =>
+        import('./app-icon-example.component').then(m => m.AppIconExampleComponents)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'app-icon',
+        icon: 'notification',
+        label: 'App icon'
+      })
+    )
+  ]
+})
+export class AppIconExampleModule {}

package/src/breadcrumbs/basic-example/breadcrumbs-example.component.html

@@ -0,0 +1,23 @@
+<c8y-title>Breadcrumb</c8y-title>
+
+<div class="card">
+  <!-- important -->
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Breadcrumb'"
+    ></c8y-breadcrumb-item>
+    <c8y-breadcrumb-item
+      [label]="'Breadcrumb expand'"
+      [path]="'/breadcrumbs-expand'"
+    ></c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+  <!-- /important -->
+
+  <div class="card-block">
+    <c8y-breadcrumb-outlet
+      class="app-breadcrumbs"
+      [breadcrumbs]="breadcrumbService.items$ | async"
+    ></c8y-breadcrumb-outlet>
+  </div>
+</div>

package/src/breadcrumbs/basic-example/breadcrumbs-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-breadcrumbs-example',
+  templateUrl: './breadcrumbs-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class BreadcrumbsExampleComponents {
+  constructor(public breadcrumbService: BreadcrumbService) {}
+}

package/src/breadcrumbs/basic-example/breadcrumbs-example.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'breadcrumbs-basic',
+      loadComponent: () =>
+        import('./breadcrumbs-example.component').then(m => m.BreadcrumbsExampleComponents)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'breadcrumbs-basic',
+        icon: 'notification',
+        label: 'Breadcrumbs basic',
+        parent: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsExampleModule {}

package/src/breadcrumbs/breadcrumbs.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookNavigator(
+      new NavigatorNode({
+        icon: 'notification',
+        label: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsNodeModule {}

package/src/breadcrumbs/content-projection/breadcrumbs-content-projection-example.component.html

@@ -0,0 +1,28 @@
+<!-- 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">
+  <!-- important -->
+
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Settings'"
+    ></c8y-breadcrumb-item>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Authentication'"
+    >
+      <span>Projected content</span>
+      <span></span>
+    </c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+  <!-- /important -->
+
+  <div class="card-block">
+    <c8y-breadcrumb-outlet
+      class="app-breadcrumbs"
+      [breadcrumbs]="breadcrumbService.items$ | async"
+    ></c8y-breadcrumb-outlet>
+  </div>
+</div>

package/src/breadcrumbs/content-projection/breadcrumbs-content-projection-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-breadcrumbs-example',
+  templateUrl: './breadcrumbs-content-projection-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class BreadcrumbsContentProjectionExampleComponents {
+  constructor(public breadcrumbService: BreadcrumbService) {}
+}

package/src/breadcrumbs/content-projection/breadcrumbs-content-projection-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'breadcrumbs-content-projection',
+      loadComponent: () =>
+        import('./breadcrumbs-content-projection-example.component').then(
+          m => m.BreadcrumbsContentProjectionExampleComponents
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'breadcrumbs-content-projection',
+        icon: 'notification',
+        label: 'Breadcrumbs content projection',
+        parent: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsContentProjectionExampleModule {}

package/src/breadcrumbs/expand-example/breadcrumbs-expand-example.component.html

@@ -0,0 +1,30 @@
+<c8y-title>Breadcrumb</c8y-title>
+
+<div class="card">
+  <!-- important -->
+
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Group A'"
+    ></c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Group B'"
+    ></c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+  <!-- /important -->
+
+  <div
+    class="card-block"
+    style="height: 70px"
+  >
+    <c8y-breadcrumb-outlet
+      class="app-breadcrumbs"
+      [breadcrumbs]="breadcrumbService.items$ | async"
+    ></c8y-breadcrumb-outlet>
+  </div>
+</div>

package/src/breadcrumbs/expand-example/breadcrumbs-expand-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-breadcrumbs-expand-example',
+  templateUrl: './breadcrumbs-expand-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class BreadcrumbsExpandExampleComponents {
+  constructor(public breadcrumbService: BreadcrumbService) {}
+}

package/src/breadcrumbs/expand-example/breadcrumbs-expand-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'breadcrumbs-expand',
+      loadComponent: () =>
+        import('./breadcrumbs-expand-example.component').then(
+          m => m.BreadcrumbsExpandExampleComponents
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'breadcrumbs-expand',
+        icon: 'notification',
+        label: 'Breadcrumbs expand',
+        parent: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsExpandExampleModule {}

package/src/breadcrumbs/index.ts

@@ -0,0 +1,5 @@
+export * from './basic-example/breadcrumbs-example.module';
+export * from './expand-example/breadcrumbs-expand-example.module';
+export * from './outlet/breadcrumbs-outlet-example.module';
+export * from './content-projection/breadcrumbs-content-projection-example.module';
+export * from './breadcrumbs.module';

package/src/breadcrumbs/outlet/breadcrumbs-outlet-example.component.html

@@ -0,0 +1,21 @@
+<c8y-title>Breadcrumb outlet</c8y-title>
+
+<div class="card">
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Group A'"
+    ></c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+
+
+  <div class="card-block">
+  <!-- important -->
+
+    <c8y-breadcrumb-outlet
+      class="app-breadcrumbs"
+      [breadcrumbs]="breadcrumbService.items$ | async"
+    ></c8y-breadcrumb-outlet>
+  <!-- /important -->
+  </div>
+</div>

package/src/breadcrumbs/outlet/breadcrumbs-outlet-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-breadcrumbs-outlet-example',
+  templateUrl: './breadcrumbs-outlet-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class BreadcrumbsOutletExampleComponent {
+  constructor(public breadcrumbService: BreadcrumbService) {}
+}

package/src/breadcrumbs/outlet/breadcrumbs-outlet-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'breadcrumbs-outlet',
+      loadComponent: () =>
+        import('./breadcrumbs-outlet-example.component').then(
+          m => m.BreadcrumbsOutletExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'breadcrumbs-outlet',
+        icon: 'notification',
+        label: 'Breadcrumbs outlet',
+        parent: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsOutletExampleModule {}

package/src/device-connection-status/device-connection-status-example.component.html

@@ -0,0 +1,145 @@
+<c8y-title>Device connection status</c8y-title>
+<div class="container-fluid p-t-16">
+  <c8y-list-group class="no-border-last">
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4 text-medium">Connection status</div>
+        <div class="col-3 text-medium">
+          Size
+          <code>20</code>
+          <small class="text-muted"><em>(default)</em></small>
+        </div>
+        <div class="col-3 text-medium">
+          Size
+          <code>32</code>
+        </div>
+        <div class="col-2 text-medium">
+          Size
+          <code>64</code>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: available</span>
+          <br />
+          <span>Push connection: active</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <!-- important -->
+          <c8y-device-status [mo]="connectedAndAvailableDeviceExample"></c8y-device-status>
+          <!-- /important -->
+        </div>
+        <div class="col-3">
+          <!-- important -->
+          <c8y-device-status
+            [size]="32"
+            [mo]="connectedAndAvailableDeviceExample"
+          ></c8y-device-status>
+          <!-- /important -->
+        </div>
+        <div class="col-2">
+          <!-- important -->
+          <c8y-device-status
+            [size]="64"
+            [mo]="connectedAndAvailableDeviceExample"
+          ></c8y-device-status>
+          <!-- /important -->
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: available</span>
+          <br />
+          <span>Push connection: inactive</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="disconnectedAndAvailableExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="disconnectedAndAvailableExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="disconnectedAndAvailableExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: unavailable</span>
+          <br />
+          <span>Push connection: inactive</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="disconnectedAndUnavailableDeviceExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="disconnectedAndUnavailableDeviceExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="disconnectedAndUnavailableDeviceExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: not monitored</span>
+          <br />
+          <span>Push connection: inactive</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="notMonitoredDeviceExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="notMonitoredDeviceExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="notMonitoredDeviceExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">Maintenance</div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="inMaintenanceDeviceExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="inMaintenanceDeviceExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="inMaintenanceDeviceExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+  </c8y-list-group>
+</div>

package/src/device-connection-status/device-connection-status-example.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { CoreModule, DeviceStatusModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-device-connection-status-example',
+  templateUrl: `./device-connection-status-example.component.html`,
+  standalone: true,
+  imports: [CoreModule, DeviceStatusModule]
+})
+export class DeviceConnectionStatusExampleComponent {
+  private readonly CONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      lastMessage: '2024-01-01T00:00:00.000Z',
+      status: 'AVAILABLE'
+    },
+    c8y_Connection: {
+      status: 'CONNECTED'
+    }
+  };
+
+  private readonly DISCONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      lastMessage: '2024-01-01T00:00:00.000Z',
+      status: 'AVAILABLE'
+    },
+    c8y_Connection: {
+      status: 'DISCONNECTED'
+    }
+  };
+
+  private readonly DISCONNECTED_AND_UNAVAILABLE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      lastMessage: '2024-01-01T00:00:00.000Z',
+      status: 'UNAVAILABLE'
+    },
+    c8y_Connection: {
+      status: 'DISCONNECTED'
+    }
+  };
+
+  private readonly NOT_MONITORED_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {}
+  };
+
+  private readonly IN_MAINTENANCE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      status: 'MAINTENANCE'
+    },
+    c8y_Connection: {}
+  };
+
+  connectedAndAvailableDeviceExample = this.CONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE;
+  disconnectedAndAvailableExample = this.DISCONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE;
+  disconnectedAndUnavailableDeviceExample = this.DISCONNECTED_AND_UNAVAILABLE_DEVICE_EXAMPLE;
+  notMonitoredDeviceExample = this.NOT_MONITORED_DEVICE_EXAMPLE;
+  inMaintenanceDeviceExample = this.IN_MAINTENANCE_DEVICE_EXAMPLE;
+}

package/src/device-connection-status/device-connection-status-example.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'device-connection-status',
+      loadComponent: () =>
+        import('./device-connection-status-example.component').then(
+          m => m.DeviceConnectionStatusExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/device-connection-status',
+        label: 'Device connection status',
+        icon: 'realtime',
+        priority: 15
+      })
+    )
+  ]
+})
+export class DeviceConnectionStatusExampleModule {}

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreModule } from '@c8y/ngx-components';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
 
 /**
  * This is a standard angular component.
@@ -15,4 +15,6 @@ export class BasicViewComponent {
   /**
    * Your content of the Basic View goes in here!
    */
+
+  constructor(public breadcrumbService: BreadcrumbService) {}
 }