@c8y/ngx-components 1023.75.1 → 1023.77.1

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

@@ -7,6 +7,7 @@ import { hookGeneric, ExtensionPointForPlugins, GroupService, fromTriggerOnce, g
 import { isEqual, omit, isArray, isObjectLike, isEmpty, find, forOwn, get, isUndefined, cloneDeep } from 'lodash-es';
 import { firstValueFrom, mergeMap, filter, take, map, distinctUntilChanged, shareReplay, BehaviorSubject, of, from, switchMap, isObservable, Subject, takeUntil, debounceTime } from 'rxjs';
 import * as i1 from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { NgFor, NgClass, NgTemplateOutlet, AsyncPipe, JsonPipe } from '@angular/common';
 import { CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/forms';
@@ -16,7 +17,6 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i4 from '@angular/cdk/tree';
 import { CdkTreeModule } from '@angular/cdk/tree';
 import { DataSource } from '@angular/cdk/collections';
-import { TranslateService } from '@ngx-translate/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { MillerViewComponent } from '@c8y/ngx-components/assets-navigator';
 
@@ -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.18", 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.18", ngImport: i0, type: ComputedPropertiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", 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.19", ngImport: i0, type: ComputedPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ComputedPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ComputedPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -775,6 +775,7 @@ class AssetPropertiesService {
         this.computedPropertiesService = inject(ComputedPropertiesService);
         this.featureCacheService = inject(FeatureCacheService);
         this.assetDefinitionsService = inject(AssetDefinitionsService);
+        this.translateService = inject(TranslateService);
     }
     /**
      * Filters added properties to only include those compatible with the given asset.
@@ -975,6 +976,142 @@ class AssetPropertiesService {
         });
         return { propertiesFromLibrary, paging };
     }
+    /**
+     * Filters properties with hierarchical search logic:
+     * - Simple properties: match label or name
+     * - Child properties: match child label/name AND if matches- match also parent
+     * - Complex properties: match parent label/name AND if matches- all children
+     *
+     * @example
+     * // Search "or" → matches children "Major", "Minor" → includes parent + matching children
+     * filterPropertiesWithHierarchy([
+     *   { name: 'c8y_ActiveAlarmsStatus', label: 'Active alarms status', type: 'object', ... },
+     *   { name: 'major', label: 'Major', keyPath: ['c8y_ActiveAlarmsStatus', 'major'], ... },
+     *   { name: 'minor', label: 'Minor', keyPath: ['c8y_ActiveAlarmsStatus', 'minor'], ... },
+     *   { name: 'critical', label: 'Critical', keyPath: ['c8y_ActiveAlarmsStatus', 'critical'], ... }
+     * ], 'or')
+     * // Returns: [
+     *   { name: 'c8y_ActiveAlarmsStatus', label: 'Active alarms status', type: 'object', ... },
+     *   { name: 'major', label: 'Major', keyPath: ['c8y_ActiveAlarmsStatus', 'major'], ... },
+     *   { name: 'minor', label: 'Minor', keyPath: ['c8y_ActiveAlarmsStatus', 'minor'], ... }
+     * ]
+     *
+     * @example
+     * // Search "address" → matches parent → includes parent + all children
+     * filterPropertiesWithHierarchy([
+     *   { name: 'c8y_Address', label: 'Address', type: 'object', ... },
+     *   { name: 'street', label: 'Street', keyPath: ['c8y_Address', 'street'], ... },
+     *   { name: 'city', label: 'City', keyPath: ['c8y_Address', 'city'], ... }
+     * ], 'address')
+     * // Returns: [
+     *   { name: 'c8y_Address', label: 'Address', type: 'object', ... },
+     *   { name: 'street', label: 'Street', keyPath: ['c8y_Address', 'street'], ... },
+     *   { name: 'city', label: 'City', keyPath: ['c8y_Address', 'city'], ... }
+     * ]
+     *
+     * @param flattenedProperties All flattened properties (simple and complex)
+     * @param searchTerm Search term (case-insensitive, already lowercased)
+     * @returns Filtered properties matching the search term
+     */
+    filterPropertiesWithHierarchy(flattenedProperties, searchTerm) {
+        if (!searchTerm) {
+            return flattenedProperties;
+        }
+        const lowercasedSearchTerm = searchTerm.toLowerCase();
+        // Extract complex properties for parent lookups
+        const complexProperties = flattenedProperties.filter(prop => this.isComplexProperty(prop));
+        const parentMap = new Map(complexProperties.map(p => [p.name, p]));
+        return flattenedProperties
+            .map(prop => {
+            if (!this.isComplexProperty(prop) && !prop.keyPath) {
+                return this.matchesSimpleProperty(prop, lowercasedSearchTerm);
+            }
+            else if (!this.isComplexProperty(prop) && prop.keyPath) {
+                return this.matchesChildProperty(prop, lowercasedSearchTerm, parentMap);
+            }
+            else {
+                return this.matchesComplexProperty(prop, lowercasedSearchTerm);
+            }
+        })
+            .filter(prop => prop !== null);
+    }
+    /**
+     * Checks if a simple property (which is not a child of a complex property) matches the search term.
+     * @param prop The property to check.
+     * @param searchTerm The search term (already lowercased).
+     * @returns The property if it matches, otherwise null.
+     */
+    matchesSimpleProperty(prop, searchTerm) {
+        const matches = prop.name.toLowerCase().includes(searchTerm) ||
+            prop.label.toLowerCase().includes(searchTerm) ||
+            this.translateService.instant(prop.label).toLowerCase().includes(searchTerm);
+        return matches ? prop : null;
+    }
+    /**
+     * Checks if a simple property (which is a child of a complex property) matches the search term and if not- check if parent complex property matches.
+     * @param prop The property to check.
+     * @param searchTerm The search term (already lowercased).
+     * @param parentMap A map of parent complex properties.
+     * @returns The property if it matches, otherwise null.
+     */
+    matchesChildProperty(prop, searchTerm, parentMap) {
+        // Check if child property matches
+        const childMatches = prop.name.toLowerCase().includes(searchTerm) ||
+            prop.label.toLowerCase().includes(searchTerm) ||
+            this.translateService.instant(prop.label).toLowerCase().includes(searchTerm);
+        if (childMatches) {
+            return prop;
+        }
+        // Check if parent complex property matches
+        const parentName = prop.keyPath[0];
+        const parentProp = parentMap.get(parentName);
+        if (parentProp) {
+            const parentMatches = parentProp.name.toLowerCase().includes(searchTerm) ||
+                parentProp.label.toLowerCase().includes(searchTerm) ||
+                this.translateService.instant(parentProp.label).toLowerCase().includes(searchTerm);
+            return parentMatches ? prop : null;
+        }
+        return null;
+    }
+    /**
+     * Checks if a complex property matches the search term or if any of its child properties match the search term.
+     * @param prop The complex property to check.
+     * @param searchTerm The search term (already lowercased).
+     * @returns The property if it matches, otherwise null.
+     */
+    matchesComplexProperty(prop, searchTerm) {
+        // Complex property
+        const parentMatches = prop.name.toLowerCase().includes(searchTerm) ||
+            prop.label.toLowerCase().includes(searchTerm) ||
+            this.translateService.instant(prop.label).toLowerCase().includes(searchTerm);
+        if (parentMatches) {
+            return prop;
+        }
+        // If parent doesn't match, check children properties- if any of the children match, then we include the parent complex property
+        // Get nested properties from the schema
+        const nestedPropertiesObj = prop.c8y_JsonSchema?.properties[prop.name]?.properties;
+        if (nestedPropertiesObj) {
+            // Check if any nested property matches the search term
+            const matchingNestedProperty = Object.keys(nestedPropertiesObj).find(key => {
+                const nestedProp = nestedPropertiesObj[key];
+                return (key.toLowerCase().includes(searchTerm) ||
+                    (nestedProp.title || '').toLowerCase().includes(searchTerm) ||
+                    this.translateService
+                        .instant(nestedProp.title || '')
+                        .toLowerCase()
+                        .includes(searchTerm));
+            });
+            if (matchingNestedProperty) {
+                return prop;
+            }
+            else {
+                return null;
+            }
+        }
+        else {
+            return null;
+        }
+    }
     async requestPropertiesFromPropertiesLibrary(searchText) {
         let queryFilter = '(type eq c8y_JsonSchema) and (appliesTo.MANAGED_OBJECTS eq true)';
         if (searchText?.trim()) {
@@ -1117,10 +1254,10 @@ class AssetPropertiesService {
         }
         return this.categorizeCustomProperties(propertyObjects);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1152,10 +1289,10 @@ class AssetPropertyActionDirective {
         this.elementRef = elementRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", 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.18", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", 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.19", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yAssetPropertyAction]',
@@ -1215,10 +1352,10 @@ class AssetPropertyValuePipe {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyValue',
@@ -1258,10 +1395,10 @@ class AssetPropertyIconPipe {
                 return 'mix-words';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyIcon',
@@ -1291,10 +1428,10 @@ class AssetPropertyIconTooltipPipe {
             return property.type;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyIconTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyIconTooltipPipe, isStandalone: true, name: "c8yAssetPropertyIconTooltip" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyIconTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyIconTooltipPipe, isStandalone: true, name: "c8yAssetPropertyIconTooltip" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyIconTooltipPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyIconTooltipPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyIconTooltip',
@@ -1422,10 +1559,10 @@ class ComputedPropertiesConfigComponent {
         }
         return of(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ComputedPropertiesConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", 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.19", ngImport: i0, type: ComputedPropertiesConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", 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.18", ngImport: i0, type: ComputedPropertiesConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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: [{
@@ -1457,10 +1594,10 @@ class AssetPropertyCollapseButtonTitlePipe {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, isStandalone: true, name: "c8yAssetPropertyCollapseButtonTitle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, isStandalone: true, name: "c8yAssetPropertyCollapseButtonTitle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyCollapseButtonTitle',
@@ -1747,10 +1884,10 @@ class AssetPropertyDragDropService {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyDragDropService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyDragDropService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyDragDropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyDragDropService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1845,6 +1982,7 @@ class AssetPropertyListComponent {
         this.computedPropertiesService = inject(ComputedPropertiesService);
         this.modalService = inject(BsModalService);
         this.dragDropService = inject(AssetPropertyDragDropService);
+        this.translateService = inject(TranslateService);
         effect(() => {
             if ((this.config.expansionMode === 'nonCollapsible' ||
                 this.config.expansionMode === 'expandedByDefault') &&
@@ -2391,9 +2529,10 @@ class AssetPropertyListComponent {
     matchesSearch(property, filterText) {
         const filterByFields = [
             property.label,
+            this.translateService.instant(property.label),
             property.name,
             property.keyPath?.join('.'),
-            property.title
+            this.translateService.instant(property.title)
         ].filter(Boolean);
         return filterByFields.some(field => field?.toLowerCase().includes(filterText));
     }
@@ -2651,10 +2790,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.18", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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.19", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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=\"{{ node.property.keyPath?.join('.') || node.property?.name }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || node.property?.name }}\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.18", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-list', standalone: true, imports: [
                         NgClass,
@@ -2674,7 +2813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         AssetPropertyCollapseButtonTitlePipe,
                         CdkDropList,
                         CdkDrag
-                    ], 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" }]
+                    ], 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=\"{{ node.property.keyPath?.join('.') || node.property?.name }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || node.property?.name }}\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" }]
         }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], config: [{
                 type: Input
             }], asset: [{
@@ -2745,6 +2884,7 @@ class AssetPropertyTabsComponent {
         this.destroy$ = new Subject();
         this.assetPropertiesService = inject(AssetPropertiesService);
         this.computedPropertiesService = inject(ComputedPropertiesService);
+        this.translateService = inject(TranslateService);
         this.selectedAssetProperties = [];
         this.selectedRegularProperties = [];
         this.selectedComputedProperties = [];
@@ -2894,43 +3034,55 @@ class AssetPropertyTabsComponent {
             return;
         }
         const properties = await this.assetPropertiesService.getInitialProperties(this.asset);
-        const categorized = this.categorizeAndFlattenHierarchicalProperties(properties);
-        // Filter to apply search
-        const filtered = categorized.filter(prop => prop.label.toLowerCase().includes(this.inputText?.trim().toLowerCase() || ''));
+        const allAssetProperties = this.categorizeAndFlattenHierarchicalProperties(properties);
+        const searchTerm = this.inputText?.trim().toLowerCase() || '';
+        const filtered = this.assetPropertiesService.filterPropertiesWithHierarchy(allAssetProperties, searchTerm);
         this.assetProperties = filtered;
-        this.assetCount = categorized.length;
+        this.assetCount = filtered.length;
     }
     async updateProperties() {
         let propertiesFromLibrary = [];
-        let filteredDefaultProperties = [];
+        const searchTerm = this.inputText?.trim().toLowerCase() || '';
         if (this.showRegular) {
-            // requires asset selection before selecting regular properties
             if (this.asset) {
+                // First, get properties from library with search term applied
                 const result = await this.assetPropertiesService.getPropertiesFromPropertiesLibrary(this.inputText);
                 propertiesFromLibrary = result.propertiesFromLibrary;
+                const { simple: simpleFromLibrary, complex: complexFromLibrary } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(propertiesFromLibrary);
                 this.paging = result.paging;
-                filteredDefaultProperties = defaultAssetProperties.filter(prop => prop.label.toLowerCase().includes(this.inputText?.trim().toLowerCase() || ''));
+                // Then, get default properties and apply search term filter
+                const { simple: simpleDefault, complex: complexDefault } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(defaultAssetProperties);
+                const filteredSimpleDefault = simpleDefault.filter(prop => prop.name.toLowerCase().includes(searchTerm) ||
+                    prop.label.toLowerCase().includes(searchTerm) ||
+                    this.translateService.instant(prop.label).toLowerCase().includes(searchTerm));
+                const filteredComplexDefault = this.assetPropertiesService.filterPropertiesWithHierarchy(complexDefault, searchTerm);
+                // merge properties from library with default properties
+                this.regularProperties = [
+                    ...filteredSimpleDefault,
+                    ...simpleFromLibrary,
+                    ...filteredComplexDefault,
+                    ...complexFromLibrary
+                ];
+                this.regularCount =
+                    (this.paging?.totalElements || 0) +
+                        filteredSimpleDefault.length +
+                        filteredComplexDefault.length;
             }
             else {
                 this.paging = undefined;
             }
         }
-        let filteredComputedProperties = [];
         if (this.showComputed) {
-            filteredComputedProperties = this.allComputedProperties.filter(prop => prop.label.toLowerCase().includes(this.inputText?.trim().toLowerCase() || ''));
+            const { computed } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(this.allComputedProperties);
+            const filteredComputedProperties = computed.filter(prop => prop.name.toLowerCase().includes(searchTerm) ||
+                prop.label.toLowerCase().includes(searchTerm) ||
+                this.translateService.instant(prop.label).toLowerCase().includes(searchTerm));
+            this.computedProperties = filteredComputedProperties;
+            this.computedCount = filteredComputedProperties.length;
         }
         if (this.showAsset) {
             await this.loadAssetProperties();
         }
-        const allProperties = this.categorizeAndFlattenHierarchicalProperties([
-            ...filteredComputedProperties,
-            ...propertiesFromLibrary,
-            ...filteredDefaultProperties
-        ]);
-        this.regularProperties = allProperties.filter(prop => !prop.computed);
-        this.computedProperties = allProperties.filter(prop => prop.computed);
-        this.regularCount = (this.paging?.totalElements || 0) + filteredDefaultProperties.length;
-        this.computedCount = filteredComputedProperties.length;
         this.updateDisplayedProperties();
     }
     updateDisplayedProperties() {
@@ -3020,10 +3172,10 @@ class AssetPropertyTabsComponent {
             asset: { id: this.asset.id, name: this.asset.name }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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.18", ngImport: i0, type: AssetPropertyTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-tabs', host: {
                         class: 'd-contents'
@@ -3130,10 +3282,10 @@ class CustomPropertiesDrawerComponent {
     selectIsDisabled() {
         return this.selectedProperties?.every(({ active }) => !active);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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.19", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", 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.18", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-custom-properties-drawer-component', host: {
                         class: 'd-contents'
@@ -3167,10 +3319,10 @@ class CustomPropertiesDrawerService {
             return [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CustomPropertiesDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CustomPropertiesDrawerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CustomPropertiesDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CustomPropertiesDrawerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CustomPropertiesDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CustomPropertiesDrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3199,10 +3351,10 @@ class AssetPropertyLabelPipe {
             label
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyLabelPipe, isStandalone: true, name: "c8yAssetPropertyLabel" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyLabelPipe, isStandalone: true, name: "c8yAssetPropertyLabel" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertyLabelPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyLabel',
@@ -3464,8 +3616,8 @@ class AssetPropertySelectorComponent {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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.19", ngImport: i0, type: AssetPropertySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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,
@@ -3473,7 +3625,7 @@ class 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]=\"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.18", ngImport: i0, type: AssetPropertySelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertySelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-selector', standalone: true, providers: [
                         {
@@ -3589,10 +3741,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.18", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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.19", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", 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.18", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-selector-drawer-component', host: {
                         class: 'd-contents'