@c8y/tutorial 1022.10.1 → 1022.13.0

package/cumulocity.config.ts

@@ -192,6 +192,13 @@ export default {
         description: 'A sample for simple map.',
         scope: 'self'
       },
+      {
+        name: 'Simple map with custom config',
+        module: 'SimpleMapCustomConfigModule',
+        path: './src/maps/simple-map-custom-config/simple-map-custom-config.module.ts',
+        description: 'A sample for simple map with custom config.',
+        scope: 'self'
+      },
       {
         name: 'Cluster map',
         module: 'ClusterMapExampleModule',
@@ -214,10 +221,17 @@ export default {
         scope: 'self'
       },
       {
-        name: 'Preview feature',
-        module: 'PreviewFeatureModule',
-        path: './src/hooks/preview-feature/preview-feature.module.ts',
-        description: 'A sample for feature preview hook.',
+        name: 'Default Preview feature',
+        module: 'PreviewFeatureDefaultModule',
+        path: './src/hooks/preview-feature/basic-view-default/preview-feature-default.module.ts',
+        description: 'A sample for default feature preview hook.',
+        scope: 'self'
+      },
+      {
+        name: 'Custom Preview feature',
+        module: 'PreviewFeatureCustomModule',
+        path: './src/hooks/preview-feature/basic-view-custom/preview-feature-custom.module.ts',
+        description: 'A sample for custom feature preview hook.',
         scope: 'self'
       },
       {
@@ -290,6 +304,13 @@ export default {
         description: 'A sample for tabs hook.',
         scope: 'self'
       },
+      {
+        name: 'Named router outlet',
+        module: 'NamedOutletModule',
+        path: './src/hooks/tabs/named-outlet/named-outlet.module.ts',
+        description: 'A sample for named router outlet and related hooks.',
+        scope: 'self'
+      },
       {
         name: 'Navigator-route',
         module: 'NavigatorRouteModule',
@@ -780,6 +801,13 @@ export default {
         description: 'This is an example for an Action added via service or factory.',
         scope: 'self'
       },
+      {
+        name: 'Hooking via service',
+        module: 'HookDocsModule',
+        path: './src/hooks/docs/hook-docs.module.ts',
+        description: 'This is an example for an hook docs added via module or service.',
+        scope: 'self'
+      },
       {
         name: 'Device connection status',
         module: 'DeviceConnectionStatusExampleModule',
@@ -821,6 +849,13 @@ export default {
         path: './src/hooks/widget-config/widget-config.providers.ts',
         description: 'This is an example for the bottom drawer service.',
         scope: 'self'
+      },
+      {
+        name: 'Widget Hook',
+        module: 'widgetHookProviders',
+        path: './src/hooks/widget/widget.providers.ts',
+        description: 'This is an example for the bottom drawer service.',
+        scope: 'self'
       }
     ]
   },

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1022.10.1",
+  "version": "1022.13.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1022.10.1",
-    "@c8y/ngx-components": "1022.10.1",
-    "@c8y/client": "1022.10.1",
-    "@c8y/bootstrap": "1022.10.1",
+    "@c8y/style": "1022.13.0",
+    "@c8y/ngx-components": "1022.13.0",
+    "@c8y/client": "1022.13.0",
+    "@c8y/bootstrap": "1022.13.0",
     "@angular/cdk": "^19.2.18",
     "ngx-bootstrap": "19.0.2",
     "leaflet": "1.9.4",
     "rxjs": "7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1022.10.1",
-    "@c8y/devkit": "1022.10.1"
+    "@c8y/options": "1022.13.0",
+    "@c8y/devkit": "1022.13.0"
   },
   "peerDependencies": {
     "@angular/common": ">=19 <20"

package/src/__mocks/global-mocks/inventory.interceptor.ts

@@ -69,8 +69,13 @@ export class InventoryInterceptor implements HttpInterceptor {
       'has(c8y_IsDeviceGroup)': () => ({
         managedObjects: [...[...Array(5)].map(() => generateGroup())]
       }),
+      // generate 3 realtime devices for the map example
       'has(c8y_Position)': () => ({
-        managedObjects: [generateRealtimeDeviceMO()]
+        managedObjects: [
+          generateRealtimeDeviceMO(),
+          generateRealtimeDeviceMO(),
+          generateRealtimeDeviceMO()
+        ]
       }),
       'has(c8y_IsDevice)': () => ({
         managedObjects: [...[...Array(5)].map(() => generateDevice())]

package/src/__mocks/global-mocks/provider-configuration.ts

@@ -0,0 +1,62 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+
+export class ProviderConfigurationsApiInterceptor implements HttpInterceptor {
+  configurations = [
+    { id: 'provider1', config: { username: 'user1', password: 'pass1' } },
+    { id: 'provider2', config: { username: 'user2', password: 'pass2' } }
+  ];
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, '/service/demo/providers/configuration', {
+      GET: this.mockGET.bind(this),
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      DELETE: this.mockDELETE.bind(this)
+    });
+  }
+
+  private async mockGET(_requestDescriptor: string) {
+    return {
+      status: 200,
+      json: async () => this.configurations
+    };
+  }
+
+  private async mockPOST(requestDescriptor: string) {
+    const bodyStartIndex = requestDescriptor.indexOf('{');
+    const body = bodyStartIndex !== -1 ? JSON.parse(requestDescriptor.slice(bodyStartIndex)) : {};
+    this.configurations.push(body);
+    return {
+      status: 201,
+      json: async () => body
+    };
+  }
+
+  private async mockPUT(requestDescriptor: string) {
+    const bodyStartIndex = requestDescriptor.indexOf('{');
+    const body = bodyStartIndex !== -1 ? JSON.parse(requestDescriptor.slice(bodyStartIndex)) : {};
+    const idx = this.configurations.findIndex(c => c.id === body.id);
+    if (idx > -1) {
+      this.configurations[idx] = body;
+    }
+    return {
+      status: 200,
+      json: async () => body
+    };
+  }
+
+  private async mockDELETE(requestDescriptor: string) {
+    const match = requestDescriptor.match(/\/configuration\/([^/]+)/);
+    if (match) {
+      const id = match[1];
+      this.configurations = this.configurations.filter(c => c.id !== id);
+    }
+    return {
+      status: 204,
+      json: async () => ({})
+    };
+  }
+}

package/src/__mocks/global-mocks/provider-definitions.ts

@@ -0,0 +1,24 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+
+export class ProviderDefinitionsApiInterceptor implements HttpInterceptor {
+  providers = [
+    { id: 'provider1', name: 'Provider One' },
+    { id: 'provider2', name: 'Provider Two' }
+  ];
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, '/service/demo/providers/definitions', {
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  private async mockGET(_requestDescriptor: string) {
+    return {
+      status: 200,
+      json: async () => this.providers
+    };
+  }
+}

package/src/__mocks/index.ts

@@ -24,6 +24,8 @@ import { EnvironmentProviders, Provider, inject, provideAppInitializer } from '@
 import { MockService } from './mock.service';
 import { IUser } from '@c8y/client';
 import { FeatureApiInterceptor } from './global-mocks/feature-api';
+import { ProviderDefinitionsApiInterceptor } from './global-mocks/provider-definitions';
+import { ProviderConfigurationsApiInterceptor } from './global-mocks/provider-configuration';
 
 export function provideAPIMock() {
   return [
@@ -161,6 +163,22 @@ export function provideAPIMock() {
       } as ApiMockConfig,
       multi: true
     },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'z-global-provider-definitions-interceptor-interceptor',
+        mockService: ProviderDefinitionsApiInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'z-global-provider-configurations-interceptor-interceptor',
+        mockService: ProviderConfigurationsApiInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
     {
       provide: RealtimeSubjectService,
       useExisting: RealtimeSubjectServiceWithMocking

package/src/countdown/countdown-example.component.html

@@ -1,4 +1,7 @@
-<div class="time-elapsed">
+<div class="time-elapsed" 
+  [attr.aria-live]="'polite'" 
+  [attr.aria-label]="'Time remaining until next refresh' | translate"
+>
   <!-- important -->
   <c8y-countdown-interval
     [countdownInterval]="10000"

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

@@ -36,6 +36,7 @@ export class CountdownExampleComponent implements AfterViewInit {
   }
 
   onCountdownEnded(): void {
+    // eslint-disable-next-line no-console
     console.log('Countdown Ended!');
 
     this.resetCountdown();

package/src/dynamic-forms/custom-element-example/custom-element-example.component.ts

@@ -9,7 +9,7 @@ import { FormlyModule } from '@ngx-formly/core';
   selector: 'c8y-custom-element-example',
   template: `<c8y-title>Dynamic forms: Custom element</c8y-title>
     <div class="row">
-      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+      <div class="col-xs-12 col-md-7 col-lg-6">
         <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
           <div class="card-block">
             <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
@@ -20,7 +20,7 @@ import { FormlyModule } from '@ngx-formly/core';
           </div>
         </form>
       </div>
-      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+      <div class="col-xs-12 col-md-5 col-lg-6">
         <div class="card">
           <div class="card-block">
             <div class="legend form-block">Model</div>

package/src/dynamic-forms/introduction-example/introduction-example.component.ts

@@ -8,7 +8,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
   selector: 'c8y-introduction-example',
   template: `<c8y-title>Dynamic forms: Introduction</c8y-title>
     <div class="row">
-      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+      <div class="col-xs-12 col-md-7 col-lg-6">
         <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
           <div class="card-block">
             <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
@@ -19,7 +19,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
           </div>
         </form>
       </div>
-      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+      <div class="col-xs-12 col-md-5 col-lg-6">
         <div class="card">
           <div class="card-block">
             <div class="legend form-block">Model</div>

package/src/dynamic-forms/json-schema-example/json-schema-example.component.html

@@ -1,6 +1,6 @@
 <c8y-title>Dynamic forms: JSON schema</c8y-title>
 <div class="row">
-  <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+  <div class="col-xs-12 col-md-7 col-lg-6">
     <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
       <div class="card-block">
         <!-- important -->
@@ -22,7 +22,7 @@
       </div>
     </form>
   </div>
-  <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+  <div class="col-xs-12 col-md-5 col-lg-6">
     <div class="card">
       <div class="card-block">
         <div class="legend form-block">Model</div>

package/src/dynamic-forms/validation-example/validation-example.component.ts

@@ -13,7 +13,7 @@ export function ipValidator(control: AbstractControl): ValidationErrors {
   selector: 'c8y-validation-example',
   template: `<c8y-title>Dynamic forms: Validation</c8y-title>
     <div class="row">
-      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+      <div class="col-xs-12 col-md-7 col-lg-6">
         <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
           <div class="card-block">
             <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
@@ -24,7 +24,7 @@ export function ipValidator(control: AbstractControl): ValidationErrors {
           </div>
         </form>
       </div>
-      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+      <div class="col-xs-12 col-md-5 col-lg-6">
         <div class="card">
           <div class="card-block">
             <div class="legend form-block">Model</div>

package/src/for-of-directive/for-of-example.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreModule, ForOfFilterPipe } from '@c8y/ngx-components';
+import { CoreModule, ForOfDirective, ForOfFilterPipe, LoadMoreMode } from '@c8y/ngx-components';
 import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
 import { pipe } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
@@ -8,13 +8,13 @@ import { map, tap } from 'rxjs/operators';
   selector: 'c8y-for-of-example',
   templateUrl: './for-of-example.component.html',
   standalone: true,
-  imports: [CoreModule]
+  imports: [CoreModule, ForOfDirective]
 })
 export class ForOfExampleComponent {
   devices: IResultList<IManagedObject>;
   filterPipe: ForOfFilterPipe = pipe(tap());
   config = {
-    loadMore: 'auto',
+    loadMore: 'auto' as LoadMoreMode,
     filter: '',
     pageSize: 10,
     maxIterations: 12

package/src/generate-json-schema/generate-json-schema.component.ts

@@ -6,6 +6,7 @@ import { CoreModule } from '@c8y/ngx-components';
   template: `
     <h3>Base interface</h3>
     <pre>{{ baseInterface }}</pre>
+    <h3>Referenced types in base interface</h3>
     <pre>{{ referencedInterfaces }}</pre>
     <h3>JSON Schema generated from ExampleInterface</h3>
     <pre>{{ schemaString }}</pre>

package/src/hooks/docs/docs-example.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { DocLink, ExtensionFactory } from '@c8y/ngx-components';
+import { Observable, of } from 'rxjs';
+
+@Injectable()
+export class DocsExampleService implements ExtensionFactory<DocLink> {
+  get(): Observable<DocLink[]> {
+    return of([
+      {
+        icon: 'c8y-icon c8y-icon-mobile-add',
+        type: 'doc',
+        url: 'https://cumulocity.com',
+        label: 'Doc link from service'
+      }
+    ]);
+  }
+}

package/src/hooks/docs/hook-docs-example.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { TitleComponent } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-hook-docs-example',
+  imports: [TitleComponent],
+  template: `
+    <c8y-title>Docs</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <p>This is the example of <code>hookDocs</code>.</p>
+        <p>See the <code>Right drawer</code> in the <code>Documentation</code> section.</p>
+      </div>
+    </div>
+  `
+})
+export class HookDocsExampleComponent {}

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { DocLink, hookDocs, hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+import { DocsExampleService } from './docs-example.service';
+
+@NgModule({
+  providers: [
+    hookDocs({
+      icon: 'c8y-icon c8y-icon-mobile-add',
+      type: 'doc',
+      url: 'https://cumulocity.com/docs/',
+      label: 'Doc link from hookDocs'
+    } as DocLink),
+    hookDocs(DocsExampleService),
+    hookRoute({
+      path: 'hooks/docs',
+      loadComponent: () =>
+        import('./hook-docs-example.component').then(m => m.HookDocsExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 100,
+        path: 'hooks/docs',
+        icon: 'document',
+        label: 'Docs',
+        parent: 'Hooks'
+      })
+    )
+  ]
+})
+export class HookDocsModule {}

package/src/hooks/preview-feature/index.ts

@@ -1,3 +1,2 @@
-export * from './preview-feature.module';
 export * from './basic-view-custom/preview-feature-custom.module';
 export * from './basic-view-default/preview-feature-default.module';

package/src/hooks/tabs/named-outlet/basic-view/basic-view.component.html

@@ -0,0 +1,15 @@
+<c8y-title>Named router outlet example</c8y-title>
+<div
+  clas="d-flex"
+  *ngIf="tabs.length"
+>
+  <c8y-tabs-outlet
+    [outletName]="'namedOutletTabs'"
+    [orientation]="'horizontal'"
+    [openFirstTab]="true"
+    [tabs]="tabs"
+  ></c8y-tabs-outlet>
+  <div>
+    <router-outlet name="namedOutlet"></router-outlet>
+  </div>
+</div>

package/src/hooks/tabs/named-outlet/basic-view/basic-view.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Tab, TabsService } from '@c8y/ngx-components';
+import { map } from 'rxjs';
+
+/**
+ * This is a standard angular component.
+ */
+@Component({
+  selector: 'tut-basic-view',
+  templateUrl: './basic-view.component.html',
+  standalone: false
+})
+export class BasicViewComponent {
+  tabs: Tab[] = [];
+
+  constructor(private tabsService: TabsService) {
+    this.tabsService.items$
+      .pipe(
+        map(tabs => tabs.filter(tab => tab.tabsOutlet === 'namedOutletTabs')),
+        takeUntilDestroyed()
+      )
+      .subscribe(tabs => (this.tabs = tabs));
+  }
+}

package/src/hooks/tabs/named-outlet/content-a.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'tut-content-a',
+  template: `<div>This is content for <b>Tab A</b>.</div>`,
+  standalone: true
+})
+export class ContentAComponent {}

package/src/hooks/tabs/named-outlet/content-b.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'tut-content-b',
+  template: `<div>This is content for <b>Tab B</b>.</div>`,
+  standalone: true
+})
+export class ContentBComponent {}

package/src/hooks/tabs/named-outlet/named-outlet.module.ts

@@ -0,0 +1,80 @@
+import { NgModule } from '@angular/core';
+import {
+  CoreModule,
+  hookNavigator,
+  hookRoute,
+  hookTab,
+  NavigatorNode,
+  NavigatorNodeData
+} from '@c8y/ngx-components';
+import { RouterModule } from '@angular/router';
+import { ContentAComponent } from './content-a.component';
+import { ContentBComponent } from './content-b.component';
+import { BasicViewComponent } from './basic-view/basic-view.component';
+
+const hooks = [
+  hookRoute([
+    {
+      path: 'hooks/named-outlet',
+      component: BasicViewComponent,
+      children: [
+        {
+          path: 'content-a',
+          component: ContentAComponent,
+          outlet: 'namedOutlet'
+        },
+        {
+          path: 'content-b',
+          component: ContentBComponent,
+          outlet: 'namedOutlet'
+        }
+      ]
+    }
+  ]),
+  hookTab([
+    {
+      label: 'Tab A',
+      icon: 'web-design',
+      priority: 20,
+      featureId: 'A',
+      path: [
+        {
+          outlets: {
+            ['namedOutlet']: 'content-a'
+          }
+        }
+      ],
+      tabsOutlet: 'namedOutletTabs'
+    },
+    {
+      label: 'Tab B',
+      icon: 'web-design',
+      priority: 10,
+      featureId: 'B',
+      path: [
+        {
+          outlets: {
+            ['namedOutlet']: 'content-b'
+          }
+        }
+      ],
+      tabsOutlet: 'namedOutletTabs'
+    }
+  ]),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 55,
+      path: 'hooks/named-outlet',
+      icon: 'name-tag',
+      label: 'Named router outlet',
+      parent: 'Hooks'
+    } as NavigatorNodeData)
+  )
+];
+
+@NgModule({
+  declarations: [BasicViewComponent],
+  imports: [RouterModule, ContentAComponent, ContentBComponent, CoreModule],
+  providers: [...hooks]
+})
+export class NamedOutletModule {}

package/src/hooks/tabs/tabs.module.ts

@@ -3,9 +3,7 @@ import { NavigatorNode, hookNavigator, hookRoute, hookTab } from '@c8y/ngx-compo
 import { ExampleTabFactory } from './tab';
 
 export const hooks = [
-  // important
   hookTab(ExampleTabFactory),
-  // /important
   hookRoute([
     {
       path: 'hooks/tabs',

package/src/hooks/widget/context-dashboard.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'tut-context-dashboard',
+  template: `<c8y-title>Context dashboard</c8y-title>
+    <c8y-context-dashboard name="example-widget" [canDelete]="false"></c8y-context-dashboard> `,
+  standalone: true,
+  imports: [ContextDashboardModule, CoreModule, CommonModule]
+})
+export class ContextDashboardComponent {}

package/src/hooks/widget/widget.providers.ts

@@ -0,0 +1,18 @@
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+export const widgetHookProviders = [
+  hookRoute({
+    path: 'hooks/widget',
+    loadComponent: () =>
+      import('./context-dashboard.component').then(m => m.ContextDashboardComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 75,
+      path: 'hooks/widget',
+      icon: 'edit',
+      label: 'Widget',
+      parent: 'Hooks'
+    })
+  )
+];

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

@@ -13,7 +13,24 @@ import { referenceWidgetDefinition } from '../widget-config.providers';
  */
 @Component({
   selector: 'tut-basic-widget-config-hook-view',
-  templateUrl: './basic-edit.component.html',
+  template: `<div class="card">
+    <div class="card-block">
+      <c8y-widget-config-section
+        *ngFor="let section of widgetConfigService.currentSections$ | async; let i = index"
+        [section]="section"
+      ></c8y-widget-config-section>
+    </div>
+
+    <div class="card-block">
+      <label>The configuration is:</label>
+      <code>
+        <pre>
+    {{ widgetConfigService.currentConfig$ | async | json }}
+  </pre
+        >
+      </code>
+    </div>
+  </div>`,
   standalone: true,
   imports: [CoreModule, CommonModule, WidgetConfigSectionComponent, AsyncPipe, JsonPipe]
 })