@c8y/tutorial 1019.6.10 → 1019.7.10

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',
@@ -358,12 +388,6 @@ export default {
         path: './src/properties-list/properties-list-example.module.ts',
         description: 'An example of using properties list.'
       },
-      {
-        name: 'Modal example',
-        module: 'ModalExampleModule',
-        path: './src/modal/simple-modal/modal.example.module.ts',
-        description: 'An example for using Modal.'
-      },
       {
         name: 'Confirm modal example',
         module: 'ConfirmModalExampleModule',
@@ -382,6 +406,24 @@ export default {
         path: './src/modal/ngx-modal/ngx-modal-example.module.ts',
         description: 'An example for ngx modal.'
       },
+      {
+        name: 'Example of ngx modal sizes',
+        module: 'NgxModalSizesExampleModule',
+        path: './src/modal/ngx-modal-sizes/ngx-modal-sizes-example.module.ts',
+        description: 'An example for ngx modal of different sizes.'
+      },
+      {
+        name: 'Example of ngx modal selectors',
+        module: 'NgxModalSelectorsExampleModule',
+        path: './src/modal/ngx-modal-selectors/ngx-modal-selectors-example.module.ts',
+        description: 'An example for ngx modal using ng-content selectors.'
+      },
+      {
+        name: 'Example of ngx modal accessibility',
+        module: 'NgxModalAccessibilityExampleModule',
+        path: './src/modal/ngx-modal-accessibility/ngx-modal-accessibility-example.module.ts',
+        description: 'An example for ngx modal accessibility.'
+      },
       {
         name: 'Example of realtime',
         module: 'RealtimeTutorialModule',
@@ -538,6 +580,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',
@@ -550,6 +598,9 @@ export default {
         'FormsTutorialModule',
         'TextTranslationNgnonbindableModule',
         'NgxModalExampleModule',
+        'NgxModalSizesExampleModule',
+        'NgxModalSelectorsExampleModule',
+        'NgxModalAccessibilityExampleModule',
         'JsonSchemaExampleModule',
         'IntroductionExampleModule',
         'CustomElementExampleModule',
@@ -562,6 +613,10 @@ export default {
         'ActionModule',
         'ActionBarModule',
         'BreadcrumbsModule',
+        'BreadcrumbsExampleModule',
+        'BreadcrumbsExpandExampleModule',
+        'BreadcrumbsOutletExampleModule',
+        'BreadcrumbsContentProjectionExampleModule',
         'ComponentModule',
         'WizardModule',
         'StepperHookModule',
@@ -590,13 +645,13 @@ export default {
         'ServiceDashboardModule',
         'NamedContextDashboardModule',
         'AlertExampleModule',
+        'AppIconExampleModule',
         'RightDrawerModule',
         'LeftDrawerModule',
         'AssetSelectorExampleModule',
         'AssetSelectorMillerExampleModule',
         'AssetSelectorTreeExampleModule',
         'DatapointSelectionExampleModule',
-        'ModalExampleModule',
         'ConfirmModalExampleModule',
         'TutorialVersionModule',
         'PopConfirmExampleModule',
@@ -629,6 +684,7 @@ export default {
         'StepperModule',
         'ApplicationCardExampleModule',
         'HookStateModule',
+        'DeviceConnectionStatusExampleModule',
         'PaginationExampleModule'
       ]
     }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.6.10",
+  "version": "1019.7.10",
   "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.7.10",
+    "@c8y/style": "1019.7.10",
+    "@c8y/ngx-components": "1019.7.10",
+    "@c8y/client": "1019.7.10",
+    "@c8y/bootstrap": "1019.7.10",
     "@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

@@ -12,8 +12,6 @@ import { from } from 'rxjs';
  * @param urlPath - The URL path which will be used to determine if the request should be handled. If the request URL includes this path, a handler will be searched for.
  * @param handlers - An object mapping HTTP methods to their respective handlers. These handlers are functions that accept a string argument (requestDescriptor), which is a combination of the request URL and any parameters or body, and return either a Promise or an object of `IFetchResponse` type.
  *
- * For example:
- *
  * ```typescript
  * {
  *   POST: mockPOSTFunction,
@@ -25,7 +23,7 @@ import { from } from 'rxjs';
  * If a handler is found for the HTTP method of the request, the handler function is called with the `requestDescriptor` as its argument.
  * @returns An Observable which will either contain the response from the matched handler function or, if no handler is matched, the result of the `next.handle(req)` call.
  *
- * @example
+ *
  * In the example below, all requests to inventory/managedObjects will pass through the interceptor.
  *
  * ```typescript
@@ -45,7 +43,6 @@ import { from } from 'rxjs';
  *   mockPUT(_requestDescriptor: string) {
  *    return null;
  *   }
- *   ...
  * }
  * ```
  */
@@ -72,8 +69,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 +111,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) {}
+}