@c8y/tutorial 1022.28.2 → 1022.33.0

package/cumulocity.config.ts

@@ -45,6 +45,13 @@ export default {
       }
     },
     exports: [
+      {
+        name: 'Resizable grid example',
+        module: 'ResizableGridExampleModule',
+        path: './src/resizable-grid-example/resizable-grid-example.module.ts',
+        description: 'An example for a grid with two resizable columns.',
+        scope: 'self'
+      },
       {
         name: 'Introduction to asset selector',
         module: 'AssetSelectorExampleModule',

package/package.json

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

package/src/resizable-grid-example/resizable-grid-example.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { ResizableGridComponent, CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tutorial-resizable-grid-example',
+  template: `<c8y-title>Resizable Grid</c8y-title>
+    <div class="p-t-24">
+      <div class="card">
+        <c8y-resizable-grid style="height: 350px;">
+          <div left-pane>
+            <div class="card-header">
+              <h4>Left Column</h4>
+            </div>
+            <div class="card-block">
+              <p>This is the left column content. You can resize it by dragging the divider.</p>
+            </div>
+          </div>
+          <div right-pane>
+            <div class="card-header">
+              <h4>Right Column</h4>
+            </div>
+            <div class="card-block">
+              <p>
+                This is the right column content. It will expand or shrink as you resize the left
+                column.
+              </p>
+            </div>
+          </div>
+        </c8y-resizable-grid>
+      </div>
+    </div>`,
+  standalone: true,
+  imports: [ResizableGridComponent, CoreModule]
+})
+export class ResizableGridExampleComponent {}
+// This component demonstrates the usage of the ResizableGridComponent

package/src/resizable-grid-example/resizable-grid-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: 'resizable-grid-example',
+      loadComponent: () =>
+        import('./resizable-grid-example.component').then(m => m.ResizableGridExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/resizable-grid-example',
+        label: 'Resizable grid',
+        icon: 'columns',
+        priority: 86
+      })
+    )
+  ]
+})
+export class ResizableGridExampleModule {}

package/src/selector/properties-selector-drawer-example/properties-selector-drawer.component.ts

@@ -2,7 +2,10 @@ import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IIdentified, IManagedObject, InventoryService } from '@c8y/client';
 import { BottomDrawerService, TitleComponent } from '@c8y/ngx-components';
-import { AssetPropertySelectorDrawerComponent } from '@c8y/ngx-components/asset-properties';
+import {
+  AssetPropertySelectorDrawerComponent,
+  AssetPropertyType
+} from '@c8y/ngx-components/asset-properties';
 import {
   AssetSelectionChangeEvent,
   AssetSelectorModule
@@ -53,7 +56,7 @@ export class PropertiesSelectorDrawerExampleComponent {
   inventoryService = inject(InventoryService);
   model: IIdentified;
   selectedAsset: IManagedObject;
-  output: unknown;
+  output: AssetPropertyType[] = [];
   bottomDrawerService = inject(BottomDrawerService);
 
   selectionChanged(e: AssetSelectionChangeEvent) {
@@ -70,7 +73,8 @@ export class PropertiesSelectorDrawerExampleComponent {
           expansionMode: 'collapsedByDefault',
           showValue: true,
           showKey: true,
-          emptyStateContent: 'default-properties'
+          emptyStateContent: 'default-properties',
+          selectedProperties: this.output
         }
       }
     });
@@ -79,7 +83,7 @@ export class PropertiesSelectorDrawerExampleComponent {
       const resultOf = await drawer.instance.result;
       this.output = resultOf;
     } catch (ex) {
-      this.output = 'Cancelled';
+      this.output = [];
     }
   }
 }

package/src/selector/properties-selector-inline-example/properties-selector-inline.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IIdentified, IManagedObject, InventoryService } from '@c8y/client';
-import { BottomDrawerService, C8yTranslatePipe, TitleComponent } from '@c8y/ngx-components';
+import { C8yTranslatePipe, TitleComponent } from '@c8y/ngx-components';
 import {
   AssetPropertyActionDirective,
   AssetPropertyListComponent,
@@ -97,7 +97,7 @@ import { JsonPipe } from '@angular/common';
             </div>
           </fieldset>
           <label class="c8y-switch">
-            <input type="checkbox" [(ngModel)]="searchable" />
+            <input type="checkbox" [(ngModel)]="filterable" />
             <span></span>
             <small>searchable</small>
           </label>
@@ -116,21 +116,27 @@ import { JsonPipe } from '@angular/common';
             <span></span>
             <small>showKey</small>
           </label>
+          <label class="c8y-switch m-0">
+            <input type="checkbox" [(ngModel)]="allowAddingCustomProperties" />
+            <span></span>
+            <small>allowAddingCustomProperties</small>
+          </label>
         </div>
       </div>
       <div class="col-xs-12 col-md-5">
         <div class="card">
-          <div class="card-inner-scroll d-flex d-col bg-component" style="height: 559px">
+          <div class="card-inner-scroll d-flex d-col bg-component" style="height: 591px">
             <c8y-asset-property-list
               class="bg-component"
               [asset]="selectedAsset"
               [config]="{
                 selectMode: multiSelect,
                 showHeader: showHeader,
-                searchable: searchable,
+                filterable: filterable,
                 showValue: showValue,
                 expansionMode: expansionMode,
-                showKey: showKey
+                showKey: showKey,
+                allowAddingCustomProperties: allowAddingCustomProperties
               }"
               (selectedProperties)="onSelectedProperties($event)"
             >
@@ -150,7 +156,7 @@ import { JsonPipe } from '@angular/common';
         </div>
       </div>
       <div class="col-xs-12 col-md-4">
-        <pre class="inner-scroll" style="height: 559px">{{ assetPropertiesOutput | json }}</pre>
+        <pre class="inner-scroll" style="height: 591px">{{ assetPropertiesOutput | json }}</pre>
       </div>
     </div>`,
   standalone: true,
@@ -171,7 +177,6 @@ export class PropertiesSelectorInlineExampleComponent {
   model: IIdentified;
   selectedAsset: IManagedObject;
   assetPropertiesOutput: AssetPropertyType[] | AssetPropertyType;
-  bottomDrawerService = inject(BottomDrawerService);
 
   multiSelect: 'single' | 'multi' | 'none' = 'multi';
   expansionMode: 'expandedByDefault' | 'collapsedByDefault' | 'nonCollapsible' =
@@ -179,7 +184,8 @@ export class PropertiesSelectorInlineExampleComponent {
   showHeader = true;
   showValue = true;
   showKey = true;
-  searchable = true;
+  filterable = true;
+  allowAddingCustomProperties = true;
 
   selectionChanged(e: AssetSelectionChangeEvent) {
     this.selectedAsset = e.change.item;