@c8y/ngx-components 1023.4.6 → 1023.6.3

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

@@ -737,10 +737,10 @@ class ComputedPropertiesService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComputedPropertiesService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComputedPropertiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComputedPropertiesService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComputedPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComputedPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComputedPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1077,10 +1077,10 @@ class AssetPropertiesService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1112,10 +1112,10 @@ class AssetPropertyActionDirective {
         this.elementRef = elementRef;
         this.viewContainer = viewContainer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyActionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyActionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AssetPropertyActionDirective, isStandalone: true, selector: "[c8yAssetPropertyAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yAssetPropertyAction]',
@@ -1175,10 +1175,10 @@ class AssetPropertyValuePipe {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyValuePipe, isStandalone: true, name: "c8yAssetPropertyValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyValue',
@@ -1218,10 +1218,10 @@ class AssetPropertyIconPipe {
                 return 'mix-words';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyIconPipe, isStandalone: true, name: "c8yAssetPropertyIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyIcon',
@@ -1251,10 +1251,10 @@ class AssetPropertyIconTooltipPipe {
             return property.type;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyIconTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyIconTooltipPipe, isStandalone: true, name: "c8yAssetPropertyIconTooltip" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyIconTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyIconTooltipPipe, isStandalone: true, name: "c8yAssetPropertyIconTooltip" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyIconTooltipPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyIconTooltipPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyIconTooltip',
@@ -1382,10 +1382,10 @@ class ComputedPropertiesConfigComponent {
         }
         return of(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComputedPropertiesConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: ComputedPropertiesConfigComponent, isStandalone: true, selector: "c8y-computed-properties-config", inputs: { properties: "properties", definitions: "definitions", asset: "asset" }, viewQueries: [{ propertyName: "hosts", predicate: ["host"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "configForms", predicate: ["configForm"], descendants: true, read: NgForm, isSignal: true }], ngImport: i0, template: "<div class=\"viewport-modal has-asset-selector\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'bolt'\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"modal-title\"\n      translate\n    >\n      Configure computed properties\n    </div>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <p\n      class=\"p-t-16 p-l-24 p-r-24 p-b-16 bg-component separator-bottom sticky-top text-center text-balance\"\n      translate\n    >\n      Configure the settings below for each computed property. These configurations determine how\n      the properties will be calculated and displayed. All required fields must be completed before\n      you can apply the changes.\n    </p>\n    <div class=\"p-24 p-t-0\">\n      <fieldset\n        class=\"property-config-section c8y-fieldset p-b-8\"\n        *ngFor=\"let propertyConfig of propertyConfigs; let i = index\"\n      >\n        <legend>\n          {{ (propertyConfig.property.label || propertyConfig.property.name) | translate }}\n          <span class=\"a-s-center m-l-8 tag tag--default\">{{ propertyConfig.property.name }}</span>\n        </legend>\n        <form\n          class=\"property-config-form\"\n          name=\"configForm{{ i }}\"\n          #configForm=\"ngForm\"\n        >\n          <ng-template #host></ng-template>\n        </form>\n      </fieldset>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Apply' | translate\"\n      type=\"button\"\n      (click)=\"apply()\"\n      [disabled]=\"!isFormValid\"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComputedPropertiesConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: ComputedPropertiesConfigComponent, isStandalone: true, selector: "c8y-computed-properties-config", inputs: { properties: "properties", definitions: "definitions", asset: "asset" }, viewQueries: [{ propertyName: "hosts", predicate: ["host"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "configForms", predicate: ["configForm"], descendants: true, read: NgForm, isSignal: true }], ngImport: i0, template: "<div class=\"viewport-modal has-asset-selector\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'bolt'\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"modal-title\"\n      translate\n    >\n      Configure computed properties\n    </div>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <p\n      class=\"p-t-16 p-l-24 p-r-24 p-b-16 bg-component separator-bottom sticky-top text-center text-balance\"\n      translate\n    >\n      Configure the settings below for each computed property. These configurations determine how\n      the properties will be calculated and displayed. All required fields must be completed before\n      you can apply the changes.\n    </p>\n    <div class=\"p-24 p-t-0\">\n      <fieldset\n        class=\"property-config-section c8y-fieldset p-b-8\"\n        *ngFor=\"let propertyConfig of propertyConfigs; let i = index\"\n      >\n        <legend>\n          {{ (propertyConfig.property.label || propertyConfig.property.name) | translate }}\n          <span class=\"a-s-center m-l-8 tag tag--default\">{{ propertyConfig.property.name }}</span>\n        </legend>\n        <form\n          class=\"property-config-form\"\n          name=\"configForm{{ i }}\"\n          #configForm=\"ngForm\"\n        >\n          <ng-template #host></ng-template>\n        </form>\n      </fieldset>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Apply' | translate\"\n      type=\"button\"\n      (click)=\"apply()\"\n      [disabled]=\"!isFormValid\"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ComputedPropertiesConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComputedPropertiesConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-computed-properties-config', standalone: true, imports: [C8yTranslatePipe, IconDirective, FormsModule, NgFor], template: "<div class=\"viewport-modal has-asset-selector\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'bolt'\"></i>\n    <div\n      class=\"modal-title\"\n      id=\"modal-title\"\n      translate\n    >\n      Configure computed properties\n    </div>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <p\n      class=\"p-t-16 p-l-24 p-r-24 p-b-16 bg-component separator-bottom sticky-top text-center text-balance\"\n      translate\n    >\n      Configure the settings below for each computed property. These configurations determine how\n      the properties will be calculated and displayed. All required fields must be completed before\n      you can apply the changes.\n    </p>\n    <div class=\"p-24 p-t-0\">\n      <fieldset\n        class=\"property-config-section c8y-fieldset p-b-8\"\n        *ngFor=\"let propertyConfig of propertyConfigs; let i = index\"\n      >\n        <legend>\n          {{ (propertyConfig.property.label || propertyConfig.property.name) | translate }}\n          <span class=\"a-s-center m-l-8 tag tag--default\">{{ propertyConfig.property.name }}</span>\n        </legend>\n        <form\n          class=\"property-config-form\"\n          name=\"configForm{{ i }}\"\n          #configForm=\"ngForm\"\n        >\n          <ng-template #host></ng-template>\n        </form>\n      </fieldset>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Apply' | translate\"\n      type=\"button\"\n      (click)=\"apply()\"\n      [disabled]=\"!isFormValid\"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { properties: [{
@@ -1417,10 +1417,10 @@ class AssetPropertyCollapseButtonTitlePipe {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, isStandalone: true, name: "c8yAssetPropertyCollapseButtonTitle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, isStandalone: true, name: "c8yAssetPropertyCollapseButtonTitle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyCollapseButtonTitlePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c8yAssetPropertyCollapseButtonTitle',
@@ -1707,10 +1707,10 @@ class AssetPropertyDragDropService {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyDragDropService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyDragDropService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyDragDropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyDragDropService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2576,10 +2576,10 @@ class AssetPropertyListComponent {
         const { computed, simple, complex } = this.assetPropertiesService.categorizeAndFlattenHierarchicalProperties(properties);
         return [...computed, ...simple, ...complex];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 class=\"select-all-container bg-inherit sticky-top separator-bottom\">\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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AssetPropertyListComponent, isStandalone: true, selector: "c8y-asset-property-list", inputs: { config: "config", asset: "asset", extraProperties: "extraProperties" }, outputs: { selectedProperties: "selectedProperties" }, queries: [{ propertyName: "assetPropertyAction", first: true, predicate: AssetPropertyActionDirective, descendants: true }], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tree-container bg-inherit\"\n  [attr.aria-label]=\"'Asset property list' | translate\"\n  role=\"tree\"\n>\n  @if (config.showHeader || config.filterable) {\n    <div class=\"select-all-container bg-inherit sticky-top separator-bottom\">\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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertyListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-list', standalone: true, imports: [
                         NgClass,
@@ -2780,10 +2780,10 @@ 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.3", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", inputs: { title: "title" }, outputs: { savePropertySelection: "savePropertySelection", cancelPropertySelection: "cancelPropertySelection" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"form-group m-b-8 p-16 d-flex\">\n  <div class=\"input-group input-group-search\">\n    <input\n      class=\"form-control\"\n      [attr.aria-label]=\"'Search properties' | translate\"\n      placeholder=\"{{ 'Search properties' | translate }}\"\n      role=\"searchbox\"\n      type=\"search\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"inputText\"\n      (input)=\"onSearch()\"\n      #filter\n    />\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length === 0\"\n    >\n      <i\n        class=\"dlt-c8y-icon-search\"\n        [c8yIcon]=\"'search'\"\n      ></i>\n    </span>\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length > 0\"\n    >\n      <i\n        class=\"text-muted dlt-c8y-icon-times\"\n        [c8yIcon]=\"'times'\"\n        [attr.aria-label]=\"'Clear search' | translate\"\n        tabindex=\"0\"\n        role=\"button\"\n        (click)=\"clearSearch()\"\n      ></i>\n    </span>\n  </div>\n</div>\n\n<c8y-tabs-outlet\n  class=\"elevation-none m-b-16\"\n  outletName=\"assetPropertiesDrawerTabs\"\n  orientation=\"horizontal\"\n></c8y-tabs-outlet>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'regular'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"1000\"\n  (onSelect)=\"onTabChange('regular')\"\n>\n  <i [c8yIcon]=\"'c8y-css'\"></i>\n  <span>\n    {{ tabNames.regular | translate }}\n    <span aria-live=\"assertive\" class=\"m-l-4 badge badge-default flex-no-shrink\">\n      {{ regularCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'computed'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"900\"\n  (onSelect)=\"onTabChange('computed')\"\n>\n  <i [c8yIcon]=\"'bolt'\"></i>\n  <span>\n    {{ tabNames.computed | translate }}\n    <span class=\"m-l-4 badge badge-default flex-no-shrink\" aria-live=\"assertive\">\n      {{ computedCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"displayedProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  <c8y-load-more\n    *ngIf=\"selectedTab === 'regular'\"\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "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.15", ngImport: i0, type: CustomPropertiesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CustomPropertiesDrawerComponent, isStandalone: true, selector: "c8y-custom-properties-drawer-component", inputs: { title: "title" }, outputs: { savePropertySelection: "savePropertySelection", cancelPropertySelection: "cancelPropertySelection" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"form-group m-b-8 p-16 d-flex\">\n  <div class=\"input-group input-group-search\">\n    <input\n      class=\"form-control\"\n      [attr.aria-label]=\"'Search properties' | translate\"\n      placeholder=\"{{ 'Search properties' | translate }}\"\n      role=\"searchbox\"\n      type=\"search\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"inputText\"\n      (input)=\"onSearch()\"\n      #filter\n    />\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length === 0\"\n    >\n      <i\n        class=\"dlt-c8y-icon-search\"\n        [c8yIcon]=\"'search'\"\n      ></i>\n    </span>\n    <span\n      class=\"input-group-addon\"\n      [attr.aria-hidden]=\"true\"\n      *ngIf=\"filter.value.length > 0\"\n    >\n      <i\n        class=\"text-muted dlt-c8y-icon-times\"\n        [c8yIcon]=\"'times'\"\n        [attr.aria-label]=\"'Clear search' | translate\"\n        tabindex=\"0\"\n        role=\"button\"\n        (click)=\"clearSearch()\"\n      ></i>\n    </span>\n  </div>\n</div>\n\n<c8y-tabs-outlet\n  class=\"elevation-none m-b-16\"\n  outletName=\"assetPropertiesDrawerTabs\"\n  orientation=\"horizontal\"\n></c8y-tabs-outlet>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'regular'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"1000\"\n  (onSelect)=\"onTabChange('regular')\"\n>\n  <i [c8yIcon]=\"'c8y-css'\"></i>\n  <span>\n    {{ tabNames.regular | translate }}\n    <span aria-live=\"assertive\" class=\"m-l-4 badge badge-default flex-no-shrink\">\n      {{ regularCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<c8y-tab\n  [isActive]=\"selectedTab === 'computed'\"\n  [tabsOutlet]=\"'assetPropertiesDrawerTabs'\"\n  [priority]=\"900\"\n  (onSelect)=\"onTabChange('computed')\"\n>\n  <i [c8yIcon]=\"'bolt'\"></i>\n  <span>\n    {{ tabNames.computed | translate }}\n    <span class=\"m-l-4 badge badge-default flex-no-shrink\" aria-live=\"assertive\">\n      {{ computedCount }}\n    </span>\n  </span>\n</c8y-tab>\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [config]=\"config\"\n    [extraProperties]=\"displayedProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n  <c8y-load-more\n    *ngIf=\"selectedTab === 'regular'\"\n    [paging]=\"paging\"\n    [useIntersection]=\"true\"\n    (onLoad)=\"loadMore()\"\n  ></c8y-load-more>\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "component", type: LoadMoreComponent, selector: "c8y-load-more", inputs: ["paging", "useIntersection", "hidden", "container", "class", "maxIterations", "noMoreDataHint", "loadingTemplate", "hideNoMoreDataHint", "loadNextLabel", "loadingLabel"], outputs: ["onLoad"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "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.3", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomPropertiesDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-custom-properties-drawer-component', host: {
                         class: 'd-contents'
@@ -2827,10 +2827,10 @@ class CustomPropertiesDrawerService {
             return [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CustomPropertiesDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CustomPropertiesDrawerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomPropertiesDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomPropertiesDrawerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CustomPropertiesDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomPropertiesDrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2902,10 +2902,10 @@ class AssetPropertySelectorDrawerComponent {
     selectIsDisabled() {
         return this.selectedProperties?.every(({ active }) => !active);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertySelectorDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AssetPropertySelectorDrawerComponent, isStandalone: true, selector: "c8y-asset-property-selector-drawer-component", inputs: { title: "title" }, outputs: { savePropertySelection: "savePropertySelection", cancelPropertySelection: "cancelPropertySelection" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header separator\">\n  <span class=\"h4 card-title\">{{ title | translate }}</span>\n</div>\n\n<div class=\"inner-scroll flex-grow\">\n  <c8y-asset-property-list\n    class=\"bg-component\"\n    [asset]=\"asset\"\n    [config]=\"config\"\n    [extraProperties]=\"extraProperties\"\n    (selectedProperties)=\"onSelectedProperties($event)\"\n  ></c8y-asset-property-list>\n</div>\n\n<div class=\"card-footer text-center p-24 separator flex-no-shrink\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel()\"\n  >\n    {{ 'Cancel' | translate }}\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Select' | translate }}\"\n    type=\"button\"\n    [disabled]=\"selectIsDisabled()\"\n    (click)=\"onSave()\"\n  >\n    {{ 'Select' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetPropertySelectorDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-property-selector-drawer-component', host: {
                         class: 'd-contents'