@c8y/tutorial 1024.15.16 → 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.16",
+  "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.16",
-    "@c8y/client": "1024.15.16",
-    "@c8y/ngx-components": "1024.15.16",
-    "@c8y/style": "1024.15.16",
+    "@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.16",
-    "@c8y/options": "1024.15.16"
+    "@c8y/devkit": "1024.16.10",
+    "@c8y/options": "1024.16.10"
   },
   "peerDependencies": {
     "@angular/common": ">=21 <22"

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/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 {}