npm - @c8y/ngx-components - Versions diffs - 1023.90.1 → 1023.96.0 - Mend

@c8y/ngx-components 1023.90.1 → 1023.96.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

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

@@ -2793,7 +2793,7 @@ class AssetPropertyListComponent {
         return [...computed, ...simple, ...complex];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AssetPropertyListComponent, isStandalone: true, selector: "c8y-asset-property-list", inputs: { config: "config", asset: "asset", extraProperties: "extraProperties" }, outputs: { selectedProperties: "selectedProperties" }, queries: [{ propertyName: "assetPropertyAction", first: true, predicate: AssetPropertyActionDirective, descendants: true }], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{ node.property.keyPath?.join('.') || node.property?.name }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || node.property?.name }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i4.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i4.CdkTreeNodePadding, selector: "[cdkTreeNodePadding]", inputs: ["cdkTreeNodePadding", "cdkTreeNodePaddingIndent"] }, { kind: "component", type: i4.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i4.CdkTreeNode, selector: "cdk-tree-node", inputs: ["role", "isExpandable", "isExpanded", "isDisabled", "cdkTreeNodeTypeaheadLabel"], outputs: ["activation", "expandedChange"], exportAs: ["cdkTreeNode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }, { kind: "pipe", type: AssetPropertyIconPipe, name: "c8yAssetPropertyIcon" }, { kind: "pipe", type: AssetPropertyIconTooltipPipe, name: "c8yAssetPropertyIconTooltip" }, { kind: "pipe", type: AssetPropertyCollapseButtonTitlePipe, name: "c8yAssetPropertyCollapseButtonTitle" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 || config.allowAddingCustomProperties) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{ node.property.keyPath?.join('.') || node.property?.name }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || node.property?.name }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || config.allowAddingCustomProperties) {\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-24 p-r-40':\n                  !node.property.temporary &&\n                  config.allowAddingCustomProperties &&\n                  !assetPropertyAction,\n                'p-l-32':\n                  node.property.temporary &&\n                  config.allowAddingCustomProperties &&\n                  !node.property.computed,\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.25", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
             type: Component,
@@ -2815,7 +2815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AssetPropertyCollapseButtonTitlePipe,
                         CdkDropList,
                         CdkDrag
-                    ], template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div\n      class=\"select-all-container bg-inherit sticky-top\"\n      [ngClass]=\"{\n        'separator-bottom': config.filterable || (config.showHeader && dataSource.data.length)\n      }\"\n    >\n      @if (config.filterable) {\n        <div\n          class=\"form-group m-b-0 p-16 d-flex\"\n          [ngClass]=\"{ 'separator-bottom': config.showHeader }\"\n        >\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Filter properties' | translate\"\n              placeholder=\"{{ 'Filter properties' | translate }}\"\n              role=\"searchbox\"\n              type=\"search\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"filterText\"\n              (input)=\"onFilter()\"\n              [disabled]=\"!dataSource.data.length\"\n              #filter\n            />\n            @if (filter.value.length === 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  [c8yIcon]=\"'search'\"\n                ></i>\n              </span>\n            }\n            @if (filter.value.length > 0) {\n              <span\n                class=\"input-group-addon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <i\n                  class=\"text-muted dlt-c8y-icon-times\"\n                  [c8yIcon]=\"'times'\"\n                  [attr.aria-label]=\"'Clear filter' | translate\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"clearFilter()\"\n                ></i>\n              </span>\n            }\n          </div>\n        </div>\n      }\n      @if (config.showHeader && dataSource.data.length) {\n        <div class=\"d-flex a-i-center overflow-hidden\">\n          <div\n            class=\"flex-no-shrink d-flex a-i-center\"\n            [ngClass]=\"{\n              'p-l-40': !hasExpandableNodes && config.expansionMode !== 'nonCollapsible',\n              'p-r-8': config.selectMode !== 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          >\n            @if (config.expansionMode !== 'nonCollapsible' && hasExpandableNodes) {\n              @let collapseAllButtonTitle =\n                (areAllNodesExpanded ? collapseAllLabel : expandAllLabel) | translate;\n              <button\n                class=\"collapse-btn btn-dot flex-no-shrink\"\n                [title]=\"collapseAllButtonTitle\"\n                [attr.aria-label]=\"collapseAllButtonTitle\"\n                type=\"button\"\n                [ngClass]=\"{ active: areAllNodesExpanded }\"\n                (click)=\"toggleExpandCollapseAll()\"\n              >\n                <i [c8yIcon]=\"'chevron-right'\"></i>\n              </button>\n            }\n          </div>\n          @if (config.selectMode === 'multi') {\n            <c8y-list-item-checkbox\n              class=\"p-l-4 p-r-4\"\n              [ngModel]=\"allSelected\"\n              [indeterminate]=\"indeterminate\"\n              (onSelect)=\"selectAll($event)\"\n            ></c8y-list-item-checkbox>\n          }\n          <div\n            class=\"p-t-40\"\n            [ngClass]=\"{\n              'p-l-24': config.selectMode === 'single',\n              'p-l-8': config.selectMode === 'none' && config.expansionMode === 'nonCollapsible'\n            }\"\n          ></div>\n          <div class=\"content-flex-30 fit-w m-t-4 m-b-4 m-0\">\n            <div class=\"col-6 d-flex a-i-center m-l-0 m-r-0\">\n              <span class=\"flex-no-shrink p-l-4 p-r-8\">\n                <div class=\"c8y-icon\"></div>\n              </span>\n              <span class=\"text-medium m-l-8\">\n                {{ 'Property' | translate }}\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\">\n                <span class=\"text-medium\">{{ 'Key' | translate }}</span>\n              </div>\n            }\n            @if (config.showValue) {\n              <div [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\">\n                <span class=\"text-medium\">{{ 'Value' | translate }}</span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{ node.property.keyPath?.join('.') || node.property?.name }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || node.property?.name }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || node.property.temporary) {\n            <div\n              class=\"m-l-8 showOnHover d-flex a-i-center j-c-end asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-l-32': !node.property.temporary && config.allowAddingCustomProperties,\n                'has-computed': node.property.computed && node.property.config\n              }\"\n            >\n              @if (node.property.computed && node.property.config) {\n                <button\n                  class=\"btn btn-dot m-l-auto\"\n                  title=\"{{ 'Configure' | translate }}\"\n                  (click)=\"editProperty(node.property)\"\n                >\n                  <i [c8yIcon]=\"'cog'\"></i>\n                </button>\n              }\n              @if (node.property.temporary) {\n                <button\n                  class=\"btn btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"{{ 'Remove' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ 'm-l-auto': !node.property.computed || !node.property.config }\"\n                  [delay]=\"500\"\n                  (click)=\"removeProperty(node.property)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n              <ng-container\n                *ngTemplateOutlet=\"\n                  assetPropertyAction?.template;\n                  context: {\n                    $implicit: node.property\n                  }\n                \"\n              ></ng-container>\n            </div>\n          }\n        </div>\n      </cdk-tree-node>\n    </cdk-tree>\n  } @else {\n    <c8y-ui-empty-state\n      icon=\"list\"\n      title=\"{{ 'No properties to display' | translate }}\"\n      subtitle=\"{{ 'Select an asset to see the available properties.' | translate }}\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n  @if (config.allowAddingCustomProperties) {\n    <div class=\"sticky-bottom bg-inherit separator-top p-16\">\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        (click)=\"addProperty()\"\n        data-cy=\"asset-property-item-add-button\"\n      >\n        <i [c8yIcon]=\"'plus'\"></i>\n        {{ 'Add property' | translate }}\n      </button>\n    </div>\n  }\n</div>\n" }]
+                    ], 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 || config.allowAddingCustomProperties) {\n            <div\n              class=\"m-l-8 p-l-24 asset-property-list__actions\"\n              [ngClass]=\"{\n                'p-r-40': config.allowAddingCustomProperties,\n                'p-r-8': !config.allowAddingCustomProperties\n              }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (dataSource.data.length) {\n    <cdk-tree\n      role=\"presentation\"\n      #tree\n      [dataSource]=\"dataSource\"\n      [levelAccessor]=\"getLevel\"\n      cdkDropList\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListDisabled]=\"!config.allowDragAndDrop || dataSource.data.length < 2\"\n    >\n      <!-- Tree Node Definition -->\n      <cdk-tree-node\n        class=\"c8y-list__item--dense\"\n        [attr.tabindex]=\"0\"\n        [attr.aria-level]=\"getLevel(node) + 1\"\n        [attr.aria-expanded]=\"hasChild(node) ? isNodeExpanded(node) : null\"\n        [attr.aria-selected]=\"config.selectMode !== 'none' ? node.property.active : null\"\n        role=\"treeitem\"\n        *cdkTreeNodeDef=\"let node\"\n        cdkTreeNodePadding\n        [cdkTreeNodePaddingIndent]=\"TREE_NODE_INDENT\"\n        [ngClass]=\"{\n          nonCollapsible: config.expansionMode === 'nonCollapsible',\n          nonSelectable: config.selectMode === 'none'\n        }\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n        [cdkDragDisabled]=\"cdkDragDisabled\"\n      >\n        <div class=\"d-flex p-relative overflow-visible bg-inherit fit-h\">\n          @if (config.allowDragAndDrop && dataSource.data.length > 1) {\n            <div\n              class=\"drag-handle-wrapper\"\n              [ngClass]=\"{ 'drag-handle-disabled': cdkDragDisabled }\"\n            >\n              <button\n                class=\"drag-handle btn-clean\"\n                [title]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                [attr.aria-label]=\"\n                  (cdkDragDisabled ? dragHandleDisabledLabel : dragHandleEnabledLabel) | translate\n                \"\n                tabindex=\"-1\"\n                type=\"button\"\n                [disabled]=\"cdkDragDisabled\"\n              >\n                <i [c8yIcon]=\"'drag-reorder'\"></i>\n              </button>\n            </div>\n          }\n          <!-- Toggle Button for expandable nodes -->\n          @if (config.expansionMode !== 'nonCollapsible' && hasChild(node)) {\n            @let collapseButtonTitle =\n              isNodeExpanded(node) | c8yAssetPropertyCollapseButtonTitle: node;\n            <button\n              class=\"collapse-btn btn-dot flex-no-shrink\"\n              [title]=\"collapseButtonTitle\"\n              [attr.aria-label]=\"collapseButtonTitle\"\n              [attr.aria-expanded]=\"isNodeExpanded(node)\"\n              type=\"button\"\n              (click)=\"toggleNode(node)\"\n              [ngClass]=\"{ active: isNodeExpanded(node) }\"\n            >\n              <i [c8yIcon]=\"'chevron-right'\"></i>\n            </button>\n          }\n          <!-- Placeholder for non-expandable nodes to maintain alignment -->\n          @if (!hasChild(node) || config.expansionMode === 'nonCollapsible') {\n            <div\n              class=\"flex-no-shrink\"\n              [ngClass]=\"{\n                'p-r-40': config.expansionMode !== 'nonCollapsible',\n                'p-r-8': config.expansionMode === 'nonCollapsible'\n              }\"\n            ></div>\n          }\n          <!-- Selection Controls -->\n          @if (config.selectMode !== 'none') {\n            <div class=\"d-contents\">\n              @if (config.selectMode === 'single') {\n                <c8y-list-item-radio\n                  class=\"p-l-4 p-r-4\"\n                  type=\"radio\"\n                  [selected]=\"node.property.active\"\n                  (onSelect)=\"onSelectSingle($event, node)\"\n                ></c8y-list-item-radio>\n              } @else if (config.selectMode === 'multi') {\n                <c8y-list-item-checkbox\n                  class=\"p-l-4 p-r-4\"\n                  [ngModel]=\"node.property.active\"\n                  [indeterminate]=\"node.indeterminate\"\n                  (onSelect)=\"onSelectMulti($event, node)\"\n                ></c8y-list-item-checkbox>\n              } @else if (config.selectMode === 'plus') {\n                @if (node.property.active) {\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Remove' | translate\"\n                    [tooltip]=\"'Remove from selected properties' | translate\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(false, node)\"\n                  >\n                    <i\n                      class=\"icon-20\"\n                      c8yIcon=\"minus-circle\"\n                    ></i>\n                  </button>\n                }\n                @if (!node.property.active) {\n                  <button\n                    class=\"btn btn-dot text-primary m-l-4 m-r-4 p-relative a-s-center\"\n                    style=\"z-index: 5\"\n                    [attr.aria-label]=\"'Add to selected properties' | translate\"\n                    [tooltip]=\"\n                      (node.property.config\n                        ? 'Add to selected properties (requires configuration)'\n                        : 'Add to selected properties'\n                      ) | translate\n                    \"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"onSelectMulti(true, node)\"\n                  >\n                    <i\n                      class=\"text-primary icon-20\"\n                      [c8yIcon]=\"node.property.config ? 'plus-circle-o' : 'plus-circle'\"\n                    ></i>\n                  </button>\n                }\n              }\n            </div>\n          }\n          <div class=\"content-flex-30 fit-w bg-inherit m-0 min-width-0\">\n            <div\n              class=\"d-flex a-i-center bg-inherit m-0 flex-grow\"\n              [style.max-width]=\"getColumnMaxWidth(node)\"\n            >\n              <c8y-li-icon\n                class=\"p-r-4 p-l-4\"\n                [icon]=\"node.property | c8yAssetPropertyIcon\"\n                tooltip=\"{{ node.property | c8yAssetPropertyIconTooltip }}\"\n                container=\"body\"\n                [delay]=\"500\"\n                [ngClass]=\"{\n                  'p-l-4': config.selectMode !== 'none',\n                  'p-l-8': config.selectMode === 'none'\n                }\"\n              ></c8y-li-icon>\n\n              <span class=\"p-r-8 min-width-0 d-flex a-i-center\">\n                @if (isContextMismatch(node)) {\n                  @let tooltipText =\n                    'Property configured for a different asset. Reconfigure to match current asset.'\n                      | translate;\n                  <button\n                    class=\"btn-clean m-r-4\"\n                    [attr.aria-label]=\"tooltipText\"\n                    [tooltip]=\"tooltipText\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [container]=\"'body'\"\n                  >\n                    <i\n                      class=\"status critical stroked-icon\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                  </button>\n                }\n\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{\n                    node.property.label || node.property.title || node.property.name | translate\n                  }}\"\n                  [ngClass]=\"{\n                    'text-muted': node.property.temporary,\n                    'text-danger': isContextMismatch(node)\n                  }\"\n                >\n                  {{ node.property.label || node.property.title || node.property.name | translate }}\n                </div>\n              </span>\n            </div>\n            @if (config.showKey) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showValue, 'col-6': !config.showValue }\"\n              >\n                <span\n                  class=\"d-inline-block tag tag--default a-s-center text-truncate\"\n                  title=\"{{ node.property.keyPath?.join('.') || node.property?.name }}\"\n                >\n                  {{ node.property.keyPath?.join('.') || node.property?.name }}\n                </span>\n              </div>\n            }\n            @if (asset && config.showValue) {\n              <div\n                class=\"d-flex a-i-center\"\n                [ngClass]=\"{ 'col-3': config.showKey, 'col-6': !config.showKey }\"\n              >\n                @let value = node.property | c8yAssetPropertyValue: asset | async;\n                <span\n                  class=\"tag tag--info d-inline-block a-s-center text-truncate\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </span>\n              </div>\n            }\n          </div>\n          @if (assetPropertyAction || config.allowAddingCustomProperties) {\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-24 p-r-40':\n                  !node.property.temporary &&\n                  config.allowAddingCustomProperties &&\n                  !assetPropertyAction,\n                'p-l-32':\n                  node.property.temporary &&\n                  config.allowAddingCustomProperties &&\n                  !node.property.computed,\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: [{