@c8y/ngx-components 1022.28.2 → 1022.33.0

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

@@ -1,5 +1,5 @@
 import * as i2 from '@c8y/ngx-components';
-import { gettext, AssetTypesRealtimeService, GroupService, ListGroupModule, C8yTranslatePipe, IconDirective, EmptyStateComponent, BottomDrawerRef, FormsModule as FormsModule$1 } 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 * as i0 from '@angular/core';
 import { inject, Injectable, Directive, Pipe, viewChild, EventEmitter, effect, ContentChild, Output, Input, Component } from '@angular/core';
 import { InventoryService } from '@c8y/client';
@@ -13,15 +13,18 @@ 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';
 
 const defaultAssetPropertyListConfig = {
-    searchable: true,
+    filterable: true,
     selectMode: 'none',
     expansionMode: 'expandedByDefault',
     showHeader: true,
     showValue: true,
     showKey: true,
     emptyStateContent: 'empty',
+    allowAddingCustomProperties: false,
     inputPropertiesHandle: 'merge'
 };
 const defaultAssetProperties = [
@@ -686,13 +689,14 @@ class AssetPropertiesService {
         this.inventoryService = inject(InventoryService);
         this.assetTypesRealtimeService = inject(AssetTypesRealtimeService);
         this.groupService = inject(GroupService);
+        this.alert = inject(AlertService);
     }
     /**
-     * Retrieves custom properties for an asset from asset library.
+     * Retrieves properties for an asset from asset library.
      * @param asset The asset for which to retrieve custom properties.
      * @returns A promise resolving to the list of custom properties.
      */
-    async getCustomProperties(asset) {
+    async requestAssetProperties(asset) {
         if (asset && asset.type) {
             const assetType = await firstValueFrom(this.assetTypesRealtimeService.getAssetTypeByName$(asset.type));
             if (assetType) {
@@ -747,7 +751,7 @@ class AssetPropertiesService {
      * @returns A promise resolving to the list of asset properties.
      */
     async getAssetProperties(asset) {
-        const customProperties = this.categorizeCustomProperties(await this.getCustomProperties(asset)) || [];
+        const customProperties = this.categorizeCustomProperties(await this.requestAssetProperties(asset)) || [];
         return customProperties;
     }
     /**
@@ -801,6 +805,66 @@ class AssetPropertiesService {
         return (property.c8y_JsonSchema?.properties[property.name]?.type === 'object' ||
             property.properties !== undefined);
     }
+    /**
+     * Checks if two properties match for selection purposes.
+     * @param property1 First property to compare.
+     * @param property2 Second property to compare.
+     * @returns True if properties match.
+     */
+    propertiesMatch(property1, property2) {
+        if (property1.name === property2.name) {
+            const keyPath1 = property1.keyPath;
+            const keyPath2 = property2.keyPath;
+            if (keyPath1 && keyPath2) {
+                return keyPath1.join('.') === keyPath2.join('.');
+            }
+            else if (!keyPath1 && !keyPath2) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Retrieves custom properties from the properties library, optionally filtered by search text.
+     * @param searchText Optional search text to filter properties.
+     * @returns A promise resolving to the list of properties and paging information.
+     */
+    async getPropertiesFromPropertiesLibrary(searchText) {
+        const propertiesFromLibrary = [];
+        const { data: propertiesMOs, paging } = await this.requestPropertiesFromPropertiesLibrary(searchText);
+        propertiesMOs.forEach(prop => {
+            const name = Object.keys(prop.c8y_JsonSchema.properties)[0];
+            propertiesFromLibrary.push({
+                c8y_JsonSchema: prop.c8y_JsonSchema,
+                label: prop.name,
+                name,
+                type: prop.c8y_JsonSchema.properties[name].type
+            });
+        });
+        return { propertiesFromLibrary, paging };
+    }
+    async requestPropertiesFromPropertiesLibrary(searchText) {
+        let queryFilter = '(type eq c8y_JsonSchema) and (appliesTo.MANAGED_OBJECTS eq true)';
+        if (searchText?.trim()) {
+            const escapedSearchText = searchText.replace(/'/g, "''");
+            queryFilter += ` and (name eq '*${escapedSearchText}*')`;
+        }
+        const query = `$filter=(${queryFilter})`;
+        const filter = {
+            pageSize: 20,
+            revert: true,
+            query,
+            withTotalPages: true
+        };
+        try {
+            const results = await this.inventoryService.list(filter);
+            return results;
+        }
+        catch (error) {
+            this.alert.addServerFailure(error);
+            return null;
+        }
+    }
     addNestedProperties(parentProperty, complexProperties, sortChildren = false) {
         const schema = parentProperty.c8y_JsonSchema?.properties[parentProperty.name];
         if (!schema?.properties) {
@@ -880,10 +944,10 @@ class AssetPropertiesService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -915,10 +979,10 @@ class AssetPropertyActionDirective {
         this.elementRef = elementRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyActionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyActionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yAssetPropertyAction]',
@@ -953,10 +1017,10 @@ class AssetPropertyValuePipe {
         }
         return value ?? '-';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyValue',
@@ -972,7 +1036,7 @@ class AssetPropertyIconPipe {
     transform(type) {
         switch (type) {
             case 'string':
-                return 'paragraph';
+                return 'string';
             case 'number':
                 return 'hashtag';
             case 'boolean':
@@ -981,19 +1045,21 @@ class AssetPropertyIconPipe {
                 return 'calendar';
             case 'object':
             case 'c8y_JsonSchema':
-                return 'open-parcel';
+                return 'c8y-css';
             case 'enum':
                 return 'content';
             case 'file':
                 return 'file';
+            case 'integer':
+                return 'unit';
             default:
-                return 'window-minimize';
+                return 'mix-words';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyIcon',
@@ -1001,6 +1067,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * A pipe that transforms an asset property type into a tooltip string.
+ * If the property is temporary, it appends "(temporary)" to the type and handles translation.
+ * Otherwise, it returns the type as is.
+ */
+class AssetPropertyIconTooltipPipe {
+    constructor() {
+        this.translateService = inject(TranslateService);
+    }
+    transform(property) {
+        if (!property) {
+            return '';
+        }
+        else if (property.temporary) {
+            return this.translateService.instant(gettext$1('{{assetPropertyType}}\n(temporary)'), {
+                assetPropertyType: property.type
+            });
+        }
+        else {
+            return property.type;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyIconTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyIconTooltipPipe, isStandalone: true, name: "c8yAssetPropertyIconTooltip" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertyIconTooltipPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'c8yAssetPropertyIconTooltip',
+                    standalone: true
+                }]
+        }] });
+
 /**
  * Represents a list of asset properties with hierarchical tree structure.
  */
@@ -1018,9 +1117,9 @@ class AssetPropertyListComponent {
          */
         this.config = {};
         /**
-         * Custom properties to be displayed in the list.
+         * Extra properties to be displayed in the list.
          */
-        this.customProperties = [];
+        this.extraProperties = [];
         /**
          * Emits the selected properties.
          */
@@ -1030,9 +1129,9 @@ class AssetPropertyListComponent {
          */
         this.properties = [];
         /**
-         * Text input for searching properties.
+         * Text input for filtering properties.
          */
-        this.inputText = '';
+        this.filterText = '';
         /**
          * Data source for the tree structure.
          */
@@ -1050,9 +1149,13 @@ class AssetPropertyListComponent {
          */
         this.indeterminate = false;
         /**
-         * Subject for handling search input.
+         * List of properties that have been added temporarily as custom properties.
          */
-        this.searchSubject$ = new BehaviorSubject('');
+        this.addedProperties = [];
+        /**
+         * Subject for handling filter input.
+         */
+        this.filterSubject$ = new BehaviorSubject('');
         /**
          * Subject for handling component destruction.
          */
@@ -1061,6 +1164,7 @@ class AssetPropertyListComponent {
          * Service for managing asset properties.
          */
         this.assetPropertiesService = inject(AssetPropertiesService);
+        this.customPropertiesDrawerService = inject(CustomPropertiesDrawerService);
         effect(() => {
             if ((this.config.expansionMode === 'nonCollapsible' ||
                 this.config.expansionMode === 'expandedByDefault') &&
@@ -1076,7 +1180,7 @@ class AssetPropertyListComponent {
             ...defaultAssetPropertyListConfig,
             ...this.config
         };
-        this.searchSubject$
+        this.filterSubject$
             .pipe(takeUntil(this.destroy$), debounceTime(200))
             .subscribe(() => this.filterTree());
     }
@@ -1111,10 +1215,45 @@ class AssetPropertyListComponent {
         return [];
     }
     /**
-     * Checks if a node has children.
-     * @param node The node to check.
-     * @returns True if the node has children.
+     * Opens the drawer to add new custom properties.
+     */
+    async addProperty() {
+        const propertiesToAdd = await this.customPropertiesDrawerService.getCustomProperties();
+        if (!propertiesToAdd || propertiesToAdd.length === 0) {
+            return;
+        }
+        propertiesToAdd.forEach(prop => (prop.temporary = true));
+        this.addedProperties = this.addedProperties.concat(propertiesToAdd);
+        await this.updateProperties();
+        this.selectedProperties.next(this.dataSource.data.filter(n => n.property.active).map(n => n.property));
+    }
+    /**
+     * Removes temporary property from the list.
+     * @param property The property to remove.
      */
+    async removeProperty(property) {
+        let filterFn;
+        if (this.assetPropertiesService.isComplexProperty(property)) {
+            filterFn = (p) => {
+                if (p === property) {
+                    // remove complex property itself
+                    return false;
+                }
+                if ('keyPath' in p && Array.isArray(p.keyPath)) {
+                    // remove children of complex property
+                    const keyPath = p.keyPath;
+                    return keyPath[0] !== property.name;
+                }
+                return true;
+            };
+        }
+        else {
+            // Remove only the property itself
+            filterFn = (p) => p !== property;
+        }
+        this.addedProperties = this.addedProperties.filter(filterFn);
+        await this.updateProperties();
+    }
     hasChild(node) {
         return node.expandable;
     }
@@ -1188,7 +1327,9 @@ class AssetPropertyListComponent {
         if (selected && node.expandable && this.tree() && !this.tree().isExpanded(node)) {
             this.tree().expand(node);
         }
-        this.selectedProperties.next([node.property]);
+        if (selected) {
+            this.selectedProperties.next([node.property]);
+        }
     }
     /**
      * Handles multi-selection mode.
@@ -1210,17 +1351,17 @@ class AssetPropertyListComponent {
         this.selectedProperties.next(selectedProperties);
     }
     /**
-     * Initiates a search operation.
+     * Initiates a filter operation.
      */
-    onSearch() {
-        this.searchSubject$.next(this.inputText);
+    onFilter() {
+        this.filterSubject$.next(this.filterText);
     }
     /**
-     * Clears the search input.
+     * Clears the filter input.
      */
-    clearSearch() {
-        this.inputText = '';
-        this.onSearch();
+    clearFilter() {
+        this.filterText = '';
+        this.onFilter();
     }
     collapseButtonTitle(node) {
         const expanded = this.tree().isExpanded(node);
@@ -1233,12 +1374,37 @@ class AssetPropertyListComponent {
      */
     async updateProperties() {
         if (this.config.inputPropertiesHandle === 'merge' || !this.config.inputPropertiesHandle) {
-            this.properties = [...this.customProperties, ...(await this.getProperties())];
+            this.properties = [
+                ...this.addedProperties,
+                ...this.extraProperties,
+                ...(await this.getProperties())
+            ];
         }
         else if (this.config.inputPropertiesHandle === 'override') {
-            this.properties = [...this.customProperties];
+            this.properties = [...this.addedProperties, ...this.extraProperties];
         }
         this.buildTreeNodes();
+        this.applySelectedPropertiesFromConfig();
+    }
+    applySelectedPropertiesFromConfig() {
+        if (!this.config.selectedProperties || this.config.selectedProperties.length === 0) {
+            return;
+        }
+        this.config.selectedProperties.forEach((configProperty, index) => {
+            const matchingNode = this.dataSource.data.find(node => this.assetPropertiesService.propertiesMatch(node.property, configProperty));
+            if (matchingNode) {
+                if (this.config.selectMode === 'single') {
+                    // For single mode, only select the first property and break
+                    if (index === 0) {
+                        this.onSelectSingle(true, matchingNode);
+                    }
+                    return;
+                }
+                else if (this.config.selectMode === 'multi') {
+                    this.onSelectMulti(true, matchingNode);
+                }
+            }
+        });
     }
     /**
      * Updates the selection status of child nodes.
@@ -1257,19 +1423,19 @@ class AssetPropertyListComponent {
         });
     }
     /**
-     * Checks if a property matches the search criteria.
+     * Checks if a property matches the filter criteria.
      * @param property The property to check.
-     * @param search The search text.
+     * @param filterText The filter text.
      * @returns True if the property matches.
      */
-    matchesSearch(property, search) {
-        const searchableFields = [
+    matchesSearch(property, filterText) {
+        const filterByFields = [
             property.label,
             property.name,
             property.keyPath?.join('.'),
             property.title
         ].filter(Boolean);
-        return searchableFields.some(field => field?.toLowerCase().includes(search));
+        return filterByFields.some(field => field?.toLowerCase().includes(filterText));
     }
     /**
      * Updates the selection state for all nodes.
@@ -1365,20 +1531,20 @@ class AssetPropertyListComponent {
         });
     }
     /**
-     * Filters the tree nodes based on the search input.
+     * Filters the tree nodes based on the filter input.
      */
     filterTree() {
-        const searchText = this.inputText?.toLowerCase() || '';
+        const filterText = this.filterText?.toLowerCase() || '';
         const allNodes = [...this.dataSource.data];
-        if (!searchText) {
+        if (!filterText) {
             allNodes.forEach(node => (node.isVisible = true));
             this.dataSource.data = Array.from(this.flatNodeMap.values());
             this.updateSelectAllState();
             return;
         }
-        // First pass: Mark nodes that match the search criteria
+        // First pass: Mark nodes that match the filter criteria
         allNodes.forEach(node => {
-            node.isVisible = this.matchesSearch(node.property, searchText);
+            node.isVisible = this.matchesSearch(node.property, filterText);
         });
         // Second pass: Make parent nodes of visible nodes also visible
         allNodes.forEach(node => {
@@ -1399,14 +1565,14 @@ class AssetPropertyListComponent {
     }
     /**
      * Expand parent nodes when filtering
-     * This method expands all nodes with children when a search is active
+     * This method expands all nodes with children when a filter is active
      */
     expandNodesForSearch() {
-        if (!this.inputText || !this.tree()) {
+        if (!this.filterText || !this.tree()) {
             return;
         }
         const parentNodes = this.dataSource.data.filter(node => node.expandable);
-        // Expand all parent nodes when searching
+        // Expand all parent nodes when filtering
         parentNodes.forEach(node => {
             if (!this.tree().isExpanded(node)) {
                 this.tree().expand(node);
@@ -1452,10 +1618,10 @@ class AssetPropertyListComponent {
             // Correct syntax
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AssetPropertyListComponent, isStandalone: true, selector: "c8y-asset-property-list", inputs: { config: "config", asset: "asset", customProperties: "customProperties" }, 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.searchable\"\n  >\n    <div\n      class=\"form-group m-b-0 p-16\"\n      *ngIf=\"config.searchable\"\n      [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n    >\n      <div class=\"input-group input-group-search\">\n        <input\n          class=\"form-control\"\n          [attr.aria-label]=\"'Filter properties' | translate\"\n          placeholder=\"{{ 'Filter properties' | translate }}\"\n          role=\"searchbox\"\n          type=\"search\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"inputText\"\n          (input)=\"onSearch()\"\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 search' | translate\"\n            tabindex=\"0\"\n            role=\"button\"\n            (click)=\"clearSearch()\"\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        *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      [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              [ngModel]=\"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\"\n            [ngClass]=\"{\n              'col-6': config.showKey || config.showValue,\n              'col-12': !config.showKey && !config.showValue\n            }\"\n          >\n            <c8y-li-icon\n              class=\"p-r-4\"\n              [icon]=\"node.property.type | c8yAssetPropertyIcon\"\n              tooltip=\"{{ node.property.type }}\"\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\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{\n                  node.property.label || node.property.title || node.property.name | translate\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            <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\"\n        >\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\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" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
+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,
@@ -1469,13 +1635,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         NgTemplateOutlet,
                         AssetPropertyValuePipe,
                         EmptyStateComponent,
-                        AssetPropertyIconPipe
-                    ], 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.searchable\"\n  >\n    <div\n      class=\"form-group m-b-0 p-16\"\n      *ngIf=\"config.searchable\"\n      [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n    >\n      <div class=\"input-group input-group-search\">\n        <input\n          class=\"form-control\"\n          [attr.aria-label]=\"'Filter properties' | translate\"\n          placeholder=\"{{ 'Filter properties' | translate }}\"\n          role=\"searchbox\"\n          type=\"search\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"inputText\"\n          (input)=\"onSearch()\"\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 search' | translate\"\n            tabindex=\"0\"\n            role=\"button\"\n            (click)=\"clearSearch()\"\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        *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      [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              [ngModel]=\"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\"\n            [ngClass]=\"{\n              'col-6': config.showKey || config.showValue,\n              'col-12': !config.showKey && !config.showValue\n            }\"\n          >\n            <c8y-li-icon\n              class=\"p-r-4\"\n              [icon]=\"node.property.type | c8yAssetPropertyIcon\"\n              tooltip=\"{{ node.property.type }}\"\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\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{\n                  node.property.label || node.property.title || node.property.name | translate\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            <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\"\n        >\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\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" }]
+                        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" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], asset: [{
                 type: Input
-            }], customProperties: [{
+            }], extraProperties: [{
                 type: Input
             }], selectedProperties: [{
                 type: Output
@@ -1484,6 +1652,199 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [AssetPropertyActionDirective]
             }] } });
 
+/**
+ * Represents a drawer component for selecting asset properties.
+ */
+class CustomPropertiesDrawerComponent {
+    constructor() {
+        /**
+         * Title of the drawer.
+         */
+        this.title = gettext('Select property');
+        /**
+         * Configuration for the asset property list.
+         */
+        this.config = {
+            filterable: false,
+            selectMode: 'multi',
+            expansionMode: 'collapsedByDefault',
+            showValue: false,
+            emptyStateContent: 'default-properties',
+            allowAddingCustomProperties: false,
+            inputPropertiesHandle: 'override'
+        };
+        /**
+         * Extra properties to be displayed in the list.
+         */
+        this.extraProperties = [];
+        /**
+         * Emits the selected properties when saved.
+         */
+        this.savePropertySelection = new EventEmitter();
+        /**
+         * Emits an event when the selection is canceled.
+         */
+        this.cancelPropertySelection = new EventEmitter();
+        /**
+         * List of selected properties.
+         */
+        this.selectedProperties = [];
+        /**
+         * Reference to the bottom drawer.
+         */
+        this.bottomDrawerRef = inject(BottomDrawerRef);
+        /**
+         * Promise resolving to the selected properties.
+         */
+        this.result = new Promise((resolve, reject) => {
+            this._save = resolve;
+            this._cancel = reject;
+        });
+        this.tabNames = {
+            regular: gettext('Regular`properties`'),
+            computed: gettext('Computed`properties`')
+        };
+        this.inputText = '';
+        this.selectedTab = 'regular';
+        this.searchSubject$ = new BehaviorSubject('');
+        /**
+         * Subject for handling component destruction.
+         */
+        this.destroy$ = new Subject();
+        this.assetPropertiesService = inject(AssetPropertiesService);
+    }
+    async ngOnInit() {
+        await this.updateProperties();
+        this.searchSubject$
+            .pipe(takeUntil(this.destroy$), debounceTime(350))
+            .subscribe(() => this.updateProperties());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Updates the selected properties.
+     * @param properties The selected properties.
+     */
+    onSelectedProperties(properties) {
+        this.selectedProperties = cloneDeep(properties);
+    }
+    onTabChange(tabName) {
+        this.selectedTab = tabName;
+    }
+    onSearch() {
+        this.searchSubject$.next(this.inputText);
+    }
+    clearSearch() {
+        this.inputText = '';
+        this.onSearch();
+    }
+    /**
+     * Saves the selected properties and closes the drawer.
+     */
+    onSave() {
+        this._save(this.selectedProperties);
+        this.bottomDrawerRef.close();
+    }
+    /**
+     * Cancels the selection and closes the drawer.
+     */
+    onCancel() {
+        this._cancel();
+        this.bottomDrawerRef.close();
+    }
+    async loadMore() {
+        const res = await this.paging.next();
+        this.paging = res.paging;
+        const propertiesFromLibrary = [];
+        const propertiesMOs = res.data;
+        propertiesMOs.forEach(prop => {
+            propertiesFromLibrary.push({
+                c8y_JsonSchema: prop.c8y_JsonSchema,
+                label: prop.name,
+                name: Object.keys(prop.c8y_JsonSchema.properties)[0],
+                type: prop.c8y_JsonSchema.type
+            });
+        });
+        this.extraProperties = [...this.extraProperties, ...propertiesFromLibrary];
+    }
+    /**
+     * Checks if the select button should be disabled.
+     * @returns True if all selected properties are inactive.
+     */
+    selectIsDisabled() {
+        return this.selectedProperties?.every(({ active }) => !active);
+    }
+    async updateProperties() {
+        const { propertiesFromLibrary, paging } = await this.assetPropertiesService.getPropertiesFromPropertiesLibrary(this.inputText);
+        this.paging = paging;
+        this.extraProperties = this.categorizeAndFlattenHierarchicalProperties([
+            ...propertiesFromLibrary,
+            ...defaultAssetProperties.filter(prop => prop.label.includes(this.inputText?.trim().toLowerCase()))
+        ]);
+    }
+    /**
+     * Categorizes and flattens hierarchical properties.
+     * @param properties The properties to categorize.
+     * @returns The flattened list of properties.
+     */
+    categorizeAndFlattenHierarchicalProperties(properties) {
+        const { simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
+        return [...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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-custom-properties-drawer-component', host: {
+                        class: 'd-contents'
+                    }, standalone: true, imports: [
+                        C8yTranslatePipe,
+                        FormsModule$1,
+                        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" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], savePropertySelection: [{
+                type: Output
+            }], cancelPropertySelection: [{
+                type: Output
+            }] } });
+
+/**
+ * Service to open a drawer for selecting custom asset properties.
+ */
+class CustomPropertiesDrawerService {
+    constructor() {
+        this.bottomDrawerService = inject(BottomDrawerService);
+    }
+    async getCustomProperties() {
+        const drawer = this.bottomDrawerService.openDrawer(CustomPropertiesDrawerComponent, {
+            disableClickOutside: true
+        });
+        try {
+            const resultOf = await drawer.instance.result;
+            return resultOf;
+        }
+        catch (ex) {
+            return [];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomPropertiesDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomPropertiesDrawerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomPropertiesDrawerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * Represents a drawer component for selecting asset properties.
  */
@@ -1494,9 +1855,9 @@ class AssetPropertySelectorDrawerComponent {
          */
         this.title = gettext('Select property');
         /**
-         * Custom properties to be displayed in the list.
+         * Extra properties to be displayed in the list.
          */
-        this.customProperties = [];
+        this.extraProperties = [];
         /**
          * Emits the selected properties when saved.
          */
@@ -1549,14 +1910,14 @@ class AssetPropertySelectorDrawerComponent {
     selectIsDisabled() {
         return this.selectedProperties?.every(({ active }) => !active);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AssetPropertySelectorDrawerComponent, isStandalone: true, selector: "c8y-asset-property-selector-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=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [asset]=\"asset\"\n    [config]=\"config\"\n    [customProperties]=\"customProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\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: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "customProperties"], outputs: ["selectedProperties"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AssetPropertySelectorDrawerComponent, isStandalone: true, selector: "c8y-asset-property-selector-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=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [asset]=\"asset\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\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: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-selector-drawer-component', host: {
                         class: 'd-contents'
-                    }, standalone: true, imports: [C8yTranslatePipe, FormsModule$1, AssetPropertyListComponent], template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [asset]=\"asset\"\n    [config]=\"config\"\n    [customProperties]=\"customProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\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" }]
+                    }, standalone: true, imports: [C8yTranslatePipe, FormsModule$1, AssetPropertyListComponent], template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [asset]=\"asset\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\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: [{
@@ -1569,5 +1930,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AssetPropertiesService, AssetPropertyActionDirective, AssetPropertyListComponent, AssetPropertySelectorDrawerComponent, RESULT_TYPES, defaultAssetProperties, defaultAssetPropertyListConfig, deviceAssetProperties };
+export { AssetPropertiesService, AssetPropertyActionDirective, AssetPropertyListComponent, AssetPropertySelectorDrawerComponent, CustomPropertiesDrawerService, RESULT_TYPES, defaultAssetProperties, defaultAssetPropertyListConfig, deviceAssetProperties };
 //# sourceMappingURL=c8y-ngx-components-asset-properties.mjs.map