@c8y/ngx-components/fesm2022/c8y-ngx-components-device-grid.mjs.map

Angular modules for Cumulocity IoT applications

{"version":3,"file":"c8y-ngx-components-device-grid.mjs","sources":["../../device-grid/columns/column-util.service.ts","../../device-grid/columns/alarms.cell-renderer.component.ts","../../device-grid/columns/alarms.cell-renderer.component.html","../../device-grid/columns/alarms.header-cell-renderer.component.ts","../../device-grid/columns/alarms.device-grid-column.ts","../../device-grid/columns/group.cell-renderer.component.ts","../../device-grid/columns/group.cell-renderer.component.html","../../device-grid/columns/group.filtering-form-renderer.component.ts","../../device-grid/columns/group.filtering-form-renderer.component.html","../../device-grid/columns/group.device-grid-column.ts","../../device-grid/columns/imei.device-grid-column.ts","../../device-grid/columns/model.cell-renderer.component.ts","../../device-grid/columns/model.device-grid-column.ts","../../device-grid/columns/name.cell-renderer.component.ts","../../device-grid/columns/name.device-grid-column.ts","../../device-grid/columns/registration-date.cell-renderer.component.ts","../../device-grid/columns/registration-date.device-grid-column.ts","../../device-grid/columns/serial-number.cell-renderer.component.ts","../../device-grid/columns/serial-number.device-grid-column.ts","../../device-grid/columns/status.cell-renderer.component.ts","../../device-grid/columns/status.device-grid-column.ts","../../device-grid/columns/system-id.device-grid-column.ts","../../device-grid/columns/type.device-grid-column.ts","../../device-grid/columns/icon.cell-renderer.component.ts","../../device-grid/device-grid.service.ts","../../device-grid/device-grid.component.ts","../../device-grid/device-grid.component.html","../../device-grid/device-grid.module.ts","../../device-grid/c8y-ngx-components-device-grid.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { IManagedObject } from '@c8y/client';\nimport { TranslateService } from '@ngx-translate/core';\nimport { map, remove, sortBy } from 'lodash-es';\n\n/**\n * Service contains logic extracted from the device-grid service to avoid circular dependency MTM-40239.\n */\n\n@Injectable({ providedIn: 'root' })\nexport class ColumnUtilService {\n  constructor(protected translateService: TranslateService) {}\n\n  getAlarmsHref(device: IManagedObject): string {\n    return `${this.getHref(device)}/alarms`;\n  }\n\n  getHref(groupOrDevice: IManagedObject, prefix = '#/'): string {\n    if (groupOrDevice.c8y_IsDeviceGroup || groupOrDevice.c8y_IsDynamicGroup) {\n      return `${prefix}group/${groupOrDevice.id}`;\n    }\n    return `${prefix}device/${groupOrDevice.id}`;\n  }\n\n  getParentsNames(device: IManagedObject, featuredParentId?: string | number): string {\n    const assetParentsReferences = device.assetParents.references;\n    const assetParents = map(assetParentsReferences, 'managedObject');\n    const sortedByName = sortBy(assetParents, ['name']);\n    const featuredItems = remove(sortedByName, { id: featuredParentId });\n    const items = featuredItems.concat(sortedByName);\n    const names = map(items, 'name');\n    return names.join(', ');\n  }\n\n  getModel(device: IManagedObject): string {\n    const hardware = this.getHardware(device);\n    return hardware && hardware.model;\n  }\n\n  getProperName(device: IManagedObject): string {\n    const { id, name } = device;\n    return name ? name : this.translateService.instant('Device {{id}}', { id });\n  }\n\n  getSerialNumber(device: IManagedObject): string {\n    const hardware = this.getHardware(device);\n    return hardware && hardware['serialNumber'];\n  }\n\n  private getHardware(device: IManagedObject): any {\n    return device && device['c8y_Hardware'];\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext, gettext, IconDirective, C8yTranslatePipe } from '@c8y/ngx-components';\nimport { ColumnUtilService } from './column-util.service';\nimport { NgIf } from '@angular/common';\n\n@Component({\n  templateUrl: './alarms.cell-renderer.component.html',\n  selector: 'c8y-alarms-cell-renderer',\n  imports: [NgIf, IconDirective, C8yTranslatePipe]\n})\nexport class AlarmsCellRendererComponent {\n  readonly linkAriaLabel = gettext('See alarms for device \"{{ name }}\"');\n  constructor(\n    public context: CellRendererContext,\n    public columnUtilService: ColumnUtilService\n  ) {}\n}\n","<a\n  class=\"d-flex a-i-center flex-wrap gap-4 no-decoration\"\n  [href]=\"columnUtilService.getAlarmsHref(context.item)\"\n  [attr.aria-label]=\"\n    linkAriaLabel | translate: { name: columnUtilService.getProperName(context.item) }\n  \"\n  *ngIf=\"\n    context.item.c8y_ActiveAlarmsStatus?.critical ||\n    context.item.c8y_ActiveAlarmsStatus?.major ||\n    context.item.c8y_ActiveAlarmsStatus?.minor ||\n    context.item.c8y_ActiveAlarmsStatus?.warning\n  \"\n>\n  <span\n    class=\"c8y-icon-badge\"\n    data-cy=\"alarms.cell-renderer--critical-alarm-badge\"\n    title=\"{{ context.item.c8y_ActiveAlarmsStatus?.critical }} {{ 'Critical alarms' | translate }}\"\n    *ngIf=\"context.item.c8y_ActiveAlarmsStatus?.critical\"\n  >\n    <i [c8yIcon]=\"'exclamation-circle'\" class=\"status critical stroked-icon\" data-cy=\"alarms.cell-renderer--critical-alarm-icon\"></i>\n    <span class=\"badge badge-info\">{{ context.item.c8y_ActiveAlarmsStatus?.critical }}</span>\n  </span>\n  <span\n    class=\"c8y-icon-badge\"\n    title=\"{{ context.item.c8y_ActiveAlarmsStatus?.major }} {{ 'Major alarms' | translate }}\"\n    *ngIf=\"context.item.c8y_ActiveAlarmsStatus?.major\"\n  >\n    <i [c8yIcon]=\"'warning'\" class=\"status major stroked-icon\"></i>\n    <span class=\"badge badge-info\">{{ context.item.c8y_ActiveAlarmsStatus?.major }}</span>\n  </span>\n  <span\n    class=\"c8y-icon-badge\"\n    title=\"{{ context.item.c8y_ActiveAlarmsStatus?.minor }} {{ 'Minor alarms' | translate }}\"\n    *ngIf=\"context.item.c8y_ActiveAlarmsStatus?.minor\"\n  >\n    <i [c8yIcon]=\"'high-priority'\" class=\"status minor stroked-icon\"></i>\n    <span class=\"badge badge-info\">{{ context.item.c8y_ActiveAlarmsStatus?.minor }}</span>\n  </span>\n  <span\n    class=\"c8y-icon-badge\"\n    title=\"{{ context.item.c8y_ActiveAlarmsStatus?.warning }} {{ 'Warning alarms' | translate }}\"\n    *ngIf=\"context.item.c8y_ActiveAlarmsStatus?.warning\"\n  >\n    <i [c8yIcon]=\"'info-circle'\" class=\"status warning stroked-icon\"></i>\n    <span class=\"badge badge-info\">{{ context.item.c8y_ActiveAlarmsStatus?.warning }}</span>\n  </span>\n</a>\n","import { Component } from '@angular/core';\nimport { CellRendererContext, IconDirective, C8yTranslatePipe } from '@c8y/ngx-components';\nimport { PopoverDirective } from 'ngx-bootstrap/popover';\n\n@Component({\n  template: `\n    <div class=\"d-flex\">\n      <span class=\"text-truncate\" [title]=\"context.property.header | translate\">\n        {{ context.property.header | translate }}\n      </span>\n      <button\n        class=\"btn-help btn-help--sm a-s-center\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"'Only includes alarms for the parent device.' | translate\"\n        placement=\"bottom\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n    </div>\n  `,\n  selector: 'c8y-alarms-header-cell-renderer',\n  imports: [PopoverDirective, IconDirective, C8yTranslatePipe]\n})\nexport class AlarmsHeaderCellRendererComponent {\n  constructor(public context: CellRendererContext) {}\n}\n","import { FormGroup } from '@angular/forms';\nimport { BaseColumn, ColumnConfig, gettext } from '@c8y/ngx-components';\nimport { map } from 'lodash-es';\nimport { AlarmsCellRendererComponent } from './alarms.cell-renderer.component';\nimport { AlarmsHeaderCellRendererComponent } from './alarms.header-cell-renderer.component';\n\nexport class AlarmsDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n    this.name = 'alarms';\n    this.header = gettext('Alarms');\n    this.headerCellRendererComponent = AlarmsHeaderCellRendererComponent;\n    this.cellRendererComponent = AlarmsCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: [\n        {\n          type: 'object',\n          key: 'alarm',\n          templateOptions: {\n            label: 'Show items'\n          },\n          fieldGroup: [\n            {\n              key: 'critical',\n              type: 'switch',\n              props: {\n                label: gettext('With active critical alarms')\n              }\n            },\n            {\n              key: 'major',\n              type: 'switch',\n              props: {\n                label: gettext('With active major alarms')\n              }\n            },\n            {\n              key: 'minor',\n              type: 'switch',\n              props: {\n                label: gettext('With active minor alarms')\n              }\n            },\n            {\n              key: 'warning',\n              type: 'switch',\n              props: {\n                label: gettext('With active warnings')\n              }\n            },\n            {\n              key: 'none',\n              type: 'switch',\n              props: {\n                label: gettext('With no active alarms or warnings')\n              }\n            }\n          ],\n          validators: {\n            atLeastOneSelected: {\n              expression: control => {\n                const alarmGroup = control.value;\n                return (\n                  alarmGroup.critical ||\n                  alarmGroup.major ||\n                  alarmGroup.minor ||\n                  alarmGroup.warning ||\n                  alarmGroup.none\n                );\n              }\n            }\n          }\n        }\n      ],\n      formGroup: new FormGroup({}),\n      getFilter: model => {\n        const filter: any = {};\n        const ors = [];\n        if (model.alarm.critical) {\n          ors.push({ 'c8y_ActiveAlarmsStatus.critical': { __gt: 0 } });\n        }\n        if (model.alarm.major) {\n          ors.push({ 'c8y_ActiveAlarmsStatus.major': { __gt: 0 } });\n        }\n        if (model.alarm.minor) {\n          ors.push({ 'c8y_ActiveAlarmsStatus.minor': { __gt: 0 } });\n        }\n        if (model.alarm.warning) {\n          ors.push({ 'c8y_ActiveAlarmsStatus.warning': { __gt: 0 } });\n        }\n        if (model.alarm.none) {\n          ors.push({ __not: { __has: 'c8y_ActiveAlarmsStatus' } });\n          ors.push({\n            __and: map(['critical', 'major', 'minor', 'warning'], sev => {\n              const zero = {};\n              const has = { __not: { __has: undefined } };\n              const key = `c8y_ActiveAlarmsStatus.${sev}`;\n              zero[key] = 0;\n              has.__not.__has = key;\n              return { __or: [zero, has] };\n            })\n          });\n        }\n        if (ors.length) {\n          filter.__or = ors;\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [\n        { path: 'c8y_ActiveAlarmsStatus.critical' },\n        { path: 'c8y_ActiveAlarmsStatus.major' },\n        { path: 'c8y_ActiveAlarmsStatus.minor' },\n        { path: 'c8y_ActiveAlarmsStatus.warning' }\n      ]\n    };\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext } from '@c8y/ngx-components';\nimport { ColumnUtilService } from './column-util.service';\n\n@Component({\n  templateUrl: './group.cell-renderer.component.html',\n  selector: 'c8y-group-cell-renderer'\n})\nexport class GroupCellRendererComponent {\n  constructor(\n    public context: CellRendererContext,\n    public columnUtilService: ColumnUtilService\n  ) {}\n}\n","<span\n  title=\"{{\n    columnUtilService.getParentsNames(\n      context.item,\n      context.property.externalFilterQuery?.deviceGroupId\n    )\n  }}\"\n>\n  {{\n    columnUtilService.getParentsNames(\n      context.item,\n      context.property.externalFilterQuery?.deviceGroupId\n    )\n  }}\n</span>\n","import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';\nimport {\n  Column,\n  FilteringFormRendererContext,\n  C8yTranslateDirective,\n  C8yTranslatePipe\n} from '@c8y/ngx-components';\nimport { cloneDeep } from 'lodash-es';\nimport { AssetSelectorComponent } from '@c8y/ngx-components/assets-navigator';\n\n@Component({\n  templateUrl: './group.filtering-form-renderer.component.html',\n  imports: [AssetSelectorComponent, C8yTranslateDirective, C8yTranslatePipe]\n})\nexport class GroupFilteringFormRendererComponent implements OnInit {\n  @ViewChild('assetSelector', { static: false, read: ElementRef }) assetSelector: ElementRef;\n  model: any;\n  preselected: string[] = [];\n  initialSelection: string[] = [];\n  isApplyDisabled = true;\n\n  constructor(public context: FilteringFormRendererContext) {}\n\n  @HostListener('keyup.enter', ['$event']) onEnterKeyUp(event: KeyboardEvent) {\n    event.stopPropagation();\n    this.applyFilter();\n  }\n  @HostListener('keydown.escape', ['$event']) onEscapeKeyDown(event: KeyboardEvent) {\n    event.stopPropagation();\n    this.resetFilter();\n  }\n\n  ngOnInit() {\n    const column: Column = this.context.property;\n    this.model = cloneDeep(column.externalFilterQuery || {});\n    this.preselected = this.model.selectedNodes || [];\n    this.initialSelection = [...this.preselected];\n  }\n\n  ngAfterViewInit() {\n    setTimeout(() => {\n      try {\n        this.assetSelector.nativeElement.querySelector('input').focus();\n      } catch (ex) {\n        // intended empty\n      }\n    }, 250);\n  }\n\n  applyFilter() {\n    this.context.applyFilter({\n      externalFilterQuery: this.model\n    });\n    this.isApplyDisabled = true; // Disable button after applying the filter\n    this.initialSelection = [...this.model.selectedNodes]; // Update initial selection\n  }\n\n  resetFilter() {\n    this.context.resetFilter();\n    this.model.selectedNodes = [];\n    this.preselected = [];\n    this.isApplyDisabled = true; // Disable button after resetting the filter\n  }\n\n  selectionChanged(nodes) {\n    this.model.selectedNodes = nodes.items;\n    this.isApplyDisabled = !this.isSelectionChanged();\n  }\n\n  private isSelectionChanged(): boolean {\n    if (this.model.selectedNodes.length !== this.initialSelection.length) {\n      return true;\n    }\n    const currentSelectionSet = new Set(this.model.selectedNodes);\n    for (const item of this.initialSelection) {\n      if (!currentSelectionSet.has(item)) {\n        return true;\n      }\n    }\n    return false;\n  }\n}\n","<c8y-asset-selector\n  class=\"bg-component\"\n  #assetSelector\n  [config]=\"{\n    groupsOnly: true,\n    multi: true,\n    groupsSelectable: true,\n    search: true,\n    label: ''\n  }\"\n  [selected]=\"preselected\"\n  (onSelected)=\"selectionChanged($event)\"\n></c8y-asset-selector>\n\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    title=\"{{ 'Reset' | translate }}\"\n    (click)=\"resetFilter()\"\n    translate\n  >\n    Reset\n  </button>\n\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    title=\"{{ 'Apply' | translate }}\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"isApplyDisabled\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n","import { IManagedObject } from '@c8y/client';\nimport {\n  BaseColumn,\n  ColumnConfig,\n  FilterChip,\n  gettext,\n  PartialFilterChipGenerationType\n} from '@c8y/ngx-components';\nimport { GroupCellRendererComponent } from './group.cell-renderer.component';\nimport { GroupFilteringFormRendererComponent } from './group.filtering-form-renderer.component';\n\nexport class GroupDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n    this.name = 'group';\n    this.header = gettext('Group');\n    this.cellRendererComponent = GroupCellRendererComponent;\n    this.filteringFormRendererComponent = GroupFilteringFormRendererComponent;\n    this.filterable = true;\n    this.filteringConfig = {\n      generateChips(model): PartialFilterChipGenerationType[] {\n        if (model.selectedNodes) {\n          return model.selectedNodes.map(mo => ({\n            displayValue: mo.name,\n            value: mo,\n            remove(): Partial<FilterChip> {\n              const { externalFilterQuery, columnName, value } = this;\n              const nodes = externalFilterQuery.selectedNodes.filter(node => node.id !== value.id);\n\n              return {\n                externalFilterQuery: { selectedNodes: nodes },\n                columnName: columnName\n              };\n            }\n          }));\n        }\n      },\n      getFilter(model) {\n        const filter: any = {};\n        if (model.selectedNodes) {\n          filter.__or = model.selectedNodes.map((mo: IManagedObject) => {\n            if (mo.c8y_DeviceQueryString) {\n              return { __useFilterQueryString: mo.c8y_DeviceQueryString };\n            }\n            return { __bygroupid: mo.id };\n          });\n        }\n        return filter;\n      }\n    };\n    this.sortable = false;\n  }\n}\n","import {\n  BaseColumn,\n  ColumnConfig,\n  getBasicInputArrayFormFieldConfig,\n  gettext\n} from '@c8y/ngx-components';\n\nexport class ImeiDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    this.path = 'c8y_Mobile.imei';\n    this.name = 'imei';\n    this.header = gettext('IMEI');\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'imeis',\n        label: gettext('Show items with IMEI'),\n        addText: gettext('Add next`IMEI`'),\n        tooltip: gettext('Use * as a wildcard character'),\n        placeholder: '46543432321'\n      }),\n      getFilter: (model: any): any => {\n        const filter: any = {};\n        if (model.imeis.length) {\n          filter[this.path] = { __in: model.imeis };\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [{ path: this.path }]\n    };\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext } from '@c8y/ngx-components';\nimport { ColumnUtilService } from './column-util.service';\n\n@Component({\n  template: ` {{ columnUtilService.getModel(context.item) }} `,\n  selector: 'c8y-model-cell-renderer'\n})\nexport class ModelCellRendererComponent {\n  constructor(\n    public context: CellRendererContext,\n    public columnUtilService: ColumnUtilService\n  ) {}\n}\n","import {\n  BaseColumn,\n  ColumnConfig,\n  getBasicInputArrayFormFieldConfig,\n  gettext\n} from '@c8y/ngx-components';\nimport { ModelCellRendererComponent } from './model.cell-renderer.component';\n\nexport class ModelDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    const hardwareModelPath = 'c8y_Hardware.model';\n\n    this.name = 'model';\n    this.header = gettext('Model');\n    this.cellRendererComponent = ModelCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'models',\n        label: gettext('Show items with model'),\n        addText: gettext('Add next`model`'),\n        tooltip: gettext('Use * as a wildcard character'),\n        placeholder: 'NTC-220'\n      }),\n      getFilter(model: any): any {\n        const filter: any = {};\n        if (model.models.length) {\n          filter.push = {\n            [hardwareModelPath]: { __in: model.models }\n          };\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [{ path: hardwareModelPath }]\n    };\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext } from '@c8y/ngx-components';\nimport { ColumnUtilService } from './column-util.service';\n\n@Component({\n  template: `\n    <a\n      class=\"interact\"\n      title=\"{{ columnUtilService.getProperName(context.item) }}\"\n      [href]=\"columnUtilService.getHref(context.item)\"\n    >\n      {{ columnUtilService.getProperName(context.item) }}\n    </a>\n  `,\n  selector: 'c8y-name-cell-renderer'\n})\nexport class NameCellRendererComponent {\n  constructor(\n    public context: CellRendererContext,\n    public columnUtilService: ColumnUtilService\n  ) {}\n}\n","import {\n  BaseColumn,\n  ColumnConfig,\n  ColumnDataRecordClassName,\n  getBasicInputArrayFormFieldConfig,\n  gettext\n} from '@c8y/ngx-components';\nimport { NameCellRendererComponent } from './name.cell-renderer.component';\n\nexport class NameDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n    this.name = 'name';\n    this.path = 'name';\n    this.header = gettext('Name');\n    this.cellCSSClassName = ColumnDataRecordClassName.Header;\n    this.cellRendererComponent = NameCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'names',\n        label: gettext('Show items with name'),\n        addText: gettext('Add next`name`'),\n        tooltip: gettext('Use * as a wildcard character'),\n        placeholder: gettext('My device`DEVICE_NAME`')\n      }),\n      getFilter(model: any): any {\n        const filter: any = {};\n        if (model.names.length) {\n          filter.name = { __in: model.names };\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [{ path: this.path }]\n    };\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext, DatePipe } from '@c8y/ngx-components';\n\n@Component({\n  template: ` {{ context.value | c8yDate }} `,\n  selector: 'c8y-registration-date-cell-renderer',\n  imports: [DatePipe]\n})\nexport class RegistrationDateCellRendererComponent {\n  constructor(public context: CellRendererContext) {}\n}\n","import { FormGroup } from '@angular/forms';\nimport { BaseColumn, ColumnConfig, gettext } from '@c8y/ngx-components';\nimport { RegistrationDateCellRendererComponent } from './registration-date.cell-renderer.component';\n\nexport class RegistrationDateDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    this.path = 'creationTime';\n    this.name = 'registrationDate';\n    this.header = gettext('Registration date');\n    this.cellRendererComponent = RegistrationDateCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: [\n        {\n          type: 'object',\n          key: 'registrationDate',\n          templateOptions: {\n            label: gettext('Show items registered`between dates`')\n          },\n          fieldGroup: [\n            {\n              type: 'date-time',\n              key: 'after',\n              templateOptions: {\n                label: gettext('from`date`')\n              },\n              expressionProperties: {\n                'templateOptions.maxDate': (model: any) => model?.before\n              }\n            },\n            {\n              type: 'date-time',\n              key: 'before',\n              templateOptions: {\n                label: gettext('to`date`')\n              },\n              expressionProperties: {\n                'templateOptions.minDate': (model: any) => model?.after\n              }\n            }\n          ],\n          validators: {\n            atLeastOneFilled: {\n              expression: (formGroup: any) => {\n                const after = formGroup.get('after').value;\n                const before = formGroup.get('before').value;\n                return after || before;\n              }\n            }\n          }\n        }\n      ],\n      formGroup: new FormGroup({}),\n      getFilter: model => {\n        const filter: any = {};\n        const dates = model && model.registrationDate;\n        if (dates && (dates.after || dates.before)) {\n          filter.__and = [];\n          if (dates.after) {\n            const after = this.formatDate(dates.after);\n            filter.__and.push({\n              'creationTime.date': { __gt: after }\n            });\n          }\n          if (dates.before) {\n            const before = this.formatDate(dates.before);\n            filter.__and.push({\n              'creationTime.date': { __lt: before }\n            });\n          }\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [{ path: 'creationTime.date' }]\n    };\n  }\n\n  protected formatDate(dateToFormat: string): string {\n    return new Date(dateToFormat).toISOString();\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext } from '@c8y/ngx-components';\nimport { ColumnUtilService } from './column-util.service';\n\n@Component({\n  template: ` {{ columnUtilService.getSerialNumber(context.item) }} `,\n  selector: 'c8y-serial-number-cell-renderer'\n})\nexport class SerialNumberCellRendererComponent {\n  constructor(\n    public context: CellRendererContext,\n    public columnUtilService: ColumnUtilService\n  ) {}\n}\n","import {\n  BaseColumn,\n  ColumnConfig,\n  getBasicInputArrayFormFieldConfig,\n  gettext\n} from '@c8y/ngx-components';\nimport { SerialNumberCellRendererComponent } from './serial-number.cell-renderer.component';\n\nexport class SerialNumberDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    const hardwareSerialNumberPath = 'c8y_Hardware.serialNumber';\n\n    this.name = 'serialNumber';\n    this.header = gettext('Serial number');\n    this.cellRendererComponent = SerialNumberCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'serialNumbers',\n        label: gettext('Show items with serial number'),\n        addText: gettext('Add next`serial number`'),\n        tooltip: gettext('Use * as a wildcard character'),\n        placeholder: '54321-123'\n      }),\n      getFilter(model: any): any {\n        const filter: any = {};\n        if (model.serialNumbers.length) {\n          filter.push = {\n            [hardwareSerialNumberPath]: { __in: model.serialNumbers }\n          };\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [{ path: hardwareSerialNumberPath }]\n    };\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext, DeviceStatusComponent } from '@c8y/ngx-components';\n\n@Component({\n  template: ` <device-status [mo]=\"context.item\"></device-status> `,\n  selector: 'c8y-device-status-cell-renderer',\n  imports: [DeviceStatusComponent]\n})\nexport class DeviceStatusCellRendererComponent {\n  constructor(public context: CellRendererContext) {}\n}\n","import { FormGroup } from '@angular/forms';\nimport { BaseColumn, ColumnDataType, gettext, PushStatus, SendStatus } from '@c8y/ngx-components';\nimport { DeviceStatusCellRendererComponent } from './status.cell-renderer.component';\n\nexport class StatusDeviceGridColumn extends BaseColumn {\n  constructor() {\n    super();\n\n    const responseIntervalPath = 'c8y_RequiredAvailability.responseInterval';\n    const responseIntervalLessThanOrEqualTo0 = { [responseIntervalPath]: { __le: 0 } };\n    const responseIntervalNotDefined = { __not: { __has: responseIntervalPath } };\n\n    const availabilityStatusPath = 'c8y_Availability.status';\n    const availabilityStatusAvailable = { [availabilityStatusPath]: SendStatus.AVAILABLE };\n    const availabilityStatusUnavailable = { [availabilityStatusPath]: SendStatus.UNAVAILABLE };\n    const availabilityStatusMaintenance = { [availabilityStatusPath]: SendStatus.MAINTENANCE };\n    const availabilityStatusNotDefined = { __not: { __has: availabilityStatusPath } };\n\n    const connectionStatusPath = 'c8y_Connection.status';\n    const connectionStatusConnected = { [connectionStatusPath]: PushStatus.CONNECTED };\n    const connectionStatusDisconnected = { [connectionStatusPath]: PushStatus.DISCONNECTED };\n    const connectionStatusMaintenance = { [connectionStatusPath]: PushStatus.MAINTENANCE };\n\n    const deviceUnderMaintenance = {\n      __or: [\n        responseIntervalLessThanOrEqualTo0,\n        availabilityStatusMaintenance,\n        connectionStatusMaintenance\n      ]\n    };\n    const deviceNotUnderMaintenance = {\n      // using __and of __nots because backend does not support __not with __ors\n      __and: [\n        { __not: responseIntervalLessThanOrEqualTo0 },\n        { __not: availabilityStatusMaintenance },\n        { __not: connectionStatusMaintenance }\n      ]\n    };\n\n    this.name = 'status';\n    this.header = gettext('Status');\n    this.dataType = ColumnDataType.Icon;\n    this.cellRendererComponent = DeviceStatusCellRendererComponent;\n    this.resizable = false;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: [\n        {\n          type: 'object',\n          templateOptions: {\n            label: 'Show items with status'\n          },\n          fieldGroup: [\n            {\n              key: 'sendStatus',\n              type: 'object',\n              props: {\n                label: gettext('Send status')\n              },\n              fieldGroup: [\n                {\n                  key: 'sendOnline',\n                  type: 'switch',\n                  props: { label: gettext('Online') }\n                },\n                {\n                  key: 'sendOffline',\n                  type: 'switch',\n                  props: { label: gettext('Offline') }\n                },\n                {\n                  key: 'sendUnknown',\n                  type: 'switch',\n                  props: { label: gettext('Unknown') }\n                },\n                {\n                  key: 'sendNotMonitored',\n                  type: 'switch',\n                  props: { label: gettext('Not monitored') }\n                }\n              ]\n            },\n            {\n              key: 'pushStatus',\n              type: 'object',\n              props: {\n                label: gettext('Push status')\n              },\n              fieldGroup: [\n                {\n                  key: 'pushOnline',\n                  type: 'switch',\n                  props: { label: gettext('Online') }\n                },\n                {\n                  key: 'pushOffline',\n                  type: 'switch',\n                  props: { label: gettext('Offline') }\n                },\n                {\n                  key: 'pushNotMonitored',\n                  type: 'switch',\n                  props: { label: gettext('Not monitored') }\n                }\n              ]\n            },\n            {\n              key: 'maintenanceStatus',\n              type: 'object',\n              props: {\n                label: gettext('Maintenance status')\n              },\n              fieldGroup: [\n                {\n                  key: 'maintenance',\n                  type: 'switch',\n                  props: { label: gettext('Device is under maintenance') }\n                }\n              ]\n            }\n          ],\n          validators: {\n            atLeastOneFilled: {\n              expression: (formGroup: any) => {\n                const sendStatus = formGroup.get('sendStatus').value || {};\n                const pushStatus = formGroup.get('pushStatus').value || {};\n                const maintenanceStatus = formGroup.get('maintenanceStatus').value || {};\n\n                return (\n                  sendStatus.sendOnline ||\n                  sendStatus.sendOffline ||\n                  sendStatus.sendUnknown ||\n                  sendStatus.sendNotMonitored ||\n                  pushStatus.pushOnline ||\n                  pushStatus.pushOffline ||\n                  pushStatus.pushNotMonitored ||\n                  maintenanceStatus.maintenance\n                );\n              }\n            }\n          }\n        }\n      ],\n      formGroup: new FormGroup({}),\n      getFilter(model) {\n        const filter: any = {};\n        const ors = [];\n\n        if (model?.sendStatus?.sendOnline) {\n          ors.push({\n            __and: [deviceNotUnderMaintenance, availabilityStatusAvailable]\n          });\n        }\n\n        if (model?.sendStatus?.sendOffline) {\n          ors.push({\n            __and: [deviceNotUnderMaintenance, availabilityStatusUnavailable]\n          });\n        }\n\n        if (model?.sendStatus?.sendUnknown) {\n          ors.push({\n            __and: [deviceNotUnderMaintenance, availabilityStatusNotDefined]\n          });\n        }\n\n        if (model?.sendStatus?.sendNotMonitored || model?.pushStatus?.pushNotMonitored) {\n          ors.push(responseIntervalNotDefined);\n        }\n\n        if (model?.pushStatus?.pushOnline) {\n          ors.push({\n            __and: [deviceNotUnderMaintenance, connectionStatusConnected]\n          });\n        }\n\n        if (model?.pushStatus?.pushOffline) {\n          ors.push({\n            __and: [deviceNotUnderMaintenance, connectionStatusDisconnected]\n          });\n        }\n\n        if (model?.maintenanceStatus?.maintenance) {\n          ors.push(deviceUnderMaintenance);\n        }\n\n        if (ors.length) {\n          filter.__or = ors;\n        }\n\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [{ path: availabilityStatusPath }]\n    };\n  }\n}\n","import {\n  BaseColumn,\n  ColumnConfig,\n  getBasicInputArrayFormFieldConfig,\n  gettext\n} from '@c8y/ngx-components';\n\nexport class SystemIdDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    this.path = 'id';\n    this.name = 'systemId';\n    this.header = gettext('System ID');\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'ids',\n        label: gettext('Show items with system ID'),\n        addText: gettext('Add next`id`'),\n        tooltip: gettext('Use * as a wildcard character'),\n        placeholder: '10300'\n      }),\n      getFilter: (model: any): any => {\n        const filter: any = {};\n        if (model.ids.length) {\n          filter[this.path] = { __in: model.ids };\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = {\n      pathSortingConfigs: [{ path: this.path }]\n    };\n  }\n}\n","import {\n  BaseColumn,\n  ColumnConfig,\n  getBasicInputArrayFormFieldConfig,\n  gettext\n} from '@c8y/ngx-components';\n\nexport class TypeDeviceGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    this.name = 'type';\n    this.path = 'type';\n    this.header = gettext('Type');\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'types',\n        label: gettext('Show devices with type'),\n        addText: gettext('Add next`type`'),\n        tooltip: gettext('Use * as a wildcard character'),\n        placeholder: gettext('MyType`DEVICE_TYPE`')\n      }),\n      getFilter(model: any): any {\n        const filter: any = {};\n        if (model.types.length) {\n          filter.type = { __in: model.types };\n        }\n        return filter;\n      }\n    };\n\n    this.sortable = true;\n    this.sortingConfig = { pathSortingConfigs: [{ path: 'type' }] };\n  }\n}\n","import { Component } from '@angular/core';\nimport {\n  BaseColumn,\n  CellRendererContext,\n  ColumnDataType,\n  IconDirective\n} from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { SupportedIcons } from '@c8y/ngx-components/icon-selector/icons';\n\n@Component({\n  selector: 'c8y-icon-device-grid-column',\n  standalone: true,\n  imports: [IconDirective],\n  template: `<i [c8yIcon]=\"icon\"></i>`\n})\nexport class IconDeviceGridColumnComponent {\n  icon: SupportedIcons;\n  constructor(context: CellRendererContext) {\n    const propertyAsIconColumn = context.property as IconDeviceGridColumn;\n    if (propertyAsIconColumn && typeof propertyAsIconColumn.iconRetriever === 'function') {\n      this.icon = propertyAsIconColumn.iconRetriever(context);\n    } else {\n      this.icon = context.value;\n    }\n  }\n}\n\nexport class IconDeviceGridColumn extends BaseColumn {\n  constructor(\n    options: Partial<BaseColumn> = {},\n    public iconRetriever?: (context: CellRendererContext) => SupportedIcons\n  ) {\n    super(options);\n    this.dataType = ColumnDataType.Icon;\n    this.name = 'icon';\n    this.path = 'icon';\n    this.filterable = false;\n    this.resizable = false;\n    this.header = gettext('Icon');\n    this.cellRendererComponent = IconDeviceGridColumnComponent;\n\n    Object.assign(this, options);\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { IManagedObject, InventoryService, IUser, UserService } from '@c8y/client';\nimport {\n  AlertService,\n  BulkActionControl,\n  Column,\n  DataGridService,\n  gettext,\n  GridConfig,\n  HeaderActionControl,\n  ModalService,\n  Pagination,\n  Status,\n  UserPreferencesService\n} from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport { Observable } from 'rxjs';\nimport { AlarmsDeviceGridColumn } from './columns/alarms.device-grid-column';\nimport { ColumnUtilService } from './columns/column-util.service';\nimport { GroupDeviceGridColumn } from './columns/group.device-grid-column';\nimport { ImeiDeviceGridColumn } from './columns/imei.device-grid-column';\nimport { ModelDeviceGridColumn } from './columns/model.device-grid-column';\nimport { NameDeviceGridColumn } from './columns/name.device-grid-column';\nimport { RegistrationDateDeviceGridColumn } from './columns/registration-date.device-grid-column';\nimport { SerialNumberDeviceGridColumn } from './columns/serial-number.device-grid-column';\nimport { StatusDeviceGridColumn } from './columns/status.device-grid-column';\nimport { SystemIdDeviceGridColumn } from './columns/system-id.device-grid-column';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DeviceGridService extends DataGridService {\n  protected GRID_CONFIG_DEFAULT_STORAGE_KEY = 'device-grid-config';\n\n  constructor(\n    protected inventoryService: InventoryService,\n    protected userService: UserService,\n    protected translateService: TranslateService,\n    protected alertService: AlertService,\n    protected modal: ModalService,\n    protected columnUtilService: ColumnUtilService,\n    protected userPreferencesService: UserPreferencesService\n  ) {\n    super(userPreferencesService);\n  }\n\n  getDefaultColumns(): Column[] {\n    const defaultColumns = [\n      new StatusDeviceGridColumn(),\n      new NameDeviceGridColumn(),\n      new ModelDeviceGridColumn(),\n      new SerialNumberDeviceGridColumn(),\n      new GroupDeviceGridColumn(),\n      new RegistrationDateDeviceGridColumn(),\n      new SystemIdDeviceGridColumn(),\n      new ImeiDeviceGridColumn(),\n      new AlarmsDeviceGridColumn()\n    ];\n\n    return defaultColumns;\n  }\n\n  getChildDeviceGridColumns(): Column[] {\n    const childDeviceGridColumn = [\n      new StatusDeviceGridColumn(),\n      new NameDeviceGridColumn(),\n      new ModelDeviceGridColumn(),\n      new SerialNumberDeviceGridColumn(),\n      new RegistrationDateDeviceGridColumn(),\n      new SystemIdDeviceGridColumn(),\n      new ImeiDeviceGridColumn(),\n      new AlarmsDeviceGridColumn()\n    ];\n\n    return childDeviceGridColumn;\n  }\n\n  getDefaultPagination(): Pagination {\n    return {\n      pageSize: 25,\n      currentPage: 1\n    };\n  }\n\n  getInfiniteScrollPagination(): Pagination {\n    return {\n      pageSize: 50,\n      currentPage: 1\n    };\n  }\n\n  getDefaultBulkActionControls(): BulkActionControl[] {\n    return [];\n  }\n\n  getDefaultHeaderActionControls(): HeaderActionControl[] {\n    return [];\n  }\n\n  getProperName(device: IManagedObject): string {\n    return this.columnUtilService.getProperName(device);\n  }\n\n  getModel(device: IManagedObject): string {\n    return this.columnUtilService.getModel(device);\n  }\n\n  getSerialNumber(device: IManagedObject): string {\n    return this.columnUtilService.getSerialNumber(device);\n  }\n\n  getParentsNames(device: IManagedObject, featuredParentId?: string | number): string {\n    return this.columnUtilService.getParentsNames(device, featuredParentId);\n  }\n\n  getHref(groupOrDevice: IManagedObject, prefix = '#/'): string {\n    return this.columnUtilService.getHref(groupOrDevice, prefix);\n  }\n\n  getAlarmsHref(device: IManagedObject): string {\n    return this.columnUtilService.getAlarmsHref(device);\n  }\n\n  async delete(device: IManagedObject): Promise<void> {\n    try {\n      const deviceWithChildren = await (\n        await this.inventoryService.detail(device, { withChildren: true })\n      ).data;\n      const hasChildDevices = deviceWithChildren.childDevices?.references?.length > 0;\n      const hasChildAdditions = deviceWithChildren.childAdditions?.references?.length > 0;\n      const hasChildAssets = deviceWithChildren.childAssets?.references?.length > 0;\n      const showDeleteChildren = () => hasChildAdditions || hasChildDevices || hasChildAssets;\n      const modalResult = await this.modal.confirm(\n        gettext('Delete device'),\n        this.translateService.instant(\n          gettext(`You are about to delete device \"{{ name }}\". Do you want to proceed?`),\n          device\n        ),\n        Status.DANGER,\n        { ok: gettext('Delete'), cancel: gettext('Cancel') },\n        {\n          cascade: {\n            text: gettext('Also delete child hierarchy of this device.'),\n            checked: showDeleteChildren(),\n            showIf: showDeleteChildren,\n            disabledByKey: 'withDeviceUser'\n          },\n          withDeviceUser: {\n            text: this.translateService.instant(\n              gettext('Also delete associated device owner \"{{ owner }}\".'),\n              device\n            ),\n            checked: false,\n            showIf: () => {\n              const isRootDevice = device.c8y_IsDevice;\n              const hasDeviceUserAsOwner =\n                device.owner &&\n                this.userService.isDeviceUser({ id: device.owner } as unknown as IUser);\n\n              return Boolean(isRootDevice && hasDeviceUserAsOwner);\n            },\n            disabledByKey: 'cascade'\n          }\n        }\n      );\n      await this.inventoryService.delete(\n        device,\n        (modalResult as { confirmOptions: { [key: string]: any } }).confirmOptions\n      );\n      this.alertService.success(gettext('Device deleted.'));\n      return Promise.resolve();\n    } catch (ex) {\n      // only if not cancel from modal\n      if (ex) {\n        this.alertService.addServerFailure(ex);\n      }\n      return Promise.reject();\n    }\n  }\n\n  async getData(\n    columns: Column[],\n    pagination: Pagination,\n    query: any = {},\n    withChildren = false,\n    text = null\n  ) {\n    const filters = {\n      ...this.getDevicesFilters(columns, pagination, query, false, text),\n      withGroups: true,\n      withChildren,\n      withTotalElements: true\n    };\n    return this.inventoryService.list(filters);\n  }\n\n  async getChildDeviceData(\n    columns: Column[],\n    pagination: Pagination,\n    query: any = {},\n    withChildren = false,\n    id: string\n  ) {\n    const childDeviceFilters = true;\n    const filters = {\n      ...this.getDevicesFilters(columns, pagination, query, childDeviceFilters),\n      withGroups: true,\n      withChildren\n    };\n    return this.inventoryService.childDevicesList(id, filters);\n  }\n\n  async getCount(columns: Column[], pagination: Pagination, query: any = {}, text: string = null) {\n    const filters = {\n      ...this.getDevicesFilters(columns, pagination, query, false, text),\n      withTotalElements: true\n    };\n    return (await this.inventoryService.list(filters)).paging.totalElements;\n  }\n\n  async getCountChildDevices(\n    columns: Column[],\n    pagination: Pagination,\n    query: any = {},\n    id: string\n  ) {\n    const childDeviceFilters = true;\n    const filters = {\n      ...this.getDevicesFilters(columns, pagination, query, childDeviceFilters),\n      withTotalElements: true\n    };\n    return (await this.inventoryService.childDevicesList(id, filters)).paging.totalElements;\n  }\n\n  async getTotalChildDevices(query: any = {}, id: string): Promise<number> {\n    const filters = {\n      q: this.queriesUtil.buildQuery(query),\n      withTotalElements: true\n    };\n    return (await this.inventoryService.childDevicesList(id, filters)).paging.totalElements;\n  }\n\n  async getTotal(query: any = {}): Promise<number> {\n    const filters = {\n      q: this.queriesUtil.buildQuery(query),\n      withTotalElements: true\n    };\n    return (await this.inventoryService.list(filters)).paging.totalElements;\n  }\n\n  getDeviceQueryString(columns: Column[], query: any): string {\n    let fullQuery = this.getQueryObj(columns);\n    fullQuery = this.queriesUtil.addAndFilter(fullQuery, query);\n    return this.queriesUtil.buildQuery(fullQuery);\n  }\n\n  clearConfig(key: string = this.GRID_CONFIG_DEFAULT_STORAGE_KEY) {\n    super.clearConfig(key);\n  }\n\n  getConfig$(key: string = this.GRID_CONFIG_DEFAULT_STORAGE_KEY): Observable<GridConfig> {\n    return super.getConfig$(key);\n  }\n\n  saveConfig$(\n    config: GridConfig,\n    key: string = this.GRID_CONFIG_DEFAULT_STORAGE_KEY\n  ): Observable<GridConfig> {\n    return super.saveConfig$(config, key);\n  }\n\n  private getDevicesFilters(\n    columns: Column[],\n    pagination: Pagination,\n    query: any,\n    childDeviceFilters?: boolean,\n    text?: string\n  ) {\n    return {\n      ...(childDeviceFilters\n        ? { query: this.getDeviceQueryString(columns, query) }\n        : { q: this.getDeviceQueryString(columns, query) }),\n      ...(text && { text }),\n      pageSize: pagination.pageSize,\n      currentPage: pagination.currentPage,\n      withChildren: false,\n      withTotalPages: true\n    };\n  }\n}\n","import {\n  Component,\n  EventEmitter,\n  forwardRef,\n  Input,\n  OnDestroy,\n  Output,\n  ViewChild\n} from '@angular/core';\nimport {\n  ActionControl,\n  alertOnError,\n  BulkActionControl,\n  Column,\n  DataGridComponent,\n  DataSourceModifier,\n  FilteringActionType,\n  FilteringModifier,\n  gettext,\n  HeaderActionControl,\n  LoadMoreMode,\n  Pagination,\n  ProductExperienceEvent,\n  ProductExperienceEventSource,\n  PRODUCT_EXPERIENCE_EVENT_SOURCE,\n  ServerSideDataCallback,\n  ServerSideDataResult,\n  ProductExperienceDirective,\n  EmptyStateContextDirective,\n  EmptyStateComponent,\n  ColumnDirective,\n  C8yTranslatePipe\n} from '@c8y/ngx-components';\nimport { Subject } from 'rxjs';\nimport { DataCallback, FilterConfig } from './device-grid.model';\nimport { DeviceGridService } from './device-grid.service';\n\nimport { NgFor } from '@angular/common';\n\n@Component({\n  selector: 'c8y-device-grid',\n  templateUrl: './device-grid.component.html',\n  providers: [\n    {\n      provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,\n      useExisting: forwardRef(() => DeviceGridComponent)\n    }\n  ],\n  imports: [\n    DataGridComponent,\n    ProductExperienceDirective,\n    EmptyStateContextDirective,\n    EmptyStateComponent,\n    NgFor,\n    ColumnDirective,\n    C8yTranslatePipe\n  ]\n})\nexport class DeviceGridComponent implements OnDestroy, ProductExperienceEventSource {\n  /** Optional callback function that allows to modify server side data result before it's rendered. */\n  @Input() dataCallback: DataCallback;\n  /** Takes an event emitter. When an event is emitted, the grid will be reloaded. */\n  @Input() refresh: EventEmitter<void> = new EventEmitter();\n  /** The title for the data grid, it's displayed in the grid's header. */\n  @Input() title: string = gettext('Devices');\n  /** The label for load more button. */\n  @Input() loadMoreItemsLabel = gettext('Load more devices');\n  /** The label for loading indicator. */\n  @Input() loadingItemsLabel: string = gettext('Loading devices…');\n  /**\n   * @deprecated\n   *\n   * Internal use only: used to define user preferences key under which 'All devices' column config is stored.\n   */\n  @Input() legacyConfigKey: string;\n  /**\n   * @deprecated\n   *\n   * Internal use only: used to define user preferences key under which 'All devices' filter/sorting config is stored.\n   */\n  @Input() legacyFilterKey: string;\n  /** The list of columns to be displayed in the grid. If not given, it defaults to standard columns. */\n  @Input('columns') columns: Column[] = this.deviceGridService.getDefaultColumns();\n  /** Pagination settings, e.g. allows for setting current page or page size. If not given, defaults to standard settings. */\n  @Input('pagination') set _pagination(value: Pagination) {\n    if (value) {\n      this.pagination = value;\n    }\n  }\n  infiniteScroll: LoadMoreMode;\n  /** Sets load more mode. */\n  @Input('infi