@c8y/ngx-components 1023.62.2 → 1023.63.0

package/fesm2022/c8y-ngx-components-widgets-implementations-asset-table.mjs

@@ -1,36 +1,40 @@
 import { NgTemplateOutlet, AsyncPipe, CommonModule as CommonModule$1, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, runInInjectionContext, inject, computed, ChangeDetectionStrategy, Injectable, EventEmitter, ViewChild, Output, Input } from '@angular/core';
+import { Component, runInInjectionContext, inject, computed, ChangeDetectionStrategy, Injectable, EventEmitter, ViewChild, Output, Input, DestroyRef } from '@angular/core';
 import * as i2$2 from '@angular/forms';
 import { FormGroup, FormBuilder, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@c8y/client';
 import { OperationService, InventoryService, QueriesUtil } from '@c8y/client';
 import * as i1 from '@c8y/ngx-components';
-import { DatePipe, BaseColumn, CustomColumn, IconDirective, AlertService, CellRendererContext, CommonModule, IntervalBasedReload, DEFAULT_INTERVAL_VALUES, WIDGET_TYPE_VALUES, CoreModule, CountdownIntervalComponent, ManagedObjectRealtimeService, WidgetGlobalAutoRefreshService, globalAutoRefreshLoading, ModalModule, SelectModule, DateTimePickerModule, C8yTranslateModule, DropdownFocusTrapDirective, EmptyStateComponent, ListGroupModule, C8yTranslatePipe, HumanizePipe } from '@c8y/ngx-components';
+import { DatePipe, BaseColumn, CustomColumn, IconDirective, AlertService, CellRendererContext, CommonModule, IntervalBasedReload, DEFAULT_INTERVAL_VALUES, WIDGET_TYPE_VALUES, CoreModule, CountdownIntervalComponent, ManagedObjectRealtimeService, WidgetGlobalAutoRefreshService, globalAutoRefreshLoading, ModalModule, SelectModule, DateTimePickerModule, C8yTranslateModule, BottomDrawerService, DropdownFocusTrapDirective, EmptyStateComponent, ListGroupModule, C8yTranslatePipe, HumanizePipe } from '@c8y/ngx-components';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { WidgetConfigService, ContextDashboardService } from '@c8y/ngx-components/context-dashboard';
 import { from, switchMap, isObservable, of, map, tap, BehaviorSubject, Subject, merge, startWith, scan, distinctUntilChanged, shareReplay, takeUntil, skip } from 'rxjs';
 import { transform, identity, get, assign } from 'lodash';
 import * as i2 from '@c8y/ngx-components/device-grid';
-import { AlarmsDeviceGridColumn, StatusDeviceGridColumn } from '@c8y/ngx-components/device-grid';
+import { AlarmsDeviceGridColumn } from '@c8y/ngx-components/device-grid';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i2$1 from '@c8y/ngx-components/asset-properties';
-import { AssetPropertyListComponent } from '@c8y/ngx-components/asset-properties';
+import { AssetPropertySelectorDrawerComponent } from '@c8y/ngx-components/asset-properties';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
+import { AssetTypeGridColumn } from '@c8y/ngx-components/data-grid-columns';
 import * as i3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { isEqual } from 'lodash-es';
-import { RouterModule } from '@angular/router';
+import * as i3$1 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
+import { RouterModule } from '@angular/router';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
-import * as i3$2 from 'ngx-bootstrap/dropdown';
+import * as i3$3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import * as i4 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import * as i3$1 from '@c8y/ngx-components/icon-selector';
+import * as i3$2 from '@c8y/ngx-components/icon-selector';
 import { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
+import { DeviceShellService } from '@c8y/ngx-components/device-shell';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class DateCellRendererComponent {
     constructor(context, columnUtilService) {
@@ -501,7 +505,8 @@ class ComputedCellRendererComponent {
         this.computedValue = this.getCallbackComputedPropertyValue(this.context.property, this.context.item).pipe(map(value => (typeof value === 'object' && value !== null ? JSON.stringify(value) : value)));
     }
     getCallbackComputedPropertyValue(property, context) {
-        return from(this.computedPropertyService.getByName(property.name)).pipe(switchMap(definition => {
+        const propertyName = property.computedConfig?.__propertyName || property.name;
+        return from(this.computedPropertyService.getByName(propertyName)).pipe(switchMap(definition => {
             let value = '-';
             runInInjectionContext(definition.injector, () => {
                 if (this.context?.property.computedConfig?.dp?.length > 0) {
@@ -611,9 +616,11 @@ class AssetTableService {
         const opColumns = this.buildOperationColumns(operationColumns);
         let allColumns = [...propertyColumns, ...opColumns];
         if (config?.showStatusIcon) {
-            const statusCol = new StatusDeviceGridColumn();
+            const statusCol = new AssetTypeGridColumn();
+            statusCol.name = '__status';
             statusCol.__origin = 'status';
             statusCol.__id = 'status';
+            statusCol.header = gettext('Status');
             allColumns = [statusCol, ...allColumns];
         }
         return this.applySortingAndOrdering(allColumns, config);
@@ -672,10 +679,14 @@ class AssetTableService {
             withTotalPages: true
         });
     }
-    migrateLegacyProperties(config) {
+    async migrateLegacyProperties(config) {
         if (!config?.options?.properties) {
             return config;
         }
+        if (config.device) {
+            config.device = { ...(await this.inventoryService.detail(config.device.id)).data };
+            config.isDeviceAssetSelected = 'c8y_IsDevice' in config.device;
+        }
         const selectedProperties = [];
         const operationColumns = [];
         for (const prop of config.options.properties) {
@@ -880,8 +891,15 @@ class AssetTableService {
                 ? config.showAsLink
                 : false;
             const column = this.createPropertyColumn(prop, columnType, isLink, config);
+            const uniqueName = prop.instanceId || prop.name || prop.title;
+            if (prop.instanceId) {
+                column.name = uniqueName;
+                if (column.computedConfig) {
+                    column.computedConfig.__propertyName = prop.name;
+                }
+            }
             column.__origin = 'selectedProperties';
-            column.__id = prop.name || prop.title;
+            column.__id = uniqueName;
             return column;
         });
     }
@@ -890,13 +908,13 @@ class AssetTableService {
             case 'alarm':
                 return new AlarmsDeviceGridColumnExtended({
                     name: prop.name || prop.title,
-                    header: prop.label || prop.title,
+                    header: prop.columnLabel || prop.label || prop.title,
                     visible: prop.visible ?? true
                 });
             case 'date':
                 return new DateAssetTableGridColumn({
                     name: prop.name || prop.title,
-                    header: prop.label || prop.title,
+                    header: prop.columnLabel || prop.label || prop.title,
                     visible: prop.visible ?? true,
                     path: prop.name || prop.keyPath,
                     sortOrder: prop.sortOrder ?? null
@@ -905,7 +923,7 @@ class AssetTableService {
                 return new IconAssetTableGridColumn({
                     name: prop.name || prop.title,
                     path: prop.keyPath || prop.name,
-                    header: prop.label || prop.title,
+                    header: prop.columnLabel || prop.label || prop.title,
                     iconConfig: prop.iconConfig || {},
                     computedConfig: prop.computed ? prop.config || {} : null,
                     showIconAndValue: config?.showIconAndValue,
@@ -914,7 +932,7 @@ class AssetTableService {
             case 'computed':
                 return new ComputedAssetTableGridColumn({
                     name: prop.name || prop.title,
-                    header: prop.label || prop.title,
+                    header: prop.columnLabel || prop.label || prop.title,
                     computedConfig: prop.config || {},
                     visible: prop.visible ?? true,
                     sortOrder: prop.sortOrder ?? null
@@ -923,7 +941,7 @@ class AssetTableService {
             default:
                 return new DefaultAssetTableGridColumn({
                     name: prop.name || prop.title,
-                    header: prop.label || prop.title,
+                    header: prop.columnLabel || prop.label || prop.title,
                     custom: true,
                     isLink,
                     type: 'default',
@@ -1273,6 +1291,8 @@ class AssetTableWidgetConfigComponent {
          * Current isLoading state. Based on it next countdown cycle is being started.
          */
         this.isLoading$ = new BehaviorSubject(false);
+        this.includeDescendantsTooltip = gettext('When enabled, all assets in the hierarchy under the selected asset will be included. When disabled, only the direct child assets will be included.');
+        this.initializedContext = false; // used to track when context was removed on purpose to show all assets.
         this.destroy$ = new Subject();
         this.formBuilder = inject(FormBuilder);
         this.assetTableService = inject(AssetTableService);
@@ -1289,8 +1309,21 @@ class AssetTableWidgetConfigComponent {
         this.setupGridHeaderFilterDependency();
         const mergedConfig$ = merge(this.widgetConfigService.currentConfig$, this.formGroup.valueChanges).pipe(startWith(this.formGroup.getRawValue()), scan((acc, value) => ({ ...acc, ...value }), {}), distinctUntilChanged((a, b) => isEqual(a, b)), shareReplay(1));
         mergedConfig$.pipe(takeUntil(this.destroy$)).subscribe(config => {
-            if (!config.device && config.settings?.context) {
-                config.device = { ...config.settings.context };
+            if (!config.device && config.settings?.context && !this.initializedContext) {
+                const updatedDevice = { ...config.settings.context };
+                this.initializedContext = true;
+                this.widgetConfigService.updateConfig({
+                    device: updatedDevice
+                });
+                config = { ...config, device: updatedDevice };
+            }
+            else if (config.device) {
+                this.initializedContext = true;
+            }
+            if (config.showStatusIcon !== this.config?.showStatusIcon) {
+                this.widgetConfigService.updateConfig({
+                    showStatusIcon: config.showStatusIcon
+                });
             }
             this.config = config;
             this.columns = this.getColumns(config);
@@ -1426,12 +1459,12 @@ class AssetTableWidgetConfigComponent {
             filterPredicate: [],
             showIconAndValue: [true],
             showAsLink: [false],
-            includeDescendants: [true],
+            includeDescendants: [false],
             showStatusIcon: [true]
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetTableWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AssetTableWidgetConfigComponent, isStandalone: true, selector: "c8y-asset-table-widget-config", providers: [ManagedObjectRealtimeService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["assetTablePreview"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Date' | translate }}</legend>\n    <div class=\"row tight-grid\">\n      <c8y-form-group class=\"m-b-16 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n              [(ngModel)]=\"refreshOption\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (change)=\"updateRefreshOption()\"\n            >\n              <option\n                [title]=\"'Refreshing after the given interval' | translate\"\n                value=\"interval\"\n              >\n                {{ 'Use refresh interval' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                value=\"global-interval\"\n              >\n                {{ 'Use global refresh interval' | translate }}\n              </option>\n            </select>\n          </div>\n          @if (formGroup?.controls?.refreshOption?.value !== GLOBAL_INTERVAL_OPTION) {\n            <div\n              class=\"c8y-select-wrapper grow flex-no-shrink\"\n              title=\" {{ 'Interval' | translate }}\"\n            >\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n                data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n              >\n                @for (refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS; track refreshInterval) {\n                  <option [value]=\"refreshInterval\">\n                    {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                  </option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display options' | translate }}</legend>\n    <div formGroupName=\"displayOptions\">\n      <!-- Data options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Data' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\"\n          [formGroup]=\"formGroup\"\n        >\n          <!-- hierarchical data -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show assets and all descendants' | translate\"\n          >\n            <input\n              name=\"includeDescendants\"\n              type=\"checkbox\"\n              formControlName=\"includeDescendants\"\n            />\n            <span></span>\n            <span translate>Include descendants</span>\n          </label>\n          <!-- Status icon -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show status icon column' | translate\"\n          >\n            <input\n              name=\"showStatusIcon\"\n              type=\"checkbox\"\n              formControlName=\"showStatusIcon\"\n            />\n            <span></span>\n            <span translate>Show status icon column</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <!-- Header options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Header' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\">\n          <!-- grid header -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Display the data grid header' | translate\"\n          >\n            <input\n              name=\"gridHeader\"\n              type=\"checkbox\"\n              formControlName=\"gridHeader\"\n            />\n            <span></span>\n            <span translate>Table header</span>\n          </label>\n          <!-- show filter label -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display applied filters in the header' | translate\"\n          >\n            <input\n              name=\"filter\"\n              type=\"checkbox\"\n              formControlName=\"filter\"\n            />\n            <span></span>\n            <span translate>Active filters</span>\n          </label>\n          <!-- enable configurable columns -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display columns configuration button' | translate\"\n          >\n            <input\n              name=\"configurableColumnsEnabled\"\n              type=\"checkbox\"\n              formControlName=\"configurableColumnsEnabled\"\n            />\n            <span></span>\n            <span translate>Configure columns</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Row options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Row' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 d-flex-md gap-16 flex-wrap form-group-sm\">\n          <!-- zebra stripes -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Alternate row background for readability' | translate\"\n          >\n            <input\n              name=\"striped\"\n              type=\"checkbox\"\n              formControlName=\"striped\"\n            />\n            <span></span>\n            <span translate>Striped rows</span>\n          </label>\n          <!-- hover effect -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Change row background color on hover' | translate\"\n          >\n            <input\n              name=\"hover\"\n              type=\"checkbox\"\n              formControlName=\"hover\"\n            />\n            <span></span>\n            <span translate>Hover highlight</span>\n          </label>\n          <!-- show loading indicator -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show a spinner while data loads' | translate\"\n          >\n            <input\n              name=\"showLoadingIndicator\"\n              type=\"checkbox\"\n              formControlName=\"showLoadingIndicator\"\n            />\n            <span></span>\n            <span translate>Loading indicator</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Cell options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Cell' | translate }}</legend>\n        <div class=\"d-flex-md gap-16 flex-wrap m-b-8\">\n          <!-- cell borders (inside displayOptions) -->\n          <c8y-form-group class=\"m-b-0 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Draw borders around table cells' | translate\"\n            >\n              <input\n                name=\"bordered\"\n                type=\"checkbox\"\n                formControlName=\"bordered\"\n              />\n              <span></span>\n              <span translate>Cell borders</span>\n            </label>\n          </c8y-form-group>\n          <!-- Cell content options (outside displayOptions formGroup, at root form level) -->\n          <c8y-form-group\n            class=\"m-b-0 form-group-sm d-flex-md flex-wrap gap-16\"\n            [formGroup]=\"formGroup\"\n          >\n            <!-- show icon and value -->\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'When cell rendering is set to icon, show both icon and value' | translate\"\n            >\n              <input\n                name=\"showIconAndValue\"\n                type=\"checkbox\"\n                formControlName=\"showIconAndValue\"\n              />\n              <span></span>\n              <span translate>Icon with value</span>\n            </label>\n            <!-- show as link -->\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              [title]=\"\n                'Render the first column (excluding computed and alarm types) as a link to the asset details.'\n                  | translate\n              \"\n            >\n              <input\n                name=\"showAsLink\"\n                type=\"checkbox\"\n                formControlName=\"showAsLink\"\n              />\n              <span></span>\n              <span translate>First column link</span>\n            </label>\n          </c8y-form-group>\n        </div>\n      </fieldset>\n    </div>\n  </fieldset>\n</form>\n\n<ng-template #assetTablePreview>\n  @if (\n    !formGroup ||\n    columns?.length === 0 ||\n    ((config.selectedProperties?.length === 0 || config.selectedProperties === null) &&\n      (config.operationColumns?.length === 0 || config.operationColumns === null))\n  ) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No asset table' | translate\"\n      [subtitle]=\"'Add property' | translate\"\n    ></c8y-ui-empty-state>\n  } @else {\n    @if (!formGroup.controls.widgetInstanceGlobalTimeContext.value) {\n      <c8y-asset-table-auto-refresh\n        class=\"d-contents\"\n        [isIntervalRefresh]=\"!!formGroup.controls.refreshInterval.value\"\n        [refreshInterval]=\"formGroup.controls.refreshInterval.value\"\n        [config]=\"formGroup.value\"\n        [isRefreshDisabled]=\"false\"\n        [isLoading]=\"isLoading$\"\n        (onCountdownEnded)=\"updateSelectedAssets()\"\n      ></c8y-asset-table-auto-refresh>\n    }\n    <c8y-data-grid\n      class=\"content-fullpage d-flex d-col border-top border-bottom\"\n      [title]=\"title\"\n      [displayOptions]=\"formGroup.controls.displayOptions.value\"\n      [columns]=\"columns\"\n      [serverSideDataCallback]=\"serverSideDataCallback\"\n      [configureColumnsEnabled]=\"formGroup.get('displayOptions.configurableColumnsEnabled')?.value\"\n      [refresh]=\"refresh\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'search'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </c8y-data-grid>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "loading", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: AssetTableAutoRefreshComponent, selector: "c8y-asset-table-auto-refresh", inputs: ["config", "isIntervalRefresh", "refreshInterval", "isLoading", "isScrolling", "isRefreshDisabled"], outputs: ["onCountdownEnded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AssetTableWidgetConfigComponent, isStandalone: true, selector: "c8y-asset-table-widget-config", providers: [ManagedObjectRealtimeService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["assetTablePreview"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Date' | translate }}</legend>\n    <div class=\"row tight-grid\">\n      <c8y-form-group class=\"m-b-16 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n              [(ngModel)]=\"refreshOption\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (change)=\"updateRefreshOption()\"\n            >\n              <option\n                [title]=\"'Refreshing after the given interval' | translate\"\n                value=\"interval\"\n              >\n                {{ 'Use refresh interval' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                value=\"global-interval\"\n              >\n                {{ 'Use global refresh interval' | translate }}\n              </option>\n            </select>\n          </div>\n          @if (formGroup?.controls?.refreshOption?.value !== GLOBAL_INTERVAL_OPTION) {\n            <div\n              class=\"c8y-select-wrapper grow flex-no-shrink\"\n              title=\" {{ 'Interval' | translate }}\"\n            >\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n                data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n              >\n                @for (refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS; track refreshInterval) {\n                  <option [value]=\"refreshInterval\">\n                    {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                  </option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display options' | translate }}</legend>\n    <div formGroupName=\"displayOptions\">\n      <!-- Data options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Data' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\"\n          [formGroup]=\"formGroup\"\n        >\n          <!-- hierarchical data -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show assets and all descendants' | translate\"\n          >\n            <input\n              name=\"includeDescendants\"\n              type=\"checkbox\"\n              formControlName=\"includeDescendants\"\n            />\n            <span></span>\n            <span translate>Include descendants</span>\n            <button\n              class=\"btn-help m-l-8\"\n              [attr.aria-label]=\"includeDescendantsTooltip | translate\"\n              [popover]=\"includeDescendantsTooltip | translate\"\n              placement=\"top\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n            ></button>\n          </label>\n          <!-- Status icon -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show status icon column' | translate\"\n          >\n            <input\n              name=\"showStatusIcon\"\n              type=\"checkbox\"\n              formControlName=\"showStatusIcon\"\n            />\n            <span></span>\n            <span translate>Show status icon column</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <!-- Header options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Header' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\">\n          <!-- grid header -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Display the data grid header' | translate\"\n          >\n            <input\n              name=\"gridHeader\"\n              type=\"checkbox\"\n              formControlName=\"gridHeader\"\n            />\n            <span></span>\n            <span translate>Table header</span>\n          </label>\n          <!-- show filter label -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display applied filters in the header' | translate\"\n          >\n            <input\n              name=\"filter\"\n              type=\"checkbox\"\n              formControlName=\"filter\"\n            />\n            <span></span>\n            <span translate>Active filters</span>\n          </label>\n          <!-- enable configurable columns -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display columns configuration button' | translate\"\n          >\n            <input\n              name=\"configurableColumnsEnabled\"\n              type=\"checkbox\"\n              formControlName=\"configurableColumnsEnabled\"\n            />\n            <span></span>\n            <span translate>Configure columns</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Row options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Row' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 d-flex-md gap-16 flex-wrap form-group-sm\">\n          <!-- zebra stripes -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Alternate row background for readability' | translate\"\n          >\n            <input\n              name=\"striped\"\n              type=\"checkbox\"\n              formControlName=\"striped\"\n            />\n            <span></span>\n            <span translate>Striped rows</span>\n          </label>\n          <!-- hover effect -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Change row background color on hover' | translate\"\n          >\n            <input\n              name=\"hover\"\n              type=\"checkbox\"\n              formControlName=\"hover\"\n            />\n            <span></span>\n            <span translate>Hover highlight</span>\n          </label>\n          <!-- show loading indicator -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show a spinner while data loads' | translate\"\n          >\n            <input\n              name=\"showLoadingIndicator\"\n              type=\"checkbox\"\n              formControlName=\"showLoadingIndicator\"\n            />\n            <span></span>\n            <span translate>Loading indicator</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Cell options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Cell' | translate }}</legend>\n        <div class=\"d-flex-md gap-16 flex-wrap m-b-8\">\n          <!-- cell borders (inside displayOptions) -->\n          <c8y-form-group class=\"m-b-0 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Draw borders around table cells' | translate\"\n            >\n              <input\n                name=\"bordered\"\n                type=\"checkbox\"\n                formControlName=\"bordered\"\n              />\n              <span></span>\n              <span translate>Cell borders</span>\n            </label>\n          </c8y-form-group>\n          <!-- Cell content options (outside displayOptions formGroup, at root form level) -->\n          <c8y-form-group\n            class=\"m-b-0 form-group-sm d-flex-md flex-wrap gap-16\"\n            [formGroup]=\"formGroup\"\n          >\n            <!-- show icon and value -->\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'When cell rendering is set to icon, show both icon and value' | translate\"\n            >\n              <input\n                name=\"showIconAndValue\"\n                type=\"checkbox\"\n                formControlName=\"showIconAndValue\"\n              />\n              <span></span>\n              <span translate>Icon with value</span>\n            </label>\n            <!-- show as link -->\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              [title]=\"\n                'Render the first column (excluding computed and alarm types) as a link to the asset details.'\n                  | translate\n              \"\n            >\n              <input\n                name=\"showAsLink\"\n                type=\"checkbox\"\n                formControlName=\"showAsLink\"\n              />\n              <span></span>\n              <span translate>First column link</span>\n            </label>\n          </c8y-form-group>\n        </div>\n      </fieldset>\n    </div>\n  </fieldset>\n</form>\n\n<ng-template #assetTablePreview>\n  @if (\n    !formGroup ||\n    columns?.length === 0 ||\n    ((config.selectedProperties?.length === 0 || config.selectedProperties === null) &&\n      (config.operationColumns?.length === 0 || config.operationColumns === null))\n  ) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No data to display' | translate\"\n      [subtitle]=\"'Start by selecting the properties' | translate\"\n    ></c8y-ui-empty-state>\n  } @else {\n    @if (!formGroup.controls.widgetInstanceGlobalTimeContext.value) {\n      <c8y-asset-table-auto-refresh\n        class=\"d-contents\"\n        [isIntervalRefresh]=\"!!formGroup.controls.refreshInterval.value\"\n        [refreshInterval]=\"formGroup.controls.refreshInterval.value\"\n        [config]=\"formGroup.value\"\n        [isRefreshDisabled]=\"false\"\n        [isLoading]=\"isLoading$\"\n        (onCountdownEnded)=\"updateSelectedAssets()\"\n      ></c8y-asset-table-auto-refresh>\n    }\n    <c8y-data-grid\n      class=\"content-fullpage d-flex d-col border-top border-bottom\"\n      [title]=\"title\"\n      [displayOptions]=\"formGroup.controls.displayOptions.value\"\n      [columns]=\"columns\"\n      [serverSideDataCallback]=\"serverSideDataCallback\"\n      [configureColumnsEnabled]=\"formGroup.get('displayOptions.configurableColumnsEnabled')?.value\"\n      [refresh]=\"refresh\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'search'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </c8y-data-grid>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "loading", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: AssetTableAutoRefreshComponent, selector: "c8y-asset-table-auto-refresh", inputs: ["config", "isIntervalRefresh", "refreshInterval", "isLoading", "isScrolling", "isRefreshDisabled"], outputs: ["onCountdownEnded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetTableWidgetConfigComponent, decorators: [{
             type: Component,
@@ -1440,8 +1473,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         CoreModule,
                         AssetSelectorModule,
                         AssetTableAutoRefreshComponent,
-                        TooltipModule
-                    ], providers: [ManagedObjectRealtimeService], template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Date' | translate }}</legend>\n    <div class=\"row tight-grid\">\n      <c8y-form-group class=\"m-b-16 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n              [(ngModel)]=\"refreshOption\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (change)=\"updateRefreshOption()\"\n            >\n              <option\n                [title]=\"'Refreshing after the given interval' | translate\"\n                value=\"interval\"\n              >\n                {{ 'Use refresh interval' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                value=\"global-interval\"\n              >\n                {{ 'Use global refresh interval' | translate }}\n              </option>\n            </select>\n          </div>\n          @if (formGroup?.controls?.refreshOption?.value !== GLOBAL_INTERVAL_OPTION) {\n            <div\n              class=\"c8y-select-wrapper grow flex-no-shrink\"\n              title=\" {{ 'Interval' | translate }}\"\n            >\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n                data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n              >\n                @for (refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS; track refreshInterval) {\n                  <option [value]=\"refreshInterval\">\n                    {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                  </option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display options' | translate }}</legend>\n    <div formGroupName=\"displayOptions\">\n      <!-- Data options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Data' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\"\n          [formGroup]=\"formGroup\"\n        >\n          <!-- hierarchical data -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show assets and all descendants' | translate\"\n          >\n            <input\n              name=\"includeDescendants\"\n              type=\"checkbox\"\n              formControlName=\"includeDescendants\"\n            />\n            <span></span>\n            <span translate>Include descendants</span>\n          </label>\n          <!-- Status icon -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show status icon column' | translate\"\n          >\n            <input\n              name=\"showStatusIcon\"\n              type=\"checkbox\"\n              formControlName=\"showStatusIcon\"\n            />\n            <span></span>\n            <span translate>Show status icon column</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <!-- Header options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Header' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\">\n          <!-- grid header -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Display the data grid header' | translate\"\n          >\n            <input\n              name=\"gridHeader\"\n              type=\"checkbox\"\n              formControlName=\"gridHeader\"\n            />\n            <span></span>\n            <span translate>Table header</span>\n          </label>\n          <!-- show filter label -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display applied filters in the header' | translate\"\n          >\n            <input\n              name=\"filter\"\n              type=\"checkbox\"\n              formControlName=\"filter\"\n            />\n            <span></span>\n            <span translate>Active filters</span>\n          </label>\n          <!-- enable configurable columns -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display columns configuration button' | translate\"\n          >\n            <input\n              name=\"configurableColumnsEnabled\"\n              type=\"checkbox\"\n              formControlName=\"configurableColumnsEnabled\"\n            />\n            <span></span>\n            <span translate>Configure columns</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Row options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Row' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 d-flex-md gap-16 flex-wrap form-group-sm\">\n          <!-- zebra stripes -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Alternate row background for readability' | translate\"\n          >\n            <input\n              name=\"striped\"\n              type=\"checkbox\"\n              formControlName=\"striped\"\n            />\n            <span></span>\n            <span translate>Striped rows</span>\n          </label>\n          <!-- hover effect -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Change row background color on hover' | translate\"\n          >\n            <input\n              name=\"hover\"\n              type=\"checkbox\"\n              formControlName=\"hover\"\n            />\n            <span></span>\n            <span translate>Hover highlight</span>\n          </label>\n          <!-- show loading indicator -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show a spinner while data loads' | translate\"\n          >\n            <input\n              name=\"showLoadingIndicator\"\n              type=\"checkbox\"\n              formControlName=\"showLoadingIndicator\"\n            />\n            <span></span>\n            <span translate>Loading indicator</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Cell options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Cell' | translate }}</legend>\n        <div class=\"d-flex-md gap-16 flex-wrap m-b-8\">\n          <!-- cell borders (inside displayOptions) -->\n          <c8y-form-group class=\"m-b-0 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Draw borders around table cells' | translate\"\n            >\n              <input\n                name=\"bordered\"\n                type=\"checkbox\"\n                formControlName=\"bordered\"\n              />\n              <span></span>\n              <span translate>Cell borders</span>\n            </label>\n          </c8y-form-group>\n          <!-- Cell content options (outside displayOptions formGroup, at root form level) -->\n          <c8y-form-group\n            class=\"m-b-0 form-group-sm d-flex-md flex-wrap gap-16\"\n            [formGroup]=\"formGroup\"\n          >\n            <!-- show icon and value -->\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'When cell rendering is set to icon, show both icon and value' | translate\"\n            >\n              <input\n                name=\"showIconAndValue\"\n                type=\"checkbox\"\n                formControlName=\"showIconAndValue\"\n              />\n              <span></span>\n              <span translate>Icon with value</span>\n            </label>\n            <!-- show as link -->\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              [title]=\"\n                'Render the first column (excluding computed and alarm types) as a link to the asset details.'\n                  | translate\n              \"\n            >\n              <input\n                name=\"showAsLink\"\n                type=\"checkbox\"\n                formControlName=\"showAsLink\"\n              />\n              <span></span>\n              <span translate>First column link</span>\n            </label>\n          </c8y-form-group>\n        </div>\n      </fieldset>\n    </div>\n  </fieldset>\n</form>\n\n<ng-template #assetTablePreview>\n  @if (\n    !formGroup ||\n    columns?.length === 0 ||\n    ((config.selectedProperties?.length === 0 || config.selectedProperties === null) &&\n      (config.operationColumns?.length === 0 || config.operationColumns === null))\n  ) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No asset table' | translate\"\n      [subtitle]=\"'Add property' | translate\"\n    ></c8y-ui-empty-state>\n  } @else {\n    @if (!formGroup.controls.widgetInstanceGlobalTimeContext.value) {\n      <c8y-asset-table-auto-refresh\n        class=\"d-contents\"\n        [isIntervalRefresh]=\"!!formGroup.controls.refreshInterval.value\"\n        [refreshInterval]=\"formGroup.controls.refreshInterval.value\"\n        [config]=\"formGroup.value\"\n        [isRefreshDisabled]=\"false\"\n        [isLoading]=\"isLoading$\"\n        (onCountdownEnded)=\"updateSelectedAssets()\"\n      ></c8y-asset-table-auto-refresh>\n    }\n    <c8y-data-grid\n      class=\"content-fullpage d-flex d-col border-top border-bottom\"\n      [title]=\"title\"\n      [displayOptions]=\"formGroup.controls.displayOptions.value\"\n      [columns]=\"columns\"\n      [serverSideDataCallback]=\"serverSideDataCallback\"\n      [configureColumnsEnabled]=\"formGroup.get('displayOptions.configurableColumnsEnabled')?.value\"\n      [refresh]=\"refresh\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'search'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </c8y-data-grid>\n  }\n</ng-template>\n" }]
+                        TooltipModule,
+                        PopoverModule
+                    ], providers: [ManagedObjectRealtimeService], template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Date' | translate }}</legend>\n    <div class=\"row tight-grid\">\n      <c8y-form-group class=\"m-b-16 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n              [(ngModel)]=\"refreshOption\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (change)=\"updateRefreshOption()\"\n            >\n              <option\n                [title]=\"'Refreshing after the given interval' | translate\"\n                value=\"interval\"\n              >\n                {{ 'Use refresh interval' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                value=\"global-interval\"\n              >\n                {{ 'Use global refresh interval' | translate }}\n              </option>\n            </select>\n          </div>\n          @if (formGroup?.controls?.refreshOption?.value !== GLOBAL_INTERVAL_OPTION) {\n            <div\n              class=\"c8y-select-wrapper grow flex-no-shrink\"\n              title=\" {{ 'Interval' | translate }}\"\n            >\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n                data-cy=\"c8y-alarm-list-widget-config--interval-selector\"\n              >\n                @for (refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS; track refreshInterval) {\n                  <option [value]=\"refreshInterval\">\n                    {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}\n                  </option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display options' | translate }}</legend>\n    <div formGroupName=\"displayOptions\">\n      <!-- Data options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Data' | translate }}</legend>\n        <c8y-form-group\n          class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\"\n          [formGroup]=\"formGroup\"\n        >\n          <!-- hierarchical data -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show assets and all descendants' | translate\"\n          >\n            <input\n              name=\"includeDescendants\"\n              type=\"checkbox\"\n              formControlName=\"includeDescendants\"\n            />\n            <span></span>\n            <span translate>Include descendants</span>\n            <button\n              class=\"btn-help m-l-8\"\n              [attr.aria-label]=\"includeDescendantsTooltip | translate\"\n              [popover]=\"includeDescendantsTooltip | translate\"\n              placement=\"top\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n            ></button>\n          </label>\n          <!-- Status icon -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show status icon column' | translate\"\n          >\n            <input\n              name=\"showStatusIcon\"\n              type=\"checkbox\"\n              formControlName=\"showStatusIcon\"\n            />\n            <span></span>\n            <span translate>Show status icon column</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <!-- Header options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Header' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 form-group-sm d-flex-md flex-wrap gap-16\">\n          <!-- grid header -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Display the data grid header' | translate\"\n          >\n            <input\n              name=\"gridHeader\"\n              type=\"checkbox\"\n              formControlName=\"gridHeader\"\n            />\n            <span></span>\n            <span translate>Table header</span>\n          </label>\n          <!-- show filter label -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display applied filters in the header' | translate\"\n          >\n            <input\n              name=\"filter\"\n              type=\"checkbox\"\n              formControlName=\"filter\"\n            />\n            <span></span>\n            <span translate>Active filters</span>\n          </label>\n          <!-- enable configurable columns -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display columns configuration button' | translate\"\n          >\n            <input\n              name=\"configurableColumnsEnabled\"\n              type=\"checkbox\"\n              formControlName=\"configurableColumnsEnabled\"\n            />\n            <span></span>\n            <span translate>Configure columns</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Row options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Row' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8 d-flex-md gap-16 flex-wrap form-group-sm\">\n          <!-- zebra stripes -->\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Alternate row background for readability' | translate\"\n          >\n            <input\n              name=\"striped\"\n              type=\"checkbox\"\n              formControlName=\"striped\"\n            />\n            <span></span>\n            <span translate>Striped rows</span>\n          </label>\n          <!-- hover effect -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Change row background color on hover' | translate\"\n          >\n            <input\n              name=\"hover\"\n              type=\"checkbox\"\n              formControlName=\"hover\"\n            />\n            <span></span>\n            <span translate>Hover highlight</span>\n          </label>\n          <!-- show loading indicator -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Show a spinner while data loads' | translate\"\n          >\n            <input\n              name=\"showLoadingIndicator\"\n              type=\"checkbox\"\n              formControlName=\"showLoadingIndicator\"\n            />\n            <span></span>\n            <span translate>Loading indicator</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <!-- Cell options -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Cell' | translate }}</legend>\n        <div class=\"d-flex-md gap-16 flex-wrap m-b-8\">\n          <!-- cell borders (inside displayOptions) -->\n          <c8y-form-group class=\"m-b-0 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Draw borders around table cells' | translate\"\n            >\n              <input\n                name=\"bordered\"\n                type=\"checkbox\"\n                formControlName=\"bordered\"\n              />\n              <span></span>\n              <span translate>Cell borders</span>\n            </label>\n          </c8y-form-group>\n          <!-- Cell content options (outside displayOptions formGroup, at root form level) -->\n          <c8y-form-group\n            class=\"m-b-0 form-group-sm d-flex-md flex-wrap gap-16\"\n            [formGroup]=\"formGroup\"\n          >\n            <!-- show icon and value -->\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'When cell rendering is set to icon, show both icon and value' | translate\"\n            >\n              <input\n                name=\"showIconAndValue\"\n                type=\"checkbox\"\n                formControlName=\"showIconAndValue\"\n              />\n              <span></span>\n              <span translate>Icon with value</span>\n            </label>\n            <!-- show as link -->\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              [title]=\"\n                'Render the first column (excluding computed and alarm types) as a link to the asset details.'\n                  | translate\n              \"\n            >\n              <input\n                name=\"showAsLink\"\n                type=\"checkbox\"\n                formControlName=\"showAsLink\"\n              />\n              <span></span>\n              <span translate>First column link</span>\n            </label>\n          </c8y-form-group>\n        </div>\n      </fieldset>\n    </div>\n  </fieldset>\n</form>\n\n<ng-template #assetTablePreview>\n  @if (\n    !formGroup ||\n    columns?.length === 0 ||\n    ((config.selectedProperties?.length === 0 || config.selectedProperties === null) &&\n      (config.operationColumns?.length === 0 || config.operationColumns === null))\n  ) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No data to display' | translate\"\n      [subtitle]=\"'Start by selecting the properties' | translate\"\n    ></c8y-ui-empty-state>\n  } @else {\n    @if (!formGroup.controls.widgetInstanceGlobalTimeContext.value) {\n      <c8y-asset-table-auto-refresh\n        class=\"d-contents\"\n        [isIntervalRefresh]=\"!!formGroup.controls.refreshInterval.value\"\n        [refreshInterval]=\"formGroup.controls.refreshInterval.value\"\n        [config]=\"formGroup.value\"\n        [isRefreshDisabled]=\"false\"\n        [isLoading]=\"isLoading$\"\n        (onCountdownEnded)=\"updateSelectedAssets()\"\n      ></c8y-asset-table-auto-refresh>\n    }\n    <c8y-data-grid\n      class=\"content-fullpage d-flex d-col border-top border-bottom\"\n      [title]=\"title\"\n      [displayOptions]=\"formGroup.controls.displayOptions.value\"\n      [columns]=\"columns\"\n      [serverSideDataCallback]=\"serverSideDataCallback\"\n      [configureColumnsEnabled]=\"formGroup.get('displayOptions.configurableColumnsEnabled')?.value\"\n      [refresh]=\"refresh\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'search'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </c8y-data-grid>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { previewMapSet: [{
                 type: ViewChild,
                 args: ['assetTablePreview']
@@ -1466,9 +1500,9 @@ class AssetTableWidgetViewComponent {
         this.alertService = inject(AlertService);
         this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
     }
-    ngOnInit() {
+    async ngOnInit() {
         if (this.assetTableService.isMigrationNeeded(this.config)) {
-            this.config = this.assetTableService.migrateLegacyProperties(this.config);
+            this.config = await this.assetTableService.migrateLegacyProperties(this.config);
         }
         this.columns = this.assetTableService.getColumns(this.config?.selectedProperties, this.config?.operationColumns, this.config);
         if (this.config.widgetInstanceGlobalAutoRefreshContext) {
@@ -1590,7 +1624,7 @@ class IconRenderTypeModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IconRenderTypeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: IconRenderTypeModalComponent, isStandalone: true, selector: "c8y-icon-render-type-modal", ngImport: i0, template: "<c8y-modal\n  title=\"{{ 'Configure icon conditions' | translate }}\"\n  (onClose)=\"onClose($event)\"\n  (onDismiss)=\"onDismiss($event)\"\n  [labels]=\"labels\"\n  [disabled]=\"isAnyFormInvalid()\"\n  [headerClasses]=\"'dialog-header'\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-circle-star\"></span>\n  </ng-container>\n  <form class=\"p-24 p-t-0\">\n    @for (form of forms; track form; let i = $index) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        [formGroup]=\"form\"\n      >\n        <legend>\n          {{ 'If condition' | translate }}\n          @if (forms.length > 1) {\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              title=\"{{ 'Remove condition' | translate }}\"\n              type=\"button\"\n              (click)=\"removeCondition(i)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          }\n        </legend>\n        <!-- Data type selection -->\n        <div class=\"row tight-grid\">\n          <div class=\"col-md-4 col-12\">\n            <label\n              for=\"dataType-{{ i }}\"\n              translate\n            >\n              Data type\n            </label>\n            <c8y-select\n              aria-label=\"{{ 'Data type select' | translate }}\"\n              id=\"dataType-{{ i }}\"\n              [items]=\"dataTypes\"\n              [placeholder]=\"'Select data type\u2026' | translate\"\n              formControlName=\"dataType\"\n            ></c8y-select>\n          </div>\n\n          <!-- Comparison dropdown -->\n          <div class=\"col-md-4 col-12\">\n            <label\n              for=\"comparison-{{ i }}\"\n              translate\n            >\n              Comparison\n            </label>\n            <c8y-select\n              aria-label=\"{{ 'Comparison select' | translate }}\"\n              id=\"comparison-{{ i }}\"\n              [items]=\"comparisonOptions[form.get('dataType')?.value?.value] || []\"\n              formControlName=\"comparison\"\n              [placeholder]=\"'Select comparison type\u2026' | translate\"\n              labelProp=\"label\"\n              valueProp=\"value\"\n            ></c8y-select>\n          </div>\n          <!-- Value input based on type -->\n          <div class=\"col-md-4 col-12\">\n            <label\n              for=\"value-{{ i }}\"\n              translate\n            >\n              Value\n            </label>\n            @switch (form.get('dataType')?.value?.value) {\n              @case ('number') {\n                <input\n                  class=\"form-control\"\n                  id=\"value-{{ i }}\"\n                  type=\"number\"\n                  formControlName=\"value\"\n                />\n              }\n              @case ('date') {\n                <c8y-date-time-picker\n                  aria-label=\"{{ 'Date and time picker' | translate }}\"\n                  placeholder=\"{{ 'Select date\u2026' | translate }}\"\n                  formControlName=\"value\"\n                  size=\"sm\"\n                  (onDateSelected)=\"onDateSelected($event, i)\"\n                ></c8y-date-time-picker>\n              }\n              @case ('string') {\n                <input\n                  class=\"form-control\"\n                  id=\"value-{{ i }}\"\n                  type=\"text\"\n                  formControlName=\"value\"\n                />\n              }\n              @case ('boolean') {\n                <c8y-select\n                  aria-label=\"{{ 'Boolean select' | translate }}\"\n                  [items]=\"booleanOptions\"\n                  [placeholder]=\"'Select value\u2026' | translate\"\n                  formControlName=\"value\"\n                  labelProp=\"label\"\n                  valueProp=\"value\"\n                ></c8y-select>\n              }\n            }\n          </div>\n        </div>\n        <div class=\"d-flex gap-16 m-t-8 m-b-8\">\n          <!-- Icon field -->\n          <div class=\"d-flex a-i-center\">\n            <label\n              class=\"m-b-0 m-r-4\"\n              for=\"icon-{{ i }}\"\n              translate\n            >\n              Icon\n            </label>\n            <c8y-icon-selector-wrapper\n              [selectedIcon]=\"form.get('icon')?.value || 'c8y-cockpit'\"\n              [iconSize]=\"24\"\n              (onSelect)=\"iconSelectionChange($event, i)\"\n            ></c8y-icon-selector-wrapper>\n          </div>\n\n          <!-- Color field -->\n          <div class=\"d-flex a-i-center m-l-8\">\n            <label\n              class=\"m-b-0 m-r-4 text-nowrap\"\n              for=\"color-{{ i }}\"\n              translate\n            >\n              Icon color\n            </label>\n            <input\n              class=\"form-control\"\n              style=\"width: 100%; min-width: 40px\"\n              id=\"color-{{ i }}\"\n              type=\"color\"\n              formControlName=\"color\"\n            />\n          </div>\n        </div>\n      </fieldset>\n    }\n    <button\n      class=\"btn btn-default m-t-16\"\n      title=\"{{ 'Add condition' | translate }}\"\n      type=\"button\"\n      (click)=\"addCondition()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add condition' | translate }}\n    </button>\n  </form>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i3$1.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: IconRenderTypeModalComponent, isStandalone: true, selector: "c8y-icon-render-type-modal", ngImport: i0, template: "<c8y-modal\n  title=\"{{ 'Configure icon conditions' | translate }}\"\n  (onClose)=\"onClose($event)\"\n  (onDismiss)=\"onDismiss($event)\"\n  [labels]=\"labels\"\n  [disabled]=\"isAnyFormInvalid()\"\n  [headerClasses]=\"'dialog-header'\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-circle-star\"></span>\n  </ng-container>\n  <form class=\"p-24 p-t-0\">\n    @for (form of forms; track form; let i = $index) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        [formGroup]=\"form\"\n      >\n        <legend>\n          {{ 'If condition' | translate }}\n          @if (forms.length > 1) {\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              title=\"{{ 'Remove condition' | translate }}\"\n              type=\"button\"\n              (click)=\"removeCondition(i)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          }\n        </legend>\n        <!-- Data type selection -->\n        <div class=\"row tight-grid\">\n          <div class=\"col-md-4 col-12\">\n            <label\n              for=\"dataType-{{ i }}\"\n              translate\n            >\n              Data type\n            </label>\n            <c8y-select\n              aria-label=\"{{ 'Data type select' | translate }}\"\n              id=\"dataType-{{ i }}\"\n              [items]=\"dataTypes\"\n              [placeholder]=\"'Select data type\u2026' | translate\"\n              formControlName=\"dataType\"\n            ></c8y-select>\n          </div>\n\n          <!-- Comparison dropdown -->\n          <div class=\"col-md-4 col-12\">\n            <label\n              for=\"comparison-{{ i }}\"\n              translate\n            >\n              Comparison\n            </label>\n            <c8y-select\n              aria-label=\"{{ 'Comparison select' | translate }}\"\n              id=\"comparison-{{ i }}\"\n              [items]=\"comparisonOptions[form.get('dataType')?.value?.value] || []\"\n              formControlName=\"comparison\"\n              [placeholder]=\"'Select comparison type\u2026' | translate\"\n              labelProp=\"label\"\n              valueProp=\"value\"\n            ></c8y-select>\n          </div>\n          <!-- Value input based on type -->\n          <div class=\"col-md-4 col-12\">\n            <label\n              for=\"value-{{ i }}\"\n              translate\n            >\n              Value\n            </label>\n            @switch (form.get('dataType')?.value?.value) {\n              @case ('number') {\n                <input\n                  class=\"form-control\"\n                  id=\"value-{{ i }}\"\n                  type=\"number\"\n                  formControlName=\"value\"\n                />\n              }\n              @case ('date') {\n                <c8y-date-time-picker\n                  aria-label=\"{{ 'Date and time picker' | translate }}\"\n                  placeholder=\"{{ 'Select date\u2026' | translate }}\"\n                  formControlName=\"value\"\n                  size=\"sm\"\n                  (onDateSelected)=\"onDateSelected($event, i)\"\n                ></c8y-date-time-picker>\n              }\n              @case ('string') {\n                <input\n                  class=\"form-control\"\n                  id=\"value-{{ i }}\"\n                  type=\"text\"\n                  formControlName=\"value\"\n                />\n              }\n              @case ('boolean') {\n                <c8y-select\n                  aria-label=\"{{ 'Boolean select' | translate }}\"\n                  [items]=\"booleanOptions\"\n                  [placeholder]=\"'Select value\u2026' | translate\"\n                  formControlName=\"value\"\n                  labelProp=\"label\"\n                  valueProp=\"value\"\n                ></c8y-select>\n              }\n            }\n          </div>\n        </div>\n        <div class=\"d-flex gap-16 m-t-8 m-b-8\">\n          <!-- Icon field -->\n          <div class=\"d-flex a-i-center\">\n            <label\n              class=\"m-b-0 m-r-4\"\n              for=\"icon-{{ i }}\"\n              translate\n            >\n              Icon\n            </label>\n            <c8y-icon-selector-wrapper\n              [selectedIcon]=\"form.get('icon')?.value || 'c8y-cockpit'\"\n              [iconSize]=\"24\"\n              (onSelect)=\"iconSelectionChange($event, i)\"\n            ></c8y-icon-selector-wrapper>\n          </div>\n\n          <!-- Color field -->\n          <div class=\"d-flex a-i-center m-l-8\">\n            <label\n              class=\"m-b-0 m-r-4 text-nowrap\"\n              for=\"color-{{ i }}\"\n              translate\n            >\n              Icon color\n            </label>\n            <input\n              class=\"form-control\"\n              style=\"width: 100%; min-width: 40px\"\n              id=\"color-{{ i }}\"\n              type=\"color\"\n              formControlName=\"color\"\n            />\n          </div>\n        </div>\n      </fieldset>\n    }\n    <button\n      class=\"btn btn-default m-t-16\"\n      title=\"{{ 'Add condition' | translate }}\"\n      type=\"button\"\n      (click)=\"addCondition()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add condition' | translate }}\n    </button>\n  </form>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i3$2.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IconRenderTypeModalComponent, decorators: [{
             type: Component,
@@ -1610,18 +1644,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class OperationRenderTypeModalComponent {
     constructor() {
         this.showButtonLabelOnly = false;
-        this.labels = { ok: gettext('Save'), cancel: gettext('Cancel') };
-        this.operationList = [
-            { label: gettext('Restart device'), value: 'restart' },
-            { label: gettext('Firmware update'), value: 'firmwareUpdate' },
-            { label: gettext('Send command'), value: 'sendCommand' }
+        this.deviceTypes = [];
+        this.templates = [];
+        this.predefinedOperations = [
+            {
+                name: gettext('Restart device'),
+                command: { description: gettext('Restart device'), c8y_Restart: {} }
+            },
+            {
+                name: gettext('Change relay status to OPEN'),
+                command: {
+                    description: gettext('Change relay status to OPEN.'),
+                    c8y_Relay: { relayState: 'OPEN' }
+                }
+            },
+            {
+                name: gettext('Change relay status to CLOSED'),
+                command: {
+                    description: gettext('Change relay status to CLOSED.'),
+                    c8y_Relay: { relayState: 'CLOSED' }
+                }
+            }
         ];
+        this.labels = { ok: gettext('Save'), cancel: gettext('Cancel') };
         this.result = new Promise((resolve, reject) => {
             this._save = resolve;
             this._cancel = reject;
         });
         this.fb = inject(FormBuilder);
         this.translate = inject(TranslateService);
+        this.deviceShellService = inject(DeviceShellService);
+        this.destroyRef = inject(DestroyRef);
     }
     get modalTitle() {
         if (this.showButtonLabelOnly) {
@@ -1632,13 +1685,8 @@ class OperationRenderTypeModalComponent {
             ? this.translate.instant(gettext('Edit operation'))
             : this.translate.instant(gettext('Create operation'));
     }
-    ngOnInit() {
-        const defaultCommand = JSON.stringify({
-            description: 'Command description',
-            c8y_Command: {
-                text: '<command>'
-            }
-        }, null, 2);
+    async ngOnInit() {
+        const defaultCommand = JSON.stringify({ description: 'Command description', c8y_Command: { text: '<command>' } }, null, 2);
         this.form = this.fb.group({
             buttonLabel: new FormControl(this.initialConfig?.buttonLabel ?? '', {
                 validators: [Validators.required]
@@ -1648,6 +1696,29 @@ class OperationRenderTypeModalComponent {
                 validators: [Validators.required]
             })
         });
+        if (this.deviceTypes?.length) {
+            const loadedTemplates = await this.deviceShellService.getCommandTemplatesForDeviceType(this.deviceTypes);
+            this.templates = loadedTemplates.map(t => ({
+                name: t.name,
+                text: t.text,
+                category: t.category
+            }));
+        }
+        this.form
+            .get('operation')
+            ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(selectedName => {
+            const predefined = this.predefinedOperations.find(p => p.name === selectedName);
+            if (predefined) {
+                this.form.get('command')?.setValue(JSON.stringify(predefined.command, null, 2));
+                return;
+            }
+            const template = this.templates.find(t => t.name === selectedName);
+            if (template) {
+                const cmd = JSON.stringify({ description: template.name, c8y_Command: { text: template.text } }, null, 2);
+                this.form.get('command')?.setValue(cmd);
+            }
+        });
     }
     onClose(_) {
         if (this.form.valid) {
@@ -1658,7 +1729,7 @@ class OperationRenderTypeModalComponent {
         this._cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OperationRenderTypeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OperationRenderTypeModalComponent, isStandalone: true, selector: "c8y-operation-render-type-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onClose)=\"onClose($event)\"\n  (onDismiss)=\"onDismiss($event)\"\n  [labels]=\"labels\"\n  [disabled]=\"form?.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'cog'\"></span>\n  </ng-container>\n  <form\n    class=\"p-24\"\n    [formGroup]=\"form\"\n  >\n    <c8y-form-group>\n      <label\n        for=\"buttonLabel\"\n        translate\n      >\n        Button label\n      </label>\n      <input\n        class=\"form-control\"\n        id=\"buttonLabel\"\n        placeholder=\"{{ 'e.g. Execute operation' | translate }}\"\n        type=\"text\"\n        formControlName=\"buttonLabel\"\n      />\n      <c8y-messages></c8y-messages>\n    </c8y-form-group>\n\n    @if (!showButtonLabelOnly) {\n      <div class=\"form-group\">\n        <label\n          for=\"operation\"\n          translate\n        >\n          Operation\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"operation\"\n            formControlName=\"operation\"\n          >\n            @for (op of operationList; track op) {\n              <option [ngValue]=\"op.value\">\n                {{ op.label | translate }}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label\n          for=\"command\"\n          translate\n        >\n          Command\n        </label>\n        <textarea\n          class=\"form-control no-resize inner-scroll\"\n          style=\"max-height: 300px\"\n          id=\"command\"\n          c8y-textarea-autoresize\n          formControlName=\"command\"\n          maxlength=\"900\"\n        ></textarea>\n      </div>\n    }\n  </form>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OperationRenderTypeModalComponent, isStandalone: true, selector: "c8y-operation-render-type-modal", providers: [DeviceShellService], ngImport: i0, template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onClose)=\"onClose($event)\"\n  (onDismiss)=\"onDismiss($event)\"\n  [labels]=\"labels\"\n  [disabled]=\"form?.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'cog'\"></span>\n  </ng-container>\n  <form\n    class=\"p-24\"\n    [formGroup]=\"form\"\n  >\n    <c8y-form-group>\n      <label\n        for=\"buttonLabel\"\n        translate\n      >\n        Button label\n      </label>\n      <input\n        class=\"form-control\"\n        id=\"buttonLabel\"\n        placeholder=\"{{ 'e.g. Execute operation' | translate }}\"\n        type=\"text\"\n        formControlName=\"buttonLabel\"\n      />\n      <c8y-messages></c8y-messages>\n    </c8y-form-group>\n\n    @if (!showButtonLabelOnly) {\n      <div class=\"form-group\">\n        <label\n          for=\"operation\"\n          translate\n        >\n          Operation\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"operation\"\n            formControlName=\"operation\"\n          >\n            <optgroup label=\"{{ 'Predefined' | translate }}\">\n              @for (op of predefinedOperations; track op.name) {\n                <option [ngValue]=\"op.name\">{{ op.name | translate }}</option>\n              }\n            </optgroup>\n            @if (templates.length) {\n              <optgroup label=\"{{ 'Device templates' | translate }}\">\n                @for (op of templates; track op.name) {\n                  <option [ngValue]=\"op.name\">{{ op.name | translate }}</option>\n                }\n              </optgroup>\n            }\n          </select>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label\n          for=\"command\"\n          translate\n        >\n          Command\n        </label>\n        <textarea\n          class=\"form-control no-resize inner-scroll\"\n          style=\"max-height: 300px\"\n          id=\"command\"\n          c8y-textarea-autoresize\n          formControlName=\"command\"\n          maxlength=\"900\"\n        ></textarea>\n      </div>\n    }\n  </form>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OperationRenderTypeModalComponent, decorators: [{
             type: Component,
@@ -1669,13 +1740,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         C8yTranslateModule,
                         CommonModule,
                         CoreModule
-                    ], template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onClose)=\"onClose($event)\"\n  (onDismiss)=\"onDismiss($event)\"\n  [labels]=\"labels\"\n  [disabled]=\"form?.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'cog'\"></span>\n  </ng-container>\n  <form\n    class=\"p-24\"\n    [formGroup]=\"form\"\n  >\n    <c8y-form-group>\n      <label\n        for=\"buttonLabel\"\n        translate\n      >\n        Button label\n      </label>\n      <input\n        class=\"form-control\"\n        id=\"buttonLabel\"\n        placeholder=\"{{ 'e.g. Execute operation' | translate }}\"\n        type=\"text\"\n        formControlName=\"buttonLabel\"\n      />\n      <c8y-messages></c8y-messages>\n    </c8y-form-group>\n\n    @if (!showButtonLabelOnly) {\n      <div class=\"form-group\">\n        <label\n          for=\"operation\"\n          translate\n        >\n          Operation\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"operation\"\n            formControlName=\"operation\"\n          >\n            @for (op of operationList; track op) {\n              <option [ngValue]=\"op.value\">\n                {{ op.label | translate }}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label\n          for=\"command\"\n          translate\n        >\n          Command\n        </label>\n        <textarea\n          class=\"form-control no-resize inner-scroll\"\n          style=\"max-height: 300px\"\n          id=\"command\"\n          c8y-textarea-autoresize\n          formControlName=\"command\"\n          maxlength=\"900\"\n        ></textarea>\n      </div>\n    }\n  </form>\n</c8y-modal>\n" }]
+                    ], providers: [DeviceShellService], template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onClose)=\"onClose($event)\"\n  (onDismiss)=\"onDismiss($event)\"\n  [labels]=\"labels\"\n  [disabled]=\"form?.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'cog'\"></span>\n  </ng-container>\n  <form\n    class=\"p-24\"\n    [formGroup]=\"form\"\n  >\n    <c8y-form-group>\n      <label\n        for=\"buttonLabel\"\n        translate\n      >\n        Button label\n      </label>\n      <input\n        class=\"form-control\"\n        id=\"buttonLabel\"\n        placeholder=\"{{ 'e.g. Execute operation' | translate }}\"\n        type=\"text\"\n        formControlName=\"buttonLabel\"\n      />\n      <c8y-messages></c8y-messages>\n    </c8y-form-group>\n\n    @if (!showButtonLabelOnly) {\n      <div class=\"form-group\">\n        <label\n          for=\"operation\"\n          translate\n        >\n          Operation\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"operation\"\n            formControlName=\"operation\"\n          >\n            <optgroup label=\"{{ 'Predefined' | translate }}\">\n              @for (op of predefinedOperations; track op.name) {\n                <option [ngValue]=\"op.name\">{{ op.name | translate }}</option>\n              }\n            </optgroup>\n            @if (templates.length) {\n              <optgroup label=\"{{ 'Device templates' | translate }}\">\n                @for (op of templates; track op.name) {\n                  <option [ngValue]=\"op.name\">{{ op.name | translate }}</option>\n                }\n              </optgroup>\n            }\n          </select>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label\n          for=\"command\"\n          translate\n        >\n          Command\n        </label>\n        <textarea\n          class=\"form-control no-resize inner-scroll\"\n          style=\"max-height: 300px\"\n          id=\"command\"\n          c8y-textarea-autoresize\n          formControlName=\"command\"\n          maxlength=\"900\"\n        ></textarea>\n      </div>\n    }\n  </form>\n</c8y-modal>\n" }]
         }] });
 
 class AssetTableGridSettingsComponent {
     constructor() {
         this.columns = [];
         this.selectedProperties = [];
+        this.extraProperties = [];
         this.operationColumns = [];
         this.text = '';
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1685,16 +1757,24 @@ class AssetTableGridSettingsComponent {
         this.customLabel = gettext('(custom`column`)');
         this.widgetConfigService = inject(WidgetConfigService);
         this.assetTableService = inject(AssetTableService);
+        this.bottomDrawerService = inject(BottomDrawerService);
+        this.inventoryService = inject(InventoryService);
         this.modalService = inject(BsModalService);
         this.destroy$ = new Subject();
     }
     ngOnInit() {
-        this.widgetConfigService.currentConfig$.pipe(takeUntil(this.destroy$)).subscribe(config => {
+        this.widgetConfigService.currentConfig$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(async (config) => {
             this.selectedProperties = config?.selectedProperties || [];
+            this.extraProperties = this.selectedProperties.filter(prop => prop?.computed);
             this.operationColumns = config?.operationColumns || [];
             this.existingColumnFilter = config?.filterPredicate || {};
             this.customHeaderNames = config?.customHeaderNames || {};
             this.columns = this.getColumns(config);
+            if (config.device && Object.keys(config.device).length > 0) {
+                this.contextAsset = (await this.inventoryService.detail(config.device)).data;
+            }
             this.applyCustomHeaderNames();
             this.columns.forEach(column => {
                 column.header = this.customHeaderNames[column.name] || column.header;
@@ -1716,7 +1796,7 @@ class AssetTableGridSettingsComponent {
         if (type === 'icon') {
             const currentIconConfig = this.selectedProperties.find(
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (prop) => prop.name === column.name)?.iconConfig;
+            (prop) => (prop.instanceId || prop.name) === column.name)?.iconConfig;
             const modal = this.modalService.show(IconRenderTypeModalComponent, {
                 class: 'modal-md',
                 ariaDescribedby: 'modal-body',
@@ -1728,7 +1808,7 @@ class AssetTableGridSettingsComponent {
             }).content;
             try {
                 const result = await modal.result;
-                this.selectedProperties = this.selectedProperties.map(prop => prop.name === column.name || prop.title === column.name
+                this.selectedProperties = this.selectedProperties.map(prop => (prop.instanceId || prop.name) === column.name || prop.title === column.name
                     ? { ...prop, iconConfig: result, columnType: 'icon' }
                     : prop);
             }
@@ -1737,7 +1817,7 @@ class AssetTableGridSettingsComponent {
             }
         }
         else {
-            this.selectedProperties = this.selectedProperties.map(prop => prop.name === column.name ? { ...prop, columnType: type } : prop);
+            this.selectedProperties = this.selectedProperties.map(prop => (prop.instanceId || prop.name) === column.name ? { ...prop, columnType: type } : prop);
         }
         this.widgetConfigService.updateConfig({ selectedProperties: [...this.selectedProperties] });
     }
@@ -1745,13 +1825,19 @@ class AssetTableGridSettingsComponent {
         moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
         const newOrder = this.columns.map((column) => ({
             __origin: column.__origin,
-            __id: column.name
+            __id: column.__id || column.name
         }));
         this.widgetConfigService.updateConfig({ columnOrder: newOrder });
     }
     toggleColumnVisibility(column) {
-        this.selectedProperties = this.selectedProperties.map(prop => prop.name === column.name ? { ...prop, visible: column.visible } : prop);
-        this.widgetConfigService.updateConfig({ selectedProperties: [...this.selectedProperties] });
+        if (column.isOperation) {
+            this.operationColumns = this.operationColumns.map(op => op.buttonLabel === column.name ? { ...op, visible: column.visible } : op);
+            this.widgetConfigService.updateConfig({ operationColumns: [...this.operationColumns] });
+        }
+        else {
+            this.selectedProperties = this.selectedProperties.map(prop => (prop.instanceId || prop.name) === column.name ? { ...prop, visible: column.visible } : prop);
+            this.widgetConfigService.updateConfig({ selectedProperties: [...this.selectedProperties] });
+        }
     }
     applyFilter(column, dropdown) {
         const formGroup = column.filteringConfig?.formGroup;
@@ -1798,7 +1884,7 @@ class AssetTableGridSettingsComponent {
         }
         column.sortOrder = nextOrder || null;
         this.selectedProperties = this.selectedProperties.map(prop => {
-            if (prop.name === column.name) {
+            if ((prop.instanceId || prop.name) === column.name) {
                 if (nextOrder) {
                     prop.sortOrder = nextOrder;
                 }
@@ -1820,7 +1906,7 @@ class AssetTableGridSettingsComponent {
         });
     }
     async onCreateOperation() {
-        const modal = this.operationModal(false);
+        const modal = await this.operationModal(false);
         const result = (await modal.result);
         result.operationType = 'operation';
         result.header = gettext('Create operation');
@@ -1828,7 +1914,7 @@ class AssetTableGridSettingsComponent {
         this.widgetConfigService.updateConfig({ operationColumns: this.operationColumns });
     }
     async onToggleMaintenanceMode() {
-        const modal = this.operationModal(true);
+        const modal = await this.operationModal(true);
         const result = (await modal.result);
         result.operationType = 'maintenance';
         result.header = gettext('Toggle maintenance mode');
@@ -1837,7 +1923,7 @@ class AssetTableGridSettingsComponent {
     }
     async editOperationColumn(column) {
         const currentOpConfig = this.operationColumns.find(op => op.buttonLabel === column.name);
-        const modal = this.operationModal(currentOpConfig.operationType === 'maintenance', currentOpConfig);
+        const modal = await this.operationModal(currentOpConfig.operationType === 'maintenance', currentOpConfig);
         const result = await modal.result;
         this.operationColumns = this.operationColumns.map(op => op.buttonLabel === column.name ? result : op);
         this.widgetConfigService.updateConfig({ operationColumns: this.operationColumns });
@@ -1852,12 +1938,56 @@ class AssetTableGridSettingsComponent {
     trackByColumnName(_index, column) {
         return `${column.name}-${_index}`;
     }
+    async selectAssetAndProperty() {
+        const drawer = this.bottomDrawerService.openDrawer(AssetPropertySelectorDrawerComponent, {
+            disableClickOutside: true,
+            initialState: {
+                allowChangingContext: true,
+                hideSelection: false,
+                contextAsset: this.contextAsset,
+                config: {
+                    selectMode: 'plus',
+                    expansionMode: 'collapsedByDefault',
+                    showValue: true,
+                    showKey: true,
+                    selectedProperties: this.selectedProperties.map(({ columnLabel: _columnLabel, ...prop }) => prop),
+                    allowAddingCustomProperties: true
+                }
+            }
+        });
+        try {
+            const properties = await drawer.instance.result;
+            const uniqueProperties = properties.filter((prop, index, self) => index ===
+                self.findIndex(p => p.name === prop.name && (!p.instanceId || p.instanceId === prop.instanceId)));
+            this.selectProperties(uniqueProperties);
+        }
+        catch (ex) {
+            // cancel clicked
+        }
+    }
+    selectProperties(selectedProperties) {
+        // if the selected properties name matches and the existing one has iconConfig, retain it
+        const updatedProperties = selectedProperties.map(prop => {
+            const existingProp = this.selectedProperties.find(p => p.name === prop.name);
+            if (existingProp?.iconConfig || existingProp?.columnType || existingProp?.columnLabel) {
+                return {
+                    ...prop,
+                    iconConfig: existingProp.iconConfig,
+                    columnType: existingProp.columnType,
+                    columnLabel: existingProp.columnLabel
+                };
+            }
+            return prop;
+        });
+        this.widgetConfigService.updateConfig({ selectedProperties: updatedProperties });
+    }
     applyCustomHeaderNames() {
         // Update selected properties and operation columns based on custom header names
         this.selectedProperties = this.selectedProperties.map(prop => {
-            const newLabel = this.customHeaderNames[prop.name];
+            const nameKey = prop.instanceId || prop.name;
+            const newLabel = this.customHeaderNames[nameKey];
             if (newLabel) {
-                prop.label = newLabel;
+                prop.columnLabel = newLabel;
             }
             return prop;
         });
@@ -1869,7 +1999,11 @@ class AssetTableGridSettingsComponent {
             return opCol;
         });
     }
-    operationModal(showButtonLabelOnly, operationConfig) {
+    async operationModal(showButtonLabelOnly, operationConfig) {
+        // we have to filter unique device types from the child assets
+        const deviceTypes = await this.inventoryService
+            .childAssetsList(this.contextAsset.id)
+            .then(assets => Array.from(new Set(assets.data.map(asset => asset.type).filter(Boolean))));
         return this.modalService.show(OperationRenderTypeModalComponent, {
             class: 'modal-sm',
             ariaDescribedby: 'modal-body',
@@ -1877,7 +2011,8 @@ class AssetTableGridSettingsComponent {
             ignoreBackdropClick: true,
             initialState: {
                 initialConfig: operationConfig || {},
-                showButtonLabelOnly
+                showButtonLabelOnly,
+                deviceTypes: [this.contextAsset?.type, ...deviceTypes]
             }
         }).content;
     }
@@ -1885,7 +2020,7 @@ class AssetTableGridSettingsComponent {
         return this.assetTableService.getColumns(this.selectedProperties, this.operationColumns, config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetTableGridSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AssetTableGridSettingsComponent, isStandalone: true, selector: "c8y-asset-table-column-settings", host: { classAttribute: "bg-level-1" }, providers: [BsDropdownDirective], ngImport: i0, template: "<c8y-list-group\n  class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n  style=\"max-height: 300px\"\n  role=\"list\"\n  cdkDropList\n  (cdkDropListDropped)=\"onColumnDrop($event)\"\n>\n  @for (column of columns; track trackByColumnName($index, column)) {\n    @if (!column.positionFixed) {\n      <c8y-li\n        role=\"listitem\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n      >\n        <c8y-li-drag-handle\n          title=\"{{ 'Drag to reorder' | translate }}\"\n          [attr.aria-label]=\"'Drag to reorder' | translate\"\n          cdkDragHandle\n        >\n          <i\n            c8yIcon=\"drag-reorder\"\n            style=\"font-size: 0.7em\"\n          ></i>\n        </c8y-li-drag-handle>\n        @if (column.__origin !== 'status') {\n          <c8y-li-checkbox\n            class=\"a-s-stretch\"\n            title=\"{{ (column.header | translate) || column.name }} {{\n              column.custom ? (customLabel | translate) : ''\n            }}\"\n            [attr.aria-label]=\"'Show/hide column' | translate\"\n            [(ngModel)]=\"column.visible\"\n            (ngModelChange)=\"toggleColumnVisibility(column)\"\n            c8yProductExperience\n            [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n          ></c8y-li-checkbox>\n        } @else {\n          <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n        }\n        <div class=\"content-flex-32 p-t-4 p-b-4\">\n          <div class=\"col-6\">\n            @if (column.__origin !== 'status') {\n              <label class=\"editable\">\n                <input\n                  class=\"form-control input-sm\"\n                  [attr.aria-label]=\"'Column header' | translate\"\n                  placeholder=\"{{ 'Column header' | translate }}\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  required\n                  [(ngModel)]=\"column.header\"\n                  (keydown.enter)=\"updateColumnNames(column); $event.target.blur()\"\n                  (blur)=\"updateColumnNames(column)\"\n                />\n              </label>\n            } @else {\n              <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n            }\n          </div>\n          <div class=\"col-6\">\n            <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n              <!-- Filters button -->\n              @if (column.filteringConfig) {\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <div\n                    class=\"dropdown d-flex\"\n                    container=\"body\"\n                    dropdown\n                    [insideClick]=\"true\"\n                    c8yDropdownFocusTrap\n                    #gridHeaderDropdown=\"bs-dropdown\"\n                  >\n                    <button\n                      class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                      [attr.aria-label]=\"'Filter' | translate\"\n                      tooltip=\"{{ 'Filter' | translate }}\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [attr.aria-haspopup]=\"true\"\n                      [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                      type=\"button\"\n                      [delay]=\"500\"\n                      [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"filter\"></i>\n                    </button>\n                    <div\n                      class=\"dropdown-menu\"\n                      (click)=\"$event.stopPropagation()\"\n                      *dropdownMenu\n                    >\n                      <formly-form\n                        class=\"p-16 d-block\"\n                        style=\"min-width: 250px\"\n                        [form]=\"column.filteringConfig.formGroup\"\n                        [fields]=\"column.filteringConfig.fields\"\n                        [model]=\"column.filteringConfig.model\"\n                      ></formly-form>\n                      <div class=\"p-16 fit-w d-flex separator-top\">\n                        <button\n                          class=\"btn btn-default btn-sm m-r-8 grow\"\n                          title=\"{{ 'Reset' | translate }}\"\n                          (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                          translate\n                        >\n                          Reset\n                        </button>\n                        <button\n                          class=\"btn btn-primary btn-sm grow\"\n                          title=\"{{ 'Apply' | translate }}\"\n                          (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                          translate\n                        >\n                          Apply\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n              <!-- Sort button -->\n              <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                <button\n                  class=\"btn btn-icon btn-default btn-xs\"\n                  [attr.aria-label]=\"'Sort order' | translate\"\n                  tooltip=\"{{ 'Sort order' | translate }}\"\n                  placement=\"top\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"changeSortOrder(column)\"\n                >\n                  @if (column.sortOrder === 'asc') {\n                    <i c8yIcon=\"long-arrow-up\"></i>\n                  } @else if (column.sortOrder === 'desc') {\n                    <i c8yIcon=\"long-arrow-down\"></i>\n                  } @else {\n                    <i\n                      c8yIcon=\"exchange\"\n                      style=\"transform: rotate(90deg)\"\n                    ></i>\n                  }\n                </button>\n              </div>\n              <!-- Column type dropdown -->\n              @if (!column.isOperation && column.__origin !== 'status') {\n                <div\n                  class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                  [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                >\n                  <div\n                    class=\"dropdown d-flex\"\n                    container=\"body\"\n                    dropdown\n                    c8yDropdownFocusTrap\n                    #columnTypeDropdown=\"bs-dropdown\"\n                  >\n                    <button\n                      class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                      [attr.aria-label]=\"'Select render type' | translate\"\n                      tooltip=\"{{ 'Render type' | translate }}\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [attr.aria-haspopup]=\"true\"\n                      [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                      type=\"button\"\n                      [delay]=\"500\"\n                      dropdownToggle\n                    >\n                      {{ column.type | translate | humanize }}\n                      <i c8yIcon=\"caret-down\"></i>\n                    </button>\n                    <div\n                      class=\"dropdown-menu\"\n                      *dropdownMenu\n                    >\n                      <c8y-list-group role=\"list\">\n                        @if (column.type === 'computed' || column.computedConfig) {\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (keydown.enter)=\"\n                              applyColumnType('computed', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('computed', column); $event.preventDefault()\n                            \"\n                            (click)=\"applyColumnType('computed', column)\"\n                            [active]=\"column.type === 'computed'\"\n                          >\n                            {{ 'Computed' | translate }}\n                          </c8y-li>\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('icon', column)\"\n                            (keydown.enter)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                            [active]=\"column.type === 'icon'\"\n                          >\n                            {{ 'Icon' | translate }}\n                          </c8y-li>\n                        } @else {\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('default', column)\"\n                            (keydown.enter)=\"\n                              applyColumnType('default', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('default', column); $event.preventDefault()\n                            \"\n                            [active]=\"column.type === 'default'\"\n                          >\n                            {{ 'Default' | translate }}\n                          </c8y-li>\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('date', column)\"\n                            (keydown.enter)=\"\n                              applyColumnType('date', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('date', column); $event.preventDefault()\n                            \"\n                            [active]=\"column.type === 'date'\"\n                          >\n                            {{ 'Date' | translate }}\n                          </c8y-li>\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('icon', column)\"\n                            [active]=\"column.type === 'icon'\"\n                            (keydown.enter)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                          >\n                            {{ 'Icon' | translate }}\n                          </c8y-li>\n                        }\n                      </c8y-list-group>\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        @if (column.isOperation) {\n          <ng-container>\n            @if (true) {\n              <c8y-li-action\n                icon=\"edit1\"\n                [attr.aria-label]=\"'Edit' | translate\"\n                label=\"Edit\"\n                (click)=\"editOperationColumn(column)\"\n              ></c8y-li-action>\n            }\n            @if (true) {\n              <c8y-li-action\n                icon=\"delete\"\n                [attr.aria-label]=\"'Delete' | translate\"\n                label=\"Delete\"\n                (click)=\"deleteColumn(column)\"\n              ></c8y-li-action>\n            }\n          </ng-container>\n        }\n      </c8y-li>\n    }\n  }\n  @if (columns.length === 0) {\n    <c8y-ui-empty-state\n      [icon]=\"'list'\"\n      [title]=\"'No properties selected.' | translate\"\n      [subtitle]=\"'Select from the list which columns to display.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n</c8y-list-group>\n<div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n  <div\n    class=\"dropdown\"\n    container=\"body\"\n    dropdown\n    [insideClick]=\"true\"\n    c8yDropdownFocusTrap\n    #customActionsDropdown=\"bs-dropdown\"\n  >\n    <button\n      class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n      [title]=\"'Add action' | translate\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n      type=\"button\"\n      dropdownToggle\n    >\n      <i c8yIcon=\"cog\"></i>\n      <span>{{ 'Add action' | translate }}</span>\n      <span class=\"caret\"></span>\n    </button>\n    <ul\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <li>\n        <button\n          class=\"dropdown-item\"\n          type=\"button\"\n          (click)=\"onCreateOperation()\"\n        >\n          {{ 'Create operation' | translate }}\n        </button>\n      </li>\n      <li>\n        <button\n          class=\"dropdown-item\"\n          type=\"button\"\n          (click)=\"onToggleMaintenanceMode()\"\n          [disabled]=\"hasMaintenanceColumn\"\n        >\n          {{ 'Toggle maintenance mode' | translate }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { 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: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i1.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i1.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AssetTableGridSettingsComponent, isStandalone: true, selector: "c8y-asset-table-column-settings", host: { classAttribute: "bg-level-1" }, providers: [BsDropdownDirective], ngImport: i0, template: "<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-list-group\n    class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n    style=\"max-height: 300px\"\n    role=\"list\"\n    cdkDropList\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\n  >\n    @for (column of columns; track trackByColumnName($index, column)) {\n      @if (!column.positionFixed) {\n        <c8y-li\n          role=\"listitem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          [ngClass]=\"{ 'empty-actions': !column.isOperation }\"\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            [attr.aria-label]=\"'Drag to reorder' | translate\"\n            cdkDragHandle\n          >\n            <i\n              c8yIcon=\"drag-reorder\"\n              style=\"font-size: 0.7em\"\n            ></i>\n          </c8y-li-drag-handle>\n          @if (column.__origin !== 'status') {\n            <c8y-li-checkbox\n              class=\"a-s-stretch\"\n              title=\"{{ (column.header | translate) || column.name }} {{\n                column.custom ? (customLabel | translate) : ''\n              }}\"\n              [attr.aria-label]=\"'Show/hide column' | translate\"\n              [(ngModel)]=\"column.visible\"\n              (ngModelChange)=\"toggleColumnVisibility(column)\"\n              c8yProductExperience\n              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n            ></c8y-li-checkbox>\n          } @else {\n            <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n          }\n          <div class=\"content-flex-32 p-t-4 p-b-4\">\n            <div class=\"col-6\">\n              @if (column.__origin !== 'status') {\n                <label class=\"editable\">\n                  <input\n                    class=\"form-control input-sm\"\n                    [attr.aria-label]=\"'Column header' | translate\"\n                    placeholder=\"{{ 'Column header' | translate }}\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    required\n                    [(ngModel)]=\"column.header\"\n                    (keydown.enter)=\"updateColumnNames(column); $event.target.blur()\"\n                    (blur)=\"updateColumnNames(column)\"\n                  />\n                </label>\n              } @else {\n                <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n              }\n            </div>\n            <div class=\"col-6\">\n              <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n                <!-- Filters button -->\n                @if (column.filteringConfig) {\n                  <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      [insideClick]=\"true\"\n                      c8yDropdownFocusTrap\n                      #gridHeaderDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                        [attr.aria-label]=\"'Filter' | translate\"\n                        tooltip=\"{{ 'Filter' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                        dropdownToggle\n                      >\n                        <i c8yIcon=\"filter\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        (click)=\"$event.stopPropagation()\"\n                        *dropdownMenu\n                      >\n                        <formly-form\n                          class=\"p-16 d-block\"\n                          style=\"min-width: 250px\"\n                          [form]=\"column.filteringConfig.formGroup\"\n                          [fields]=\"column.filteringConfig.fields\"\n                          [model]=\"column.filteringConfig.model\"\n                        ></formly-form>\n                        <div class=\"p-16 fit-w d-flex separator-top\">\n                          <button\n                            class=\"btn btn-default btn-sm m-r-8 grow\"\n                            title=\"{{ 'Reset' | translate }}\"\n                            (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Reset\n                          </button>\n                          <button\n                            class=\"btn btn-primary btn-sm grow\"\n                            title=\"{{ 'Apply' | translate }}\"\n                            (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Apply\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Sort button -->\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <button\n                    class=\"btn btn-icon btn-default btn-xs\"\n                    [attr.aria-label]=\"'Sort order' | translate\"\n                    tooltip=\"{{ 'Sort order' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"changeSortOrder(column)\"\n                  >\n                    @if (column.sortOrder === 'asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    } @else if (column.sortOrder === 'desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    } @else {\n                      <i\n                        c8yIcon=\"exchange\"\n                        style=\"transform: rotate(90deg)\"\n                      ></i>\n                    }\n                  </button>\n                </div>\n                <!-- Column type dropdown -->\n                @if (!column.isOperation && column.__origin !== 'status') {\n                  <div\n                    class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                    [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                  >\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      c8yDropdownFocusTrap\n                      #columnTypeDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                        [attr.aria-label]=\"'Select render type' | translate\"\n                        tooltip=\"{{ 'Render type' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        dropdownToggle\n                      >\n                        {{ column.type | translate | humanize }}\n                        <i c8yIcon=\"caret-down\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        *dropdownMenu\n                      >\n                        <c8y-list-group role=\"list\">\n                          @if (column.type === 'computed' || column.computedConfig) {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (keydown.enter)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (click)=\"applyColumnType('computed', column)\"\n                              [active]=\"column.type === 'computed'\"\n                            >\n                              {{ 'Computed' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'icon'\"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          } @else {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('default', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'default'\"\n                            >\n                              {{ 'Default' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('date', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'date'\"\n                            >\n                              {{ 'Date' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              [active]=\"column.type === 'icon'\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          }\n                        </c8y-list-group>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (column.isOperation) {\n            <ng-container>\n              @if (true) {\n                <c8y-li-action\n                  icon=\"edit1\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  label=\"Edit\"\n                  (click)=\"editOperationColumn(column)\"\n                ></c8y-li-action>\n              }\n              @if (true) {\n                <c8y-li-action\n                  icon=\"delete\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  label=\"Delete\"\n                  (click)=\"deleteColumn(column)\"\n                ></c8y-li-action>\n              }\n            </ng-container>\n          }\n        </c8y-li>\n      }\n    }\n    @if (columns.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'list'\"\n        [title]=\"'No properties selected.' | translate\"\n        [subtitle]=\"'Select from the list which columns to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    }\n  </c8y-list-group>\n  <div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n    <button\n      class=\"btn btn-default btn-sm m-r-8\"\n      type=\"button\"\n      (click)=\"selectAssetAndProperty()\"\n    >\n      {{ 'Select properties' | translate }}\n    </button>\n    <div\n      class=\"dropdown\"\n      container=\"body\"\n      dropdown\n      c8yDropdownFocusTrap\n      #customActionsDropdown=\"bs-dropdown\"\n    >\n      <button\n        class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n        [title]=\"'Add action' | translate\"\n        [attr.aria-haspopup]=\"true\"\n        [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n        type=\"button\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"cog\"></i>\n        <span>{{ 'Add action' | translate }}</span>\n        <span class=\"caret\"></span>\n      </button>\n      <ul\n        class=\"dropdown-menu\"\n        *dropdownMenu\n      >\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            (click)=\"onCreateOperation()\"\n          >\n            {{ 'Create operation' | translate }}\n          </button>\n        </li>\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            (click)=\"onToggleMaintenanceMode()\"\n            [disabled]=\"hasMaintenanceColumn\"\n          >\n            {{ 'Toggle maintenance mode' | translate }}\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { 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: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i1.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i1.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetTableGridSettingsComponent, decorators: [{
             type: Component,
@@ -1905,55 +2040,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         EmptyStateComponent,
                         ListGroupModule,
                         NgClass
-                    ], providers: [BsDropdownDirective], template: "<c8y-list-group\n  class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n  style=\"max-height: 300px\"\n  role=\"list\"\n  cdkDropList\n  (cdkDropListDropped)=\"onColumnDrop($event)\"\n>\n  @for (column of columns; track trackByColumnName($index, column)) {\n    @if (!column.positionFixed) {\n      <c8y-li\n        role=\"listitem\"\n        cdkDrag\n        cdkDragLockAxis=\"y\"\n      >\n        <c8y-li-drag-handle\n          title=\"{{ 'Drag to reorder' | translate }}\"\n          [attr.aria-label]=\"'Drag to reorder' | translate\"\n          cdkDragHandle\n        >\n          <i\n            c8yIcon=\"drag-reorder\"\n            style=\"font-size: 0.7em\"\n          ></i>\n        </c8y-li-drag-handle>\n        @if (column.__origin !== 'status') {\n          <c8y-li-checkbox\n            class=\"a-s-stretch\"\n            title=\"{{ (column.header | translate) || column.name }} {{\n              column.custom ? (customLabel | translate) : ''\n            }}\"\n            [attr.aria-label]=\"'Show/hide column' | translate\"\n            [(ngModel)]=\"column.visible\"\n            (ngModelChange)=\"toggleColumnVisibility(column)\"\n            c8yProductExperience\n            [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n          ></c8y-li-checkbox>\n        } @else {\n          <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n        }\n        <div class=\"content-flex-32 p-t-4 p-b-4\">\n          <div class=\"col-6\">\n            @if (column.__origin !== 'status') {\n              <label class=\"editable\">\n                <input\n                  class=\"form-control input-sm\"\n                  [attr.aria-label]=\"'Column header' | translate\"\n                  placeholder=\"{{ 'Column header' | translate }}\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  required\n                  [(ngModel)]=\"column.header\"\n                  (keydown.enter)=\"updateColumnNames(column); $event.target.blur()\"\n                  (blur)=\"updateColumnNames(column)\"\n                />\n              </label>\n            } @else {\n              <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n            }\n          </div>\n          <div class=\"col-6\">\n            <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n              <!-- Filters button -->\n              @if (column.filteringConfig) {\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <div\n                    class=\"dropdown d-flex\"\n                    container=\"body\"\n                    dropdown\n                    [insideClick]=\"true\"\n                    c8yDropdownFocusTrap\n                    #gridHeaderDropdown=\"bs-dropdown\"\n                  >\n                    <button\n                      class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                      [attr.aria-label]=\"'Filter' | translate\"\n                      tooltip=\"{{ 'Filter' | translate }}\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [attr.aria-haspopup]=\"true\"\n                      [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                      type=\"button\"\n                      [delay]=\"500\"\n                      [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"filter\"></i>\n                    </button>\n                    <div\n                      class=\"dropdown-menu\"\n                      (click)=\"$event.stopPropagation()\"\n                      *dropdownMenu\n                    >\n                      <formly-form\n                        class=\"p-16 d-block\"\n                        style=\"min-width: 250px\"\n                        [form]=\"column.filteringConfig.formGroup\"\n                        [fields]=\"column.filteringConfig.fields\"\n                        [model]=\"column.filteringConfig.model\"\n                      ></formly-form>\n                      <div class=\"p-16 fit-w d-flex separator-top\">\n                        <button\n                          class=\"btn btn-default btn-sm m-r-8 grow\"\n                          title=\"{{ 'Reset' | translate }}\"\n                          (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                          translate\n                        >\n                          Reset\n                        </button>\n                        <button\n                          class=\"btn btn-primary btn-sm grow\"\n                          title=\"{{ 'Apply' | translate }}\"\n                          (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                          translate\n                        >\n                          Apply\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n              <!-- Sort button -->\n              <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                <button\n                  class=\"btn btn-icon btn-default btn-xs\"\n                  [attr.aria-label]=\"'Sort order' | translate\"\n                  tooltip=\"{{ 'Sort order' | translate }}\"\n                  placement=\"top\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"changeSortOrder(column)\"\n                >\n                  @if (column.sortOrder === 'asc') {\n                    <i c8yIcon=\"long-arrow-up\"></i>\n                  } @else if (column.sortOrder === 'desc') {\n                    <i c8yIcon=\"long-arrow-down\"></i>\n                  } @else {\n                    <i\n                      c8yIcon=\"exchange\"\n                      style=\"transform: rotate(90deg)\"\n                    ></i>\n                  }\n                </button>\n              </div>\n              <!-- Column type dropdown -->\n              @if (!column.isOperation && column.__origin !== 'status') {\n                <div\n                  class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                  [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                >\n                  <div\n                    class=\"dropdown d-flex\"\n                    container=\"body\"\n                    dropdown\n                    c8yDropdownFocusTrap\n                    #columnTypeDropdown=\"bs-dropdown\"\n                  >\n                    <button\n                      class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                      [attr.aria-label]=\"'Select render type' | translate\"\n                      tooltip=\"{{ 'Render type' | translate }}\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [attr.aria-haspopup]=\"true\"\n                      [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                      type=\"button\"\n                      [delay]=\"500\"\n                      dropdownToggle\n                    >\n                      {{ column.type | translate | humanize }}\n                      <i c8yIcon=\"caret-down\"></i>\n                    </button>\n                    <div\n                      class=\"dropdown-menu\"\n                      *dropdownMenu\n                    >\n                      <c8y-list-group role=\"list\">\n                        @if (column.type === 'computed' || column.computedConfig) {\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (keydown.enter)=\"\n                              applyColumnType('computed', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('computed', column); $event.preventDefault()\n                            \"\n                            (click)=\"applyColumnType('computed', column)\"\n                            [active]=\"column.type === 'computed'\"\n                          >\n                            {{ 'Computed' | translate }}\n                          </c8y-li>\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('icon', column)\"\n                            (keydown.enter)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                            [active]=\"column.type === 'icon'\"\n                          >\n                            {{ 'Icon' | translate }}\n                          </c8y-li>\n                        } @else {\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('default', column)\"\n                            (keydown.enter)=\"\n                              applyColumnType('default', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('default', column); $event.preventDefault()\n                            \"\n                            [active]=\"column.type === 'default'\"\n                          >\n                            {{ 'Default' | translate }}\n                          </c8y-li>\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('date', column)\"\n                            (keydown.enter)=\"\n                              applyColumnType('date', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('date', column); $event.preventDefault()\n                            \"\n                            [active]=\"column.type === 'date'\"\n                          >\n                            {{ 'Date' | translate }}\n                          </c8y-li>\n                          <c8y-li\n                            tabindex=\"0\"\n                            role=\"listitem\"\n                            (click)=\"applyColumnType('icon', column)\"\n                            [active]=\"column.type === 'icon'\"\n                            (keydown.enter)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                            (keydown.space)=\"\n                              applyColumnType('icon', column); $event.preventDefault()\n                            \"\n                          >\n                            {{ 'Icon' | translate }}\n                          </c8y-li>\n                        }\n                      </c8y-list-group>\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        @if (column.isOperation) {\n          <ng-container>\n            @if (true) {\n              <c8y-li-action\n                icon=\"edit1\"\n                [attr.aria-label]=\"'Edit' | translate\"\n                label=\"Edit\"\n                (click)=\"editOperationColumn(column)\"\n              ></c8y-li-action>\n            }\n            @if (true) {\n              <c8y-li-action\n                icon=\"delete\"\n                [attr.aria-label]=\"'Delete' | translate\"\n                label=\"Delete\"\n                (click)=\"deleteColumn(column)\"\n              ></c8y-li-action>\n            }\n          </ng-container>\n        }\n      </c8y-li>\n    }\n  }\n  @if (columns.length === 0) {\n    <c8y-ui-empty-state\n      [icon]=\"'list'\"\n      [title]=\"'No properties selected.' | translate\"\n      [subtitle]=\"'Select from the list which columns to display.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n</c8y-list-group>\n<div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n  <div\n    class=\"dropdown\"\n    container=\"body\"\n    dropdown\n    [insideClick]=\"true\"\n    c8yDropdownFocusTrap\n    #customActionsDropdown=\"bs-dropdown\"\n  >\n    <button\n      class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n      [title]=\"'Add action' | translate\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n      type=\"button\"\n      dropdownToggle\n    >\n      <i c8yIcon=\"cog\"></i>\n      <span>{{ 'Add action' | translate }}</span>\n      <span class=\"caret\"></span>\n    </button>\n    <ul\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <li>\n        <button\n          class=\"dropdown-item\"\n          type=\"button\"\n          (click)=\"onCreateOperation()\"\n        >\n          {{ 'Create operation' | translate }}\n        </button>\n      </li>\n      <li>\n        <button\n          class=\"dropdown-item\"\n          type=\"button\"\n          (click)=\"onToggleMaintenanceMode()\"\n          [disabled]=\"hasMaintenanceColumn\"\n        >\n          {{ 'Toggle maintenance mode' | translate }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n" }]
-        }] });
-
-class AssetTablePropertiesSelectorComponent {
-    constructor() {
-        this.widgetConfigService = inject(WidgetConfigService);
-        this.selectedProperties = [];
-        this.extraProperties = [];
-        this.inventoryService = inject(InventoryService);
-    }
-    async ngOnInit() {
-        this.asset = (await this.inventoryService.detail(this.widgetConfigService.currentConfig.device?.id)).data;
-        this.selectedProperties = this.widgetConfigService.currentConfig?.selectedProperties || [];
-        this.extraProperties = this.selectedProperties.filter(prop => prop?.computed);
-    }
-    selectProperties(selectedProperties) {
-        // if the selected properties name matches and the existing one has iconConfig, retain it
-        const updatedProperties = selectedProperties.map(prop => {
-            const existingProp = this.selectedProperties.find(p => p.name === prop.name);
-            if (existingProp?.iconConfig || existingProp?.columnType) {
-                return {
-                    ...prop,
-                    iconConfig: existingProp.iconConfig,
-                    columnType: existingProp.columnType
-                };
-            }
-            return prop;
-        });
-        this.widgetConfigService.updateConfig({ selectedProperties: updatedProperties });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetTablePropertiesSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AssetTablePropertiesSelectorComponent, isStandalone: true, selector: "c8y-asset-table-properties-selector", host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset bg-level-1 p-0 overflow-hidden m-t-0\">\n  <legend class=\"m-l-16\">{{ 'Select properties' | translate }}</legend>\n  <c8y-asset-property-list\n    class=\"inner-scroll bg-inherit d-block\"\n    style=\"max-height: 300px\"\n    [asset]=\"asset\"\n    [config]=\"{\n      selectMode: 'multi',\n      expansionMode: 'expandedByDefault',\n      allowAddingCustomProperties: true,\n      showValue: false,\n      showKey: false,\n      selectedProperties: selectedProperties\n    }\"\n    [extraProperties]=\"extraProperties\"\n    (selectedProperties)=\"selectProperties($event)\"\n  ></c8y-asset-property-list>\n</fieldset>\n<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-asset-table-column-settings></c8y-asset-table-column-settings>\n</fieldset>\n", dependencies: [{ kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: AssetTableGridSettingsComponent, selector: "c8y-asset-table-column-settings" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetTablePropertiesSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-asset-table-properties-selector', host: {
-                        class: 'bg-level-1'
-                    }, standalone: true, imports: [
-                        AssetPropertyListComponent,
-                        PopoverModule,
-                        TooltipModule,
-                        AssetTableGridSettingsComponent,
-                        C8yTranslatePipe
-                    ], template: "<fieldset class=\"c8y-fieldset bg-level-1 p-0 overflow-hidden m-t-0\">\n  <legend class=\"m-l-16\">{{ 'Select properties' | translate }}</legend>\n  <c8y-asset-property-list\n    class=\"inner-scroll bg-inherit d-block\"\n    style=\"max-height: 300px\"\n    [asset]=\"asset\"\n    [config]=\"{\n      selectMode: 'multi',\n      expansionMode: 'expandedByDefault',\n      allowAddingCustomProperties: true,\n      showValue: false,\n      showKey: false,\n      selectedProperties: selectedProperties\n    }\"\n    [extraProperties]=\"extraProperties\"\n    (selectedProperties)=\"selectProperties($event)\"\n  ></c8y-asset-property-list>\n</fieldset>\n<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-asset-table-column-settings></c8y-asset-table-column-settings>\n</fieldset>\n" }]
+                    ], providers: [BsDropdownDirective], template: "<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-list-group\n    class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n    style=\"max-height: 300px\"\n    role=\"list\"\n    cdkDropList\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\n  >\n    @for (column of columns; track trackByColumnName($index, column)) {\n      @if (!column.positionFixed) {\n        <c8y-li\n          role=\"listitem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          [ngClass]=\"{ 'empty-actions': !column.isOperation }\"\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            [attr.aria-label]=\"'Drag to reorder' | translate\"\n            cdkDragHandle\n          >\n            <i\n              c8yIcon=\"drag-reorder\"\n              style=\"font-size: 0.7em\"\n            ></i>\n          </c8y-li-drag-handle>\n          @if (column.__origin !== 'status') {\n            <c8y-li-checkbox\n              class=\"a-s-stretch\"\n              title=\"{{ (column.header | translate) || column.name }} {{\n                column.custom ? (customLabel | translate) : ''\n              }}\"\n              [attr.aria-label]=\"'Show/hide column' | translate\"\n              [(ngModel)]=\"column.visible\"\n              (ngModelChange)=\"toggleColumnVisibility(column)\"\n              c8yProductExperience\n              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n            ></c8y-li-checkbox>\n          } @else {\n            <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n          }\n          <div class=\"content-flex-32 p-t-4 p-b-4\">\n            <div class=\"col-6\">\n              @if (column.__origin !== 'status') {\n                <label class=\"editable\">\n                  <input\n                    class=\"form-control input-sm\"\n                    [attr.aria-label]=\"'Column header' | translate\"\n                    placeholder=\"{{ 'Column header' | translate }}\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    required\n                    [(ngModel)]=\"column.header\"\n                    (keydown.enter)=\"updateColumnNames(column); $event.target.blur()\"\n                    (blur)=\"updateColumnNames(column)\"\n                  />\n                </label>\n              } @else {\n                <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n              }\n            </div>\n            <div class=\"col-6\">\n              <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n                <!-- Filters button -->\n                @if (column.filteringConfig) {\n                  <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      [insideClick]=\"true\"\n                      c8yDropdownFocusTrap\n                      #gridHeaderDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                        [attr.aria-label]=\"'Filter' | translate\"\n                        tooltip=\"{{ 'Filter' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                        dropdownToggle\n                      >\n                        <i c8yIcon=\"filter\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        (click)=\"$event.stopPropagation()\"\n                        *dropdownMenu\n                      >\n                        <formly-form\n                          class=\"p-16 d-block\"\n                          style=\"min-width: 250px\"\n                          [form]=\"column.filteringConfig.formGroup\"\n                          [fields]=\"column.filteringConfig.fields\"\n                          [model]=\"column.filteringConfig.model\"\n                        ></formly-form>\n                        <div class=\"p-16 fit-w d-flex separator-top\">\n                          <button\n                            class=\"btn btn-default btn-sm m-r-8 grow\"\n                            title=\"{{ 'Reset' | translate }}\"\n                            (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Reset\n                          </button>\n                          <button\n                            class=\"btn btn-primary btn-sm grow\"\n                            title=\"{{ 'Apply' | translate }}\"\n                            (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Apply\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Sort button -->\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <button\n                    class=\"btn btn-icon btn-default btn-xs\"\n                    [attr.aria-label]=\"'Sort order' | translate\"\n                    tooltip=\"{{ 'Sort order' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"changeSortOrder(column)\"\n                  >\n                    @if (column.sortOrder === 'asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    } @else if (column.sortOrder === 'desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    } @else {\n                      <i\n                        c8yIcon=\"exchange\"\n                        style=\"transform: rotate(90deg)\"\n                      ></i>\n                    }\n                  </button>\n                </div>\n                <!-- Column type dropdown -->\n                @if (!column.isOperation && column.__origin !== 'status') {\n                  <div\n                    class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                    [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                  >\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      c8yDropdownFocusTrap\n                      #columnTypeDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                        [attr.aria-label]=\"'Select render type' | translate\"\n                        tooltip=\"{{ 'Render type' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        dropdownToggle\n                      >\n                        {{ column.type | translate | humanize }}\n                        <i c8yIcon=\"caret-down\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        *dropdownMenu\n                      >\n                        <c8y-list-group role=\"list\">\n                          @if (column.type === 'computed' || column.computedConfig) {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (keydown.enter)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (click)=\"applyColumnType('computed', column)\"\n                              [active]=\"column.type === 'computed'\"\n                            >\n                              {{ 'Computed' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'icon'\"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          } @else {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('default', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'default'\"\n                            >\n                              {{ 'Default' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('date', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'date'\"\n                            >\n                              {{ 'Date' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              [active]=\"column.type === 'icon'\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          }\n                        </c8y-list-group>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (column.isOperation) {\n            <ng-container>\n              @if (true) {\n                <c8y-li-action\n                  icon=\"edit1\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  label=\"Edit\"\n                  (click)=\"editOperationColumn(column)\"\n                ></c8y-li-action>\n              }\n              @if (true) {\n                <c8y-li-action\n                  icon=\"delete\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  label=\"Delete\"\n                  (click)=\"deleteColumn(column)\"\n                ></c8y-li-action>\n              }\n            </ng-container>\n          }\n        </c8y-li>\n      }\n    }\n    @if (columns.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'list'\"\n        [title]=\"'No properties selected.' | translate\"\n        [subtitle]=\"'Select from the list which columns to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    }\n  </c8y-list-group>\n  <div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n    <button\n      class=\"btn btn-default btn-sm m-r-8\"\n      type=\"button\"\n      (click)=\"selectAssetAndProperty()\"\n    >\n      {{ 'Select properties' | translate }}\n    </button>\n    <div\n      class=\"dropdown\"\n      container=\"body\"\n      dropdown\n      c8yDropdownFocusTrap\n      #customActionsDropdown=\"bs-dropdown\"\n    >\n      <button\n        class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n        [title]=\"'Add action' | translate\"\n        [attr.aria-haspopup]=\"true\"\n        [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n        type=\"button\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"cog\"></i>\n        <span>{{ 'Add action' | translate }}</span>\n        <span class=\"caret\"></span>\n      </button>\n      <ul\n        class=\"dropdown-menu\"\n        *dropdownMenu\n      >\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            (click)=\"onCreateOperation()\"\n          >\n            {{ 'Create operation' | translate }}\n          </button>\n        </li>\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            (click)=\"onToggleMaintenanceMode()\"\n            [disabled]=\"hasMaintenanceColumn\"\n          >\n            {{ 'Toggle maintenance mode' | translate }}\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</fieldset>\n" }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AssetTableGridSettingsComponent, AssetTablePropertiesSelectorComponent, AssetTableWidgetConfigComponent, AssetTableWidgetViewComponent };
+export { AssetTableGridSettingsComponent, AssetTableWidgetConfigComponent, AssetTableWidgetViewComponent };
 //# sourceMappingURL=c8y-ngx-components-widgets-implementations-asset-table.mjs.map