@c8y/tutorial 1023.71.1 → 1023.76.0

package/cumulocity.config.ts

@@ -647,6 +647,13 @@ export default {
         description: 'An example for extendable input list.',
         scope: 'self'
       },
+      {
+        name: 'Example of inline editable input',
+        module: 'InputGroupEditableExampleModule',
+        path: './src/input-group/input-group-editable-example.module.ts',
+        description: 'An example for the input-group-editable pattern.',
+        scope: 'self'
+      },
       {
         name: 'Example of time picker',
         module: 'TimePickerExampleModule',

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.71.1",
+  "version": "1023.76.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1023.71.1",
-    "@c8y/ngx-components": "1023.71.1",
-    "@c8y/client": "1023.71.1",
-    "@c8y/bootstrap": "1023.71.1",
     "@angular/cdk": "^20.2.14",
+    "@c8y/bootstrap": "1023.76.0",
+    "@c8y/client": "1023.76.0",
+    "@c8y/ngx-components": "1023.76.0",
+    "@c8y/style": "1023.76.0",
+    "leaflet": "1.9.4",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
-    "leaflet": "1.9.4",
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.71.1",
-    "@c8y/devkit": "1023.71.1"
+    "@c8y/devkit": "1023.76.0",
+    "@c8y/options": "1023.76.0"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

package/src/generate-json-schema/generate-json-schema.component.ts

@@ -38,7 +38,7 @@ export class GenerateJsonSchemaComponent implements OnInit {
 
   async ngOnInit() {
     const { schema } = await import(
-      'c8y-schema-loader?interfaceName=ExampleInterface!./schema-example.model'
+      'c8y-schema-loader?interfaceName=ExampleInterface&type=some-type-to-be-grouped-by!./schema-example.model'
     );
     this.schemaString = JSON.stringify(schema, null, 2);
   }

package/src/global-context-widget/index.ts

@@ -47,7 +47,10 @@ export function provideGlobalContextWidget() {
           m => m.GlobalContextWidgetConfigComponent
         ),
       data: {
-        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        schema: () =>
+          import(
+            'c8y-schema-loader?interfaceName=WidgetConfig&type=widget-config!./widget-config.model'
+          ),
         // Widget controls for view component
         controls: WIDGET_CONTROLS
       }

package/src/input-group/input-group-editable-example.component.ts

@@ -0,0 +1,263 @@
+import { Component } from '@angular/core';
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  FormControl,
+  ValidationErrors,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
+import { CoreModule, InputGroupEditableComponent } from '@c8y/ngx-components';
+import { Observable, map, timer } from 'rxjs';
+
+@Component({
+  selector: 'c8y-input-group-editable-example',
+  template: `
+    <c8y-title>Inline editable input</c8y-title>
+    <div class="container-fluid p-24">
+      <!-- SIZES -->
+      <h4 class="text-medium m-b-24">Sizes</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">Default</p>
+          <c8y-input-group-editable
+            ariaLabel="Default size"
+            [(ngModel)]="sizeDefault"
+          ></c8y-input-group-editable>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">Small (size="sm")</p>
+          <c8y-input-group-editable
+            size="sm"
+            ariaLabel="Small size"
+            [(ngModel)]="sizeSm"
+          ></c8y-input-group-editable>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">Large (size="lg")</p>
+          <c8y-input-group-editable
+            size="lg"
+            ariaLabel="Large size"
+            [(ngModel)]="sizeLg"
+          ></c8y-input-group-editable>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- BINDING PATTERNS -->
+      <h4 class="text-medium m-b-24">Binding patterns</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">Two-way [(ngModel)]</p>
+          <c8y-input-group-editable
+            ariaLabel="Two-way ngModel"
+            [(ngModel)]="bindingTwoWay"
+          ></c8y-input-group-editable>
+          <small class="text-muted">Value: {{ bindingTwoWay }}</small>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">[ngModel] and (ngModelChange)</p>
+          <c8y-input-group-editable
+            ariaLabel="One-way ngModel with ngModelChange"
+            [ngModel]="bindingOneWay"
+            (ngModelChange)="bindingOneWay = $event"
+          ></c8y-input-group-editable>
+          <small class="text-muted">Value: {{ bindingOneWay }}</small>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">[formControl]</p>
+          <c8y-input-group-editable
+            ariaLabel="Form control binding"
+            [formControl]="bindingFormControl"
+          ></c8y-input-group-editable>
+          <small class="text-muted">Value: {{ bindingFormControl.value }}</small>
+          <p class="text-muted m-t-4">
+            <small
+              >Use <code>formControlName</code> the same way inside a <code>FormGroup</code>.</small
+            >
+          </p>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- OUTPUTS -->
+      <h4 class="text-medium m-b-24">Outputs — (save) and (cancel)</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-6">
+          <p class="text-label-small">Tracking last action alongside [(ngModel)]</p>
+          <c8y-input-group-editable
+            ariaLabel="Field with save and cancel outputs"
+            [(ngModel)]="outputsModel"
+            (save)="onSave($event)"
+            (cancel)="onCancel()"
+          ></c8y-input-group-editable>
+          <div class="m-t-8">
+            <small class="d-block text-muted"
+              >Last action: <strong>{{ lastAction || '—' }}</strong></small
+            >
+            <small class="d-block text-muted"
+              >Last saved value: <strong>{{ lastSavedValue || '—' }}</strong></small
+            >
+          </div>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- PLACEHOLDER AND NAME -->
+      <h4 class="text-medium m-b-24">Placeholder and name</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">Empty field with placeholder</p>
+          <c8y-input-group-editable
+            placeholder="e.g. My device"
+            name="device-name"
+            ariaLabel="Device name"
+            [(ngModel)]="placeholderModel"
+          ></c8y-input-group-editable>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- SYNC VALIDATION -->
+      <h4 class="text-medium m-b-24">Validation — synchronous</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">Template-driven (required, minlength)</p>
+          <c8y-input-group-editable
+            required
+            minlength="3"
+            ariaLabel="Template-driven validation"
+            [(ngModel)]="validTplModel"
+          ></c8y-input-group-editable>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">[validators] input — no spaces</p>
+          <c8y-input-group-editable
+            ariaLabel="Validators input"
+            [(ngModel)]="validatorsModel"
+            [validators]="noSpacesValidator"
+          >
+            <c8y-message
+              name="noSpaces"
+              [text]="'Spaces are not allowed.' | translate"
+            ></c8y-message>
+          </c8y-input-group-editable>
+        </div>
+        <div class="col-sm-4">
+          <p class="text-label-small">[formControl] and &lt;c8y-message&gt;</p>
+          <c8y-input-group-editable
+            ariaLabel="FormControl with custom messages"
+            [formControl]="validFormControl"
+          >
+            <c8y-message
+              name="required"
+              [text]="'This field is required.' | translate"
+            ></c8y-message>
+            <c8y-message
+              name="minlength"
+              [text]="'Minimum 3 characters required.' | translate"
+            ></c8y-message>
+          </c8y-input-group-editable>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- ASYNC VALIDATION -->
+      <h4 class="text-medium m-b-24">Validation — asynchronous</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">[asyncValidators] — try typing "taken"</p>
+          <c8y-input-group-editable
+            ariaLabel="Async uniqueness validation"
+            [formControl]="asyncFormControl"
+            [asyncValidators]="uniquenessValidator"
+          >
+            <c8y-message
+              name="notUnique"
+              [text]="'This name is already taken.' | translate"
+            ></c8y-message>
+          </c8y-input-group-editable>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- DISABLED STATE -->
+      <h4 class="text-medium m-b-24">Disabled state</h4>
+      <div class="row m-b-24">
+        <div class="col-sm-4">
+          <p class="text-label-small">disabled attribute</p>
+          <c8y-input-group-editable
+            disabled
+            ariaLabel="Disabled field"
+            [(ngModel)]="disabledModel"
+          ></c8y-input-group-editable>
+        </div>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [CoreModule, InputGroupEditableComponent]
+})
+export class InputGroupEditableExampleComponent {
+  // Sizes
+  sizeDefault = 'Default size';
+  sizeSm = 'Small size';
+  sizeLg = 'Large size';
+
+  // Binding patterns
+  bindingTwoWay = 'Two-way binding';
+  bindingOneWay = 'One-way binding';
+  readonly bindingFormControl = new FormControl('Form control value', { nonNullable: true });
+
+  // Outputs
+  outputsModel = 'Edit and save or cancel';
+  lastAction = '';
+  lastSavedValue = '';
+
+  // Placeholder and name
+  placeholderModel = '';
+
+  // Sync validation — template-driven (required + minlength attributes)
+  validTplModel = 'min 3 chars required';
+
+  // Sync validation — [validators] input
+  validatorsModel = 'NoSpacesAllowed';
+
+  // Sync validation — [formControl] with custom <c8y-message> children
+  readonly validFormControl = new FormControl('min 3 chars required', {
+    validators: [Validators.required, Validators.minLength(3)],
+    nonNullable: true
+  });
+
+  // Disabled state
+  disabledModel = 'Read-only value';
+
+  // Async validation — simulates a server-side uniqueness check
+  readonly asyncFormControl = new FormControl('available', { nonNullable: true });
+
+  readonly noSpacesValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null =>
+    /\s/.test(control.value) ? { noSpaces: true } : null;
+  readonly uniquenessValidator: AsyncValidatorFn = (
+    control: AbstractControl
+  ): Observable<ValidationErrors | null> => {
+    const takenNames = ['taken', 'admin', 'root'];
+    return timer(800).pipe(
+      map(() => (takenNames.includes(control.value?.toLowerCase()) ? { notUnique: true } : null))
+    );
+  };
+
+  onSave(value: string): void {
+    this.lastAction = 'Saved';
+    this.lastSavedValue = value;
+  }
+
+  onCancel(): void {
+    this.lastAction = 'Cancelled';
+  }
+}

package/src/input-group/input-group-editable-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'input-group-editable',
+      loadComponent: () =>
+        import('./input-group-editable-example.component').then(
+          m => m.InputGroupEditableExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/input-group-editable',
+        label: 'Inline editable input',
+        icon: 'hand-o-right',
+        priority: 5
+      })
+    )
+  ]
+})
+export class InputGroupEditableExampleModule {}

package/src/lazy-widget/index.ts

@@ -19,7 +19,10 @@ export function provideLazyWidget() {
       loadComponent: loadViewComponent,
       loadConfigComponent: loadConfigComponent,
       data: {
-        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model')
+        schema: () =>
+          import(
+            'c8y-schema-loader?interfaceName=WidgetConfig&type=widget-config!./widget-config.model'
+          )
       }
     })
   ];

package/src/widget/index.ts

@@ -12,7 +12,11 @@ export function provideDemoWidget() {
       configComponent: WidgetConfigDemo,
       errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
       data: {
-        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        schema: () =>
+          import(
+            'c8y-schema-loader?interfaceName=WidgetConfig&type=widget-config!./widget-config.model'
+          ),
+        // The settings object can be used to configure the configComponent
         settings: {
           noNewWidgets: false
         }

package/src/widget-resolvers/index.ts

@@ -27,7 +27,10 @@ export function provideWidgetsResolverSample() {
       },
       errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
       data: {
-        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        schema: () =>
+          import(
+            'c8y-schema-loader?interfaceName=WidgetConfig&type=widget-config!./widget-config.model'
+          ),
         settings: {
           noNewWidgets: false,
           widgetDefaults: {