@c8y/ngx-components 1023.52.0 → 1023.53.0

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

@@ -1,16 +1,16 @@
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Directive, Injector, runInInjectionContext, Pipe, viewChildren, ViewContainerRef, effect, reflectComponentType, Input, Component, viewChild, EventEmitter, ContentChild, Output } from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, Injector, runInInjectionContext, Pipe, viewChildren, ViewContainerRef, effect, reflectComponentType, Input, Component, viewChild, EventEmitter, ContentChild, Output, forwardRef } from '@angular/core';
 import { InventoryService } from '@c8y/client';
 import * as i2 from '@c8y/ngx-components';
-import { hookGeneric, ExtensionPointForPlugins, GroupService, fromTriggerOnce, getInjectedHooks, stateToFactory, AssetTypesRealtimeService, AlertService, isPromise, IconDirective, C8yTranslatePipe, ListGroupModule, EmptyStateComponent, BottomDrawerRef, FormsModule as FormsModule$1, LoadMoreComponent, TabComponent, TabsOutletComponent, BottomDrawerService } from '@c8y/ngx-components';
-import { isArray, isObjectLike, isEmpty, find, forOwn, get, isUndefined, cloneDeep } from 'lodash-es';
+import { hookGeneric, ExtensionPointForPlugins, GroupService, fromTriggerOnce, getInjectedHooks, stateToFactory, AssetTypesRealtimeService, AlertService, isPromise, IconDirective, C8yTranslatePipe, ListGroupModule, EmptyStateComponent, FormsModule as FormsModule$1, LoadMoreComponent, TabComponent, TabsOutletComponent, BottomDrawerRef, BottomDrawerService } from '@c8y/ngx-components';
+import { isEqual, omit, isArray, isObjectLike, isEmpty, find, forOwn, get, isUndefined, cloneDeep } from 'lodash-es';
 import { firstValueFrom, mergeMap, filter, take, map, distinctUntilChanged, shareReplay, BehaviorSubject, of, from, switchMap, isObservable, Subject, takeUntil, debounceTime } from 'rxjs';
 import * as i1 from '@angular/router';
-import { NgFor, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { NgFor, NgClass, NgTemplateOutlet, AsyncPipe, JsonPipe } from '@angular/common';
 import { CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/forms';
-import { NgForm, FormsModule } from '@angular/forms';
+import { NgForm, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i4 from '@angular/cdk/tree';
@@ -18,6 +18,7 @@ import { CdkTreeModule } from '@angular/cdk/tree';
 import { DataSource } from '@angular/cdk/collections';
 import { TranslateService } from '@ngx-translate/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { MillerViewComponent } from '@c8y/ngx-components/assets-navigator';
 
 const defaultAssetPropertyListConfig = {
     filterable: true,
@@ -937,20 +938,9 @@ class AssetPropertiesService {
      */
     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) {
-                if (property1.computed &&
-                    property2.computed &&
-                    property1.instanceId &&
-                    property2.instanceId) {
-                    return property1.instanceId === property2.instanceId;
-                }
-                return true;
-            }
+            const propertiesToOmit = ['active'];
+            const areEqual = isEqual(omit(property1, propertiesToOmit), omit(property2, propertiesToOmit));
+            return areEqual;
         }
         return false;
     }
@@ -1866,7 +1856,7 @@ class AssetPropertyListComponent {
      * Opens the drawer to add new custom properties.
      */
     async addProperty() {
-        const propertiesToAdd = await this.customPropertiesDrawerService.getCustomProperties(this.asset, { hiddenTabs: this.config.hiddenTabs });
+        const propertiesToAdd = await this.customPropertiesDrawerService.getCustomProperties(this.asset, { hiddenTabs: { asset: true, ...this.config.hiddenTabs } });
         if (!propertiesToAdd || propertiesToAdd.length === 0) {
             return;
         }
@@ -2064,6 +2054,7 @@ class AssetPropertyListComponent {
         this.expansionState.set(key, !currentState);
         this.rebuildVisibleData();
         this.updateAreAllNodesExpandedState();
+        this.applySelectedPropertiesFromConfig();
     }
     /**
      * Selects or deselects all nodes.
@@ -2086,7 +2077,7 @@ class AssetPropertyListComponent {
      * @param selected True if the node is selected.
      * @param node The node to select.
      */
-    onSelectSingle(selected, node) {
+    onSelectSingle(selected, node, emit = true) {
         this.allNodesComplete.forEach(n => {
             n.property.active = false;
         });
@@ -2097,7 +2088,7 @@ class AssetPropertyListComponent {
             this.rebuildVisibleData();
             this.updateAreAllNodesExpandedState();
         }
-        if (selected) {
+        if (selected && emit) {
             this.selectedProperties.next([node.property]);
         }
     }
@@ -2106,7 +2097,7 @@ class AssetPropertyListComponent {
      * @param selected True if the node is selected.
      * @param node The node to select.
      */
-    onSelectMulti(selected, node) {
+    onSelectMulti(selected, node, emit = true) {
         node.property.active = selected;
         if (selected && node.expandable && !this.isNodeExpanded(node)) {
             const key = this.getNodeKey(node);
@@ -2121,7 +2112,9 @@ class AssetPropertyListComponent {
         const selectedProperties = this.allNodesComplete
             .filter(n => n.property.active)
             .map(n => n.property);
-        this.selectedProperties.next(selectedProperties);
+        if (emit) {
+            this.selectedProperties.next(selectedProperties);
+        }
     }
     /**
      * Initiates a filter operation.
@@ -2275,24 +2268,42 @@ class AssetPropertyListComponent {
         });
     }
     applySelectedPropertiesFromConfig() {
-        if (!this.config.selectedProperties || this.config.selectedProperties.length === 0) {
+        if (!this.config.selectedProperties) {
             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;
+        if (this.config.selectedProperties?.length === 0) {
+            this.allNodesComplete.forEach(node => {
+                node.property.active = false;
+            });
+            this.updateSelectAllState();
+            return;
+        }
+        let selectedPropertiesToApply = this.config.selectedProperties;
+        if (this.config.selectMode === 'single') {
+            selectedPropertiesToApply = this.config.selectedProperties.slice(0, 1);
+            // For single mode, find the matching node and only call onSelectSingle once
+            const nodeToSelect = this.dataSource.data.find(node => selectedPropertiesToApply.some(configProperty => this.assetPropertiesService.propertiesMatch(node.property, configProperty)));
+            if (nodeToSelect) {
+                this.onSelectSingle(true, nodeToSelect, false);
+            }
+            else {
+                this.allNodesComplete.forEach(node => {
+                    node.property.active = false;
+                });
+            }
+        }
+        else {
+            // Multi or plus mode - iterate through all nodes
+            this.dataSource.data.forEach(node => {
+                const matchingNode = selectedPropertiesToApply.find(configProperty => this.assetPropertiesService.propertiesMatch(node.property, configProperty));
+                if (matchingNode) {
+                    this.onSelectMulti(true, node, false);
                 }
-                else if (this.config.selectMode === 'multi') {
-                    this.onSelectMulti(true, matchingNode);
+                else {
+                    this.onSelectMulti(false, node, false);
                 }
-            }
-        });
+            });
+        }
     }
     /**
      * Updates the display added properties based on compatibility with current asset.
@@ -2583,7 +2594,7 @@ class AssetPropertyListComponent {
         return [...computed, ...simple, ...complex];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertyListComponent, isStandalone: true, selector: "c8y-asset-property-list", inputs: { config: "config", asset: "asset", extraProperties: "extraProperties" }, outputs: { selectedProperties: "selectedProperties" }, queries: [{ propertyName: "assetPropertyAction", first: true, predicate: AssetPropertyActionDirective, descendants: true }], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{\n                    node.property.keyPath?.join('.') || (node.property?.name | translate)\n                  }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i4.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i4.CdkTreeNodePadding, selector: "[cdkTreeNodePadding]", inputs: ["cdkTreeNodePadding", "cdkTreeNodePaddingIndent"] }, { kind: "component", type: i4.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i4.CdkTreeNode, selector: "cdk-tree-node", inputs: ["role", "isExpandable", "isExpanded", "isDisabled", "cdkTreeNodeTypeaheadLabel"], outputs: ["activation", "expandedChange"], exportAs: ["cdkTreeNode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: AssetPropertyCollapseButtonTitlePipe, name: "c8yAssetPropertyCollapseButtonTitle" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertyListComponent, isStandalone: true, selector: "c8y-asset-property-list", inputs: { config: "config", asset: "asset", extraProperties: "extraProperties" }, outputs: { selectedProperties: "selectedProperties" }, queries: [{ propertyName: "assetPropertyAction", first: true, predicate: AssetPropertyActionDirective, descendants: true }], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{\n                    node.property.keyPath?.join('.') || (node.property?.name | translate)\n                  }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i4.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i4.CdkTreeNodePadding, selector: "[cdkTreeNodePadding]", inputs: ["cdkTreeNodePadding", "cdkTreeNodePaddingIndent"] }, { kind: "component", type: i4.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i4.CdkTreeNode, selector: "cdk-tree-node", inputs: ["role", "isExpandable", "isExpanded", "isDisabled", "cdkTreeNodeTypeaheadLabel"], outputs: ["activation", "expandedChange"], exportAs: ["cdkTreeNode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: AssetPropertyCollapseButtonTitlePipe, name: "c8yAssetPropertyCollapseButtonTitle" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
             type: Component,
@@ -2605,7 +2616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AssetPropertyCollapseButtonTitlePipe,
                         CdkDropList,
                         CdkDrag
-                    ], template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{\n                    node.property.keyPath?.join('.') || (node.property?.name | translate)\n                  }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{\n                    node.property.keyPath?.join('.') || (node.property?.name | translate)\n                  }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || (node.property?.name | translate) }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], config: [{
                 type: Input
             }], asset: [{
@@ -2620,14 +2631,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 /**
- * Represents a drawer component for selecting asset properties.
+ * Represents a reusable component for displaying and managing library properties (regular and computed).
+ * This component handles the search, tabs, and property list display logic.
  */
-class CustomPropertiesDrawerComponent {
+class AssetPropertyTabsComponent {
     constructor() {
-        /**
-         * Title of the drawer.
-         */
-        this.title = gettext('Select property');
         /**
          * Configuration for the asset property list.
          */
@@ -2641,48 +2649,50 @@ class CustomPropertiesDrawerComponent {
             inputPropertiesHandle: 'override'
         };
         /**
-         * Emits the selected properties when saved.
+         * Currently selected properties to be highlighted in the list.
          */
-        this.savePropertySelection = new EventEmitter();
+        this.selectedProperties = [];
         /**
-         * Emits an event when the selection is canceled.
+         * Controls which tabs are hidden.
          */
-        this.cancelPropertySelection = new EventEmitter();
+        this.hiddenTabs = {};
         /**
-         * List of selected properties.
+         * The name of the tabs outlet.
          */
-        this.selectedProperties = [];
+        this.tabsOutletName = 'libraryPropertiesTabs';
         /**
-         * Reference to the bottom drawer.
+         * Whether to show the search input.
          */
-        this.bottomDrawerRef = inject(BottomDrawerRef);
+        this.showSearch = true;
         /**
-         * Promise resolving to the selected properties.
+         * Emits when the selected properties change.
          */
-        this.result = new Promise((resolve, reject) => {
-            this._save = resolve;
-            this._cancel = reject;
-        });
+        this.selectedPropertiesChange = new EventEmitter();
         this.tabNames = {
-            regular: gettext('Properties'),
+            asset: gettext('Asset properties'),
+            regular: gettext('Custom properties'),
             computed: gettext('Computed properties')
         };
         this.inputText = '';
-        this.selectedTab = 'regular';
+        this.selectedTab = 'asset';
+        this.assetProperties = [];
         this.regularProperties = [];
         this.computedProperties = [];
         this.displayedProperties = [];
+        this.assetCount = 0;
         this.regularCount = 0;
         this.computedCount = 0;
         this.allComputedProperties = [];
-        this.hiddenTabs = {};
-        this.searchSubject$ = new BehaviorSubject('');
-        /**
-         * Subject for handling component destruction.
-         */
+        this.searchSubject$ = new Subject();
         this.destroy$ = new Subject();
         this.assetPropertiesService = inject(AssetPropertiesService);
         this.computedPropertiesService = inject(ComputedPropertiesService);
+        this.selectedAssetProperties = [];
+        this.selectedRegularProperties = [];
+        this.selectedComputedProperties = [];
+    }
+    get showAsset() {
+        return !this.hiddenTabs.asset;
     }
     get showRegular() {
         return !this.hiddenTabs.regular;
@@ -2691,21 +2701,47 @@ class CustomPropertiesDrawerComponent {
         return !this.hiddenTabs.computed;
     }
     get showTabBar() {
-        return this.showRegular && this.showComputed;
+        const visibleTabs = [this.showAsset, this.showRegular, this.showComputed].filter(Boolean);
+        return visibleTabs.length > 1;
     }
     async ngOnInit() {
-        if (!this.showRegular) {
+        this.config = { ...this.config, selectedProperties: this.selectedProperties };
+        if (this.showAsset) {
+            this.selectedTab = 'asset';
+        }
+        else if (this.showRegular) {
+            this.selectedTab = 'regular';
+        }
+        else if (this.showComputed) {
             this.selectedTab = 'computed';
         }
         if (this.showComputed) {
-            const computedPropsResult = await this.computedPropertiesService.getByContext(this.asset);
-            this.allComputedProperties = computedPropsResult.map(({ prop }) => prop);
+            this.loadComputedProperties();
+        }
+        if (this.showAsset && this.asset) {
+            await this.loadAssetProperties();
         }
         await this.updateProperties();
+        this.categorizeSelectedProperties();
+        this.updateConfigWithCurrentTabSelections();
         this.searchSubject$
             .pipe(takeUntil(this.destroy$), debounceTime(350))
             .subscribe(() => this.updateProperties());
     }
+    async ngOnChanges(changes) {
+        this.config = { ...this.config, allowAddingCustomProperties: false };
+        if (changes['selectedProperties']) {
+            this.categorizeSelectedProperties();
+            this.updateConfigWithCurrentTabSelections();
+        }
+        if (changes['asset'] && !changes['asset'].firstChange && this.showAsset) {
+            await this.loadAssetProperties();
+            await this.loadComputedProperties();
+            this.updateProperties();
+            this.categorizeSelectedProperties();
+            this.updateDisplayedProperties();
+        }
+    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
@@ -2715,7 +2751,22 @@ class CustomPropertiesDrawerComponent {
      * @param properties The selected properties.
      */
     onSelectedProperties(properties) {
-        this.selectedProperties = cloneDeep(properties);
+        // Update the selected properties for the current tab
+        if (this.selectedTab === 'asset') {
+            this.selectedAssetProperties = cloneDeep(properties);
+        }
+        else if (this.selectedTab === 'regular') {
+            this.selectedRegularProperties = cloneDeep(properties);
+        }
+        else {
+            this.selectedComputedProperties = cloneDeep(properties);
+        }
+        const allSelected = [
+            ...this.selectedAssetProperties,
+            ...this.selectedRegularProperties,
+            ...this.selectedComputedProperties
+        ];
+        this.selectedPropertiesChange.emit(cloneDeep(allSelected));
     }
     onTabChange(tabName) {
         this.selectedTab = tabName;
@@ -2728,20 +2779,6 @@ class CustomPropertiesDrawerComponent {
         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() {
         if (this.selectedTab !== 'regular' || !this.paging) {
             return;
@@ -2765,12 +2802,22 @@ class CustomPropertiesDrawerComponent {
             this.displayedProperties = this.regularProperties;
         }
     }
-    /**
-     * Checks if the select button should be disabled.
-     * @returns True if all selected properties are inactive.
-     */
-    selectIsDisabled() {
-        return this.selectedProperties?.every(({ active }) => !active);
+    async loadComputedProperties() {
+        const computedPropsResult = await this.computedPropertiesService.getByContext(this.asset);
+        this.allComputedProperties = computedPropsResult.map(({ prop }) => prop);
+    }
+    async loadAssetProperties() {
+        if (!this.asset) {
+            this.assetProperties = [];
+            this.assetCount = 0;
+            return;
+        }
+        const properties = await this.assetPropertiesService.getInitialProperties(this.asset);
+        const categorized = this.categorizeAndFlattenHierarchicalProperties(properties);
+        // Filter to apply search
+        const filtered = categorized.filter(prop => prop.label.toLowerCase().includes(this.inputText?.trim().toLowerCase() || ''));
+        this.assetProperties = filtered;
+        this.assetCount = categorized.length;
     }
     async updateProperties() {
         let propertiesFromLibrary = [];
@@ -2785,6 +2832,9 @@ class CustomPropertiesDrawerComponent {
         if (this.showComputed) {
             filteredComputedProperties = this.allComputedProperties.filter(prop => prop.label.toLowerCase().includes(this.inputText?.trim().toLowerCase() || ''));
         }
+        if (this.showAsset) {
+            await this.loadAssetProperties();
+        }
         const allProperties = this.categorizeAndFlattenHierarchicalProperties([
             ...filteredComputedProperties,
             ...propertiesFromLibrary,
@@ -2797,8 +2847,73 @@ class CustomPropertiesDrawerComponent {
         this.updateDisplayedProperties();
     }
     updateDisplayedProperties() {
-        this.displayedProperties =
-            this.selectedTab === 'regular' ? this.regularProperties : this.computedProperties;
+        if (this.selectedTab === 'asset') {
+            this.displayedProperties = this.assetProperties;
+        }
+        else if (this.selectedTab === 'regular') {
+            this.displayedProperties = this.regularProperties;
+        }
+        else {
+            this.displayedProperties = this.computedProperties;
+        }
+        this.updateConfigWithCurrentTabSelections();
+    }
+    /**
+     * Updates the config to show only the current tab's selected properties.
+     */
+    updateConfigWithCurrentTabSelections() {
+        let currentTabSelections = [];
+        if (this.selectedTab === 'asset') {
+            currentTabSelections = this.selectedAssetProperties;
+        }
+        else if (this.selectedTab === 'regular') {
+            currentTabSelections = this.selectedRegularProperties;
+        }
+        else {
+            currentTabSelections = this.selectedComputedProperties;
+        }
+        this.config = { ...this.config, selectedProperties: currentTabSelections };
+    }
+    /**
+     * Categorizes incoming selectedProperties by matching them against loaded properties.
+     */
+    categorizeSelectedProperties() {
+        if (!this.selectedProperties) {
+            return;
+        }
+        const assetSelected = [];
+        const regularSelected = [];
+        const computedSelected = [];
+        for (const selectedProp of this.selectedProperties) {
+            // Check if it's in asset properties
+            const inAsset = this.assetProperties.some(prop => this.assetPropertiesService.propertiesMatch(prop, selectedProp));
+            if (inAsset) {
+                assetSelected.push(selectedProp);
+                continue;
+            }
+            const inComputed = this.computedProperties.some(prop => this.assetPropertiesService.propertiesMatch(prop, selectedProp));
+            if (inComputed) {
+                computedSelected.push(selectedProp);
+                continue;
+            }
+            // Check if it's in regular properties
+            const inRegular = this.regularProperties.some(prop => this.assetPropertiesService.propertiesMatch(prop, selectedProp));
+            if (inRegular) {
+                regularSelected.push(selectedProp);
+                continue;
+            }
+            // If computed property but not yet loaded, check by computed flag
+            if (selectedProp.computed) {
+                computedSelected.push(selectedProp);
+            }
+            else {
+                // Default to regular if can't determine
+                regularSelected.push(selectedProp);
+            }
+        }
+        this.selectedAssetProperties = assetSelected;
+        this.selectedRegularProperties = regularSelected;
+        this.selectedComputedProperties = computedSelected;
     }
     /**
      * Categorizes and flattens hierarchical properties.
@@ -2809,12 +2924,12 @@ class CustomPropertiesDrawerComponent {
         const { computed, simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
         return [...computed, ...simple, ...complex];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", inputs: { title: "title" }, outputs: { savePropertySelection: "savePropertySelection", cancelPropertySelection: "cancelPropertySelection" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"form-group m-b-8 p-16 d-flex\">\n  <div class=\"input-group input-group-search\">\n    <input\n      class=\"form-control\"\n      [attr.aria-label]=\"'Search properties' | translate\"\n      placeholder=\"{{ 'Search properties' | translate }}\"\n      role=\"searchbox\"\n      type=\"search\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"inputText\"\n      (input)=\"onSearch()\"\n      #filter\n    />\n    @if (filter.value.length === 0) {\n      <span\n        class=\"input-group-addon\"\n        [attr.aria-hidden]=\"true\"\n      >\n        <i\n          class=\"dlt-c8y-icon-search\"\n          [c8yIcon]=\"'search'\"\n        ></i>\n      </span>\n    }\n    @if (filter.value.length > 0) {\n      <span\n        class=\"input-group-addon\"\n        [attr.aria-hidden]=\"true\"\n      >\n        <i\n          class=\"text-muted dlt-c8y-icon-times\"\n          [c8yIcon]=\"'times'\"\n          [attr.aria-label]=\"'Clear search' | translate\"\n          tabindex=\"0\"\n          role=\"button\"\n          (click)=\"clearSearch()\"\n        ></i>\n      </span>\n    }\n  </div>\n</div>\n\n@if (showTabBar) {\n  <c8y-tabs-outlet\n    class=\"elevation-none m-b-16\"\n    outletName=\"assetPropertiesDrawerTabs\"\n    orientation=\"horizontal\"\n  ></c8y-tabs-outlet>\n\n  @if (showRegular) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'regular'\"\n      [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n      [priority]=\"1000\"\n      (onSelect)=\"onTabChange('regular')\"\n    >\n      <i [c8yIcon]=\"'new-property'\"></i>\n      <span>\n        {{ tabNames.regular | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ regularCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showComputed) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'computed'\"\n      [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n      [priority]=\"900\"\n      (onSelect)=\"onTabChange('computed')\"\n    >\n      <i [c8yIcon]=\"'bolt'\"></i>\n      <span>\n        {{ tabNames.computed | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ computedCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n}\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"displayedProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  @if (selectedTab === 'regular') {\n    <c8y-load-more\n      [paging]=\"paging\"\n      [useIntersection]=\"true\"\n      (onLoad)=\"loadMore()\"\n    ></c8y-load-more>\n  }\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertyTabsComponent, isStandalone: true, selector: "c8y-asset-property-tabs", inputs: { asset: "asset", config: "config", selectedProperties: "selectedProperties", hiddenTabs: "hiddenTabs", tabsOutletName: "tabsOutletName", showSearch: "showSearch" }, outputs: { selectedPropertiesChange: "selectedPropertiesChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "@if (showSearch) {\n  <div class=\"form-group p-16 m-b-0 d-flex sticky-top bg-component\">\n    <div class=\"input-group input-group-search\">\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"'Search properties' | translate\"\n        placeholder=\"{{ 'Search properties' | translate }}\"\n        role=\"searchbox\"\n        type=\"search\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"inputText\"\n        (input)=\"onSearch()\"\n        #filter\n      />\n      @if (filter.value.length === 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n      }\n      @if (filter.value.length > 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"text-muted dlt-c8y-icon-times\"\n            [c8yIcon]=\"'times'\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            tabindex=\"0\"\n            role=\"button\"\n            (click)=\"clearSearch()\"\n          ></i>\n        </span>\n      }\n    </div>\n  </div>\n}\n\n@if (showTabBar) {\n  <c8y-tabs-outlet\n    class=\"elevation-none m-b-16 p-sticky bg-component d-block\"\n    [outletName]=\"tabsOutletName\"\n    orientation=\"horizontal\"\n  ></c8y-tabs-outlet>\n\n  @if (showAsset) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'asset'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1100\"\n      (onSelect)=\"onTabChange('asset')\"\n    >\n      <i [c8yIcon]=\"'cube'\"></i>\n      <span>\n        {{ tabNames.asset | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ assetCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showRegular) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'regular'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1000\"\n      (onSelect)=\"onTabChange('regular')\"\n    >\n      <i [c8yIcon]=\"'new-property'\"></i>\n      <span>\n        {{ tabNames.regular | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ regularCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showComputed) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'computed'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"900\"\n      (onSelect)=\"onTabChange('computed')\"\n    >\n      <i [c8yIcon]=\"'bolt'\"></i>\n      <span>\n        {{ tabNames.computed | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ computedCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n}\n\n<c8y-asset-property-list\n  class=\"bg-component d-block\"\n  [config]=\"config\"\n  [extraProperties]=\"displayedProperties\"\n  (selectedProperties)=\"onSelectedProperties($event)\"\n></c8y-asset-property-list>\n@if (selectedTab === 'regular') {\n  <c8y-load-more\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertyTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-custom-properties-drawer-component', host: {
+            args: [{ selector: 'c8y-asset-property-tabs', host: {
                         class: 'd-contents'
                     }, standalone: true, imports: [
                         C8yTranslatePipe,
@@ -2824,10 +2939,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IconDirective,
                         TabComponent,
                         TabsOutletComponent
-                    ], template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"form-group m-b-8 p-16 d-flex\">\n  <div class=\"input-group input-group-search\">\n    <input\n      class=\"form-control\"\n      [attr.aria-label]=\"'Search properties' | translate\"\n      placeholder=\"{{ 'Search properties' | translate }}\"\n      role=\"searchbox\"\n      type=\"search\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"inputText\"\n      (input)=\"onSearch()\"\n      #filter\n    />\n    @if (filter.value.length === 0) {\n      <span\n        class=\"input-group-addon\"\n        [attr.aria-hidden]=\"true\"\n      >\n        <i\n          class=\"dlt-c8y-icon-search\"\n          [c8yIcon]=\"'search'\"\n        ></i>\n      </span>\n    }\n    @if (filter.value.length > 0) {\n      <span\n        class=\"input-group-addon\"\n        [attr.aria-hidden]=\"true\"\n      >\n        <i\n          class=\"text-muted dlt-c8y-icon-times\"\n          [c8yIcon]=\"'times'\"\n          [attr.aria-label]=\"'Clear search' | translate\"\n          tabindex=\"0\"\n          role=\"button\"\n          (click)=\"clearSearch()\"\n        ></i>\n      </span>\n    }\n  </div>\n</div>\n\n@if (showTabBar) {\n  <c8y-tabs-outlet\n    class=\"elevation-none m-b-16\"\n    outletName=\"assetPropertiesDrawerTabs\"\n    orientation=\"horizontal\"\n  ></c8y-tabs-outlet>\n\n  @if (showRegular) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'regular'\"\n      [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n      [priority]=\"1000\"\n      (onSelect)=\"onTabChange('regular')\"\n    >\n      <i [c8yIcon]=\"'new-property'\"></i>\n      <span>\n        {{ tabNames.regular | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ regularCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showComputed) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'computed'\"\n      [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n      [priority]=\"900\"\n      (onSelect)=\"onTabChange('computed')\"\n    >\n      <i [c8yIcon]=\"'bolt'\"></i>\n      <span>\n        {{ tabNames.computed | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ computedCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n}\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"displayedProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  @if (selectedTab === 'regular') {\n    <c8y-load-more\n      [paging]=\"paging\"\n      [useIntersection]=\"true\"\n      (onLoad)=\"loadMore()\"\n    ></c8y-load-more>\n  }\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: [{
+                    ], template: "@if (showSearch) {\n  <div class=\"form-group p-16 m-b-0 d-flex sticky-top bg-component\">\n    <div class=\"input-group input-group-search\">\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"'Search properties' | translate\"\n        placeholder=\"{{ 'Search properties' | translate }}\"\n        role=\"searchbox\"\n        type=\"search\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"inputText\"\n        (input)=\"onSearch()\"\n        #filter\n      />\n      @if (filter.value.length === 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"dlt-c8y-icon-search\"\n            [c8yIcon]=\"'search'\"\n          ></i>\n        </span>\n      }\n      @if (filter.value.length > 0) {\n        <span\n          class=\"input-group-addon\"\n          [attr.aria-hidden]=\"true\"\n        >\n          <i\n            class=\"text-muted dlt-c8y-icon-times\"\n            [c8yIcon]=\"'times'\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            tabindex=\"0\"\n            role=\"button\"\n            (click)=\"clearSearch()\"\n          ></i>\n        </span>\n      }\n    </div>\n  </div>\n}\n\n@if (showTabBar) {\n  <c8y-tabs-outlet\n    class=\"elevation-none m-b-16 p-sticky bg-component d-block\"\n    [outletName]=\"tabsOutletName\"\n    orientation=\"horizontal\"\n  ></c8y-tabs-outlet>\n\n  @if (showAsset) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'asset'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1100\"\n      (onSelect)=\"onTabChange('asset')\"\n    >\n      <i [c8yIcon]=\"'cube'\"></i>\n      <span>\n        {{ tabNames.asset | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ assetCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showRegular) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'regular'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"1000\"\n      (onSelect)=\"onTabChange('regular')\"\n    >\n      <i [c8yIcon]=\"'new-property'\"></i>\n      <span>\n        {{ tabNames.regular | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ regularCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n\n  @if (showComputed) {\n    <c8y-tab\n      [isActive]=\"selectedTab === 'computed'\"\n      [tabsOutlet]=\"tabsOutletName\"\n      [priority]=\"900\"\n      (onSelect)=\"onTabChange('computed')\"\n    >\n      <i [c8yIcon]=\"'bolt'\"></i>\n      <span>\n        {{ tabNames.computed | translate }}\n        <span\n          class=\"m-l-4 badge badge-default flex-no-shrink\"\n          aria-live=\"assertive\"\n        >\n          {{ computedCount }}\n        </span>\n      </span>\n    </c8y-tab>\n  }\n}\n\n<c8y-asset-property-list\n  class=\"bg-component d-block\"\n  [config]=\"config\"\n  [extraProperties]=\"displayedProperties\"\n  (selectedProperties)=\"onSelectedProperties($event)\"\n></c8y-asset-property-list>\n@if (selectedTab === 'regular') {\n  <c8y-load-more\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\n}\n" }]
+        }], propDecorators: { asset: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], selectedProperties: [{
+                type: Input
+            }], hiddenTabs: [{
+                type: Input
+            }], tabsOutletName: [{
                 type: Input
-            }], savePropertySelection: [{
+            }], showSearch: [{
+                type: Input
+            }], selectedPropertiesChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Represents a drawer component for selecting asset properties.
+ * This is a thin wrapper around the LibraryPropertiesTabsComponent.
+ */
+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'
+        };
+        /**
+         * 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;
+        });
+        /**
+         * Controls which tabs are hidden.
+         */
+        this.hiddenTabs = {};
+    }
+    /**
+     * Updates the selected properties.
+     * @param properties The selected properties.
+     */
+    onSelectedProperties(properties) {
+        this.selectedProperties = cloneDeep(properties);
+    }
+    /**
+     * 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();
+    }
+    /**
+     * Checks if the select button should be disabled.
+     * @returns True if all selected properties are inactive.
+     */
+    selectIsDisabled() {
+        return this.selectedProperties?.every(({ active }) => !active);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", outputs: { savePropertySelection: "savePropertySelection", cancelPropertySelection: "cancelPropertySelection" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<c8y-asset-property-tabs\n  [asset]=\"asset\"\n  [config]=\"config\"\n  [selectedProperties]=\"selectedProperties\"\n  [hiddenTabs]=\"hiddenTabs\"\n  [tabsOutletName]=\"'assetPropertiesDrawerTabs'\"\n  [showSearch]=\"true\"\n  (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n></c8y-asset-property-tabs>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: AssetPropertyTabsComponent, selector: "c8y-asset-property-tabs", inputs: ["asset", "config", "selectedProperties", "hiddenTabs", "tabsOutletName", "showSearch"], outputs: ["selectedPropertiesChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-custom-properties-drawer-component', host: {
+                        class: 'd-contents'
+                    }, standalone: true, imports: [C8yTranslatePipe, AssetPropertyTabsComponent], template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<c8y-asset-property-tabs\n  [asset]=\"asset\"\n  [config]=\"config\"\n  [selectedProperties]=\"selectedProperties\"\n  [hiddenTabs]=\"hiddenTabs\"\n  [tabsOutletName]=\"'assetPropertiesDrawerTabs'\"\n  [showSearch]=\"true\"\n  (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n></c8y-asset-property-tabs>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n" }]
+        }], propDecorators: { savePropertySelection: [{
                 type: Output
             }], cancelPropertySelection: [{
                 type: Output
@@ -2866,8 +3081,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+/**
+ * Represents a component for selecting asset properties.
+ * This component handles all selection logic and can be used standalone or within drawer/modal wrappers.
+ */
+class AssetPropertySelectorComponent {
+    constructor() {
+        /**
+         * Configuration for the asset property list.
+         */
+        this.config = {};
+        /**
+         * Extra properties to be displayed in the list.
+         */
+        this.extraProperties = [];
+        /**
+         * Flag to allow changing the context (asset) within the selector.
+         */
+        this.allowChangingContext = false;
+        /**
+         * Flag to allow properties from multiple assets to be selected at once.
+         */
+        this.allowPropertiesFromMultipleAssets = true;
+        /**
+         * Flag to hide the selection panel.
+         */
+        this.hideSelection = true;
+        /**
+         * Flag to allow search in asset selector.
+         */
+        this.allowSearch = true;
+        /**
+         * List of selected properties.
+         */
+        this.selectedProperties = [];
+        /**
+         * Current asset selection as observable.
+         */
+        this.assetSelection = new BehaviorSubject(null);
+        this.touched = false;
+        this.modalService = inject(BsModalService);
+        this.computedPropertiesService = inject(ComputedPropertiesService);
+        this.assetPropertiesService = inject(AssetPropertiesService);
+    }
+    ngOnInit() {
+        if (this.contextAsset) {
+            this.assetSelection.next(this.contextAsset);
+        }
+        this.hiddenTabs = this.config.allowAddingCustomProperties
+            ? {}
+            : { regular: true, computed: true };
+    }
+    /**
+     * ControlValueAccessor implementation - write value from form model.
+     */
+    writeValue(obj) {
+        this.selectedProperties = obj || [];
+    }
+    /**
+     * ControlValueAccessor implementation - register onChange callback.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * ControlValueAccessor implementation - register onTouched callback.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Updates the selected properties.
+     * @param properties The selected properties.
+     */
+    async onSelectedProperties(properties) {
+        this.markAsTouched();
+        // Handle computed properties configuration
+        const configuredProperties = await this.handleComputedPropertiesConfiguration(properties);
+        this.selectedProperties = cloneDeep(configuredProperties);
+        this.emitCurrentSelection();
+    }
+    /**
+     * Handles asset selection changes.
+     * @param evt Asset selection change event.
+     */
+    selectionChanged(evt) {
+        if (evt.change.item) {
+            return this.selectAsset(evt.change.item);
+        }
+        // reset selection
+        this.assetSelection.next(null);
+    }
+    /**
+     * Removes a property from the selection.
+     * @param property The property to remove.
+     */
+    propertyRemoved(property) {
+        this.markAsTouched();
+        this.selectedProperties = this.selectedProperties.filter(prop => prop !== property);
+        this.emitCurrentSelection();
+    }
+    /**
+     * Edits (reconfigures) a computed property.
+     * @param property The property to edit.
+     */
+    async editProperty(property) {
+        const definition = await this.computedPropertiesService.getByName(property.name);
+        const configured = await this.configureProperty(property, definition);
+        if (configured) {
+            const currentAsset = this.assetSelection.getValue();
+            if (currentAsset?.id) {
+                property.contextAssetId = currentAsset.id;
+            }
+            this.emitCurrentSelection();
+        }
+    }
+    /**
+     * Selects an asset and updates the selection.
+     * @param asset The asset to select.
+     */
+    selectAsset(asset) {
+        this.assetSelection.next(asset);
+        if (!this.allowPropertiesFromMultipleAssets) {
+            this.clearSelection();
+        }
+    }
+    /**
+     * Clears all selected properties.
+     */
+    clearSelection() {
+        this.selectedProperties = [];
+        this.emitCurrentSelection();
+    }
+    /**
+     * Emits the current selection to the form model.
+     */
+    emitCurrentSelection() {
+        if (this.onChange) {
+            this.onChange(this.selectedProperties);
+        }
+    }
+    /**
+     * Marks the control as touched.
+     */
+    markAsTouched() {
+        if (!this.touched && this.onTouched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    /**
+     * Handles configuration for newly added computed properties.
+     * @param properties The selected properties.
+     * @returns The properties with configured ones included.
+     */
+    async handleComputedPropertiesConfiguration(properties) {
+        // Combine previously selected properties with newly added/configured ones
+        const previouslySelected = this.selectedProperties.filter(existing => {
+            if (existing.computed && existing.instanceId) {
+                // computed props that has config (so they get instanceId) can be added multiple times and are not removed from middle list
+                return true;
+            }
+            return properties.some(prop => this.assetPropertiesService.propertiesMatch(existing, prop));
+        });
+        if (properties.length === 0) {
+            // selector might emit properties array as empty array, but we should keep previously selected computed properties with config in that case, as they are not removed from middle list
+            return previouslySelected?.length !== 0 ? previouslySelected : [];
+        }
+        // Find newly added computed properties (not in previous selection)
+        const newlyAdded = properties.filter(prop => prop.computed &&
+            !this.selectedProperties.some(existing => this.assetPropertiesService.propertiesMatch(existing, prop)));
+        if (newlyAdded.length === 0) {
+            return properties;
+        }
+        const propertiesNeedingConfig = [];
+        const definitionsNeedingConfig = [];
+        const propertiesToActuallyAdd = [];
+        // Separate properties that need configuration from those that don't
+        for (const prop of newlyAdded) {
+            const definition = await this.computedPropertiesService.getByName(prop.name);
+            if (definition.configComponent || definition.loadConfigComponent) {
+                propertiesNeedingConfig.push(prop);
+                definitionsNeedingConfig.push(definition);
+            }
+            else {
+                propertiesToActuallyAdd.push(cloneDeep(prop));
+            }
+        }
+        // Configure properties that need it
+        if (propertiesNeedingConfig.length > 0) {
+            try {
+                const configs = await this.configureMultipleProperties(propertiesNeedingConfig, definitionsNeedingConfig);
+                propertiesNeedingConfig.forEach((prop, index) => {
+                    const clonedProp = cloneDeep(prop);
+                    clonedProp.config = configs[index];
+                    const currentAsset = this.assetSelection.getValue();
+                    if (currentAsset?.id) {
+                        clonedProp.contextAssetId = currentAsset.id;
+                    }
+                    // Generate instanceId for computed properties to allow multiple instances
+                    if (!clonedProp.instanceId) {
+                        clonedProp.instanceId = crypto.randomUUID();
+                    }
+                    propertiesToActuallyAdd.push(clonedProp);
+                });
+            }
+            catch {
+                // User cancelled configuration, don't add these properties
+                // propertiesToActuallyAdd already contains properties that didn't need config
+            }
+        }
+        const nonComputedNewlyAdded = properties.filter(prop => !prop.computed &&
+            !this.selectedProperties.some(existing => this.assetPropertiesService.propertiesMatch(existing, prop)));
+        return [...previouslySelected, ...propertiesToActuallyAdd, ...nonComputedNewlyAdded];
+    }
+    /**
+     * Displays the configuration modal for multiple computed properties and updates their configurations.
+     * @param properties Properties to configure.
+     * @param definitions Computed property definitions including config components.
+     * @returns Promise resolving to array of configurations.
+     */
+    configureMultipleProperties(properties, definitions) {
+        const currentAsset = this.assetSelection.getValue();
+        const modalRef = this.modalService.show(ComputedPropertiesConfigComponent, {
+            ignoreBackdropClick: true,
+            class: 'modal-lg',
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            initialState: {
+                properties,
+                definitions,
+                asset: currentAsset
+            }
+        }).content;
+        return modalRef.result;
+    }
+    /**
+     * Displays the configuration modal for a single computed property and updates its configuration.
+     * @param property Property to configure.
+     * @param definition Computed property definition including config component.
+     * @returns true if the property was configured, false if cancelled.
+     */
+    async configureProperty(property, definition) {
+        try {
+            const configs = await this.configureMultipleProperties([property], [definition]);
+            property.config = configs[0];
+            return true;
+        }
+        catch (err) {
+            return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertySelectorComponent, isStandalone: true, selector: "c8y-asset-property-selector", inputs: { contextAsset: "contextAsset", config: "config", extraProperties: "extraProperties", allowChangingContext: "allowChangingContext", allowPropertiesFromMultipleAssets: "allowPropertiesFromMultipleAssets", hideSelection: "hideSelection", allowSearch: "allowSearch" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => AssetPropertySelectorComponent)
+            }
+        ], ngImport: i0, template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  @if (allowChangingContext) {\n    <div class=\"d-flex d-col p-relative bg-level-1\">\n      <c8y-asset-selector-miller\n        class=\"d-contents\"\n        [(ngModel)]=\"contextAsset\"\n        [asset]=\"contextAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [container]=\"''\"\n        [config]=\"{\n          view: 'miller',\n          groupsSelectable: true,\n          columnHeaders: true,\n          showChildDevices: true,\n          showUnassignedDevices: true,\n          singleColumn: true,\n          search: allowSearch,\n          showFilter: true\n        }\"\n      ></c8y-asset-selector-miller>\n    </div>\n  }\n\n  <div class=\"bg-component inner-scroll\">\n    <c8y-asset-property-tabs\n      class=\"bg-component d-contents\"\n      [asset]=\"assetSelection | async\"\n      [config]=\"config\"\n      [selectedProperties]=\"selectedProperties\"\n      [hiddenTabs]=\"hiddenTabs\"\n      [showSearch]=\"true\"\n      (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n    ></c8y-asset-property-tabs>\n  </div>\n\n  @if (!hideSelection) {\n    <div class=\"inner-scroll bg-level-1\">\n      <p\n        class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n        [title]=\"'Selected properties' | translate\"\n      >\n        {{ 'Selected properties' | translate }}\n      </p>\n      @if (selectedProperties?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedProp of selectedProperties; track selectedProp.label) {\n            <div\n              [ngClass]=\"{\n                'c8y-datapoint-pill': selectedProp.computed && selectedProp.config,\n                'c8y-alarm-pill': !(selectedProp.computed && selectedProp.config)\n              }\"\n            >\n              <button\n                class=\"c8y-alarm-pill__btn\"\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"propertyRemoved(selectedProp)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove\"\n                ></i>\n              </button>\n              @if (selectedProp.computed && selectedProp.config) {\n                <button\n                  class=\"c8y-datapoint-pill__btn\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(selectedProp)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @let label =\n                selectedProp.label || selectedProp.title || selectedProp.name | translate;\n              <div\n                class=\"c8y-alarm-pill__label\"\n                [title]=\"label\"\n              >\n                <button\n                  class=\"btn-clean m-r-4\"\n                  [attr.aria-label]=\"selectedProp | c8yAssetPropertyIconTooltip\"\n                  tooltip=\"{{ selectedProp | c8yAssetPropertyIconTooltip }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                >\n                  <i [c8yIcon]=\"selectedProp | c8yAssetPropertyIcon\"></i>\n                </button>\n                <span class=\"text-truncate\">\n                  <span class=\"text-truncate\">{{ label }}</span>\n                  @if (selectedProp.config) {\n                    <small\n                      class=\"text-muted\"\n                      title=\"{{ selectedProp.config | json }}\"\n                      >{{ selectedProp.config | json }}</small\n                    >\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!selectedProperties || !selectedProperties.length) {\n        <div class=\"p-r-8\">\n          <c8y-ui-empty-state\n            [icon]=\"'c8y-data-points'\"\n            [title]=\"'No properties to display' | translate\"\n            [subtitle]=\"\n              'Select the asset, then on the available properties list, select desired property.'\n                | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyTabsComponent, selector: "c8y-asset-property-tabs", inputs: ["asset", "config", "selectedProperties", "hiddenTabs", "tabsOutletName", "showSearch"], outputs: ["selectedPropertiesChange"] }, { kind: "component", type: MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertySelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-asset-property-selector', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => AssetPropertySelectorComponent)
+                        }
+                    ], imports: [
+                        C8yTranslatePipe,
+                        FormsModule,
+                        AssetPropertyTabsComponent,
+                        MillerViewComponent,
+                        NgClass,
+                        AsyncPipe,
+                        EmptyStateComponent,
+                        AssetPropertyIconPipe,
+                        TooltipModule,
+                        AssetPropertyIconTooltipPipe,
+                        IconDirective,
+                        JsonPipe
+                    ], template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  @if (allowChangingContext) {\n    <div class=\"d-flex d-col p-relative bg-level-1\">\n      <c8y-asset-selector-miller\n        class=\"d-contents\"\n        [(ngModel)]=\"contextAsset\"\n        [asset]=\"contextAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [container]=\"''\"\n        [config]=\"{\n          view: 'miller',\n          groupsSelectable: true,\n          columnHeaders: true,\n          showChildDevices: true,\n          showUnassignedDevices: true,\n          singleColumn: true,\n          search: allowSearch,\n          showFilter: true\n        }\"\n      ></c8y-asset-selector-miller>\n    </div>\n  }\n\n  <div class=\"bg-component inner-scroll\">\n    <c8y-asset-property-tabs\n      class=\"bg-component d-contents\"\n      [asset]=\"assetSelection | async\"\n      [config]=\"config\"\n      [selectedProperties]=\"selectedProperties\"\n      [hiddenTabs]=\"hiddenTabs\"\n      [showSearch]=\"true\"\n      (selectedPropertiesChange)=\"onSelectedProperties($event)\"\n    ></c8y-asset-property-tabs>\n  </div>\n\n  @if (!hideSelection) {\n    <div class=\"inner-scroll bg-level-1\">\n      <p\n        class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n        [title]=\"'Selected properties' | translate\"\n      >\n        {{ 'Selected properties' | translate }}\n      </p>\n      @if (selectedProperties?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedProp of selectedProperties; track selectedProp.label) {\n            <div\n              [ngClass]=\"{\n                'c8y-datapoint-pill': selectedProp.computed && selectedProp.config,\n                'c8y-alarm-pill': !(selectedProp.computed && selectedProp.config)\n              }\"\n            >\n              <button\n                class=\"c8y-alarm-pill__btn\"\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"propertyRemoved(selectedProp)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove\"\n                ></i>\n              </button>\n              @if (selectedProp.computed && selectedProp.config) {\n                <button\n                  class=\"c8y-datapoint-pill__btn\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(selectedProp)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @let label =\n                selectedProp.label || selectedProp.title || selectedProp.name | translate;\n              <div\n                class=\"c8y-alarm-pill__label\"\n                [title]=\"label\"\n              >\n                <button\n                  class=\"btn-clean m-r-4\"\n                  [attr.aria-label]=\"selectedProp | c8yAssetPropertyIconTooltip\"\n                  tooltip=\"{{ selectedProp | c8yAssetPropertyIconTooltip }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                >\n                  <i [c8yIcon]=\"selectedProp | c8yAssetPropertyIcon\"></i>\n                </button>\n                <span class=\"text-truncate\">\n                  <span class=\"text-truncate\">{{ label }}</span>\n                  @if (selectedProp.config) {\n                    <small\n                      class=\"text-muted\"\n                      title=\"{{ selectedProp.config | json }}\"\n                      >{{ selectedProp.config | json }}</small\n                    >\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!selectedProperties || !selectedProperties.length) {\n        <div class=\"p-r-8\">\n          <c8y-ui-empty-state\n            [icon]=\"'c8y-data-points'\"\n            [title]=\"'No properties to display' | translate\"\n            [subtitle]=\"\n              'Select the asset, then on the available properties list, select desired property.'\n                | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { contextAsset: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], extraProperties: [{
+                type: Input
+            }], allowChangingContext: [{
+                type: Input
+            }], allowPropertiesFromMultipleAssets: [{
+                type: Input
+            }], hideSelection: [{
+                type: Input
+            }], allowSearch: [{
+                type: Input
+            }] } });
+
 /**
  * Represents a drawer component for selecting asset properties.
+ * This is a thin wrapper around AssetPropertySelectorComponent that handles drawer-specific logic.
  */
 class AssetPropertySelectorDrawerComponent {
     constructor() {
@@ -2880,17 +3394,25 @@ class AssetPropertySelectorDrawerComponent {
          */
         this.extraProperties = [];
         /**
-         * Emits the selected properties when saved.
+         * List of selected properties.
          */
-        this.savePropertySelection = new EventEmitter();
+        this.selectedProperties = [];
         /**
-         * Emits an event when the selection is canceled.
+         * Flag to allow changing the context (asset) within the drawer.
          */
-        this.cancelPropertySelection = new EventEmitter();
+        this.allowChangingContext = false;
         /**
-         * List of selected properties.
+         * Flag to hide the selection
+         * */
+        this.hideSelection = true;
+        /**
+         * Flag to allow selecting properties from multiple assets (if context change is allowed).
          */
-        this.selectedProperties = [];
+        this.allowPropertiesFromMultipleAssets = true;
+        /**
+         * Flag to enable search functionality for asset properties.
+         */
+        this.allowSearch = true;
         /**
          * Reference to the bottom drawer.
          */
@@ -2903,12 +3425,15 @@ class AssetPropertySelectorDrawerComponent {
             this._cancel = reject;
         });
     }
+    ngOnInit() {
+        this.selectedProperties = this.config?.selectedProperties ?? [];
+    }
     /**
-     * Updates the selected properties.
-     * @param properties The selected properties.
+     * Handles selection changes from the selector component.
+     * @param selection The selected properties.
      */
-    onSelectedProperties(properties) {
-        this.selectedProperties = cloneDeep(properties);
+    selectionChange(selection) {
+        this.selectedProperties = selection;
     }
     /**
      * Saves the selected properties and closes the drawer.
@@ -2926,30 +3451,26 @@ class AssetPropertySelectorDrawerComponent {
     }
     /**
      * Checks if the select button should be disabled.
-     * @returns True if all selected properties are inactive.
+     * @returns True if no active properties are selected.
      */
     selectIsDisabled() {
-        return this.selectedProperties?.every(({ active }) => !active);
+        return (!this.selectedProperties?.length || this.selectedProperties?.every(({ active }) => !active));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AssetPropertySelectorDrawerComponent, isStandalone: true, selector: "c8y-asset-property-selector-drawer-component", inputs: { title: "title" }, 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: "ngmodule", type: FormsModule$1 }, { kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AssetPropertySelectorDrawerComponent, isStandalone: true, selector: "c8y-asset-property-selector-drawer-component", inputs: { title: "title" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"card-inner-scroll fit-h\">\n  <c8y-asset-property-selector\n    [contextAsset]=\"contextAsset\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [allowPropertiesFromMultipleAssets]=\"allowPropertiesFromMultipleAssets\"\n    [hideSelection]=\"hideSelection\"\n    [allowSearch]=\"allowSearch\"\n    [ngModel]=\"selectedProperties\"\n    (ngModelChange)=\"selectionChange($event)\"\n  ></c8y-asset-property-selector>\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertySelectorComponent, selector: "c8y-asset-property-selector", inputs: ["contextAsset", "config", "extraProperties", "allowChangingContext", "allowPropertiesFromMultipleAssets", "hideSelection", "allowSearch"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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    [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" }]
+                    }, standalone: true, imports: [C8yTranslatePipe, FormsModule, AssetPropertySelectorComponent], template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"card-inner-scroll fit-h\">\n  <c8y-asset-property-selector\n    [contextAsset]=\"contextAsset\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [allowPropertiesFromMultipleAssets]=\"allowPropertiesFromMultipleAssets\"\n    [hideSelection]=\"hideSelection\"\n    [allowSearch]=\"allowSearch\"\n    [ngModel]=\"selectedProperties\"\n    (ngModelChange)=\"selectionChange($event)\"\n  ></c8y-asset-property-selector>\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
-            }], savePropertySelection: [{
-                type: Output
-            }], cancelPropertySelection: [{
-                type: Output
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AssetPropertiesService, AssetPropertyActionDirective, AssetPropertyListComponent, AssetPropertySelectorDrawerComponent, ComputedPropertiesService, CustomPropertiesDrawerService, HOOK_COMPUTED_PROPERTY, RESULT_TYPES, defaultAssetProperties, defaultAssetPropertyListConfig, hookComputedProperty };
+export { AssetPropertiesService, AssetPropertyActionDirective, AssetPropertyListComponent, AssetPropertySelectorComponent, AssetPropertySelectorDrawerComponent, AssetPropertyTabsComponent, ComputedPropertiesService, CustomPropertiesDrawerService, HOOK_COMPUTED_PROPERTY, RESULT_TYPES, defaultAssetProperties, defaultAssetPropertyListConfig, hookComputedProperty };
 //# sourceMappingURL=c8y-ngx-components-asset-properties.mjs.map