@c8y/ngx-components 1022.35.1 → 1022.44.3

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

@@ -1,20 +1,22 @@
-import * as i2 from '@c8y/ngx-components';
-import { gettext, AssetTypesRealtimeService, GroupService, AlertService, ListGroupModule, C8yTranslatePipe, IconDirective, EmptyStateComponent, BottomDrawerRef, FormsModule as FormsModule$1, LoadMoreComponent, BottomDrawerService } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
 import * as i0 from '@angular/core';
-import { inject, Injectable, Directive, Pipe, viewChild, EventEmitter, effect, ContentChild, Output, Input, Component } from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, Injector, runInInjectionContext, Pipe, viewChildren, ViewContainerRef, effect, reflectComponentType, Input, Component, viewChild, EventEmitter, ContentChild, Output } from '@angular/core';
 import { InventoryService } from '@c8y/client';
-import { isArray, isObjectLike, isEmpty, find, forOwn, get, cloneDeep } from 'lodash-es';
-import { firstValueFrom, BehaviorSubject, Subject, takeUntil, debounceTime } from 'rxjs';
-import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import * as i2 from '@c8y/ngx-components';
+import { hookGeneric, ExtensionPointForPlugins, GroupService, fromTriggerOnce, getInjectedHooks, stateToFactory, AssetTypesRealtimeService, AlertService, isPromise, C8yTranslatePipe, IconDirective, ListGroupModule, EmptyStateComponent, BottomDrawerRef, FormsModule as FormsModule$1, LoadMoreComponent, TabComponent, TabsOutletComponent, BottomDrawerService } from '@c8y/ngx-components';
+import { 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 { NgFor, NgIf, NgClass, AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { NgForm, FormsModule } from '@angular/forms';
 import * as i3 from 'ngx-bootstrap/tooltip';
 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 { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 
 const defaultAssetPropertyListConfig = {
     filterable: true,
@@ -31,7 +33,7 @@ const defaultAssetProperties = [
     {
         c8y_JsonSchema: { properties: { name: { type: 'string', label: 'Name' } } },
         name: 'name',
-        label: 'Name',
+        label: gettext('Name'),
         type: 'string',
         active: true,
         isEditable: true,
@@ -40,7 +42,7 @@ const defaultAssetProperties = [
     {
         c8y_JsonSchema: { properties: { id: { type: 'string', label: 'ID' } } },
         name: 'id',
-        label: 'ID',
+        label: gettext('ID'),
         type: 'string',
         active: true,
         isEditable: false,
@@ -51,7 +53,7 @@ const defaultAssetProperties = [
             properties: { type: { type: 'string', label: 'Type' } }
         },
         name: 'type',
-        label: 'Type',
+        label: gettext('Type'),
         type: 'string',
         active: true,
         isEditable: false,
@@ -62,7 +64,7 @@ const defaultAssetProperties = [
             properties: { owner: { type: 'string', label: 'Owner' } }
         },
         name: 'owner',
-        label: 'Owner',
+        label: gettext('Owner'),
         type: 'string',
         isEditable: false,
         isStandardProperty: true
@@ -72,7 +74,7 @@ const defaultAssetProperties = [
             properties: { lastUpdated: { type: 'string', label: 'Last updated' } }
         },
         name: 'lastUpdated',
-        label: 'Last updated',
+        label: gettext('Last updated'),
         type: 'string',
         isEditable: false,
         isStandardProperty: true
@@ -80,7 +82,7 @@ const defaultAssetProperties = [
 ];
 const deviceAssetProperties = [
     {
-        label: 'Active alarms status',
+        label: gettext('Active alarms status'),
         type: 'object',
         isEditable: false,
         isStandardProperty: true,
@@ -114,7 +116,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Address',
+        label: gettext('Address'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -156,7 +158,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Agent',
+        label: gettext('Agent'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -190,7 +192,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Availability',
+        label: gettext('Availability'),
         type: 'object',
         isEditable: false,
         isStandardProperty: true,
@@ -217,7 +219,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Connection',
+        label: gettext('Connection'),
         type: 'object',
         isEditable: false,
         isStandardProperty: true,
@@ -239,7 +241,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Communication mode',
+        label: gettext('Communication mode'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -261,7 +263,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Firmware',
+        label: gettext('Firmware'),
         type: 'object',
         isEditable: false,
         isStandardProperty: true,
@@ -295,7 +297,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Hardware',
+        label: gettext('Hardware'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -325,7 +327,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'LPWAN device',
+        label: gettext('LPWAN device'),
         type: 'object',
         isEditable: false,
         isStandardProperty: true,
@@ -347,7 +349,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Mobile',
+        label: gettext('Mobile'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -460,7 +462,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Position',
+        label: gettext('Position'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -490,7 +492,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Required availability',
+        label: gettext('Required availability'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -515,7 +517,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Software',
+        label: gettext('Software'),
         type: 'object',
         isEditable: false,
         isStandardProperty: true,
@@ -545,7 +547,7 @@ const deviceAssetProperties = [
         }
     },
     {
-        label: 'Network',
+        label: gettext('Network'),
         type: 'object',
         isEditable: true,
         isStandardProperty: true,
@@ -665,6 +667,84 @@ const RESULT_TYPES = {
     VALUE_UNIT_TIME: { name: 'VALUE_UNIT_TIME', value: 3, label: gettext('Value, unit and time') }
 };
 
+const HOOK_COMPUTED_PROPERTY = new InjectionToken('HOOK_COMPUTED_PROPERTY');
+function hookComputedProperty(property, options) {
+    return hookGeneric(property, HOOK_COMPUTED_PROPERTY, options);
+}
+class ComputedPropertiesService extends ExtensionPointForPlugins {
+    constructor(rootInjector, router, plugins) {
+        super(rootInjector, plugins);
+        this.router = router;
+        this.groupService = inject(GroupService);
+        this.items$ = this.setupItemsObservable();
+    }
+    /**
+     * Returns the current state.
+     * @readonly
+     * @returns The current set of computed properties.
+     */
+    get state() {
+        return this.state$.value;
+    }
+    add(propertyDef) {
+        this.state.add(propertyDef);
+        this.emitNewState();
+    }
+    getByName(name) {
+        if (!name) {
+            return Promise.resolve(undefined);
+        }
+        return firstValueFrom(this.items$.pipe(mergeMap((propertyDefs) => propertyDefs), filter((propertyDef) => propertyDef.name === name), take(1)));
+    }
+    getByContext(asset) {
+        if (!asset) {
+            return Promise.resolve([]);
+        }
+        const computedPropertyContextType = this.getTypeOfContext(asset);
+        return firstValueFrom(this.items$.pipe(map((propertyDefs) => propertyDefs.filter((propertyDef) => {
+            if (!propertyDef.contextType) {
+                return true;
+            }
+            return propertyDef.contextType.includes(computedPropertyContextType);
+        }))));
+    }
+    getTypeOfContext(context) {
+        const isEvent = (item) => !('severity' in item);
+        const isAlarm = (item) => 'severity' in item;
+        if (this.groupService.isDevice(context)) {
+            return 'device';
+        }
+        else if (this.groupService.isGroup(context) &&
+            !this.groupService.isAsset(context)) {
+            return 'group';
+        }
+        else if (this.groupService.isAsset(context)) {
+            return 'asset';
+        }
+        else if (isAlarm(context)) {
+            return 'alarm';
+        }
+        else if (isEvent(context)) {
+            return 'event';
+        }
+    }
+    setupItemsObservable() {
+        return fromTriggerOnce(this.router, this.refresh$, [
+            getInjectedHooks(HOOK_COMPUTED_PROPERTY, this.injectors),
+            () => this.factories,
+            stateToFactory(this.state$)
+        ]).pipe(distinctUntilChanged(), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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: "19.2.15", ngImport: i0, type: ComputedPropertiesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ComputedPropertiesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.Router }, { type: i2.PluginsResolveService }] });
+
 /**
  * Service for managing asset properties.
  */
@@ -690,6 +770,32 @@ class AssetPropertiesService {
         this.assetTypesRealtimeService = inject(AssetTypesRealtimeService);
         this.groupService = inject(GroupService);
         this.alert = inject(AlertService);
+        this.computedPropertiesService = inject(ComputedPropertiesService);
+    }
+    /**
+     * Filters added properties to only include those compatible with the given asset.
+     * Currently only checks compatibility for computed properties.
+     * @param allAddedProperties All properties that have been added by the user
+     * @param asset The current asset context
+     * @returns Promise resolving to properties compatible with the asset
+     */
+    async filterCompatibleProperties(allAddedProperties, asset) {
+        if (!asset || !allAddedProperties.length) {
+            return allAddedProperties;
+        }
+        let availableComputedPropertyNames = null;
+        const computedProperties = allAddedProperties.filter(prop => prop.computed);
+        if (computedProperties.length > 0) {
+            const availableComputedProperties = await this.computedPropertiesService.getByContext(asset);
+            availableComputedPropertyNames = new Set(availableComputedProperties.map(({ prop }) => prop.name));
+        }
+        const compatibleProperties = [];
+        for (const property of allAddedProperties) {
+            if (await this.isPropertyAvailable(property, availableComputedPropertyNames)) {
+                compatibleProperties.push(property);
+            }
+        }
+        return compatibleProperties;
     }
     /**
      * Retrieves properties for an asset from asset library.
@@ -785,7 +891,10 @@ class AssetPropertiesService {
         });
         const result = sortedProperties.reduce((acc, property) => {
             property.active = false;
-            if (this.isComplexProperty(property)) {
+            if (property.computed) {
+                acc.computed.push(property);
+            }
+            else if (this.isComplexProperty(property)) {
                 acc.complex.push(property);
                 this.addNestedProperties(property, acc.complex, true);
             }
@@ -793,7 +902,7 @@ class AssetPropertiesService {
                 acc.simple.push(property);
             }
             return acc;
-        }, { simple: [], complex: [] });
+        }, { computed: [], simple: [], complex: [] });
         return result;
     }
     /**
@@ -805,6 +914,21 @@ class AssetPropertiesService {
         return (property.c8y_JsonSchema?.properties[property.name]?.type === 'object' ||
             property.properties !== undefined);
     }
+    /**
+     * Checks if property is available based on provided available computed property names.
+     * @param property The property to check.
+     * @param availableComputedPropertyNames Set of available computed property names.
+     * @returns True if the property is available, false otherwise.
+     */
+    async isPropertyAvailable(property, availableComputedPropertyNames) {
+        if (property.computed) {
+            if (!availableComputedPropertyNames) {
+                return false;
+            }
+            return availableComputedPropertyNames.has(property.name);
+        }
+        return true;
+    }
     /**
      * Checks if two properties match for selection purposes.
      * @param property1 First property to compare.
@@ -819,6 +943,12 @@ class AssetPropertiesService {
                 return keyPath1.join('.') === keyPath2.join('.');
             }
             else if (!keyPath1 && !keyPath2) {
+                if (property1.computed &&
+                    property2.computed &&
+                    property1.instanceId &&
+                    property2.instanceId) {
+                    return property1.instanceId === property2.instanceId;
+                }
                 return true;
             }
         }
@@ -854,7 +984,8 @@ class AssetPropertiesService {
             pageSize: 20,
             revert: true,
             query,
-            withTotalPages: true
+            withTotalPages: true,
+            withTotalElements: true
         };
         try {
             const results = await this.inventoryService.list(filter);
@@ -1000,22 +1131,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class AssetPropertyValuePipe {
     constructor() {
         this.assetPropertiesService = inject(AssetPropertiesService);
+        this.computedPropertiesService = inject(ComputedPropertiesService);
+        this.injector = inject(Injector);
     }
-    transform(property, asset) {
+    transform(property, context) {
+        if (property.computed) {
+            return this.getCallbackComputedPropertyValue(property, context);
+        }
         if (!property) {
-            return '-';
+            return of('-');
         }
         let value;
         if (this.assetPropertiesService.isComplexProperty(property)) {
-            value = JSON.stringify(asset[property.name]);
+            value = JSON.stringify(context[property.name]);
         }
         else if ('keyPath' in property) {
-            value = get(asset, property.keyPath);
+            value = this.formatPropertyValue(get(context, property.keyPath));
         }
         else {
-            value = asset[property.name];
+            value = this.formatPropertyValue(context[property.name]);
         }
-        return value ?? '-';
+        return of(value ?? '-');
+    }
+    formatPropertyValue(value) {
+        if (value == null) {
+            return null;
+        }
+        return typeof value === 'string' ? value : JSON.stringify(value);
+    }
+    getCallbackComputedPropertyValue(property, context) {
+        return from(this.computedPropertiesService.getByName(property.name)).pipe(switchMap(definition => {
+            let value = '-';
+            runInInjectionContext(definition.injector || this.injector, () => {
+                value = definition.value({ config: property.config, context });
+            });
+            if (isObservable(value) || value instanceof Promise) {
+                return value;
+            }
+            else {
+                return of(value);
+            }
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
@@ -1033,7 +1189,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Maps various property types to corresponding icon names.
  */
 class AssetPropertyIconPipe {
-    transform(type) {
+    transform(assetProperty) {
+        if (assetProperty.computed) {
+            return 'bolt';
+        }
+        const type = assetProperty.type;
         switch (type) {
             case 'string':
                 return 'string';
@@ -1081,7 +1241,7 @@ class AssetPropertyIconTooltipPipe {
             return '';
         }
         else if (property.temporary) {
-            return this.translateService.instant(gettext$1('{{assetPropertyType}}\n(temporary)'), {
+            return this.translateService.instant(gettext('{{assetPropertyType}}\n(temporary)'), {
                 assetPropertyType: property.type
             });
         }
@@ -1100,6 +1260,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+class ComputedPropertiesConfigComponent {
+    constructor() {
+        this.properties = [];
+        this.definitions = [];
+        this.hosts = viewChildren('host', { read: ViewContainerRef });
+        this.configForms = viewChildren('configForm', { read: NgForm });
+        this.propertyConfigs = [];
+        this.result = new Promise((resolve, reject) => {
+            this._close = resolve;
+            this._cancel = reject;
+        });
+        this.injector = inject(Injector);
+        this.bsModalRef = inject(BsModalRef);
+        effect(async () => {
+            const hosts = this.hosts();
+            if (!hosts || hosts.length === 0) {
+                return;
+            }
+            for (let i = 0; i < this.propertyConfigs.length; i++) {
+                const propertyConfig = this.propertyConfigs[i];
+                const host = hosts[i];
+                if (host && propertyConfig.definition) {
+                    await this.createConfigComponent(propertyConfig, host);
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.propertyConfigs = this.properties.map((property, index) => ({
+            property,
+            definition: this.definitions[index],
+            config: property.config || this.definitions[index].prop.config
+        }));
+    }
+    get isFormValid() {
+        return this.configForms().every(form => form.valid) ?? false;
+    }
+    async apply() {
+        const allValid = await this.callOnBeforeSaveHooks();
+        if (allValid) {
+            const configs = this.propertyConfigs.map(pc => pc.config);
+            this._close(configs);
+            this.bsModalRef.hide();
+        }
+    }
+    cancel() {
+        this.bsModalRef.hide();
+        this._cancel();
+    }
+    async createConfigComponent(propertyConfig, host) {
+        const component = await this.getComponent(propertyConfig.definition);
+        host.clear();
+        const componentRef = host.createComponent(component, {
+            environmentInjector: this.injector
+        });
+        propertyConfig.componentRef = componentRef;
+        propertyConfig.componentInstance = componentRef.instance;
+        const componentMetadata = this.safeReflectComponentType(component);
+        const hasConfigInput = componentMetadata?.inputs.some(input => input.propName === 'config');
+        if (hasConfigInput) {
+            componentRef.setInput('config', propertyConfig.config);
+        }
+        else {
+            propertyConfig.componentInstance.config = propertyConfig.config;
+        }
+        const hasAssetInput = componentMetadata?.inputs.some(input => input.propName === 'asset');
+        if (hasAssetInput) {
+            componentRef.setInput('asset', this.asset);
+        }
+        else {
+            propertyConfig.componentInstance.asset = this.asset;
+        }
+    }
+    safeReflectComponentType(componentType) {
+        try {
+            return reflectComponentType(componentType);
+        }
+        catch (error) {
+            console.warn('Failed to reflect component metadata:', error);
+            return { inputs: [] };
+        }
+    }
+    async getComponent(definition) {
+        if (!!definition.loadConfigComponent) {
+            return await definition.loadConfigComponent();
+        }
+        else if (!!definition.configComponent) {
+            return definition.configComponent;
+        }
+    }
+    async callOnBeforeSaveHooks() {
+        const validationObservables = this.propertyConfigs
+            .filter(pc => pc.componentRef)
+            .map(pc => this.callSingleOnBeforeSaveHook(pc.componentRef, pc.config));
+        try {
+            const validationPromises = validationObservables.map(obs => firstValueFrom(obs));
+            const results = await Promise.all(validationPromises);
+            return results.every(result => result === true);
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    callSingleOnBeforeSaveHook(componentRef, config) {
+        if (!componentRef) {
+            return of(true);
+        }
+        const hook = componentRef.instance.onBeforeSave;
+        if (hook) {
+            const result = hook.call(componentRef.instance, config);
+            if (isUndefined(result)) {
+                return of(true);
+            }
+            if (isPromise(result)) {
+                return from(result);
+            }
+            return (isObservable(result) ? result : of(result));
+        }
+        return of(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ComputedPropertiesConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", 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: "pipe", type: C8yTranslatePipe, name: "translate" }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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: [{
+                type: Input
+            }], definitions: [{
+                type: Input
+            }], asset: [{
+                type: Input
+            }] } });
+
+/**
+ * Pipe to get the title for the collapse/expand button of a tree node.
+ */
+class AssetPropertyCollapseButtonTitlePipe {
+    constructor() {
+        this.collapseLabel = gettext('Collapse "{{ assetPropertyLabel }}"');
+        this.expandLabel = gettext('Expand "{{ assetPropertyLabel }}"');
+        this.translateService = inject(TranslateService);
+    }
+    transform(expanded, node) {
+        if (!node) {
+            return '';
+        }
+        else {
+            const template = expanded ? this.collapseLabel : this.expandLabel;
+            const assetPropertyLabel = node.property.label || node.property.title || node.property.name;
+            return this.translateService.instant(template, {
+                assetPropertyLabel: this.translateService.instant(assetPropertyLabel)
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, isStandalone: true, name: "c8yAssetPropertyCollapseButtonTitle" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'c8yAssetPropertyCollapseButtonTitle',
+                    standalone: true
+                }]
+        }] });
+
 /**
  * Represents a list of asset properties with hierarchical tree structure.
  */
@@ -1148,10 +1474,16 @@ class AssetPropertyListComponent {
          * Indicates if the selection state is indeterminate.
          */
         this.indeterminate = false;
+        this.collapseAllLabel = gettext('Collapse all');
+        this.expandAllLabel = gettext('Expand all');
         /**
          * List of properties that have been added temporarily as custom properties.
          */
-        this.addedProperties = [];
+        this.allAddedProperties = [];
+        /**
+         * List of properties that have been added temporarily as custom properties filtered according to context asset.
+         */
+        this.displayAddedProperties = [];
         /**
          * Subject for handling filter input.
          */
@@ -1165,6 +1497,8 @@ class AssetPropertyListComponent {
          */
         this.assetPropertiesService = inject(AssetPropertiesService);
         this.customPropertiesDrawerService = inject(CustomPropertiesDrawerService);
+        this.computedPropertiesService = inject(ComputedPropertiesService);
+        this.modalService = inject(BsModalService);
         effect(() => {
             if ((this.config.expansionMode === 'nonCollapsible' ||
                 this.config.expansionMode === 'expandedByDefault') &&
@@ -1184,7 +1518,10 @@ class AssetPropertyListComponent {
             .pipe(takeUntil(this.destroy$), debounceTime(200))
             .subscribe(() => this.filterTree());
     }
-    async ngOnChanges() {
+    async ngOnChanges(changes) {
+        if (changes['asset'] && !changes['asset'].firstChange) {
+            await this.updateDisplayAddedProperties();
+        }
         await this.updateProperties();
     }
     ngAfterViewInit() {
@@ -1218,15 +1555,94 @@ class AssetPropertyListComponent {
      * Opens the drawer to add new custom properties.
      */
     async addProperty() {
-        const propertiesToAdd = await this.customPropertiesDrawerService.getCustomProperties();
+        const propertiesToAdd = await this.customPropertiesDrawerService.getCustomProperties(this.asset);
         if (!propertiesToAdd || propertiesToAdd.length === 0) {
             return;
         }
-        propertiesToAdd.forEach(prop => (prop.temporary = true));
-        this.addedProperties = this.addedProperties.concat(propertiesToAdd);
+        const propertiesNeedingConfig = [];
+        const definitionsNeedingConfig = [];
+        const propertiesToActuallyAdd = [];
+        for (const prop of propertiesToAdd) {
+            if (prop.computed) {
+                const definition = await this.computedPropertiesService.getByName(prop.name);
+                if (definition.configComponent || definition.loadConfigComponent) {
+                    propertiesNeedingConfig.push(prop);
+                    definitionsNeedingConfig.push(definition);
+                }
+                else {
+                    prop.temporary = true;
+                    propertiesToActuallyAdd.push(prop);
+                }
+            }
+            else {
+                prop.temporary = true;
+                propertiesToActuallyAdd.push(prop);
+            }
+        }
+        if (propertiesNeedingConfig.length > 0) {
+            try {
+                const configs = await this.configureMultipleProperties(propertiesNeedingConfig, definitionsNeedingConfig);
+                propertiesNeedingConfig.forEach((prop, index) => {
+                    prop.config = configs[index];
+                    prop.temporary = true;
+                    propertiesToActuallyAdd.push(prop);
+                });
+            }
+            catch { }
+        }
+        if (propertiesToActuallyAdd.length === 0) {
+            return;
+        }
+        propertiesToActuallyAdd.forEach(prop => {
+            if (this.asset?.id) {
+                prop.contextAssetId = this.asset.id;
+            }
+            // Generate instanceId for computed properties to allow multiple instances
+            if (prop.computed && !prop.instanceId) {
+                prop.instanceId = crypto.randomUUID();
+            }
+        });
+        this.allAddedProperties = this.allAddedProperties.concat(propertiesToActuallyAdd);
+        await this.updateDisplayAddedProperties();
         await this.updateProperties();
         this.selectedProperties.next(this.dataSource.data.filter(n => n.property.active).map(n => n.property));
     }
+    /**
+     * Displays the configuration modal for multiple computed properties and updates their configurations.
+     * @param properties Properties to configure.
+     * @param definitions Computed property definitions including config components.
+     * @returns Promise resolving to array of configurations.
+     */
+    configureMultipleProperties(properties, definitions) {
+        const modalRef = this.modalService.show(ComputedPropertiesConfigComponent, {
+            ignoreBackdropClick: true,
+            class: 'modal-lg',
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            initialState: {
+                properties,
+                definitions,
+                asset: this.asset
+            }
+        }).content;
+        return modalRef.result;
+    }
+    /**
+     * Displays the configuration modal for a computed property and updates its configuration.
+     * @param property Property to configure.
+     * @param definition Computed property definition including config component.
+     * @returns true if the property was configured, false if cancelled.
+     */
+    async configureProperty(property, definition) {
+        try {
+            const configs = await this.configureMultipleProperties([property], [definition]);
+            property.config = configs[0];
+            return true;
+        }
+        catch (err) {
+            return false;
+        }
+    }
     /**
      * Removes temporary property from the list.
      * @param property The property to remove.
@@ -1251,12 +1667,33 @@ class AssetPropertyListComponent {
             // Remove only the property itself
             filterFn = (p) => p !== property;
         }
-        this.addedProperties = this.addedProperties.filter(filterFn);
+        this.allAddedProperties = this.allAddedProperties.filter(filterFn);
+        this.displayAddedProperties = this.displayAddedProperties.filter(filterFn);
         await this.updateProperties();
     }
+    async editProperty(property) {
+        const definition = await this.computedPropertiesService.getByName(property.name);
+        const configured = await this.configureProperty(property, definition);
+        if (configured && this.asset?.id) {
+            property.contextAssetId = this.asset.id;
+        }
+        await this.updateProperties();
+        this.selectedProperties.next(this.dataSource.data.filter(n => n.property.active).map(n => n.property));
+    }
     hasChild(node) {
         return node.expandable;
     }
+    /**
+     * Checks if the property's context asset matches the current asset.
+     * @param node The node to check.
+     * @returns True if the context asset doesn't match the current asset.
+     */
+    isContextMismatch(node) {
+        if (!node.property.computed || !node.contextAssetId) {
+            return false;
+        }
+        return this.asset?.id !== node.contextAssetId;
+    }
     /**
      * Gets the level of a node.
      * @param node The node to check.
@@ -1363,11 +1800,54 @@ class AssetPropertyListComponent {
         this.filterText = '';
         this.onFilter();
     }
-    collapseButtonTitle(node) {
-        const expanded = this.tree().isExpanded(node);
-        return expanded
-            ? gettext('Collapse {{ assetPropertyLabel }}')
-            : gettext('Expand {{ assetPropertyLabel }}');
+    /**
+     * Toggles expansion of all nodes - expands all if any are collapsed, otherwise collapses all.
+     */
+    toggleExpandCollapseAll() {
+        const parentNodes = this.dataSource.data.filter(node => node.expandable);
+        const expandedNodes = parentNodes.filter(node => this.tree().isExpanded(node));
+        if (expandedNodes.length === parentNodes.length) {
+            this.collapseAllNodes();
+        }
+        else {
+            this.expandAllNodes();
+        }
+        this.onNodeToggle();
+    }
+    onNodeToggle() {
+        if (!this.tree())
+            return;
+        const parentNodes = this.dataSource.data.filter(node => node.expandable);
+        if (parentNodes.length === 0) {
+            this.areAllNodesExpanded = false;
+        }
+        this.areAllNodesExpanded = parentNodes.every(node => this.tree().isExpanded(node));
+    }
+    /**
+     * Expands all nodes in the tree.
+     */
+    expandAllNodes() {
+        if (!this.tree())
+            return;
+        const parentNodes = this.dataSource.data.filter(node => node.expandable);
+        parentNodes.forEach(node => {
+            if (!this.tree().isExpanded(node)) {
+                this.tree().expand(node);
+            }
+        });
+    }
+    /**
+     * Collapses all nodes in the tree.
+     */
+    collapseAllNodes() {
+        if (!this.tree())
+            return;
+        const parentNodes = this.dataSource.data.filter(node => node.expandable);
+        parentNodes.forEach(node => {
+            if (this.tree().isExpanded(node)) {
+                this.tree().collapse(node);
+            }
+        });
     }
     /**
      * Updates the list of properties based on the configuration.
@@ -1375,13 +1855,13 @@ class AssetPropertyListComponent {
     async updateProperties() {
         if (this.config.inputPropertiesHandle === 'merge' || !this.config.inputPropertiesHandle) {
             this.properties = [
-                ...this.addedProperties,
+                ...this.displayAddedProperties,
                 ...this.extraProperties,
                 ...(await this.getProperties())
             ];
         }
         else if (this.config.inputPropertiesHandle === 'override') {
-            this.properties = [...this.addedProperties, ...this.extraProperties];
+            this.properties = [...this.displayAddedProperties, ...this.extraProperties];
         }
         this.buildTreeNodes();
         this.applySelectedPropertiesFromConfig();
@@ -1406,6 +1886,12 @@ class AssetPropertyListComponent {
             }
         });
     }
+    /**
+     * Updates the display added properties based on compatibility with current asset.
+     */
+    async updateDisplayAddedProperties() {
+        this.displayAddedProperties = await this.assetPropertiesService.filterCompatibleProperties(this.allAddedProperties, this.asset);
+    }
     /**
      * Updates the selection status of child nodes.
      * @param parent The parent node.
@@ -1461,13 +1947,24 @@ class AssetPropertyListComponent {
             const isComplex = this.assetPropertiesService.isComplexProperty(property);
             const hasKeyPath = !!property.keyPath;
             const level = hasKeyPath ? property.keyPath.length - 1 : 0;
-            const key = hasKeyPath ? property.keyPath.join('.') : property.name;
+            // For computed properties with instanceId, include it in the key to allow multiple instances
+            let key;
+            if (hasKeyPath) {
+                key = property.keyPath.join('.');
+            }
+            else if (property.computed && property.instanceId) {
+                key = `${property.name}:${property.instanceId}`;
+            }
+            else {
+                key = property.name;
+            }
             const node = {
                 expandable: isComplex,
                 level,
                 property,
                 isVisible: true,
-                indeterminate: false // add indeterminate property
+                indeterminate: false, // add indeterminate property
+                contextAssetId: property.contextAssetId
             };
             this.flatNodeMap.set(key, node);
             treeData.push(node);
@@ -1475,10 +1972,12 @@ class AssetPropertyListComponent {
         this.dataSource.data = treeData;
         this.filterTree();
         this.updateSelectAllState();
+        this.hasExpandableNodes = this.dataSource.data.some(node => node.expandable);
         if (this.config.expansionMode === 'nonCollapsible' ||
             this.config.expansionMode === 'expandedByDefault') {
             queueMicrotask(() => {
                 this.expandAllNodes();
+                this.onNodeToggle();
             });
         }
     }
@@ -1517,19 +2016,6 @@ class AssetPropertyListComponent {
             }
         });
     }
-    /**
-     * Expands all nodes in the tree.
-     */
-    expandAllNodes() {
-        if (!this.tree())
-            return;
-        const parentNodes = this.dataSource.data.filter(node => node.expandable);
-        parentNodes.forEach(node => {
-            if (!this.tree().isExpanded(node)) {
-                this.tree().expand(node);
-            }
-        });
-    }
     /**
      * Filters the tree nodes based on the filter input.
      */
@@ -1607,25 +2093,18 @@ class AssetPropertyListComponent {
      * @returns The flattened list of properties.
      */
     categorizeAndFlattenHierarchicalProperties(properties) {
-        const { simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
-        return [...simple, ...complex];
-    }
-    /**
-     * Fix syntax error in the file.
-     */
-    fixSyntaxError() {
-        if (true) {
-            // Correct syntax
-        }
+        const { computed, simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
+        return [...computed, ...simple, ...complex];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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  <div\n    class=\"select-all-container bg-inherit sticky-top separator-bottom\"\n    *ngIf=\"config.showHeader || config.filterable\"\n  >\n    <div\n      class=\"form-group m-b-0 p-16 d-flex\"\n      *ngIf=\"config.filterable\"\n      [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n    >\n      <div\n        class=\"input-group input-group-search\"\n        *ngIf=\"config.filterable\"\n      >\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        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length === 0\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length > 0\"\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      </div>\n    </div>\n    <div\n      class=\"d-flex a-i-center overflow-hidden\"\n      *ngIf=\"config.showHeader && dataSource.data.length\"\n    >\n      <div\n        class=\"flex-no-shrink\"\n        [ngClass]=\"{\n          'p-r-40': config.selectMode !== 'none' && config.expansionMode !== 'nonCollapsible',\n          'p-r-16': config.selectMode === 'none',\n          'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n        }\"\n      ></div>\n      <c8y-list-item-checkbox\n        class=\"p-l-4 p-r-4\"\n        *ngIf=\"config.selectMode === 'multi'\"\n        [ngModel]=\"allSelected\"\n        [indeterminate]=\"indeterminate\"\n        (onSelect)=\"selectAll($event)\"\n      ></c8y-list-item-checkbox>\n      <div\n        class=\"p-l-24 p-t-40\"\n        *ngIf=\"config.selectMode !== 'multi'\"\n      ></div>\n      <div class=\"content-flex-30 fit-w m-t-4 m-b-4\">\n        <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n          <span class=\"p-r-4 p-l-16 flex-no-shrink\">\n            <div class=\"c8y-icon\"></div>\n          </span>\n          <span class=\"text-medium m-l-8\">\n            {{ 'Property' | translate }}\n          </span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n          *ngIf=\"config.showKey\"\n        >\n          <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n          *ngIf=\"config.showValue\"\n        >\n          <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n        </div>\n      </div>\n      <div\n        class=\"m-l-8 p-l-24\"\n        [ngClass]=\"{ 'p-r-40': config.allowAddingCustomProperties }\"\n        *ngIf=\"assetPropertyAction\"\n      ></div>\n    </div>\n  </div>\n\n  <cdk-tree\n    role=\"presentation\"\n    *ngIf=\"dataSource.data.length; else emptyState\"\n    #tree\n    [dataSource]=\"dataSource\"\n    [levelAccessor]=\"getLevel\"\n  >\n    <!-- Tree Node Definition -->\n    <cdk-tree-node\n      [style.display]=\"shouldRender(node) ? 'flex' : 'none'\"\n      [attr.tabindex]=\"0\"\n      [attr.aria-level]=\"getLevel(node) + 1\"\n      [attr.aria-expanded]=\"hasChild(node) ? tree.isExpanded(node) : null\"\n      [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n      role=\"treeitem\"\n      *cdkTreeNodeDef=\"let node\"\n      cdkTreeNodePadding\n      [cdkTreeNodePaddingIndent]=\"24\"\n      class=\"c8y-list__item--dense\"\n      [ngClass]=\"{\n        nonCollapsible: config.expansionMode === 'nonCollapsible',\n        nonSelectable: config.selectMode === 'none'\n      }\"\n    >\n      <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n        <!-- Toggle Button for expandable nodes -->\n        <button\n          class=\"collapse-btn btn-dot flex-no-shrink\"\n          [attr.aria-label]=\"\n            collapseButtonTitle(node)\n              | translate\n                : {\n                    assetPropertyLabel:\n                      node.property.label || node.property.title || node.property.name\n                  }\n          \"\n          [attr.aria-expanded]=\"tree.isExpanded(node)\"\n          *ngIf=\"config.expansionMode !== 'nonCollapsible' && hasChild(node)\"\n          cdkTreeNodeToggle\n        >\n          <i [c8yIcon]=\"'chevron-right'\"></i>\n        </button>\n        <!-- Placeholder for non-expandable nodes to maintain alignment -->\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          *ngIf=\"!hasChild(node) || config.expansionMode === 'nonCollapsible'\"\n        ></div>\n\n        <!-- Selection Controls -->\n        <div\n          class=\"d-contents\"\n          *ngIf=\"config.selectMode !== 'none'\"\n        >\n          @if (config.selectMode === 'single') {\n            <c8y-list-item-radio\n              class=\"p-l-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\"\n              [ngModel]=\"node.property.active\"\n              [indeterminate]=\"node.indeterminate\"\n              (onSelect)=\"onSelectMulti($event, node)\"\n            ></c8y-list-item-checkbox>\n          }\n        </div>\n\n        <div class=\"content-flex-30 fit-w bg-inherit\">\n          <div\n            class=\"d-flex a-i-center bg-inherit m-0 flex-grow \"\n            style=\"max-width: calc( {{!config.showKey && !config.showValue ? '100' : '50'}}% - {{ (getLevel(node) + 1) * 24 }}px + {{getLevel(node) * 12}}px)\"\n          >\n            <c8y-li-icon\n              class=\"p-r-4\"\n              [icon]=\"node.property.type | c8yAssetPropertyIcon\"\n              tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n              container=\"body\"\n              [delay]=\"500\"\n              [ngClass]=\"{\n                'p-l-4': config.selectMode !== 'none',\n                'p-r-16': config.selectMode === 'none'\n              }\"\n            ></c8y-li-icon>\n\n            <span class=\"p-r-8 min-width-0\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{\n                  node.property.label || node.property.title || node.property.name | translate\n                }}\"\n                [ngClass]=\"{ 'text-muted': node.property.temporary }\"\n              >\n                {{ node.property.label || node.property.title || node.property.name | translate }}\n              </div>\n            </span>\n          </div>\n          <div\n            class=\"d-flex a-i-center\"\n            *ngIf=\"config.showKey\"\n            [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n            style=\"min-width: calc((8.33333333% * 3) + {{getLevel(node) * 6 }}px - (var(--c8y-margin) * 2))\"\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 | translate) }}\"\n            >\n              {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n            </span>\n          </div>\n          <div\n            class=\"d-flex a-i-center\"\n            [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n            *ngIf=\"asset && config.showValue\"\n          >\n            <span\n              class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n              title=\"{{ node.property | c8yAssetPropertyValue: asset }}\"\n            >\n              {{ node.property | c8yAssetPropertyValue: asset }}\n            </span>\n          </div>\n        </div>\n        <div\n          class=\"m-l-8 showOnHover d-flex a-i-center\"\n          *ngIf=\"assetPropertyAction || node.property.temporary\"\n          [ngClass]=\"{ 'p-l-32': !node.property.temporary }\"\n        >\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n             *ngIf=\"node.property.temporary\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            tooltip=\"{{ 'Remove' | translate }}\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"removeProperty(node.property)\"\n          >\n            <i c8yIcon=\"minus-circle\"></i>\n          </button>\n          <ng-container\n            *ngTemplateOutlet=\"\n              assetPropertyAction?.template;\n              context: {\n                $implicit: node.property\n              }\n            \"\n          ></ng-container>\n        </div>\n      </div>\n    </cdk-tree-node>\n  </cdk-tree>\n  <div \n    class=\"sticky-bottom bg-inherit separator-top p-t-16\"\n    *ngIf=\"config.allowAddingCustomProperties\"\n  >\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</div>\n\n<ng-template #emptyState>\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</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "pipe", type: C8yTranslatePipe, name: "translate" }, { 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: "directive", type: i4.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { 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: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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  <div\n    class=\"select-all-container bg-inherit sticky-top separator-bottom\"\n    *ngIf=\"config.showHeader || config.filterable\"\n  >\n    <div\n      class=\"form-group m-b-0 p-16 d-flex\"\n      *ngIf=\"config.filterable\"\n      [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n    >\n      <div\n        class=\"input-group input-group-search\"\n        *ngIf=\"config.filterable\"\n      >\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        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length === 0\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length > 0\"\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      </div>\n    </div>\n    <div\n      class=\"d-flex a-i-center overflow-hidden\"\n      *ngIf=\"config.showHeader && dataSource.data.length\"\n    >\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-16': config.selectMode === 'none',\n          'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n        }\"\n      >\n        <ng-container *ngIf=\"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        </ng-container>\n      </div>\n      <c8y-list-item-checkbox\n        class=\"p-l-4 p-r-4\"\n        *ngIf=\"config.selectMode === 'multi'\"\n        [ngModel]=\"allSelected\"\n        [indeterminate]=\"indeterminate\"\n        (onSelect)=\"selectAll($event)\"\n      ></c8y-list-item-checkbox>\n      <div\n        class=\"p-t-40\"\n        [ngClass]=\"{ 'p-l-24': config.selectMode === 'single' }\"\n      ></div>\n      <div class=\"content-flex-30 fit-w m-t-4 m-b-4\">\n        <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n          <span class=\"p-r-4 p-l-16 flex-no-shrink\">\n            <div class=\"c8y-icon\"></div>\n          </span>\n          <span class=\"text-medium m-l-8\">\n            {{ 'Property' | translate }}\n          </span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n          *ngIf=\"config.showKey\"\n        >\n          <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n          *ngIf=\"config.showValue\"\n        >\n          <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n        </div>\n      </div>\n      <div\n        class=\"m-l-8 p-l-24 asset-property-list__actions\"\n        [ngClass]=\"{ 'p-r-40': config.allowAddingCustomProperties }\"\n        *ngIf=\"assetPropertyAction\"\n      ></div>\n    </div>\n  </div>\n\n  <cdk-tree\n    role=\"presentation\"\n    *ngIf=\"dataSource.data.length; else emptyState\"\n    #tree\n    [dataSource]=\"dataSource\"\n    [levelAccessor]=\"getLevel\"\n  >\n    <!-- Tree Node Definition -->\n    <cdk-tree-node\n      class=\"c8y-list__item--dense\"\n      [style.display]=\"shouldRender(node) ? 'flex' : 'none'\"\n      [attr.tabindex]=\"0\"\n      [attr.aria-level]=\"getLevel(node) + 1\"\n      [attr.aria-expanded]=\"hasChild(node) ? tree.isExpanded(node) : null\"\n      [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n      role=\"treeitem\"\n      *cdkTreeNodeDef=\"let node\"\n      cdkTreeNodePadding\n      [cdkTreeNodePaddingIndent]=\"24\"\n      [ngClass]=\"{\n        nonCollapsible: config.expansionMode === 'nonCollapsible',\n        nonSelectable: config.selectMode === 'none'\n      }\"\n    >\n      <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n        <!-- Toggle Button for expandable nodes -->\n        <ng-container *ngIf=\"config.expansionMode !== 'nonCollapsible' && hasChild(node)\">\n          @let collapseButtonTitle =\n            tree.isExpanded(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]=\"tree.isExpanded(node)\"\n            type=\"button\"\n            cdkTreeNodeToggle\n            (click)=\"onNodeToggle()\"\n          >\n            <i [c8yIcon]=\"'chevron-right'\"></i>\n          </button>\n        </ng-container>\n        <!-- Placeholder for non-expandable nodes to maintain alignment -->\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          *ngIf=\"!hasChild(node) || config.expansionMode === 'nonCollapsible'\"\n        ></div>\n\n        <!-- Selection Controls -->\n        <div\n          class=\"d-contents\"\n          *ngIf=\"config.selectMode !== 'none'\"\n        >\n          @if (config.selectMode === 'single') {\n            <c8y-list-item-radio\n              class=\"p-l-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\"\n              [ngModel]=\"node.property.active\"\n              [indeterminate]=\"node.indeterminate\"\n              (onSelect)=\"onSelectMulti($event, node)\"\n            ></c8y-list-item-checkbox>\n          }\n        </div>\n\n        <div class=\"content-flex-30 fit-w bg-inherit min-width-0\">\n          <div\n            class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n            style=\"max-width: calc( {{ !config.showKey && !config.showValue ? '100' : '50' }}% - {{\n              (getLevel(node) + 1) * 24\n            }}px + {{ getLevel(node) * 12 }}px)\"\n          >\n            <c8y-li-icon\n              class=\"p-r-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-r-16': 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          <div\n            class=\"d-flex a-i-center\"\n            *ngIf=\"config.showKey\"\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 | translate) }}\"\n            >\n              {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n            </span>\n          </div>\n          <div\n            class=\"d-flex a-i-center\"\n            [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n            *ngIf=\"asset && config.showValue\"\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        </div>\n        <div\n          class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n          *ngIf=\"assetPropertyAction || node.property.temporary\"\n          [ngClass]=\"{\n            'p-l-32': !node.property.temporary,\n            'has-computed': node.property.computed && node.property.config\n          }\"\n        >\n          <button\n            class=\"btn btn-dot m-l-auto\"\n            title=\"{{ 'Configure' | translate }}\"\n            *ngIf=\"node.property.computed && node.property.config\"\n            (click)=\"editProperty(node.property)\"\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\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            *ngIf=\"node.property.temporary\"\n            [delay]=\"500\"\n            (click)=\"removeProperty(node.property)\"\n          >\n            <i c8yIcon=\"minus-circle\"></i>\n          </button>\n          <ng-container\n            *ngTemplateOutlet=\"\n              assetPropertyAction?.template;\n              context: {\n                $implicit: node.property\n              }\n            \"\n          ></ng-container>\n        </div>\n      </div>\n    </cdk-tree-node>\n  </cdk-tree>\n  <div\n    class=\"sticky-bottom bg-inherit separator-top p-16\"\n    *ngIf=\"config.allowAddingCustomProperties\"\n  >\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</div>\n\n<ng-template #emptyState>\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</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }, { 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: "directive", type: i4.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { 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: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { 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: "19.2.15", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-list', standalone: true, imports: [
                         NgIf,
                         NgClass,
+                        AsyncPipe,
                         FormsModule,
                         ListGroupModule,
                         C8yTranslatePipe,
@@ -1637,8 +2116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         EmptyStateComponent,
                         AssetPropertyIconPipe,
                         NgClass,
-                        AssetPropertyIconTooltipPipe
-                    ], template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  <div\n    class=\"select-all-container bg-inherit sticky-top separator-bottom\"\n    *ngIf=\"config.showHeader || config.filterable\"\n  >\n    <div\n      class=\"form-group m-b-0 p-16 d-flex\"\n      *ngIf=\"config.filterable\"\n      [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n    >\n      <div\n        class=\"input-group input-group-search\"\n        *ngIf=\"config.filterable\"\n      >\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        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length === 0\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length > 0\"\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      </div>\n    </div>\n    <div\n      class=\"d-flex a-i-center overflow-hidden\"\n      *ngIf=\"config.showHeader && dataSource.data.length\"\n    >\n      <div\n        class=\"flex-no-shrink\"\n        [ngClass]=\"{\n          'p-r-40': config.selectMode !== 'none' && config.expansionMode !== 'nonCollapsible',\n          'p-r-16': config.selectMode === 'none',\n          'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n        }\"\n      ></div>\n      <c8y-list-item-checkbox\n        class=\"p-l-4 p-r-4\"\n        *ngIf=\"config.selectMode === 'multi'\"\n        [ngModel]=\"allSelected\"\n        [indeterminate]=\"indeterminate\"\n        (onSelect)=\"selectAll($event)\"\n      ></c8y-list-item-checkbox>\n      <div\n        class=\"p-l-24 p-t-40\"\n        *ngIf=\"config.selectMode !== 'multi'\"\n      ></div>\n      <div class=\"content-flex-30 fit-w m-t-4 m-b-4\">\n        <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n          <span class=\"p-r-4 p-l-16 flex-no-shrink\">\n            <div class=\"c8y-icon\"></div>\n          </span>\n          <span class=\"text-medium m-l-8\">\n            {{ 'Property' | translate }}\n          </span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n          *ngIf=\"config.showKey\"\n        >\n          <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n          *ngIf=\"config.showValue\"\n        >\n          <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n        </div>\n      </div>\n      <div\n        class=\"m-l-8 p-l-24\"\n        [ngClass]=\"{ 'p-r-40': config.allowAddingCustomProperties }\"\n        *ngIf=\"assetPropertyAction\"\n      ></div>\n    </div>\n  </div>\n\n  <cdk-tree\n    role=\"presentation\"\n    *ngIf=\"dataSource.data.length; else emptyState\"\n    #tree\n    [dataSource]=\"dataSource\"\n    [levelAccessor]=\"getLevel\"\n  >\n    <!-- Tree Node Definition -->\n    <cdk-tree-node\n      [style.display]=\"shouldRender(node) ? 'flex' : 'none'\"\n      [attr.tabindex]=\"0\"\n      [attr.aria-level]=\"getLevel(node) + 1\"\n      [attr.aria-expanded]=\"hasChild(node) ? tree.isExpanded(node) : null\"\n      [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n      role=\"treeitem\"\n      *cdkTreeNodeDef=\"let node\"\n      cdkTreeNodePadding\n      [cdkTreeNodePaddingIndent]=\"24\"\n      class=\"c8y-list__item--dense\"\n      [ngClass]=\"{\n        nonCollapsible: config.expansionMode === 'nonCollapsible',\n        nonSelectable: config.selectMode === 'none'\n      }\"\n    >\n      <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n        <!-- Toggle Button for expandable nodes -->\n        <button\n          class=\"collapse-btn btn-dot flex-no-shrink\"\n          [attr.aria-label]=\"\n            collapseButtonTitle(node)\n              | translate\n                : {\n                    assetPropertyLabel:\n                      node.property.label || node.property.title || node.property.name\n                  }\n          \"\n          [attr.aria-expanded]=\"tree.isExpanded(node)\"\n          *ngIf=\"config.expansionMode !== 'nonCollapsible' && hasChild(node)\"\n          cdkTreeNodeToggle\n        >\n          <i [c8yIcon]=\"'chevron-right'\"></i>\n        </button>\n        <!-- Placeholder for non-expandable nodes to maintain alignment -->\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          *ngIf=\"!hasChild(node) || config.expansionMode === 'nonCollapsible'\"\n        ></div>\n\n        <!-- Selection Controls -->\n        <div\n          class=\"d-contents\"\n          *ngIf=\"config.selectMode !== 'none'\"\n        >\n          @if (config.selectMode === 'single') {\n            <c8y-list-item-radio\n              class=\"p-l-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\"\n              [ngModel]=\"node.property.active\"\n              [indeterminate]=\"node.indeterminate\"\n              (onSelect)=\"onSelectMulti($event, node)\"\n            ></c8y-list-item-checkbox>\n          }\n        </div>\n\n        <div class=\"content-flex-30 fit-w bg-inherit\">\n          <div\n            class=\"d-flex a-i-center bg-inherit m-0 flex-grow \"\n            style=\"max-width: calc( {{!config.showKey && !config.showValue ? '100' : '50'}}% - {{ (getLevel(node) + 1) * 24 }}px + {{getLevel(node) * 12}}px)\"\n          >\n            <c8y-li-icon\n              class=\"p-r-4\"\n              [icon]=\"node.property.type | c8yAssetPropertyIcon\"\n              tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n              container=\"body\"\n              [delay]=\"500\"\n              [ngClass]=\"{\n                'p-l-4': config.selectMode !== 'none',\n                'p-r-16': config.selectMode === 'none'\n              }\"\n            ></c8y-li-icon>\n\n            <span class=\"p-r-8 min-width-0\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{\n                  node.property.label || node.property.title || node.property.name | translate\n                }}\"\n                [ngClass]=\"{ 'text-muted': node.property.temporary }\"\n              >\n                {{ node.property.label || node.property.title || node.property.name | translate }}\n              </div>\n            </span>\n          </div>\n          <div\n            class=\"d-flex a-i-center\"\n            *ngIf=\"config.showKey\"\n            [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n            style=\"min-width: calc((8.33333333% * 3) + {{getLevel(node) * 6 }}px - (var(--c8y-margin) * 2))\"\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 | translate) }}\"\n            >\n              {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n            </span>\n          </div>\n          <div\n            class=\"d-flex a-i-center\"\n            [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n            *ngIf=\"asset && config.showValue\"\n          >\n            <span\n              class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n              title=\"{{ node.property | c8yAssetPropertyValue: asset }}\"\n            >\n              {{ node.property | c8yAssetPropertyValue: asset }}\n            </span>\n          </div>\n        </div>\n        <div\n          class=\"m-l-8 showOnHover d-flex a-i-center\"\n          *ngIf=\"assetPropertyAction || node.property.temporary\"\n          [ngClass]=\"{ 'p-l-32': !node.property.temporary }\"\n        >\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n             *ngIf=\"node.property.temporary\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            tooltip=\"{{ 'Remove' | translate }}\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"removeProperty(node.property)\"\n          >\n            <i c8yIcon=\"minus-circle\"></i>\n          </button>\n          <ng-container\n            *ngTemplateOutlet=\"\n              assetPropertyAction?.template;\n              context: {\n                $implicit: node.property\n              }\n            \"\n          ></ng-container>\n        </div>\n      </div>\n    </cdk-tree-node>\n  </cdk-tree>\n  <div \n    class=\"sticky-bottom bg-inherit separator-top p-t-16\"\n    *ngIf=\"config.allowAddingCustomProperties\"\n  >\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</div>\n\n<ng-template #emptyState>\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</ng-template>\n" }]
+                        AssetPropertyIconTooltipPipe,
+                        AssetPropertyCollapseButtonTitlePipe
+                    ], template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  <div\n    class=\"select-all-container bg-inherit sticky-top separator-bottom\"\n    *ngIf=\"config.showHeader || config.filterable\"\n  >\n    <div\n      class=\"form-group m-b-0 p-16 d-flex\"\n      *ngIf=\"config.filterable\"\n      [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n    >\n      <div\n        class=\"input-group input-group-search\"\n        *ngIf=\"config.filterable\"\n      >\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        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length === 0\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n          *ngIf=\"filter.value.length > 0\"\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      </div>\n    </div>\n    <div\n      class=\"d-flex a-i-center overflow-hidden\"\n      *ngIf=\"config.showHeader && dataSource.data.length\"\n    >\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-16': config.selectMode === 'none',\n          'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n        }\"\n      >\n        <ng-container *ngIf=\"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        </ng-container>\n      </div>\n      <c8y-list-item-checkbox\n        class=\"p-l-4 p-r-4\"\n        *ngIf=\"config.selectMode === 'multi'\"\n        [ngModel]=\"allSelected\"\n        [indeterminate]=\"indeterminate\"\n        (onSelect)=\"selectAll($event)\"\n      ></c8y-list-item-checkbox>\n      <div\n        class=\"p-t-40\"\n        [ngClass]=\"{ 'p-l-24': config.selectMode === 'single' }\"\n      ></div>\n      <div class=\"content-flex-30 fit-w m-t-4 m-b-4\">\n        <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n          <span class=\"p-r-4 p-l-16 flex-no-shrink\">\n            <div class=\"c8y-icon\"></div>\n          </span>\n          <span class=\"text-medium m-l-8\">\n            {{ 'Property' | translate }}\n          </span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n          *ngIf=\"config.showKey\"\n        >\n          <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n        </div>\n        <div\n          [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n          *ngIf=\"config.showValue\"\n        >\n          <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n        </div>\n      </div>\n      <div\n        class=\"m-l-8 p-l-24 asset-property-list__actions\"\n        [ngClass]=\"{ 'p-r-40': config.allowAddingCustomProperties }\"\n        *ngIf=\"assetPropertyAction\"\n      ></div>\n    </div>\n  </div>\n\n  <cdk-tree\n    role=\"presentation\"\n    *ngIf=\"dataSource.data.length; else emptyState\"\n    #tree\n    [dataSource]=\"dataSource\"\n    [levelAccessor]=\"getLevel\"\n  >\n    <!-- Tree Node Definition -->\n    <cdk-tree-node\n      class=\"c8y-list__item--dense\"\n      [style.display]=\"shouldRender(node) ? 'flex' : 'none'\"\n      [attr.tabindex]=\"0\"\n      [attr.aria-level]=\"getLevel(node) + 1\"\n      [attr.aria-expanded]=\"hasChild(node) ? tree.isExpanded(node) : null\"\n      [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n      role=\"treeitem\"\n      *cdkTreeNodeDef=\"let node\"\n      cdkTreeNodePadding\n      [cdkTreeNodePaddingIndent]=\"24\"\n      [ngClass]=\"{\n        nonCollapsible: config.expansionMode === 'nonCollapsible',\n        nonSelectable: config.selectMode === 'none'\n      }\"\n    >\n      <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n        <!-- Toggle Button for expandable nodes -->\n        <ng-container *ngIf=\"config.expansionMode !== 'nonCollapsible' && hasChild(node)\">\n          @let collapseButtonTitle =\n            tree.isExpanded(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]=\"tree.isExpanded(node)\"\n            type=\"button\"\n            cdkTreeNodeToggle\n            (click)=\"onNodeToggle()\"\n          >\n            <i [c8yIcon]=\"'chevron-right'\"></i>\n          </button>\n        </ng-container>\n        <!-- Placeholder for non-expandable nodes to maintain alignment -->\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          *ngIf=\"!hasChild(node) || config.expansionMode === 'nonCollapsible'\"\n        ></div>\n\n        <!-- Selection Controls -->\n        <div\n          class=\"d-contents\"\n          *ngIf=\"config.selectMode !== 'none'\"\n        >\n          @if (config.selectMode === 'single') {\n            <c8y-list-item-radio\n              class=\"p-l-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\"\n              [ngModel]=\"node.property.active\"\n              [indeterminate]=\"node.indeterminate\"\n              (onSelect)=\"onSelectMulti($event, node)\"\n            ></c8y-list-item-checkbox>\n          }\n        </div>\n\n        <div class=\"content-flex-30 fit-w bg-inherit min-width-0\">\n          <div\n            class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n            style=\"max-width: calc( {{ !config.showKey && !config.showValue ? '100' : '50' }}% - {{\n              (getLevel(node) + 1) * 24\n            }}px + {{ getLevel(node) * 12 }}px)\"\n          >\n            <c8y-li-icon\n              class=\"p-r-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-r-16': 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          <div\n            class=\"d-flex a-i-center\"\n            *ngIf=\"config.showKey\"\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 | translate) }}\"\n            >\n              {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n            </span>\n          </div>\n          <div\n            class=\"d-flex a-i-center\"\n            [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n            *ngIf=\"asset && config.showValue\"\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        </div>\n        <div\n          class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n          *ngIf=\"assetPropertyAction || node.property.temporary\"\n          [ngClass]=\"{\n            'p-l-32': !node.property.temporary,\n            'has-computed': node.property.computed && node.property.config\n          }\"\n        >\n          <button\n            class=\"btn btn-dot m-l-auto\"\n            title=\"{{ 'Configure' | translate }}\"\n            *ngIf=\"node.property.computed && node.property.config\"\n            (click)=\"editProperty(node.property)\"\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\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            *ngIf=\"node.property.temporary\"\n            [delay]=\"500\"\n            (click)=\"removeProperty(node.property)\"\n          >\n            <i c8yIcon=\"minus-circle\"></i>\n          </button>\n          <ng-container\n            *ngTemplateOutlet=\"\n              assetPropertyAction?.template;\n              context: {\n                $implicit: node.property\n              }\n            \"\n          ></ng-container>\n        </div>\n      </div>\n    </cdk-tree-node>\n  </cdk-tree>\n  <div\n    class=\"sticky-bottom bg-inherit separator-top p-16\"\n    *ngIf=\"config.allowAddingCustomProperties\"\n  >\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</div>\n\n<ng-template #emptyState>\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</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], asset: [{
@@ -1673,10 +2153,6 @@ class CustomPropertiesDrawerComponent {
             allowAddingCustomProperties: false,
             inputPropertiesHandle: 'override'
         };
-        /**
-         * Extra properties to be displayed in the list.
-         */
-        this.extraProperties = [];
         /**
          * Emits the selected properties when saved.
          */
@@ -1701,19 +2177,28 @@ class CustomPropertiesDrawerComponent {
             this._cancel = reject;
         });
         this.tabNames = {
-            regular: gettext('Regular`properties`'),
-            computed: gettext('Computed`properties`')
+            regular: gettext('Properties'),
+            computed: gettext('Computed properties')
         };
         this.inputText = '';
         this.selectedTab = 'regular';
+        this.regularProperties = [];
+        this.computedProperties = [];
+        this.displayedProperties = [];
+        this.regularCount = 0;
+        this.computedCount = 0;
+        this.allComputedProperties = [];
         this.searchSubject$ = new BehaviorSubject('');
         /**
          * Subject for handling component destruction.
          */
         this.destroy$ = new Subject();
         this.assetPropertiesService = inject(AssetPropertiesService);
+        this.computedPropertiesService = inject(ComputedPropertiesService);
     }
     async ngOnInit() {
+        const computedPropsResult = await this.computedPropertiesService.getByContext(this.asset);
+        this.allComputedProperties = computedPropsResult.map(({ prop }) => prop);
         await this.updateProperties();
         this.searchSubject$
             .pipe(takeUntil(this.destroy$), debounceTime(350))
@@ -1732,6 +2217,7 @@ class CustomPropertiesDrawerComponent {
     }
     onTabChange(tabName) {
         this.selectedTab = tabName;
+        this.updateDisplayedProperties();
     }
     onSearch() {
         this.searchSubject$.next(this.inputText);
@@ -1755,6 +2241,9 @@ class CustomPropertiesDrawerComponent {
         this.bottomDrawerRef.close();
     }
     async loadMore() {
+        if (this.selectedTab !== 'regular' || !this.paging) {
+            return;
+        }
         const res = await this.paging.next();
         this.paging = res.paging;
         const propertiesFromLibrary = [];
@@ -1767,7 +2256,12 @@ class CustomPropertiesDrawerComponent {
                 type: prop.c8y_JsonSchema.type
             });
         });
-        this.extraProperties = [...this.extraProperties, ...propertiesFromLibrary];
+        const categorizedNewProps = this.categorizeAndFlattenHierarchicalProperties(propertiesFromLibrary);
+        const newRegularProps = categorizedNewProps.filter(prop => !prop.computed);
+        this.regularProperties = [...this.regularProperties, ...newRegularProps];
+        if (this.selectedTab === 'regular') {
+            this.displayedProperties = this.regularProperties;
+        }
     }
     /**
      * Checks if the select button should be disabled.
@@ -1779,10 +2273,22 @@ class CustomPropertiesDrawerComponent {
     async updateProperties() {
         const { propertiesFromLibrary, paging } = await this.assetPropertiesService.getPropertiesFromPropertiesLibrary(this.inputText);
         this.paging = paging;
-        this.extraProperties = this.categorizeAndFlattenHierarchicalProperties([
+        const filteredComputedProperties = this.allComputedProperties.filter(prop => prop.label.toLowerCase().includes(this.inputText?.trim().toLowerCase() || ''));
+        const filteredDefaultProperties = defaultAssetProperties.filter(prop => prop.label.toLowerCase().includes(this.inputText?.trim().toLowerCase() || ''));
+        const allProperties = this.categorizeAndFlattenHierarchicalProperties([
+            ...filteredComputedProperties,
             ...propertiesFromLibrary,
-            ...defaultAssetProperties.filter(prop => prop.label.includes(this.inputText?.trim().toLowerCase()))
+            ...filteredDefaultProperties
         ]);
+        this.regularProperties = allProperties.filter(prop => !prop.computed);
+        this.computedProperties = allProperties.filter(prop => prop.computed);
+        this.regularCount = (paging.totalElements || 0) + filteredDefaultProperties.length;
+        this.computedCount = filteredComputedProperties.length;
+        this.updateDisplayedProperties();
+    }
+    updateDisplayedProperties() {
+        this.displayedProperties =
+            this.selectedTab === 'regular' ? this.regularProperties : this.computedProperties;
     }
     /**
      * Categorizes and flattens hierarchical properties.
@@ -1790,11 +2296,11 @@ class CustomPropertiesDrawerComponent {
      * @returns The flattened list of properties.
      */
     categorizeAndFlattenHierarchicalProperties(properties) {
-        const { simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
-        return [...simple, ...complex];
+        const { computed, simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
+        return [...computed, ...simple, ...complex];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", inputs: { title: "title" }, 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<div class=\"form-group m-b-8 p-16 d-flex\">\n  <div\n    class=\"input-group input-group-search\"\n  >\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    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length === 0\"\n    >\n      <i\n        class=\"dlt-c8y-icon-search\"\n        [c8yIcon]=\"'search'\"\n      ></i>\n    </span>\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length > 0\"\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  </div>\n</div>\n\n<!-- TODO: uncomment when computed properties are supported https://cumulocity.atlassian.net/browse/MTM-63490 -->\n<!-- <c8y-tabs-outlet\n  class=\"elevation-none m-b-16\"\n  outletName=\"assetPropertiesDrawerTabs\"\n  orientation=\"horizontal\"\n></c8y-tabs-outlet>\n\n<c8y-tab\n  [icon]=\"'c8y-css'\"\n  [title]=\"'Regular asset properties' | translate\"\n  [isActive]=\"selectedTab === 'regular'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [label]=\"tabNames.regular | translate\"\n  [priority]=\"1000\"\n  (onSelect)=\"onTabChange('regular')\"\n></c8y-tab>\n<c8y-tab\n  [icon]=\"'bolt'\"\n  [title]=\"'Computed asset properties' | translate\"\n  [isActive]=\"selectedTab === 'computed'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [label]=\"tabNames.computed | translate\"\n  [priority]=\"900\"\n  (onSelect)=\"onTabChange('computed')\"\n></c8y-tab> -->\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  <c8y-load-more\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\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: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", inputs: { title: "title" }, 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<div class=\"form-group m-b-8 p-16 d-flex\">\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    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length === 0\"\n    >\n      <i\n        class=\"dlt-c8y-icon-search\"\n        [c8yIcon]=\"'search'\"\n      ></i>\n    </span>\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length > 0\"\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  </div>\n</div>\n\n<c8y-tabs-outlet\n  class=\"elevation-none m-b-16\"\n  outletName=\"assetPropertiesDrawerTabs\"\n  orientation=\"horizontal\"\n></c8y-tabs-outlet>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'regular'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"1000\"\n  (onSelect)=\"onTabChange('regular')\"\n>\n  <i [c8yIcon]=\"'c8y-css'\"></i>\n  <span>\n    {{ tabNames.regular | translate }}\n    <span aria-live=\"assertive\" class=\"m-l-4 badge badge-default flex-no-shrink\">\n      {{ regularCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'computed'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"900\"\n  (onSelect)=\"onTabChange('computed')\"\n>\n  <i [c8yIcon]=\"'bolt'\"></i>\n  <span>\n    {{ tabNames.computed | translate }}\n    <span class=\"m-l-4 badge badge-default flex-no-shrink\" aria-live=\"assertive\">\n      {{ computedCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"displayedProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  <c8y-load-more\n    *ngIf=\"selectedTab === 'regular'\"\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\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: "pipe", type: C8yTranslatePipe, name: "translate" }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "showAlways"], outputs: ["onSelect"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
             type: Component,
@@ -1806,8 +2312,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         AssetPropertyListComponent,
                         LoadMoreComponent,
                         IconDirective,
-                        NgIf
-                    ], template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"form-group m-b-8 p-16 d-flex\">\n  <div\n    class=\"input-group input-group-search\"\n  >\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    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length === 0\"\n    >\n      <i\n        class=\"dlt-c8y-icon-search\"\n        [c8yIcon]=\"'search'\"\n      ></i>\n    </span>\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length > 0\"\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  </div>\n</div>\n\n<!-- TODO: uncomment when computed properties are supported https://cumulocity.atlassian.net/browse/MTM-63490 -->\n<!-- <c8y-tabs-outlet\n  class=\"elevation-none m-b-16\"\n  outletName=\"assetPropertiesDrawerTabs\"\n  orientation=\"horizontal\"\n></c8y-tabs-outlet>\n\n<c8y-tab\n  [icon]=\"'c8y-css'\"\n  [title]=\"'Regular asset properties' | translate\"\n  [isActive]=\"selectedTab === 'regular'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [label]=\"tabNames.regular | translate\"\n  [priority]=\"1000\"\n  (onSelect)=\"onTabChange('regular')\"\n></c8y-tab>\n<c8y-tab\n  [icon]=\"'bolt'\"\n  [title]=\"'Computed asset properties' | translate\"\n  [isActive]=\"selectedTab === 'computed'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [label]=\"tabNames.computed | translate\"\n  [priority]=\"900\"\n  (onSelect)=\"onTabChange('computed')\"\n></c8y-tab> -->\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  <c8y-load-more\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\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" }]
+                        NgIf,
+                        TabComponent,
+                        TabsOutletComponent
+                    ], template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"form-group m-b-8 p-16 d-flex\">\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    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length === 0\"\n    >\n      <i\n        class=\"dlt-c8y-icon-search\"\n        [c8yIcon]=\"'search'\"\n      ></i>\n    </span>\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length > 0\"\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  </div>\n</div>\n\n<c8y-tabs-outlet\n  class=\"elevation-none m-b-16\"\n  outletName=\"assetPropertiesDrawerTabs\"\n  orientation=\"horizontal\"\n></c8y-tabs-outlet>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'regular'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"1000\"\n  (onSelect)=\"onTabChange('regular')\"\n>\n  <i [c8yIcon]=\"'c8y-css'\"></i>\n  <span>\n    {{ tabNames.regular | translate }}\n    <span aria-live=\"assertive\" class=\"m-l-4 badge badge-default flex-no-shrink\">\n      {{ regularCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'computed'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"900\"\n  (onSelect)=\"onTabChange('computed')\"\n>\n  <i [c8yIcon]=\"'bolt'\"></i>\n  <span>\n    {{ tabNames.computed | translate }}\n    <span class=\"m-l-4 badge badge-default flex-no-shrink\" aria-live=\"assertive\">\n      {{ computedCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"displayedProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  <c8y-load-more\n    *ngIf=\"selectedTab === 'regular'\"\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\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" }]
         }], propDecorators: { title: [{
                 type: Input
             }], savePropertySelection: [{
@@ -1823,9 +2331,12 @@ class CustomPropertiesDrawerService {
     constructor() {
         this.bottomDrawerService = inject(BottomDrawerService);
     }
-    async getCustomProperties() {
+    async getCustomProperties(asset) {
         const drawer = this.bottomDrawerService.openDrawer(CustomPropertiesDrawerComponent, {
-            disableClickOutside: true
+            disableClickOutside: true,
+            initialState: {
+                asset
+            }
         });
         try {
             const resultOf = await drawer.instance.result;
@@ -1930,5 +2441,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AssetPropertiesService, AssetPropertyActionDirective, AssetPropertyListComponent, AssetPropertySelectorDrawerComponent, CustomPropertiesDrawerService, RESULT_TYPES, defaultAssetProperties, defaultAssetPropertyListConfig, deviceAssetProperties };
+export { AssetPropertiesService, AssetPropertyActionDirective, AssetPropertyListComponent, AssetPropertySelectorDrawerComponent, ComputedPropertiesService, CustomPropertiesDrawerService, HOOK_COMPUTED_PROPERTY, RESULT_TYPES, defaultAssetProperties, defaultAssetPropertyListConfig, deviceAssetProperties, hookComputedProperty };
 //# sourceMappingURL=c8y-ngx-components-asset-properties.mjs.map