chore: Upgrade to Web SDK v1021.5.0

cumulocity.config.ts

@@ -1,6 +1,6 @@
 import { ConfigurationOptions } from '@c8y/devkit';
 import { DefinePlugin } from 'webpack';
-import { author, description, version, name } from './package.json';
+import { author, description, name, version } from './package.json';
 
 export default {
   runTime: {
@@ -261,6 +261,13 @@ export default {
         description: 'A sample for wizard hook.',
         scope: 'self'
       },
+      {
+        name: 'Service hook Codex sample',
+        module: 'ServiceHookCodexSampleModule',
+        path: './src/hooks/service/service-hook-codex-sample.module.ts',
+        description: 'A sample for hookService.',
+        scope: 'self'
+      },
       {
         name: 'Stepper',
         module: 'StepperHookModule',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorial",
-  "version": "1021.4.3",
+  "version": "1021.5.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -19,10 +19,10 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
-    "@c8y/bootstrap": "1021.4.3",
-    "@c8y/client": "1021.4.3",
-    "@c8y/ngx-components": "1021.4.3",
-    "@c8y/style": "1021.4.3",
+    "@c8y/bootstrap": "1021.5.0",
+    "@c8y/client": "1021.5.0",
+    "@c8y/ngx-components": "1021.5.0",
+    "@c8y/style": "1021.5.0",
     "leaflet": "1.9.4",
     "ngx-bootstrap": "18.0.0",
     "rxjs": "^7.8.1",
@@ -33,8 +33,8 @@
     "@angular-devkit/build-angular": "^18.2.10",
     "@angular/cli": "^18.2.10",
     "@angular/compiler-cli": "^18.2.0",
-    "@c8y/devkit": "1021.4.3",
-    "@c8y/options": "1021.4.3",
+    "@c8y/devkit": "1021.5.0",
+    "@c8y/options": "1021.5.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",

src/hooks/service/client/basic-view.component.html

@@ -0,0 +1,44 @@
+<c8y-title>Sharing a service between plugins</c8y-title>
+<div class="card-block">
+  <p>
+    A service instance can be used by components that need to communicate to each other or share a
+    common state. If these two components originate from different code bases, e.g. are deployed via
+    plugin-ins, then
+    <code>hookService</code>
+    comes as a way for such a shared service to be injected. The service interface might be declared
+    in a shared library known at compile time.
+  </p>
+  <p>
+    This example showcases two component instances that share a counter service. The counter service
+    interface is declared in the
+    <code>counder.model</code>
+    module which may be declared in a common library shared between plug-ins in a real world case.
+    The
+    <code>CounterHookModule</code>
+    leverages
+    <code>hookService</code>
+    to inject a service instance. This can happen in a plugin or in a shell application.
+  </p>
+</div>
+<div class="card-group">
+  <div class="col-md-6">
+    <div class="card">
+      <div class="card-header separator">
+        <p class="card-title">Component A</p>
+      </div>
+      <div class="card-block">
+        <c8y-dynamic-component componentId="counter.component"></c8y-dynamic-component>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card">
+      <div class="card-header separator">
+        <p class="card-title">Component B</p>
+      </div>
+      <div class="card-block">
+        <c8y-dynamic-component componentId="counter.component"></c8y-dynamic-component>
+      </div>
+    </div>
+  </div>
+</div>

src/hooks/service/client/basic-view.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+/**
+ * This is the component that hosts the Service demo view.
+ */
+@Component({
+  selector: 'tut-basic-component-hook-view',
+  templateUrl: './basic-view.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class BasicViewComponent {}

src/hooks/service/client/counter.component.html

@@ -0,0 +1,15 @@
+<p>
+  Hello there! I am a simple component added from a plugin by
+  <code>hookComponent</code>
+  . I use a shared counter service that has been provided in another plugin and injected by
+  <code>hookService</code>
+  .
+</p>
+<button
+  class="btn btn-default m-t-16"
+  type="button"
+  (click)="counter.count()"
+>
+  Click to increment counter
+  <span class="badge badge-system">{{ counter.counter }}</span>
+</button>

src/hooks/service/client/counter.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ServiceRegistry } from '@c8y/ngx-components';
+import { ICounterService } from '../counter/counter.model';
+
+@Component({
+  selector: 'tut-counter-component',
+  templateUrl: './counter.component.html',
+  standalone: true
+})
+export class CounterComponent {
+  counter: ICounterService;
+
+  constructor(registry: ServiceRegistry) {
+    /**
+     * To retrieve an instance of a service injected by `hookService` you can use ServiceRegistry.get(key) method.
+     * It will return all injected service instances in a type-safe manner if there is a typed extension key declared.
+     * For an example of such declaration check the declarations in `counter/counter.model.ts`.
+     */
+    this.counter = registry.get('counter').at(0);
+  }
+}

src/hooks/service/client/index.ts

@@ -0,0 +1,3 @@
+export * from './basic-view.component';
+export * from './counter.component';
+export * from './service-hook.module';

src/hooks/service/client/service-hook.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookComponent, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    /* Hook the Service hook demo view */
+    hookRoute({
+      path: 'hooks/service',
+      loadComponent: () => import('./basic-view.component').then(m => m.BasicViewComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 40,
+        path: 'hooks/service',
+        icon: 'gears',
+        label: 'Service',
+        parent: 'Hooks'
+      })
+    ),
+    /* Hook a client component for the service provided via `hookService` */
+    hookComponent({
+      id: 'counter.component',
+      label: 'Counter component',
+      description: 'This component can count',
+      loadComponent: () => import('./counter.component').then(m => m.CounterComponent)
+    })
+  ]
+})
+export class ServiceHookModule {}