@c8y/tutorial 1023.50.2 → 1023.53.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.50.2",
+  "version": "1023.53.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.50.2",
-    "@c8y/ngx-components": "1023.50.2",
-    "@c8y/client": "1023.50.2",
-    "@c8y/bootstrap": "1023.50.2",
+    "@c8y/style": "1023.53.0",
+    "@c8y/ngx-components": "1023.53.0",
+    "@c8y/client": "1023.53.0",
+    "@c8y/bootstrap": "1023.53.0",
     "@angular/cdk": "^20.2.14",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
@@ -14,8 +14,8 @@
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.50.2",
-    "@c8y/devkit": "1023.50.2"
+    "@c8y/options": "1023.53.0",
+    "@c8y/devkit": "1023.53.0"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

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

@@ -17,6 +17,27 @@ import { JsonPipe } from '@angular/common';
 @Component({
   selector: 'tut-properties-selector-drawer',
   template: `<c8y-title>Properties selector- drawer</c8y-title>
+    <h2>Example of using properties selector with asset selection</h2>
+    <div class="d-flex row">
+      <div class="col-xs-12 col-md-6">
+        <div class="card">
+          <div class="card-inner-scroll d-flex d-col bg-component" style="height: 490px"></div>
+          <div class="card-header">
+            <button class="btn btn-primary" (click)="selectAssetAndProperty()">
+              Select asset and property
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-md-6">
+        <pre class="inner-scroll m-0" style="height: 554px">{{
+          selectorWithAssetSelectionOutput | json
+        }}</pre>
+      </div>
+    </div>
+
+    <h2>Example of using properties selector without asset selection</h2>
     <div class="d-flex row">
       <div class="col-xs-12 col-md-6">
         <div class="card">
@@ -41,7 +62,7 @@ import { JsonPipe } from '@angular/common';
       </div>
 
       <div class="col-xs-12 col-md-6">
-        <pre class="inner-scroll m-0" style="height: 554px">{{ output | json }}</pre>
+        <pre class="inner-scroll m-0" style="height: 554px">{{ simpleSelectorOutput | json }}</pre>
       </div>
     </div>`,
   imports: [
@@ -57,9 +78,35 @@ export class PropertiesSelectorDrawerExampleComponent {
   inventoryService = inject(InventoryService);
   model: IIdentified;
   selectedAsset: IManagedObject;
-  output: AssetPropertyType[] = [];
+  selectorWithAssetSelectionOutput: AssetPropertyType[] = [];
+  simpleSelectorOutput: AssetPropertyType[] = [];
   bottomDrawerService = inject(BottomDrawerService);
 
+  async selectAssetAndProperty() {
+    const drawer = this.bottomDrawerService.openDrawer(AssetPropertySelectorDrawerComponent, {
+      disableClickOutside: true,
+      initialState: {
+        allowChangingContext: true,
+        hideSelection: false,
+        config: {
+          selectMode: 'plus',
+          expansionMode: 'collapsedByDefault',
+          showValue: true,
+          showKey: true,
+          selectedProperties: this.selectorWithAssetSelectionOutput,
+          allowAddingCustomProperties: true
+        }
+      }
+    });
+
+    try {
+      const resultOf = await drawer.instance.result;
+      this.selectorWithAssetSelectionOutput = resultOf;
+    } catch (ex) {
+      // cancel clicked
+    }
+  }
+
   selectionChanged(e: AssetSelectionChangeEvent) {
     this.selectedAsset = e.change.item;
   }
@@ -68,23 +115,22 @@ export class PropertiesSelectorDrawerExampleComponent {
     const drawer = this.bottomDrawerService.openDrawer(AssetPropertySelectorDrawerComponent, {
       disableClickOutside: true,
       initialState: {
-        asset: this.selectedAsset,
+        contextAsset: this.selectedAsset,
         config: {
           selectMode: 'single',
           expansionMode: 'collapsedByDefault',
           showValue: true,
           showKey: true,
-          emptyStateContent: 'default-properties',
-          selectedProperties: this.output
+          selectedProperties: this.simpleSelectorOutput
         }
       }
     });
 
     try {
       const resultOf = await drawer.instance.result;
-      this.output = resultOf;
+      this.simpleSelectorOutput = resultOf;
     } catch (ex) {
-      this.output = [];
+      // cancel clicked
     }
   }
 }

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

@@ -5,6 +5,7 @@ import { C8yTranslatePipe, TitleComponent } from '@c8y/ngx-components';
 import {
   AssetPropertyActionDirective,
   AssetPropertyListComponent,
+  AssetPropertySelectorComponent,
   AssetPropertyType
 } from '@c8y/ngx-components/asset-properties';
 import {
@@ -19,6 +20,7 @@ import { PopoverDirective } from 'ngx-bootstrap/popover';
 @Component({
   selector: 'tut-properties-selector-inline',
   template: `<c8y-title>Properties selector- inline</c8y-title>
+    <h2>Example of using properties selector with asset selection as separate component</h2>
     <div class="d-flex-md row">
       <div class="col-xs-12 col-md-3">
         <div class="card">
@@ -184,7 +186,27 @@ import { PopoverDirective } from 'ngx-bootstrap/popover';
       <div class="col-xs-12 col-md-4">
         <pre class="inner-scroll" style="height: 655px">{{ assetPropertiesOutput | json }}</pre>
       </div>
-    </div>`,
+    </div>
+    <br />
+    <h2>Example of using properties selector with asset selection part of selector</h2>
+    <div class="d-flex-md row" style="height: 655px">
+      <c8y-asset-property-selector
+        [config]="{
+          selectMode: 'plus',
+          expansionMode: 'collapsedByDefault',
+          showValue: true,
+          showKey: true,
+          selectedProperties: this.selectorWithAssetSelectionOutput,
+          allowAddingCustomProperties: true
+        }"
+        [allowChangingContext]="true"
+        [allowPropertiesFromMultipleAssets]="true"
+        [hideSelection]="false"
+        [allowSearch]="true"
+        [ngModel]="selectedProperties"
+        (ngModelChange)="propertiesSelectionChange($event)"
+      ></c8y-asset-property-selector>
+    </div> `,
   standalone: true,
   imports: [
     AssetSelectorModule,
@@ -196,7 +218,8 @@ import { PopoverDirective } from 'ngx-bootstrap/popover';
     C8yTranslatePipe,
     TooltipModule,
     JsonPipe,
-    PopoverDirective
+    PopoverDirective,
+    AssetPropertySelectorComponent
   ]
 })
 export class PropertiesSelectorInlineExampleComponent {
@@ -233,7 +256,7 @@ export class PropertiesSelectorInlineExampleComponent {
   model: IIdentified;
   selectedAsset: IManagedObject;
   assetPropertiesOutput: AssetPropertyType[] | AssetPropertyType;
-
+  selectorWithAssetSelectionOutput: AssetPropertyType[] = [];
   multiSelect: 'single' | 'multi' | 'none' = 'multi';
   expansionMode: 'expandedByDefault' | 'collapsedByDefault' | 'nonCollapsible' =
     'expandedByDefault';
@@ -254,6 +277,11 @@ export class PropertiesSelectorInlineExampleComponent {
     // console.log('Selected properties:', $event);
   }
 
+  propertiesSelectionChange($event: AssetPropertyType[]) {
+    this.selectorWithAssetSelectionOutput = $event;
+    // console.log('Selected properties from selector:', $event);
+  }
+
   copyProperty(context: AssetPropertyType) {
     this.assetPropertiesOutput = context;
     // console.log('Copy property:', context);