@c8y/tutorial 1024.15.13 → 1024.16.10

package/cumulocity.config.ts

@@ -58,6 +58,13 @@ export default {
         description: 'An introduction to asset selector',
         scope: 'self'
       },
+      {
+        name: 'Introduction to icon selector',
+        module: 'NgxIconSelectorExampleModule',
+        path: './src/selector/icon-selector-example/icon-selector-example.module.ts',
+        description: 'An introduction to the icon selector component.',
+        scope: 'self'
+      },
       {
         name: 'Introduction Example Module',
         module: 'IntroductionExampleModule',

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1024.15.13",
+  "version": "1024.16.10",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
     "@angular/animations": "^21.2.0",
     "@angular/cdk": "^21.2.0",
-    "@c8y/bootstrap": "1024.15.13",
-    "@c8y/client": "1024.15.13",
-    "@c8y/ngx-components": "1024.15.13",
-    "@c8y/style": "1024.15.13",
+    "@c8y/bootstrap": "1024.16.10",
+    "@c8y/client": "1024.16.10",
+    "@c8y/ngx-components": "1024.16.10",
+    "@c8y/style": "1024.16.10",
     "gridstack": "^12.4.2",
     "leaflet": "1.9.4",
     "monaco-editor": "~0.53.0",
@@ -17,8 +17,8 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@c8y/devkit": "1024.15.13",
-    "@c8y/options": "1024.15.13"
+    "@c8y/devkit": "1024.16.10",
+    "@c8y/options": "1024.16.10"
   },
   "peerDependencies": {
     "@angular/common": ">=21 <22"

package/src/__mocks/index.ts

@@ -12,6 +12,7 @@ import { InventoryInterceptor } from './global-mocks/inventory.interceptor';
 import { MeasurementsInterceptor } from './global-mocks/measurements.interceptor';
 import { API_MOCK_CONFIG, ApiMockConfig } from './mock.model';
 import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
+import { ClusterMapInterceptor } from './scoped-mocks/cluster-map';
 import { ContextDashboardInterceptor } from './scoped-mocks/context-dashboard';
 import { DeviceDataGridInterceptor } from './scoped-mocks/device-data-grid';
 import { ListsInterceptor } from './scoped-mocks/lists';
@@ -29,17 +30,16 @@ import { ProviderConfigurationsApiInterceptor } from './global-mocks/provider-co
 
 export function provideAPIMock() {
   return [
-    // TODO: ask Jan about mocking clusters maps/cluster
-    // {
-    //   provide: API_MOCK_CONFIG,
-    //   useValue: {
-    //     id: 'a-cluster-map-interceptor',
-    //     path: 'maps/cluster',
-    //     mockService: BoilerplateInterceptor,
-    //     debug: true
-    //   } as ApiMockConfig,
-    //   multi: true
-    // },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        // Scoped to both cluster map examples, `maps/cluster` and `maps/cluster-root-node`.
+        id: 'a-cluster-map-interceptor',
+        path: 'maps/cluster',
+        mockService: ClusterMapInterceptor
+      } as ApiMockConfig,
+      multi: true
+    },
     {
       provide: API_MOCK_CONFIG,
       useValue: {

package/src/__mocks/mock.model.ts

@@ -39,8 +39,7 @@ export enum Channels {
   BulkOperations = '/bulkOperations/*',
   Measurements = '/measurements/*',
   Alarms = '/alarms/*',
-  Events = '/events/*',
-  MangedObjectsMap = '/managedobjects/1'
+  Events = '/events/*'
 }
 /**
  * path and mockService

package/src/__mocks/scoped-mocks/cluster-map.ts

@@ -0,0 +1,207 @@
+import { IFetchResponse, IManagedObject } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { from, Observable } from 'rxjs';
+import { generateResponse } from '../utils/common';
+import {
+  getClusterMapSampleSites,
+  getClusterMapSiteGroups,
+  SampleSiteDevices
+} from '../utils/generators/clusterDevices';
+
+/**
+ * What a cluster map query asks for. The cluster map loads its devices per bounding box, counts
+ * them before loading them and asks for the outermost device to fit the map to all devices.
+ */
+interface PositionQuery {
+  latMin?: number;
+  latMax?: number;
+  lngMin?: number;
+  lngMax?: number;
+  /**
+   * True if the bounding box crosses the antimeridian. The longitudes are combined with `or`
+   * instead of `and` in that case.
+   */
+  lngWraps: boolean;
+  orderBy?: {
+    coordinate: 'lat' | 'lng';
+    ascending: boolean;
+  };
+  /**
+   * Id of the managed object the query is restricted to, if the map uses a root node.
+   */
+  scopedToId?: string;
+}
+
+/**
+ * Leaflet is lazy loaded. Answering too fast leads to markers that are not rendered.
+ */
+const LEAFLET_LAZY_LOAD_DELAY_MS = 300;
+
+/**
+ * A number in a query, optionally suffixed by the `f` or `d` type marker the platform uses.
+ */
+const QUERY_NUMBER = '(-?\\d+(?:\\.\\d+)?)[fd]?';
+
+/**
+ * Answers the inventory queries of the cluster map examples with a fixed set of sample devices,
+ * spread over places around the world. Queries the cluster map does not send, for example the ones
+ * of the asset selector, are passed on to the global inventory mock.
+ */
+export class ClusterMapInterceptor implements HttpInterceptor {
+  private readonly sites: SampleSiteDevices[] = getClusterMapSampleSites();
+  private readonly devices: IManagedObject[] = this.sites.flatMap(site => site.devices);
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    const params = (req?.options?.params ?? {}) as Record<string, unknown>;
+    const query = [params.query, params.q].find(value => typeof value === 'string') as string;
+    const { method = 'GET' } = req?.options || {};
+
+    if (method !== 'GET' || !req?.url?.includes('inventory/managedObjects')) {
+      return next.handle(req);
+    }
+
+    if (query?.includes('has(c8y_Position)')) {
+      return from(this.mockPositionQuery(query, params));
+    }
+
+    // The asset selector of the root node example lists the places as selectable groups.
+    if (isRootGroupQuery(query, params)) {
+      return from(this.mockGroupQuery());
+    }
+
+    return next.handle(req);
+  }
+
+  private async mockGroupQuery() {
+    await new Promise(resolve => setTimeout(resolve, LEAFLET_LAZY_LOAD_DELAY_MS));
+    const groups = getClusterMapSiteGroups();
+
+    return generateResponse(() => ({ managedObjects: groups }), {
+      totalPages: 1,
+      pageSize: groups.length,
+      currentPage: 1
+    });
+  }
+
+  private async mockPositionQuery(query: string, params: Record<string, unknown>) {
+    await new Promise(resolve => setTimeout(resolve, LEAFLET_LAZY_LOAD_DELAY_MS));
+
+    const matching = this.getMatchingDevices(parsePositionQuery(query));
+    const pageSize = Number(params?.pageSize) || matching.length || 1;
+
+    return generateResponse(() => ({ managedObjects: matching.slice(0, pageSize) }), {
+      // The cluster map counts the devices of a bounding box by requesting a single one and
+      // reading the total pages, so this has to reflect the number of matching devices.
+      totalPages: Math.ceil(matching.length / pageSize),
+      pageSize,
+      currentPage: 1
+    });
+  }
+
+  private getMatchingDevices(query: PositionQuery): IManagedObject[] {
+    const searched = query.scopedToId ? this.getDevicesOfRootNode(query.scopedToId) : this.devices;
+    const matching = searched.filter(device => isInBounds(device, query));
+
+    if (!query.orderBy) {
+      return matching;
+    }
+
+    const { coordinate, ascending } = query.orderBy;
+    return [...matching].sort(
+      (a, b) => (getCoordinate(a, coordinate) - getCoordinate(b, coordinate)) * (ascending ? 1 : -1)
+    );
+  }
+
+  /**
+   * Returns the devices a map with a root node shows. A root node that is one of the place groups
+   * resolves to the devices of that place, one that is a sample device to that single device, so
+   * that selecting a place in the asset selector shows exactly its devices.
+   * @param id Id of the root node.
+   * @returns The devices belonging to the root node.
+   */
+  private getDevicesOfRootNode(id: string): IManagedObject[] {
+    const site = this.sites.find(({ id: siteId }) => siteId === id);
+    if (site) {
+      return site.devices;
+    }
+
+    const device = this.devices.find(({ id: deviceId }) => deviceId === id);
+    if (device) {
+      return [device];
+    }
+
+    const siteIndex = Math.abs(Number(id) || 0) % this.sites.length;
+    return this.sites[siteIndex].devices;
+  }
+}
+
+/**
+ * Whether the request is the asset selector asking for its root groups. A user with inventory
+ * roles gets a `has(c8y_IsDeviceGroup)` query; the `noLogin` user of the examples lacks those
+ * roles, so the asset selector falls back to a `fragmentType=c8y_IsDeviceGroup` parameter instead.
+ */
+function isRootGroupQuery(query: string, params: Record<string, unknown>): boolean {
+  return query?.includes('c8y_IsDeviceGroup') || params.fragmentType === 'c8y_IsDeviceGroup';
+}
+
+function parsePositionQuery(query: string): PositionQuery {
+  const lngConditions = new RegExp(
+    `\\(c8y_Position\\.lng gt ${QUERY_NUMBER}\\)\\s*(and|or)\\s*\\(c8y_Position\\.lng lt`
+  ).exec(query);
+
+  return {
+    latMin: parseCondition(query, 'lat', 'gt'),
+    latMax: parseCondition(query, 'lat', 'lt'),
+    lngMin: parseCondition(query, 'lng', 'gt'),
+    lngMax: parseCondition(query, 'lng', 'lt'),
+    lngWraps: lngConditions?.[2] === 'or',
+    orderBy: parseOrderBy(query),
+    scopedToId: parseScopedToId(query)
+  };
+}
+
+function parseCondition(
+  query: string,
+  coordinate: 'lat' | 'lng',
+  operator: 'gt' | 'lt'
+): number | undefined {
+  const match = new RegExp(`c8y_Position\\.${coordinate} ${operator} ${QUERY_NUMBER}`).exec(query);
+  return match ? Number(match[1]) : undefined;
+}
+
+function parseOrderBy(query: string): PositionQuery['orderBy'] {
+  const match = /\$orderby=c8y_Position\.(lat|lng) (asc|desc)/.exec(query);
+  return match
+    ? { coordinate: match[1] as 'lat' | 'lng', ascending: match[2] === 'asc' }
+    : undefined;
+}
+
+function parseScopedToId(query: string): string | undefined {
+  // The platform writes these as a function call, `bygroupid(1)`, and the id of a managed object
+  // as a quoted value, `id eq '1'`.
+  const ofGroup = /(?:bygroupid|isinhierarchyof)(?:\(|\s+eq\s+)'?(\d+)'?/.exec(query);
+  const ofManagedObject = /\bid eq '?(\d+)'?/.exec(query);
+
+  return (ofGroup ?? ofManagedObject)?.[1];
+}
+
+function isInBounds(device: IManagedObject, query: PositionQuery): boolean {
+  const lat = getCoordinate(device, 'lat');
+  const lng = getCoordinate(device, 'lng');
+
+  if (query.latMin !== undefined && lat <= query.latMin) {
+    return false;
+  }
+  if (query.latMax !== undefined && lat >= query.latMax) {
+    return false;
+  }
+
+  const afterMin = query.lngMin === undefined || lng > query.lngMin;
+  const beforeMax = query.lngMax === undefined || lng < query.lngMax;
+
+  return query.lngWraps ? afterMin || beforeMax : afterMin && beforeMax;
+}
+
+function getCoordinate(device: IManagedObject, coordinate: 'lat' | 'lng'): number {
+  return Number(device.c8y_Position?.[coordinate]);
+}

package/src/__mocks/utils/generators/clusterDevices.ts

@@ -0,0 +1,203 @@
+import { IManagedObject } from '@c8y/client';
+import { getMOCommonProps } from './managedObjects';
+
+/**
+ * A place around which sample devices are positioned.
+ */
+interface SampleSite {
+  /**
+   * Name of the place, used to name its devices.
+   */
+  name: string;
+  lat: number;
+  lng: number;
+  /**
+   * How many devices are positioned around the place.
+   */
+  deviceCount: number;
+  /**
+   * Radius in degrees over which the devices are spread.
+   */
+  spread: number;
+}
+
+/**
+ * The devices of one place, plus the group that holds them.
+ */
+export interface SampleSiteDevices {
+  /**
+   * Id of the group managed object that represents the place in the asset selector.
+   */
+  id: string;
+  name: string;
+  /**
+   * Center of the place, used to center the map on the group when it is selected.
+   */
+  lat: number;
+  lng: number;
+  devices: IManagedObject[];
+}
+
+/**
+ * The places the sample devices are positioned around. The amounts are chosen so that the cluster
+ * map has something to cluster: zoomed out, the places are merged into a few markers with a count,
+ * while zooming into a place reveals its individual devices.
+ */
+const SAMPLE_SITES: SampleSite[] = [
+  { name: 'Düsseldorf', lat: 51.2254, lng: 6.7763, deviceCount: 120, spread: 0.08 },
+  { name: 'Berlin', lat: 52.52, lng: 13.405, deviceCount: 90, spread: 0.08 },
+  { name: 'Munich', lat: 48.1372, lng: 11.5755, deviceCount: 40, spread: 0.06 },
+  { name: 'London', lat: 51.5074, lng: -0.1278, deviceCount: 70, spread: 0.08 },
+  { name: 'Paris', lat: 48.8566, lng: 2.3522, deviceCount: 55, spread: 0.06 },
+  { name: 'Madrid', lat: 40.4168, lng: -3.7038, deviceCount: 25, spread: 0.05 },
+  { name: 'Rome', lat: 41.9028, lng: 12.4964, deviceCount: 20, spread: 0.05 },
+  { name: 'Stockholm', lat: 59.3293, lng: 18.0686, deviceCount: 12, spread: 0.04 },
+  { name: 'New York', lat: 40.7128, lng: -74.006, deviceCount: 65, spread: 0.08 },
+  { name: 'San Francisco', lat: 37.7749, lng: -122.4194, deviceCount: 35, spread: 0.06 },
+  { name: 'Chicago', lat: 41.8781, lng: -87.6298, deviceCount: 18, spread: 0.05 },
+  { name: 'São Paulo', lat: -23.5505, lng: -46.6333, deviceCount: 14, spread: 0.05 },
+  { name: 'Tokyo', lat: 35.6762, lng: 139.6503, deviceCount: 22, spread: 0.06 },
+  { name: 'Singapore', lat: 1.3521, lng: 103.8198, deviceCount: 10, spread: 0.04 },
+  { name: 'Sydney', lat: -33.8688, lng: 151.2093, deviceCount: 8, spread: 0.04 }
+];
+
+/**
+ * Angle of Vogel's spiral, used to spread the devices of a place evenly. Compared to random
+ * positions this keeps the sample data the same on every request, so panning and zooming the map
+ * does not make devices jump around.
+ */
+const GOLDEN_ANGLE = 2.399963229728653;
+
+/**
+ * The id the generated devices start at. High enough to not collide with the randomly generated
+ * ids of the other mocks.
+ */
+const FIRST_DEVICE_ID = 700000;
+
+/**
+ * The id the site groups start at. Kept above the device ids so the two never collide.
+ */
+const FIRST_GROUP_ID = 800000;
+
+/**
+ * Severities the devices with an active alarm cycle through, so that the map shows the status
+ * colors of single devices and of a cluster of devices.
+ */
+const ALARM_SEVERITIES = ['critical', 'major', 'minor', 'warning'] as const;
+
+/**
+ * Every n-th device gets an active alarm.
+ */
+const DEVICE_WITH_ALARM_INTERVAL = 7;
+
+/**
+ * How far a device moves per realtime update.
+ */
+const MOVE_STEP_DEGREES = 0.0015;
+
+/**
+ * The sample devices, created once so that every mock works with the same devices and a device
+ * that moved stays where it moved to.
+ */
+let sampleSites: SampleSiteDevices[];
+
+/**
+ * How often each device moved already, used to move it along a circle.
+ */
+const moveCount = new Map<string, number>();
+
+/**
+ * Returns the sample devices of every place, positioned around it.
+ * @returns The devices per place.
+ */
+export function getClusterMapSampleSites(): SampleSiteDevices[] {
+  if (!sampleSites) {
+    let id = FIRST_DEVICE_ID;
+    sampleSites = SAMPLE_SITES.map((site, siteIndex) => ({
+      id: `${FIRST_GROUP_ID + siteIndex}`,
+      name: site.name,
+      lat: site.lat,
+      lng: site.lng,
+      devices: [...Array(site.deviceCount)].map((_, index) => createDevice(site, index, id++))
+    }));
+  }
+
+  return sampleSites;
+}
+
+/**
+ * Returns one group managed object per place, so that the asset selector of the cluster map with
+ * a root node lists the places as selectable groups.
+ * @returns The group of every place.
+ */
+export function getClusterMapSiteGroups(): IManagedObject[] {
+  return getClusterMapSampleSites().map(
+    site =>
+      ({
+        id: site.id,
+        name: site.name,
+        ...getMOCommonProps(),
+        type: 'c8y_DeviceGroup',
+        c8y_IsDeviceGroup: {},
+        // Lets the example center the map on the place when its group is selected.
+        c8y_Position: { lat: site.lat, lng: site.lng, alt: 0, accuracy: 0 }
+      }) as IManagedObject
+  );
+}
+
+/**
+ * Moves the sample device with the given id a bit further along a circle around its place, so that
+ * a map following the device shows it moving instead of jumping to an unrelated position.
+ * @param id Id of the device to move.
+ * @returns The moved device, or `undefined` if the id is not one of the sample devices.
+ */
+export function moveClusterMapSampleDevice(id: string): IManagedObject | undefined {
+  const device = getClusterMapSampleSites()
+    .flatMap(site => site.devices)
+    .find(sampleDevice => sampleDevice.id === id);
+
+  if (!device) {
+    return undefined;
+  }
+
+  const step = (moveCount.get(id) ?? 0) + 1;
+  moveCount.set(id, step);
+  const angle = step * GOLDEN_ANGLE;
+  device.c8y_Position = {
+    ...device.c8y_Position,
+    lat: round(device.c8y_Position.lat + MOVE_STEP_DEGREES * Math.cos(angle)),
+    lng: round(device.c8y_Position.lng + MOVE_STEP_DEGREES * Math.sin(angle))
+  };
+
+  return device;
+}
+
+function createDevice(site: SampleSite, index: number, id: number): IManagedObject {
+  const radius = site.spread * Math.sqrt((index + 1) / site.deviceCount);
+  const angle = index * GOLDEN_ANGLE;
+  // Compensating the latitude keeps the devices spread in a circle instead of an ellipse.
+  const lngScale = 1 / Math.cos((site.lat * Math.PI) / 180);
+  const severity =
+    id % DEVICE_WITH_ALARM_INTERVAL === 0
+      ? ALARM_SEVERITIES[id % ALARM_SEVERITIES.length]
+      : undefined;
+
+  return {
+    id: `${id}`,
+    name: `${site.name} sensor ${index + 1}`,
+    ...getMOCommonProps(),
+    type: 'c8y_SensorPhone',
+    c8y_IsDevice: {},
+    c8y_Position: {
+      lat: round(site.lat + radius * Math.cos(angle)),
+      lng: round(site.lng + radius * Math.sin(angle) * lngScale),
+      alt: 0,
+      accuracy: 10
+    },
+    ...(severity ? { c8y_ActiveAlarmsStatus: { [severity]: 1 } } : {})
+  } as IManagedObject;
+}
+
+function round(coordinate: number): number {
+  return Math.round(coordinate * 1e6) / 1e6;
+}

package/src/__mocks/utils/generators/managedObjects.ts

@@ -1,5 +1,6 @@
 import { IManagedObject, IManagedObjectReferences } from '@c8y/client';
 import { generateId } from '../common';
+import { moveClusterMapSampleDevice } from './clusterDevices';
 
 const cords = [
   {
@@ -44,11 +45,27 @@ const cords = [
   }
 ];
 
-export function generateRealtimeDeviceMO(): IManagedObject {
-  return generateDevice<{ id: string; customFragment: string }>({
-    id: '1',
+/**
+ * Returns the managed object a realtime update is sent for.
+ * @param id Id of the device the update is for. Realtime updates of the sample devices of the
+ * cluster map examples move that device, any other id gets a generated device.
+ * @returns The managed object of the update.
+ */
+export function generateRealtimeDeviceMO(id?: string): IManagedObject {
+  const movedSampleDevice = id ? moveClusterMapSampleDevice(id) : undefined;
+  if (movedSampleDevice) {
+    return movedSampleDevice;
+  }
+
+  const device = generateDevice<{ id: string; customFragment: string }>({
+    id: id ?? '1',
     customFragment: 'customFragment'
   });
+  // Give the device an active alarm so the map does not render it as muted. A muted pin ignores
+  // the color set through the map config, which the simple map "Change color" example relies on;
+  // keeping it here means the device stays colorable across realtime updates too.
+  device.c8y_ActiveAlarmsStatus = { critical: 0, major: 0, minor: 0, warning: 1 };
+  return device;
 }
 
 export function generateDevice<T>(customAttributes?: T): IManagedObject {
@@ -135,7 +152,7 @@ export function generateRandomMo() {
   return generators[randomPosition]();
 }
 
-function getMOCommonProps() {
+export function getMOCommonProps() {
   return {
     creationTime: new Date().toISOString(),
     lastUpdated: new Date().toISOString(),

package/src/__mocks/utils/realtime.ts

@@ -9,9 +9,8 @@ import { getFakeOperation, getFakeOperationBulk } from './generators/operations'
 /**
  * Map of generators for various channels. Each generator function generates a mock data of specific type.
  */
-const generators = {
+const generators: Record<string, (id?: string) => IAnyData> = {
   [Channels.ManagedObjects]: generateRealtimeDeviceMO,
-  [Channels.MangedObjectsMap]: generateRealtimeDeviceMO,
   [Channels.Operations]: getFakeOperation,
   [Channels.BulkOperations]: getFakeOperationBulk,
   [Channels.Measurements]: getFakeMeasurement,
@@ -27,7 +26,7 @@ const generators = {
  * @throws - Throws an error if there's no generator available for the given channel.
  */
 export function getFakeData<T>(channel: string): RealtimeMessage<T> {
-  const generator = generators[channel];
+  const { generator, subscribedId } = resolveGenerator(channel);
   if (!generator) {
     throw new Error(
       `No fake data generator for channel ${channel}, either stay with the supported mocked channels (${Object.keys(
@@ -35,7 +34,11 @@ export function getFakeData<T>(channel: string): RealtimeMessage<T> {
       )}), provide a generator for your channel or remove the "noLogin" query parameter and login.`
     );
   }
-  const data: IAnyData = generator();
+  const data: IAnyData = generator(subscribedId);
+  if (subscribedId) {
+    // A channel of a single entity only delivers data of that entity.
+    data.id = subscribedId;
+  }
   const message: RealtimeMessage<T> = {
     id: (data?.id).toString(),
     channel: data?.id ? channel.replace('*', (data?.id).toString()) : channel,
@@ -45,6 +48,26 @@ export function getFakeData<T>(channel: string): RealtimeMessage<T> {
   return message;
 }
 
+/**
+ * Resolves the generator of a channel. A channel of a single entity, for example
+ * `/managedobjects/1`, is served by the generator of its wildcard channel, `/managedobjects/*`.
+ *
+ * @param channel - The channel to resolve the generator for.
+ * @returns The generator and, for a channel of a single entity, the id of that entity.
+ */
+function resolveGenerator(channel: string): {
+  generator?: (id?: string) => IAnyData;
+  subscribedId?: string;
+} {
+  if (generators[channel]) {
+    return { generator: generators[channel] };
+  }
+
+  const [, wildcardChannel, subscribedId] = /^(.*\/)([^/*]+)$/.exec(channel) ?? [];
+
+  return { generator: generators[`${wildcardChannel}*`], subscribedId };
+}
+
 /**
  * Function to generate a random RealtimeAction.
  * It returns 'UPDATE' in 80% of the cases, otherwise, it returns either 'CREATE' or 'DELETE' randomly.

package/src/ai/ai-chat-example.component.html

@@ -320,6 +320,38 @@
             <div>This is content that is projected by default and always shown.</div>
           }
 
+          <!-- Action bar below the input box. Project any control and place it left, right or in the
+           overflow (more) dropdown. -->
+          <c8y-ai-chat-action placement="left">
+            <button
+              class="btn btn-link btn-sm"
+              type="button"
+              (click)="clearMessages()"
+            >
+              <i c8yIcon="delete-bin"></i> {{ 'Clear chat' | translate }}
+            </button>
+          </c8y-ai-chat-action>
+
+          <c8y-ai-chat-action placement="right">
+            <button
+              class="btn btn-link btn-sm"
+              type="button"
+              (click)="reloadComponent()"
+            >
+              {{ 'Reset example' | translate }}
+            </button>
+          </c8y-ai-chat-action>
+
+          <c8y-ai-chat-action placement="more">
+            <button
+              class="dropdown-item"
+              type="button"
+              (click)="clearMessages()"
+            >
+              <i c8yIcon="delete-bin"></i> {{ 'Clear chat' | translate }}
+            </button>
+          </c8y-ai-chat-action>
+
           <c8y-ai-chat-suggestion
             [label]="'Create device '"
             [prompt]="'AHOI, create a new device'"

package/src/ai/ai-chat-example.component.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { CoreModule, LoadingComponent } from '@c8y/ngx-components';
 import { AIMessage, AssistantMessageDisplayConfig, ChatConfig } from '@c8y/ngx-components/ai';
 import {
+  AiChatActionComponent,
   AiChatAssistantMessageComponent,
   AiChatComponent,
   AiChatMessageActionComponent,
@@ -21,6 +22,7 @@ import { gettext } from '@c8y/ngx-components/gettext';
     AiChatMessageComponent,
     AiChatMessageActionComponent,
     AiChatSuggestionComponent,
+    AiChatActionComponent,
     LoadingComponent,
     NgComponentOutlet,
     CoreModule,
@@ -127,6 +129,11 @@ export class ChatExampleComponent {
     this.updateDisplayMessages();
   }
 
+  clearMessages() {
+    this.messages = [];
+    this.updateDisplayMessages();
+  }
+
   reloadComponent() {
     // Reload the component by toggling the flag
     this.showComponent = false;

package/src/grids/server-grid-example/type-data-grid-column/type.header-cell-renderer.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CellRendererContext } from '@c8y/ngx-components';
+import { CellRendererContext, IconDirective } from '@c8y/ngx-components';
 
 /**
  * The example component for custom header renderer.
@@ -14,7 +14,8 @@ import { CellRendererContext } from '@c8y/ngx-components';
     </span>
   `,
   selector: 'example-type-header-cell-renderer',
-  standalone: true
+  standalone: true,
+  imports: [IconDirective]
 })
 export class TypeHeaderCellRendererComponent {
   constructor(public context: CellRendererContext) {}

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

@@ -1,16 +1,19 @@
 <c8y-title>Cluster map with root node</c8y-title>
 
 <div class="d-flex">
-  <div class="d-flex d-col" style="width: 280px;">
+  <div
+    class="d-flex d-col"
+    style="width: 280px"
+  >
     <c8y-asset-selector
+      class="bg-level-1 min-height-0"
+      style="height: 420px"
       [(ngModel)]="rootNode"
       [config]="{
         groupsSelectable: true,
         groupsOnly: false
       }"
-      (change)="resetConfig()"
-      class="bg-level-1 min-height-0"
-      style="height: 420px;"
+      (onSelected)="onGroupSelected($event)"
     ></c8y-asset-selector>
   </div>
   <!-- important -->
@@ -40,7 +43,7 @@
   <!-- /important -->
   <div
     class="a-s-stretch p-16 d-col bg-info-light"
-    style="width: 320px; height: 420px;"
+    style="width: 320px; height: 420px"
   >
     <label>RootNode</label>
     <pre style="height: 120px">{{ rootNode | json }}  </pre>

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

@@ -2,7 +2,16 @@ import { Component } from '@angular/core';
 import { ClusterMapConfig, defaultMapConfig, MapModule } from '@c8y/ngx-components/map';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@c8y/ngx-components';
-import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import {
+  AssetSelectionChangeEvent,
+  AssetSelectorModule
+} from '@c8y/ngx-components/assets-navigator';
+
+/**
+ * Zoom level the map uses when it centers on a selected group, chosen so that the devices of one
+ * place fill the map.
+ */
+const GROUP_ZOOM_LEVEL = 11;
 
 @Component({
   selector: 'tut-cluster-map-root-node-example',
@@ -17,6 +26,25 @@ export class ClusterMapRootNodeExampleComponent {
   rootNode: unknown;
   oldRootNode: unknown;
 
+  /**
+   * Centers the map on the selected group. The asset selector passes the full managed object as
+   * `change.item` (its model value is simplified to id and name), so the group position is read
+   * from there.
+   * @param event The selection change emitted by the asset selector.
+   */
+  onGroupSelected(event: AssetSelectionChangeEvent) {
+    this.resetConfig();
+
+    const position = event?.change?.isSelected ? event.change.item?.c8y_Position : undefined;
+    if (position) {
+      this.followConfig = {
+        ...this.followConfig,
+        center: [position.lat, position.lng],
+        zoomLevel: GROUP_ZOOM_LEVEL
+      };
+    }
+  }
+
   toggleAutorefresh() {
     this.config = {
       ...this.config,

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

@@ -44,7 +44,11 @@ export class SimpleMapExampleComponent implements OnInit {
   }
 
   setCenter() {
-    this.config = { ...this.config, center: defaultMapConfig.center };
+    this.config = {
+      ...this.config,
+      center: [defaultMapConfig.center[0], defaultMapConfig.center[1]],
+      zoomLevel: 12
+    };
   }
 
   changeIcon() {

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

@@ -3,6 +3,11 @@ import { defaultLayer } from '@c8y/ngx-components/map';
 import { MapTileLayer } from '@c8y/options';
 import { BehaviorSubject, Observable } from 'rxjs';
 
+/**
+ * The tile layers this example can switch to, next to the default layer.
+ */
+export type CustomMapTileLayerName = 'Carto' | 'OpenTopo';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -17,7 +22,7 @@ export class MapLayerService implements CumulocityServiceRegistry.MapTileLayerPr
     return true;
   }
 
-  changeLayer(name: 'Carto' | 'OpenTopo') {
+  changeLayer(name: CustomMapTileLayerName) {
     if (name === 'Carto') {
       this.maps$.next([
         {

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

@@ -1,27 +1,50 @@
 <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">
+  <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')"
+      [class.active]="selectedLayer() === 'Carto'"
+      [attr.aria-pressed]="selectedLayer() === 'Carto'"
+      (click)="showLayer('Carto')"
     >
       Change to Carto layer
     </button>
     <button
       class="btn btn-default btn-block"
-      (click)="mapLayerService?.changeLayer('OpenTopo')"
+      [class.active]="selectedLayer() === 'OpenTopo'"
+      [attr.aria-pressed]="selectedLayer() === 'OpenTopo'"
+      (click)="showLayer('OpenTopo')"
     >
       Change to OpenTopo layer
     </button>
     <button
       class="btn btn-default btn-block"
-      (click)="mapLayerService?.revert()"
+      [class.active]="selectedLayer() === 'default'"
+      [attr.aria-pressed]="selectedLayer() === 'default'"
+      (click)="showLayer('default')"
     >
       Change to default
     </button>
   </div>
   <div class="flex-grow p-relative a-s-stretch">
-    <c8y-map></c8y-map>
+    <!--
+      The map picks up the layers of `MapLayerService` while it initializes. Rendering one map per
+      layer re-creates it whenever another layer is selected, so the new layer is applied.
+    -->
+    @switch (selectedLayer()) {
+      @case ('Carto') {
+        <c8y-map></c8y-map>
+      }
+      @case ('OpenTopo') {
+        <c8y-map></c8y-map>
+      }
+      @default {
+        <c8y-map></c8y-map>
+      }
+    }
   </div>
 </div>

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

@@ -1,16 +1,37 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } 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';
+import { CustomMapTileLayerName, 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]
+  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SimpleMapCustomConfigComponent {
-  mapLayerService = inject(MapLayerService);
+  /**
+   * The layer the map is currently showing. `c8y-map` reads the layers provided via
+   * `mapTileLayerHook` while it initializes, so the template uses this value to re-create the
+   * map whenever another layer is selected.
+   */
+  protected readonly selectedLayer = signal<CustomMapTileLayerName | 'default'>('default');
+
+  private readonly mapLayerService = inject(MapLayerService);
+
+  /**
+   * Provides the given layer through `MapLayerService` and shows the map with it.
+   * @param layer The layer to show, or `default` for the layer the map ships with.
+   */
+  protected showLayer(layer: CustomMapTileLayerName | 'default') {
+    if (layer === 'default') {
+      this.mapLayerService.revert();
+    } else {
+      this.mapLayerService.changeLayer(layer);
+    }
+    this.selectedLayer.set(layer);
+  }
 }

package/src/modal/ngx-modal/ngx-modal-example.component.ts

@@ -30,8 +30,12 @@ import { SimpleModalExampleComponent } from './simple-modal-example.component';
         (onClose)="onTemplateRefClose($event)"
         (onDismiss)="onTemplateRefDismiss($event)"
         [labels]="labels"
+        [headerClasses]="'dialog-header'"
         [disabled]="true"
       >
+        <ng-container c8y-modal-title>
+          <span [c8yIcon]="'export'"></span>
+        </ng-container>
         <c8y-list-group>
           <c8y-li *ngFor="let a of listArray; let index = index">
             <c8y-li-checkbox></c8y-li-checkbox>
@@ -81,6 +85,6 @@ export class NgxModalExampleComponent {
       ariaDescribedby: 'modal-body',
       ariaLabelledBy: 'modal-title',
       ignoreBackdropClick: true
-    }).content as SimpleModalExampleComponent;
+    });
   }
 }

package/src/modal/ngx-modal/simple-modal-example.component.ts

@@ -16,8 +16,12 @@ import {
       (onClose)="onClose($event)"
       (onDismiss)="onDismiss($event)"
       [labels]="labels"
+      [headerClasses]="'dialog-header'"
       [disabled]="true"
     >
+      <ng-container c8y-modal-title>
+        <span [c8yIcon]="'export'"></span>
+      </ng-container>
       <c8y-list-group>
         <c8y-li *ngFor="let a of listArray; let index = index">
           <c8y-li-checkbox></c8y-li-checkbox>

package/src/modal/ngx-modal-accessibility/simple-modal-accessibility-example.component.ts

@@ -3,6 +3,7 @@ import {
   CommonModule,
   FormsModule,
   HeaderModule,
+  IconDirective,
   ListGroupModule,
   ModalLabels,
   ModalModule
@@ -32,7 +33,7 @@ import {
     </c8y-modal>
   `,
   standalone: true,
-  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, ListGroupModule]
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, ListGroupModule, IconDirective]
 })
 export class SimpleModalAccessibilityExampleComponent {
   labels: ModalLabels = { ok: 'Export', cancel: 'Cancel' };

package/src/modal/ngx-modal-selectors/simple-modal-example-with-content-selectors.component.ts

@@ -1,5 +1,11 @@
 import { Component, ViewChild } from '@angular/core';
-import { CommonModule, FormsModule, HeaderModule, ModalModule } from '@c8y/ngx-components';
+import {
+  CommonModule,
+  FormsModule,
+  HeaderModule,
+  IconDirective,
+  ModalModule
+} from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-simple-modal-with-selectors',
@@ -46,7 +52,7 @@ import { CommonModule, FormsModule, HeaderModule, ModalModule } from '@c8y/ngx-c
     </c8y-modal>
   `,
   standalone: true,
-  imports: [ModalModule, HeaderModule, CommonModule, FormsModule]
+  imports: [ModalModule, HeaderModule, CommonModule, FormsModule, IconDirective]
 })
 export class SimpleModalExampleWithContentSelectorsComponent {
   smartGroup = {

package/src/modal/ngx-modal-sizes/large-modal-example.component.ts

@@ -16,8 +16,12 @@ import {
       (onClose)="onClose($event)"
       (onDismiss)="onDismiss($event)"
       [labels]="labels"
+      [headerClasses]="'dialog-header'"
       [disabled]="true"
     >
+      <ng-container c8y-modal-title>
+        <span [c8yIcon]="'export'"></span>
+      </ng-container>
       <c8y-list-group>
         <c8y-li *ngFor="let a of listArray; let index = index">
           <c8y-li-checkbox></c8y-li-checkbox>

package/src/modal/ngx-modal-sizes/medium-modal-example.component.ts

@@ -16,8 +16,12 @@ import {
       (onClose)="onClose($event)"
       (onDismiss)="onDismiss($event)"
       [labels]="labels"
+      [headerClasses]="'dialog-header'"
       [disabled]="true"
     >
+      <ng-container c8y-modal-title>
+        <span [c8yIcon]="'export'"></span>
+      </ng-container>
       <c8y-list-group>
         <c8y-li *ngFor="let a of listArray; let index = index">
           <c8y-li-checkbox></c8y-li-checkbox>

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

@@ -3,6 +3,7 @@ import { gettext } from '@c8y/ngx-components/gettext';
 import {
   CommonModule,
   HeaderModule,
+  IconDirective,
   ModalModule,
   PopoverConfirmButtons,
   PopoverConfirmComponent
@@ -29,7 +30,7 @@ import {
       ></c8y-popover-confirm>
     </div>`,
   standalone: true,
-  imports: [ModalModule, CommonModule, HeaderModule]
+  imports: [ModalModule, CommonModule, HeaderModule, IconDirective]
 })
 export class PopConfirmExampleComponent {
   // you can provide custom buttons
@@ -59,7 +60,7 @@ export class PopConfirmExampleComponent {
       }
       // eslint-disable-next-line no-console
       console.log('You successfully deleted the item!');
-    } catch (e) {
+    } catch {
       // do nothing or display "deletion failed" message
     }
   }

package/src/selector/icon-selector-example/icon-selector-example.component.html

@@ -0,0 +1,38 @@
+<c8y-title>Icon selector examples</c8y-title>
+<div class="">
+  <p class="m-b-8 text-bold">{{ 'Browsing and selecting' | translate }}</p>
+  <!-- important -->
+  <div
+    class="bg-component border-all"
+    style="height: 480px; overflow-y: auto"
+  >
+    <c8y-icon-selector (onSelect)="onSelect($event)"></c8y-icon-selector>
+  </div>
+  <!-- /important -->
+  @if (selectedIcon(); as icon) {
+    <p class="m-t-8 d-flex a-i-center gap-8">
+      <span>{{ 'Selected' | translate }}:</span>
+      <i
+        [c8yIcon]="icon"
+        aria-hidden="true"
+      ></i>
+      <code>{{ icon }}</code>
+    </p>
+  }
+
+  <p class="m-t-24 m-b-8 text-bold">{{ 'Form integration' | translate }}</p>
+  <form [formGroup]="form">
+    <div class="d-inline-block">
+      <!-- important -->
+      <c8y-icon-selector-wrapper
+        [canRemoveIcon]="true"
+        [iconSize]="32"
+        formControlName="icon"
+      ></c8y-icon-selector-wrapper>
+      <!-- /important -->
+    </div>
+  </form>
+  <p class="m-t-8">
+    <code>{{ form.value | json }}</code>
+  </p>
+</div>

package/src/selector/icon-selector-example/icon-selector-example.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { C8yTranslatePipe, IconDirective, TitleComponent } from '@c8y/ngx-components';
+import {
+  IconSelectorComponent,
+  IconSelectorWrapperComponent
+} from '@c8y/ngx-components/icon-selector';
+
+@Component({
+  selector: 'c8y-icon-selector-example',
+  templateUrl: './icon-selector-example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    JsonPipe,
+    ReactiveFormsModule,
+    C8yTranslatePipe,
+    IconDirective,
+    TitleComponent,
+    IconSelectorComponent,
+    IconSelectorWrapperComponent
+  ]
+})
+export class IconSelectorExampleComponent {
+  /** Last icon chosen from the inline selector grid. */
+  protected readonly selectedIcon = signal<string | undefined>(undefined);
+
+  /** Form-bound icon selection driven by the icon-selector wrapper. */
+  protected readonly form = new FormGroup({
+    icon: new FormControl('c8y-device')
+  });
+
+  protected onSelect(icon: string | undefined): void {
+    this.selectedIcon.set(icon);
+  }
+}

package/src/selector/icon-selector-example/icon-selector-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: 'icon-selector',
+      loadComponent: () =>
+        import('./icon-selector-example.component').then(m => m.IconSelectorExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/icon-selector',
+        label: 'Icon selector',
+        icon: 'c8y-circle-star',
+        priority: 85
+      })
+    )
+  ]
+})
+export class NgxIconSelectorExampleModule {}