@c8y/ngx-components 1023.48.3 → 1023.52.0

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

@@ -0,0 +1,1959 @@
+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 * 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 { 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 { 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 * as i1$2 from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
+import * as i3 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { isEqual } from 'lodash-es';
+import { RouterModule } from '@angular/router';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import * as i3$2 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 { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
+
+class DateCellRendererComponent {
+    constructor(context, columnUtilService) {
+        this.context = context;
+        this.columnUtilService = columnUtilService;
+        this.isLink = false;
+        this.href = null;
+    }
+    ngOnInit() {
+        this.isLink = !!this.context?.property?.isLink;
+        this.href = this.isLink ? this.columnUtilService.getHref(this.context.item) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateCellRendererComponent, deps: [{ token: i1.CellRendererContext }, { token: i2.ColumnUtilService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DateCellRendererComponent, isStandalone: true, selector: "c8y-date-cell-renderer", ngImport: i0, template: `
+    @if (isLink) {
+      <a [href]="href">
+        {{ context.value | c8yDate }}
+      </a>
+    } @else {
+      {{ context.value | c8yDate }}
+    }
+  `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    @if (isLink) {
+      <a [href]="href">
+        {{ context.value | c8yDate }}
+      </a>
+    } @else {
+      {{ context.value | c8yDate }}
+    }
+  `,
+                    selector: 'c8y-date-cell-renderer',
+                    imports: [DatePipe]
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }, { type: i2.ColumnUtilService }] });
+
+const GLOBAL_INTERVAL_OPTION = 'global-interval';
+const DEFAULT_INTERVAL_VALUE = 30_000;
+const COMPARISON_OPTIONS = {
+    number: [
+        { label: gettext('Greater than'), value: 'GREATER_THAN', sign: '>' },
+        { label: gettext('Less than'), value: 'LESS_THAN', sign: '<' },
+        { label: gettext('Equal'), value: 'EQUAL', sign: '===' },
+        { label: gettext('Not equal'), value: 'NOT_EQUAL', sign: '!==' }
+    ],
+    date: [
+        { label: gettext('Before `date`'), value: 'BEFORE', sign: '<' },
+        { label: gettext('After `date`'), value: 'AFTER', sign: '>' },
+        { label: gettext('On `date`'), value: 'ON', sign: '===' }
+    ],
+    string: [
+        { label: gettext('Contains'), value: 'CONTAINS', sign: 'includes' },
+        { label: gettext('Equal'), value: 'EQUAL', sign: '===' },
+        { label: gettext('Not equal'), value: 'NOT_EQUAL', sign: '!==' },
+        { label: gettext('Starts with'), value: 'STARTS_WITH', sign: 'startsWith' },
+        { label: gettext('Ends with'), value: 'ENDS_WITH', sign: 'endsWith' }
+    ],
+    boolean: [
+        { label: gettext('Is true'), value: 'IS_TRUE', sign: 'true' },
+        { label: gettext('Is false'), value: 'IS_FALSE', sign: 'false' }
+    ]
+};
+class BaseColumnExtended extends BaseColumn {
+}
+class CustomColumnExtended extends CustomColumn {
+}
+class AlarmsDeviceGridColumnExtended extends AlarmsDeviceGridColumn {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+    }
+}
+
+class DateAssetTableGridColumn extends BaseColumnExtended {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.path = this.path;
+        this.name = this.name;
+        this.header = this.header;
+        this.type = 'date';
+        this.cellRendererComponent = DateCellRendererComponent;
+        this.filterable = true;
+        this.filteringConfig = {
+            fields: [
+                {
+                    fieldGroup: [
+                        {
+                            type: 'date-time',
+                            key: 'after',
+                            templateOptions: {
+                                label: gettext('From date')
+                            },
+                            expressionProperties: {
+                                'templateOptions.maxDate': (model) => model?.before
+                            }
+                        },
+                        {
+                            type: 'date-time',
+                            key: 'before',
+                            templateOptions: {
+                                label: gettext('To date')
+                            },
+                            expressionProperties: {
+                                'templateOptions.minDate': (model) => model?.after
+                            }
+                        }
+                    ],
+                    validators: {
+                        atLeastOneFilled: {
+                            expression: (formGroup) => {
+                                const after = formGroup.get('after')?.value;
+                                const before = formGroup.get('before')?.value;
+                                return !!after || !!before;
+                            },
+                            message: gettext('Specify at least one date.')
+                        }
+                    }
+                }
+            ],
+            formGroup: new FormGroup({}),
+            getFilter: model => {
+                const filter = {};
+                const dates = model;
+                if (dates && (dates.after || dates.before)) {
+                    filter.__and = [];
+                    if (dates.after) {
+                        const after = this.formatDate(dates.after);
+                        filter.__and.push({
+                            [`${this.path}.date`]: { __gt: after }
+                        });
+                    }
+                    if (dates.before) {
+                        const before = this.formatDate(dates.before);
+                        filter.__and.push({
+                            [`${this.path}.date`]: { __lt: before }
+                        });
+                    }
+                }
+                return filter;
+            }
+        };
+        this.sortable = true;
+        this.sortingConfig = {
+            pathSortingConfigs: [{ path: `${this.path}.date` }]
+        };
+    }
+    formatDate(dateToFormat) {
+        return new Date(dateToFormat).toISOString();
+    }
+}
+
+class IconCellRendererComponent {
+    constructor(context, computedPropertyService, columnUtilService) {
+        this.context = context;
+        this.computedPropertyService = computedPropertyService;
+        this.columnUtilService = columnUtilService;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.computed$ = null;
+    }
+    async ngOnInit() {
+        if (this.context.property.computedConfig) {
+            this.computed$ = this.getComputedValue(this.context.property, this.context.item);
+        }
+    }
+    getComputedValue(property, context) {
+        return from(this.computedPropertyService.getByName(property.name)).pipe(switchMap(definition => {
+            let value = '-';
+            runInInjectionContext(definition.injector, () => {
+                if (property.computedConfig?.dp?.length > 0) {
+                    property.computedConfig.dp[0].__target = { ...context };
+                }
+                value = definition.value({
+                    config: property.computedConfig,
+                    context,
+                    metadata: { mode: 'singleValue' }
+                });
+            });
+            if (isObservable(value) || value instanceof Promise) {
+                return value;
+            }
+            else {
+                return of(value);
+            }
+        }));
+    }
+    matchedCondition(cellValue) {
+        const iconConfigs = this.context?.property?.iconConfig;
+        if (!Array.isArray(iconConfigs))
+            return null;
+        return (iconConfigs.find(config => {
+            const { comparison, value } = config;
+            if (!comparison || value === undefined || value === null)
+                return false;
+            return this.evaluateCondition(cellValue, comparison.value, value);
+        }) ?? null);
+    }
+    resolveValue(context) {
+        const { item, property } = context;
+        if (!item || !property) {
+            return undefined;
+        }
+        const path = property.path;
+        if (Array.isArray(path)) {
+            return path.reduce((acc, key) => acc?.[key], item);
+        }
+        return item[path];
+    }
+    evaluateCondition(cellValue, operator, value) {
+        switch (operator) {
+            case 'GREATER_THAN':
+                return cellValue > value;
+            case 'LESS_THAN':
+                return cellValue < value;
+            case 'EQUAL':
+                return cellValue === value;
+            case 'NOT_EQUAL':
+                return cellValue !== value;
+            case 'CONTAINS':
+                return typeof cellValue === 'string' && cellValue.includes(value);
+            case 'STARTS_WITH':
+                return typeof cellValue === 'string' && cellValue.startsWith(value);
+            case 'ENDS_WITH':
+                return typeof cellValue === 'string' && cellValue.endsWith(value);
+            case 'IS_TRUE':
+                return cellValue === true;
+            case 'IS_FALSE':
+                return cellValue === false;
+            case 'BEFORE':
+                return new Date(cellValue) < new Date(value);
+            case 'AFTER':
+                return new Date(cellValue) > new Date(value);
+            case 'ON':
+                return (new Date(cellValue).toDateString() === new Date(value).toDateString());
+            default:
+                return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconCellRendererComponent, deps: [{ token: i1.CellRendererContext }, { token: i2$1.ComputedPropertiesService }, { token: i2.ColumnUtilService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconCellRendererComponent, isStandalone: true, selector: "c8y-icon-cell-renderer", ngImport: i0, template: ` <ng-template #iconAndValueTemplate let-value>
+      @if (matchedCondition(value); as match) {
+        <i class="m-r-4" [c8yIcon]="match.icon" [style.color]="match.color"></i>
+        @if (context.property.showIconAndValue) {
+          <span class="text-truncate" [title]="value">{{ value }}</span>
+        }
+      } @else {
+        <span class="text-truncate" [title]="value">{{ value }}</span>
+      }
+    </ng-template>
+
+    @if (context?.property?.isLink) {
+      <a class="d-flex a-i-center text-truncate" [href]="columnUtilService.getHref(context.item)">
+        @if (computed$ | async; as computed) {
+          <ng-container
+            *ngTemplateOutlet="iconAndValueTemplate; context: { $implicit: computed }"
+          ></ng-container>
+        } @else {
+          <ng-container
+            *ngTemplateOutlet="
+              iconAndValueTemplate;
+              context: {
+                $implicit: resolveValue(context)
+              }
+            "
+          ></ng-container>
+        }
+      </a>
+    } @else {
+      <div class="d-flex a-i-center text-truncate">
+        @if (computed$ | async; as computed) {
+          <ng-container
+            *ngTemplateOutlet="iconAndValueTemplate; context: { $implicit: computed }"
+          ></ng-container>
+        } @else {
+          <ng-container
+            *ngTemplateOutlet="
+              iconAndValueTemplate;
+              context: {
+                $implicit: resolveValue(context)
+              }
+            "
+          ></ng-container>
+        }
+      </div>
+    }`, isInline: true, dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ` <ng-template #iconAndValueTemplate let-value>
+      @if (matchedCondition(value); as match) {
+        <i class="m-r-4" [c8yIcon]="match.icon" [style.color]="match.color"></i>
+        @if (context.property.showIconAndValue) {
+          <span class="text-truncate" [title]="value">{{ value }}</span>
+        }
+      } @else {
+        <span class="text-truncate" [title]="value">{{ value }}</span>
+      }
+    </ng-template>
+
+    @if (context?.property?.isLink) {
+      <a class="d-flex a-i-center text-truncate" [href]="columnUtilService.getHref(context.item)">
+        @if (computed$ | async; as computed) {
+          <ng-container
+            *ngTemplateOutlet="iconAndValueTemplate; context: { $implicit: computed }"
+          ></ng-container>
+        } @else {
+          <ng-container
+            *ngTemplateOutlet="
+              iconAndValueTemplate;
+              context: {
+                $implicit: resolveValue(context)
+              }
+            "
+          ></ng-container>
+        }
+      </a>
+    } @else {
+      <div class="d-flex a-i-center text-truncate">
+        @if (computed$ | async; as computed) {
+          <ng-container
+            *ngTemplateOutlet="iconAndValueTemplate; context: { $implicit: computed }"
+          ></ng-container>
+        } @else {
+          <ng-container
+            *ngTemplateOutlet="
+              iconAndValueTemplate;
+              context: {
+                $implicit: resolveValue(context)
+              }
+            "
+          ></ng-container>
+        }
+      </div>
+    }`,
+                    selector: 'c8y-icon-cell-renderer',
+                    imports: [AsyncPipe, IconDirective, NgTemplateOutlet]
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }, { type: i2$1.ComputedPropertiesService }, { type: i2.ColumnUtilService }] });
+
+class IconAssetTableGridColumn extends BaseColumnExtended {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.path = this.path;
+        this.name = this.name;
+        this.header = this.header;
+        this.computedConfig = this.computedConfig;
+        this.type = 'icon';
+        this.cellRendererComponent = IconCellRendererComponent;
+        this.iconConfig = this.iconConfig;
+        this.showIconAndValue = this.showIconAndValue;
+        this.filterable = false;
+        this.sortable = false;
+    }
+}
+
+class OperationCellRendererComponent {
+    constructor() {
+        this.operations = inject(OperationService);
+        this.alertService = inject(AlertService);
+        this.inventoryService = inject(InventoryService);
+        this.translateService = inject(TranslateService);
+        this.context = inject(CellRendererContext);
+        this.shouldShowButton = computed(() => {
+            const operationType = this.context.property?.operationType;
+            const device = this.context.item;
+            if (operationType !== 'maintenance') {
+                return true;
+            }
+            return this.canSwitchResponseInterval(device);
+        }, ...(ngDevMode ? [{ debugName: "shouldShowButton" }] : []));
+    }
+    async onOperationClick() {
+        const operationType = this.context.property?.operationType;
+        const device = this.context.item;
+        try {
+            if (operationType === 'maintenance') {
+                let payload;
+                if (this.canSwitchResponseInterval(device)) {
+                    payload = {
+                        id: device.id,
+                        c8y_RequiredAvailability: {
+                            responseInterval: -device.c8y_RequiredAvailability.responseInterval
+                        }
+                    };
+                }
+                else {
+                    payload = { id: device.id, c8y_RequiredAvailability: null };
+                }
+                await this.inventoryService.update(payload);
+                this.alertService.success(gettext('Maintenance mode toggled.'));
+            }
+            else {
+                const deviceId = this.context.value;
+                const commandBody = typeof this.context.property.command === 'string'
+                    ? JSON.parse(this.context.property.command)
+                    : this.context.property.command;
+                const body = { deviceId, ...commandBody };
+                await this.operations.create(body);
+                this.alertService.success(gettext('Operation created.'));
+            }
+        }
+        catch (error) {
+            this.alertService.danger(this.translateService.instant(gettext('Failed to execute operation: "{{ errorMessage }}"'), {
+                errorMessage: this.translateService.instant(error.message)
+            }));
+        }
+    }
+    canSwitchResponseInterval(device) {
+        return (device &&
+            device.c8y_RequiredAvailability &&
+            device.c8y_RequiredAvailability.responseInterval &&
+            parseInt(device.c8y_RequiredAvailability.responseInterval, 10) !== 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OperationCellRendererComponent, isStandalone: true, selector: "c8y-operation-cell-renderer", ngImport: i0, template: `
+    @if (shouldShowButton()) {
+      <button class="btn btn-primary btn-sm" type="button" (click)="onOperationClick()">
+        {{ context.property?.name ?? '' | translate }}
+      </button>
+    } @else {
+      <span class="text-muted">-</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-operation-cell-renderer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (shouldShowButton()) {
+      <button class="btn btn-primary btn-sm" type="button" (click)="onOperationClick()">
+        {{ context.property?.name ?? '' | translate }}
+      </button>
+    } @else {
+      <span class="text-muted">-</span>
+    }
+  `,
+                    imports: [CommonModule]
+                }]
+        }] });
+
+class OperationAssetTableGridColumn extends BaseColumnExtended {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.path = this.path;
+        this.name = this.name;
+        this.header = this.header || gettext('Operation');
+        this.type = 'operation';
+        this.cellRendererComponent = OperationCellRendererComponent;
+        this.command = this.command;
+        this.isOperation = true;
+        this.operationType = this.operationType || 'operation';
+        this.filterable = false;
+        this.sortable = false;
+    }
+}
+
+class ComputedCellRendererComponent {
+    constructor(context, computedPropertyService) {
+        this.context = context;
+        this.computedPropertyService = computedPropertyService;
+    }
+    ngOnInit() {
+        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 => {
+            let value = '-';
+            runInInjectionContext(definition.injector, () => {
+                if (this.context?.property.computedConfig?.dp?.length > 0) {
+                    this.context.property.computedConfig.dp[0].__target = { ...context };
+                }
+                value = definition.value({
+                    config: this.context?.property.computedConfig,
+                    context,
+                    metadata: { mode: 'singleValue' }
+                });
+            });
+            if (isObservable(value) || value instanceof Promise) {
+                return value;
+            }
+            else {
+                return of(value);
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComputedCellRendererComponent, deps: [{ token: i1.CellRendererContext }, { token: i2$1.ComputedPropertiesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ComputedCellRendererComponent, isStandalone: true, selector: "c8y-computed-cell-renderer", ngImport: i0, template: `{{ computedValue | async }}`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComputedCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `{{ computedValue | async }}`,
+                    selector: 'c8y-computed-cell-renderer',
+                    imports: [AsyncPipe]
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }, { type: i2$1.ComputedPropertiesService }] });
+
+class ComputedAssetTableGridColumn extends BaseColumnExtended {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.name = this.name;
+        this.header = this.header;
+        this.computedConfig = this.computedConfig;
+        this.visible = this.visible;
+        this.type = 'computed';
+        this.cellRendererComponent = ComputedCellRendererComponent;
+        this.filterable = false;
+        this.sortable = true;
+    }
+}
+
+class DefaultCellRendererComponent {
+    constructor(context, columnUtilService) {
+        this.context = context;
+        this.columnUtilService = columnUtilService;
+        this.isLink = false;
+        this.href = null;
+        this.displayValue = null;
+    }
+    ngOnInit() {
+        this.isLink = !!this.context?.property?.isLink;
+        this.href = this.isLink ? this.columnUtilService.getHref(this.context.item) : null;
+        this.displayValue = this.formatValue(this.context.value);
+    }
+    formatValue(value) {
+        if (typeof value === 'object') {
+            return JSON.stringify(value);
+        }
+        return String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DefaultCellRendererComponent, deps: [{ token: i1.CellRendererContext }, { token: i2.ColumnUtilService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DefaultCellRendererComponent, isStandalone: true, selector: "c8y-text-cell-renderer", ngImport: i0, template: `
+    @if (isLink) {
+      <a [href]="href">{{ displayValue }}</a>
+    } @else {
+      {{ displayValue }}
+    }
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DefaultCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    @if (isLink) {
+      <a [href]="href">{{ displayValue }}</a>
+    } @else {
+      {{ displayValue }}
+    }
+  `,
+                    selector: 'c8y-text-cell-renderer'
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }, { type: i2.ColumnUtilService }] });
+
+class DefaultAssetTableGridColumn extends CustomColumnExtended {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.type = this.type || 'default';
+        this.isLink = this.isLink || false;
+        this.cellRendererComponent = DefaultCellRendererComponent;
+        this.filterable = true;
+        this.sortable = true;
+    }
+}
+
+class AssetTableService {
+    constructor(inventoryService) {
+        this.inventoryService = inventoryService;
+        this.queriesUtil = new QueriesUtil();
+    }
+    getColumns(selectedProperties, operationColumns, config) {
+        const firstLinkableIndex = this.getFirstLinkableIndex(selectedProperties, config);
+        const propertyColumns = this.buildPropertyColumns(selectedProperties, firstLinkableIndex, config);
+        const opColumns = this.buildOperationColumns(operationColumns);
+        let allColumns = [...propertyColumns, ...opColumns];
+        if (config?.showStatusIcon) {
+            const statusCol = new StatusDeviceGridColumn();
+            statusCol.__origin = 'status';
+            statusCol.__id = 'status';
+            allColumns = [statusCol, ...allColumns];
+        }
+        return this.applySortingAndOrdering(allColumns, config);
+    }
+    buildAssetQueryObj(config) {
+        const assetFilter = config.device
+            ? [
+                {
+                    __or: [
+                        config.includeDescendants
+                            ? { __isinhierarchyof: config.device.id }
+                            : config.isDeviceAssetSelected
+                                ? { id: config.device.id }
+                                : { __bygroupid: config.device.id }
+                    ]
+                }
+            ]
+            : [];
+        return {
+            __and: [
+                ...assetFilter,
+                {
+                    __or: [
+                        { __has: 'c8y_IsDevice' },
+                        { __has: 'c8y_IsAsset' },
+                        { __has: 'c8y_IsDeviceGroup' }
+                    ]
+                }
+            ]
+        };
+    }
+    getAssets(config, columns, preConfiguredFilter = {}, pagination = { pageSize: 100 }) {
+        const queryObj = this.buildAssetQueryObj(config);
+        const columnQueryObj = this.getQueryObj(columns);
+        const preConfigFilterObj = this.extractFilters(preConfiguredFilter);
+        const filterQuery = this.buildAndFilterQuery(preConfigFilterObj);
+        const andConditions = [queryObj];
+        if (Object.keys(columnQueryObj.__filter).length > 0) {
+            andConditions.push({ __filter: columnQueryObj.__filter });
+        }
+        if (Object.keys(preConfigFilterObj).length > 0) {
+            andConditions.push({ __filter: filterQuery });
+        }
+        const combinedQueryObj = {
+            __filter: {
+                __and: andConditions
+            },
+            __orderby: columnQueryObj.__orderby
+        };
+        const query = this.queriesUtil.buildQuery(combinedQueryObj);
+        return this.inventoryService.list({
+            query,
+            pageSize: pagination.pageSize,
+            currentPage: pagination.currentPage || 1,
+            withTotalElements: true,
+            withTotalPages: true
+        });
+    }
+    migrateLegacyProperties(config) {
+        if (!config?.options?.properties) {
+            return config;
+        }
+        const selectedProperties = [];
+        const operationColumns = [];
+        for (const prop of config.options.properties) {
+            const isOperation = prop?.renderType === 'operationButton' || prop?.isAction;
+            if (isOperation) {
+                operationColumns.push({
+                    header: prop.label,
+                    operationType: prop.renderConfig?.actionType === 'toggleMaintenanceMode' ? 'maintenance' : 'operation',
+                    operation: null,
+                    command: JSON.stringify(prop?.config?.args?.[0] ?? {
+                        description: 'Command description',
+                        c8y_Command: { text: '<command>' }
+                    }, null, 2),
+                    buttonLabel: prop.renderConfig?.label ?? prop.label
+                });
+                continue;
+            }
+            // Map old renderConfig.map -> iconConfig using proper comparison
+            if (prop.renderConfig?.map &&
+                Array.isArray(prop.renderConfig.map) &&
+                prop.renderType === 'iconMap') {
+                prop.columnType = 'icon';
+                prop.name = prop.name || prop.keyPath?.[0] || prop.label;
+                prop.iconConfig = prop.renderConfig.map.map((mapItem) => {
+                    const comparisonObj = this.lookupComparison(mapItem.comparison);
+                    return {
+                        comparison: comparisonObj,
+                        color: mapItem.color,
+                        icon: mapItem.icon,
+                        value: mapItem.value
+                    };
+                });
+            }
+            // preserve computed properties and build c8y_JsonSchema
+            if (prop.computed) {
+                prop.c8y_JsonSchema = this.convertIdToJsonSchema(prop);
+                const parts = prop.id.split('!!');
+                const propertyName = parts.length > 1 ? parts[1] : prop.id;
+                prop.name = propertyName;
+            }
+            prop.active = prop.__active;
+            // last keypath segment is used as name if name is not provided
+            prop.name = prop.name || prop.keyPath?.[prop.keyPath.length - 1] || prop.label;
+            selectedProperties.push(prop);
+        }
+        return {
+            ...config,
+            selectedProperties,
+            operationColumns,
+            refreshInterval: config.refreshInterval ?? 30000,
+            refreshOption: config.refreshOption ?? 'interval',
+            includeDescendants: config.includeDescendants ?? false,
+            isDeviceAssetSelected: config.isDeviceAssetSelected ?? true,
+            widgetInstanceGlobalAutoRefreshContext: config.widgetInstanceGlobalAutoRefreshContext ?? null,
+            widgetInstanceGlobalTimeContext: config.widgetInstanceGlobalTimeContext ?? false,
+            showAsLink: config.showAsLink ?? true,
+            showStatusIcon: config.showStatusIcon ?? true
+        };
+    }
+    migrateToLegacyProperties(config) {
+        if (config.options) {
+            delete config.options.properties;
+        }
+        const properties = [];
+        // Convert selectedProperties back to legacy format
+        for (const prop of config.selectedProperties || []) {
+            const legacyProp = { ...prop };
+            // Restore computed property fields
+            if (prop.computed) {
+                legacyProp.__active = prop.active;
+                legacyProp.id = prop.name ? `c8ySchema!!${prop.name}` : prop.id;
+                legacyProp.label = prop.header || prop.label || prop.name;
+                legacyProp.type = prop.c8y_JsonSchema?.properties?.[prop.name]?.type || 'string';
+                legacyProp.computed = true;
+            }
+            // Restore iconMap
+            if (prop.columnType === 'icon' && Array.isArray(prop.iconConfig)) {
+                legacyProp.renderType = 'iconMap';
+                legacyProp.renderConfig = {
+                    map: prop.iconConfig.map((icon) => ({
+                        comparison: icon.comparison?.value ?? icon.comparison,
+                        color: icon.color,
+                        icon: icon.icon,
+                        value: icon.value
+                    }))
+                };
+            }
+            // Restore alarm type
+            if (prop.columnType === 'alarm') {
+                legacyProp.renderType = 'alarm';
+            }
+            // Restore default type
+            if (!prop.columnType || prop.columnType === 'default' || prop.columnType === 'base') {
+                legacyProp.renderType = 'default';
+            }
+            legacyProp.id = 'c8ySchema!!' + prop.name;
+            legacyProp.__active = prop.active;
+            properties.push(legacyProp);
+        }
+        // Convert operationColumns back to legacy format
+        for (const op of config.operationColumns || []) {
+            let commandObj;
+            if (typeof op.command === 'string') {
+                try {
+                    commandObj = JSON.parse(op.command);
+                }
+                catch {
+                    commandObj = op.command; // fallback if not valid JSON
+                }
+            }
+            else {
+                commandObj = op.command;
+            }
+            properties.push({
+                label: op.header,
+                renderType: 'operationButton',
+                isAction: true,
+                renderConfig: {
+                    args: Array.isArray(commandObj) ? commandObj : [commandObj],
+                    label: op.buttonLabel,
+                    actionType: op.operationType === 'maintenance' ? 'toggleMaintenanceMode' : 'createOperation',
+                    deviceTypes: ['c8y_DeviceGroup', 'c8y_MQTTDevice', 'c8y_DeviceSubgroup']
+                },
+                keyPath: [op.operationType ? 'createOperation' : 'toggleMaintenanceMode'],
+                __active: true
+            });
+        }
+        // Build legacy config object
+        return {
+            ...config,
+            options: {
+                ...config.options,
+                properties
+            }
+        };
+    }
+    isMigrationNeeded(config) {
+        const legacyProps = config?.options?.properties;
+        if (!legacyProps?.length) {
+            return false;
+        }
+        if (!config.selectedProperties || !config.operationColumns) {
+            return true;
+        }
+        const selected = config.selectedProperties ?? [];
+        const operations = config.operationColumns ?? [];
+        if (legacyProps.length !== selected.length + operations.length) {
+            return true;
+        }
+        for (const legacyProp of legacyProps) {
+            if (legacyProp.renderType === 'operationButton') {
+                const legacyLabel = legacyProp.renderConfig?.label;
+                const match = operations.find(op => op.buttonLabel === legacyLabel);
+                if (!match) {
+                    return true;
+                }
+            }
+            else {
+                const legacyName = legacyProp.name;
+                const match = selected.find(prop => prop.name === legacyName);
+                if (!match) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    getFirstLinkableIndex(selectedProperties, config) {
+        if (!selectedProperties?.length)
+            return -1;
+        if (config?.columnOrder?.length) {
+            for (const orderItem of config.columnOrder) {
+                if (orderItem.__origin !== 'selectedProperties')
+                    continue;
+                const idx = selectedProperties.findIndex(prop => prop.name === orderItem.__id || prop.title === orderItem.__id);
+                if (idx === -1)
+                    continue;
+                const type = this.getColumnType(selectedProperties[idx]);
+                if (type !== 'computed' && type !== 'alarm') {
+                    return idx;
+                }
+            }
+        }
+        return selectedProperties.findIndex(prop => {
+            const type = this.getColumnType(prop);
+            return type !== 'computed' && type !== 'alarm';
+        });
+    }
+    getColumnType(prop) {
+        return prop.columnType
+            ? prop.columnType
+            : prop.name === 'c8y_ActiveAlarmsStatus'
+                ? 'alarm'
+                : prop.computed
+                    ? 'computed'
+                    : 'default';
+    }
+    buildPropertyColumns(selectedProperties, firstLinkableIndex, config) {
+        return (selectedProperties || []).map((prop, index) => {
+            const columnType = this.getColumnType(prop);
+            const isLink = index === firstLinkableIndex && config?.showAsLink !== undefined
+                ? config.showAsLink
+                : false;
+            const column = this.createPropertyColumn(prop, columnType, isLink, config);
+            column.__origin = 'selectedProperties';
+            column.__id = prop.name || prop.title;
+            return column;
+        });
+    }
+    createPropertyColumn(prop, columnType, isLink, config) {
+        switch (columnType) {
+            case 'alarm':
+                return new AlarmsDeviceGridColumnExtended({
+                    name: prop.name || prop.title,
+                    header: prop.label || prop.title,
+                    visible: prop.visible ?? true
+                });
+            case 'date':
+                return new DateAssetTableGridColumn({
+                    name: prop.name || prop.title,
+                    header: prop.label || prop.title,
+                    visible: prop.visible ?? true,
+                    path: prop.name || prop.keyPath,
+                    sortOrder: prop.sortOrder ?? null
+                });
+            case 'icon':
+                return new IconAssetTableGridColumn({
+                    name: prop.name || prop.title,
+                    path: prop.keyPath || prop.name,
+                    header: prop.label || prop.title,
+                    iconConfig: prop.iconConfig || {},
+                    computedConfig: prop.computed ? prop.config || {} : null,
+                    showIconAndValue: config?.showIconAndValue,
+                    visible: prop.visible ?? true
+                });
+            case 'computed':
+                return new ComputedAssetTableGridColumn({
+                    name: prop.name || prop.title,
+                    header: prop.label || prop.title,
+                    computedConfig: prop.config || {},
+                    visible: prop.visible ?? true,
+                    sortOrder: prop.sortOrder ?? null
+                });
+            case 'default':
+            default:
+                return new DefaultAssetTableGridColumn({
+                    name: prop.name || prop.title,
+                    header: prop.label || prop.title,
+                    custom: true,
+                    isLink,
+                    type: 'default',
+                    path: prop.keyPath || prop.name,
+                    visible: prop.visible ?? true,
+                    sortOrder: prop.sortOrder ?? null
+                });
+        }
+    }
+    buildOperationColumns(operationColumns) {
+        return (operationColumns || []).map(op => {
+            const col = new OperationAssetTableGridColumn({
+                name: op.buttonLabel,
+                header: op.header,
+                visible: op.visible ?? true,
+                operationType: op.operationType,
+                command: op.command,
+                path: 'id'
+            });
+            col.__origin = 'operationColumns';
+            col.__id = op.buttonLabel;
+            return col;
+        });
+    }
+    applySortingAndOrdering(allColumns, config) {
+        // Apply sort orders
+        if (config?.columnSortOrders) {
+            for (const [columnName, sortOrder] of Object.entries(config.columnSortOrders)) {
+                const col = allColumns.find(c => c.name === columnName);
+                if (col) {
+                    col.sortOrder = sortOrder;
+                }
+            }
+        }
+        // Apply column order
+        if (!Array.isArray(config?.columnOrder) || config.columnOrder.length === 0) {
+            return allColumns;
+        }
+        const ordered = [];
+        for (const orderItem of config.columnOrder) {
+            const match = allColumns.find(c => c.__id === orderItem.__id &&
+                c.__origin === orderItem.__origin);
+            if (match) {
+                ordered.push(match);
+            }
+        }
+        const missing = allColumns.filter(c => !config.columnOrder.some(o => o.__id === c.__id &&
+            o.__origin === c.__origin));
+        return [...ordered, ...missing];
+    }
+    buildAndFilterQuery(filterObj) {
+        const andConditions = [];
+        Object.entries(filterObj).forEach(([key, value]) => {
+            if (Array.isArray(value)) {
+                value.forEach(v => andConditions.push({ [key]: v }));
+            }
+            else if (typeof value === 'object' && value !== null) {
+                // Convert { gt: '...' } → { __gt: '...' }
+                const opEntries = Object.entries(value).map(([opKey, opValue]) => {
+                    const prefixedKey = opKey.startsWith('__') ? opKey : `__${opKey}`;
+                    return [prefixedKey, opValue];
+                });
+                const opObj = Object.fromEntries(opEntries);
+                andConditions.push({ [key]: opObj });
+            }
+            else {
+                andConditions.push({ [key]: value });
+            }
+        });
+        return andConditions.length === 1 ? andConditions[0] : { __and: andConditions };
+    }
+    extractFilters(obj, parentKey, result = {}) {
+        Object.entries(obj).forEach(([key, value]) => {
+            if (value && typeof value === 'object' && !Array.isArray(value)) {
+                const dateOps = ['after', 'before', 'gt', 'lt', 'ge', 'le'];
+                const hasDateOp = Object.keys(value).some(op => dateOps.includes(op));
+                if (hasDateOp) {
+                    // Automatically add ".date" for date filters
+                    const effectiveKey = parentKey ? `${parentKey}.date` : `${key}.date`;
+                    Object.entries(value).forEach(([opKey, opValue]) => {
+                        if (opValue != null && dateOps.includes(opKey)) {
+                            const op = opKey === 'after' ? 'gt' : opKey === 'before' ? 'lt' : opKey;
+                            result[effectiveKey] = {
+                                ...(result[effectiveKey] || {}),
+                                [op]: opValue
+                            };
+                        }
+                    });
+                }
+                else {
+                    const nextParent = parentKey ? `${parentKey}.${key}` : key;
+                    this.extractFilters(value, nextParent, result);
+                }
+            }
+            else if (key === 'equals' && Array.isArray(value) && value.length > 0) {
+                if (parentKey) {
+                    result[parentKey] = value.length === 1 ? value[0] : value;
+                }
+            }
+        });
+        return result;
+    }
+    /** Returns a query object defaultd on columns setup. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getQueryObj(columns, defaultFilter = {}) {
+        return transform(columns, (query, column) => this.addColumnQuery(query, column), {
+            __filter: {},
+            __orderby: [],
+            ...defaultFilter
+        });
+    }
+    /** Extends given query with a part defaultd on the setup of given column. */
+    addColumnQuery(query, column) {
+        // when a column is marked as filterable
+        if (column.filterable) {
+            if (column.filterPredicate) {
+                // so we use it as the expected value, * allow to search for it anywhere in the property
+                query.__filter[column.path] = `*${column.filterPredicate}*`;
+            }
+            // in the case of custom filtering form, we're storing the query in `externalFilterQuery.query`
+            if (column.externalFilterQuery) {
+                const getFilter = column.filteringConfig.getFilter || identity;
+                const queryObj = getFilter(column.externalFilterQuery);
+                if (queryObj.__or) {
+                    query.__filter.__and = query.__filter.__and || [];
+                    query.__filter.__and.push(queryObj);
+                }
+                else if (queryObj.__and && get(query, '__filter.__and')) {
+                    queryObj.__and.map(obj => query.__filter.__and.push(obj));
+                }
+                else {
+                    assign(query.__filter, queryObj);
+                }
+            }
+        }
+        // when a column is sortable and has a specified sorting order
+        if (column.sortable && column.sortOrder) {
+            // add sorting condition for the configured column `path`
+            query.__orderby.push({
+                [column.path]: column.sortOrder === 'asc' ? 1 : -1
+            });
+        }
+        return query;
+    }
+    /**
+     * Lookup comparison object from COMPARISON_OPTIONS
+     */
+    lookupComparison(comparison) {
+        const allOptions = Object.values(COMPARISON_OPTIONS).flat();
+        return allOptions.find(o => o.value === comparison || o.sign === comparison) ?? allOptions[1];
+    }
+    /**
+     * Convert id + label + type into a c8y_JsonSchema format
+     * Example:
+     *   id: 'c8ySchema!!lastMeasurement'
+     *   label: 'Last measurement'
+     *   type: 'string'
+     * =>
+     * {
+     *   properties: {
+     *     lastMeasurement: {
+     *       label: 'Last measurement',
+     *       type: 'string'
+     *     }
+     *   }
+     * }
+     */
+    convertIdToJsonSchema(legacyComputedProperty) {
+        const { id, label, type } = legacyComputedProperty;
+        const parts = id.split('!!');
+        const propertyName = parts.length > 1 ? parts[1] : id;
+        return {
+            properties: {
+                [propertyName]: {
+                    label: label || propertyName,
+                    type: type || 'string'
+                }
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableService, deps: [{ token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }] });
+
+class AssetTableAutoRefreshComponent extends IntervalBasedReload {
+    constructor(cdRef, translateService, widgetGlobalAutoRefreshService) {
+        super();
+        this.cdRef = cdRef;
+        this.translateService = translateService;
+        this.widgetGlobalAutoRefreshService = widgetGlobalAutoRefreshService;
+        /**
+         * @inheritdoc
+         */
+        this.onCountdownEnded = new EventEmitter();
+        /**
+         * @inheritdoc
+         */
+        this.manuallyDisabledCountdown = false;
+        this.GLOBAL_INTERVAL_OPTION = GLOBAL_INTERVAL_OPTION;
+        this.REFRESH_INTERVAL_IN_MILLISECONDS = DEFAULT_INTERVAL_VALUES;
+        this.WIDGET_TYPE_VALUES = WIDGET_TYPE_VALUES;
+        this.isAutoRefreshDisabled = false;
+    }
+    ngOnInit() {
+        this.isIntervalRefreshToggleOn =
+            !this.isRefreshDisabled && (this.config.isAutoRefreshEnabled || !!this.refreshInterval);
+        this.updateCountdownButtonTooltipText();
+    }
+    ngAfterViewInit() {
+        if (this.isIntervalRefresh && this.refreshInterval) {
+            this.startCountdown();
+        }
+        if (this.globalAutoRefreshEnabled) {
+            this.countdownSubscription =
+                this.widgetGlobalAutoRefreshService.countdownActions.countdownEnded$
+                    .pipe(tap(() => this.onCountdownEnded.emit()))
+                    .subscribe();
+        }
+    }
+    ngOnChanges(changes) {
+        const { isDisabled, config } = changes;
+        if (config) {
+            this.globalAutoRefreshEnabled = this.config.refreshOption === GLOBAL_INTERVAL_OPTION;
+        }
+        if (isDisabled) {
+            this.isIntervalRefreshToggleOn =
+                !this.isRefreshDisabled && (this.config.isAutoRefreshEnabled || !!this.refreshInterval);
+            this.updateCountdownButtonTooltipText(gettext('Disabled'));
+        }
+        if (!this.isIntervalRefresh ||
+            this.manuallyDisabledCountdown ||
+            !this.config.isAutoRefreshEnabled) {
+            return;
+        }
+        this.handleScrolling();
+    }
+    ngOnDestroy() {
+        if (this.countdownSubscription) {
+            this.countdownSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @inheritdoc
+     */
+    countdownEnded() {
+        /**
+         * @inheritdoc
+         */
+        this.autoRefreshList();
+    }
+    reload() {
+        if (this.isIntervalRefresh) {
+            this.autoRefreshList();
+        }
+        else {
+            this.onCountdownEnded.emit();
+        }
+    }
+    /**
+     * Stops the countdown and triggers a refresh action.
+     * This function is responsible for halting the countdown interval component's operation.
+     * After stopping the countdown, it emits an `onCountdownEnded` event.
+     * This event is used to inform external components that the countdown has ended,
+     * typically prompting them to reload or refresh their data.
+     */
+    autoRefreshList() {
+        if (this.isIntervalRefreshToggleOn && this.config.isAutoRefreshEnabled) {
+            this.countdownIntervalComponent.stop();
+        }
+        this.onCountdownEnded.emit();
+    }
+    /**
+     * Enables and starts the countdown timer.
+     *
+     * This method makes the countdown visible (`hideCountdown` is set to false) and then
+     * starts the countdown process. It ensures the countdown timer is updated immediately
+     * by triggering change detection with `cdRef.detectChanges()` before starting the countdown.
+     * This method encapsulates the logic required to initiate the countdown timer.
+     */
+    enableCountdown() {
+        this.hideCountdown = false;
+        // Prevents the countdown from getting stuck on an initial value.
+        this.cdRef.detectChanges();
+        this.startCountdown();
+    }
+    updateCountdownButtonTooltipText(customText) {
+        if (customText) {
+            this.toggleCountdownButtonTooltipText = customText;
+            return;
+        }
+        this.toggleCountdownButtonTooltipText = this.isIntervalRefreshToggleOn
+            ? this.translateService.instant(gettext('Disable auto refresh'))
+            : this.translateService.instant(gettext('Enable auto refresh'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableAutoRefreshComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.TranslateService }, { token: i1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetTableAutoRefreshComponent, isStandalone: true, selector: "c8y-asset-table-auto-refresh", inputs: { config: "config", isIntervalRefresh: "isIntervalRefresh", refreshInterval: "refreshInterval", isLoading: "isLoading", isScrolling: "isScrolling", isRefreshDisabled: "isRefreshDisabled" }, outputs: { onCountdownEnded: "onCountdownEnded" }, providers: [ManagedObjectRealtimeService], viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"m-l-auto d-flex p-t-4 p-b-4 p-r-4\">\n  <div class=\"m-l-auto d-flex a-i-center\">\n    @if (config.isAutoRefreshEnabled) {\n      <label\n        class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n        title=\" {{ 'Auto refresh' | translate }}\"\n      >\n        {{ 'Auto refresh' | translate }}\n      </label>\n    }\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isAutoRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event, WIDGET_TYPE_VALUES.ASSET_TABLE)\"\n        />\n\n        @if (isIntervalRefreshToggleOn) {\n          <c8y-countdown-interval\n            [countdownInterval]=\"refreshInterval\"\n            (countdownEnded)=\"countdownEnded()\"\n          ></c8y-countdown-interval>\n        } @else {\n          <i c8yIcon=\"pause\"></i>\n        }\n      </label>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i1.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval", "config"], outputs: ["countdownEnded"] }, { kind: "ngmodule", type: AssetSelectorModule }, { 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: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableAutoRefreshComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-asset-table-auto-refresh', standalone: true, imports: [
+                        CommonModule$1,
+                        CoreModule,
+                        AssetSelectorModule,
+                        TooltipModule,
+                        CountdownIntervalComponent
+                    ], providers: [ManagedObjectRealtimeService], template: "<div class=\"m-l-auto d-flex p-t-4 p-b-4 p-r-4\">\n  <div class=\"m-l-auto d-flex a-i-center\">\n    @if (config.isAutoRefreshEnabled) {\n      <label\n        class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n        title=\" {{ 'Auto refresh' | translate }}\"\n      >\n        {{ 'Auto refresh' | translate }}\n      </label>\n    }\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isAutoRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event, WIDGET_TYPE_VALUES.ASSET_TABLE)\"\n        />\n\n        @if (isIntervalRefreshToggleOn) {\n          <c8y-countdown-interval\n            [countdownInterval]=\"refreshInterval\"\n            (countdownEnded)=\"countdownEnded()\"\n          ></c8y-countdown-interval>\n        } @else {\n          <i c8yIcon=\"pause\"></i>\n        }\n      </label>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.TranslateService }, { type: i1.WidgetGlobalAutoRefreshService }], propDecorators: { config: [{
+                type: Input
+            }], isIntervalRefresh: [{
+                type: Input
+            }], refreshInterval: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isScrolling: [{
+                type: Input
+            }], isRefreshDisabled: [{
+                type: Input
+            }], onCountdownEnded: [{
+                type: Output
+            }], countdownIntervalComponent: [{
+                type: ViewChild,
+                args: [CountdownIntervalComponent, { static: false }]
+            }] } });
+
+class AssetTableWidgetConfigComponent {
+    set previewMapSet(template) {
+        if (template) {
+            this.widgetConfigService.setPreview(template);
+            return;
+        }
+        this.widgetConfigService.setPreview(null);
+    }
+    constructor() {
+        this.GLOBAL_INTERVAL_OPTION = GLOBAL_INTERVAL_OPTION;
+        this.REFRESH_INTERVAL_IN_MILLISECONDS = DEFAULT_INTERVAL_VALUES;
+        this.title = gettext('Asset Table');
+        this.selectedAssets = [];
+        this.refresh = new EventEmitter();
+        /**
+         * Current isLoading state. Based on it next countdown cycle is being started.
+         */
+        this.isLoading$ = new BehaviorSubject(false);
+        this.destroy$ = new Subject();
+        this.formBuilder = inject(FormBuilder);
+        this.assetTableService = inject(AssetTableService);
+        this.widgetGlobalAutoRefresh = inject(WidgetGlobalAutoRefreshService);
+        this.alertService = inject(AlertService);
+        this.widgetConfigService = inject(WidgetConfigService);
+        this.contextDashboardService = inject(ContextDashboardService);
+        this.columns = this.getColumns();
+        this.queriesUtil = new QueriesUtil();
+        this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
+    }
+    ngOnInit() {
+        this.initializeForm();
+        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 };
+            }
+            this.config = config;
+            this.columns = this.getColumns(config);
+            this.refreshOption = config?.refreshOption ?? GLOBAL_INTERVAL_OPTION;
+            this.formGroup.patchValue(config, { emitEvent: false });
+            if (config.device?.self) {
+                config.isDeviceAssetSelected = 'c8y_IsDevice' in config.device;
+            }
+            this.updateFormDisabledState();
+            if (config?.widgetInstanceGlobalAutoRefreshContext) {
+                this.handleGlobalRefreshLoading();
+            }
+        });
+        this.widgetConfigService.addOnBeforeSave(() => {
+            const migratedConfig = this.assetTableService.migrateToLegacyProperties(this.config);
+            this.widgetConfigService.updateConfig(migratedConfig, true);
+            return true;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.formGroup.controls.widgetInstanceGlobalAutoRefreshContext.value &&
+            this.isLoading$.value) {
+            this.widgetGlobalAutoRefresh.decrementLoading();
+        }
+    }
+    /**
+     * This method loads data when data grid requests it (e.g. on initial load or on column settings change).
+     * It gets the object with current data grid setup and is supposed to return:
+     * full response, list of items, paging object, the number of items in the filtered subset, the number of all items.
+     */
+    async onDataSourceModifier(dataSourceModifier) {
+        const { res, data, paging } = await this.assetTableService.getAssets(this.config, dataSourceModifier.columns, this.formGroup.controls.filterPredicate.value ?? {});
+        const serverSideDataResult = {
+            res,
+            data,
+            paging,
+            filteredSize: paging.totalElements,
+            size: paging.totalElements
+        };
+        return serverSideDataResult;
+    }
+    async updateSelectedAssets() {
+        try {
+            this.isLoading$.next(true);
+            this.refresh.emit();
+        }
+        catch (error) {
+            this.alertService.addServerFailure(error);
+        }
+        finally {
+            this.isLoading$.next(false);
+        }
+    }
+    updateRefreshOption() {
+        this.formGroup.controls.refreshOption.setValue(this.refreshOption);
+        const isGlobalInterval = this.refreshOption === GLOBAL_INTERVAL_OPTION;
+        this.formGroup.controls.widgetInstanceGlobalTimeContext.setValue(isGlobalInterval);
+        this.updateConfigBasedOnRefreshOption();
+    }
+    getColumns(config) {
+        if (!config) {
+            return [];
+        }
+        const selectedProperties = config.selectedProperties || [];
+        const operationColumns = config.operationColumns || [];
+        return this.assetTableService.getColumns(selectedProperties, operationColumns, config);
+    }
+    handleGlobalRefreshLoading() {
+        this.isLoading$
+            .pipe(skip(1), globalAutoRefreshLoading(this.widgetGlobalAutoRefresh), takeUntil(this.destroy$))
+            .subscribe();
+    }
+    updateConfigBasedOnRefreshOption() {
+        const isInterval = this.refreshOption === 'interval';
+        this.formGroup.controls.isAutoRefreshEnabled.setValue(isInterval);
+        isInterval
+            ? this.formGroup.get('refreshInterval').enable()
+            : this.formGroup.get('refreshInterval').disable();
+    }
+    updateFormDisabledState() {
+        const selectedProperties = this.formGroup.get('selectedProperties')?.value;
+        const operationColumns = this.formGroup.get('operationColumns')?.value;
+        const disable = (!selectedProperties || selectedProperties.length === 0) &&
+            (!operationColumns || operationColumns.length === 0);
+        this.contextDashboardService.formDisabled = disable;
+    }
+    setupGridHeaderFilterDependency() {
+        const gridHeaderControl = this.formGroup.get('displayOptions.gridHeader');
+        const filterControl = this.formGroup.get('displayOptions.filter');
+        const configurableColumnsControl = this.formGroup.get('displayOptions.configurableColumnsEnabled');
+        // Set initial state
+        if (!gridHeaderControl?.value) {
+            filterControl?.disable();
+            configurableColumnsControl?.disable();
+        }
+        // Listen to changes
+        gridHeaderControl?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(isEnabled => {
+            if (isEnabled) {
+                filterControl?.enable();
+                configurableColumnsControl?.enable();
+            }
+            else {
+                filterControl?.disable();
+                configurableColumnsControl?.disable();
+            }
+        });
+    }
+    initializeForm() {
+        this.formGroup = this.createForm();
+    }
+    createForm() {
+        return this.formBuilder.group({
+            title: new FormControl('Asset table'),
+            device: new FormControl(undefined),
+            selectedProperties: [],
+            operationColumns: [],
+            isAutoRefreshEnabled: [true],
+            refreshOption: GLOBAL_INTERVAL_OPTION,
+            refreshInterval: new FormControl(DEFAULT_INTERVAL_VALUE),
+            widgetInstanceGlobalAutoRefreshContext: [],
+            widgetInstanceGlobalTimeContext: [],
+            displayOptions: this.formBuilder.group({
+                gridHeader: [true],
+                bordered: [false],
+                striped: [true],
+                filter: [true],
+                hover: [true],
+                showLoadingIndicator: [true],
+                configurableColumnsEnabled: [true]
+            }),
+            filterPredicate: [],
+            showIconAndValue: [true],
+            showAsLink: [false],
+            includeDescendants: [true],
+            showStatusIcon: [true]
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableWidgetConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-asset-table-widget-config', standalone: true, imports: [
+                        CommonModule$1,
+                        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" }]
+        }], ctorParameters: () => [], propDecorators: { previewMapSet: [{
+                type: ViewChild,
+                args: ['assetTablePreview']
+            }] } });
+
+class AssetTableWidgetViewComponent {
+    constructor() {
+        /**
+         * Current isLoading state. Based on it next countdown cycle is being started.
+         */
+        this.isLoading$ = new BehaviorSubject(false);
+        this.selectedAssets = [];
+        this.columns = [];
+        this.refresh = new EventEmitter();
+        this.pagination = {
+            pageSize: 100,
+            currentPage: 1
+        };
+        this.destroy$ = new Subject();
+        this.widgetGlobalAutoRefresh = inject(WidgetGlobalAutoRefreshService);
+        this.assetTableService = inject(AssetTableService);
+        this.alertService = inject(AlertService);
+        this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
+    }
+    ngOnInit() {
+        if (this.assetTableService.isMigrationNeeded(this.config)) {
+            this.config = this.assetTableService.migrateLegacyProperties(this.config);
+        }
+        this.columns = this.assetTableService.getColumns(this.config?.selectedProperties, this.config?.operationColumns, this.config);
+        if (this.config.widgetInstanceGlobalAutoRefreshContext) {
+            this.handleGlobalRefreshLoading();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.config?.widgetInstanceGlobalAutoRefreshContext && this.isLoading$.value) {
+            this.widgetGlobalAutoRefresh.decrementLoading();
+        }
+    }
+    /**
+     * This method loads data when data grid requests it (e.g. on initial load or on column settings change).
+     * It gets the object with current data grid setup and is supposed to return:
+     * full response, list of items, paging object, the number of items in the filtered subset, the number of all items.
+     */
+    async onDataSourceModifier(dataSourceModifier) {
+        const { res, data, paging } = await this.assetTableService.getAssets(this.config, dataSourceModifier.columns, this.config.filterPredicate ?? {}, dataSourceModifier.pagination);
+        const serverSideDataResult = {
+            res,
+            data,
+            paging,
+            filteredSize: paging.totalElements,
+            size: paging.totalElements
+        };
+        return serverSideDataResult;
+    }
+    updateSelectedAssets() {
+        try {
+            this.isLoading$.next(true);
+            this.refresh.emit();
+        }
+        catch (error) {
+            this.alertService.addServerFailure(error);
+        }
+        finally {
+            this.isLoading$.next(false);
+        }
+    }
+    handleGlobalRefreshLoading() {
+        this.isLoading$
+            .pipe(skip(1), globalAutoRefreshLoading(this.widgetGlobalAutoRefresh), takeUntil(this.destroy$))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class IconRenderTypeModalComponent {
+    constructor() {
+        this.forms = [];
+        this.initialIconConfig = [];
+        this.labels = { ok: gettext('Save'), cancel: gettext('Cancel') };
+        this.booleanOptions = [
+            { label: gettext('True'), value: 'true' },
+            { label: gettext('False'), value: 'false' }
+        ];
+        this.dataTypes = [
+            { label: gettext('Number'), value: 'number' },
+            { label: gettext('Date'), value: 'date' },
+            { label: gettext('String'), value: 'string' },
+            { label: gettext('Boolean'), value: 'boolean' }
+        ];
+        this.comparisonOptions = COMPARISON_OPTIONS;
+        this.result = new Promise((resolve, reject) => {
+            this._save = resolve;
+            this._cancel = reject;
+        });
+        this.fb = inject(FormBuilder);
+    }
+    ngOnInit() {
+        if (this.initialIconConfig && this.initialIconConfig.length > 0) {
+            for (const config of this.initialIconConfig) {
+                this.forms.push(this.createForm(config));
+            }
+        }
+        else {
+            this.addCondition();
+        }
+    }
+    addCondition() {
+        this.forms.push(this.createForm());
+    }
+    removeCondition(idx) {
+        this.forms.splice(idx, 1);
+    }
+    iconSelectionChange(icon, idx) {
+        this.forms[idx].get('icon')?.setValue(icon);
+    }
+    onDateSelected(date, idx) {
+        this.forms[idx].get('value')?.setValue(date);
+    }
+    isAnyFormInvalid() {
+        return this.forms.some(f => f.invalid);
+    }
+    onClose(_) {
+        if (this.forms.every(f => f.valid)) {
+            this._save(this.forms.map(f => f.value));
+        }
+    }
+    onDismiss(_) {
+        this._cancel();
+    }
+    createForm(config) {
+        return this.fb.group({
+            dataType: [config?.dataType || this.dataTypes[0], [Validators.required]],
+            comparison: [config?.comparison || null, [Validators.required]],
+            value: [config?.value ?? '', [Validators.required]],
+            icon: [config?.icon || 'c8y-cockpit', [Validators.required]],
+            color: [config?.color || '#212121', [Validators.required]]
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconRenderTypeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconRenderTypeModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-icon-render-type-modal', standalone: true, imports: [
+                        ModalModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        IconSelectorModule,
+                        DateTimePickerModule,
+                        C8yTranslateModule,
+                        CommonModule,
+                        CoreModule
+                    ], 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" }]
+        }] });
+
+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.result = new Promise((resolve, reject) => {
+            this._save = resolve;
+            this._cancel = reject;
+        });
+        this.fb = inject(FormBuilder);
+        this.translate = inject(TranslateService);
+    }
+    get modalTitle() {
+        if (this.showButtonLabelOnly) {
+            return this.translate.instant(gettext('Maintenance mode'));
+        }
+        const buttonLabel = this.form?.get('buttonLabel')?.value;
+        return buttonLabel
+            ? 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);
+        this.form = this.fb.group({
+            buttonLabel: new FormControl(this.initialConfig?.buttonLabel ?? '', {
+                validators: [Validators.required]
+            }),
+            operation: new FormControl(this.initialConfig?.operationType ?? null),
+            command: new FormControl(this.initialConfig?.command ?? defaultCommand, {
+                validators: [Validators.required]
+            })
+        });
+    }
+    onClose(_) {
+        if (this.form.valid) {
+            this._save(this.form.getRawValue());
+        }
+    }
+    onDismiss(_) {
+        this._cancel();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationRenderTypeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationRenderTypeModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-operation-render-type-modal', standalone: true, imports: [
+                        ModalModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        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" }]
+        }] });
+
+class AssetTableGridSettingsComponent {
+    constructor() {
+        this.columns = [];
+        this.selectedProperties = [];
+        this.operationColumns = [];
+        this.text = '';
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.existingColumnFilter = {};
+        this.hasMaintenanceColumn = false;
+        this.customHeaderNames = {};
+        this.customLabel = gettext('(custom`column`)');
+        this.widgetConfigService = inject(WidgetConfigService);
+        this.assetTableService = inject(AssetTableService);
+        this.modalService = inject(BsModalService);
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.widgetConfigService.currentConfig$.pipe(takeUntil(this.destroy$)).subscribe(config => {
+            this.selectedProperties = config?.selectedProperties || [];
+            this.operationColumns = config?.operationColumns || [];
+            this.existingColumnFilter = config?.filterPredicate || {};
+            this.customHeaderNames = config?.customHeaderNames || {};
+            this.columns = this.getColumns(config);
+            this.applyCustomHeaderNames();
+            this.columns.forEach(column => {
+                column.header = this.customHeaderNames[column.name] || column.header;
+                if (column.operationType === 'maintenance') {
+                    this.hasMaintenanceColumn = true;
+                }
+                if (column.filteringConfig) {
+                    column.filteringConfig.formGroup = new FormGroup({});
+                    column.filteringConfig.model = this.existingColumnFilter[column.name] || {};
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async applyColumnType(type, column) {
+        if (type === 'icon') {
+            const currentIconConfig = this.selectedProperties.find(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (prop) => prop.name === column.name)?.iconConfig;
+            const modal = this.modalService.show(IconRenderTypeModalComponent, {
+                class: 'modal-md',
+                ariaDescribedby: 'modal-body',
+                ariaLabelledBy: 'modal-title',
+                ignoreBackdropClick: true,
+                initialState: {
+                    initialIconConfig: currentIconConfig || []
+                }
+            }).content;
+            try {
+                const result = await modal.result;
+                this.selectedProperties = this.selectedProperties.map(prop => prop.name === column.name || prop.title === column.name
+                    ? { ...prop, iconConfig: result, columnType: 'icon' }
+                    : prop);
+            }
+            catch (ex) {
+                return;
+            }
+        }
+        else {
+            this.selectedProperties = this.selectedProperties.map(prop => prop.name === column.name ? { ...prop, columnType: type } : prop);
+        }
+        this.widgetConfigService.updateConfig({ selectedProperties: [...this.selectedProperties] });
+    }
+    onColumnDrop(event) {
+        moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
+        const newOrder = this.columns.map((column) => ({
+            __origin: column.__origin,
+            __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] });
+    }
+    applyFilter(column, dropdown) {
+        const formGroup = column.filteringConfig?.formGroup;
+        this.existingColumnFilter[column.name] = formGroup?.value;
+        column.filteringConfig.model = formGroup?.value;
+        // Update the model so Formly renders it next time
+        // Update config and local copy
+        this.widgetConfigService.updateConfig({ filterPredicate: this.existingColumnFilter });
+        dropdown.hide();
+    }
+    resetFilter(column, dropdown) {
+        delete this.existingColumnFilter[column.name];
+        column.filteringConfig.formGroup.reset();
+        this.widgetConfigService.updateConfig({ filterPredicate: this.existingColumnFilter });
+        dropdown.hide();
+    }
+    isColumnFiltered(column) {
+        const value = this.existingColumnFilter?.[column.name];
+        if (!value)
+            return false;
+        // Check if the filter has a meaningful value (non-empty)
+        return Object.values(value).some(v => v !== null && v !== '' && v !== false);
+    }
+    updateColumnNames(column) {
+        this.customHeaderNames = { ...this.customHeaderNames, [column.name]: column.header };
+        this.applyCustomHeaderNames();
+        this.widgetConfigService.updateConfig({
+            selectedProperties: this.selectedProperties,
+            operationColumns: this.operationColumns,
+            customHeaderNames: this.customHeaderNames
+        });
+    }
+    changeSortOrder(column) {
+        const currentOrder = column.sortOrder;
+        let nextOrder = '';
+        if (!currentOrder) {
+            nextOrder = 'asc';
+        }
+        else if (currentOrder === 'asc') {
+            nextOrder = 'desc';
+        }
+        else if (currentOrder === 'desc') {
+            nextOrder = '';
+        }
+        column.sortOrder = nextOrder || null;
+        this.selectedProperties = this.selectedProperties.map(prop => {
+            if (prop.name === column.name) {
+                if (nextOrder) {
+                    prop.sortOrder = nextOrder;
+                }
+                else {
+                    delete prop.sortOrder;
+                }
+            }
+            return prop;
+        });
+        const columnSortOrders = {};
+        this.columns.forEach(c => {
+            if (c.sortOrder) {
+                columnSortOrders[c.name] = c.sortOrder;
+            }
+        });
+        this.widgetConfigService.updateConfig({
+            selectedProperties: this.selectedProperties,
+            columnSortOrders
+        });
+    }
+    async onCreateOperation() {
+        const modal = this.operationModal(false);
+        const result = (await modal.result);
+        result.operationType = 'operation';
+        result.header = gettext('Create operation');
+        this.operationColumns.push(result);
+        this.widgetConfigService.updateConfig({ operationColumns: this.operationColumns });
+    }
+    async onToggleMaintenanceMode() {
+        const modal = this.operationModal(true);
+        const result = (await modal.result);
+        result.operationType = 'maintenance';
+        result.header = gettext('Toggle maintenance mode');
+        this.operationColumns.push(result);
+        this.widgetConfigService.updateConfig({ operationColumns: this.operationColumns });
+    }
+    async editOperationColumn(column) {
+        const currentOpConfig = this.operationColumns.find(op => op.buttonLabel === column.name);
+        const modal = 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 });
+    }
+    deleteColumn(column) {
+        this.operationColumns = this.operationColumns.filter(opCol => opCol.buttonLabel !== column.name);
+        if (column.operationType === 'maintenance') {
+            this.hasMaintenanceColumn = false;
+        }
+        this.widgetConfigService.updateConfig({ operationColumns: this.operationColumns });
+    }
+    trackByColumnName(_index, column) {
+        return `${column.name}-${_index}`;
+    }
+    applyCustomHeaderNames() {
+        // Update selected properties and operation columns based on custom header names
+        this.selectedProperties = this.selectedProperties.map(prop => {
+            const newLabel = this.customHeaderNames[prop.name];
+            if (newLabel) {
+                prop.label = newLabel;
+            }
+            return prop;
+        });
+        this.operationColumns = this.operationColumns.map(opCol => {
+            const newHeader = this.customHeaderNames[opCol.buttonLabel];
+            if (newHeader) {
+                opCol.header = newHeader;
+            }
+            return opCol;
+        });
+    }
+    operationModal(showButtonLabelOnly, operationConfig) {
+        return this.modalService.show(OperationRenderTypeModalComponent, {
+            class: 'modal-sm',
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true,
+            initialState: {
+                initialConfig: operationConfig || {},
+                showButtonLabelOnly
+            }
+        }).content;
+    }
+    getColumns(config) {
+        return this.assetTableService.getColumns(this.selectedProperties, this.operationColumns, config);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableGridSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetTableGridSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-asset-table-column-settings', host: {
+                        class: 'bg-level-1'
+                    }, imports: [
+                        FormsModule,
+                        C8yTranslatePipe,
+                        TooltipModule,
+                        HumanizePipe,
+                        BsDropdownModule,
+                        IconDirective,
+                        DropdownFocusTrapDirective,
+                        CdkDropList,
+                        CdkDrag,
+                        FormlyModule,
+                        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.16", ngImport: i0, type: AssetTablePropertiesSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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.16", 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" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AssetTableGridSettingsComponent, AssetTablePropertiesSelectorComponent, AssetTableWidgetConfigComponent, AssetTableWidgetViewComponent };
+//# sourceMappingURL=c8y-ngx-components-widgets-implementations-asset-table.mjs.map