chore: Upgrade to Web SDK v1021.1.0

cumulocity.config.ts

@@ -736,6 +736,13 @@ export default {
         path: './src/typeahead/typeahead-example.module.ts',
         description: 'This is an example for the typeahead component.',
         scope: 'self'
+      },
+      {
+        name: 'Countdown',
+        module: 'CountdownExampleModule',
+        path: './src/countdown/countdown-example.module.ts',
+        description: 'This is an example for the countdown component.',
+        scope: 'self'
       }
     ]
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorial",
-  "version": "1021.0.12",
+  "version": "1021.1.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.0.12",
-    "@c8y/client": "1021.0.12",
-    "@c8y/ngx-components": "1021.0.12",
-    "@c8y/style": "1021.0.12",
+    "@c8y/bootstrap": "1021.1.0",
+    "@c8y/client": "1021.1.0",
+    "@c8y/ngx-components": "1021.1.0",
+    "@c8y/style": "1021.1.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.0.12",
-    "@c8y/options": "1021.0.12",
+    "@c8y/devkit": "1021.1.0",
+    "@c8y/options": "1021.1.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",

src/countdown/countdown-example.component.html

@@ -0,0 +1,35 @@
+<div class="time-elapsed">
+  <!-- important -->
+  <c8y-countdown-interval
+    [countdownInterval]="10000"
+    (countdownEnded)="onCountdownEnded()"
+  ></c8y-countdown-interval>
+  <!-- /important -->
+</div>
+<div class="container-fluid p-24 text-center">
+  <button
+    class="btn btn-default"
+    (click)="startCountdown()"
+  >
+    Start
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="stopCountdown()"
+  >
+    Stop
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="stopCountdownAtZero()"
+  >
+    Stop at 0
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="resetCountdown()"
+  >
+    Reset
+  </button>
+</div>
+`

src/countdown/countdown-example.component.ts

@@ -0,0 +1,43 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import {
+  CommonModule,
+  CountdownIntervalComponent,
+  CountdownIntervalModule
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-countdown-example',
+  templateUrl: './countdown-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CountdownIntervalModule]
+})
+export class CountdownExampleComponent implements AfterViewInit {
+  @ViewChild(CountdownIntervalComponent)
+  countdownIntervalComponent: CountdownIntervalComponent;
+
+  ngAfterViewInit(): void {
+    this.startCountdown(); // We need to start the countdown at some point, for example, in AfterViewInit
+  }
+
+  startCountdown(): void {
+    this.countdownIntervalComponent.start();
+  }
+
+  stopCountdown(): void {
+    this.countdownIntervalComponent.stop();
+  }
+
+  stopCountdownAtZero(): void {
+    this.countdownIntervalComponent.stop(true);
+  }
+
+  resetCountdown(): void {
+    this.countdownIntervalComponent.reset();
+  }
+
+  onCountdownEnded(): void {
+    console.log('Countdown Ended!');
+
+    this.resetCountdown();
+  }
+}

src/countdown/countdown-example.module.ts

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