@c8y/ngx-components/fesm2022/c8y-ngx-components-widgets-implementations-alarms.mjs.map

Angular modules for Cumulocity IoT applications

{"version":3,"file":"c8y-ngx-components-widgets-implementations-alarms.mjs","sources":["../../widgets/implementations/alarms/alarm-list-widget.model.ts","../../widgets/implementations/alarms/alarm-widget.service.ts","../../widgets/implementations/alarms/severity-icon.pipe.ts","../../widgets/implementations/alarms/sorting-description-popover-message.pipe.ts","../../widgets/implementations/alarms/alarm-list-widget-config/alarm-list-widget-config.component.ts","../../widgets/implementations/alarms/alarm-list-widget-config/alarm-list-widget-config.component.html","../../widgets/implementations/alarms/alarm-widget-alarms-reload.component.ts","../../widgets/implementations/alarms/alarm-widget-alarms-reload.component.html","../../widgets/implementations/alarms/alarm-list-widget-view/alarm-list-widget.component.ts","../../widgets/implementations/alarms/alarm-list-widget-view/alarm-list-widget.component.html","../../widgets/implementations/alarms/alarms-widget.module.ts","../../widgets/implementations/alarms/c8y-ngx-components-widgets-implementations-alarms.ts"],"sourcesContent":["import { gettext, GlobalAutoRefreshWidgetConfig, DateTimeContext } from '@c8y/ngx-components';\nimport { SeverityFilter, AlarmStatusSettings } from '@c8y/client';\nimport { AlarmFilterInterval } from '@c8y/ngx-components/interval-picker';\n\nexport const ALARM_ORDER_VALUES = {\n  BY_ACTIVE: 'BY_ACTIVE',\n  BY_DATE_ASCENDING: 'BY_DATE_ASCENDING',\n  BY_DATE_DESCENDING: 'BY_DATE_DESCENDING',\n  BY_SEVERITY: 'BY_SEVERITY'\n} as const;\n\nexport const ALARM_ORDER_LABELS = {\n  BY_ACTIVE: gettext('By active status') as 'By active status',\n  BY_DATE_ASCENDING: gettext('By date (ascending)') as 'By date (ascending)',\n  BY_DATE_DESCENDING: gettext('By date (descending)') as 'By date (descending)',\n  BY_SEVERITY: gettext('By severity') as 'By severity'\n} as const;\n\nexport type AlarmOrderType = keyof typeof ALARM_ORDER_VALUES;\n\nexport type SelectedDevice = { id: string; name: string };\n\nexport const ASSET_ALARMS_WIDGET_ID = 'Asset Alarms';\n\nexport const RECENT_ALARMS_WIDGET_ID = 'Recent Alarms';\n\nexport type AlarmListRefreshOption = 'none' | 'interval' | 'global-interval';\n\nexport const GLOBAL_INTERVAL_OPTION: AlarmListRefreshOption = 'global-interval';\n\nexport type LegacyAlarmListConfig = {\n  realtime: boolean;\n  options: {\n    severity: SeverityFilter;\n    types: string[];\n    orderMode: string;\n    device: string;\n    status: AlarmStatusSettings;\n  };\n  device?: {\n    name: string;\n    id: string;\n  };\n};\n\nexport enum DATE_SELECTION {\n  CONFIG = 'config',\n  VIEW_AND_CONFIG = 'view_and_config',\n  DASHBOARD_CONTEXT = 'dashboard_context'\n}\nexport interface AlarmListWidgetConfig extends GlobalAutoRefreshWidgetConfig {\n  order: AlarmOrderType;\n  isRealtime?: boolean;\n  showAlarmsForChildren?: boolean;\n  refreshInterval?: number;\n  isAutoRefreshEnabled?: boolean;\n  refreshOption?: AlarmListRefreshOption;\n  device?: SelectedDevice;\n  severities: SeverityFilter;\n  status: AlarmStatusSettings;\n  types?: string[];\n  dateFilter?: DateTimeContext;\n  widgetInstanceGlobalTimeContext?: boolean;\n  displayDateSelection?: boolean;\n  interval?: AlarmFilterInterval['id'];\n  displaySettings?: {\n    globalTimeContext: boolean;\n    globalAutoRefreshContext: boolean;\n  };\n}\n","import { Injectable } from '@angular/core';\nimport {\n  AlarmQueryFilter,\n  AlarmStatusSettings,\n  AlarmStatus,\n  IAlarm,\n  Severity,\n  SeverityFilter,\n  SEVERITY_LABELS\n} from '@c8y/client';\n\nimport { SeveritySettings, SeverityType } from '@c8y/client';\nimport { AlarmsViewService } from '@c8y/ngx-components/alarms';\nimport {\n  ALARM_ORDER_VALUES,\n  AlarmListWidgetConfig,\n  AlarmOrderType,\n  LegacyAlarmListConfig,\n  RECENT_ALARMS_WIDGET_ID\n} from './alarm-list-widget.model';\n\nexport const DEFAULT_PAGE_SIZE = 20;\n\n@Injectable({ providedIn: 'root' })\nexport class AlarmWidgetService {\n  constructor(private alarmsViewService: AlarmsViewService) {}\n\n  /**\n   * Checks if the provided data follows the LegacyAlarmConfig structure.\n   *\n   * This function determines if a given data object is an instance of LegacyAlarmConfig\n   * by checking for the presence of the 'options' property.\n   *\n   * @param data - The data object to be checked.\n   * @returns - Returns `true` if the data object is a LegacyAlarmConfig, otherwise `false`.\n   */\n  isOldAlarmConfigStructure(\n    data: LegacyAlarmListConfig | AlarmListWidgetConfig\n  ): data is LegacyAlarmListConfig {\n    return data !== null && typeof data === 'object' && 'options' in data;\n  }\n\n  /**\n   * Creates predefined widget configuration object.\n   *\n   * This method creates a new configuration object based on\n   * a widgets ID (that determines if is a legacy Recent or Critical alarms widget).\n   *\n   * @param isIntervalRefresh - determines a type of a refresh.\n   * @param widgetId - determines if a config should be done for Recent or Critical alarms widget.\n   * @returns The new, predefined configuration object.\n   */\n  getPredefinedConfiguration(isIntervalRefresh: boolean, widgetId?: string): AlarmListWidgetConfig {\n    return {\n      order: ALARM_ORDER_VALUES.BY_ACTIVE,\n      severities:\n        widgetId === RECENT_ALARMS_WIDGET_ID\n          ? ({\n              [Severity.CRITICAL]: true,\n              [Severity.MAJOR]: true,\n              [Severity.MINOR]: true,\n              [Severity.WARNING]: true\n            } as SeveritySettings)\n          : ({\n              [Severity.CRITICAL]: true,\n              [Severity.MAJOR]: false,\n              [Severity.MINOR]: false,\n              [Severity.WARNING]: false\n            } as SeveritySettings),\n      status:\n        widgetId === RECENT_ALARMS_WIDGET_ID\n          ? ({\n              [AlarmStatus.ACKNOWLEDGED]: true,\n              [AlarmStatus.ACTIVE]: true,\n              [AlarmStatus.CLEARED]: true\n            } as AlarmStatusSettings)\n          : ({\n              [AlarmStatus.ACKNOWLEDGED]: false,\n              [AlarmStatus.ACTIVE]: true,\n              [AlarmStatus.CLEARED]: false\n            } as AlarmStatusSettings),\n      types: [''],\n      isRealtime: !isIntervalRefresh,\n      isAutoRefreshEnabled: true,\n      refreshInterval: isIntervalRefresh ? this.alarmsViewService.DEFAULT_INTERVAL_VALUE : undefined\n    };\n  }\n\n  /**\n   * Transforms a LegacyAlarmConfig object into an AlarmListWidgetConfig object.\n   *\n   * This function maps the properties from an old configuration structure (LegacyAlarmConfig)\n   * to a new configuration structure (AlarmListWidgetConfig).\n   *\n   * @param oldConfig - The old configuration object to be transformed.\n   * @returns - The new configuration object mapped from the old one.\n   */\n  mapToNewConfigStructure(\n    oldConfig: LegacyAlarmListConfig,\n    isIntervalRefresh: boolean\n  ): AlarmListWidgetConfig {\n    const order: AlarmOrderType =\n      oldConfig.options.orderMode === 'ACTIVE_FIRST'\n        ? ALARM_ORDER_VALUES.BY_ACTIVE\n        : ALARM_ORDER_VALUES.BY_SEVERITY;\n\n    if (!this.isContainingAllSeverityTypes(oldConfig.options.severity)) {\n      oldConfig.options.severity = this.addAllMissingSeverityTypes(oldConfig.options.severity);\n    }\n\n    return {\n      order: order,\n      isRealtime: oldConfig.realtime,\n      device: oldConfig.device,\n      showAlarmsForChildren: false,\n      severities: oldConfig.options.severity,\n      status: this.allValuesFalse(oldConfig.options.status)\n        ? ({\n            [AlarmStatus.ACKNOWLEDGED]: true,\n            [AlarmStatus.ACTIVE]: true,\n            [AlarmStatus.CLEARED]: true\n          } as AlarmStatusSettings)\n        : oldConfig.options.status,\n      types: oldConfig.options.types?.length ? oldConfig.options.types : [''],\n      isAutoRefreshEnabled: true,\n      refreshInterval: isIntervalRefresh ? this.alarmsViewService.DEFAULT_INTERVAL_VALUE : undefined\n    };\n  }\n\n  /**\n   * Checks if the provided severity object contains all the predefined severity types.\n   *\n   * @param severity - A record object where keys are severity type strings and values are boolean.\n   *                 - This object is checked against the predefined severity types.\n   * @returns `true` if all predefined severity types are present in the severity object; otherwise, `false`.\n   */\n  isContainingAllSeverityTypes(severity: SeverityFilter): boolean {\n    return Object.keys(SEVERITY_LABELS).every(severityType => severityType in severity);\n  }\n\n  /**\n   * Adds any missing severity types to the provided severity object with a default value of `false`.\n   *\n   * @param severity - A record object where keys are severity type strings and values are boolean.\n   *                 - Missing severity types will be added to this object.\n   * @returns The modified severity object, which includes all predefined severity types, adding any\n   *          that were missing with a value of `false`.\n   */\n  addAllMissingSeverityTypes(severity: SeverityFilter): SeverityFilter {\n    Object.keys(SEVERITY_LABELS).forEach(severityType => {\n      if (!(severityType in severity)) {\n        severity[severityType] = false;\n      }\n    });\n    return severity;\n  }\n\n  /**\n   * Maps an AlarmListWidgetConfig object to an AlarmQueryFilter.\n   *\n   * This function converts the provided AlarmListWidgetConfig into a format suitable for querying alarms.\n   *\n   * @param config - The configuration object for the alarm list widget.\n   * @param pageSize - Optional number specifying the size of the pages to be returned in the query.\n   * @returns - The query filter object constructed from the provided configuration.\n   */\n  mapConfigToQueryFilter(config: AlarmListWidgetConfig, pageSize?: number): AlarmQueryFilter {\n    const filter: AlarmQueryFilter = {\n      pageSize: pageSize || DEFAULT_PAGE_SIZE,\n      query: this.getOrderParameters(config.order),\n      severity: this.extractFilterParams(config.severities || {}),\n      status: this.extractFilterParams(config.status || {}),\n      type: (config.types || []).join(','),\n      withTotalPages: true\n    };\n    if (config.dateFilter) {\n      filter.lastUpdatedFrom =\n        typeof config.dateFilter[0] === 'string'\n          ? config.dateFilter[0]\n          : config.dateFilter[0].toISOString();\n      filter.createdTo =\n        typeof config.dateFilter[1] === 'string'\n          ? config.dateFilter[1]\n          : config.dateFilter[1].toISOString();\n    }\n    if (config.device) {\n      filter.source = config.device.id;\n      filter.withSourceAssets = true;\n      filter.withSourceDevices = true;\n      filter.withSourceAssets = config.showAlarmsForChildren ?? true;\n      filter.withSourceDevices = config.showAlarmsForChildren ?? true;\n    }\n    return filter;\n  }\n\n  /**\n   * Extracts and concatenates filter parameters from a given object.\n   *\n   * This function takes an object containing filter settings (either SeverityFilter\n   * or AlarmStatusSettings) and returns a string of all keys where the corresponding value is true.\n   * If the object is empty or null, an empty string is returned.\n   *\n   * @param obj - The object containing filter settings.\n   * @returns - A concatenated string of keys with true values, separated by commas.\n   */\n  extractFilterParams(obj: SeverityFilter | AlarmStatusSettings): string {\n    if (!obj) {\n      return '';\n    }\n    return Object.entries(obj)\n      .filter(([, value]) => value)\n      .map(([key]) => key)\n      .join(',');\n  }\n\n  /**\n   * Determines if an incoming real-time alarm has a different status than an existing alarm.\n   *\n   * This function checks if the provided incoming real-time alarm's status differs\n   * from that of an existing alarm with the same ID in the given array of alarms.\n   *\n   * @param existingAlarms - The array of existing alarms.\n   * @param incomingRealtimeAlarm - The incoming real-time alarm to check.\n   * @returns - True if the existing alarm's status has changed, otherwise false.\n   */\n  hasExistingAlarmChangedStatus(existingAlarms: IAlarm[], incomingRealtimeAlarm: IAlarm): boolean {\n    const existingAlarm = existingAlarms.find(alarm => alarm.id === incomingRealtimeAlarm.id);\n    return !!existingAlarm && existingAlarm.status !== incomingRealtimeAlarm.status;\n  }\n\n  /**\n   * Filters alarms based on their status, severity, and type.\n   *\n   * This method determines if a given alarm, identified either by a numeric ID or an `IAlarm` object,\n   * matches specific criteria defined in `alarms` and optionally `config`.\n   *\n   * @param alarm - The alarm to check, represented either by a numeric ID or an `IAlarm` object.\n   * @param alarms - An array of `IAlarm` objects against which the given alarm is evaluated.\n   * @param config - Optional. Configuration for the alarm list widget, used to define additional\n   *                 filtering criteria.\n   *\n   * @returns `true` if the alarm matches the specified criteria; otherwise, `false`.\n   *          If `alarm` is a number, it always returns `false`.\n   *          If `config` is not provided, it uses a legacy filter for critical alarms.\n   *\n   * @remarks\n   * - When `alarm` is a numeric ID, the function returns `false` as it cannot match against type and severity.\n   * - If `config` is not provided, the function assumes a legacy scenario for filtering all critical alarms.\n   */\n  filterAlarmsByStatusSeverityAndType(\n    alarm: number | IAlarm,\n    alarms: IAlarm[],\n    config?: AlarmListWidgetConfig\n  ): boolean {\n    if (typeof alarm === 'number') {\n      return false;\n    }\n\n    return this.isAlarmMatchedByConfig(alarm, alarms, config);\n  }\n\n  /**\n   * Determines if all values in the given object are false.\n   *\n   * This function checks every value in the provided object to see if they are all false.\n   *\n   * @param obj - An object with boolean values.\n   * @returns - Returns `true` if all values in the object are false, otherwise `false`.\n   */\n  allValuesFalse(obj: { [key: string]: boolean }): boolean {\n    return Object.values(obj).every(value => !value);\n  }\n\n  /**\n   * Constructs a string of order parameters for a query based on the specified alarm order.\n   *\n   * This function takes an alarm order and maps it to a corresponding set of order parameters.\n   * It supports different ordering types, such as BY_ACTIVE, BY_SEVERITY, and BY_DATE_ASCENDING.\n   * The order parameters are used to construct a query string that determines the order\n   * in which alarms are retrieved or displayed.\n   *\n   * @param order - The specified order for sorting alarms (e.g., BY_ACTIVE).\n   * @returns - A string of order parameters to be used in a query, or an empty string if the order type is unrecognized.\n   */\n  getOrderParameters(order: AlarmOrderType): string {\n    let orderParams: string[];\n\n    switch (order) {\n      case ALARM_ORDER_VALUES.BY_ACTIVE:\n        orderParams = ['status asc', 'severity asc', 'time.date desc', 'text asc'];\n        return this.buildOrderParameters(orderParams);\n      case ALARM_ORDER_VALUES.BY_SEVERITY:\n        orderParams = ['severity asc', 'time.date desc', 'text asc'];\n        return this.buildOrderParameters(orderParams);\n      case ALARM_ORDER_VALUES.BY_DATE_ASCENDING:\n        orderParams = ['time.date asc', 'text asc'];\n        return this.buildOrderParameters(orderParams);\n      default:\n        orderParams = ['time.date desc', 'text asc'];\n        return this.buildOrderParameters(orderParams);\n    }\n  }\n\n  /**\n   * Determines if an alarm is matched by the specified widget configuration.\n   *\n   * This function evaluates whether a given alarm should be included based on the severity,\n   * status, and type filters defined in the AlarmListWidgetConfig. It checks if the alarm's\n   * severity and status match the configuration settings and if the alarm's type is included\n   * in the configuration's types (if specified).\n   *\n   * @ignore\n   * @param alarm - The alarm to evaluate.\n   * @param alarms - An array of existing alarms, used for status matching.\n   * @param config - The configuration settings to match against.\n   * @returns - Returns `true` if the alarm matches the configuration criteria; otherwise, `false`.\n   */\n  isAlarmMatchedByConfig(alarm: IAlarm, alarms: IAlarm[], config: AlarmListWidgetConfig): boolean {\n    const isSeverityMatched = this.isSeverityMatching(alarm.severity, config);\n    const isStatusMatched = this.isStatusMatching(alarm, alarms, config);\n    const isTypeMatched = this.isTypesMatching(config, alarm);\n\n    return isSeverityMatched && isStatusMatched && isTypeMatched;\n  }\n  /**\n   * Checks if the severity of an alarm matches the configuration setting.\n   *\n   * This function determines whether the severity of an alarm is included in the\n   * severity settings defined in the AlarmListWidgetConfig.\n   *\n   * @ignore\n   * @param severity - The severity of the alarm to check.\n   * @param config - The configuration with severity settings.\n   * @returns - Returns `true` if the alarm's severity matches the configuration; otherwise, `false`.\n   */\n  isSeverityMatching(severity: SeverityType, config: AlarmListWidgetConfig): boolean {\n    return !!config.severities[severity];\n  }\n\n  /**\n   * Evaluates if the status of an alarm matches the configuration setting or has changed.\n   *\n   * This function checks if the status of an alarm is included in the status settings defined in\n   * the AlarmListWidgetConfig, or if the alarm's status has changed based on the existing alarms.\n   *\n   * @ignore\n   * @param alarm - The alarm whose status is to be evaluated.\n   * @param alarms - An array of existing alarms to compare against for status changes.\n   * @param config - The configuration with status settings.\n   * @returns - Returns `true` if the alarm's status matches or has changed as per the configuration; otherwise, `false`.\n   */\n  isStatusMatching(alarm: IAlarm, alarms: IAlarm[], config: AlarmListWidgetConfig): boolean {\n    return !!config.status[alarm.status] || this.hasExistingAlarmChangedStatus(alarms, alarm);\n  }\n\n  /**\n   * Checks if the configuration's types array contains only empty string or includes a specific alarm type.\n   *\n   * @param config - The configuration object with a `types` property.\n   * @param alarm - The alarm object with a `type` property to check against the config's types.\n   * @returns `true` if the config's types array contains only empty string or includes the alarm's type, otherwise `false`.\n   */\n  isTypesMatching(config: AlarmListWidgetConfig, alarm: IAlarm): boolean {\n    return Array.isArray(config.types) && config.types.length === 1 && config.types[0] === ''\n      ? true\n      : config.types?.includes(alarm.type) ?? false;\n  }\n\n  /**\n   * Constructs a query string from an array of order parameters.\n   *\n   * This function takes an array of ordering parameters and constructs a query string\n   * for use in alarm ordering queries. The parameters are concatenated into a single string,\n   * prefixed with '$orderby='.\n   *\n   * @ignore\n   * @private\n   * @param orderParams - The order parameters to be included in the query.\n   * @returns - A query string representing the order parameters.\n   */\n  private buildOrderParameters(orderParams: string[]): string {\n    return `$orderby=${orderParams.join(',')}`;\n  }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { Severity } from '@c8y/client';\nimport { SupportedIconsSuggestions } from '@c8y/ngx-components/icon-selector/icons';\n\ninterface SeverityIcon {\n  c8yIcon?: string;\n  iconClass: string;\n  severityClass?: string;\n}\n\n@Pipe({\n  name: 'severityIcon'\n})\nexport class SeverityIconPipe implements PipeTransform {\n  transform(severity: string): SeverityIcon {\n    let severityClassName = '';\n    let iconClassName: SupportedIconsSuggestions = '';\n\n    switch (severity) {\n      case Severity.CRITICAL:\n        severityClassName = 'critical';\n        iconClassName = 'exclamation-circle';\n        break;\n      case Severity.MAJOR:\n        severityClassName = 'major';\n        iconClassName = 'warning';\n        break;\n      case Severity.MINOR:\n        severityClassName = 'minor';\n        iconClassName = 'high-priority';\n        break;\n      case Severity.WARNING:\n        severityClassName = 'warning';\n        iconClassName = 'circle';\n        break;\n      default:\n        return { iconClass: '', severityClass: '' };\n    }\n\n    return {\n      iconClass: `status icon-lg stroked-icon dlt-c8y-icon-${iconClassName} ${severityClassName}`,\n      c8yIcon: severityClassName\n    };\n  }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { gettext } from '@c8y/ngx-components';\nimport { ALARM_ORDER_VALUES, AlarmOrderType } from './alarm-list-widget.model';\n\n@Pipe({\n  name: 'sortingDescriptionPopoverMessage'\n})\nexport class SortingDescriptionPopoverMessagePipe implements PipeTransform {\n  transform(order: AlarmOrderType): string {\n    switch (order) {\n      case ALARM_ORDER_VALUES.BY_ACTIVE:\n        return gettext('Order alarms by active status, severity, and time.');\n      case ALARM_ORDER_VALUES.BY_DATE_ASCENDING:\n        return gettext('Order alarms by time, starting with the oldest ones.');\n      case ALARM_ORDER_VALUES.BY_DATE_DESCENDING:\n        return gettext('Order alarms by time, starting with the latest ones.');\n      case ALARM_ORDER_VALUES.BY_SEVERITY:\n        return gettext('Order alarms by severity and time.');\n      default:\n        return '';\n    }\n  }\n}\n","import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\nimport {\n  ControlContainer,\n  FormArray,\n  FormBuilder,\n  FormControl,\n  FormGroup,\n  NgForm,\n  ValidatorFn\n} from '@angular/forms';\nimport {\n  ALARM_STATUS_LABELS,\n  AlarmStatus,\n  AlarmService,\n  IAlarm,\n  IResultList,\n  SEVERITY_LABELS\n} from '@c8y/client';\nimport { AlertService, OnBeforeSave, gettext } from '@c8y/ngx-components';\nimport {\n  ALARM_STATUS_ICON,\n  AlarmsViewService,\n  DEFAULT_SEVERITY_VALUES,\n  DEFAULT_STATUS_VALUES\n} from '@c8y/ngx-components/alarms';\nimport { TranslateService } from '@ngx-translate/core';\nimport { isEqual, omit } from 'lodash-es';\nimport { BehaviorSubject, Observable, Subscription } from 'rxjs';\nimport { debounceTime, pairwise, startWith } from 'rxjs/operators';\nimport {\n  ALARM_ORDER_LABELS,\n  ALARM_ORDER_VALUES,\n  AlarmListWidgetConfig,\n  AlarmOrderType,\n  DATE_SELECTION,\n  AlarmListRefreshOption,\n  GLOBAL_INTERVAL_OPTION\n} from '../alarm-list-widget.model';\nimport { AlarmWidgetService, DEFAULT_PAGE_SIZE } from '../alarm-widget.service';\nimport { Interval } from '@c8y/ngx-components/interval-picker';\n\n@Component({\n  selector: 'c8y-alarm-list-widget-config',\n  templateUrl: './alarm-list-widget-config.component.html',\n  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]\n})\nexport class AlarmListWidgetConfigComponent implements OnInit, OnChanges, OnBeforeSave, OnDestroy {\n  @Input() config: AlarmListWidgetConfig;\n\n  readonly REFRESH_INTERVAL_IN_MILLISECONDS = this.alarmsViewService.DEFAULT_INTERVAL_VALUES;\n  readonly SEVERITY_LABELS = SEVERITY_LABELS;\n  readonly STATUS_LABELS = ALARM_STATUS_LABELS;\n\n  readonly ACKNOWLEDGE_STATUS_VALUE = AlarmStatus.ACKNOWLEDGED;\n  readonly CLEARED_STATUS_VALUE = AlarmStatus.CLEARED;\n\n  readonly BELL_SLASH_ICON = ALARM_STATUS_ICON.BELL_SLASH;\n  readonly BELL_ICON = ALARM_STATUS_ICON.BELL;\n  readonly C8Y_ALERT_IDLE_ICON = ALARM_STATUS_ICON.ALERT_IDLE;\n\n  readonly ALARM_ORDER_LABELS = ALARM_ORDER_LABELS;\n  readonly GLOBAL_INTERVAL_OPTION = GLOBAL_INTERVAL_OPTION;\n\n  alarms$: BehaviorSubject<IResultList<IAlarm> | null> = new BehaviorSubject(null);\n  formGroup: ReturnType<AlarmListWidgetConfigComponent['createForm']>;\n\n  isLoading: boolean;\n  orderList = Object.values(ALARM_ORDER_VALUES);\n  refreshTypePopoverMessage: string;\n  refreshTypeTitle: string;\n  severityList = Object.keys(SEVERITY_LABELS);\n  showDateFilter = true;\n  DATE_SELECTION = DATE_SELECTION;\n  dateSelection: DATE_SELECTION | undefined;\n  dateSelectionHelp = this.translateService.instant(\n    gettext(`Choose how to select a date range, the available options are:\n  <ul class=\"m-l-0 p-l-8 m-t-8 m-b-0\">\n    <li>\n      <b>Widget configuration:</b>\n      restricts the date selection only to the widget configuration\n    </li>\n    <li>\n      <b>Widget and widget configuration:</b>\n      restricts the date selection to the widget view and widget configuration only\n    </li>\n    <li>\n      <b>Dashboard time range:</b>\n      restricts date selection to the global dashboard configuration only\n    </li>\n  </ul>`)\n  );\n  refreshOption: AlarmListRefreshOption;\n  /**\n   * Order does matter.\n   */\n  statusList = [AlarmStatus.ACTIVE, AlarmStatus.ACKNOWLEDGED, AlarmStatus.CLEARED];\n\n  private formChangesSubscription: Subscription;\n\n  constructor(\n    private alarmListWidgetService: AlarmWidgetService,\n    private alarmService: AlarmService,\n    private alarmsViewService: AlarmsViewService,\n    private alertService: AlertService,\n    private form: NgForm,\n    private formBuilder: FormBuilder,\n    private translateService: TranslateService\n  ) {}\n\n  async ngOnInit(): Promise<void> {\n    this.refreshTypeTitle = this.config.isRealtime\n      ? this.translateService.instant(gettext('Realtime'))\n      : this.translateService.instant(gettext('Auto refresh'));\n\n    this.refreshTypePopoverMessage = this.config.isRealtime\n      ? this.translateService.instant(gettext('Change the default state of realtime refresh.'))\n      : this.translateService.instant(\n          gettext('Change the state of interval automatic refresh and set the refresh frequency.')\n        );\n\n    this.initializeForm();\n\n    if (!this.config.isRealtime) {\n      this.updateConfigBasedOnRefreshOption();\n    }\n    this.config.isRealtime = !this.alarmsViewService.isIntervalRefresh();\n\n    const isWidgetWithExistingConfig =\n      this.config.order && this.config.severities && this.config.status;\n\n    if (isWidgetWithExistingConfig) {\n      await this.getAlarms(this.config);\n    } else {\n      /** Used when creating a new widget */\n      await this.getAlarms(this.formGroup.value as AlarmListWidgetConfig);\n    }\n    this.handlePreviewSubscription();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.formGroup && changes.config) {\n      this.formGroup.get('device').patchValue(this.config.device);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.formChangesSubscription?.unsubscribe();\n  }\n\n  onBeforeSave(config?: AlarmListWidgetConfig): boolean | Promise<boolean> | Observable<boolean> {\n    const { types } = this.formGroup.value;\n    if (types.length > 1) {\n      const stringTypes = types as string[];\n\n      if (this.isContainingOnlyEmptyTypes(stringTypes)) {\n        this.formGroup.value.types = [''];\n      } else {\n        this.formGroup.value.types = this.filterEmptyTypes(stringTypes);\n      }\n    }\n\n    /**\n     * Applies only to converted legacy Alarm list widget\n     */\n    if (config['options']) {\n      delete config['options'];\n    }\n\n    Object.assign(config, this.formGroup.value);\n    return true;\n  }\n\n  onDateFilterChange(event: { selectedDates: [Date, Date]; interval: Interval['id'] }) {\n    this.formGroup.patchValue({\n      dateFilter: event.selectedDates,\n      interval: event.interval\n    });\n  }\n\n  removeType(index: number): void {\n    if (this.types.controls.length === 1) {\n      this.formGroup.get('types').reset();\n    } else {\n      this.types.removeAt(index);\n    }\n  }\n\n  addType(): void {\n    this.types.push(this.formBuilder.control(''));\n  }\n\n  updateRefreshOption() {\n    this.config.refreshOption = this.refreshOption;\n    this.formGroup.controls.refreshOption.setValue(this.refreshOption);\n    const isGlobalInterval = this.refreshOption === GLOBAL_INTERVAL_OPTION;\n\n    this.config.widgetInstanceGlobalAutoRefreshContext = isGlobalInterval;\n    this.formGroup.controls.widgetInstanceGlobalAutoRefreshContext.setValue(isGlobalInterval);\n\n    this.updateConfigBasedOnRefreshOption();\n  }\n\n  get types(): FormArray {\n    return this.formGroup.get('types') as FormArray;\n  }\n\n  dateSelectionChange(dateSelection: DATE_SELECTION): void {\n    if (dateSelection === DATE_SELECTION.CONFIG) {\n      this.showDateFilter = true;\n      this.formGroup.patchValue({\n        displayDateSelection: false,\n        widgetInstanceGlobalTimeContext: false\n      });\n    } else if (dateSelection === DATE_SELECTION.VIEW_AND_CONFIG) {\n      this.showDateFilter = true;\n      this.formGroup.patchValue({\n        displayDateSelection: true,\n        widgetInstanceGlobalTimeContext: false\n      });\n    } else if (dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT) {\n      this.showDateFilter = false;\n      this.formGroup.patchValue({\n        displayDateSelection: false,\n        widgetInstanceGlobalTimeContext: true\n      });\n    }\n  }\n\n  private filterEmptyTypes(types: (string | null)[]): string[] {\n    return types.filter((element: string | null) => element !== '' && element !== null);\n  }\n\n  private isContainingOnlyEmptyTypes(types: (string | null)[]): boolean {\n    return types.every((element: string | null) => element === '' || element === null);\n  }\n\n  private async getAlarms(config: AlarmListWidgetConfig): Promise<void> {\n    try {\n      this.isLoading = true;\n      const result: IResultList<IAlarm> = await this.alarmService.list(\n        this.alarmListWidgetService.mapConfigToQueryFilter(config, DEFAULT_PAGE_SIZE)\n      );\n\n      this.alarms$.next(result);\n    } catch (error) {\n      this.alertService.addServerFailure(error);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  private initializeForm(): void {\n    this.formGroup = this.createForm();\n    this.form.form.addControl('config', this.formGroup);\n    this.formGroup.patchValue(this.config);\n    this.initializeTypes(this.config.types);\n    this.initDateSelection();\n    this.refreshOption = this.config.refreshOption ?? 'interval';\n  }\n\n  private createForm() {\n    return this.formBuilder.group({\n      status: this.formBuilder.group(DEFAULT_STATUS_VALUES, {\n        validators: this.minSelectedCheckboxes(1)\n      }),\n      showAlarmsForChildren: true,\n      types: this.formBuilder.array([]),\n      severities: this.formBuilder.group(DEFAULT_SEVERITY_VALUES, {\n        validators: this.minSelectedCheckboxes(1)\n      }),\n      order: ALARM_ORDER_VALUES.BY_ACTIVE as AlarmOrderType,\n      isAutoRefreshEnabled: [true],\n      refreshInterval: !this.config.isRealtime\n        ? new FormControl({\n            value: this.alarmsViewService.DEFAULT_INTERVAL_VALUE,\n            disabled: this.isAutorefershDisabled()\n          })\n        : new FormControl(undefined),\n      device: this.config.device ? new FormControl(this.config.device) : new FormControl(undefined),\n      dateFilter: this.config.dateFilter\n        ? new FormControl(this.config.dateFilter)\n        : new FormControl([new Date(0), new Date()]),\n      displayDateSelection: this.config.displayDateSelection || false,\n      widgetInstanceGlobalTimeContext: this.config.widgetInstanceGlobalTimeContext || false,\n      interval: this.config.interval || 'none',\n      refreshOption: this.config.isRealtime ? null : 'interval',\n      widgetInstanceGlobalAutoRefreshContext: this.config.refreshOption === GLOBAL_INTERVAL_OPTION\n    });\n  }\n\n  private isAutorefershDisabled(): boolean {\n    /**This check is required on widget creation */\n    if (this.config.isAutoRefreshEnabled === undefined) {\n      return false;\n    }\n\n    return !this.config.isAutoRefreshEnabled;\n  }\n\n  private minSelectedCheckboxes(min = 1): ValidatorFn {\n    const validator: ValidatorFn = (formGroup: FormGroup) => {\n      const totalSelected = Object.values(formGroup.controls).reduce(\n        (prev, next) => (next.value ? prev + next.value : prev),\n        0\n      );\n\n      return totalSelected >= min ? null : { required: true };\n    };\n\n    return validator;\n  }\n\n  private initializeTypes(types: string[]): void {\n    const typesControl = this.formGroup.get('types') as FormArray;\n    if (types) {\n      types.forEach(type => {\n        typesControl.push(this.formBuilder.control(type));\n      });\n    } else {\n      typesControl.push(this.formBuilder.control(''));\n    }\n  }\n\n  private initDateSelection(): void {\n    this.dateSelection = this.config?.widgetInstanceGlobalTimeContext\n      ? DATE_SELECTION.DASHBOARD_CONTEXT\n      : this.config?.displayDateSelection\n        ? DATE_SELECTION.VIEW_AND_CONFIG\n        : DATE_SELECTION.CONFIG;\n\n    this.dateSelectionChange(this.dateSelection);\n\n    const interval = this.config?.interval ?? 'none';\n    if (interval === 'none' || interval === 'custom') {\n      return;\n    }\n\n    this.config.dateFilter = this.alarmsViewService.getDateTimeContextByInterval(\n      this.config.interval\n    );\n    this.formGroup.patchValue({\n      dateFilter: this.config.dateFilter\n    });\n  }\n\n  /**\n   * Initializes and handles the form change subscription for the Alarm list preview at Widget's configuration.\n   *\n   * This method subscribes to form value changes with a debounce time of 500ms.\n   * It compares the previous and current form values to determine if the changes are relevant.\n   * If the only change is in the `isAutoRefreshEnabled` property, the change is ignored.\n   */\n  private handlePreviewSubscription(): void {\n    this.formChangesSubscription = this.formGroup.valueChanges\n      .pipe(startWith(this.formGroup.value), pairwise(), debounceTime(500))\n      .subscribe(([previousConfig, currentConfig]: [unknown, unknown]) => {\n        const typedPreviousConfig: AlarmListWidgetConfig = previousConfig as AlarmListWidgetConfig;\n        const typedCurrentConfig: AlarmListWidgetConfig = currentConfig as AlarmListWidgetConfig;\n\n        if (this.isOnlyAutoRefreshOrIntervalChanged(typedPreviousConfig, typedCurrentConfig)) {\n          return;\n        }\n\n        if (\n          this.alarmListWidgetService.allValuesFalse(typedCurrentConfig.severities) ||\n          this.alarmListWidgetService.allValuesFalse(typedCurrentConfig.status)\n        ) {\n          this.alarms$.next({ data: [], res: null });\n          return;\n        }\n\n        this.getAlarms(typedCurrentConfig);\n      });\n  }\n\n  /**\n   * Determines if the only changes between two `AlarmListWidgetConfig` objects are in the `isAutoRefreshEnabled` and `refreshInterval` properties.\n   *\n   * This method compares two configurations by omitting `isAutoRefreshEnabled` and `refreshInterval`.\n   * It returns true if these are the only properties that differ between the previous and current configurations.\n   * Note that `refreshInterval` is relevant only when the refresh type is set to an interval.\n   *\n   * @param previousConfig - The previous configuration of `AlarmListWidgetConfig`.\n   * @param currentConfig - The current configuration of `AlarmListWidgetConfig`.\n   * @returns `true` if the differences are confined to `isAutoRefreshEnabled` and `refreshInterval`, `false` otherwise.\n   */\n  private isOnlyAutoRefreshOrIntervalChanged(\n    previousConfig: AlarmListWidgetConfig,\n    currentConfig: AlarmListWidgetConfig\n  ): boolean {\n    const prevConfigCopy = omit(previousConfig, 'isAutoRefreshEnabled', 'refreshInterval');\n    const currentConfigCopy = omit(currentConfig, 'isAutoRefreshEnabled', 'refreshInterval');\n\n    return isEqual(prevConfigCopy, currentConfigCopy);\n  }\n\n  private updateConfigBasedOnRefreshOption() {\n    const isInterval = this.refreshOption === 'interval';\n\n    this.config.isAutoRefreshEnabled = isInterval;\n    this.formGroup.controls.isAutoRefreshEnabled.setValue(isInterval);\n\n    isInterval\n      ? this.formGroup.get('refreshInterval').enable()\n      : this.formGroup.get('refreshInterval').disable();\n  }\n}\n","<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"form-group col-md-12\">\n    <div class=\"d-flex a-i-center\">\n      <label\n        class=\"m-b-0\"\n        translate\n      >\n        Date selection\n      </label>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"dateSelectionHelpTemplate\"\n        placement=\"bottom\"\n        triggers=\"focus\"\n        container=\"body\"\n        [adaptivePosition]=\"false\"\n      ></button>\n    </div>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        class=\"form-control input-sm\"\n        [ngModel]=\"dateSelection\"\n        (ngModelChange)=\"dateSelectionChange($event)\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      >\n        <option\n          title=\"{{ 'Widget configuration' | translate }}\"\n          [value]=\"DATE_SELECTION.CONFIG\"\n        >\n          {{ 'Widget configuration' | translate }}\n        </option>\n        <option\n          title=\"{{ 'Widget and widget configuration' | translate }}\"\n          [value]=\"DATE_SELECTION.VIEW_AND_CONFIG\"\n        >\n          {{ 'Widget and widget configuration' | translate }}\n        </option>\n        <option\n          title=\"{{ 'Dashboard time range' | translate }}\"\n          [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n        >\n          {{ 'Dashboard time range' | translate }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n  <div class=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n    <ng-container *ngIf=\"showDateFilter\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>{{ 'Date filter' | translate }}</legend>\n        <c8y-form-group class=\"m-b-8\">\n          <c8y-alarms-date-filter\n            [updateQueryParams]=\"false\"\n            [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n            formControlName=\"dateFilter\"\n            (dateFilterChange)=\"onDateFilterChange($event)\"\n          ></c8y-alarms-date-filter>\n        </c8y-form-group>\n      </fieldset>\n    </ng-container>\n  </div>\n\n  <div class=\"col-md-6\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group\"\n          *ngFor=\"let type of types.controls; let i = index\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\n        {{ refreshTypeTitle }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"refreshTypePopoverMessage\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"true\"\n        ></button>\n      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <ng-template #realtime>\n            <label class=\"c8y-switch\">\n              <input\n                id=\"refreshToggle\"\n                name=\"isAutoRefreshEnabled\"\n                type=\"checkbox\"\n                formControlName=\"isAutoRefreshEnabled\"\n              />\n              <span></span>\n              <span class=\"sr-only\">{{ 'Realtime refresh' | translate }}</span>\n            </label>\n          </ng-template>\n          <div\n            class=\"c8y-select-wrapper\"\n            *ngIf=\"!config.isRealtime; else realtime\"\n          >\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 value=\"none\">\n                {{ 'No automatic refresh' | translate }}\n              </option>\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          <ng-container\n            *ngIf=\"!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION\"\n          >\n            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper flex-grow\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n              >\n                <option\n                  *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                  [ngValue]=\"refreshInterval\"\n                >\n                  {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                </option>\n              </select>\n            </div>\n          </ng-container>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\n<c8y-alarms-list\n  [alarms]=\"alarms$ | async\"\n  [isInitialLoading]=\"isLoading\"\n  [navigationOptions]=\"{\n    allowNavigationToAlarmsView: false,\n    alwaysNavigateToAllAlarms: false,\n    includeClearedQueryParams: false,\n    queryParamsHandling: 'merge'\n  }\"\n></c8y-alarms-list>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n","import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  SimpleChanges,\n  ViewChild\n} from '@angular/core';\nimport {\n  CountdownIntervalComponent,\n  gettext,\n  IntervalBasedReload,\n  WidgetGlobalAutoRefreshService\n} from '@c8y/ngx-components';\nimport { AlarmsViewService } from '@c8y/ngx-components/alarms';\nimport { TranslateService } from '@ngx-translate/core';\nimport { BehaviorSubject, Subscription } from 'rxjs';\nimport { tap } from 'rxjs/operators';\nimport { AlarmListWidgetConfig, GLOBAL_INTERVAL_OPTION } from './alarm-list-widget.model';\n\n@Component({\n  selector: 'c8y-alarm-widget-alarms-reload',\n  templateUrl: './alarm-widget-alarms-reload.component.html'\n})\nexport class AlarmWidgetAlarmsReloadComponent\n  extends IntervalBasedReload\n  implements OnInit, AfterViewInit, OnChanges, OnDestroy\n{\n  readonly REALTIME_UPDATE_ALARMS_MESSAGE = this.alarmsViewService.REALTIME_UPDATE_ALARMS_MESSAGE;\n\n  /**\n   * State of this boolean depends on an Application Options \"alarmsRefreshType\" setting.\n   */\n  @Input() isIntervalRefresh: boolean;\n  /**\n   * @inheritdoc\n   */\n  @Input() refreshInterval: number;\n  /**\n   * Alarm widgets config.\n   */\n  @Input() config: AlarmListWidgetConfig;\n  /**\n   * @inheritdoc\n   */\n  @Input() isLoading: BehaviorSubject<boolean>;\n  /**\n   * Indicates whether the alarm list is being scrolled or n