@c8y/ngx-components 1023.58.3 → 1023.61.0

package/fesm2022/c8y-ngx-components-asset-properties.mjs

@@ -736,10 +736,10 @@ class ComputedPropertiesService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComputedPropertiesService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComputedPropertiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ComputedPropertiesService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ComputedPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComputedPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ComputedPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1070,10 +1070,10 @@ class AssetPropertiesService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1105,10 +1105,10 @@ class AssetPropertyActionDirective {
         this.elementRef = elementRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyActionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyActionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yAssetPropertyAction]',
@@ -1168,10 +1168,10 @@ class AssetPropertyValuePipe {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyValue',
@@ -1211,10 +1211,10 @@ class AssetPropertyIconPipe {
                 return 'mix-words';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyIcon',
@@ -1244,10 +1244,10 @@ class AssetPropertyIconTooltipPipe {
             return property.type;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyIconTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyIconTooltipPipe, isStandalone: true, name: "c8yAssetPropertyIconTooltip" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyIconTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyIconTooltipPipe, isStandalone: true, name: "c8yAssetPropertyIconTooltip" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyIconTooltipPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyIconTooltipPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyIconTooltip',
@@ -1375,10 +1375,10 @@ class ComputedPropertiesConfigComponent {
         }
         return of(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComputedPropertiesConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: ComputedPropertiesConfigComponent, isStandalone: true, selector: "c8y-computed-properties-config", inputs: { properties: "properties", definitions: "definitions", asset: "asset" }, viewQueries: [{ propertyName: "hosts", predicate: ["host"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "configForms", predicate: ["configForm"], descendants: true, read: NgForm, isSignal: true }], ngImport: i0, template: "<div class=\"viewport-modal has-asset-selector\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'bolt'\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"modal-title\"\n      translate\n    >\n      Configure computed properties\n    </div>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <p\n      class=\"p-t-16 p-l-24 p-r-24 p-b-16 bg-component separator-bottom sticky-top text-center text-balance\"\n      translate\n    >\n      Configure the settings below for each computed property. These configurations determine how\n      the properties will be calculated and displayed. All required fields must be completed before\n      you can apply the changes.\n    </p>\n    <div class=\"p-24 p-t-0\">\n      <fieldset\n        class=\"property-config-section c8y-fieldset p-b-8\"\n        *ngFor=\"let propertyConfig of propertyConfigs; let i = index\"\n      >\n        <legend>\n          {{ (propertyConfig.property.label || propertyConfig.property.name) | translate }}\n          <span class=\"a-s-center m-l-8 tag tag--default\">{{ propertyConfig.property.name }}</span>\n        </legend>\n        <form\n          class=\"property-config-form\"\n          name=\"configForm{{ i }}\"\n          #configForm=\"ngForm\"\n        >\n          <ng-template #host></ng-template>\n        </form>\n      </fieldset>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Apply' | translate\"\n      type=\"button\"\n      (click)=\"apply()\"\n      [disabled]=\"!isFormValid\"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ComputedPropertiesConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.17", type: ComputedPropertiesConfigComponent, isStandalone: true, selector: "c8y-computed-properties-config", inputs: { properties: "properties", definitions: "definitions", asset: "asset" }, viewQueries: [{ propertyName: "hosts", predicate: ["host"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "configForms", predicate: ["configForm"], descendants: true, read: NgForm, isSignal: true }], ngImport: i0, template: "<div class=\"viewport-modal has-asset-selector\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'bolt'\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"modal-title\"\n      translate\n    >\n      Configure computed properties\n    </div>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <p\n      class=\"p-t-16 p-l-24 p-r-24 p-b-16 bg-component separator-bottom sticky-top text-center text-balance\"\n      translate\n    >\n      Configure the settings below for each computed property. These configurations determine how\n      the properties will be calculated and displayed. All required fields must be completed before\n      you can apply the changes.\n    </p>\n    <div class=\"p-24 p-t-0\">\n      <fieldset\n        class=\"property-config-section c8y-fieldset p-b-8\"\n        *ngFor=\"let propertyConfig of propertyConfigs; let i = index\"\n      >\n        <legend>\n          {{ (propertyConfig.property.label || propertyConfig.property.name) | translate }}\n          <span class=\"a-s-center m-l-8 tag tag--default\">{{ propertyConfig.property.name }}</span>\n        </legend>\n        <form\n          class=\"property-config-form\"\n          name=\"configForm{{ i }}\"\n          #configForm=\"ngForm\"\n        >\n          <ng-template #host></ng-template>\n        </form>\n      </fieldset>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Apply' | translate\"\n      type=\"button\"\n      (click)=\"apply()\"\n      [disabled]=\"!isFormValid\"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComputedPropertiesConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ComputedPropertiesConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-computed-properties-config', standalone: true, imports: [C8yTranslatePipe, IconDirective, FormsModule, NgFor], template: "<div class=\"viewport-modal has-asset-selector\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'bolt'\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"modal-title\"\n      translate\n    >\n      Configure computed properties\n    </div>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <p\n      class=\"p-t-16 p-l-24 p-r-24 p-b-16 bg-component separator-bottom sticky-top text-center text-balance\"\n      translate\n    >\n      Configure the settings below for each computed property. These configurations determine how\n      the properties will be calculated and displayed. All required fields must be completed before\n      you can apply the changes.\n    </p>\n    <div class=\"p-24 p-t-0\">\n      <fieldset\n        class=\"property-config-section c8y-fieldset p-b-8\"\n        *ngFor=\"let propertyConfig of propertyConfigs; let i = index\"\n      >\n        <legend>\n          {{ (propertyConfig.property.label || propertyConfig.property.name) | translate }}\n          <span class=\"a-s-center m-l-8 tag tag--default\">{{ propertyConfig.property.name }}</span>\n        </legend>\n        <form\n          class=\"property-config-form\"\n          name=\"configForm{{ i }}\"\n          #configForm=\"ngForm\"\n        >\n          <ng-template #host></ng-template>\n        </form>\n      </fieldset>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Apply' | translate\"\n      type=\"button\"\n      (click)=\"apply()\"\n      [disabled]=\"!isFormValid\"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { properties: [{
@@ -1410,10 +1410,10 @@ class AssetPropertyCollapseButtonTitlePipe {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, isStandalone: true, name: "c8yAssetPropertyCollapseButtonTitle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, isStandalone: true, name: "c8yAssetPropertyCollapseButtonTitle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyCollapseButtonTitle',
@@ -1700,10 +1700,10 @@ class AssetPropertyDragDropService {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyDragDropService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyDragDropService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyDragDropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyDragDropService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1896,7 +1896,7 @@ class AssetPropertyListComponent {
         }
         propertiesToActuallyAdd.forEach(prop => {
             if (this.asset?.id) {
-                prop.contextAssetId = this.asset.id;
+                prop.configuredAssetId = this.asset.id;
             }
             // Generate instanceId for computed properties to allow multiple instances
             if (prop.computed && !prop.instanceId) {
@@ -1989,7 +1989,7 @@ class AssetPropertyListComponent {
         const definition = await this.computedPropertiesService.getByName(property.name);
         const configured = await this.configureProperty(property, definition);
         if (configured && this.asset?.id) {
-            property.contextAssetId = this.asset.id;
+            property.configuredAssetId = this.asset.id;
         }
         await this.updateProperties(false);
         this.selectedProperties.next(this.dataSource.data.filter(n => n.property.active).map(n => n.property));
@@ -2003,10 +2003,10 @@ class AssetPropertyListComponent {
      * @returns True if the context asset doesn't match the current asset.
      */
     isContextMismatch(node) {
-        if (!node.property.computed || !node.contextAssetId) {
+        if (!node.property.computed || !node.configuredAssetId) {
             return false;
         }
-        return this.asset?.id !== node.contextAssetId;
+        return this.asset?.id !== node.configuredAssetId;
     }
     /**
      * Gets the level of a node.
@@ -2377,13 +2377,16 @@ class AssetPropertyListComponent {
             else {
                 key = property.name;
             }
+            if (this.config.addAssetToProperty && this.asset?.id) {
+                property.asset = { id: this.asset.id, name: this.asset.name };
+            }
             const node = {
                 expandable: isComplex,
                 level,
                 property,
                 isVisible: true,
                 indeterminate: false,
-                contextAssetId: property.contextAssetId
+                configuredAssetId: property.configuredAssetId
             };
             this.flatNodeMap.set(key, node);
             treeData.push(node);
@@ -2593,10 +2596,10 @@ class AssetPropertyListComponent {
         const { computed, simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
         return [...computed, ...simple, ...complex];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertyListComponent, isStandalone: true, selector: "c8y-asset-property-list", inputs: { config: "config", asset: "asset", extraProperties: "extraProperties" }, outputs: { selectedProperties: "selectedProperties" }, queries: [{ propertyName: "assetPropertyAction", first: true, predicate: AssetPropertyActionDirective, descendants: true }], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{\n                    node.property.keyPath?.join('.') || (node.property?.name | translate)\n                  }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i4.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i4.CdkTreeNodePadding, selector: "[cdkTreeNodePadding]", inputs: ["cdkTreeNodePadding", "cdkTreeNodePaddingIndent"] }, { kind: "component", type: i4.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i4.CdkTreeNode, selector: "cdk-tree-node", inputs: ["role", "isExpandable", "isExpanded", "isDisabled", "cdkTreeNodeTypeaheadLabel"], outputs: ["activation", "expandedChange"], exportAs: ["cdkTreeNode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: AssetPropertyCollapseButtonTitlePipe, name: "c8yAssetPropertyCollapseButtonTitle" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AssetPropertyListComponent, isStandalone: true, selector: "c8y-asset-property-list", inputs: { config: "config", asset: "asset", extraProperties: "extraProperties" }, outputs: { selectedProperties: "selectedProperties" }, queries: [{ propertyName: "assetPropertyAction", first: true, predicate: AssetPropertyActionDirective, descendants: true }], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{\n                    node.property.keyPath?.join('.') || (node.property?.name | translate)\n                  }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i4.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i4.CdkTreeNodePadding, selector: "[cdkTreeNodePadding]", inputs: ["cdkTreeNodePadding", "cdkTreeNodePaddingIndent"] }, { kind: "component", type: i4.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i4.CdkTreeNode, selector: "cdk-tree-node", inputs: ["role", "isExpandable", "isExpanded", "isDisabled", "cdkTreeNodeTypeaheadLabel"], outputs: ["activation", "expandedChange"], exportAs: ["cdkTreeNode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: AssetPropertyCollapseButtonTitlePipe, name: "c8yAssetPropertyCollapseButtonTitle" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-list', standalone: true, imports: [
                         NgClass,
@@ -2675,9 +2678,9 @@ class AssetPropertyTabsComponent {
         };
         this.inputText = '';
         this.selectedTab = 'asset';
-        this.assetProperties = [];
-        this.regularProperties = [];
-        this.computedProperties = [];
+        this._assetProperties = [];
+        this._regularProperties = [];
+        this._computedProperties = [];
         this.displayedProperties = [];
         this.assetCount = 0;
         this.regularCount = 0;
@@ -2691,6 +2694,24 @@ class AssetPropertyTabsComponent {
         this.selectedRegularProperties = [];
         this.selectedComputedProperties = [];
     }
+    set assetProperties(value) {
+        this._assetProperties = this.withContextAssetId(value);
+    }
+    get assetProperties() {
+        return this._assetProperties;
+    }
+    set regularProperties(value) {
+        this._regularProperties = this.withContextAssetId(value);
+    }
+    get regularProperties() {
+        return this._regularProperties;
+    }
+    set computedProperties(value) {
+        this._computedProperties = this.withContextAssetId(value);
+    }
+    get computedProperties() {
+        return this._computedProperties;
+    }
     get showAsset() {
         return !this.hiddenTabs.asset;
     }
@@ -2924,10 +2945,19 @@ class AssetPropertyTabsComponent {
         const { computed, simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
         return [...computed, ...simple, ...complex];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertyTabsComponent, isStandalone: true, selector: "c8y-asset-property-tabs", inputs: { asset: "asset", config: "config", selectedProperties: "selectedProperties", hiddenTabs: "hiddenTabs", tabsOutletName: "tabsOutletName", showSearch: "showSearch" }, outputs: { selectedPropertiesChange: "selectedPropertiesChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "@if (showSearch) {\n  <div class=\"form-group p-16 m-b-0 d-flex sticky-top bg-component\">\n    <div class=\"input-group input-group-search\">\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"'Search properties' | translate\"\n        placeholder=\"{{ 'Search properties' | translate }}\"\n        role=\"searchbox\"\n        type=\"search\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"inputText\"\n        (input)=\"onSearch()\"\n        #filter\n      />\n      @if (filter.value.length === 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n      }\n      @if (filter.value.length > 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"text-muted dlt-c8y-icon-times\"\n            [c8yIcon]=\"'times'\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            tabindex=\"0\"\n            role=\"button\"\n            (click)=\"clearSearch()\"\n          ></i>\n        </span>\n      }\n    </div>\n  </div>\n}\n\n@if (showTabBar) {\n  <c8y-tabs-outlet\n    class=\"elevation-none m-b-16 p-sticky bg-component d-block\"\n    [outletName]=\"tabsOutletName\"\n    orientation=\"horizontal\"\n  ></c8y-tabs-outlet>\n\n  @if (showAsset) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'asset'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1100\"\n      (onSelect)=\"onTabChange('asset')\"\n    >\n      <i [c8yIcon]=\"'cube'\"></i>\n      <span>\n        {{ tabNames.asset | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ assetCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showRegular) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'regular'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1000\"\n      (onSelect)=\"onTabChange('regular')\"\n    >\n      <i [c8yIcon]=\"'new-property'\"></i>\n      <span>\n        {{ tabNames.regular | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ regularCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showComputed) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'computed'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"900\"\n      (onSelect)=\"onTabChange('computed')\"\n    >\n      <i [c8yIcon]=\"'bolt'\"></i>\n      <span>\n        {{ tabNames.computed | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ computedCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n}\n\n<c8y-asset-property-list\n  class=\"bg-component d-block\"\n  [config]=\"config\"\n  [extraProperties]=\"displayedProperties\"\n  (selectedProperties)=\"onSelectedProperties($event)\"\n></c8y-asset-property-list>\n@if (selectedTab === 'regular') {\n  <c8y-load-more\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    withContextAssetId(properties) {
+        if (!this.config.addAssetToProperty) {
+            return properties;
+        }
+        return properties.map(prop => ({
+            ...prop,
+            asset: { id: this.asset.id, name: this.asset.name }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AssetPropertyTabsComponent, isStandalone: true, selector: "c8y-asset-property-tabs", inputs: { asset: "asset", config: "config", selectedProperties: "selectedProperties", hiddenTabs: "hiddenTabs", tabsOutletName: "tabsOutletName", showSearch: "showSearch" }, outputs: { selectedPropertiesChange: "selectedPropertiesChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "@if (showSearch) {\n  <div class=\"form-group p-16 m-b-0 d-flex sticky-top bg-component\">\n    <div class=\"input-group input-group-search\">\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"'Search properties' | translate\"\n        placeholder=\"{{ 'Search properties' | translate }}\"\n        role=\"searchbox\"\n        type=\"search\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"inputText\"\n        (input)=\"onSearch()\"\n        #filter\n      />\n      @if (filter.value.length === 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n      }\n      @if (filter.value.length > 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"text-muted dlt-c8y-icon-times\"\n            [c8yIcon]=\"'times'\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            tabindex=\"0\"\n            role=\"button\"\n            (click)=\"clearSearch()\"\n          ></i>\n        </span>\n      }\n    </div>\n  </div>\n}\n\n@if (showTabBar) {\n  <c8y-tabs-outlet\n    class=\"elevation-none m-b-16 p-sticky bg-component d-block\"\n    [outletName]=\"tabsOutletName\"\n    orientation=\"horizontal\"\n  ></c8y-tabs-outlet>\n\n  @if (showAsset) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'asset'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1100\"\n      (onSelect)=\"onTabChange('asset')\"\n    >\n      <i [c8yIcon]=\"'cube'\"></i>\n      <span>\n        {{ tabNames.asset | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ assetCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showRegular) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'regular'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1000\"\n      (onSelect)=\"onTabChange('regular')\"\n    >\n      <i [c8yIcon]=\"'new-property'\"></i>\n      <span>\n        {{ tabNames.regular | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ regularCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showComputed) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'computed'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"900\"\n      (onSelect)=\"onTabChange('computed')\"\n    >\n      <i [c8yIcon]=\"'bolt'\"></i>\n      <span>\n        {{ tabNames.computed | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ computedCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n}\n\n<c8y-asset-property-list\n  class=\"bg-component d-block\"\n  [config]=\"config\"\n  [extraProperties]=\"displayedProperties\"\n  (selectedProperties)=\"onSelectedProperties($event)\"\n></c8y-asset-property-list>\n@if (selectedTab === 'regular') {\n  <c8y-load-more\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-tabs', host: {
                         class: 'd-contents'
@@ -3034,10 +3064,10 @@ class CustomPropertiesDrawerComponent {
     selectIsDisabled() {
         return this.selectedProperties?.every(({ active }) => !active);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", outputs: { savePropertySelection: "savePropertySelection", cancelPropertySelection: "cancelPropertySelection" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<c8y-asset-property-tabs\n  [asset]=\"asset\"\n  [config]=\"config\"\n  [selectedProperties]=\"selectedProperties\"\n  [hiddenTabs]=\"hiddenTabs\"\n  [tabsOutletName]=\"'assetPropertiesDrawerTabs'\"\n  [showSearch]=\"true\"\n  (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n></c8y-asset-property-tabs>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: AssetPropertyTabsComponent, selector: "c8y-asset-property-tabs", inputs: ["asset", "config", "selectedProperties", "hiddenTabs", "tabsOutletName", "showSearch"], outputs: ["selectedPropertiesChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", outputs: { savePropertySelection: "savePropertySelection", cancelPropertySelection: "cancelPropertySelection" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<c8y-asset-property-tabs\n  [asset]=\"asset\"\n  [config]=\"config\"\n  [selectedProperties]=\"selectedProperties\"\n  [hiddenTabs]=\"hiddenTabs\"\n  [tabsOutletName]=\"'assetPropertiesDrawerTabs'\"\n  [showSearch]=\"true\"\n  (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n></c8y-asset-property-tabs>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: AssetPropertyTabsComponent, selector: "c8y-asset-property-tabs", inputs: ["asset", "config", "selectedProperties", "hiddenTabs", "tabsOutletName", "showSearch"], outputs: ["selectedPropertiesChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-custom-properties-drawer-component', host: {
                         class: 'd-contents'
@@ -3071,16 +3101,49 @@ class CustomPropertiesDrawerService {
             return [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CustomPropertiesDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CustomPropertiesDrawerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CustomPropertiesDrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
+/**
+ * A pipe that returns the display label for an asset property.
+ * If the property has an `asset`, the label is prefixed with the asset name.
+ * Otherwise, only the translated property label is returned.
+ */
+class AssetPropertyLabelPipe {
+    constructor() {
+        this.translateService = inject(TranslateService);
+    }
+    transform(property) {
+        if (!property) {
+            return '';
+        }
+        const label = this.translateService.instant(property.label || property.title || property.name || '');
+        if (!property.asset) {
+            return label;
+        }
+        return this.translateService.instant(gettext('Asset: {{assetName}}\nProperty: {{label}}'), {
+            assetName: property.asset?.name,
+            label
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyLabelPipe, isStandalone: true, name: "c8yAssetPropertyLabel" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertyLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'c8yAssetPropertyLabel',
+                    standalone: true
+                }]
+        }] });
+
 /**
  * Represents a component for selecting asset properties.
  * This component handles all selection logic and can be used standalone or within drawer/modal wrappers.
@@ -3191,7 +3254,7 @@ class AssetPropertySelectorComponent {
         if (configured) {
             const currentAsset = this.assetSelection.getValue();
             if (currentAsset?.id) {
-                property.contextAssetId = currentAsset.id;
+                property.configuredAssetId = currentAsset.id;
             }
             this.emitCurrentSelection();
         }
@@ -3277,7 +3340,7 @@ class AssetPropertySelectorComponent {
                     clonedProp.config = configs[index];
                     const currentAsset = this.assetSelection.getValue();
                     if (currentAsset?.id) {
-                        clonedProp.contextAssetId = currentAsset.id;
+                        clonedProp.configuredAssetId = currentAsset.id;
                     }
                     // Generate instanceId for computed properties to allow multiple instances
                     if (!clonedProp.instanceId) {
@@ -3332,16 +3395,16 @@ class AssetPropertySelectorComponent {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertySelectorComponent, isStandalone: true, selector: "c8y-asset-property-selector", inputs: { contextAsset: "contextAsset", config: "config", extraProperties: "extraProperties", allowChangingContext: "allowChangingContext", allowPropertiesFromMultipleAssets: "allowPropertiesFromMultipleAssets", hideSelection: "hideSelection", allowSearch: "allowSearch" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AssetPropertySelectorComponent, isStandalone: true, selector: "c8y-asset-property-selector", inputs: { contextAsset: "contextAsset", config: "config", extraProperties: "extraProperties", allowChangingContext: "allowChangingContext", allowPropertiesFromMultipleAssets: "allowPropertiesFromMultipleAssets", hideSelection: "hideSelection", allowSearch: "allowSearch" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => AssetPropertySelectorComponent)
             }
-        ], ngImport: i0, template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  @if (allowChangingContext) {\n    <div class=\"d-flex d-col p-relative bg-level-1\">\n      <c8y-asset-selector-miller\n        class=\"d-contents\"\n        [(ngModel)]=\"contextAsset\"\n        [asset]=\"contextAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [container]=\"''\"\n        [config]=\"{\n          view: 'miller',\n          groupsSelectable: true,\n          columnHeaders: true,\n          showChildDevices: true,\n          showUnassignedDevices: true,\n          singleColumn: true,\n          search: allowSearch,\n          showFilter: true\n        }\"\n      ></c8y-asset-selector-miller>\n    </div>\n  }\n\n  <div class=\"bg-component inner-scroll\">\n    <c8y-asset-property-tabs\n      class=\"bg-component d-contents\"\n      [asset]=\"assetSelection | async\"\n      [config]=\"config\"\n      [selectedProperties]=\"selectedProperties\"\n      [hiddenTabs]=\"hiddenTabs\"\n      [showSearch]=\"true\"\n      (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n    ></c8y-asset-property-tabs>\n  </div>\n\n  @if (!hideSelection) {\n    <div class=\"inner-scroll bg-level-1\">\n      <p\n        class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n        [title]=\"'Selected properties' | translate\"\n      >\n        {{ 'Selected properties' | translate }}\n      </p>\n      @if (selectedProperties?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedProp of selectedProperties; track selectedProp.label) {\n            <div\n              [ngClass]=\"{\n                'c8y-datapoint-pill': selectedProp.computed && selectedProp.config,\n                'c8y-alarm-pill': !(selectedProp.computed && selectedProp.config)\n              }\"\n            >\n              <button\n                class=\"c8y-alarm-pill__btn\"\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"propertyRemoved(selectedProp)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove\"\n                ></i>\n              </button>\n              @if (selectedProp.computed && selectedProp.config) {\n                <button\n                  class=\"c8y-datapoint-pill__btn\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(selectedProp)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @let label =\n                selectedProp.label || selectedProp.title || selectedProp.name | translate;\n              <div\n                class=\"c8y-alarm-pill__label\"\n                [title]=\"label\"\n              >\n                <button\n                  class=\"btn-clean m-r-4\"\n                  [attr.aria-label]=\"selectedProp | c8yAssetPropertyIconTooltip\"\n                  tooltip=\"{{ selectedProp | c8yAssetPropertyIconTooltip }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                >\n                  <i [c8yIcon]=\"selectedProp | c8yAssetPropertyIcon\"></i>\n                </button>\n                <span class=\"text-truncate\">\n                  <span class=\"text-truncate\">{{ label }}</span>\n                  @if (selectedProp.config) {\n                    <small\n                      class=\"text-muted\"\n                      title=\"{{ selectedProp.config | json }}\"\n                      >{{ selectedProp.config | json }}</small\n                    >\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!selectedProperties || !selectedProperties.length) {\n        <div class=\"p-r-8\">\n          <c8y-ui-empty-state\n            [icon]=\"'c8y-data-points'\"\n            [title]=\"'No properties to display' | translate\"\n            [subtitle]=\"\n              'Select the asset, then on the available properties list, select desired property.'\n                | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyTabsComponent, selector: "c8y-asset-property-tabs", inputs: ["asset", "config", "selectedProperties", "hiddenTabs", "tabsOutletName", "showSearch"], outputs: ["selectedPropertiesChange"] }, { kind: "component", type: MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+        ], ngImport: i0, template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  @if (allowChangingContext) {\n    <div class=\"d-flex d-col p-relative bg-level-1\">\n      <c8y-asset-selector-miller\n        class=\"d-contents\"\n        [(ngModel)]=\"contextAsset\"\n        [asset]=\"contextAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [container]=\"''\"\n        [config]=\"{\n          view: 'miller',\n          groupsSelectable: true,\n          columnHeaders: true,\n          showChildDevices: true,\n          showUnassignedDevices: true,\n          singleColumn: true,\n          search: allowSearch,\n          showFilter: true\n        }\"\n      ></c8y-asset-selector-miller>\n    </div>\n  }\n\n  <div class=\"bg-component inner-scroll\">\n    <c8y-asset-property-tabs\n      class=\"bg-component d-contents\"\n      [asset]=\"assetSelection | async\"\n      [config]=\"config\"\n      [selectedProperties]=\"selectedProperties\"\n      [hiddenTabs]=\"hiddenTabs\"\n      [showSearch]=\"true\"\n      (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n    ></c8y-asset-property-tabs>\n  </div>\n\n  @if (!hideSelection) {\n    <div class=\"inner-scroll bg-level-1\">\n      <p\n        class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n        [title]=\"'Selected properties' | translate\"\n      >\n        {{ 'Selected properties' | translate }}\n      </p>\n      @if (selectedProperties?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedProp of selectedProperties; track selectedProp.label) {\n            <div\n              [ngClass]=\"{\n                'c8y-datapoint-pill': selectedProp.computed && selectedProp.config,\n                'c8y-alarm-pill': !(selectedProp.computed && selectedProp.config)\n              }\"\n            >\n              <button\n                class=\"c8y-alarm-pill__btn\"\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"propertyRemoved(selectedProp)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove\"\n                ></i>\n              </button>\n              @if (selectedProp.computed && selectedProp.config) {\n                <button\n                  class=\"c8y-datapoint-pill__btn\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(selectedProp)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @let label =\n                selectedProp.label || selectedProp.title || selectedProp.name | translate;\n              <div\n                class=\"c8y-alarm-pill__label\"\n                [title]=\"selectedProp | c8yAssetPropertyLabel\"\n              >\n                <button\n                  class=\"btn-clean m-r-4\"\n                  [attr.aria-label]=\"selectedProp | c8yAssetPropertyIconTooltip\"\n                  tooltip=\"{{ selectedProp | c8yAssetPropertyIconTooltip }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                >\n                  <i [c8yIcon]=\"selectedProp | c8yAssetPropertyIcon\"></i>\n                </button>\n                <span class=\"text-truncate\">\n                  <span class=\"text-truncate\">{{ label }}</span>\n                  @if (selectedProp.config) {\n                    <small\n                      class=\"text-muted\"\n                      title=\"{{ selectedProp.config | json }}\"\n                      >{{ selectedProp.config | json }}</small\n                    >\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!selectedProperties || !selectedProperties.length) {\n        <div class=\"p-r-8\">\n          <c8y-ui-empty-state\n            [icon]=\"'c8y-data-points'\"\n            [title]=\"'No properties to display' | translate\"\n            [subtitle]=\"\n              'Select the asset, then on the available properties list, select desired property.'\n                | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyTabsComponent, selector: "c8y-asset-property-tabs", inputs: ["asset", "config", "selectedProperties", "hiddenTabs", "tabsOutletName", "showSearch"], outputs: ["selectedPropertiesChange"] }, { kind: "component", type: MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: AssetPropertyLabelPipe, name: "c8yAssetPropertyLabel" }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertySelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertySelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-selector', standalone: true, providers: [
                         {
@@ -3360,9 +3423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AssetPropertyIconPipe,
                         TooltipModule,
                         AssetPropertyIconTooltipPipe,
+                        AssetPropertyLabelPipe,
                         IconDirective,
                         JsonPipe
-                    ], template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  @if (allowChangingContext) {\n    <div class=\"d-flex d-col p-relative bg-level-1\">\n      <c8y-asset-selector-miller\n        class=\"d-contents\"\n        [(ngModel)]=\"contextAsset\"\n        [asset]=\"contextAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [container]=\"''\"\n        [config]=\"{\n          view: 'miller',\n          groupsSelectable: true,\n          columnHeaders: true,\n          showChildDevices: true,\n          showUnassignedDevices: true,\n          singleColumn: true,\n          search: allowSearch,\n          showFilter: true\n        }\"\n      ></c8y-asset-selector-miller>\n    </div>\n  }\n\n  <div class=\"bg-component inner-scroll\">\n    <c8y-asset-property-tabs\n      class=\"bg-component d-contents\"\n      [asset]=\"assetSelection | async\"\n      [config]=\"config\"\n      [selectedProperties]=\"selectedProperties\"\n      [hiddenTabs]=\"hiddenTabs\"\n      [showSearch]=\"true\"\n      (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n    ></c8y-asset-property-tabs>\n  </div>\n\n  @if (!hideSelection) {\n    <div class=\"inner-scroll bg-level-1\">\n      <p\n        class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n        [title]=\"'Selected properties' | translate\"\n      >\n        {{ 'Selected properties' | translate }}\n      </p>\n      @if (selectedProperties?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedProp of selectedProperties; track selectedProp.label) {\n            <div\n              [ngClass]=\"{\n                'c8y-datapoint-pill': selectedProp.computed && selectedProp.config,\n                'c8y-alarm-pill': !(selectedProp.computed && selectedProp.config)\n              }\"\n            >\n              <button\n                class=\"c8y-alarm-pill__btn\"\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"propertyRemoved(selectedProp)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove\"\n                ></i>\n              </button>\n              @if (selectedProp.computed && selectedProp.config) {\n                <button\n                  class=\"c8y-datapoint-pill__btn\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(selectedProp)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @let label =\n                selectedProp.label || selectedProp.title || selectedProp.name | translate;\n              <div\n                class=\"c8y-alarm-pill__label\"\n                [title]=\"label\"\n              >\n                <button\n                  class=\"btn-clean m-r-4\"\n                  [attr.aria-label]=\"selectedProp | c8yAssetPropertyIconTooltip\"\n                  tooltip=\"{{ selectedProp | c8yAssetPropertyIconTooltip }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                >\n                  <i [c8yIcon]=\"selectedProp | c8yAssetPropertyIcon\"></i>\n                </button>\n                <span class=\"text-truncate\">\n                  <span class=\"text-truncate\">{{ label }}</span>\n                  @if (selectedProp.config) {\n                    <small\n                      class=\"text-muted\"\n                      title=\"{{ selectedProp.config | json }}\"\n                      >{{ selectedProp.config | json }}</small\n                    >\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!selectedProperties || !selectedProperties.length) {\n        <div class=\"p-r-8\">\n          <c8y-ui-empty-state\n            [icon]=\"'c8y-data-points'\"\n            [title]=\"'No properties to display' | translate\"\n            [subtitle]=\"\n              'Select the asset, then on the available properties list, select desired property.'\n                | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  @if (allowChangingContext) {\n    <div class=\"d-flex d-col p-relative bg-level-1\">\n      <c8y-asset-selector-miller\n        class=\"d-contents\"\n        [(ngModel)]=\"contextAsset\"\n        [asset]=\"contextAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [container]=\"''\"\n        [config]=\"{\n          view: 'miller',\n          groupsSelectable: true,\n          columnHeaders: true,\n          showChildDevices: true,\n          showUnassignedDevices: true,\n          singleColumn: true,\n          search: allowSearch,\n          showFilter: true\n        }\"\n      ></c8y-asset-selector-miller>\n    </div>\n  }\n\n  <div class=\"bg-component inner-scroll\">\n    <c8y-asset-property-tabs\n      class=\"bg-component d-contents\"\n      [asset]=\"assetSelection | async\"\n      [config]=\"config\"\n      [selectedProperties]=\"selectedProperties\"\n      [hiddenTabs]=\"hiddenTabs\"\n      [showSearch]=\"true\"\n      (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n    ></c8y-asset-property-tabs>\n  </div>\n\n  @if (!hideSelection) {\n    <div class=\"inner-scroll bg-level-1\">\n      <p\n        class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n        [title]=\"'Selected properties' | translate\"\n      >\n        {{ 'Selected properties' | translate }}\n      </p>\n      @if (selectedProperties?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedProp of selectedProperties; track selectedProp.label) {\n            <div\n              [ngClass]=\"{\n                'c8y-datapoint-pill': selectedProp.computed && selectedProp.config,\n                'c8y-alarm-pill': !(selectedProp.computed && selectedProp.config)\n              }\"\n            >\n              <button\n                class=\"c8y-alarm-pill__btn\"\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"propertyRemoved(selectedProp)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove\"\n                ></i>\n              </button>\n              @if (selectedProp.computed && selectedProp.config) {\n                <button\n                  class=\"c8y-datapoint-pill__btn\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(selectedProp)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @let label =\n                selectedProp.label || selectedProp.title || selectedProp.name | translate;\n              <div\n                class=\"c8y-alarm-pill__label\"\n                [title]=\"selectedProp | c8yAssetPropertyLabel\"\n              >\n                <button\n                  class=\"btn-clean m-r-4\"\n                  [attr.aria-label]=\"selectedProp | c8yAssetPropertyIconTooltip\"\n                  tooltip=\"{{ selectedProp | c8yAssetPropertyIconTooltip }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                >\n                  <i [c8yIcon]=\"selectedProp | c8yAssetPropertyIcon\"></i>\n                </button>\n                <span class=\"text-truncate\">\n                  <span class=\"text-truncate\">{{ label }}</span>\n                  @if (selectedProp.config) {\n                    <small\n                      class=\"text-muted\"\n                      title=\"{{ selectedProp.config | json }}\"\n                      >{{ selectedProp.config | json }}</small\n                    >\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!selectedProperties || !selectedProperties.length) {\n        <div class=\"p-r-8\">\n          <c8y-ui-empty-state\n            [icon]=\"'c8y-data-points'\"\n            [title]=\"'No properties to display' | translate\"\n            [subtitle]=\"\n              'Select the asset, then on the available properties list, select desired property.'\n                | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { contextAsset: [{
                 type: Input
             }], config: [{
@@ -3456,10 +3520,10 @@ class AssetPropertySelectorDrawerComponent {
     selectIsDisabled() {
         return (!this.selectedProperties?.length || this.selectedProperties?.every(({ active }) => !active));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AssetPropertySelectorDrawerComponent, isStandalone: true, selector: "c8y-asset-property-selector-drawer-component", inputs: { title: "title" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"card-inner-scroll fit-h\">\n  <c8y-asset-property-selector\n    [contextAsset]=\"contextAsset\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [allowPropertiesFromMultipleAssets]=\"allowPropertiesFromMultipleAssets\"\n    [hideSelection]=\"hideSelection\"\n    [allowSearch]=\"allowSearch\"\n    [ngModel]=\"selectedProperties\"\n    (ngModelChange)=\"selectionChange($event)\"\n  ></c8y-asset-property-selector>\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertySelectorComponent, selector: "c8y-asset-property-selector", inputs: ["contextAsset", "config", "extraProperties", "allowChangingContext", "allowPropertiesFromMultipleAssets", "hideSelection", "allowSearch"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AssetPropertySelectorDrawerComponent, isStandalone: true, selector: "c8y-asset-property-selector-drawer-component", inputs: { title: "title" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"card-inner-scroll fit-h\">\n  <c8y-asset-property-selector\n    [contextAsset]=\"contextAsset\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [allowPropertiesFromMultipleAssets]=\"allowPropertiesFromMultipleAssets\"\n    [hideSelection]=\"hideSelection\"\n    [allowSearch]=\"allowSearch\"\n    [ngModel]=\"selectedProperties\"\n    (ngModelChange)=\"selectionChange($event)\"\n  ></c8y-asset-property-selector>\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertySelectorComponent, selector: "c8y-asset-property-selector", inputs: ["contextAsset", "config", "extraProperties", "allowChangingContext", "allowPropertiesFromMultipleAssets", "hideSelection", "allowSearch"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-selector-drawer-component', host: {
                         class: 'd-contents'