@c8y/ngx-components 1023.77.1 → 1023.78.4

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

@@ -6,7 +6,7 @@ import { FormGroup, FormBuilder, FormControl, Validators, FormsModule, ReactiveF
 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, BottomDrawerService, 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, WidgetActionWrapperComponent, 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, firstValueFrom, tap, BehaviorSubject, Subject, merge, startWith, scan, distinctUntilChanged, shareReplay, takeUntil, skip } from 'rxjs';
@@ -733,6 +733,11 @@ class AssetTableService {
                 const parts = prop.id.split('!!');
                 const propertyName = parts.length > 1 ? parts[1] : prop.id;
                 prop.name = propertyName;
+                // Use legacy config._id as instanceId so multiple computed columns sharing the
+                // same base name (e.g. two "lastMeasurement" data-point columns) are kept distinct.
+                if (prop.config?._id) {
+                    prop.instanceId = prop.config._id;
+                }
             }
             prop.active = prop.__active;
             // last keypath segment is used as name if name is not provided
@@ -750,7 +755,12 @@ class AssetTableService {
             widgetInstanceGlobalAutoRefreshContext: config.widgetInstanceGlobalAutoRefreshContext ?? null,
             widgetInstanceGlobalTimeContext: config.widgetInstanceGlobalTimeContext ?? false,
             showAsLink: config.showAsLink ?? true,
-            showStatusIcon: config.showStatusIcon ?? true
+            showStatusIcon: config.showStatusIcon ?? true,
+            displayOptions: {
+                ...config.displayOptions,
+                gridHeader: false,
+                footer: false
+            }
         };
     }
     migrateToLegacyProperties(config) {
@@ -1524,7 +1534,8 @@ class AssetTableWidgetConfigComponent {
                 filter: [true],
                 hover: [true],
                 showLoadingIndicator: [true],
-                configurableColumnsEnabled: [true]
+                configurableColumnsEnabled: [true],
+                footer: [true]
             }),
             filterPredicate: [],
             showIconAndValue: [true],
@@ -1534,7 +1545,7 @@ class AssetTableWidgetConfigComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetTableWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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          <!-- footer -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display the table footer' | translate\"\n          >\n            <input\n              name=\"footer\"\n              type=\"checkbox\"\n              formControlName=\"footer\"\n            />\n            <span></span>\n            <span translate>Table footer</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.19", ngImport: i0, type: AssetTableWidgetConfigComponent, decorators: [{
             type: Component,
@@ -1545,7 +1556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         AssetTableAutoRefreshComponent,
                         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" }]
+                    ], 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          <!-- footer -->\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            [title]=\"'Display the table footer' | translate\"\n          >\n            <input\n              name=\"footer\"\n              type=\"checkbox\"\n              formControlName=\"footer\"\n            />\n            <span></span>\n            <span translate>Table footer</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']
@@ -1620,11 +1631,11 @@ class AssetTableWidgetViewComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetTableWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AssetTableWidgetViewComponent, isStandalone: true, selector: "c8y-asset-table-widget-view", inputs: { config: "config" }, ngImport: i0, template: "@if (!config.widgetInstanceGlobalTimeContext) {\n  <c8y-asset-table-auto-refresh\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"!!config.refreshInterval\"\n    [refreshInterval]=\"config.refreshInterval\"\n    [config]=\"config\"\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]=\"config.title\"\n  [displayOptions]=\"config.displayOptions\"\n  [columns]=\"columns\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  [pagination]=\"pagination\"\n  (onPageSizeChange)=\"pagination = $event.pagination\"\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", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { 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: "ngmodule", type: RouterModule }, { kind: "component", type: AssetTableAutoRefreshComponent, selector: "c8y-asset-table-auto-refresh", inputs: ["config", "isIntervalRefresh", "refreshInterval", "isLoading", "isScrolling", "isRefreshDisabled"], outputs: ["onCountdownEnded"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AssetTableWidgetViewComponent, isStandalone: true, selector: "c8y-asset-table-widget-view", inputs: { config: "config" }, host: { properties: { "class.hide-footer": "config?.displayOptions?.footer === false" } }, ngImport: i0, template: "@if (!config.widgetInstanceGlobalTimeContext) {\n  <c8y-widget-action>\n    <c8y-asset-table-auto-refresh\n      class=\"d-contents\"\n      [isIntervalRefresh]=\"!!config.refreshInterval\"\n      [refreshInterval]=\"config.refreshInterval\"\n      [config]=\"config\"\n      [isRefreshDisabled]=\"false\"\n      [isLoading]=\"isLoading$\"\n      (onCountdownEnded)=\"updateSelectedAssets()\"\n    ></c8y-asset-table-auto-refresh>\n  </c8y-widget-action>\n}\n<c8y-data-grid\n  class=\"content-fullpage d-flex d-col\"\n  [title]=\"config.title\"\n  [displayOptions]=\"config.displayOptions\"\n  [columns]=\"columns\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  [pagination]=\"pagination\"\n  (onPageSizeChange)=\"pagination = $event.pagination\"\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", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { 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: "ngmodule", type: RouterModule }, { kind: "component", type: AssetTableAutoRefreshComponent, selector: "c8y-asset-table-auto-refresh", inputs: ["config", "isIntervalRefresh", "refreshInterval", "isLoading", "isScrolling", "isRefreshDisabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: WidgetActionWrapperComponent, selector: "c8y-widget-action" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AssetTableWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-asset-table-widget-view', standalone: true, imports: [CoreModule, RouterModule, AssetTableAutoRefreshComponent], template: "@if (!config.widgetInstanceGlobalTimeContext) {\n  <c8y-asset-table-auto-refresh\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"!!config.refreshInterval\"\n    [refreshInterval]=\"config.refreshInterval\"\n    [config]=\"config\"\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]=\"config.title\"\n  [displayOptions]=\"config.displayOptions\"\n  [columns]=\"columns\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  [pagination]=\"pagination\"\n  (onPageSizeChange)=\"pagination = $event.pagination\"\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" }]
+            args: [{ selector: 'c8y-asset-table-widget-view', standalone: true, imports: [CoreModule, RouterModule, AssetTableAutoRefreshComponent, WidgetActionWrapperComponent], host: { '[class.hide-footer]': 'config?.displayOptions?.footer === false' }, template: "@if (!config.widgetInstanceGlobalTimeContext) {\n  <c8y-widget-action>\n    <c8y-asset-table-auto-refresh\n      class=\"d-contents\"\n      [isIntervalRefresh]=\"!!config.refreshInterval\"\n      [refreshInterval]=\"config.refreshInterval\"\n      [config]=\"config\"\n      [isRefreshDisabled]=\"false\"\n      [isLoading]=\"isLoading$\"\n      (onCountdownEnded)=\"updateSelectedAssets()\"\n    ></c8y-asset-table-auto-refresh>\n  </c8y-widget-action>\n}\n<c8y-data-grid\n  class=\"content-fullpage d-flex d-col\"\n  [title]=\"config.title\"\n  [displayOptions]=\"config.displayOptions\"\n  [columns]=\"columns\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  [pagination]=\"pagination\"\n  (onPageSizeChange)=\"pagination = $event.pagination\"\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" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -1934,7 +1945,14 @@ class AssetTableGridSettingsComponent {
     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);
+            const existingProp = this.selectedProperties.find(p => {
+                if (prop.instanceId) {
+                    return p.name === prop.name && p.instanceId === prop.instanceId;
+                }
+                else {
+                    return p.name === prop.name;
+                }
+            });
             if (existingProp?.iconConfig || existingProp?.columnType || existingProp?.columnLabel) {
                 return {
                     ...prop,