@c8y/tutorial 1022.10.1 → 1022.16.2

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

@@ -36,7 +36,6 @@ export const widgetConfigHookProviders = [
     })
   ),
   hookComponent(referenceWidgetDefinition),
-  // important
   hookWidgetConfig({
     widgetId: 'reference.component',
     label: 'An additional Configuration for the simple component',
@@ -47,7 +46,6 @@ export const widgetConfigHookProviders = [
         m => m.AdditionalConfigComponent
       )
   }),
-
   hookWidgetConfig({
     widgetId: 'reference.component',
     label: 'The default asset selector.',
@@ -55,5 +53,4 @@ export const widgetConfigHookProviders = [
     loadComponent: () =>
       import('@c8y/ngx-components/context-dashboard').then(m => m.WidgetAssetSelectorComponent)
   })
-  // /important
 ];

package/src/input-group/extendable-input-list-example.component.ts

@@ -9,15 +9,20 @@ import { CoreModule, FormsModule } from '@c8y/ngx-components';
       <ul class="list-unstyled p-t-16" c8yInputGroupListContainer>
         <li class="m-b-8" *ngFor="let item of items; let i = index; trackBy: trackByFn">
           <c8y-input-group-list
+            [attr.aria-label]="'Input group-' + (i + 1)"
             [index]="i"
-            (onAdd)="add()"
-            (onRemove)="remove($event)"
+            (onAdd)="add(); announceChange('Item added')"
+            (onRemove)="remove(i); announceChange('Item removed')"
             [minus]="items.length > 1"
           >
             <c8y-form-group class="form-group--tooltip-validation">
+              <label class="sr-only" [attr.for]="'extendable-input-' + i"
+                >List item {{ i + 1 }}</label
+              >
               <input
                 class="form-control"
-                placeholder="{{ 'e.g.' }} placeholder"
+                [attr.aria-label]="'List item-' + (i + 1)"
+                placeholder="e.g. placeholder"
                 type="text"
                 [required]="true"
                 [(ngModel)]="items[i]"
@@ -26,12 +31,15 @@ import { CoreModule, FormsModule } from '@c8y/ngx-components';
           </c8y-input-group-list>
         </li>
       </ul>
+      <!-- aria-live region for screen reader announcements -->
+      <div class="sr-only" aria-live="polite" #liveRegion>{{ liveMessage }}</div>
     </div>`,
   standalone: true,
   imports: [CoreModule, FormsModule, CommonModule]
 })
 export class ExtendableInputListExampleComponent {
   items: string[] = [];
+  liveMessage = '';
 
   ngOnInit() {
     this.add();
@@ -48,4 +56,12 @@ export class ExtendableInputListExampleComponent {
   remove(index) {
     this.items.splice(index, 1);
   }
+
+  announceChange(message: string) {
+    this.liveMessage = message;
+    // Optionally clear the message after a short delay for repeated announcements
+    setTimeout(() => {
+      this.liveMessage = '';
+    }, 1000);
+  }
 }

package/src/lazy-widget/lazy-widget-config/lazy-widget-config.component.ts

@@ -1,13 +1,29 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
 import { WidgetConfig } from '../widget-config.model';
+import { LazyWidgetViewComponent } from '../lazy-widget-view';
 
 @Component({
   selector: 'tutorial-lazy-widget-config',
-  template: `<p>This widget's configuration component/module is only loaded when needed.</p>`,
+  template: `<p>This widget's configuration component/module is only loaded when needed.</p>
+    <ng-template #lazyWidgetPreview>
+      <tutorial-lazy-widget-view></tutorial-lazy-widget-view>
+    </ng-template>`,
   standalone: true,
-  imports: [CommonModule]
+  imports: [CommonModule, LazyWidgetViewComponent]
 })
 export class LazyWidgetConfigComponent {
   @Input() config: WidgetConfig;
+
+  @ViewChild('lazyWidgetPreview', { static: true })
+  set previewMapSet(template: TemplateRef<any>) {
+    if (template) {
+      this.widgetConfigService.setPreview(template);
+      return;
+    }
+    this.widgetConfigService.setPreview(null);
+  }
+
+  constructor(private widgetConfigService: WidgetConfigService) {}
 }

package/src/list/list/list-check/list-check.component.html

@@ -30,7 +30,7 @@
         class="btn-clean"
         (click)="li.collapsed = !li.collapsed"
       >
-        {{ device.name || '-' }} {{ totalLoaded }}
+        {{ device.name || '-' }}
       </button>
       <c8y-li-action
         icon="delete"

package/src/maps/cluster-map/cluster-map-example.component.html

@@ -1,6 +1,6 @@
 <c8y-title>Cluster map example</c8y-title>
-<div class="d-flex p-16">
-  <div class="d-flex d-col j-c-center p-16">
+<div class="d-flex">
+  <div class="d-flex d-col j-c-center p-r-16" style="width: 280px;">
     <button
       class="btn btn-default btn-block"
       (click)="setRandomZoomLevel()"
@@ -9,9 +9,23 @@
     </button>
     <button
       class="btn btn-default btn-block"
-      (click)="setCenter()"
+      (click)="setCenterNY()"
+      *ngIf="40.7128 !== config.center[0] || -74.006 !== config.center[1]"
     >
-      Set map to Düsseldorf
+      Change center to New York
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="setCenterDus()"
+      *ngIf="51.23544 !== config.center[0] || 6.79599 !== config.center[1]"
+    >
+      Change center to Düsseldorf
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="map.center()"
+    >
+      Go back to defined center
     </button>
     <button
       class="btn btn-default btn-block"
@@ -37,12 +51,19 @@
     >
       Show cluster color
     </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="showMapStatus = !showMapStatus"
+    >
+      Show map status
+    </button>
   </div>
   <!-- important -->
-  <div style="height: 350px; width: 100%; position: relative;">    
+  <div class="flex-grow p-relative a-s-stretch">
     <c8y-map-status
       [clusterMap]="map"
       [(config)]="config"
+      *ngIf="showMapStatus"
     ></c8y-map-status>
     <c8y-cluster-map
       #map
@@ -51,10 +72,10 @@
     ></c8y-cluster-map>
   </div>
   <!-- /important -->
-  <code
-    class="a-s-stretch p-16"
-    style="width: 200px"
+  <div
+    class="a-s-stretch p-16 d-col bg-info-light"
+    style="width: 320px; height: 420px;"
   >
-    <pre>{{ config | json }}  </pre>
-  </code>
+    <pre class="flex-grow">{{ config | json }}  </pre>
+  </div>
 </div>

package/src/maps/cluster-map/cluster-map-example.component.ts

@@ -13,13 +13,18 @@ import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 export class ClusterMapExampleComponent {
   config: ClusterMapConfig = { center: defaultMapConfig.center, zoomLevel: 4 };
   showClusterColor = false;
+  showMapStatus = true;
 
   setRandomZoomLevel() {
     this.config = { ...this.config, zoomLevel: Math.floor(1 + Math.random() * 11) };
   }
 
-  setCenter() {
-    this.config = { ...this.config, center: defaultMapConfig.center };
+  setCenterNY() {
+    this.config = { ...this.config, center: [40.7128, -74.006] };
+  }
+
+  setCenterDus() {
+    this.config = { ...this.config, center: [51.23544, 6.79599] };
   }
 
   changeIcon() {

package/src/maps/cluster-map-root-node/cluster-map-root-node-example.component.html

@@ -1,7 +1,7 @@
 <c8y-title>Cluster map with root node</c8y-title>
 
-<div class="d-flex p-16">
-  <div class="d-flex d-col j-c-center p-16" style="min-width: 150px;">
+<div class="d-flex">
+  <div class="d-flex d-col" style="width: 280px;">
     <c8y-asset-selector
       [(ngModel)]="rootNode"
       [config]="{
@@ -9,10 +9,12 @@
         groupsOnly: false
       }"
       (change)="resetConfig()"
+      class="bg-level-1 min-height-0"
+      style="height: 420px;"
     ></c8y-asset-selector>
   </div>
   <!-- important -->
-  <div style="height: 350px; width: 100%; position: relative;">
+  <div class="flex-grow p-relative a-s-stretch">
     <c8y-map-status
       [clusterMap]="map"
       [(config)]="followConfig"
@@ -36,19 +38,13 @@
     </c8y-cluster-map>
   </div>
   <!-- /important -->
-  <code
-    class="a-s-stretch p-16"
-    style="width: 200px"
+  <div
+    class="a-s-stretch p-16 d-col bg-info-light"
+    style="width: 320px; height: 420px;"
   >
-    RootNode:
-    <code>
-      <pre style="max-height: 120px">{{ rootNode | json }}  </pre>
-    </code>
-    <br />
-    <br />
-    Config:
-    <code>
-      <pre style="max-height: 120px">{{ followConfig | json }}  </pre>
-    </code>
-  </code>
+    <label>RootNode</label>
+    <pre style="height: 120px">{{ rootNode | json }}  </pre>
+    <label>Config</label>
+    <pre class="flex-grow">{{ followConfig | json }}  </pre>
+  </div>
 </div>

package/src/maps/map-popup/map-popup-example.component.html

@@ -1,7 +1,7 @@
 <c8y-title>Map with popup example</c8y-title>
 
-<div class="d-flex p-16">
-  <div class="d-flex d-col j-c-center p-16">
+<div class="d-flex">
+  <div class="d-flex d-col j-c-center p-r-16" style="width: 280px; height: 420px;">
     <button
       class="btn btn-primary btn-block"
       (click)="showFirstPopup()"
@@ -16,13 +16,13 @@
     </button>
   </div>
   <!-- important -->
-  <div style="height: 350px; width: 100%">
+  <div class="flex-grow p-relative a-s-stretch">
     <c8y-map
       [assets]="exampleDevices"
       [config]="config"
     >
       <div *c8yMapPopup="let context">
-        Hello World from:
+        <b>Hello World from:</b>
         <br />
         name: {{ context.name }}
         <br />

package/src/maps/simple-map/simple-map-example.component.html

@@ -1,7 +1,7 @@
 <c8y-title>Simple map example</c8y-title>
 
-<div class="d-flex p-16">
-  <div class="d-flex d-col j-c-center p-16">
+<div class="d-flex">
+  <div class="d-flex d-col j-c-center p-r-16" style="width: 280px;">
     <button
       class="btn btn-default btn-block"
       (click)="changeDevices()"
@@ -46,14 +46,17 @@
     </button>
   </div>
   <!-- important -->
-  <div style="height: 350px; width: 100%;">
+  <div class="flex-grow p-relative a-s-stretch">
     <c8y-map
       [assets]="exampleDevices"
       [config]="config"
     ></c8y-map>
   </div>
   <!-- /important -->
-  <code style="width: 200px;" class="a-s-stretch p-16">
+  <div
+    class="a-s-stretch p-16 d-col bg-info-light"
+    style="width: 320px; height: 420px;"
+  >
     <pre>{{ config | json }}  </pre>
-  </code>
+  </div>
 </div>

package/src/maps/simple-map/simple-map-example.module.ts

@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
 
 @NgModule({

package/src/maps/simple-map-custom-config/map-layer.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { defaultLayer } from '@c8y/ngx-components/map';
+import { MapTileLayer } from '@c8y/options';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MapLayerService implements CumulocityServiceRegistry.MapTileLayerProvider {
+  maps$ = new BehaviorSubject<MapTileLayer[]>([defaultLayer]);
+
+  getMapTileLayers$(): Observable<MapTileLayer[]> {
+    return this.maps$;
+  }
+
+  overridesDefaultLayer(): boolean {
+    return true;
+  }
+
+  changeLayer(name: 'Carto' | 'OpenTopo') {
+    if (name === 'Carto') {
+      this.maps$.next([
+        {
+          layerUrl: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+          label: 'Carto',
+          priority: 1000,
+          options: {
+            maxZoom: 12
+          }
+        }
+      ]);
+    } else if (name === 'OpenTopo') {
+      this.maps$.next([
+        {
+          layerUrl: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+          label: 'OpenTopo',
+          priority: 1000,
+          options: {
+            maxZoom: 17,
+            minZoom: 0
+          }
+        }
+      ]);
+    }
+  }
+
+  revert() {
+    this.maps$.next([defaultLayer]);
+  }
+}

package/src/maps/simple-map-custom-config/simple-map-custom-config.component.html

@@ -0,0 +1,27 @@
+<c8y-title>Simple map with custom config</c8y-title>
+
+<div class="d-flex">
+  <div class="d-flex d-col j-c-center p-r-16" style="width: 280px; height: 420px">
+    <button
+      class="btn btn-default btn-block"
+      (click)="mapLayerService?.changeLayer('Carto')"
+    >
+      Change to Carto layer
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="mapLayerService?.changeLayer('OpenTopo')"
+    >
+      Change to OpenTopo layer
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="mapLayerService?.revert()"
+    >
+      Change to default
+    </button>
+  </div>
+  <div class="flex-grow p-relative a-s-stretch">
+    <c8y-map></c8y-map>
+  </div>
+</div>

package/src/maps/simple-map-custom-config/simple-map-custom-config.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { MapModule } from '@c8y/ngx-components/map';
+import { MapLayerService } from './map-layer.service';
+
+@Component({
+  selector: 'c8y-simple-map-custom-config',
+  templateUrl: './simple-map-custom-config.component.html',
+  standalone: true,
+  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule]
+})
+export class SimpleMapCustomConfigComponent {
+  mapLayerService = inject(MapLayerService);
+}

package/src/maps/simple-map-custom-config/simple-map-custom-config.module.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import {
+  HookProviderTypes,
+  NavigatorNode,
+  hookNavigator,
+  hookRoute,
+  hookService
+} from '@c8y/ngx-components';
+import { MapLayerService } from './map-layer.service';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    MapLayerService,
+    hookService('mapTileLayerHook', MapLayerService, {
+      providerType: HookProviderTypes.ExistingProvider
+    }),
+    hookRoute({
+      path: 'maps/simple-with-custom-config',
+      loadComponent: () =>
+        import('./simple-map-custom-config.component').then(m => m.SimpleMapCustomConfigComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 30,
+        path: 'maps/simple-with-custom-config',
+        icon: 'map-editing',
+        label: 'Simple map with custom config',
+        parent: 'Map examples'
+      })
+    )
+  ]
+})
+export class SimpleMapCustomConfigModule {}

package/src/pattern-messages/pattern-messages-array.ts

@@ -0,0 +1,20 @@
+import { hookPatternMessages } from '@c8y/ngx-components';
+
+hookPatternMessages([
+  {
+    '^Alarm: (.+) is active$': {
+      gettext: 'Active alarm for {{alarmType}} detected',
+      placeholders: {
+        alarmType: '$1'
+      }
+    }
+  },
+  {
+    '^User (.+) has logged in$': {
+      gettext: 'Welcome, {{username}}!',
+      placeholders: {
+        username: '$1'
+      }
+    }
+  }
+]);

package/src/pattern-messages/pattern-messages-factory.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { ExtensionFactory, hookPatternMessages, PatternMessages } from '@c8y/ngx-components';
+
+@Injectable()
+export class MyPatternMessagesFactory implements ExtensionFactory<PatternMessages> {
+  get() {
+    return {
+      '^Firmware update for (.+) completed$': {
+        gettext: 'Firmware update finished for device: {{deviceName}}',
+        placeholders: {
+          deviceName: '$1'
+        }
+      }
+    };
+  }
+}
+
+hookPatternMessages(MyPatternMessagesFactory);

package/src/pattern-messages/pattern-messages-single.ts

@@ -0,0 +1,10 @@
+import { hookPatternMessages } from '@c8y/ngx-components';
+
+hookPatternMessages({
+  '^Alarm: (.+) is active$': {
+    gettext: 'Active alarm for {{alarmType}} detected',
+    placeholders: {
+      alarmType: '$1'
+    }
+  }
+});

package/src/popconfirm/pop-confirm-example.component.ts

@@ -11,10 +11,11 @@ import {
 @Component({
   selector: 'pop-confirm-example',
   template: `<c8y-title>Popover confirm</c8y-title>
-    <div class="p-24">
+    <div class="p-24 d-inline-block">
       <button
         class="btn btn-dot btn-dot--danger m-l-auto"
         title="{{ 'Delete' | translate }}"
+        [attr.aria-label]="'Delete' | translate"
         type="button"
         (click)="triggerPopover(poConfirm)"
       >
@@ -46,7 +47,9 @@ export class PopConfirmExampleComponent {
 
   async triggerPopover(poConfirm: PopoverConfirmComponent): Promise<void> {
     // to set the message
-    poConfirm.message = gettext('This action is irreversible.');
+    poConfirm.message = gettext(
+      'Are you sure you want to delete this item? This action is irreversible.'
+    );
     try {
       const remove = await poConfirm.show(this.confirmRemoveColumnButtons);
       if (!remove) {

package/src/quick-link/quick-link-example.component.ts

@@ -8,9 +8,6 @@ import { CoreModule, DocLink, DocsService, gettext, QuickLinkModule } from '@c8y
       class="btn-clean card text-pre-normal"
       *ngFor="let link of quickLinks"
       (click)="link.click ? link.click() : false"
-      c8yProductExperience
-      [actionName]="'welcomeWidgetClicked'"
-      [actionData]="{ link: link.label }"
     >
       <c8y-quick-link [icon]="link.icon" [label]="link.label"></c8y-quick-link>
     </button>`,

package/src/realtime/realtime-tutorial.component.html

@@ -1,8 +1,8 @@
 <c8y-title>Realtime</c8y-title>
 
 <c8y-action-bar-item itemClass="navbar-form" placement="right">
-  <div class="form-group">
-    <label for="bufferSizeOptions" translate>Maximum buffer size of notifications</label>
+  <div class="d-flex a-i-center">
+    <label class="m-0 p-r-4" for="bufferSizeOptions" translate>Maximum buffer size of notifications</label>
     <div class="c8y-select-wrapper">
       <select
         id="bufferSizeOptions"
@@ -15,38 +15,47 @@
   </div>
 </c8y-action-bar-item>
 
-<div class="card">
-  <div class="card-block">
-    <ul>
-      <li *ngFor="let service of services">
-        <c8y-realtime-btn [service]="service.instance" [title]="'Toggle ' + service.className" [label]="service.className"></c8y-realtime-btn>
-      </li>
-    </ul>
-    <p>
-      Below you can find the latest {{ bufferSize }} notifications received from your tenant.
-    </p>
-  </div>
-</div>
-
-<ng-container *ngIf="(allAPIsRealtime$ | async) as notificationBuffer; else waiting">
-  <ng-container *ngIf="notificationBuffer.length; else waiting">
-    <div class="card" *ngFor="let realtimeItem of notificationBuffer; let i = index">
+<div class="row">
+  <div class="col-md-6">
+    <div class="card">
       <div class="card-header separator">
-        <h4 class="card-title">{{ i + 1 }}. RealtimeMessage in buffer</h4>
-      </div>
-      <div class="card-block">
-        <pre><code>{{ realtimeItem | json }}</code></pre>
+        <h4>Realtime services</h4>
       </div>
+      <c8y-list-group>
+        <c8y-li *ngFor="let service of services">
+          <c8y-realtime-btn [service]="service.instance" [title]="'Toggle ' + service.className" [label]="service.className"></c8y-realtime-btn>
+        </c8y-li>
+      </c8y-list-group>
     </div>
-  </ng-container>
-</ng-container>
+  </div>
+  <div class="col-md-6">
+    <ng-container *ngIf="(allAPIsRealtime$ | async) as notificationBuffer; else waiting">
+      <ng-container *ngIf="notificationBuffer.length; else waiting">
+        <div class="card">
+          <div class="card-header separator">
+            <h4 class="card-title">Latest {{ bufferSize }} notifications received </h4>
+          </div>
+          <div class="inner-scroll" style="height: 312px;">
+            <div class="card-block">
+              <div [ngClass]="{'separator-top p-t-16': i > 0}" *ngFor="let realtimeItem of notificationBuffer; let i = index">
+                <p class="m-b-8"><strong>{{ i + 1 }}. RealtimeMessage in buffer</strong></p>
+                  <pre><code>{{ realtimeItem | json }}</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </ng-container>
 
-<ng-template #waiting>
-  <div class="card">
-    <div class="card-header separator">
-      <h4 class="card-title"><i c8yIcon="spinner" class="icon-spin"></i> Waiting for the first notification to be received.</h4>
-    </div>
+    <ng-template #waiting>
+      <div class="card">
+        <div class="card-block">
+          <c8y-loading></c8y-loading>
+          Waiting for the first notification to be received.
+        </div>
+      </div>
+    </ng-template>
   </div>
-</ng-template>
+</div>