@c8y/ngx-components 1023.48.3 → 1023.52.0

package/fesm2022/c8y-ngx-components.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, createEnvironmentInjector, InjectionToken, Optional, Inject, Injectable, EventEmitter, Pipe, NgModule, LOCALE_ID, NgModuleRef, createNgModule, isDevMode, inject, DOCUMENT, EnvironmentInjector, Injector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, ElementRef, ContentChildren, ViewContainerRef, ViewChildren, viewChild, effect, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, computed, Type, input, output } from '@angular/core';
+import { Input, Directive, createEnvironmentInjector, InjectionToken, Optional, Inject, Injectable, EventEmitter, Pipe, NgModule, LOCALE_ID, NgModuleRef, createNgModule, isDevMode, inject, DOCUMENT, EnvironmentInjector, Injector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, ElementRef, Self, SkipSelf, Attribute, ContentChild, ContentChildren, ViewContainerRef, ViewChildren, viewChild, effect, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, computed, Type, input, output } from '@angular/core';
 import * as i1$3 from 'ngx-bootstrap/dropdown';
-import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
-import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
+import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ConfigurableFocusTrapFactory, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, each, mapValues, mapKeys, keys, get, isNaN as isNaN$1, isFinite, forEach, assign, min, every, first, map as map$1, find, negate, upperFirst, memoize as memoize$1, isEmpty, property, some, entries, omitBy, isDate, pick, flatMap, orderBy, filter as filter$2, snakeCase, matches, escape, escapeRegExp, assignWith, set, toNumber, isEqualWith, clone, omit, cloneDeep, uniqBy, has, transform, identity, unset, flow, findIndex as findIndex$1, isNil, chunk, values, union, without, indexOf, kebabCase, forOwn } from 'lodash-es';
 import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, ReplaySubject, firstValueFrom, lastValueFrom, NEVER, Observable, startWith as startWith$1, filter as filter$1, tap as tap$1, mergeMap, fromEvent, pipe, throwError, concat, map as map$2, fromEventPattern, withLatestFrom, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, catchError as catchError$1, empty, timer, forkJoin, interval, shareReplay as shareReplay$1, switchMap as switchMap$1, skip as skip$1, debounceTime as debounceTime$1 } from 'rxjs';
 import { map, distinctUntilChanged, filter, startWith, switchMap, shareReplay, take, scan, takeUntil, tap, catchError, debounceTime, share, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom as withLatestFrom$1, mergeMap as mergeMap$1, every as every$1, toArray, merge as merge$1, expand, mapTo, skip, reduce, finalize, combineLatestWith } from 'rxjs/operators';
@@ -16,7 +16,7 @@ import { provideClientLibServices } from '@c8y/ngx-components/api';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateDirective, TranslatePipe, TranslateStore, TranslateService as TranslateService$1, provideTranslateService, provideTranslateLoader, provideMissingTranslationHandler, TranslateParser } from '@ngx-translate/core';
 import * as i2$3 from '@angular/common';
-import { formatDate, registerLocaleData, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, NgSwitch, NgSwitchCase, AsyncPipe, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, NgComponentOutlet, NgSwitchDefault, KeyValuePipe, LocationStrategy, UpperCasePipe, NgPlural, NgPluralCase, SlicePipe, NgForOf } from '@angular/common';
+import { formatDate, registerLocaleData, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, NgSwitch, NgSwitchCase, AsyncPipe, DecimalPipe, NgStyle, CommonModule as CommonModule$1, DOCUMENT as DOCUMENT$1, NgFor, NgComponentOutlet, NgSwitchDefault, KeyValuePipe, LocationStrategy, UpperCasePipe, NgPlural, NgPluralCase, SlicePipe, NgForOf } from '@angular/common';
 import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll, ScrollingModule } from '@angular/cdk/scrolling';
@@ -986,6 +986,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     args: [HOOK_PATTERN_MESSAGES]
                 }] }] });
 
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_ALARMS = {
+    '^Alarm created$': {
+        gettext: gettext$1('Alarm created')
+    },
+    '^Alarm updated$': {
+        gettext: gettext$1('Alarm updated')
+    },
+    "^Device name: '(.+?)', alarm text: '(.+?)'$": {
+        gettext: gettext$1('Device name: "{{deviceName}}", alarm text: "{{alarmText | translate}}"'),
+        placeholders: {
+            deviceName: '$1',
+            alarmText: '$2'
+        }
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_APPLICATIONS = {
+    '^Application with given name already exist$': {
+        gettext: gettext$1('Application with given name already exists.')
+    },
+    '^Application with id (.+?) is already assigned to the tenant (.+?)$': {
+        gettext: gettext$1('This application is already assigned to tenant "{{tenant}}".'),
+        placeholders: {
+            tenant: '$2'
+        }
+    },
+    '^Cannot update/delete application binary via this endpoint$': {
+        gettext: gettext$1('Cannot update/delete application binary via this endpoint')
+    },
+    '^Error occurred when trying to find an Application for id ID (.+) : Could not find application by ID (\\d+)$': {
+        gettext: gettext$1('Could not find application by ID {{applicationId}}.'),
+        placeholders: {
+            applicationId: '$2'
+        }
+    },
+    '^Failed to delete application.  : Cannot remove application assigned to other tenants.$': {
+        gettext: gettext$1('Could not delete application assigned to other tenants.')
+    },
+    "^name of Application cannot start with '(.+)' prefix.$": {
+        gettext: gettext$1('Application name must not start with "{{ prefix }}".'),
+        placeholders: {
+            prefix: '$1'
+        }
+    },
+    '^Microservice application name incorrect. Please use only lower-case letters, digits and dashes. Maximum length is (\\d+) characters.$': {
+        gettext: gettext$1('Microservice application name is incorrect: only lower case letters, digits and dashes allowed. Maximum length: {{maxLength}}.'),
+        placeholders: {
+            maxLength: '$1'
+        }
+    },
+    '^Platform application cannot be added to, nor removed from any tenant.$': {
+        gettext: gettext$1('Platform application cannot be added to, nor removed from any tenant.')
+    },
+    '^Failed to refresh application. : Cannot refresh non local-hosted application.$': {
+        gettext: gettext$1('Could not reactivate the application as it is not hosted locally.')
+    },
+    '^Failed to refresh application. : Cannot refresh application without active version id.$': {
+        gettext: gettext$1('Could not reactivate the application as it has no active version.')
+    },
+    '^Application deleted$': {
+        gettext: gettext$1('Application deleted')
+    },
+    '^Microservice application "(.+?)" deleted for tenant "(.+?)"$': {
+        gettext: gettext$1('Microservice application "{{appName}}" deleted for tenant "{{tenant}}"'),
+        placeholders: {
+            appName: '$1',
+            tenant: '$2'
+        }
+    },
+    '^Hosted application "(.+?)" deleted for tenant "(.+?)"$': {
+        gettext: gettext$1('Hosted application "{{appName}}" deleted for tenant "{{tenant}}"'),
+        placeholders: {
+            appName: '$1',
+            tenant: '$2'
+        }
+    },
+    '^External application "(.+?)" deleted for tenant "(.+?)"$': {
+        gettext: gettext$1('External application "{{appName}}" deleted for tenant "{{tenant}}"'),
+        placeholders: {
+            appName: '$1',
+            tenant: '$2'
+        }
+    },
+    '^Application activated$': {
+        gettext: gettext$1('Application activated')
+    },
+    '^Microservice application "(.+?)" activated: version \\[(.+?)\\] added, activeVersionId \\[(.+?)\\] added$': {
+        gettext: gettext$1('Microservice application "{{appName}}" activated: version "{{version}}" added, activeVersionId "{{activeVersionId}}" added'),
+        placeholders: {
+            appName: '$1',
+            version: '$2',
+            activeVersionId: '$3'
+        }
+    },
+    '^Hosted application "(.+?)" activated: version \\[(.+?)\\] added, activeVersionId \\[(.+?)\\] added$': {
+        gettext: gettext$1('Hosted application "{{appName}}" activated: version "{{version}}" added, activeVersionId "{{activeVersionId}}" added'),
+        placeholders: {
+            appName: '$1',
+            version: '$2',
+            activeVersionId: '$3'
+        }
+    },
+    '^Hosted application "(.+?)" activated: activeVersionId \\[\'(.+?)\'\\] added$': {
+        gettext: gettext$1('Hosted application "{{appName}}" activated: activeVersionId "{{activeVersionId}}" added'),
+        placeholders: {
+            appName: '$1',
+            activeVersionId: '$2'
+        }
+    },
+    '^External application "(.+?)" activated: version \\[(.+?)\\] added, activeVersionId \\[(.+?)\\] added$': {
+        gettext: gettext$1('External application "{{appName}}" activated: version "{{version}}" added, activeVersionId "{{activeVersionId}}" added'),
+        placeholders: {
+            appName: '$1',
+            version: '$2',
+            activeVersionId: '$3'
+        }
+    },
+    "^Scaling application '(.+?)' from (.+?) to (.+?) instances$": {
+        gettext: gettext$1('Scaling application "{{appName}}" from {{from}} to {{to}} instances'),
+        placeholders: {
+            appName: '$1',
+            from: '$2',
+            to: '$3'
+        }
+    },
+    '^Entry is outside of the target dir: (.+)$': {
+        gettext: gettext$1('File entry outside of the target directory: "{{path}}".'),
+        placeholders: {
+            path: '$1'
+        }
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_AUTHENTICATION = {
+    '^Authentication failed! : User account is locked$': {
+        gettext: gettext$1('Authentication failed due to: user account is locked.')
+    },
+    '^Cannot change password. : Provided token does not exist.$': {
+        gettext: gettext$1('Cannot change password: provided token is invalid.')
+    },
+    '^Cannot reset user password : Cannot find user with such email.$': {
+        gettext: gettext$1('Cannot reset password for user with such email: email not found.')
+    },
+    '^Error during password validation. : Password must have at least (\\d+?) characters and no more than (\\d+?) and must contain only Latin1 characters.$': {
+        gettext: gettext$1('Password is invalid. It must have at least {{minCharactersCount}} and no more than {{maxCharactersCount}} characters.'),
+        placeholders: {
+            minCharactersCount: '$1',
+            maxCharactersCount: '$2'
+        }
+    },
+    '^Error during password validation. : Your password has been used already. Choose another.$': {
+        gettext: gettext$1('This password has already been used earlier. Use a different one.')
+    },
+    '^Invalid credentials! : Bad credentials$': {
+        gettext: gettext$1('Invalid credentials.')
+    },
+    '^Invalid credentials! : No phone number provided$': {
+        gettext: gettext$1('Log into the management tenant first and enter your phone number.')
+    },
+    '^Password change is temporary blocked.$': {
+        gettext: gettext$1('Password change is temporarily blocked.')
+    },
+    '^(.+?) user login with OAuth internal mode failed$': {
+        gettext: gettext$1('"{{name}}" user login with OAI-Secure mode failed'),
+        placeholders: {
+            name: '$1'
+        }
+    },
+    '^Error updating tenant! Cannot insert second configuration for Password code grant internal/Bad Request$': {
+        gettext: gettext$1('This login mode was already set by another administrator. Refresh the page to update the data.')
+    },
+    '^(.+?) user logged in to the platform with OAuth internal login mode$': {
+        gettext: gettext$1('"{{name}}" user logged in to the platform with OAI-Secure login mode'),
+        placeholders: {
+            name: '$1'
+        }
+    },
+    '^Authentication with id: (.+?) configuration updated.$': {
+        gettext: gettext$1('Authentication configuration with ID "{{id}}" updated.'),
+        placeholders: {
+            id: '$1'
+        }
+    },
+    '^Authentication configuration with id: (.+?) added.$': {
+        gettext: gettext$1('Authentication configuration with ID "{{id}}" added.'),
+        placeholders: {
+            id: '$1'
+        }
+    },
+    '^Configuration type: oauth2_internal.$': {
+        gettext: gettext$1('Configuration type: OAI-Secure.')
+    },
+    '^Configuration type: oauth2.$': {
+        gettext: gettext$1('Configuration type: Single sign-on.')
+    },
+    '^User "(.+?)" password was updated by user "(.+?)"$': {
+        gettext: gettext$1('"{{ targetUserName }}" user\'s password was updated by "{{ userName }}" user'),
+        placeholders: {
+            targetUserName: '$1',
+            userName: '$2'
+        }
+    },
+    '^User password update$': {
+        gettext: gettext$1('User password update')
+    },
+    '^User "(.+?)" password updated$': {
+        gettext: gettext$1('"{{ userName }}" user changed own password'),
+        placeholders: {
+            userName: '$1'
+        }
+    },
+    '^Configuration type: basic.$': {
+        gettext: gettext$1('Configuration type: Basic Auth.')
+    }
+};
+
 /* tslint:disable:max-line-length */
 const bulkOperationAuditLogTextPlaceholders = {
     updatesList: {
@@ -1018,96 +1237,75 @@ const bulkOperationAuditLogTextPlaceholders = {
         }
     }
 };
-const MESSAGES_CORE_I18N = {
-    '^Access is denied$': {
-        gettext: gettext$1('Access denied.')
+const PATTERN_MESSAGES_BULKOPERATIONS = {
+    "^Cannot execute bulk operation on empty group. Group with id='(\\d+?)' doesn't have child assets.$": {
+        gettext: gettext$1('Could not execute bulk operation on an empty group. Group with ID "{{groupId}}" has no child assets.'),
+        placeholders: {
+            groupId: '$1'
+        }
     },
-    '^Alarm created$': {
-        gettext: gettext$1('Alarm created')
+    "^Cannot execute bulk operation on empty group. DynamicGroup with id='(\\d+?)' doesn't have child assets$": {
+        gettext: gettext$1('Could not execute bulk operation on an empty group. Smart group with ID "{{groupId}}" has no child assets.'),
+        placeholders: {
+            groupId: '$1'
+        }
     },
-    '^Alarm updated$': {
-        gettext: gettext$1('Alarm updated')
+    '^Cannot reschedule bulk operation. All its operations are successful$': {
+        gettext: gettext$1('Cannot reschedule bulk operation. All its operations are already successful.')
     },
-    '^API is not available with the new domain$': {
-        gettext: gettext$1('Could not activate custom domain. DNS setup is incorrect.')
+    '^Create bulk operation$': {
+        gettext: gettext$1('Create bulk operation')
     },
-    '^Application with given name already exist$': {
-        gettext: gettext$1('Application with given name already exists.')
+    '^Create bulk operation: (.+)$': {
+        gettext: gettext$1('Create bulk operation: {{updatesList}}'),
+        placeholders: bulkOperationAuditLogTextPlaceholders
     },
-    '^Application with id (.+?) is already assigned to the tenant (.+?)$': {
-        gettext: gettext$1('This application is already assigned to tenant "{{tenant}}".'),
-        placeholders: {
-            tenant: '$2'
-        }
+    '^Delete bulk operation$': {
+        gettext: gettext$1('Delete bulk operation')
     },
-    '^Apply software changes: (.+?)\\.?$': {
-        gettext: gettext$1('Apply software changes: {{ softwareChanges }}'),
-        placeholders: {
-            softwareChanges: {
-                capture: '$1',
-                translate: {
-                    'install "(.+?)" \\(version: (.+?)\\)': {
-                        gettext: gettext$1('install "{{ softwareName }}" (version: {{ softwareVersion }})'),
-                        placeholders: {
-                            softwareName: '$1',
-                            softwareVersion: '$2'
-                        }
-                    },
-                    'install "([^"]+)"(?! \\(version: .+?\\))': {
-                        gettext: gettext$1('install "{{ softwareName }}"'),
-                        placeholders: {
-                            softwareName: '$1'
-                        }
-                    },
-                    'delete "(.+?)" \\(version: (.+?)\\)': {
-                        gettext: gettext$1('delete "{{ softwareName }}" (version: {{ softwareVersion }})'),
-                        placeholders: {
-                            softwareName: '$1',
-                            softwareVersion: '$2'
-                        }
-                    },
-                    'delete "([^"]+)"(?! \\(version: .+?\\))': {
-                        gettext: gettext$1('delete "{{ softwareName }}"'),
-                        placeholders: {
-                            softwareName: '$1'
-                        }
-                    }
-                }
-            }
-        }
+    '^Delete bulk operation: (.+)$': {
+        gettext: gettext$1('Delete bulk operation: {{updatesList}}'),
+        placeholders: bulkOperationAuditLogTextPlaceholders
     },
-    '^Assign device profile (.+?) to device (.+?)$': {
-        gettext: gettext$1('Assign device profile {{profileName}} to device {{deviceName}}'),
-        placeholders: {
-            profileName: '$1',
-            deviceName: '$2'
-        }
+    '^Update bulk operation$': {
+        gettext: gettext$1('Update bulk operation')
     },
-    '^(.+)pplication for tenant (.+) with properties \\( (.+?) \\) already exists$': {
-        gettext: gettext$1('Application for tenant "{{tenant}}" with the following values ({{valuesList}}) already exists.'),
-        placeholders: {
-            tenant: '$2',
-            valuesList: '$3'
-        }
+    '^Update bulk operation: (.+)$': {
+        gettext: gettext$1('Update bulk operation: {{updatesList}}'),
+        placeholders: bulkOperationAuditLogTextPlaceholders
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_CEP = {
+    '^Cep module created$': {
+        gettext: gettext$1('CEP module created')
     },
-    '^Authentication failed! : User account is locked$': {
-        gettext: gettext$1('Authentication failed due to: user account is locked.')
+    '^Cep module updated$': {
+        gettext: gettext$1('CEP module updated')
     },
-    '^Availability monitoring record$': {
-        gettext: gettext$1('Availability monitoring record')
+    '^Cep module deleted$': {
+        gettext: gettext$1('CEP module deleted')
     },
-    '^Can not activate a certificate which is either expired or not yet valid$': {
-        gettext: gettext$1('Cannot activate a certificate which is either expired or not yet valid.')
+    '^Cep module "(.+?)" created$': {
+        gettext: gettext$1('CEP module "{{name}}" created'),
+        placeholders: {
+            name: '$1'
+        }
     },
-    '^Cannot add certificate - certificate with (.+?) fingerprint already exists. : Certificate with (.+?) fingerprint already exists.$': {
-        gettext: gettext$1('Could not add certificate. Certificate with {{fingerprint}} fingerprint already exists.'),
+    '^Cep module "(.+?)" updated$': {
+        gettext: gettext$1('CEP module "{{name}}" updated'),
         placeholders: {
-            fingerprint: '$1'
+            name: '$1'
         }
     },
-    '^Cannot change password. : Provided token does not exist.$': {
-        gettext: gettext$1('Cannot change password: provided token is invalid.')
+    '^Cep module "(.+?)" deleted$': {
+        gettext: gettext$1('CEP module "{{name}}" deleted'),
+        placeholders: {
+            name: '$1'
+        }
     },
+    // CEP module deployment errors
     '^Cannot deploy module (.*)$': {
         gettext: gettext$1('Cannot deploy module due to error: "{{ errorMessage | translate }}".'),
         placeholders: {
@@ -1156,164 +1354,218 @@ const MESSAGES_CORE_I18N = {
             affectedStatement: '$7'
         }
     },
-    "^Cannot execute bulk operation on empty group. Group with id='(\\d+?)' doesn't have child assets.$": {
-        gettext: gettext$1('Could not execute bulk operation on an empty group. Group with ID "{{groupId}}" has no child assets.'),
+    "^Error in statement (.+?):(.+?)! : Incorrect syntax near '(.+?)' near reserved keyword '(.+?)' \\[([\\S\\s]+?)\\]$": {
+        gettext: gettext$1('Error in statement {{moduleName}}:{{statementNumber}}. Incorrect syntax near expression "{{expression}}" near reserved keyword "{{keyword}}".'),
         placeholders: {
-            groupId: '$1'
+            moduleName: '$1',
+            statementNumber: '$2',
+            expression: '$3',
+            keyword: '$4'
         }
     },
-    "^Cannot execute bulk operation on empty group. DynamicGroup with id='(\\d+?)' doesn't have child assets$": {
-        gettext: gettext$1('Could not execute bulk operation on an empty group. Smart group with ID "{{groupId}}" has no child assets.'),
+    '^Exception on tenant (.+) in statement \'(.+)\': Http status code: (\\d+) \\{error="alarm/Unprocessable Entity",message="(.+)",info="https://www.cumulocity.com/guides/reference-guide/#error_reporting",details="null"\\}$': {
+        gettext: gettext$1('Exception on tenant {{tenantId}} in statement "{{statement}}": HTTP status code: {{httpStatusCode}} : {{message | translate}}'),
         placeholders: {
-            groupId: '$1'
+            tenantId: '$1',
+            statement: '$2',
+            httpStatusCode: '$3',
+            message: '$4'
         }
     },
-    '^Cannot parse X509 certificate. : Could not parse certificate: (.+?)$': {
-        gettext: gettext$1('Could not parse X.509 certificate: {{ failureReason | translate }}.'),
+    "^Exception on tenant (.+) in statement '(.+)': Invocation exception when invoking method '(.+)' of class '(.+)' passing parameters \\[(.+)\\] for statement '(.+)': (.+) : (.+)$": {
+        gettext: gettext$1('Exception on tenant {{tenantId}} in statement "{{moduleName}}": Invocation exception when invoking method "{{methodName}}" of class "{{classPath}}" passing parameters [{{parameters}}] for statement "{{statement}}": {{exceptionType}} : {{exceptionMessage}}.'),
         placeholders: {
-            failureReason: '$1'
+            tenantId: '$1',
+            moduleName: '$2',
+            methodName: '$3',
+            classPath: '$4',
+            parameters: '$5',
+            statement: '$6',
+            exceptionType: '$7',
+            exceptionMessage: '$8'
         }
     },
-    '^Cannot reschedule bulk operation. All its operations are successful$': {
-        gettext: gettext$1('Cannot reschedule bulk operation. All its operations are already successful.')
-    },
-    '^Cannot reset user password : Cannot find user with such email.$': {
-        gettext: gettext$1('Cannot reset password for user with such email: email not found.')
-    },
-    '^Cannot update/delete application binary via this endpoint$': {
-        gettext: gettext$1('Cannot update/delete application binary via this endpoint')
+    // Smart rules (part of CEP functionality)
+    '^Smart rule created$': {
+        gettext: gettext$1('Smart rule created.')
     },
-    "^Can't delete user because it is used by another managed object$": {
-        gettext: gettext$1('Cannot delete device with associated device owner because this owner is still assigned to other device(s). Try to remove only the device.')
+    '^Smart rule updated$': {
+        gettext: gettext$1('Smart rule updated.')
     },
-    '^Cep module created$': {
-        gettext: gettext$1('CEP module created')
+    '^Smart rule enabled$': {
+        gettext: gettext$1('Smart rule activated.')
     },
-    '^Cep module updated$': {
-        gettext: gettext$1('CEP module updated')
+    '^Smart rule disabled$': {
+        gettext: gettext$1('Smart rule deactivated.')
     },
-    '^Cep module deleted$': {
-        gettext: gettext$1('CEP module deleted')
+    '^Smart rule deleted$': {
+        gettext: gettext$1('Smart rule deleted.')
     },
-    '^Cep module "(.+?)" created$': {
-        gettext: gettext$1('CEP module "{{name}}" created'),
+    '^Smart rule "(.+?)" created$': {
+        gettext: gettext$1('Smart rule "{{name}}" created.'),
         placeholders: {
             name: '$1'
         }
     },
-    '^Cep module "(.+?)" updated$': {
-        gettext: gettext$1('CEP module "{{name}}" updated'),
+    '^Smart rule "(.+?)" updated$': {
+        gettext: gettext$1('Smart rule "{{name}}" updated.'),
         placeholders: {
             name: '$1'
         }
     },
-    '^Cep module "(.+?)" deleted$': {
-        gettext: gettext$1('CEP module "{{name}}" deleted'),
+    '^Smart rule "(.+?)" enabled$': {
+        gettext: gettext$1('Smart rule "{{name}}" activated.'),
         placeholders: {
             name: '$1'
         }
     },
-    '^Command state is invalid: (.+)$': {
-        gettext: gettext$1('Command state is invalid: {{violations}}'),
+    '^Smart rule "(.+?)" disabled$': {
+        gettext: gettext$1('Smart rule "{{name}}" deactivated.'),
         placeholders: {
-            violations: {
-                capture: '$1',
-                translate: {
-                    '(\\w+?) - may not be null': {
-                        gettext: gettext$1('"{{field}}" must not be null'),
-                        placeholders: {
-                            field: '$1'
-                        }
-                    }
-                }
-            }
+            name: '$1'
         }
     },
-    '^Could not connect to endpoint (.+)\\. Could not verify `(.+)` host key with fingerprint `(.+)` for `(.+)` on port (.+)\\. If you expected that key, please remove the previous one from configuration to allow for connection\\.$': {
-        gettext: gettext$1('Could not connect to endpoint "{{endpointName}}". Could not verify {{keyType}} host key with fingerprint {{fingerprint}} for host {{host}} on port {{port}}. If you expected this key, please remove the previous one from configuration to allow for connection.'),
+    '^Smart rule "(.+?)" deleted$': {
+        gettext: gettext$1('Smart rule "{{name}}" deleted.'),
         placeholders: {
-            endpointName: '$1',
-            keyType: '$2',
-            fingerprint: '$3',
-            host: '$4',
-            port: '$5'
+            name: '$1'
         }
     },
-    '^Could not login to ssh server on endpoint "(.+)"\\. Provided credential for user "(.+)" is incorrect\\.$': {
-        gettext: gettext$1('Could not access SSH server on endpoint "{{endpointName}}". Provided credentials for user "{{userName}}" are incorrect.'),
+    '^(.+) succeeded for volume "(.+)"$': {
+        gettext: gettext$1('Operation "{{operation}}" succeeded for volume "{{volume}}".'),
         placeholders: {
-            endpointName: '$1',
-            userName: '$2'
+            operation: '$1',
+            volume: '$2'
         }
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_CERTIFICATES = {
+    '^Can not activate a certificate which is either expired or not yet valid$': {
+        gettext: gettext$1('Cannot activate a certificate which is either expired or not yet valid.')
     },
-    '^Could not save object remoteAccessUpdate: (.+)$': {
-        gettext: '{{errorMessages}}',
+    '^Cannot add certificate - certificate with (.+?) fingerprint already exists. : Certificate with (.+?) fingerprint already exists.$': {
+        gettext: gettext$1('Could not add certificate. Certificate with {{fingerprint}} fingerprint already exists.'),
         placeholders: {
-            errorMessages: {
-                capture: '$1',
-                translate: {
-                    'Could not recognize host-key format': {
-                        gettext: gettext$1('Could not recognize "Host key" format')
-                    },
-                    'Could not recognize key-pair format': {
-                        gettext: gettext$1('Could not recognize the format of "Public key" or "Private key"')
-                    }
-                }
-            }
+            fingerprint: '$1'
         }
     },
-    '^Could not update user. : Error persisting user (.+?)!$': {
-        gettext: gettext$1('Could not update user "{{username}}".'),
+    '^Cannot parse X509 certificate. : Could not parse certificate: (.+?)$': {
+        gettext: gettext$1('Could not parse X.509 certificate: {{ failureReason | translate }}.'),
         placeholders: {
-            username: '$1'
+            failureReason: '$1'
         }
     },
-    '^Create bulk operation$': {
-        gettext: gettext$1('Create bulk operation')
+    '^Domain name in uploaded certificate differs from the one in use$': {
+        gettext: gettext$1('Domain name in uploaded certificate differs from the one in use. Please deactivate the custom domain before uploading new certificate.')
     },
-    '^Create bulk operation: (.+)$': {
-        gettext: gettext$1('Create bulk operation: {{updatesList}}'),
-        placeholders: bulkOperationAuditLogTextPlaceholders
+    '^Failed to extract certificate from PKCS12$': {
+        gettext: gettext$1('Failed to extract certificate from PKCS12.')
     },
-    '^Creation ramp must be greater than (\\d+?)$': {
-        gettext: gettext$1('Bulk operation delay must be greater than {{minSeconds}} seconds.'),
+    "^Trusted certificate updated on '(.+?)'\\.$": {
+        gettext: gettext$1('Trusted certificate updated on tenant "{{ tenantId }}"'),
         placeholders: {
-            minSeconds: '$1'
+            tenantId: '$1'
         }
     },
-    '^Created container$': {
-        gettext: gettext$1('Container created.')
-    },
-    '^Created pod: (.+)$': {
-        gettext: gettext$1('Pod "{{imageName}}" created.'),
+    "^Trusted certificate deleted from '(.+?)'\\.$": {
+        gettext: gettext$1('Trusted certificate deleted from tenant "{{ tenantId }}"'),
         placeholders: {
-            imageName: '$1'
+            tenantId: '$1'
         }
     },
-    '^Creating device on LoRa platform failed$': {
-        gettext: gettext$1('Could not create the device in the LoRa platform.')
-    },
-    '^CSV file contained empty dataset$': {
-        gettext: gettext$1('No entries found in uploaded CSV file.')
-    },
-    '^Cycle detected for route (.+?)!$': {
-        gettext: gettext$1('Cycle detected for route {{route}}.'),
+    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n$": {
+        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".'),
         placeholders: {
-            route: '$1'
+            fingerprint: '$1',
+            subjectName: '$2'
         }
     },
-    '^Data broker processing is currently overloaded and may stop forwarding your data\\. Please contact support\\.$': {
-        gettext: gettext$1('Data broker processing is currently overloaded and may stop forwarding your data. Please contact support.')
-    },
-    '^Data broker processing is not able to connect do destination tenant, thus data forwarding is not working\\. Please contact support\\.$': {
-        gettext: gettext$1('Data broker processing is not able to connect to destination tenant, thus data forwarding is not working. Please contact support.')
+    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n\\s*NotAfter='(.+?)'.*$": {
+        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".\nExpiration date: {{ expirationDate | absoluteDate }}.'),
+        placeholders: {
+            fingerprint: '$1',
+            subjectName: '$2',
+            expirationDate: '$3'
+        }
     },
-    '^Delete bulk operation$': {
-        gettext: gettext$1('Delete bulk operation')
+    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n\\s*Status='(.+?)'.*$": {
+        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".\nStatus: "{{ status }}".'),
+        placeholders: {
+            fingerprint: '$1',
+            subjectName: '$2',
+            status: '$3'
+        }
     },
-    '^Delete bulk operation: (.+)$': {
-        gettext: gettext$1('Delete bulk operation: {{updatesList}}'),
-        placeholders: bulkOperationAuditLogTextPlaceholders
+    '^The CA certificate has not been refreshed\\.\\s+It may either still have sufficient remaining validity.*$': {
+        gettext: gettext$1('The CA certificate has not been renewed; however, it may still have sufficient validity remaining.')
+    },
+    "^Provisioned certificate stored in user object: '(.+?)'.*$": {
+        gettext: gettext$1('Provisioned certificate stored in user object: "{{ userName }}"'),
+        placeholders: {
+            userName: '$1'
+        }
+    },
+    "^Certificate serial number: '(.+?)'\\.\\n\\s*NotAfter='(.+?)'.*$": {
+        gettext: gettext$1('Certificate serial number: "{{ serialNumber }}".\nExpiration date: {{ expirationDate | absoluteDate }}.'),
+        placeholders: {
+            serialNumber: '$1',
+            expirationDate: '$2'
+        }
+    },
+    "^Provisioned certificates removed from user: '(.+?)'.*$": {
+        gettext: gettext$1('Provisioned certificates removed from user object: "{{ userName }}"'),
+        placeholders: {
+            userName: '$1'
+        }
+    },
+    "^Certificate serial number hex: '(.+?)'.*$": {
+        gettext: gettext$1('Certificate serial number: "{{ serialNumber }}"'),
+        placeholders: {
+            serialNumber: '$1'
+        }
+    },
+    "^Tenant certificate authority\\(CA\\) created on '(.+?)'.*$": {
+        gettext: gettext$1('Tenant certificate authority (CA) created for tenant "{{ tenantId }}"'),
+        placeholders: {
+            tenantId: '$1'
+        }
+    },
+    "^Tenant certificate authority\\(CA\\) was renewed for Tenant: '(.+?)'.*$": {
+        gettext: gettext$1('Tenant certificate authority (CA) was renewed for tenant "{{ tenantId }}"'),
+        placeholders: {
+            tenantId: '$1'
+        }
+    },
+    "^Tenant certificate authority\\(CA\\) renewal for Tenant: '(.+?)' failed.*$": {
+        gettext: gettext$1('Tenant certificate authority (CA) renewal for tenant "{{ tenantId }}" failed'),
+        placeholders: {
+            tenantId: '$1'
+        }
+    },
+    '^Tenant certificate authority\\(CA\\) signed certificate for device: (.+?)\\.$': {
+        gettext: gettext$1('Tenant certificate authority (CA) signed certificate for device: "{{ deviceId }}".'),
+        placeholders: {
+            deviceId: '$1'
+        }
+    },
+    '^Revoked serials: (.+?)$': {
+        gettext: gettext$1('Revoked serials: {{ revokedSerials }}'),
+        placeholders: {
+            revokedSerials: '$1'
+        }
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_DEVICES = {
+    '^Assign device profile (.+?) to device (.+?)$': {
+        gettext: gettext$1('Assign device profile {{profileName}} to device {{deviceName}}'),
+        placeholders: {
+            profileName: '$1',
+            deviceName: '$2'
+        }
     },
     "^Device id '(.+?)' contains '(.+?)' character which is not permitted.$": {
         gettext: gettext$1('ID "{{deviceId}}" contains invalid character: "{{invalidCharacter}}".'),
@@ -1322,13 +1574,6 @@ const MESSAGES_CORE_I18N = {
             invalidCharacter: '$2'
         }
     },
-    "^Device name: '(.+?)', alarm text: '(.+?)'$": {
-        gettext: gettext$1('Device name: "{{deviceName}}", alarm text: "{{alarmText | translate}}"'),
-        placeholders: {
-            deviceName: '$1',
-            alarmText: '$2'
-        }
-    },
     '^Device (.+?) already registered to a tenant.$': {
         gettext: gettext$1('Device {{ devEUI }} is already registered in your tenant or in another tenant in the platform.'),
         placeholders: {
@@ -1342,517 +1587,577 @@ const MESSAGES_CORE_I18N = {
             newExtIds: '$2'
         }
     },
-    '^Display name$': {
-        gettext: gettext$1('Login alias')
-    },
-    '^Domain name in uploaded certificate differs from the one in use$': {
-        gettext: gettext$1('Domain name in uploaded certificate differs from the one in use. Please deactivate the custom domain before uploading new certificate.')
-    },
-    '^Domain name is already in use by another tenant!$': {
-        gettext: gettext$1('Domain name is already used by another tenant.')
-    },
-    '^Duplicated connector for instanceUrl (.+?)!$': {
-        gettext: gettext$1('Target URL {{targetUrl}} already used by another connector.'),
+    "^Finding device data from database failed : No managedObject for id '(.+?)'!$": {
+        gettext: gettext$1('Could not find managed object with ID "{{deviceId}}".'),
         placeholders: {
-            targetUrl: '$1'
+            deviceId: '$1'
         }
     },
-    '^Duplicated connector for name (.+?)!$': {
-        gettext: gettext$1('Connector name "{{name}}" already used by another connector.'),
+    '^NewDeviceRequest for id = (.+?) already exists.$': {
+        gettext: gettext$1('Device registration request with ID {{id}} already exists.'),
         placeholders: {
-            name: '$1'
+            id: '$1'
         }
     },
-    '^Entry is outside of the target dir: (.+)$': {
-        gettext: gettext$1('File entry outside of the target directory: "{{path}}".'),
+    '^NewDeviceRequest for device id (.+?) is in state BLOCKED, not PENDING_ACCEPTANCE.$': {
+        gettext: gettext$1('Device registration request with ID "{{deviceId}}" is in state "Blocked", not "Pending acceptance". Remove this registration request and start over.'),
         placeholders: {
-            path: '$1'
+            deviceId: '$1'
         }
     },
-    '^Error during password validation. : Password must have at least (\\d+?) characters and no more than (\\d+?) and must contain only Latin1 characters.$': {
-        gettext: gettext$1('Password is invalid. It must have at least {{minCharactersCount}} and no more than {{maxCharactersCount}} characters.'),
+    '^No communication with device since (.+?)$': {
+        gettext: gettext$1('No communication with device since {{timestamp | absoluteDate}}.'),
         placeholders: {
-            minCharactersCount: '$1',
-            maxCharactersCount: '$2'
+            timestamp: '$1'
         }
     },
-    '^Error during password validation. : Your password has been used already. Choose another.$': {
-        gettext: gettext$1('This password has already been used earlier. Use a different one.')
+    '^No data received from device within required interval.$': {
+        gettext: gettext$1('No data received from device within required interval.')
     },
-    "^Error in statement (.+?):(.+?)! : Incorrect syntax near '(.+?)' near reserved keyword '(.+?)' \\[([\\S\\s]+?)\\]$": {
-        gettext: gettext$1('Error in statement {{moduleName}}:{{statementNumber}}. Incorrect syntax near expression "{{expression}}" near reserved keyword "{{keyword}}".'),
+    '^Provided security key does not match key stored for device (.+?).$': {
+        gettext: gettext$1('Provided security token does not match the security token stored for this device "{{deviceId}}".'),
         placeholders: {
-            moduleName: '$1',
-            statementNumber: '$2',
-            expression: '$3',
-            keyword: '$4'
+            deviceId: '$1'
         }
     },
-    '^External id not found; external id = ID \\[type=(.+?), value=(.+?)\\]$': {
-        gettext: gettext$1('External ID not found for type "{{type}}" and value "{{value}}".'),
+    '^Provided security key does not match key stored for device (.+?).Reached maximum number of failed attempts while trying to register this device. Request will now be blocked and has to be removed manually to restart the process.$': {
+        gettext: gettext$1('The provided security token does not match the token stored for device "{{deviceId}}". You have reached the maximum number of failed attempts while trying to register this device. The request will now be blocked and must be removed manually to restart the process.'),
         placeholders: {
-            type: '$1',
-            value: '$2'
+            deviceId: '$1'
         }
     },
-    '^Error occurred when trying to find an Application for id ID (.+) : Could not find application by ID (\\d+)$': {
-        gettext: gettext$1('Could not find application by ID {{applicationId}}.'),
+    '^Retrieve configuration snapshot from device (.+?)$': {
+        gettext: gettext$1('Retrieve configuration snapshot from device {{deviceName}}'),
         placeholders: {
-            applicationId: '$2'
+            deviceName: '$1'
         }
     },
-    '^Http status code: 404\n{error="options/Not Found",message="Unable to find option by given key: sigfox-agent/provider.token",info="https://www.cumulocity.com/guides/reference-guide/#error_reporting",details="null"}$': {
-        gettext: gettext$1('Unable to find option by given key: sigfox-agent/provider.token')
+    '^Retrieve (.+?) configuration snapshot from device (.+?)$': {
+        gettext: gettext$1('Retrieve {{configurationType}} configuration snapshot from device {{deviceName}}'),
+        placeholders: {
+            configurationType: '$1',
+            deviceName: '$2'
+        }
     },
-    '^Failed to delete application.  : Cannot remove application assigned to other tenants.$': {
-        gettext: gettext$1('Could not delete application assigned to other tenants.')
+    '^Send configuration snapshot (.+?) of configuration type (.+?) to device (.+?)$': {
+        gettext: gettext$1('Send configuration snapshot {{snapshotName}} of configuration type {{configurationType}} to device {{deviceName}}'),
+        placeholders: {
+            snapshotName: '$1',
+            configurationType: '$2',
+            deviceName: '$3'
+        }
     },
-    '^Failed to extract certificate from PKCS12$': {
-        gettext: gettext$1('Failed to extract certificate from PKCS12.')
+    '^Send configuration snapshot (.+?) to device (.+?)$': {
+        gettext: gettext$1('Send configuration snapshot {{snapshotName}} to device {{deviceName}}'),
+        placeholders: {
+            snapshotName: '$1',
+            deviceName: '$2'
+        }
     },
-    '^Failed to update domain at the platform$': {
-        gettext: gettext$1('Failed to update domain at the platform.')
+    '^You have reached devices limit. No more devices can be registered.$': {
+        gettext: gettext$1('You reached devices limit. No more devices can be registered.')
     },
-    "^Finding device data from database failed : No managedObject for id '(.+?)'!$": {
-        gettext: gettext$1('Could not find managed object with ID "{{deviceId}}".'),
+    '^Added new child device to "(.+)" \\(ID: (.+)\\).$': {
+        gettext: gettext$1('Added new child device to "{{parentDeviceName}}" (ID: {{parentDeviceId}}).'),
         placeholders: {
-            deviceId: '$1'
+            parentDeviceName: '$1',
+            parentDeviceId: '$2'
         }
     },
-    '^Following mandatory fields should be included: (.+?)$': {
-        gettext: gettext$1('Following mandatory fields should be included: {{fields}}'),
+    '^Updated child device of "(.+)" \\(ID: (.+)\\).$': {
+        gettext: gettext$1('Updated child device of "{{parentDeviceName}}" (ID: {{parentDeviceId}}).'),
         placeholders: {
-            fields: '$1'
+            parentDeviceName: '$1',
+            parentDeviceId: '$2'
         }
     },
-    '^Global Role updated$': {
-        gettext: gettext$1('Global role updated')
+    '^Added child device "(.+)" \\(ID: (.+)\\).$': {
+        gettext: gettext$1('Added child device "{{name}}" (ID: {{id}}).'),
+        placeholders: {
+            name: '$1',
+            id: '$2'
+        }
     },
-    '^Global Role (.+?) updated$': {
-        gettext: gettext$1('Global role "{{name}}" updated'),
+    '^Removed child device "(.+)" \\(ID: (.+)\\).$': {
+        gettext: gettext$1('Removed child device "{{name}}" (ID: {{id}}).'),
+        placeholders: {
+            name: '$1',
+            id: '$2'
+        }
+    },
+    '^Apply device profile: (.+).?$': {
+        gettext: gettext$1('Apply device profile: {{ name }}'),
         placeholders: {
             name: '$1'
         }
     },
-    '^Global Role (.+?) updated: (.+)$': {
-        gettext: gettext$1('Global role "{{name}}" updated: {{updatesList}}'),
+    '^Device put into maintenance state$': {
+        gettext: gettext$1('Device put into maintenance state')
+    },
+    '^device with id: (.+?) is put into maintenance state$': {
+        gettext: gettext$1('Device with ID "{{deviceId}}" is put into maintenance state'),
         placeholders: {
-            name: '$1',
-            updatesList: {
-                capture: '$2',
-                translate: {
-                    'applications \\[([^\\]]+?)\\] added': {
-                        gettext: gettext$1('applications {{list}} added'),
-                        placeholders: {
-                            list: '$1'
-                        }
-                    },
-                    'applications \\[([^\\]]+?)\\] removed': {
-                        gettext: gettext$1('applications {{list}} removed'),
-                        placeholders: {
-                            list: '$1'
-                        }
-                    },
-                    'roles \\[([^\\]]+?)\\] added': {
-                        gettext: gettext$1('roles {{list}} added'),
-                        placeholders: {
-                            list: '$1'
-                        }
-                    },
-                    'roles \\[([^\\]]+?)\\] removed': {
-                        gettext: gettext$1('roles {{list}} removed'),
-                        placeholders: {
-                            list: '$1'
-                        }
-                    }
-                }
-            }
+            deviceId: '$1'
         }
     },
-    '^Global Roles$': {
-        gettext: gettext$1('Global roles')
+    '^External id not found; external id = ID \\[type=(.+?), value=(.+?)\\]$': {
+        gettext: gettext$1('External ID not found for type "{{type}}" and value "{{value}}".'),
+        placeholders: {
+            type: '$1',
+            value: '$2'
+        }
     },
-    '^Operation updated: (.+)$': {
-        gettext: gettext$1('Operation updated: {{updatesList}}'),
+    '^ID \\[type=(.+?), value=(.+?)\\] was already bound to different Global ID.$': {
+        gettext: gettext$1('External ID "{{value}}" of the type "{{type}}" already exists.'),
         placeholders: {
-            updatesList: {
+            type: '$1',
+            value: '$2'
+        }
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_FIRMWARE = {
+    '^Apply software changes: (.+?)\\.?$': {
+        gettext: gettext$1('Apply software changes: {{ softwareChanges }}'),
+        placeholders: {
+            softwareChanges: {
                 capture: '$1',
                 translate: {
-                    "status='(.+?)'": {
-                        gettext: gettext$1('status: "{{ status | translate }}"'),
+                    'install "(.+?)" \\(version: (.+?)\\)': {
+                        gettext: gettext$1('install "{{ softwareName }}" (version: {{ softwareVersion }})'),
                         placeholders: {
-                            status: '$1'
+                            softwareName: '$1',
+                            softwareVersion: '$2'
                         }
                     },
-                    "description='(.+?)'": {
-                        gettext: gettext$1('description: "{{ description | translate }}"'),
+                    'install "([^"]+)"(?! \\(version: .+?\\))': {
+                        gettext: gettext$1('install "{{ softwareName }}"'),
                         placeholders: {
-                            description: '$1'
+                            softwareName: '$1'
                         }
                     },
-                    "device name='(.+?)'": {
-                        gettext: gettext$1('device name: "{{ deviceName }}"'),
+                    'delete "(.+?)" \\(version: (.+?)\\)': {
+                        gettext: gettext$1('delete "{{ softwareName }}" (version: {{ softwareVersion }})'),
                         placeholders: {
-                            deviceName: '$1'
+                            softwareName: '$1',
+                            softwareVersion: '$2'
                         }
                     },
-                    "failure reason='(.+?)'": {
-                        gettext: gettext$1('failure reason: "{{ failureReason | translate }}"'),
+                    'delete "([^"]+)"(?! \\(version: .+?\\))': {
+                        gettext: gettext$1('delete "{{ softwareName }}"'),
                         placeholders: {
-                            failureReason: '$1'
+                            softwareName: '$1'
                         }
                     }
                 }
             }
         }
     },
-    '^ID \\[type=(.+?), value=(.+?)\\] was already bound to different Global ID.$': {
-        gettext: gettext$1('External ID "{{value}}" of the type "{{type}}" already exists.'),
+    '^Update firmware to: "?(.+?)"? \\(version: (.+)\\)\\.?$': {
+        gettext: gettext$1('Update firmware to: "{{ name }}" (version: {{ version }})'),
         placeholders: {
-            type: '$1',
-            value: '$2'
+            name: '$1',
+            version: '$2'
         }
     },
-    '^Invalid credentials! : Bad credentials$': {
-        gettext: gettext$1('Invalid credentials.')
-    },
-    '^Invalid credentials! : No phone number provided$': {
-        gettext: gettext$1('Log into the management tenant first and enter your phone number.')
-    },
-    '^Inventory Role removed$': {
-        gettext: gettext$1('Inventory role removed')
-    },
-    '^Inventory Role (.+?) removed$': {
-        gettext: gettext$1('Inventory role "{{name}}" deleted.'),
+    '^Update firmware to: "?(.+?)"?\\.?$': {
+        gettext: gettext$1('Update firmware to: "{{ name }}"'),
         placeholders: {
             name: '$1'
         }
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_MICROSERVICES = {
+    '^Created container$': {
+        gettext: gettext$1('Container created.')
     },
-    '^Inventory Role updated$': {
-        gettext: gettext$1('Inventory role updated')
-    },
-    '^Inventory Role (.+?) updated$': {
-        gettext: gettext$1('Inventory role "{{name}}" updated.'),
+    '^Created pod: (.+)$': {
+        gettext: gettext$1('Pod "{{imageName}}" created.'),
         placeholders: {
-            name: '$1'
+            imageName: '$1'
         }
     },
-    '^I/O error: Connection refused; nested exception is Connection refused : Connection refused$': {
-        gettext: gettext$1('Connection refused')
+    '^Microservice not available.*$': {
+        gettext: gettext$1('Microservice is not available.')
     },
-    '^I/O error: Read timed out; nested exception is Read timed out : Read timed out$': {
-        gettext: gettext$1('Read timed out')
+    '^Started container$': {
+        gettext: gettext$1('Container started.')
     },
-    '^Log file requested$': {
-        gettext: gettext$1('Log file requested.')
+    '^Error syncing pod$': {
+        gettext: gettext$1('Pod synchronization error.')
     },
-    '^Managed object deleted$': {
-        gettext: gettext$1('Managed object deleted')
+    '^Failed create pod sandbox.$': {
+        gettext: gettext$1('Pod sandbox creation failed.')
     },
-    '^Managed object "(.+?)" deleted$': {
-        gettext: gettext$1('Managed object "{{name}}" deleted'),
+    '^Deleted pod: (.+)$': {
+        gettext: gettext$1('Pod "{{imageName}}" deleted.'),
         placeholders: {
-            name: '$1'
+            imageName: '$1'
         }
     },
-    '^Maximum file size exceeded$': {
-        gettext: gettext$1('Maximum file size exceeded.')
-    },
-    "^Message with ID (.+?) doesn't exist in smart rest template (.+?)$": {
-        gettext: gettext$1('Message with ID "{{messageId}}" doesn\'t exist in SmartREST template with ID "{{templateId}}"'),
+    '^Container image "(.+)" already present on machine$': {
+        gettext: gettext$1('Container image "{{imageName}}" already exists.'),
         placeholders: {
-            messageId: '$1',
-            templateId: '$2'
+            imageName: '$1'
         }
     },
-    "^name of Application cannot start with '(.+)' prefix.$": {
-        gettext: gettext$1('Application name must not start with "{{ prefix }}".'),
+    '^Scaled up replica set (.+) to (\\d+)$': {
+        gettext: gettext$1('Replica set "{{replicaSetName}}" scaled up to "{{scaleNumber}}".'),
         placeholders: {
-            prefix: '$1'
+            replicaSetName: '$1',
+            scaleNumber: '$2'
         }
     },
-    '^NewDeviceRequest for id = (.+?) already exists.$': {
-        gettext: gettext$1('Device registration request with ID {{id}} already exists.'),
+    '^Scaled down replica set (.+) to (\\d+)$': {
+        gettext: gettext$1('Replica set "{{replicaSetName}}" scaled down to "{{scaleNumber}}".'),
         placeholders: {
-            id: '$1'
+            replicaSetName: '$1',
+            scaleNumber: '$2'
         }
     },
-    '^NewDeviceRequest for device id (.+?) is in state BLOCKED, not PENDING_ACCEPTANCE.$': {
-        gettext: gettext$1('Device registration request with ID "{{deviceId}}" is in state "Blocked", not "Pending acceptance". Remove this registration request and start over.'),
+    '^Not within any context!$': {
+        gettext: gettext$1('A problem occurred with microservice subscription.')
+    },
+    '^pulling image "(.+)"$': {
+        gettext: gettext$1('Pulling image: "{{imageName}}".'),
         placeholders: {
-            deviceId: '$1'
+            imageName: '$1'
         }
     },
-    '^No communication with device since (.+?)$': {
-        gettext: gettext$1('No communication with device since {{timestamp | absoluteDate}}.'),
+    '^RESTART (.+?)$': {
+        gettext: gettext$1('RESTART`verb, action` {{service}}'),
         placeholders: {
-            timestamp: '$1'
+            service: '$1'
         }
     },
-    '^No data received from device within required interval.$': {
-        gettext: gettext$1('No data received from device within required interval.')
-    },
-    '^No LoRa provider settings are found. Please configure the connectivity settings.$': {
-        gettext: gettext$1('No LoRa provider settings are found. Please configure the connectivity settings.')
-    },
-    '^Not within any context!$': {
-        gettext: gettext$1('A problem occurred with microservice subscription.')
-    },
-    '^Maximum age cannot be bigger than 10 years.$': {
-        gettext: gettext$1('Maximum age cannot be bigger than 10 years.')
-    },
-    '^Microservice application name incorrect. Please use only lower-case letters, digits and dashes. Maximum length is (\\d+) characters.$': {
-        gettext: gettext$1('Microservice application name is incorrect: only lower case letters, digits and dashes allowed. Maximum length: {{maxLength}}.'),
+    '^START (.+?)$': {
+        gettext: gettext$1('START`verb, action` {{service}}'),
         placeholders: {
-            maxLength: '$1'
+            service: '$1'
         }
     },
-    '^Microservice not available.*$': {
-        gettext: gettext$1('Microservice is not available.')
-    },
-    '^Operation created$': {
-        gettext: gettext$1('Operation created.')
-    },
-    '^Operation updated$': {
-        gettext: gettext$1('Operation updated.')
-    },
-    "^Operation created: status='(.+?)'.$": {
-        gettext: gettext$1('Operation created: status: "{{ status | translate }}".'),
+    '^STOP (.+?)$': {
+        gettext: gettext$1('STOP`verb, action` {{service}}'),
         placeholders: {
-            status: '$1'
+            service: '$1'
         }
     },
-    '^Option created$': {
-        gettext: gettext$1('Option created.')
-    },
-    '^Option "(.+?)" created$': {
-        gettext: gettext$1('Option "{{option}}" created.'),
+    '^Successfully assigned (.+) to (.+)$': {
+        gettext: gettext$1('"{{imageName}}" assigned to "{{address}}".'),
         placeholders: {
-            option: '$1'
+            imageName: '$1',
+            address: '$2'
         }
     },
-    '^Option deleted$': {
-        gettext: gettext$1('Option deleted.')
-    },
-    '^Option "(.+?)" deleted$': {
-        gettext: gettext$1('Option "{{option}}" deleted.'),
+    '^Successfully pulled image "(.+)"$': {
+        gettext: gettext$1('Image "{{imageName}}" pulled.'),
         placeholders: {
-            option: '$1'
+            imageName: '$1'
         }
     },
-    '^Owner field error. : Cannot introduce cyclic dependency.$': {
-        gettext: gettext$1('Could not introduce cyclic ownership dependency.')
-    },
-    '^Password change is temporary blocked.$': {
-        gettext: gettext$1('Password change is temporarily blocked.')
-    },
-    '^Password cipher does not match$': {
-        gettext: gettext$1('Password cipher does not match.')
-    },
-    '^Platform application cannot be added to, nor removed from any tenant.$': {
-        gettext: gettext$1('Platform application cannot be added to, nor removed from any tenant.')
-    },
-    '^Private key must be provided in KEY_PAIR credentials$': {
-        gettext: gettext$1('Private key must be provided when "Public/private keys" option is selected.')
+    '^Write failed with error code 16733 and error message \'trying to index text where term list is too big, max is 4mb _id: "(.+?)"\'$': {
+        gettext: gettext$1('The uploaded image cannot be bigger than 4 MB. Please upload a smaller one.')
     },
-    '^Private key cipher does not match$': {
-        gettext: gettext$1('Private key cipher does not match')
+    '^Write failed with error code 17280 and error message \'WiredTigerIndex::insert: key too large to index, failing (.+?) { : "(.+?)" }\'$': {
+        gettext: gettext$1('The selected name is too long. Please try a shorter one.')
     },
-    '^Protocol "(.+?)" does not support "(.+?)" credentials type$': {
-        gettext: gettext$1('Protocol "{{protocol}}" does not support "{{credentialsType}}" credentials type.'),
+    '^No nodes are available that match all of the predicates: (.+).$': {
+        gettext: gettext$1('No nodes are available that match all of the predicates: [{{predicates}}].'),
         placeholders: {
-            protocol: '$1',
-            credentialsType: '$2'
+            predicates: '$1'
         }
     },
-    '^Provided security key does not match key stored for device (.+?).$': {
-        gettext: gettext$1('Provided security token does not match the security token stored for this device "{{deviceId}}".'),
+    '^Readiness probe failed: (.+) (.+): (.+): request canceled while waiting for connection \\(Client.Timeout exceeded while awaiting headers\\)$': {
+        gettext: gettext$1('Readiness probe failed: {{requestMethod}} {{uri}}: {{protocol}}: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers).'),
         placeholders: {
-            deviceId: '$1'
+            requestMethod: '$1',
+            uri: '$2',
+            protocol: '$3'
         }
     },
-    '^Provided security key does not match key stored for device (.+?).Reached maximum number of failed attempts while trying to register this device. Request will now be blocked and has to be removed manually to restart the process.$': {
-        gettext: gettext$1('The provided security token does not match the token stored for device "{{deviceId}}". You have reached the maximum number of failed attempts while trying to register this device. The request will now be blocked and must be removed manually to restart the process.'),
+    '^Liveness probe failed: (.+) (.+): (.+): request canceled while waiting for connection \\(Client.Timeout exceeded while awaiting headers\\)$': {
+        gettext: gettext$1('Liveness probe failed: {{requestMethod}} {{uri}}: {{protocol}}: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers).'),
         placeholders: {
-            deviceId: '$1'
+            requestMethod: '$1',
+            uri: '$2',
+            protocol: '$3'
         }
-    },
-    '^pulling image "(.+)"$': {
-        gettext: gettext$1('Pulling image: "{{imageName}}".'),
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_OPERATIONS = {
+    '^Creation ramp must be greater than (\\d+?)$': {
+        gettext: gettext$1('Bulk operation delay must be greater than {{minSeconds}} seconds.'),
         placeholders: {
-            imageName: '$1'
+            minSeconds: '$1'
         }
     },
-    '^Real-time event processing is currently overloaded and may stop processing your events\\. Please contact support\\.$': {
-        gettext: gettext$1('Real-time event processing is currently overloaded and may stop processing your events. Please contact support.')
-    },
-    '^Resource ID \\[type=com_cumulocity_model_idtype_GId, value=(.+?)\\] for this request not found.$': {
-        gettext: gettext$1('Could not find the resource with ID "{{id}}".'),
+    '^Close relay (.+).$': {
+        gettext: gettext$1('Close relay {{number}}.'),
         placeholders: {
-            id: '$1'
+            number: '$1'
         }
     },
-    '^RESTART (.+?)$': {
-        gettext: gettext$1('RESTART`verb, action` {{service}}'),
-        placeholders: {
-            service: '$1'
-        }
-    },
-    '^Retrieve configuration snapshot from device (.+?)$': {
-        gettext: gettext$1('Retrieve configuration snapshot from device {{deviceName}}'),
+    '^Open relay (.+).$': {
+        gettext: gettext$1('Open relay {{number}}.'),
         placeholders: {
-            deviceName: '$1'
+            number: '$1'
         }
     },
-    '^Retrieve (.+?) configuration snapshot from device (.+?)$': {
-        gettext: gettext$1('Retrieve {{configurationType}} configuration snapshot from device {{deviceName}}'),
+    '^Change trace status to (.+).$': {
+        gettext: gettext$1('Change trace status to {{state | translate}}.'),
         placeholders: {
-            configurationType: '$1',
-            deviceName: '$2'
+            state: '$1'
         }
     },
-    '^Scaled up replica set (.+) to (\\d+)$': {
-        gettext: gettext$1('Replica set "{{replicaSetName}}" scaled up to "{{scaleNumber}}".'),
+    '^Change relay status to (.+).$': {
+        gettext: gettext$1('Change relay status to {{status | translate}}.'),
         placeholders: {
-            replicaSetName: '$1',
-            scaleNumber: '$2'
+            status: '$1'
         }
     },
-    '^Send configuration snapshot (.+?) of configuration type (.+?) to device (.+?)$': {
-        gettext: gettext$1('Send configuration snapshot {{snapshotName}} of configuration type {{configurationType}} to device {{deviceName}}'),
+    '^Closing relay (.+).$': {
+        gettext: gettext$1('Closing relay {{number}}.'),
         placeholders: {
-            snapshotName: '$1',
-            configurationType: '$2',
-            deviceName: '$3'
+            number: '$1'
         }
     },
-    '^Send configuration snapshot (.+?) to device (.+?)$': {
-        gettext: gettext$1('Send configuration snapshot {{snapshotName}} to device {{deviceName}}'),
+    '^Opening relay (.+).$': {
+        gettext: gettext$1('Opening relay {{number}}.'),
         placeholders: {
-            snapshotName: '$1',
-            deviceName: '$2'
+            number: '$1'
         }
     },
-    '^Simulator state is invalid: (.+)$': {
-        gettext: gettext$1('Simulator state is invalid: {{violations}}'),
+    '^Operation updated: (.+)$': {
+        gettext: gettext$1('Operation updated: {{updatesList}}'),
         placeholders: {
-            violations: {
+            updatesList: {
                 capture: '$1',
                 translate: {
-                    '(\\w+?) - may not be null': {
-                        gettext: gettext$1('"{{field}}" should not be null'),
-                        placeholders: {
-                            field: '$1'
-                        }
-                    },
-                    '(\\w+?) - must be less than or equal to (\\d+)': {
-                        gettext: gettext$1('"{{field}}" must be less than or equal to {{maxValue}}'),
+                    "status='(.+?)'": {
+                        gettext: gettext$1('status: "{{ status | translate }}"'),
                         placeholders: {
-                            field: '$1',
-                            maxValue: '$2'
+                            status: '$1'
                         }
                     },
-                    '(\\w+?) - should not contain null values': {
-                        gettext: gettext$1('"{{field}}" should not contain null values'),
+                    "description='(.+?)'": {
+                        gettext: gettext$1('description: "{{ description | translate }}"'),
                         placeholders: {
-                            field: '$1'
+                            description: '$1'
                         }
                     },
-                    '(\\w+?) - must be true': {
-                        gettext: gettext$1('"{{field}}" must be true'),
+                    "device name='(.+?)'": {
+                        gettext: gettext$1('device name: "{{ deviceName }}"'),
                         placeholders: {
-                            field: '$1'
+                            deviceName: '$1'
                         }
                     },
-                    '(\\w+?) - must not be empty': {
-                        gettext: gettext$1('"{{field}}" must not be empty'),
+                    "failure reason='(.+?)'": {
+                        gettext: gettext$1('failure reason: "{{ failureReason | translate }}"'),
                         placeholders: {
-                            field: '$1'
+                            failureReason: '$1'
                         }
                     }
                 }
             }
         }
     },
-    "^Smart rest template (.+?) doesn't exist$": {
-        gettext: gettext$1('SmartREST template with ID "{{templateId}}" doesn\'t exist.'),
-        placeholders: {
-            templateId: '$1'
-        }
-    },
-    '^Smart rule created$': {
-        gettext: gettext$1('Smart rule created.')
-    },
-    '^Smart rule updated$': {
-        gettext: gettext$1('Smart rule updated.')
-    },
-    '^Smart rule enabled$': {
-        gettext: gettext$1('Smart rule activated.')
-    },
-    '^Smart rule disabled$': {
-        gettext: gettext$1('Smart rule deactivated.')
+    '^Operation created$': {
+        gettext: gettext$1('Operation created.')
     },
-    '^Smart rule deleted$': {
-        gettext: gettext$1('Smart rule deleted.')
+    '^Operation updated$': {
+        gettext: gettext$1('Operation updated.')
     },
-    '^Smart rule "(.+?)" created$': {
-        gettext: gettext$1('Smart rule "{{name}}" created.'),
+    "^Operation created: status='(.+?)'.$": {
+        gettext: gettext$1('Operation created: status: "{{ status | translate }}".'),
         placeholders: {
-            name: '$1'
+            status: '$1'
         }
     },
-    '^Smart rule "(.+?)" updated$': {
-        gettext: gettext$1('Smart rule "{{name}}" updated.'),
+    '^Change value of "(.+)" to (.+) (.+).$': {
+        gettext: gettext$1('Change value of "{{name}}" to {{value}}{{unit}}.'),
         placeholders: {
-            name: '$1'
+            name: '$1',
+            value: '$2',
+            unit: '$3'
         }
     },
-    '^Smart rule "(.+?)" enabled$': {
-        gettext: gettext$1('Smart rule "{{name}}" activated.'),
+    '^Change value of "(.+)" to (.+).$': {
+        gettext: gettext$1('Change value of "{{name}}" to {{value}}.'),
         placeholders: {
-            name: '$1'
+            name: '$1',
+            value: '$2'
         }
     },
-    '^Smart rule "(.+?)" disabled$': {
-        gettext: gettext$1('Smart rule "{{name}}" deactivated.'),
+    '^Change status of "(.+)" to "(.+)".$': {
+        gettext: gettext$1('Change status of "{{name}}" to "{{label}}".'),
         placeholders: {
-            name: '$1'
+            name: '$1',
+            label: '$2'
         }
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_ROLES = {
+    '^Global Role updated$': {
+        gettext: gettext$1('Global role updated')
     },
-    '^Smart rule "(.+?)" deleted$': {
-        gettext: gettext$1('Smart rule "{{name}}" deleted.'),
+    '^Global Role (.+?) updated$': {
+        gettext: gettext$1('Global role "{{name}}" updated'),
         placeholders: {
             name: '$1'
         }
     },
-    '^START (.+?)$': {
-        gettext: gettext$1('START`verb, action` {{service}}'),
+    '^Global Role (.+?) updated: (.+)$': {
+        gettext: gettext$1('Global role "{{name}}" updated: {{updatesList}}'),
         placeholders: {
-            service: '$1'
+            name: '$1',
+            updatesList: {
+                capture: '$2',
+                translate: {
+                    'applications \\[([^\\]]+?)\\] added': {
+                        gettext: gettext$1('applications {{list}} added'),
+                        placeholders: { list: '$1' }
+                    },
+                    'applications \\[([^\\]]+?)\\] removed': {
+                        gettext: gettext$1('applications {{list}} removed'),
+                        placeholders: { list: '$1' }
+                    },
+                    'roles \\[([^\\]]+?)\\] added': {
+                        gettext: gettext$1('roles {{list}} added'),
+                        placeholders: { list: '$1' }
+                    },
+                    'roles \\[([^\\]]+?)\\] removed': {
+                        gettext: gettext$1('roles {{list}} removed'),
+                        placeholders: { list: '$1' }
+                    }
+                }
+            }
         }
     },
-    '^Started container$': {
-        gettext: gettext$1('Container started.')
+    '^Global Roles$': {
+        gettext: gettext$1('Global roles')
     },
-    '^STOP (.+?)$': {
-        gettext: gettext$1('STOP`verb, action` {{service}}'),
+    '^Inventory Role removed$': {
+        gettext: gettext$1('Inventory role removed')
+    },
+    '^Inventory Role (.+?) removed$': {
+        gettext: gettext$1('Inventory role "{{name}}" deleted.'),
         placeholders: {
-            service: '$1'
+            name: '$1'
         }
     },
-    '^Successfully assigned (.+) to (.+)$': {
-        gettext: gettext$1('"{{imageName}}" assigned to "{{address}}".'),
+    '^Inventory Role updated$': {
+        gettext: gettext$1('Inventory role updated')
+    },
+    '^Inventory Role (.+?) updated$': {
+        gettext: gettext$1('Inventory role "{{name}}" updated.'),
         placeholders: {
-            imageName: '$1',
-            address: '$2'
+            name: '$1'
         }
     },
-    '^Successfully pulled image "(.+)"$': {
-        gettext: gettext$1('Image "{{imageName}}" pulled.'),
+    // Global roles and descriptions
+    '^Global Manager$': {
+        gettext: gettext$1('Global Manager')
+    },
+    '^Can read and write all data from all devices$': {
+        gettext: gettext$1('Can read and write all data from all devices.')
+    },
+    '^Global Reader$': {
+        gettext: gettext$1('Global Reader')
+    },
+    '^Can read all data \\(including users, in contrast to "Global Reader"\\)$': {
+        gettext: gettext$1('Can read all data (including users, in contrast to "Global Reader").')
+    },
+    '^Tenant Manager$': {
+        gettext: gettext$1('Tenant Manager')
+    },
+    '^Can manage tenant wide configurations like applications, tenant options and retention rules$': {
+        gettext: gettext$1('Can manage tenant wide configurations like applications, tenant options and retention rules.')
+    },
+    '^CEP Manager$': {
+        gettext: gettext$1('CEP Manager')
+    },
+    '^Has full access to all deployed CEP modules and SmartRules$': {
+        gettext: gettext$1('Has full access to all deployed CEP modules and smart rules.')
+    },
+    '^Cockpit User$': {
+        gettext: gettext$1('Cockpit User')
+    },
+    '^User to work in Cockpit application. This does not include the access to any device data.$': {
+        gettext: gettext$1('User to work in Cockpit application. This does not include the access to any device data.')
+    },
+    '^Global User Manager$': {
+        gettext: gettext$1('Global User Manager')
+    },
+    '^Can access and modify the full user hierarchy$': {
+        gettext: gettext$1('Can access and edit the full user hierarchy.')
+    },
+    '^Shared User Manager$': {
+        gettext: gettext$1('Shared User Manager')
+    },
+    '^Can create new user as his own sub-users and manage this$': {
+        gettext: gettext$1('Can create new own sub-users and manage them.')
+    },
+    // Device management roles
+    '^Reader$': {
+        gettext: gettext$1('Reader')
+    },
+    '^Can read all data of the asset.$': {
+        gettext: gettext$1('Can read all data of the asset.')
+    },
+    '^Devicemanagement User$': {
+        gettext: gettext$1('Device Management User')
+    },
+    '^Gives access to bulk operations and device management application. This does not include access to any device data.$': {
+        gettext: gettext$1('Gives access to bulk operations and Device Management application. This does not include access to any device data.')
+    },
+    // Description for 'devices' role
+    '^A role marker for device users. After registration, a device automatically has this role$': {
+        gettext: gettext$1('A role marker for device users. After registration, a device automatically has this role.')
+    },
+    // Inventory operations all role
+    '^Operations: All$': {
+        gettext: gettext$1('Operations: All')
+    },
+    '^Can remotely manage the assets by sending operations to the device. This includes for example remote configuration, software update, etc.$': {
+        gettext: gettext$1('Can remotely manage the assets by sending operations to the device. This includes remote configuration, software update and more.')
+    },
+    '^Operations: Restart Device$': {
+        gettext: gettext$1('Operations: Restart Device')
+    },
+    '^Can restart devices.$': {
+        gettext: gettext$1('Can restart devices.')
+    },
+    // Description for 'business' role
+    '^Can access all devices and their data but has no management permission in the tenant$': {
+        gettext: gettext$1('Can access all devices and their data but has no management permission in the tenant.')
+    },
+    '^Can read all data from all devices$': {
+        gettext: gettext$1('Can read all data from all devices.')
+    },
+    '^Enables administrative permissions. The first user created for the tenant receives this role$': {
+        gettext: gettext$1('Enables administrative permissions. The first user created for the tenant receives this role.')
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_TENANTS = {
+    '^(.+)pplication for tenant (.+) with properties \\( (.+?) \\) already exists$': {
+        gettext: gettext$1('Application for tenant "{{tenant}}" with the following values ({{valuesList}}) already exists.'),
         placeholders: {
-            imageName: '$1'
+            tenant: '$2',
+            valuesList: '$3'
         }
     },
+    '^Domain name is already in use by another tenant!$': {
+        gettext: gettext$1('Domain name is already used by another tenant.')
+    },
     '^Tenant creation failed. : Tenant with given id already exists.$': {
         gettext: gettext$1('Could not create a tenant. Tenant with given domain/URL already exists.')
     },
@@ -1913,9 +2218,22 @@ const MESSAGES_CORE_I18N = {
     },
     '^Tenant updated$': {
         gettext: gettext$1('Tenant updated.')
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_USERS = {
+    "^Can't delete user because it is used by another managed object$": {
+        gettext: gettext$1('Cannot delete device with associated device owner because this owner is still assigned to other device(s). Try to remove only the device.')
     },
-    '^Too Many Requests$': {
-        gettext: gettext$1('Too many requests. Try again later.')
+    '^Could not update user. : Error persisting user (.+?)!$': {
+        gettext: gettext$1('Could not update user "{{username}}".'),
+        placeholders: {
+            username: '$1'
+        }
+    },
+    '^Owner field error. : Cannot introduce cyclic dependency.$': {
+        gettext: gettext$1('Could not introduce cyclic ownership dependency.')
     },
     "^User alias equals username '(.+)'$": {
         gettext: gettext$1('Username and login alias must be different.')
@@ -1938,12 +2256,6 @@ const MESSAGES_CORE_I18N = {
             name: '$1'
         }
     },
-    '^(.+?) user login with OAuth internal mode failed$': {
-        gettext: gettext$1('"{{name}}" user login with OAI-Secure mode failed'),
-        placeholders: {
-            name: '$1'
-        }
-    },
     '^User updated$': {
         gettext: gettext$1('User updated')
     },
@@ -2024,200 +2336,86 @@ const MESSAGES_CORE_I18N = {
             email: '$1'
         }
     },
-    '^unable to find option with given key (.+?) : Could not find entity Option by ID (.+?)!$': {
-        gettext: gettext$1('Unable to get tenant option: "{{option}}".'),
-        placeholders: {
-            option: '$2'
-        }
-    },
-    '^unable to find option with given key (.+?) : There is no system property for key (.+?)$': {
-        gettext: gettext$1('Unable to get system option: "{{option}}".'),
-        placeholders: {
-            option: '$2'
-        }
-    },
-    '^Write failed with error code 16733 and error message \'trying to index text where term list is too big, max is 4mb _id: "(.+?)"\'$': {
-        gettext: gettext$1('The uploaded image cannot be bigger than 4 MB. Please upload a smaller one.')
-    },
-    '^Write failed with error code 17280 and error message \'WiredTigerIndex::insert: key too large to index, failing (.+?) { : "(.+?)" }\'$': {
-        gettext: gettext$1('The selected name is too long. Please try a shorter one.')
-    },
-    '^You have reached devices limit. No more devices can be registered.$': {
-        gettext: gettext$1('You reached devices limit. No more devices can be registered.')
-    },
-    '^(.+) succeeded for volume "(.+)"$': {
-        gettext: gettext$1('Operation "{{operation}}" succeeded for volume "{{volume}}".'),
-        placeholders: {
-            operation: '$1',
-            volume: '$2'
-        }
-    },
-    "^Exception on tenant (.+) in statement '(.+)': Invocation exception when invoking method '(.+)' of class '(.+)' passing parameters \\[(.+)\\] for statement '(.+)': (.+) : (.+)$": {
-        gettext: gettext$1('Exception on tenant {{tenantId}} in statement "{{moduleName}}": Invocation exception when invoking method "{{methodName}}" of class "{{classPath}}" passing parameters [{{parameters}}] for statement "{{statement}}": {{exceptionType}} : {{exceptionMessage}}.'),
-        placeholders: {
-            tenantId: '$1',
-            moduleName: '$2',
-            methodName: '$3',
-            classPath: '$4',
-            parameters: '$5',
-            statement: '$6',
-            exceptionType: '$7',
-            exceptionMessage: '$8'
-        }
-    },
-    '^No nodes are available that match all of the predicates: (.+).$': {
-        gettext: gettext$1('No nodes are available that match all of the predicates: [{{predicates}}].'),
-        placeholders: {
-            predicates: '$1'
-        }
-    },
-    '^Readiness probe failed: (.+) (.+): (.+): request canceled while waiting for connection \\(Client.Timeout exceeded while awaiting headers\\)$': {
-        gettext: gettext$1('Readiness probe failed: {{requestMethod}} {{uri}}: {{protocol}}: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers).'),
-        placeholders: {
-            requestMethod: '$1',
-            uri: '$2',
-            protocol: '$3'
-        }
-    },
-    '^Liveness probe failed: (.+) (.+): (.+): request canceled while waiting for connection \\(Client.Timeout exceeded while awaiting headers\\)$': {
-        gettext: gettext$1('Liveness probe failed: {{requestMethod}} {{uri}}: {{protocol}}: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers).'),
-        placeholders: {
-            requestMethod: '$1',
-            uri: '$2',
-            protocol: '$3'
-        }
-    },
-    '^Error syncing pod$': {
-        gettext: gettext$1('Pod synchronization error.')
-    },
-    '^Failed create pod sandbox.$': {
-        gettext: gettext$1('Pod sandbox creation failed.')
-    },
-    '^Exception on tenant (.+) in statement \'(.+)\': Http status code: (\\d+) \\{error="alarm/Unprocessable Entity",message="(.+)",info="https://www.cumulocity.com/guides/reference-guide/#error_reporting",details="null"\\}$': {
-        gettext: gettext$1('Exception on tenant {{tenantId}} in statement "{{statement}}": HTTP status code: {{httpStatusCode}} : {{message | translate}}'),
-        placeholders: {
-            tenantId: '$1',
-            statement: '$2',
-            httpStatusCode: '$3',
-            message: '$4'
-        }
-    },
     "^User '(.+)' is managed by a remote identity management service defined by an administrator, direct update is forbidden$": {
         gettext: gettext$1('User "{{userName}}" is managed by a remote identity management service defined by an administrator, direct update is forbidden.'),
         placeholders: {
             userName: '$1'
         }
     },
-    '^Added new child device to "(.+)" \\(ID: (.+)\\).$': {
-        gettext: gettext$1('Added new child device to "{{parentDeviceName}}" (ID: {{parentDeviceId}}).'),
-        placeholders: {
-            parentDeviceName: '$1',
-            parentDeviceId: '$2'
-        }
-    },
-    '^Updated child device of "(.+)" \\(ID: (.+)\\).$': {
-        gettext: gettext$1('Updated child device of "{{parentDeviceName}}" (ID: {{parentDeviceId}}).'),
-        placeholders: {
-            parentDeviceName: '$1',
-            parentDeviceId: '$2'
-        }
+    '^User logout$': {
+        gettext: gettext$1('User logout')
     },
-    '^Added child device "(.+)" \\(ID: (.+)\\).$': {
-        gettext: gettext$1('Added child device "{{name}}" (ID: {{id}}).'),
+    '^(.+?) user logout$': {
+        gettext: gettext$1('"{{name}}" user logout'),
         placeholders: {
-            name: '$1',
-            id: '$2'
+            name: '$1'
         }
     },
-    '^Removed child device "(.+)" \\(ID: (.+)\\).$': {
-        gettext: gettext$1('Removed child device "{{name}}" (ID: {{id}}).'),
-        placeholders: {
-            name: '$1',
-            id: '$2'
-        }
+    '^Display name$': {
+        gettext: gettext$1('Login alias')
+    }
+};
+
+/* tslint:disable:max-line-length */
+const PATTERN_MESSAGES_MISC = {
+    '^Access is denied$': {
+        gettext: gettext$1('Access denied.')
     },
-    '^Change value of "(.+)" to (.+) (.+).$': {
-        gettext: gettext$1('Change value of "{{name}}" to {{value}}{{unit}}.'),
-        placeholders: {
-            name: '$1',
-            value: '$2',
-            unit: '$3'
-        }
+    '^API is not available with the new domain$': {
+        gettext: gettext$1('Could not activate custom domain. DNS setup is incorrect.')
     },
-    '^Change value of "(.+)" to (.+).$': {
-        gettext: gettext$1('Change value of "{{name}}" to {{value}}.'),
-        placeholders: {
-            name: '$1',
-            value: '$2'
-        }
+    '^Availability monitoring record$': {
+        gettext: gettext$1('Availability monitoring record')
     },
-    '^Change status of "(.+)" to "(.+)".$': {
-        gettext: gettext$1('Change status of "{{name}}" to "{{label}}".'),
-        placeholders: {
-            name: '$1',
-            label: '$2'
-        }
+    '^Failed to update domain at the platform$': {
+        gettext: gettext$1('Failed to update domain at the platform.')
     },
-    '^Send message "(.+)".$': {
-        gettext: gettext$1('Send message "{{str}}".'),
+    '^Following mandatory fields should be included: (.+?)$': {
+        gettext: gettext$1('Following mandatory fields should be included: {{fields}}'),
         placeholders: {
-            str: '$1'
+            fields: '$1'
         }
     },
-    '^Close relay (.+).$': {
-        gettext: gettext$1('Close relay {{number}}.'),
-        placeholders: {
-            number: '$1'
-        }
+    '^I/O error: Connection refused; nested exception is Connection refused : Connection refused$': {
+        gettext: gettext$1('Connection refused')
     },
-    '^Open relay (.+).$': {
-        gettext: gettext$1('Open relay {{number}}.'),
-        placeholders: {
-            number: '$1'
-        }
+    '^I/O error: Read timed out; nested exception is Read timed out : Read timed out$': {
+        gettext: gettext$1('Read timed out')
     },
-    '^Change trace status to (.+).$': {
-        gettext: gettext$1('Change trace status to {{state | translate}}.'),
-        placeholders: {
-            state: '$1'
-        }
+    '^Log file requested$': {
+        gettext: gettext$1('Log file requested.')
     },
-    '^Change relay status to (.+).$': {
-        gettext: gettext$1('Change relay status to {{status | translate}}.'),
-        placeholders: {
-            status: '$1'
-        }
+    '^Managed object deleted$': {
+        gettext: gettext$1('Managed object deleted')
     },
-    '^Closing relay (.+).$': {
-        gettext: gettext$1('Closing relay {{number}}.'),
+    '^Managed object "(.+?)" deleted$': {
+        gettext: gettext$1('Managed object "{{name}}" deleted'),
         placeholders: {
-            number: '$1'
+            name: '$1'
         }
     },
-    '^Opening relay (.+).$': {
-        gettext: gettext$1('Opening relay {{number}}.'),
-        placeholders: {
-            number: '$1'
-        }
+    '^Maximum file size exceeded$': {
+        gettext: gettext$1('Maximum file size exceeded.')
     },
-    '^Update bulk operation$': {
-        gettext: gettext$1('Update bulk operation')
+    '^Maximum age cannot be bigger than 10 years.$': {
+        gettext: gettext$1('Maximum age cannot be bigger than 10 years.')
     },
-    '^Update bulk operation: (.+)$': {
-        gettext: gettext$1('Update bulk operation: {{updatesList}}'),
-        placeholders: bulkOperationAuditLogTextPlaceholders
+    '^Real-time event processing is currently overloaded and may stop processing your events\\. Please contact support\\.$': {
+        gettext: gettext$1('Real-time event processing is currently overloaded and may stop processing your events. Please contact support.')
     },
-    '^Update firmware to: "?(.+?)"? \\(version: (.+)\\)\\.?$': {
-        gettext: gettext$1('Update firmware to: "{{ name }}" (version: {{ version }})'),
+    '^Resource ID \\[type=com_cumulocity_model_idtype_GId, value=(.+?)\\] for this request not found.$': {
+        gettext: gettext$1('Could not find the resource with ID "{{id}}".'),
         placeholders: {
-            name: '$1',
-            version: '$2'
+            id: '$1'
         }
     },
-    '^Update firmware to: "?(.+?)"?\\.?$': {
-        gettext: gettext$1('Update firmware to: "{{ name }}"'),
+    '^Too Many Requests$': {
+        gettext: gettext$1('Too many requests. Try again later.')
+    },
+    '^Send message "(.+)".$': {
+        gettext: gettext$1('Send message "{{str}}".'),
         placeholders: {
-            name: '$1'
+            str: '$1'
         }
     },
     '^Update configuration to (.+).$': {
@@ -2226,163 +2424,173 @@ const MESSAGES_CORE_I18N = {
             name: '$1'
         }
     },
-    '^Apply device profile: (.+).?$': {
-        gettext: gettext$1('Apply device profile: {{ name }}'),
-        placeholders: {
-            name: '$1'
-        }
-    },
     '^Execute generic command: (.+).?$': {
         gettext: gettext$1('Execute generic command: {{command}}'),
         placeholders: {
             command: '$1'
         }
     },
-    '^Failed to refresh application. : Cannot refresh non local-hosted application.$': {
-        gettext: gettext$1('Could not reactivate the application as it is not hosted locally.')
-    },
-    '^Failed to refresh application. : Cannot refresh application without active version id.$': {
-        gettext: gettext$1('Could not reactivate the application as it has no active version.')
+    '^Error while processing report$': {
+        gettext: gettext$1('Error while processing report')
     },
-    // TODO: remove if we decide not to translate such messages:
-    // '^Killing container with id (.+):Need to kill Pod$': {
-    //   gettext: gettext('Killing container with ID "{{containerId}}". Need to kill Pod.'),
-    //   placeholders: {
-    //     containerId: '$1'
-    //   }
-    // },
-    '^Scaled down replica set (.+) to (\\d+)$': {
-        gettext: gettext$1('Replica set "{{replicaSetName}}" scaled down to "{{scaleNumber}}".'),
+    '^Expected 1 endpointId argument$': {
+        gettext: gettext$1('Expected 1 endpointId argument')
+    }
+};
+
+const PATTERN_MESSAGES_SIMULATION = {
+    '^Command state is invalid: (.+)$': {
+        gettext: gettext$1('Command state is invalid: {{violations}}'),
         placeholders: {
-            replicaSetName: '$1',
-            scaleNumber: '$2'
+            violations: {
+                capture: '$1',
+                translate: {
+                    '(\\w+?) - may not be null': {
+                        gettext: gettext$1('"{{field}}" must not be null'),
+                        placeholders: {
+                            field: '$1'
+                        }
+                    }
+                }
+            }
         }
     },
-    '^Deleted pod: (.+)$': {
-        gettext: gettext$1('Pod "{{imageName}}" deleted.'),
+    '^Simulator state is invalid: (.+)$': {
+        gettext: gettext$1('Simulator state is invalid: {{violations}}'),
         placeholders: {
-            imageName: '$1'
+            violations: {
+                capture: '$1',
+                translate: {
+                    '(\\w+?) - may not be null': {
+                        gettext: gettext$1('"{{field}}" should not be null'),
+                        placeholders: {
+                            field: '$1'
+                        }
+                    },
+                    '(\\w+?) - must be less than or equal to (\\d+)': {
+                        gettext: gettext$1('"{{field}}" must be less than or equal to {{maxValue}}'),
+                        placeholders: {
+                            field: '$1',
+                            maxValue: '$2'
+                        }
+                    },
+                    '(\\w+?) - should not contain null values': {
+                        gettext: gettext$1('"{{field}}" should not contain null values'),
+                        placeholders: {
+                            field: '$1'
+                        }
+                    },
+                    '(\\w+?) - must be true': {
+                        gettext: gettext$1('"{{field}}" must be true'),
+                        placeholders: {
+                            field: '$1'
+                        }
+                    },
+                    '(\\w+?) - must not be empty': {
+                        gettext: gettext$1('"{{field}}" must not be empty'),
+                        placeholders: {
+                            field: '$1'
+                        }
+                    }
+                }
+            }
         }
-    },
-    '^Container image "(.+)" already present on machine$': {
-        gettext: gettext$1('Container image "{{imageName}}" already exists.'),
+    }
+};
+
+const PATTERN_MESSAGE_REMOTE_ACCESS = {
+    '^Could not login to ssh server on endpoint "(.+)"\\. Provided credential for user "(.+)" is incorrect\\.$': {
+        gettext: gettext$1('Could not access SSH server on endpoint "{{endpointName}}". Provided credentials for user "{{userName}}" are incorrect.'),
         placeholders: {
-            imageName: '$1'
+            endpointName: '$1',
+            userName: '$2'
         }
     },
-    '^Error updating tenant! Cannot insert second configuration for Password code grant internal/Bad Request$': {
-        gettext: gettext$1('This login mode was already set by another administrator. Refresh the page to update the data.')
-    },
-    // Translations for audit logs
-    '^Application deleted$': {
-        gettext: gettext$1('Application deleted')
-    },
-    '^Microservice application "(.+?)" deleted for tenant "(.+?)"$': {
-        gettext: gettext$1('Microservice application "{{appName}}" deleted for tenant "{{tenant}}"'),
+    '^Could not connect to endpoint (.+)\\. Could not verify `(.+)` host key with fingerprint `(.+)` for `(.+)` on port (.+)\\. If you expected that key, please remove the previous one from configuration to allow for connection\\.$': {
+        gettext: gettext$1('Could not connect to endpoint "{{endpointName}}". Could not verify {{keyType}} host key with fingerprint {{fingerprint}} for host {{host}} on port {{port}}. If you expected this key, please remove the previous one from configuration to allow for connection.'),
         placeholders: {
-            appName: '$1',
-            tenant: '$2'
+            endpointName: '$1',
+            keyType: '$2',
+            fingerprint: '$3',
+            host: '$4',
+            port: '$5'
         }
     },
-    '^Hosted application "(.+?)" deleted for tenant "(.+?)"$': {
-        gettext: gettext$1('Hosted application "{{appName}}" deleted for tenant "{{tenant}}"'),
+    '^Could not save object remoteAccessUpdate: (.+)$': {
+        gettext: '{{errorMessages}}',
         placeholders: {
-            appName: '$1',
-            tenant: '$2'
+            errorMessages: {
+                capture: '$1',
+                translate: {
+                    'Could not recognize host-key format': {
+                        gettext: gettext$1('Could not recognize "Host key" format')
+                    },
+                    'Could not recognize key-pair format': {
+                        gettext: gettext$1('Could not recognize the format of "Public key" or "Private key"')
+                    }
+                }
+            }
         }
     },
-    '^External application "(.+?)" deleted for tenant "(.+?)"$': {
-        gettext: gettext$1('External application "{{appName}}" deleted for tenant "{{tenant}}"'),
-        placeholders: {
-            appName: '$1',
-            tenant: '$2'
-        }
+    '^Password cipher does not match$': {
+        gettext: gettext$1('Password cipher does not match.')
     },
-    '^Application activated$': {
-        gettext: gettext$1('Application activated')
+    '^Private key must be provided in KEY_PAIR credentials$': {
+        gettext: gettext$1('Private key must be provided when "Public/private keys" option is selected.')
     },
-    '^Microservice application "(.+?)" activated: version \\[(.+?)\\] added, activeVersionId \\[(.+?)\\] added$': {
-        gettext: gettext$1('Microservice application "{{appName}}" activated: version "{{version}}" added, activeVersionId "{{activeVersionId}}" added'),
+    '^Protocol "(.+?)" does not support "(.+?)" credentials type$': {
+        gettext: gettext$1('Protocol "{{protocol}}" does not support "{{credentialsType}}" credentials type.'),
         placeholders: {
-            appName: '$1',
-            version: '$2',
-            activeVersionId: '$3'
+            protocol: '$1',
+            credentialsType: '$2'
         }
     },
-    '^Hosted application "(.+?)" activated: version \\[(.+?)\\] added, activeVersionId \\[(.+?)\\] added$': {
-        gettext: gettext$1('Hosted application "{{appName}}" activated: version "{{version}}" added, activeVersionId "{{activeVersionId}}" added'),
-        placeholders: {
-            appName: '$1',
-            version: '$2',
-            activeVersionId: '$3'
-        }
+    '^Private key cipher does not match$': {
+        gettext: gettext$1('Private key cipher does not match')
+    }
+};
+
+const PATTERN_MESSAGES_BULKREGISTRATION = {
+    '^A bulk registration CSV template showing all mandatory fields$': {
+        gettext: gettext$1('A bulk registration CSV template showing all mandatory fields')
     },
-    '^Hosted application "(.+?)" activated: activeVersionId \\[\'(.+?)\'\\] added$': {
-        gettext: gettext$1('Hosted application "{{appName}}" activated: activeVersionId "{{activeVersionId}}" added'),
-        placeholders: {
-            appName: '$1',
-            activeVersionId: '$2'
-        }
+    '^A bulk registration CSV template for NO_SEC devices with all optional fields$': {
+        gettext: gettext$1('A bulk registration CSV template for NO_SEC devices with all optional fields')
     },
-    '^External application "(.+?)" activated: version \\[(.+?)\\] added, activeVersionId \\[(.+?)\\] added$': {
-        gettext: gettext$1('External application "{{appName}}" activated: version "{{version}}" added, activeVersionId "{{activeVersionId}}" added'),
-        placeholders: {
-            appName: '$1',
-            version: '$2',
-            activeVersionId: '$3'
-        }
+    '^A general bulk registration CSV template showing all possible fields$': {
+        gettext: gettext$1('A general bulk registration CSV template showing all possible fields')
     },
-    '^(.+?) user logged in to the platform with OAuth internal login mode$': {
-        gettext: gettext$1('"{{name}}" user logged in to the platform with OAI-Secure login mode'),
-        placeholders: {
-            name: '$1'
-        }
+    '^A bulk registration CSV template for PSK devices with all optional fields$': {
+        gettext: gettext$1('A bulk registration CSV template for PSK devices with all optional fields')
     },
-    "^Scaling application '(.+?)' from (.+?) to (.+?) instances$": {
-        gettext: gettext$1('Scaling application "{{appName}}" from {{from}} to {{to}} instances'),
+    '^CSV file contained empty dataset$': {
+        gettext: gettext$1('No entries found in uploaded CSV file.')
+    }
+};
+
+const PATTERN_MESSAGE_DATABROKER = {
+    '^Cycle detected for route (.+?)!$': {
+        gettext: gettext$1('Cycle detected for route {{route}}.'),
         placeholders: {
-            appName: '$1',
-            from: '$2',
-            to: '$3'
+            route: '$1'
         }
     },
-    '^User logout$': {
-        gettext: gettext$1('User logout')
-    },
-    '^(.+?) user logout$': {
-        gettext: gettext$1('"{{name}}" user logout'),
-        placeholders: {
-            name: '$1'
-        }
+    '^Data broker processing is currently overloaded and may stop forwarding your data\\. Please contact support\\.$': {
+        gettext: gettext$1('Data broker processing is currently overloaded and may stop forwarding your data. Please contact support.')
     },
-    '^Authentication with id: (.+?) configuration updated.$': {
-        gettext: gettext$1('Authentication configuration with ID "{{id}}" updated.'),
-        placeholders: {
-            id: '$1'
-        }
+    '^Data broker processing is not able to connect do destination tenant, thus data forwarding is not working\\. Please contact support\\.$': {
+        gettext: gettext$1('Data broker processing is not able to connect to destination tenant, thus data forwarding is not working. Please contact support.')
     },
-    '^Authentication configuration with id: (.+?) added.$': {
-        gettext: gettext$1('Authentication configuration with ID "{{id}}" added.'),
+    '^Duplicated connector for instanceUrl (.+?)!$': {
+        gettext: gettext$1('Target URL {{targetUrl}} already used by another connector.'),
         placeholders: {
-            id: '$1'
+            targetUrl: '$1'
         }
     },
-    '^Configuration type: basic.$': {
-        gettext: gettext$1('Configuration type: Basic Auth.')
-    },
-    '^Configuration type: oauth2_internal.$': {
-        gettext: gettext$1('Configuration type: OAI-Secure.')
-    },
-    '^Configuration type: oauth2.$': {
-        gettext: gettext$1('Configuration type: Single sign-on.')
-    },
-    '^Device put into maintenance state$': {
-        gettext: gettext$1('Device put into maintenance state')
-    },
-    '^device with id: (.+?) is put into maintenance state$': {
-        gettext: gettext$1('Device with ID "{{deviceId}}" is put into maintenance state'),
+    '^Duplicated connector for name (.+?)!$': {
+        gettext: gettext$1('Connector name "{{name}}" already used by another connector.'),
         placeholders: {
-            deviceId: '$1'
+            name: '$1'
         }
     },
     '^Connector updated$': {
@@ -2430,131 +2638,224 @@ const MESSAGES_CORE_I18N = {
             oldConfig: '$2',
             newConfig: '$3'
         }
+    }
+};
+
+const PATTERN_MESSAGES_SMARTREST = {
+    "^Message with ID (.+?) doesn't exist in smart rest template (.+?)$": {
+        gettext: gettext$1('Message with ID "{{messageId}}" doesn\'t exist in SmartREST template with ID "{{templateId}}"'),
+        placeholders: {
+            messageId: '$1',
+            templateId: '$2'
+        }
     },
-    '^Can read all data of the asset and manage all inventory data, but cannot perform operations. Can also acknowledge and clear alarms. Can create and updates dashboards.$': {
-        gettext: gettext$1('Can read all data of the asset and manage all inventory data, but cannot perform operations. Can also acknowledge and clear alarms. Can create and updates dashboards.')
-    },
-    '^Operations: All$': {
-        gettext: gettext$1('Operations: All')
-    },
-    '^Can remotely manage the assets by sending operations to the device. This includes for example remote configuration, software update, etc.$': {
-        gettext: gettext$1('Can remotely manage the assets by sending operations to the device. This includes remote configuration, software update and more.')
+    "^Smart rest template (.+?) doesn't exist$": {
+        gettext: gettext$1('SmartREST template with ID "{{templateId}}" doesn\'t exist.'),
+        placeholders: {
+            templateId: '$1'
+        }
+    }
+};
+
+const PATTERN_MESSAGES_OPTIONS = {
+    '^Option created$': {
+        gettext: gettext$1('Option created.')
     },
-    '^Operations: Restart Device$': {
-        gettext: gettext$1('Operations: Restart Device')
+    '^Option "(.+?)" created$': {
+        gettext: gettext$1('Option "{{option}}" created.'),
+        placeholders: {
+            option: '$1'
+        }
     },
-    '^Can restart devices.$': {
-        gettext: gettext$1('Can restart devices.')
+    '^Option deleted$': {
+        gettext: gettext$1('Option deleted.')
     },
-    '^Reader$': {
-        gettext: gettext$1('Reader')
+    '^Option "(.+?)" deleted$': {
+        gettext: gettext$1('Option "{{option}}" deleted.'),
+        placeholders: {
+            option: '$1'
+        }
     },
-    '^Can read all data of the asset.$': {
-        gettext: gettext$1('Can read all data of the asset.')
+    '^unable to find option with given key (.+?) : Could not find entity Option by ID (.+?)!$': {
+        gettext: gettext$1('Unable to get tenant option: "{{option}}".'),
+        placeholders: {
+            option: '$2'
+        }
     },
-    // Default global roles' names and descriptions:
-    // Description for 'admins' role
-    '^Enables administrative permissions. The first user created for the tenant receives this role$': {
-        gettext: gettext$1('Enables administrative permissions. The first user created for the tenant receives this role.')
+    '^unable to find option with given key (.+?) : There is no system property for key (.+?)$': {
+        gettext: gettext$1('Unable to get system option: "{{option}}".'),
+        placeholders: {
+            option: '$2'
+        }
+    }
+};
+
+const PATTERN_MESSAGES_DATAHUB = {
+    '^DATAHUB_ADMINISTRATOR$': {
+        gettext: gettext$1('DataHub Administrator')
     },
-    // Description for 'business' role
-    '^Can access all devices and their data but has no management permission in the tenant$': {
-        gettext: gettext$1('Can access all devices and their data but has no management permission in the tenant.')
+    '^Can conduct administrative tasks and manage offloading pipelines$': {
+        gettext: gettext$1('Can conduct administrative tasks and manage offloading pipelines.')
     },
-    '^CEP Manager$': {
-        gettext: gettext$1('CEP Manager')
+    '^DATAHUB_MANAGER$': {
+        gettext: gettext$1('DataHub Manager')
     },
-    '^Has full access to all deployed CEP modules and SmartRules$': {
-        gettext: gettext$1('Has full access to all deployed CEP modules and smart rules.')
+    '^Can manage offloading pipelines$': {
+        gettext: gettext$1('Can manage offloading pipelines.')
     },
-    '^Devicemanagement User$': {
-        gettext: gettext$1('Device Management User')
+    '^DATAHUB_READER$': {
+        gettext: gettext$1('DataHub Reader')
     },
-    '^Gives access to bulk operations and device management application. This does not include access to any device data.$': {
-        gettext: gettext$1('Gives access to bulk operations and Device Management application. This does not include access to any device data.')
+    '^Can execute SQL queries against the data in the data lake$': {
+        gettext: gettext$1('Can execute SQL queries against the data in the data lake.')
+    }
+};
+
+const PATTERN_MESSAGES_LPWAN = {
+    '^Authentication to the Loriot platform failed with status code (.+?). Check if the credentials are correct or if Session ID is expired.$': {
+        gettext: gettext$1('Authentication to the LORIOT platform failed with status code {{ statusCode }}. Check if the credentials are correct or if session ID is expired.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    // Description for 'devices' role
-    '^A role marker for device users. After registration, a device automatically has this role$': {
-        gettext: gettext$1('A role marker for device users. After registration, a device automatically has this role.')
+    '^Authentication to the Loriot platform failed with status code (.+?). Check if the base URL, credentials are correct and the application with the given ID exists.$': {
+        gettext: gettext$1('Authentication to the LORIOT platform failed with status code {{ statusCode }}. Check if the base URL, credentials are correct and the application with the given ID exists.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    '^Global Manager$': {
-        gettext: gettext$1('Global Manager')
+    '^Application output creation failed due to status code (.+?)$': {
+        gettext: gettext$1('Application output creation failed due to status code {{ statusCode }}.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    '^Can read and write all data from all devices$': {
-        gettext: gettext$1('Can read and write all data from all devices.')
+    '^Application output update failed due to status code (.+?)$': {
+        gettext: gettext$1('Application output update failed due to status code {{ statusCode }}.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    '^Global Reader$': {
-        gettext: gettext$1('Global Reader')
+    '^Error creating the device due to status code (.+?). Check if the application Id, devEui, appEui and appKey are in the correct format or the device limit has been exceeded or has been registered with another account in the Loriot provider$': {
+        gettext: gettext$1('Error creating the device due to status code {{ statusCode }}. Check if the application name, Device EUI, Application EUI and Application key are in the correct format or the device limit has been exceeded or has been registered with another account in the LORIOT provider.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    '^Can read all data from all devices$': {
-        gettext: gettext$1('Can read all data from all devices.')
+    '^Error retrieving application with given ID: (.+?) with status code 400. Check if the applicationId provided is in the correct format$': {
+        gettext: gettext$1('Error retrieving application with given ID: {{ applicationId }} with status code 400. Check if the selected application is correct'),
+        placeholders: {
+            applicationId: '$1'
+        }
     },
-    '^Cockpit User$': {
-        gettext: gettext$1('Cockpit User')
+    "^LNS connection name can't be null or blank.$": {
+        gettext: gettext$1("LNS connection name can't be empty.")
     },
-    '^User to work in Cockpit application. This does not include the access to any device data.$': {
-        gettext: gettext$1('User to work in Cockpit application. This does not include the access to any device data.')
+    '^Unexpected error occurred while accessing the cached LNS connections map with key (.+?)$': {
+        gettext: gettext$1('Unexpected error occurred while accessing the cached LNS connections map with key "{{ connectionName }}".'),
+        placeholders: {
+            connectionName: '$1'
+        }
     },
-    '^Global User Manager$': {
-        gettext: gettext$1('Global User Manager')
+    "^LNS connection named (.+?) doesn't exist.$": {
+        gettext: gettext$1('LNS connection named "{{ connectionName }}" doesn\'t exist.'),
+        placeholders: {
+            connectionName: '$1'
+        }
     },
-    '^Can access and modify the full user hierarchy$': {
-        gettext: gettext$1('Can access and edit the full user hierarchy.')
+    '^LNS connection named (.+?) already exists.$': {
+        gettext: gettext$1('LNS connection named "{{ connectionName }}" already exists.'),
+        placeholders: {
+            connectionName: '$1'
+        }
     },
-    // '^readers$': {
-    //   gettext: gettext('Reader')
-    // },
-    '^Can read all data \\(including users, in contrast to "Global Reader"\\)$': {
-        gettext: gettext$1('Can read all data (including users, in contrast to "Global Reader").')
+    "^New LNS connection can't be null.$": {
+        gettext: gettext$1("New LNS connection can't be empty.")
     },
-    '^Shared User Manager$': {
-        gettext: gettext$1('Shared User Manager')
+    "^LNS connection to update can't be null.$": {
+        gettext: gettext$1("LNS connection to update can't be empty.")
     },
-    '^Can create new user as his own sub-users and manage this$': {
-        gettext: gettext$1('Can create new own sub-users and manage them.')
+    "^The name of the LNS connection to update can't be null.$": {
+        gettext: gettext$1("The name of the LNS connection to update can't be empty.")
     },
-    '^Tenant Manager$': {
-        gettext: gettext$1('Tenant Manager')
+    '^Can not delete the LNS connection with name "(.+?)" as it\'s associated with (.+?) device(s).$': {
+        gettext: gettext$1('Could not delete the LNS connection with the name "{{ connectionName }}" as it\'s associated with {{ numberOfDevices }} device(s).'),
+        placeholders: {
+            connectionName: '$1',
+            numberOfDevices: '$2'
+        }
     },
-    '^Can manage tenant wide configurations like applications, tenant options and retention rules$': {
-        gettext: gettext$1('Can manage tenant wide configurations like applications, tenant options and retention rules.')
+    '^Can not update the LNS connection with name "(.+?)" as it\'s associated with (.+?) device(s).$': {
+        gettext: gettext$1('Could not update the LNS connection with the name "{{ connectionName }}" as it\'s associated with {{ numberOfDevices }} device(s).'),
+        placeholders: {
+            connectionName: '$1',
+            numberOfDevices: '$2'
+        }
     },
-    // DataHub global roles' names and descriptions:
-    '^DATAHUB_ADMINISTRATOR$': {
-        gettext: gettext$1('DataHub Administrator')
+    '^Authentication to the Actility platform failed with status code (.+?). Check if the credentials are correct.$': {
+        gettext: gettext$1('Authentication to the Actility platform failed with status code {{ statusCode }}. Check if the credentials are correct.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    '^Can conduct administrative tasks and manage offloading pipelines$': {
-        gettext: gettext$1('Can conduct administrative tasks and manage offloading pipelines.')
+    '^Authentication to the Actility platform failed with status code (.+?). Check if the profile Id is correct.$': {
+        gettext: gettext$1('Authentication to the Actility platform failed with status code {{ statusCode }}. Check if the Profile ID is correct.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    '^DATAHUB_MANAGER$': {
-        gettext: gettext$1('DataHub Manager')
+    '^Authentication to the Actility platform failed. Check if the base URL (.+?) is correct.$': {
+        gettext: gettext$1('Authentication to the Actility platform failed. Check if the base URL {{ baseUrl }} is correct.'),
+        placeholders: {
+            baseUrl: '$1'
+        }
     },
-    '^Can manage offloading pipelines$': {
-        gettext: gettext$1('Can manage offloading pipelines.')
+    '^Authentication to the Sigfox platform failed. Check if the base URL (.+) is correct.$': {
+        gettext: gettext$1('Authentication to the Sigfox platform failed. Check if the base URL {{ baseUrl }} is correct.'),
+        placeholders: {
+            baseUrl: '$1'
+        }
     },
-    '^DATAHUB_READER$': {
-        gettext: gettext$1('DataHub Reader')
+    '^Authentication to the Sigfox platform failed. Check if the Parent group Id and/or the credentials are correct.$': {
+        gettext: gettext$1('Authentication to the Sigfox platform failed. Check if the Parent group ID and/or the credentials are correct.')
     },
-    '^Can execute SQL queries against the data in the data lake$': {
-        gettext: gettext$1('Can execute SQL queries against the data in the data lake.')
+    '^Authentication to the Loriot platform failed with status code (.+?). Session Id might have expired.$': {
+        gettext: gettext$1('Authentication to the LORIOT platform failed with status code {{ statusCode }}. Session ID might have expired.'),
+        placeholders: {
+            statusCode: '$1'
+        }
     },
-    '^User "(.+?)" password was updated by user "(.+?)"$': {
-        gettext: gettext$1('"{{ targetUserName }}" user\'s password was updated by "{{ userName }}" user'),
+    '^Authentication to the Actility platform failed with status code (.+?). Check if the base URL and/or the credentials are correct.$': {
+        gettext: gettext$1('Authentication to the Actility platform failed with status code {{ statusCode }}. Check if the base URL and/or the credentials are correct.'),
         placeholders: {
-            targetUserName: '$1',
-            userName: '$2'
+            statusCode: '$1'
         }
     },
-    '^User password update$': {
-        gettext: gettext$1('User password update')
+    '^Error on deleting group: (.+?) : Role (.+?) is used in SSO dynamic access mapping$': {
+        gettext: gettext$1('Role "{{ roleName }}" cannot be deleted because it is assigned to a dynamic access mapping in Single sign-on configuration.'),
+        placeholders: {
+            roleName: '$1'
+        }
     },
-    '^User "(.+?)" password updated$': {
-        gettext: gettext$1('"{{ userName }}" user changed own password'),
+    '^The series param (.+?) has wrong format. Valid format is (.+?)$': {
+        gettext: gettext$1('The data cannot be retrieved because the fragment and series combination <code>{{ seriesParam }}</code> has an invalid format. Please verify your fragment and series selections in the data point configuration. The correct format should be <code>{{ validFormat }}</code>.'),
         placeholders: {
-            userName: '$1'
+            seriesParam: '$1',
+            validFormat: '$2'
         }
     },
-    // LWM2M strings (move to submodule when it's migrated from ng1)
+    '^Http status code: 404\n{error="options/Not Found",message="Unable to find option by given key: sigfox-agent/provider.token",info="https://www.cumulocity.com/guides/reference-guide/#error_reporting",details="null"}$': {
+        gettext: gettext$1('Unable to find option by given key: sigfox-agent/provider.token')
+    },
+    '^Creating device on LoRa platform failed$': {
+        gettext: gettext$1('Could not create the device in the LoRa platform.')
+    },
+    '^No LoRa provider settings are found. Please configure the connectivity settings.$': {
+        gettext: gettext$1('No LoRa provider settings are found. Please configure the connectivity settings.')
+    }
+};
+
+const PATTERN_MESSAGES_LWM2M = {
     '^LWM2M device type$': {
         gettext: gettext$1('LWM2M device type')
     },
@@ -2755,237 +3056,63 @@ const MESSAGES_CORE_I18N = {
     },
     '^NO_SEC template$': {
         gettext: gettext$1('NO_SEC template')
-    },
-    // LPWAN device registration and connectivity strings
-    '^Authentication to the Loriot platform failed with status code (.+?). Check if the credentials are correct or if Session ID is expired.$': {
-        gettext: gettext$1('Authentication to the LORIOT platform failed with status code {{ statusCode }}. Check if the credentials are correct or if session ID is expired.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Authentication to the Loriot platform failed with status code (.+?). Check if the base URL, credentials are correct and the application with the given ID exists.$': {
-        gettext: gettext$1('Authentication to the LORIOT platform failed with status code {{ statusCode }}. Check if the base URL, credentials are correct and the application with the given ID exists.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Application output creation failed due to status code (.+?)$': {
-        gettext: gettext$1('Application output creation failed due to status code {{ statusCode }}.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Application output update failed due to status code (.+?)$': {
-        gettext: gettext$1('Application output update failed due to status code {{ statusCode }}.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Error creating the device due to status code (.+?). Check if the application Id, devEui, appEui and appKey are in the correct format or the device limit has been exceeded or has been registered with another account in the Loriot provider$': {
-        gettext: gettext$1('Error creating the device due to status code {{ statusCode }}. Check if the application name, Device EUI, Application EUI and Application key are in the correct format or the device limit has been exceeded or has been registered with another account in the LORIOT provider.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Error retrieving application with given ID: (.+?) with status code 400. Check if the applicationId provided is in the correct format$': {
-        gettext: gettext$1('Error retrieving application with given ID: {{ applicationId }} with status code 400. Check if the selected application is correct'),
-        placeholders: {
-            applicationId: '$1'
-        }
-    },
-    "^LNS connection name can't be null or blank.$": {
-        gettext: gettext$1("LNS connection name can't be empty.")
-    },
-    '^Unexpected error occurred while accessing the cached LNS connections map with key (.+?)$': {
-        gettext: gettext$1('Unexpected error occurred while accessing the cached LNS connections map with key "{{ connectionName }}".'),
-        placeholders: {
-            connectionName: '$1'
-        }
-    },
-    "^LNS connection named (.+?) doesn't exist.$": {
-        gettext: gettext$1('LNS connection named "{{ connectionName }}" doesn\'t exist.'),
-        placeholders: {
-            connectionName: '$1'
-        }
-    },
-    '^LNS connection named (.+?) already exists.$': {
-        gettext: gettext$1('LNS connection named "{{ connectionName }}" already exists.'),
-        placeholders: {
-            connectionName: '$1'
-        }
-    },
-    "^New LNS connection can't be null.$": {
-        gettext: gettext$1("New LNS connection can't be empty.")
-    },
-    "^LNS connection to update can't be null.$": {
-        gettext: gettext$1("LNS connection to update can't be empty.")
-    },
-    "^The name of the LNS connection to update can't be null.$": {
-        gettext: gettext$1("The name of the LNS connection to update can't be empty.")
-    },
-    '^Can not delete the LNS connection with name "(.+?)" as it\'s associated with (.+?) device(s).$': {
-        gettext: gettext$1('Could not delete the LNS connection with the name "{{ connectionName }}" as it\'s associated with {{ numberOfDevices }} device(s).'),
-        placeholders: {
-            connectionName: '$1',
-            numberOfDevices: '$2'
-        }
-    },
-    '^Can not update the LNS connection with name "(.+?)" as it\'s associated with (.+?) device(s).$': {
-        gettext: gettext$1('Could not update the LNS connection with the name "{{ connectionName }}" as it\'s associated with {{ numberOfDevices }} device(s).'),
-        placeholders: {
-            connectionName: '$1',
-            numberOfDevices: '$2'
-        }
-    },
-    '^Authentication to the Actility platform failed with status code (.+?). Check if the credentials are correct.$': {
-        gettext: gettext$1('Authentication to the Actility platform failed with status code {{ statusCode }}. Check if the credentials are correct.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Authentication to the Actility platform failed with status code (.+?). Check if the profile Id is correct.$': {
-        gettext: gettext$1('Authentication to the Actility platform failed with status code {{ statusCode }}. Check if the Profile ID is correct.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Authentication to the Actility platform failed. Check if the base URL (.+?) is correct.$': {
-        gettext: gettext$1('Authentication to the Actility platform failed. Check if the base URL {{ baseUrl }} is correct.'),
-        placeholders: {
-            baseUrl: '$1'
-        }
-    },
-    '^Authentication to the Sigfox platform failed. Check if the base URL (.+) is correct.$': {
-        gettext: gettext$1('Authentication to the Sigfox platform failed. Check if the base URL {{ baseUrl }} is correct.'),
-        placeholders: {
-            baseUrl: '$1'
-        }
-    },
-    '^Authentication to the Sigfox platform failed. Check if the Parent group Id and/or the credentials are correct.$': {
-        gettext: gettext$1('Authentication to the Sigfox platform failed. Check if the Parent group ID and/or the credentials are correct.')
-    },
-    '^Authentication to the Loriot platform failed with status code (.+?). Session Id might have expired.$': {
-        gettext: gettext$1('Authentication to the LORIOT platform failed with status code {{ statusCode }}. Session ID might have expired.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Authentication to the Actility platform failed with status code (.+?). Check if the base URL and/or the credentials are correct.$': {
-        gettext: gettext$1('Authentication to the Actility platform failed with status code {{ statusCode }}. Check if the base URL and/or the credentials are correct.'),
-        placeholders: {
-            statusCode: '$1'
-        }
-    },
-    '^Error on deleting group: (.+?) : Role (.+?) is used in SSO dynamic access mapping$': {
-        gettext: gettext$1('Role "{{ roleName }}" cannot be deleted because it is assigned to a dynamic access mapping in Single sign-on configuration.'),
-        placeholders: {
-            roleName: '$1'
-        }
-    },
-    '^The series param (.+?) has wrong format. Valid format is (.+?)$': {
-        gettext: gettext$1('The data cannot be retrieved because the fragment and series combination <code>{{ seriesParam }}</code> has an invalid format. Please verify your fragment and series selections in the data point configuration. The correct format should be <code>{{ validFormat }}</code>.'),
-        placeholders: {
-            seriesParam: '$1',
-            validFormat: '$2'
-        }
-    },
-    // Trusted certificate audit records
-    "^Trusted certificate updated on '(.+?)'\\.$": {
-        gettext: gettext$1('Trusted certificate updated on tenant "{{ tenantId }}"'),
-        placeholders: {
-            tenantId: '$1'
-        }
-    },
-    "^Trusted certificate deleted from '(.+?)'\\.$": {
-        gettext: gettext$1('Trusted certificate deleted from tenant "{{ tenantId }}"'),
-        placeholders: {
-            tenantId: '$1'
-        }
-    },
-    // Tenant Certificate Authority audit records
-    "^Tenant certificate authority\\(CA\\) created on '(.+?)'.*$": {
-        gettext: gettext$1('Tenant certificate authority (CA) created for tenant "{{ tenantId }}"'),
-        placeholders: {
-            tenantId: '$1'
-        }
-    },
-    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n$": {
-        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".'),
-        placeholders: {
-            fingerprint: '$1',
-            subjectName: '$2'
-        }
-    },
-    "^Tenant certificate authority\\(CA\\) was renewed for Tenant: '(.+?)'.*$": {
-        gettext: gettext$1('Tenant certificate authority (CA) was renewed for tenant "{{ tenantId }}"'),
-        placeholders: {
-            tenantId: '$1'
-        }
-    },
-    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n\\s*NotAfter='(.+?)'.*$": {
-        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".\nExpiration date: {{ expirationDate | absoluteDate }}.'),
-        placeholders: {
-            fingerprint: '$1',
-            subjectName: '$2',
-            expirationDate: '$3'
-        }
-    },
-    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n\\s*Status='(.+?)'.*$": {
-        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".\nStatus: "{{ status }}".'),
-        placeholders: {
-            fingerprint: '$1',
-            subjectName: '$2',
-            status: '$3'
-        }
-    },
-    "^Tenant certificate authority\\(CA\\) renewal for Tenant: '(.+?)' failed.*$": {
-        gettext: gettext$1('Tenant certificate authority (CA) renewal for tenant "{{ tenantId }}" failed'),
-        placeholders: {
-            tenantId: '$1'
-        }
-    },
-    '^The CA certificate has not been refreshed\\.\\s+It may either still have sufficient remaining validity.*$': {
-        gettext: gettext$1('The CA certificate has not been renewed; however, it may still have sufficient validity remaining.')
-    },
-    "^Provisioned certificate stored in user object: '(.+?)'.*$": {
-        gettext: gettext$1('Provisioned certificate stored in user object: "{{ userName }}"'),
-        placeholders: {
-            userName: '$1'
-        }
-    },
-    "^Certificate serial number: '(.+?)'\\.\\n\\s*NotAfter='(.+?)'.*$": {
-        gettext: gettext$1('Certificate serial number: "{{ serialNumber }}".\nExpiration date: {{ expirationDate | absoluteDate }}.'),
-        placeholders: {
-            serialNumber: '$1',
-            expirationDate: '$2'
-        }
-    },
-    "^Provisioned certificates removed from user: '(.+?)'.*$": {
-        gettext: gettext$1('Provisioned certificates removed from user object: "{{ userName }}"'),
-        placeholders: {
-            userName: '$1'
-        }
-    },
-    '^Revoked serials: (.+?)$': {
-        gettext: gettext$1('Revoked serials: {{ revokedSerials }}'),
-        placeholders: {
-            revokedSerials: '$1'
-        }
-    },
-    "^Certificate serial number hex: '(.+?)'.*$": {
-        gettext: gettext$1('Certificate serial number: "{{ serialNumber }}"'),
-        placeholders: {
-            serialNumber: '$1'
-        }
-    },
-    '^Tenant certificate authority\\(CA\\) signed certificate for device: (.+?)\\.$': {
-        gettext: gettext$1('Tenant certificate authority (CA) signed certificate for device: "{{ deviceId }}".'),
-        placeholders: {
-            deviceId: '$1'
-        }
     }
 };
 
+const MESSAGES_CORE_I18N = {
+    ...PATTERN_MESSAGES_ALARMS,
+    ...PATTERN_MESSAGES_APPLICATIONS,
+    ...PATTERN_MESSAGES_AUTHENTICATION,
+    ...PATTERN_MESSAGES_DATAHUB,
+    ...PATTERN_MESSAGES_BULKOPERATIONS,
+    ...PATTERN_MESSAGES_BULKREGISTRATION,
+    ...PATTERN_MESSAGES_CEP,
+    ...PATTERN_MESSAGES_CERTIFICATES,
+    ...PATTERN_MESSAGES_DEVICES,
+    ...PATTERN_MESSAGES_FIRMWARE,
+    ...PATTERN_MESSAGES_MICROSERVICES,
+    ...PATTERN_MESSAGES_OPERATIONS,
+    ...PATTERN_MESSAGES_ROLES,
+    ...PATTERN_MESSAGES_TENANTS,
+    ...PATTERN_MESSAGES_USERS,
+    ...PATTERN_MESSAGES_LPWAN,
+    ...PATTERN_MESSAGES_LWM2M,
+    ...PATTERN_MESSAGE_REMOTE_ACCESS,
+    ...PATTERN_MESSAGE_DATABROKER,
+    ...PATTERN_MESSAGES_SIMULATION,
+    ...PATTERN_MESSAGES_SMARTREST,
+    ...PATTERN_MESSAGES_OPTIONS,
+    ...PATTERN_MESSAGES_MISC
+};
+
+/* tslint:disable:max-line-length */
+/**
+ * Pattern-based i18n messages for Cumulocity IoT.
+ *
+ * This file re-exports all pattern messages from the patterns directory.
+ * Each feature category has its own file for better maintainability:
+ *
+ * - alarms: Alarm-related messages
+ * - applications: Application management messages
+ * - authentication: Authentication and login messages
+ * - bulk-operations: Bulk operation messages
+ * - cep: CEP module messages
+ * - certificates: Certificate and PKI messages
+ * - connectors: Data broker and connector messages
+ * - csv: CSV file messages
+ * - devices: Device, LWM2M, LoRa, Sigfox, and device protocol messages
+ * - firmware: Firmware and software messages
+ * - microservices: Microservice, container, and Kubernetes messages
+ * - operations: Operation and command messages
+ * - roles: Role and permission messages
+ * - tenants: Tenant and domain messages
+ * - users: User management messages
+ * - simulation: Simulation messages
+ * - loriot: LORIOT provider messages
+ * - remote-access: Remote access messages
+ * - misc: Other miscellaneous messages
+ */
+
 /**
  * Messages required to translate texts of events sent by the datahub microservice.
  */
@@ -8843,6 +8970,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+/**
+ * Directive to manage focus trapping and keyboard navigation for ngx-bootstrap dropdowns with `container="body"`.
+ *
+ * ## Problem
+ * When a dropdown is appended to the body using `container="body"`, the standard `cdkTrapFocus`
+ * directive doesn't work because the dropdown content is outside the normal DOM hierarchy where
+ * the directive is applied.
+ *
+ * ## Solution
+ * This directive:
+ * - Detects when a dropdown with `container="body"` opens
+ * - Programmatically creates a CDK focus trap on the body-appended dropdown menu element
+ * - Traps Tab/Shift+Tab navigation within the dropdown menu
+ * - Automatically closes dropdown and restores focus to toggle button when user selects an item with Enter/Space
+ * - Prevents ESC key from propagating to parent elements (e.g., modals, drawers) and restores focus on close
+ * - Cleans up all listeners when the dropdown closes
+ *
+ * ## Usage
+ * Simply apply this directive to the same element that has the `dropdown` directive:
+ *
+ * @example
+ * ```html
+ * <div dropdown container="body" c8yDropdownFocusTrap #myDropdown="bs-dropdown">
+ *   <button dropdownToggle>Select option</button>
+ *   <div *dropdownMenu class="dropdown-menu">
+ *     <c8y-list-group role="list">
+ *       <c8y-li tabindex="0" role="listitem">Option 1</c8y-li>
+ *       <c8y-li tabindex="0" role="listitem">Option 2</c8y-li>
+ *     </c8y-list-group>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * ## Features
+ * - **Focus trapping**: Tab key navigation cycles through dropdown items
+ * - **Automatic focus management**: Enter/Space automatically closes dropdown and returns focus to toggle button
+ * - **ESC key isolation**: Pressing ESC closes only the dropdown, not parent modals/drawers, and restores focus
+ * - **Form-friendly**: Skips automatic close for inputs, textareas, and selects within the dropdown
+ * - **Automatic cleanup**: All listeners and focus trap removed when dropdown closes
+ * - **Zero configuration**: Just add the directive, no manual focus management needed
+ *
+ * @see {@link https://material.angular.io/cdk/a11y/overview#focustrap|CDK FocusTrap}
+ */
+class DropdownFocusTrapDirective {
+    constructor() {
+        this.dropdown = inject(BsDropdownDirective);
+        this.focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+        this.document = inject(DOCUMENT$1);
+        this.elementRef = inject(ElementRef);
+        this.shouldRestoreFocus = false;
+        this.handleSelection = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            const target = event.target;
+            if (!this.dropdownMenuElement?.contains(target) || target.matches('input, textarea, select')) {
+                return;
+            }
+            this.shouldRestoreFocus = true;
+            setTimeout(() => this.dropdown.hide(), 50);
+        };
+        this.handleEscape = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.shouldRestoreFocus = true;
+            this.dropdown.hide();
+        };
+        this.dropdown.onShown.pipe(takeUntilDestroyed()).subscribe(() => this.setupFocusTrap());
+        this.dropdown.onHidden.pipe(takeUntilDestroyed()).subscribe(() => this.onDropdownHidden());
+    }
+    ngOnDestroy() {
+        this.cleanupFocusTrap();
+    }
+    /**
+     * Sets up the focus trap when the dropdown opens.
+     * @private
+     */
+    setupFocusTrap() {
+        // Use setTimeout to ensure the dropdown menu is rendered in the DOM
+        setTimeout(() => {
+            const dropdownMenus = this.document.querySelectorAll('.dropdown-menu.show');
+            if (!dropdownMenus || dropdownMenus.length === 0) {
+                return;
+            }
+            this.dropdownMenuElement = dropdownMenus[dropdownMenus.length - 1];
+            // Simplified toggle button query
+            this.toggleButton = this.elementRef.nativeElement.querySelector('.dropdown-toggle');
+            if (!this.dropdownMenuElement) {
+                return;
+            }
+            this.focusTrap = this.focusTrapFactory.create(this.dropdownMenuElement);
+            this.focusTrap.enabled = true;
+            this.document.addEventListener('keydown', this.handleSelection, true);
+            this.document.addEventListener('keydown', this.handleEscape, true);
+        }, 0);
+    }
+    onDropdownHidden() {
+        const buttonToFocus = this.toggleButton;
+        const shouldRestore = this.shouldRestoreFocus;
+        this.cleanupFocusTrap();
+        if (shouldRestore && buttonToFocus) {
+            setTimeout(() => buttonToFocus.focus(), 0);
+        }
+    }
+    /**
+     * Cleans up the focus trap when the dropdown closes.
+     * @private
+     */
+    cleanupFocusTrap() {
+        this.document.removeEventListener('keydown', this.handleSelection, true);
+        this.document.removeEventListener('keydown', this.handleEscape, true);
+        this.shouldRestoreFocus = false;
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+            this.focusTrap = undefined;
+        }
+        this.dropdownMenuElement = undefined;
+        this.toggleButton = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFocusTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: DropdownFocusTrapDirective, isStandalone: true, selector: "[c8yDropdownFocusTrap]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFocusTrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c8yDropdownFocusTrap]'
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Pipe that strips HTML tags from a string.
  *
@@ -10654,7 +10913,8 @@ const PRODUCT_EXPERIENCE_INTERVAL_BASED_RELOAD = {
 };
 const WIDGET_TYPE_VALUES = {
     ALARMS: 'alarms',
-    DATA_POINTS_TABLE: 'dataPointsTable'
+    DATA_POINTS_TABLE: 'dataPointsTable',
+    ASSET_TABLE: 'assetTable'
 };
 /**
  * Abstract class representing an interval reload functionality.
@@ -16427,7 +16687,7 @@ class ListItemComponent {
         this.pulse$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ListItemComponent, isStandalone: true, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], ngImport: i0, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n      <div\n        class=\"c8y-list__item__footer\"\n        *ngIf=\"showFooter\"\n      >\n        <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n      </div>\n    </div>\n\n    <div\n      class=\"c8y-list__item__actions\"\n      *ngIf=\"(showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions\"\n    >\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        [attr.aria-expanded]=\"!collapsed\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        *ngIf=\"showCollapse && itemCollapse.collapseWay === 'button'\"\n        data-cy=\"c8y-li--collapse-btn\"\n      >\n        <i [c8yIcon]=\"'chevron-down'\"></i>\n      </button>\n      <div\n        class=\"dropdown\"\n        #liDropdownActions=\"bs-dropdown\"\n        [cdkTrapFocus]=\"liDropdownActions.isOpen\"\n        dropdown\n        c8yDropdownDirection\n        #dropDirection=\"bs-dropdown\"\n        [cdkTrapFocus]=\"dropDirection.isOpen\"\n        *ngIf=\"showActions\"\n      >\n        <button\n          class=\"dropdown-toggle c8y-dropdown\"\n          title=\"{{ 'Actions' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n          data-cy=\"c8y-li--actions-btn\"\n        >\n          <i [c8yIcon]=\"'ellipsis-v'\"></i>\n        </button>\n        <ul\n          class=\"dropdown-menu dropdown-menu-right\"\n          data-cy=\"list-item--dropdown-menu\"\n          *dropdownMenu\n        >\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n          <ng-container *ngFor=\"let action of actions\">\n            <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n\n      <ng-content\n        select=\"c8y-list-item-action, c8y-li-action\"\n        *ngIf=\"showActions\"\n      ></ng-content>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showCollapse\"\n    [collapse]=\"collapsed\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListItemComponent, isStandalone: true, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], ngImport: i0, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if ((showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapse && itemCollapse.collapseWay === 'button') {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
@@ -16444,7 +16704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         NgTemplateOutlet,
                         CollapseModule,
                         C8yTranslatePipe
-                    ], template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n      <div\n        class=\"c8y-list__item__footer\"\n        *ngIf=\"showFooter\"\n      >\n        <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n      </div>\n    </div>\n\n    <div\n      class=\"c8y-list__item__actions\"\n      *ngIf=\"(showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions\"\n    >\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        [attr.aria-expanded]=\"!collapsed\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        *ngIf=\"showCollapse && itemCollapse.collapseWay === 'button'\"\n        data-cy=\"c8y-li--collapse-btn\"\n      >\n        <i [c8yIcon]=\"'chevron-down'\"></i>\n      </button>\n      <div\n        class=\"dropdown\"\n        #liDropdownActions=\"bs-dropdown\"\n        [cdkTrapFocus]=\"liDropdownActions.isOpen\"\n        dropdown\n        c8yDropdownDirection\n        #dropDirection=\"bs-dropdown\"\n        [cdkTrapFocus]=\"dropDirection.isOpen\"\n        *ngIf=\"showActions\"\n      >\n        <button\n          class=\"dropdown-toggle c8y-dropdown\"\n          title=\"{{ 'Actions' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n          data-cy=\"c8y-li--actions-btn\"\n        >\n          <i [c8yIcon]=\"'ellipsis-v'\"></i>\n        </button>\n        <ul\n          class=\"dropdown-menu dropdown-menu-right\"\n          data-cy=\"list-item--dropdown-menu\"\n          *dropdownMenu\n        >\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n          <ng-container *ngFor=\"let action of actions\">\n            <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n\n      <ng-content\n        select=\"c8y-list-item-action, c8y-li-action\"\n        *ngIf=\"showActions\"\n      ></ng-content>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showCollapse\"\n    [collapse]=\"collapsed\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if ((showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapse && itemCollapse.collapseWay === 'button') {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -29080,6 +29340,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['window:resize']
             }] } });
 
+/**
+ * A dashboard child allows to position elements
+ * correctly on a grid.
+ *
+ * By setting `c8y-dashboard-child-actions` and
+ * `c8y-dashboard-child-title` on the element you can add
+ * custom actions or a custom title to the current child.
+ *
+ * By adding the correct branded classes, you can define
+ * the look and feel of the child. By default it is displayed
+ * as a card.
+ *
+ * ```html
+ *   <c8y-dashboard-child
+ *     #cpWidget3
+ *     [x]="0"
+ *     [y]="3"
+ *     [width]="4"
+ *     [height]="4"
+ *     [class]="'card-dashboard panel-content-transparent'"
+ *   >
+ *     <c8y-dashboard-child-title *ngIf="showTitle">
+ *       <span>Transparent!</span>
+ *     </c8y-dashboard-child-title>
+ *     <c8y-dashboard-child-action>
+ *       <a href="" (click)="showTitle = !showTitle; (false)">
+ *         <i [c8yIcon]="'heading'"></i> Hide/show title
+ *       </a>
+ *     </c8y-dashboard-child-action>
+ *     x: {{ cpWidget3.x }}<br />
+ *     y: {{ cpWidget3.y }}<br />
+ *     width: {{ cpWidget3.width }}<br />
+ *     height: {{ cpWidget3.height }}<br />
+ *   </c8y-dashboard-child>
+ * ```
+ */
+class DashboardChildComponent {
+    set templateActions(actions) {
+        this.addActions(actions, true);
+    }
+    /**
+     * If a dashboard is frozen, all children cannot be moved
+     * or resized.
+     * @deprecated use editMode.
+     */
+    set isFrozen(value) {
+        this.editMode = !value;
+    }
+    /**
+     * Updates the pixel width of the child (used for resizing)
+     */
+    set pxWidth(value) {
+        this._pxWidth = `${value}px`;
+    }
+    /**
+     * Updates the pixel height of the child (used for resizing)
+     */
+    set pxHeight(value) {
+        this._pxHeight = `${value}px`;
+    }
+    /**
+     * nasty workaround for that issue:
+     * https://github.com/angular/angular/issues/9343
+     */
+    get inlineStyle() {
+        return this.sanitizer.bypassSecurityTrustStyle(`
+    grid-column-start: ${this.x + 1};
+    grid-row-start: ${this.y + 1};
+    grid-column-end: span ${this.width};
+    grid-row-end: span ${this.height};
+    display: block;
+    margin: ${this.margin || 12}px;
+    order: ${this.getOrder()};
+    `);
+    }
+    constructor(dashboard, sanitizer, element) {
+        this.dashboard = dashboard;
+        this.sanitizer = sanitizer;
+        this.element = element;
+        this.actions = [];
+        this.isResize = false;
+        this.isDragging = false;
+        this.klasses = {};
+        this._additionalHeaderTemplates = new BehaviorSubject([]);
+        this.additionalHeaderTemplates$ = this._additionalHeaderTemplates.asObservable().pipe(map(templates => this.sortByPriority(templates)), shareReplay(1));
+        this._pxWidth = '100%';
+        this._pxHeight = '100%';
+        this.fullscreen = false;
+        this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY = 768;
+        /**
+         * The width of the component in grid-columns.
+         */
+        this.width = 1;
+        /**
+         * The height of the component in grid-rows.
+         */
+        this.height = 1;
+        /**
+         * The margin of the child in pixel.
+         */
+        this.margin = 12;
+        /**
+         * The child content is initialized, as soon it is scrolled into viewport
+         */
+        this.useIntersection = false;
+        this.canToggleFullscreen = true;
+        /**
+         * If a dashboard editing is disabled no widgets can be moved, edited, removed
+         * or added.
+         */
+        this.editMode = false;
+        /**
+         * An event fired if a child change is started (dragging or resizing)
+         */
+        this.changeStart = new EventEmitter();
+        /**
+         * An event fired if a child change is ended
+         */
+        this.changeEnd = new EventEmitter();
+        /**
+         * An event fired if the fullscreen toggle button was pressed.
+         */
+        this.toggleFullscreen = new EventEmitter();
+        /**
+         * All classes added to this child
+         */
+        this.class = {};
+        /**
+         * Triggers on every resize and returns true if in one column view (mobile view)
+         */
+        this.isOneColumnView$ = fromEvent(window, 'resize').pipe(map(_ => {
+            return (document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY);
+        }), debounceTime(200), startWith(document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY));
+        /**
+         * An indicator if the child is intersected (that mean visible for the user)
+         */
+        this.intersected = false;
+        /**
+         * Tells if the last change was a dragging or resizing event;
+         */
+        this.lastChange = null;
+    }
+    ngOnChanges() {
+        this.klasses = {
+            card: true,
+            'card-dashboard': true,
+            'on-resize': this.isResize,
+            ...this.class
+        };
+    }
+    ngOnInit() {
+        if (this.x === undefined || this.y === undefined) {
+            setTimeout(() => this.setDynamicDimension());
+        }
+        if (this.useIntersection && 'IntersectionObserver' in window) {
+            const intersectionObserver = new IntersectionObserver(events => (this.intersected = this.childInView(events, intersectionObserver)));
+            intersectionObserver.observe(this.element.nativeElement);
+        }
+        else {
+            this.intersected = true;
+        }
+    }
+    ngAfterViewInit() {
+        this.dashboard.children.push(this);
+    }
+    setDynamicDimension() {
+        const ds = new DashboardChildChange(this);
+        const { x, y } = ds.findFreeDimension();
+        this.x = x;
+        this.y = y;
+        this.dashboard.emitChange(this);
+    }
+    resizeStarted($event) {
+        this.isResize = true;
+        this.dashboard.updateRectSize();
+        this.dragSource = $event.source;
+        const positioning = new DashboardChildChange(this);
+        this.changeSubscription = positioning.resize$.subscribe();
+        this.changeStart.emit(this);
+        this.ngOnChanges();
+    }
+    dragStarted($event) {
+        this.isDragging = true;
+        this.dashboard.updateRectSize();
+        this.dragSource = $event.source;
+        const positioning = new DashboardChildChange(this);
+        this.changeSubscription = positioning.drag$.subscribe();
+        this.changeStart.emit(this);
+    }
+    reset($event) {
+        this.lastChange = this.isResize ? 'resize' : 'drag';
+        this.isResize = false;
+        this.isDragging = false;
+        this._pxWidth = '100%';
+        this._pxHeight = '100%';
+        this.ngOnChanges();
+        if ($event) {
+            $event.source.reset();
+        }
+        if (this.changeSubscription) {
+            this.changeSubscription.unsubscribe();
+            this.dashboard.emitChange(this);
+            this.changeEnd.emit(this);
+        }
+    }
+    ngOnDestroy() {
+        if (this.changeSubscription) {
+            this.changeSubscription.unsubscribe();
+        }
+        this._additionalHeaderTemplates.complete();
+        this.removeSelfFromDashboard();
+    }
+    addActions(actions, prepend = false) {
+        if (prepend) {
+            this.actions = [...actions, ...this.actions];
+        }
+        else {
+            this.actions = [...this.actions, ...actions];
+        }
+    }
+    removeSelfFromDashboard() {
+        const i = this.dashboard.children.indexOf(this);
+        if (i >= 0) {
+            this.dashboard.children.splice(i, 1);
+        }
+    }
+    sortByPriority(items) {
+        return [...items].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    }
+    getOrder() {
+        return `${Math.round((this.y + (this.x + 1) / 100) * 100)}`;
+    }
+    childInView(events, observer) {
+        const intersectingEvent = events.find(event => event.isIntersecting);
+        if (intersectingEvent) {
+            observer.unobserve(intersectingEvent.target);
+            return true;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$2.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DashboardChildComponent, isStandalone: true, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            c8yDropdownFocusTrap\n            [container]=\"'body'\"\n            #cardDashboardActions=\"bs-dropdown\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon dropdown-toggle c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                [attr.aria-label]=\"'Settings' | translate\"\n                aria-haspopup=\"true\"\n                [attr.aria-expanded]=\"cardDashboardActions.isOpen\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardChildComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-dashboard-child', host: {
+                        class: 'dashboard-grid-child'
+                    }, standalone: true, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        NgStyle,
+                        NgClass,
+                        CdkDragHandle,
+                        TooltipModule,
+                        IconDirective,
+                        BsDropdownModule,
+                        NgTemplateOutlet,
+                        CdkDragPlaceholder,
+                        C8yTranslatePipe,
+                        DropdownFocusTrapDirective,
+                        AsyncPipe
+                    ], template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            c8yDropdownFocusTrap\n            [container]=\"'body'\"\n            #cardDashboardActions=\"bs-dropdown\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon dropdown-toggle c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                [attr.aria-label]=\"'Settings' | translate\"\n                aria-haspopup=\"true\"\n                [attr.aria-expanded]=\"cardDashboardActions.isOpen\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$2.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
+                type: ContentChildren,
+                args: [DashboardChildActionComponent]
+            }], fullscreen: [{
+                type: HostBinding,
+                args: ['class.fullscreen']
+            }], x: [{
+                type: Input
+            }], y: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], useIntersection: [{
+                type: Input
+            }], isFrozen: [{
+                type: Input
+            }], canToggleFullscreen: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], changeStart: [{
+                type: Output
+            }], changeEnd: [{
+                type: Output
+            }], toggleFullscreen: [{
+                type: Output
+            }], class: [{
+                type: Input
+            }], inlineStyle: [{
+                type: HostBinding,
+                args: ['attr.style']
+            }] } });
+
 const AGGREGATIONS = [
     { id: null, title: gettext$1('None') },
     { id: aggregationType.MINUTELY, title: gettext$1('Minutely') },
@@ -29123,344 +29684,6 @@ const AGGREGATION_LABELS = {
     [aggregationType.DAILY]: AGGREGATIONS[3].title
 };
 
-class WidgetTimeContextIconBar {
-    constructor() {
-        this.AGGREGATION_ICONS = AGGREGATION_ICONS;
-        this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
-    }
-    ngOnInit() {
-        if (this.config.displaySettings.globalRealtimeContext &&
-            !this.config.displaySettings.globalTimeContext) {
-            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard realtime context.');
-        }
-        else {
-            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard time range.');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetTimeContextIconBar, isStandalone: true, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-widget-time-context-icon-bar', standalone: true, imports: [NgIf, TooltipModule, IconDirective, NgClass, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n" }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class WidgetAutoRefreshContextIconBarComponent {
-    constructor() {
-        this.globalAutoRefreshTooltip = gettext$1('This widget is in sync with the dashboard auto refresh context.');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetAutoRefreshContextIconBarComponent, isStandalone: true, selector: "c8y-widget-auto-refresh-context-icon-bar", ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-widget-auto-refresh-context-icon-bar', standalone: true, imports: [TooltipModule, IconDirective, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n" }]
-        }] });
-
-/**
- * A dashboard child allows to position elements
- * correctly on a grid.
- *
- * By setting `c8y-dashboard-child-actions` and
- * `c8y-dashboard-child-title` on the element you can add
- * custom actions or a custom title to the current child.
- *
- * By adding the correct branded classes, you can define
- * the look and feel of the child. By default it is displayed
- * as a card.
- *
- * ```html
- *   <c8y-dashboard-child
- *     #cpWidget3
- *     [x]="0"
- *     [y]="3"
- *     [width]="4"
- *     [height]="4"
- *     [class]="'card-dashboard panel-content-transparent'"
- *   >
- *     <c8y-dashboard-child-title *ngIf="showTitle">
- *       <span>Transparent!</span>
- *     </c8y-dashboard-child-title>
- *     <c8y-dashboard-child-action>
- *       <a href="" (click)="showTitle = !showTitle; (false)">
- *         <i [c8yIcon]="'heading'"></i> Hide/show title
- *       </a>
- *     </c8y-dashboard-child-action>
- *     x: {{ cpWidget3.x }}<br />
- *     y: {{ cpWidget3.y }}<br />
- *     width: {{ cpWidget3.width }}<br />
- *     height: {{ cpWidget3.height }}<br />
- *   </c8y-dashboard-child>
- * ```
- */
-class DashboardChildComponent {
-    set templateActions(actions) {
-        this.addActions(actions, true);
-    }
-    /**
-     * If a dashboard is frozen, all children cannot be moved
-     * or resized.
-     * @deprecated use editMode.
-     */
-    set isFrozen(value) {
-        this.editMode = !value;
-    }
-    /**
-     * Updates the pixel width of the child (used for resizing)
-     */
-    set pxWidth(value) {
-        this._pxWidth = `${value}px`;
-    }
-    /**
-     * Updates the pixel height of the child (used for resizing)
-     */
-    set pxHeight(value) {
-        this._pxHeight = `${value}px`;
-    }
-    /**
-     * nasty workaround for that issue:
-     * https://github.com/angular/angular/issues/9343
-     */
-    get inlineStyle() {
-        return this.sanitizer.bypassSecurityTrustStyle(`
-    grid-column-start: ${this.x + 1};
-    grid-row-start: ${this.y + 1};
-    grid-column-end: span ${this.width};
-    grid-row-end: span ${this.height};
-    display: block;
-    margin: ${this.margin || 12}px;
-    order: ${this.getOrder()};
-    `);
-    }
-    constructor(dashboard, sanitizer, element) {
-        this.dashboard = dashboard;
-        this.sanitizer = sanitizer;
-        this.element = element;
-        this.actions = [];
-        this.isResize = false;
-        this.isDragging = false;
-        this.klasses = {};
-        this._additionalHeaderTemplates = new BehaviorSubject([]);
-        this.additionalHeaderTemplates$ = this._additionalHeaderTemplates.asObservable().pipe(map(templates => this.sortByPriority(templates)), shareReplay(1));
-        this._pxWidth = '100%';
-        this._pxHeight = '100%';
-        this.fullscreen = false;
-        this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY = 768;
-        /**
-         * The width of the component in grid-columns.
-         */
-        this.width = 1;
-        /**
-         * The height of the component in grid-rows.
-         */
-        this.height = 1;
-        /**
-         * The margin of the child in pixel.
-         */
-        this.margin = 12;
-        /**
-         * The child content is initialized, as soon it is scrolled into viewport
-         */
-        this.useIntersection = false;
-        this.canToggleFullscreen = true;
-        /**
-         * If a dashboard editing is disabled no widgets can be moved, edited, removed
-         * or added.
-         */
-        this.editMode = false;
-        /**
-         * An event fired if a child change is started (dragging or resizing)
-         */
-        this.changeStart = new EventEmitter();
-        /**
-         * An event fired if a child change is ended
-         */
-        this.changeEnd = new EventEmitter();
-        /**
-         * An event fired if the fullscreen toggle button was pressed.
-         */
-        this.toggleFullscreen = new EventEmitter();
-        /**
-         * All classes added to this child
-         */
-        this.class = {};
-        /**
-         * Triggers on every resize and returns true if in one column view (mobile view)
-         */
-        this.isOneColumnView$ = fromEvent(window, 'resize').pipe(map(_ => {
-            return (document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY);
-        }), debounceTime(200), startWith(document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY));
-        /**
-         * An indicator if the child is intersected (that mean visible for the user)
-         */
-        this.intersected = false;
-        /**
-         * Tells if the last change was a dragging or resizing event;
-         */
-        this.lastChange = null;
-    }
-    ngOnChanges() {
-        this.klasses = {
-            card: true,
-            'card-dashboard': true,
-            'on-resize': this.isResize,
-            ...this.class
-        };
-    }
-    ngOnInit() {
-        if (this.x === undefined || this.y === undefined) {
-            setTimeout(() => this.setDynamicDimension());
-        }
-        if (this.useIntersection && 'IntersectionObserver' in window) {
-            const intersectionObserver = new IntersectionObserver(events => (this.intersected = this.childInView(events, intersectionObserver)));
-            intersectionObserver.observe(this.element.nativeElement);
-        }
-        else {
-            this.intersected = true;
-        }
-    }
-    ngAfterViewInit() {
-        this.dashboard.children.push(this);
-    }
-    setDynamicDimension() {
-        const ds = new DashboardChildChange(this);
-        const { x, y } = ds.findFreeDimension();
-        this.x = x;
-        this.y = y;
-        this.dashboard.emitChange(this);
-    }
-    resizeStarted($event) {
-        this.isResize = true;
-        this.dashboard.updateRectSize();
-        this.dragSource = $event.source;
-        const positioning = new DashboardChildChange(this);
-        this.changeSubscription = positioning.resize$.subscribe();
-        this.changeStart.emit(this);
-        this.ngOnChanges();
-    }
-    dragStarted($event) {
-        this.isDragging = true;
-        this.dashboard.updateRectSize();
-        this.dragSource = $event.source;
-        const positioning = new DashboardChildChange(this);
-        this.changeSubscription = positioning.drag$.subscribe();
-        this.changeStart.emit(this);
-    }
-    reset($event) {
-        this.lastChange = this.isResize ? 'resize' : 'drag';
-        this.isResize = false;
-        this.isDragging = false;
-        this._pxWidth = '100%';
-        this._pxHeight = '100%';
-        this.ngOnChanges();
-        if ($event) {
-            $event.source.reset();
-        }
-        if (this.changeSubscription) {
-            this.changeSubscription.unsubscribe();
-            this.dashboard.emitChange(this);
-            this.changeEnd.emit(this);
-        }
-    }
-    ngOnDestroy() {
-        if (this.changeSubscription) {
-            this.changeSubscription.unsubscribe();
-        }
-        this._additionalHeaderTemplates.complete();
-        this.removeSelfFromDashboard();
-    }
-    addActions(actions, prepend = false) {
-        if (prepend) {
-            this.actions = [...actions, ...this.actions];
-        }
-        else {
-            this.actions = [...this.actions, ...actions];
-        }
-    }
-    removeSelfFromDashboard() {
-        const i = this.dashboard.children.indexOf(this);
-        if (i >= 0) {
-            this.dashboard.children.splice(i, 1);
-        }
-    }
-    sortByPriority(items) {
-        return [...items].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
-    }
-    getOrder() {
-        return `${Math.round((this.y + (this.x + 1) / 100) * 100)}`;
-    }
-    childInView(events, observer) {
-        const intersectingEvent = events.find(event => event.isIntersecting);
-        if (intersectingEvent) {
-            observer.unobserve(intersectingEvent.target);
-            return true;
-        }
-        return false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$2.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DashboardChildComponent, isStandalone: true, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            [container]=\"'body'\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                aria-haspopup=\"true\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardChildComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-dashboard-child', host: {
-                        class: 'dashboard-grid-child'
-                    }, standalone: true, imports: [
-                        CdkDropList,
-                        CdkDrag,
-                        NgStyle,
-                        NgClass,
-                        CdkDragHandle,
-                        WidgetTimeContextIconBar,
-                        WidgetAutoRefreshContextIconBarComponent,
-                        TooltipModule,
-                        IconDirective,
-                        BsDropdownModule,
-                        NgTemplateOutlet,
-                        CdkDragPlaceholder,
-                        C8yTranslatePipe,
-                        AsyncPipe
-                    ], template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            [container]=\"'body'\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                aria-haspopup=\"true\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$2.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
-                type: ContentChildren,
-                args: [DashboardChildActionComponent]
-            }], fullscreen: [{
-                type: HostBinding,
-                args: ['class.fullscreen']
-            }], x: [{
-                type: Input
-            }], y: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], useIntersection: [{
-                type: Input
-            }], isFrozen: [{
-                type: Input
-            }], canToggleFullscreen: [{
-                type: Input
-            }], editMode: [{
-                type: Input
-            }], changeStart: [{
-                type: Output
-            }], changeEnd: [{
-                type: Output
-            }], toggleFullscreen: [{
-                type: Output
-            }], class: [{
-                type: Input
-            }], inlineStyle: [{
-                type: HostBinding,
-                args: ['attr.style']
-            }] } });
-
 class AggregationService {
     constructor() {
         this.AGGREGATION_MAP = {
@@ -31085,6 +31308,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+class WidgetAutoRefreshContextIconBarComponent {
+    constructor() {
+        this.globalAutoRefreshTooltip = gettext$1('This widget is in sync with the dashboard auto refresh context.');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetAutoRefreshContextIconBarComponent, isStandalone: true, selector: "c8y-widget-auto-refresh-context-icon-bar", ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-widget-auto-refresh-context-icon-bar', standalone: true, imports: [TooltipModule, IconDirective, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n" }]
+        }] });
+
 function globalAutoRefreshLoading(globalRefreshService) {
     return (source) => source.pipe(distinctUntilChanged(), tap(isLoading => isLoading
         ? globalRefreshService.incrementLoading()
@@ -31690,6 +31925,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class WidgetTimeContextIconBar {
+    constructor() {
+        this.AGGREGATION_ICONS = AGGREGATION_ICONS;
+        this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
+    }
+    ngOnInit() {
+        if (this.config.displaySettings.globalRealtimeContext &&
+            !this.config.displaySettings.globalTimeContext) {
+            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard realtime context.');
+        }
+        else {
+            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard time range.');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetTimeContextIconBar, isStandalone: true, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-widget-time-context-icon-bar', standalone: true, imports: [NgIf, TooltipModule, IconDirective, NgClass, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
 class DashboardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DashboardModule, imports: [CommonModule,
@@ -33450,7 +33709,8 @@ class DataGridComponent {
             bordered: false,
             gridHeader: true,
             filter: true,
-            hover: true
+            hover: true,
+            showLoadingIndicator: true
         };
         this.actionControls = [];
         /** Sets initial search text. */
@@ -34453,7 +34713,7 @@ class DataGridComponent {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => DataGridComponent)
             }
-        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData) {\n    <div class=\"table-data-grid__loading--wrapper\">\n      <div class=\"table-data-grid__loading--loader\">\n        <c8y-loading\n          layout=\"application\"\n          [message]=\"loadingItemsLabel\"\n        ></c8y-loading>\n      </div>\n    </div>\n  }\n\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <div class=\"a-i-center\">\n                <span class=\"badge badge-info m-r-4\">\n                  {{ (dataSource.stats$ | async).filteredSize }}\n                </span>\n                <small\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"filteringLabelsParams\"\n                >\n                  of {{ allItemsCount }} items\n                </small>\n              </div>\n            }\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddFilters=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddFilters.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn btn-default btn-sm m-l-8\"\n                title=\"{{ 'Active filters' | translate }}\"\n                aria-haspopup=\"true\"\n                dropdownToggle\n                data-cy=\"c8y-data-grid--filters\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"filter\"\n                ></i>\n                <span>{{ 'Active filters' | translate }}</span>\n                <span class=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\n                </span>\n              </button>\n\n              <div\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"data-grid__dropdown bg-level-0\">\n                  <ul class=\"list-unstyled m-0\">\n                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\n                        <ng-container>\n                          <div\n                            class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                            title=\"{{ (column.header | translate) || column.name }}\"\n                          >\n                            <label>\n                              {{ (column.header | translate) || column.name }}\n                            </label>\n                          </div>\n                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\n                                    <button\n                                      class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                                      title=\"{{ 'Remove filter' | translate }}\"\n                                      (click)=\"removeFilter(chip.remove())\"\n                                      data-cy=\"c8y-data-grid--remove-chip\"\n                                    >\n                                      <i c8yIcon=\"times\"></i>\n                                    </button>\n                                    {{ chip.displayValue | translate }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\n                  </ul>\n                </div>\n                <div class=\"list-group-item separator-top sticky-bottom\">\n                  <button\n                    class=\"btn btn-sm btn-default\"\n                    title=\"{{ 'Clear all filters' | translate }}\"\n                    type=\"button\"\n                    (click)=\"clearFilters()\"\n                    data-cy=\"c8y-data-grid--clear-filters\"\n                  >\n                    {{ 'Clear all filters' | translate }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </span>\n        }\n\n        @if (displayOptions.filter) {\n          <button\n            class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"filtersHelpPopover\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\n                <button\n                  class=\"btnbar-btn btn-link\"\n                  title=\"{{ headerActionControl.text | translate }}\"\n                  type=\"button\"\n                  (click)=\"headerActionControl.callback()\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION,\n                    customActionName: headerActionControl.text,\n                    type: headerActionControl.type\n                  }\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"headerActionControl.icon\"\n                  ></i>\n                  <span>{{ headerActionControl.text | translate }}</span>\n                </button>\n              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddConfigureColumns=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Configure columns' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--custom-column-btn\"\n                dropdownToggle\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"columns\"\n                ></i>\n                <span>{{ 'Configure columns' | translate }}</span>\n              </button>\n\n              <ul\n                class=\"dropdown-menu data-grid__dropdown\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li>\n                  <div\n                    class=\"list-group m-0\"\n                    cdkDropList\n                    (cdkDropListDropped)=\"onColumnDrop($event)\"\n                  >\n                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\n                              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                            >\n                              <input\n                                type=\"checkbox\"\n                                [(ngModel)]=\"column.visible\"\n                                (change)=\"\n                                  updateGridColumnsSize();\n                                  emitConfigChange('changeColumnVisibility')\n                                \"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CHANGE_VISIBILITY,\n                                  column: column.name,\n                                  visible: !column.visible\n                                }\"\n                              />\n                              <span></span>\n                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0 l-h-1\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger showOnHover max-width-fit a-i-center\"\n                                [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                                tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                                placement=\"left\"\n                                container=\"body\"\n                                type=\"button\"\n                                (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                              >\n                                <c8y-popover-confirm\n                                  [title]=\"'Confirm removal' | translate\"\n                                  triggers=\"focus\"\n                                  [placement]=\"'left'\"\n                                  #poConfirm\n                                ></c8y-popover-confirm>\n                                <i\n                                  c8yIcon=\"minus-circle\"\n                                  data-cy=\"data-grid--custom-column-remove-btn\"\n                                ></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\n                    <button\n                      class=\"btn btn-default btn-block\"\n                      title=\"{{ 'Add custom column' | translate }}\"\n                      type=\"button\"\n                      data-cy=\"data-grid--add-custom-column\"\n                      (click)=\"openCustomColumn(); ddConfigureColumns.hide()\"\n                    >\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"plus-circle\"\n                      ></i>\n                      <span>{{ 'Add custom column' | translate }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\n              data-cy=\"data-grid--reload-btn\"\n              [disabled]=\"dataSource.loading$ | async\"\n              (click)=\"clickReload()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"refresh\"\n              ></i>\n              <span>{{ 'Reload' | translate }}</span>\n            </button>\n          }\n\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'Search\u2026' | translate }}\"\n                type=\"search\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"searchText$.emit($event)\"\n                (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n              />\n              <div class=\"input-group-addon\">\n                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\n        >\n          <h4>\n            <ng-container [ngPlural]=\"selectedItemIds.length\">\n              <ng-template ngPluralCase=\"=1\">\n                <span translate>1 selected item.</span>\n              </ng-template>\n              <ng-template ngPluralCase=\"other\">\n                <span\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"{ count: selectedItemIds.length }\"\n                >\n                  {{ count }} selected items.\n                </span>\n              </ng-template>\n            </ng-container>\n            <br class=\"visible-xs\" />\n            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\n                <a\n                  class=\"interact\"\n                  (click)=\"setAllItemsSelected(true)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                >\n                  <span\n                    ngNonBindable\n                    translate\n                    [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n                  >\n                    Select all {{ count }} items\n                  </span>\n                </a>\n              </small>\n            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"sign-out\"></i>\n                        <span>{{ 'Export' | translate }}</span>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        <span>{{ 'Delete' | translate }}</span>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                          customActionName: bulkActionControl.text\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i\n                          [class]=\"bulkActionControl.iconClasses\"\n                          c8yIcon=\"{{ bulkActionControl.icon }}\"\n                        ></i>\n                        <span>{{ bulkActionControl.text | translate }}</span>\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Cancel' | translate }}\"\n                type=\"button\"\n                (click)=\"cancel()\"\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CANCEL\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"times\"></i>\n                <span>{{ 'Cancel' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('checkbox') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <div>\n                <label class=\"c8y-checkbox\">\n                  <input\n                    [attr.aria-label]=\"'Selected' | translate\"\n                    type=\"checkbox\"\n                    [checked]=\"currentPageSelectionState.allSelected\"\n                    [indeterminate]=\"\n                      !(\n                        currentPageSelectionState.allSelected ||\n                        currentPageSelectionState.allDeselected\n                      )\n                    \"\n                    (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                  />\n                  <span></span>\n                </label>\n              </div>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"setItemsSelected([row], $event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--checkbox\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('radio-button') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            ></th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-radio\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  name=\"select-row\"\n                  type=\"radio\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"changeSelectedItem(row)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--radio\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('actions') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        data-cy=\"c8y-data-grid--edit-button-in-row\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btn btn-dot btn-dot--danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        data-cy=\"c8y-data-grid--remove-button-in-row\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                      >\n                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\n                  >\n                    <button\n                      class=\"dropdown-toggle c8y-dropdown\"\n                      title=\"{{ 'Actions' | translate }}\"\n                      aria-haspopup=\"true\"\n                      type=\"button\"\n                      data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"ellipsis-v\"></i>\n                    </button>\n                    <ul\n                      class=\"dropdown-menu dropdown-menu-right\"\n                      *dropdownMenu\n                    >\n                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EDIT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"pencil\"></i>\n                                {{ 'Edit' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.DELETE_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"delete\"></i>\n                                {{ 'Delete' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EXPORT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"data-export\"></i>\n                                {{ 'Export' | translate }}\n                              </button>\n                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                                  customActionName: actionControl.text,\n                                  id: row.id\n                                }\"\n                              >\n                                <i\n                                  c8yIcon=\"{{ actionControl.icon }}\"\n                                  [ngClass]=\"actionControl.iconClasses\"\n                                ></i>\n                                {{ actionControl.text | translate }}\n                              </button>\n                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\n            <th\n              [class.sorted]=\"column.sortOrder\"\n              [class.filtered]=\"column | map: isColumnFilteringApplied\"\n              [class.hidden]=\"!column.visible\"\n              cdk-header-cell\n              *cdkHeaderCellDef\n              [ngClass]=\"column.headerCSSClassName\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n                  dropdown\n                  #gridHeaderDropdown=\"bs-dropdown\"\n                  [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n                  [insideClick]=\"true\"\n                >\n                  <button\n                    class=\"btn-header\"\n                    [title]=\"(column.header | translate) || column.name\"\n                    type=\"button\"\n                    [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                    dropdownToggle\n                  >\n                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\n                    <i\n                      c8yIcon=\"filter\"\n                      title=\"{{ 'Filter' | translate }}\"\n                    ></i>\n                  </button>\n\n                  <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n                  <ul\n                    class=\"dropdown-menu\"\n                    *dropdownMenu\n                    [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <li class=\"data-grid__dropdown\">\n                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\n                        <c8y-filtering-form-renderer\n                          class=\"bg-component\"\n                          [spec]=\"filteringFormRendererSpec\"\n                          data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                        ></c8y-filtering-form-renderer>\n                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\n            </th>\n\n            <td\n              [class.hidden]=\"!column.visible\"\n              [attr.data-cell-title]=\"column.header | translate\"\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              [ngClass]=\"column.cellCSSClassName\"\n              [attr.data-cy]=\"'data-grid--' + column.header\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\n      <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n        <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            emptyState?.templateRef;\n            context: { $implicit: emptyStateContext$ | async }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  }\n\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\n            data-cy=\"data-grid--counter\"\n          >\n            <span\n              class=\"text-muted\"\n              ngNonBindable\n              translate\n              [translateParams]=\"paginationLabelParams\"\n            >\n              {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n            </span>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\n            <label\n              class=\"m-r-4\"\n              for=\"filteredSize\"\n            >\n              {{ 'Items per page' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"filteredSize\"\n                data-cy=\"data-grid--pagesize-options\"\n                [ngModel]=\"pagination.pageSize\"\n                (ngModelChange)=\"\n                  updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n                \"\n              >\n                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\n            [ngModel]=\"pagination.currentPage\"\n            (pageChanged)=\"updatePagination($event)\"\n            [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n            [itemsPerPage]=\"pagination.pageSize\"\n            (numPages)=\"totalPagesCount$.next($event)\"\n            [maxSize]=\"5\"\n            [boundaryLinks]=\"false\"\n            [previousText]=\"'Previous' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "directive", type: CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "component", type: CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i11.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
+        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData && displayOptions.showLoadingIndicator) {\n    <div class=\"table-data-grid__loading--wrapper\">\n      <div class=\"table-data-grid__loading--loader\">\n        <c8y-loading\n          layout=\"application\"\n          [message]=\"loadingItemsLabel\"\n        ></c8y-loading>\n      </div>\n    </div>\n  }\n\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <div class=\"a-i-center\">\n                <span class=\"badge badge-info m-r-4\">\n                  {{ (dataSource.stats$ | async).filteredSize }}\n                </span>\n                <small\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"filteringLabelsParams\"\n                >\n                  of {{ allItemsCount }} items\n                </small>\n              </div>\n            }\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddFilters=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddFilters.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn btn-default btn-sm m-l-8\"\n                title=\"{{ 'Active filters' | translate }}\"\n                aria-haspopup=\"true\"\n                dropdownToggle\n                data-cy=\"c8y-data-grid--filters\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"filter\"\n                ></i>\n                <span>{{ 'Active filters' | translate }}</span>\n                <span class=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\n                </span>\n              </button>\n\n              <div\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"data-grid__dropdown bg-level-0\">\n                  <ul class=\"list-unstyled m-0\">\n                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\n                        <ng-container>\n                          <div\n                            class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                            title=\"{{ (column.header | translate) || column.name }}\"\n                          >\n                            <label>\n                              {{ (column.header | translate) || column.name }}\n                            </label>\n                          </div>\n                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\n                                    <button\n                                      class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                                      title=\"{{ 'Remove filter' | translate }}\"\n                                      (click)=\"removeFilter(chip.remove())\"\n                                      data-cy=\"c8y-data-grid--remove-chip\"\n                                    >\n                                      <i c8yIcon=\"times\"></i>\n                                    </button>\n                                    {{ chip.displayValue | translate }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\n                  </ul>\n                </div>\n                <div class=\"list-group-item separator-top sticky-bottom\">\n                  <button\n                    class=\"btn btn-sm btn-default\"\n                    title=\"{{ 'Clear all filters' | translate }}\"\n                    type=\"button\"\n                    (click)=\"clearFilters()\"\n                    data-cy=\"c8y-data-grid--clear-filters\"\n                  >\n                    {{ 'Clear all filters' | translate }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </span>\n        }\n\n        @if (displayOptions.filter) {\n          <button\n            class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"filtersHelpPopover\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\n                <button\n                  class=\"btnbar-btn btn-link\"\n                  title=\"{{ headerActionControl.text | translate }}\"\n                  type=\"button\"\n                  (click)=\"headerActionControl.callback()\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION,\n                    customActionName: headerActionControl.text,\n                    type: headerActionControl.type\n                  }\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"headerActionControl.icon\"\n                  ></i>\n                  <span>{{ headerActionControl.text | translate }}</span>\n                </button>\n              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddConfigureColumns=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Configure columns' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--custom-column-btn\"\n                dropdownToggle\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"columns\"\n                ></i>\n                <span>{{ 'Configure columns' | translate }}</span>\n              </button>\n\n              <ul\n                class=\"dropdown-menu data-grid__dropdown\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li>\n                  <div\n                    class=\"list-group m-0\"\n                    cdkDropList\n                    (cdkDropListDropped)=\"onColumnDrop($event)\"\n                  >\n                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\n                              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                            >\n                              <input\n                                type=\"checkbox\"\n                                [(ngModel)]=\"column.visible\"\n                                (change)=\"\n                                  updateGridColumnsSize();\n                                  emitConfigChange('changeColumnVisibility')\n                                \"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CHANGE_VISIBILITY,\n                                  column: column.name,\n                                  visible: !column.visible\n                                }\"\n                              />\n                              <span></span>\n                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1 m-t-2\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger showOnHover max-width-fit a-i-center\"\n                                [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                                tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                                placement=\"left\"\n                                container=\"body\"\n                                type=\"button\"\n                                (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                              >\n                                <c8y-popover-confirm\n                                  [title]=\"'Confirm removal' | translate\"\n                                  triggers=\"focus\"\n                                  [placement]=\"'left'\"\n                                  #poConfirm\n                                ></c8y-popover-confirm>\n                                <i\n                                  c8yIcon=\"minus-circle\"\n                                  data-cy=\"data-grid--custom-column-remove-btn\"\n                                ></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\n                    <button\n                      class=\"btn btn-default btn-block\"\n                      title=\"{{ 'Add custom column' | translate }}\"\n                      type=\"button\"\n                      data-cy=\"data-grid--add-custom-column\"\n                      (click)=\"openCustomColumn(); ddConfigureColumns.hide()\"\n                    >\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"plus-circle\"\n                      ></i>\n                      <span>{{ 'Add custom column' | translate }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\n              data-cy=\"data-grid--reload-btn\"\n              [disabled]=\"dataSource.loading$ | async\"\n              (click)=\"clickReload()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"refresh\"\n              ></i>\n              <span>{{ 'Reload' | translate }}</span>\n            </button>\n          }\n\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'Search\u2026' | translate }}\"\n                type=\"search\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"searchText$.emit($event)\"\n                (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n              />\n              <div class=\"input-group-addon\">\n                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\n        >\n          <h4>\n            <ng-container [ngPlural]=\"selectedItemIds.length\">\n              <ng-template ngPluralCase=\"=1\">\n                <span translate>1 selected item.</span>\n              </ng-template>\n              <ng-template ngPluralCase=\"other\">\n                <span\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"{ count: selectedItemIds.length }\"\n                >\n                  {{ count }} selected items.\n                </span>\n              </ng-template>\n            </ng-container>\n            <br class=\"visible-xs\" />\n            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\n                <a\n                  class=\"interact\"\n                  (click)=\"setAllItemsSelected(true)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                >\n                  <span\n                    ngNonBindable\n                    translate\n                    [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n                  >\n                    Select all {{ count }} items\n                  </span>\n                </a>\n              </small>\n            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"sign-out\"></i>\n                        <span>{{ 'Export' | translate }}</span>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        <span>{{ 'Delete' | translate }}</span>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                          customActionName: bulkActionControl.text\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i\n                          [class]=\"bulkActionControl.iconClasses\"\n                          c8yIcon=\"{{ bulkActionControl.icon }}\"\n                        ></i>\n                        <span>{{ bulkActionControl.text | translate }}</span>\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Cancel' | translate }}\"\n                type=\"button\"\n                (click)=\"cancel()\"\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CANCEL\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"times\"></i>\n                <span>{{ 'Cancel' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('checkbox') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <div>\n                <label class=\"c8y-checkbox\">\n                  <input\n                    [attr.aria-label]=\"'Selected' | translate\"\n                    type=\"checkbox\"\n                    [checked]=\"currentPageSelectionState.allSelected\"\n                    [indeterminate]=\"\n                      !(\n                        currentPageSelectionState.allSelected ||\n                        currentPageSelectionState.allDeselected\n                      )\n                    \"\n                    (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                  />\n                  <span></span>\n                </label>\n              </div>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"setItemsSelected([row], $event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--checkbox\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('radio-button') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            ></th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-radio\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  name=\"select-row\"\n                  type=\"radio\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"changeSelectedItem(row)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--radio\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('actions') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        data-cy=\"c8y-data-grid--edit-button-in-row\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btn btn-dot btn-dot--danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        data-cy=\"c8y-data-grid--remove-button-in-row\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                      >\n                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\n                  >\n                    <button\n                      class=\"dropdown-toggle c8y-dropdown\"\n                      title=\"{{ 'Actions' | translate }}\"\n                      aria-haspopup=\"true\"\n                      type=\"button\"\n                      data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"ellipsis-v\"></i>\n                    </button>\n                    <ul\n                      class=\"dropdown-menu dropdown-menu-right\"\n                      *dropdownMenu\n                    >\n                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EDIT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"pencil\"></i>\n                                {{ 'Edit' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.DELETE_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"delete\"></i>\n                                {{ 'Delete' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EXPORT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"data-export\"></i>\n                                {{ 'Export' | translate }}\n                              </button>\n                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                                  customActionName: actionControl.text,\n                                  id: row.id\n                                }\"\n                              >\n                                <i\n                                  c8yIcon=\"{{ actionControl.icon }}\"\n                                  [ngClass]=\"actionControl.iconClasses\"\n                                ></i>\n                                {{ actionControl.text | translate }}\n                              </button>\n                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\n            <th\n              [class.sorted]=\"column.sortOrder\"\n              [class.filtered]=\"column | map: isColumnFilteringApplied\"\n              [class.hidden]=\"!column.visible\"\n              cdk-header-cell\n              *cdkHeaderCellDef\n              [ngClass]=\"column.headerCSSClassName\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n                  dropdown\n                  #gridHeaderDropdown=\"bs-dropdown\"\n                  [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n                  [insideClick]=\"true\"\n                >\n                  <button\n                    class=\"btn-header\"\n                    [title]=\"(column.header | translate) || column.name\"\n                    type=\"button\"\n                    [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                    dropdownToggle\n                  >\n                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\n                    <i\n                      c8yIcon=\"filter\"\n                      title=\"{{ 'Filter' | translate }}\"\n                    ></i>\n                  </button>\n\n                  <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n                  <ul\n                    class=\"dropdown-menu\"\n                    *dropdownMenu\n                    [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <li class=\"data-grid__dropdown\">\n                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\n                        <c8y-filtering-form-renderer\n                          class=\"bg-component\"\n                          [spec]=\"filteringFormRendererSpec\"\n                          data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                        ></c8y-filtering-form-renderer>\n                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\n            </th>\n\n            <td\n              [class.hidden]=\"!column.visible\"\n              [attr.data-cell-title]=\"column.header | translate\"\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              [ngClass]=\"column.cellCSSClassName\"\n              [attr.data-cy]=\"'data-grid--' + column.header\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\n      <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n        <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            emptyState?.templateRef;\n            context: { $implicit: emptyStateContext$ | async }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  }\n\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\n            data-cy=\"data-grid--counter\"\n          >\n            <span\n              class=\"text-muted\"\n              ngNonBindable\n              translate\n              [translateParams]=\"paginationLabelParams\"\n            >\n              {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n            </span>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\n            <label\n              class=\"m-r-4\"\n              for=\"filteredSize\"\n            >\n              {{ 'Items per page' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"filteredSize\"\n                data-cy=\"data-grid--pagesize-options\"\n                [ngModel]=\"pagination.pageSize\"\n                (ngModelChange)=\"\n                  updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n                \"\n              >\n                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\n            [ngModel]=\"pagination.currentPage\"\n            (pageChanged)=\"updatePagination($event)\"\n            [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n            [itemsPerPage]=\"pagination.pageSize\"\n            (numPages)=\"totalPagesCount$.next($event)\"\n            [maxSize]=\"5\"\n            [boundaryLinks]=\"false\"\n            [previousText]=\"'Previous' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "directive", type: CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "component", type: CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i11.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -34504,7 +34764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         GroupedFilterChips,
                         VisibleControlsPipe,
                         HumanizePipe
-                    ], template: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData) {\n    <div class=\"table-data-grid__loading--wrapper\">\n      <div class=\"table-data-grid__loading--loader\">\n        <c8y-loading\n          layout=\"application\"\n          [message]=\"loadingItemsLabel\"\n        ></c8y-loading>\n      </div>\n    </div>\n  }\n\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <div class=\"a-i-center\">\n                <span class=\"badge badge-info m-r-4\">\n                  {{ (dataSource.stats$ | async).filteredSize }}\n                </span>\n                <small\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"filteringLabelsParams\"\n                >\n                  of {{ allItemsCount }} items\n                </small>\n              </div>\n            }\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddFilters=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddFilters.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn btn-default btn-sm m-l-8\"\n                title=\"{{ 'Active filters' | translate }}\"\n                aria-haspopup=\"true\"\n                dropdownToggle\n                data-cy=\"c8y-data-grid--filters\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"filter\"\n                ></i>\n                <span>{{ 'Active filters' | translate }}</span>\n                <span class=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\n                </span>\n              </button>\n\n              <div\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"data-grid__dropdown bg-level-0\">\n                  <ul class=\"list-unstyled m-0\">\n                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\n                        <ng-container>\n                          <div\n                            class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                            title=\"{{ (column.header | translate) || column.name }}\"\n                          >\n                            <label>\n                              {{ (column.header | translate) || column.name }}\n                            </label>\n                          </div>\n                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\n                                    <button\n                                      class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                                      title=\"{{ 'Remove filter' | translate }}\"\n                                      (click)=\"removeFilter(chip.remove())\"\n                                      data-cy=\"c8y-data-grid--remove-chip\"\n                                    >\n                                      <i c8yIcon=\"times\"></i>\n                                    </button>\n                                    {{ chip.displayValue | translate }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\n                  </ul>\n                </div>\n                <div class=\"list-group-item separator-top sticky-bottom\">\n                  <button\n                    class=\"btn btn-sm btn-default\"\n                    title=\"{{ 'Clear all filters' | translate }}\"\n                    type=\"button\"\n                    (click)=\"clearFilters()\"\n                    data-cy=\"c8y-data-grid--clear-filters\"\n                  >\n                    {{ 'Clear all filters' | translate }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </span>\n        }\n\n        @if (displayOptions.filter) {\n          <button\n            class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"filtersHelpPopover\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\n                <button\n                  class=\"btnbar-btn btn-link\"\n                  title=\"{{ headerActionControl.text | translate }}\"\n                  type=\"button\"\n                  (click)=\"headerActionControl.callback()\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION,\n                    customActionName: headerActionControl.text,\n                    type: headerActionControl.type\n                  }\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"headerActionControl.icon\"\n                  ></i>\n                  <span>{{ headerActionControl.text | translate }}</span>\n                </button>\n              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddConfigureColumns=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Configure columns' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--custom-column-btn\"\n                dropdownToggle\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"columns\"\n                ></i>\n                <span>{{ 'Configure columns' | translate }}</span>\n              </button>\n\n              <ul\n                class=\"dropdown-menu data-grid__dropdown\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li>\n                  <div\n                    class=\"list-group m-0\"\n                    cdkDropList\n                    (cdkDropListDropped)=\"onColumnDrop($event)\"\n                  >\n                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\n                              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                            >\n                              <input\n                                type=\"checkbox\"\n                                [(ngModel)]=\"column.visible\"\n                                (change)=\"\n                                  updateGridColumnsSize();\n                                  emitConfigChange('changeColumnVisibility')\n                                \"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CHANGE_VISIBILITY,\n                                  column: column.name,\n                                  visible: !column.visible\n                                }\"\n                              />\n                              <span></span>\n                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0 l-h-1\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger showOnHover max-width-fit a-i-center\"\n                                [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                                tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                                placement=\"left\"\n                                container=\"body\"\n                                type=\"button\"\n                                (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                              >\n                                <c8y-popover-confirm\n                                  [title]=\"'Confirm removal' | translate\"\n                                  triggers=\"focus\"\n                                  [placement]=\"'left'\"\n                                  #poConfirm\n                                ></c8y-popover-confirm>\n                                <i\n                                  c8yIcon=\"minus-circle\"\n                                  data-cy=\"data-grid--custom-column-remove-btn\"\n                                ></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\n                    <button\n                      class=\"btn btn-default btn-block\"\n                      title=\"{{ 'Add custom column' | translate }}\"\n                      type=\"button\"\n                      data-cy=\"data-grid--add-custom-column\"\n                      (click)=\"openCustomColumn(); ddConfigureColumns.hide()\"\n                    >\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"plus-circle\"\n                      ></i>\n                      <span>{{ 'Add custom column' | translate }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\n              data-cy=\"data-grid--reload-btn\"\n              [disabled]=\"dataSource.loading$ | async\"\n              (click)=\"clickReload()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"refresh\"\n              ></i>\n              <span>{{ 'Reload' | translate }}</span>\n            </button>\n          }\n\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'Search\u2026' | translate }}\"\n                type=\"search\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"searchText$.emit($event)\"\n                (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n              />\n              <div class=\"input-group-addon\">\n                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\n        >\n          <h4>\n            <ng-container [ngPlural]=\"selectedItemIds.length\">\n              <ng-template ngPluralCase=\"=1\">\n                <span translate>1 selected item.</span>\n              </ng-template>\n              <ng-template ngPluralCase=\"other\">\n                <span\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"{ count: selectedItemIds.length }\"\n                >\n                  {{ count }} selected items.\n                </span>\n              </ng-template>\n            </ng-container>\n            <br class=\"visible-xs\" />\n            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\n                <a\n                  class=\"interact\"\n                  (click)=\"setAllItemsSelected(true)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                >\n                  <span\n                    ngNonBindable\n                    translate\n                    [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n                  >\n                    Select all {{ count }} items\n                  </span>\n                </a>\n              </small>\n            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"sign-out\"></i>\n                        <span>{{ 'Export' | translate }}</span>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        <span>{{ 'Delete' | translate }}</span>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                          customActionName: bulkActionControl.text\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i\n                          [class]=\"bulkActionControl.iconClasses\"\n                          c8yIcon=\"{{ bulkActionControl.icon }}\"\n                        ></i>\n                        <span>{{ bulkActionControl.text | translate }}</span>\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Cancel' | translate }}\"\n                type=\"button\"\n                (click)=\"cancel()\"\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CANCEL\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"times\"></i>\n                <span>{{ 'Cancel' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('checkbox') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <div>\n                <label class=\"c8y-checkbox\">\n                  <input\n                    [attr.aria-label]=\"'Selected' | translate\"\n                    type=\"checkbox\"\n                    [checked]=\"currentPageSelectionState.allSelected\"\n                    [indeterminate]=\"\n                      !(\n                        currentPageSelectionState.allSelected ||\n                        currentPageSelectionState.allDeselected\n                      )\n                    \"\n                    (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                  />\n                  <span></span>\n                </label>\n              </div>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"setItemsSelected([row], $event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--checkbox\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('radio-button') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            ></th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-radio\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  name=\"select-row\"\n                  type=\"radio\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"changeSelectedItem(row)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--radio\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('actions') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        data-cy=\"c8y-data-grid--edit-button-in-row\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btn btn-dot btn-dot--danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        data-cy=\"c8y-data-grid--remove-button-in-row\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                      >\n                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\n                  >\n                    <button\n                      class=\"dropdown-toggle c8y-dropdown\"\n                      title=\"{{ 'Actions' | translate }}\"\n                      aria-haspopup=\"true\"\n                      type=\"button\"\n                      data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"ellipsis-v\"></i>\n                    </button>\n                    <ul\n                      class=\"dropdown-menu dropdown-menu-right\"\n                      *dropdownMenu\n                    >\n                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EDIT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"pencil\"></i>\n                                {{ 'Edit' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.DELETE_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"delete\"></i>\n                                {{ 'Delete' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EXPORT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"data-export\"></i>\n                                {{ 'Export' | translate }}\n                              </button>\n                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                                  customActionName: actionControl.text,\n                                  id: row.id\n                                }\"\n                              >\n                                <i\n                                  c8yIcon=\"{{ actionControl.icon }}\"\n                                  [ngClass]=\"actionControl.iconClasses\"\n                                ></i>\n                                {{ actionControl.text | translate }}\n                              </button>\n                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\n            <th\n              [class.sorted]=\"column.sortOrder\"\n              [class.filtered]=\"column | map: isColumnFilteringApplied\"\n              [class.hidden]=\"!column.visible\"\n              cdk-header-cell\n              *cdkHeaderCellDef\n              [ngClass]=\"column.headerCSSClassName\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n                  dropdown\n                  #gridHeaderDropdown=\"bs-dropdown\"\n                  [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n                  [insideClick]=\"true\"\n                >\n                  <button\n                    class=\"btn-header\"\n                    [title]=\"(column.header | translate) || column.name\"\n                    type=\"button\"\n                    [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                    dropdownToggle\n                  >\n                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\n                    <i\n                      c8yIcon=\"filter\"\n                      title=\"{{ 'Filter' | translate }}\"\n                    ></i>\n                  </button>\n\n                  <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n                  <ul\n                    class=\"dropdown-menu\"\n                    *dropdownMenu\n                    [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <li class=\"data-grid__dropdown\">\n                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\n                        <c8y-filtering-form-renderer\n                          class=\"bg-component\"\n                          [spec]=\"filteringFormRendererSpec\"\n                          data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                        ></c8y-filtering-form-renderer>\n                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\n            </th>\n\n            <td\n              [class.hidden]=\"!column.visible\"\n              [attr.data-cell-title]=\"column.header | translate\"\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              [ngClass]=\"column.cellCSSClassName\"\n              [attr.data-cy]=\"'data-grid--' + column.header\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\n      <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n        <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            emptyState?.templateRef;\n            context: { $implicit: emptyStateContext$ | async }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  }\n\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\n            data-cy=\"data-grid--counter\"\n          >\n            <span\n              class=\"text-muted\"\n              ngNonBindable\n              translate\n              [translateParams]=\"paginationLabelParams\"\n            >\n              {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n            </span>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\n            <label\n              class=\"m-r-4\"\n              for=\"filteredSize\"\n            >\n              {{ 'Items per page' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"filteredSize\"\n                data-cy=\"data-grid--pagesize-options\"\n                [ngModel]=\"pagination.pageSize\"\n                (ngModelChange)=\"\n                  updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n                \"\n              >\n                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\n            [ngModel]=\"pagination.currentPage\"\n            (pageChanged)=\"updatePagination($event)\"\n            [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n            [itemsPerPage]=\"pagination.pageSize\"\n            (numPages)=\"totalPagesCount$.next($event)\"\n            [maxSize]=\"5\"\n            [boundaryLinks]=\"false\"\n            [previousText]=\"'Previous' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData && displayOptions.showLoadingIndicator) {\n    <div class=\"table-data-grid__loading--wrapper\">\n      <div class=\"table-data-grid__loading--loader\">\n        <c8y-loading\n          layout=\"application\"\n          [message]=\"loadingItemsLabel\"\n        ></c8y-loading>\n      </div>\n    </div>\n  }\n\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <div class=\"a-i-center\">\n                <span class=\"badge badge-info m-r-4\">\n                  {{ (dataSource.stats$ | async).filteredSize }}\n                </span>\n                <small\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"filteringLabelsParams\"\n                >\n                  of {{ allItemsCount }} items\n                </small>\n              </div>\n            }\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddFilters=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddFilters.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn btn-default btn-sm m-l-8\"\n                title=\"{{ 'Active filters' | translate }}\"\n                aria-haspopup=\"true\"\n                dropdownToggle\n                data-cy=\"c8y-data-grid--filters\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"filter\"\n                ></i>\n                <span>{{ 'Active filters' | translate }}</span>\n                <span class=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\n                </span>\n              </button>\n\n              <div\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"data-grid__dropdown bg-level-0\">\n                  <ul class=\"list-unstyled m-0\">\n                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\n                        <ng-container>\n                          <div\n                            class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                            title=\"{{ (column.header | translate) || column.name }}\"\n                          >\n                            <label>\n                              {{ (column.header | translate) || column.name }}\n                            </label>\n                          </div>\n                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\n                                    <button\n                                      class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                                      title=\"{{ 'Remove filter' | translate }}\"\n                                      (click)=\"removeFilter(chip.remove())\"\n                                      data-cy=\"c8y-data-grid--remove-chip\"\n                                    >\n                                      <i c8yIcon=\"times\"></i>\n                                    </button>\n                                    {{ chip.displayValue | translate }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\n                  </ul>\n                </div>\n                <div class=\"list-group-item separator-top sticky-bottom\">\n                  <button\n                    class=\"btn btn-sm btn-default\"\n                    title=\"{{ 'Clear all filters' | translate }}\"\n                    type=\"button\"\n                    (click)=\"clearFilters()\"\n                    data-cy=\"c8y-data-grid--clear-filters\"\n                  >\n                    {{ 'Clear all filters' | translate }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </span>\n        }\n\n        @if (displayOptions.filter) {\n          <button\n            class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"filtersHelpPopover\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\n                <button\n                  class=\"btnbar-btn btn-link\"\n                  title=\"{{ headerActionControl.text | translate }}\"\n                  type=\"button\"\n                  (click)=\"headerActionControl.callback()\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION,\n                    customActionName: headerActionControl.text,\n                    type: headerActionControl.type\n                  }\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"headerActionControl.icon\"\n                  ></i>\n                  <span>{{ headerActionControl.text | translate }}</span>\n                </button>\n              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\n              dropdown\n              #ddConfigureColumns=\"bs-dropdown\"\n              [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Configure columns' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--custom-column-btn\"\n                dropdownToggle\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"columns\"\n                ></i>\n                <span>{{ 'Configure columns' | translate }}</span>\n              </button>\n\n              <ul\n                class=\"dropdown-menu data-grid__dropdown\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li>\n                  <div\n                    class=\"list-group m-0\"\n                    cdkDropList\n                    (cdkDropListDropped)=\"onColumnDrop($event)\"\n                  >\n                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\n                              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                            >\n                              <input\n                                type=\"checkbox\"\n                                [(ngModel)]=\"column.visible\"\n                                (change)=\"\n                                  updateGridColumnsSize();\n                                  emitConfigChange('changeColumnVisibility')\n                                \"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CHANGE_VISIBILITY,\n                                  column: column.name,\n                                  visible: !column.visible\n                                }\"\n                              />\n                              <span></span>\n                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1 m-t-2\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger showOnHover max-width-fit a-i-center\"\n                                [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                                tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                                placement=\"left\"\n                                container=\"body\"\n                                type=\"button\"\n                                (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                              >\n                                <c8y-popover-confirm\n                                  [title]=\"'Confirm removal' | translate\"\n                                  triggers=\"focus\"\n                                  [placement]=\"'left'\"\n                                  #poConfirm\n                                ></c8y-popover-confirm>\n                                <i\n                                  c8yIcon=\"minus-circle\"\n                                  data-cy=\"data-grid--custom-column-remove-btn\"\n                                ></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\n                    <button\n                      class=\"btn btn-default btn-block\"\n                      title=\"{{ 'Add custom column' | translate }}\"\n                      type=\"button\"\n                      data-cy=\"data-grid--add-custom-column\"\n                      (click)=\"openCustomColumn(); ddConfigureColumns.hide()\"\n                    >\n                      <i\n                        class=\"m-r-4\"\n                        c8yIcon=\"plus-circle\"\n                      ></i>\n                      <span>{{ 'Add custom column' | translate }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\n              data-cy=\"data-grid--reload-btn\"\n              [disabled]=\"dataSource.loading$ | async\"\n              (click)=\"clickReload()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"refresh\"\n              ></i>\n              <span>{{ 'Reload' | translate }}</span>\n            </button>\n          }\n\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'Search\u2026' | translate }}\"\n                type=\"search\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"searchText$.emit($event)\"\n                (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n              />\n              <div class=\"input-group-addon\">\n                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\n        >\n          <h4>\n            <ng-container [ngPlural]=\"selectedItemIds.length\">\n              <ng-template ngPluralCase=\"=1\">\n                <span translate>1 selected item.</span>\n              </ng-template>\n              <ng-template ngPluralCase=\"other\">\n                <span\n                  ngNonBindable\n                  translate\n                  [translateParams]=\"{ count: selectedItemIds.length }\"\n                >\n                  {{ count }} selected items.\n                </span>\n              </ng-template>\n            </ng-container>\n            <br class=\"visible-xs\" />\n            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\n                <a\n                  class=\"interact\"\n                  (click)=\"setAllItemsSelected(true)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                >\n                  <span\n                    ngNonBindable\n                    translate\n                    [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n                  >\n                    Select all {{ count }} items\n                  </span>\n                </a>\n              </small>\n            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"sign-out\"></i>\n                        <span>{{ 'Export' | translate }}</span>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        <span>{{ 'Delete' | translate }}</span>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                          customActionName: bulkActionControl.text\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i\n                          [class]=\"bulkActionControl.iconClasses\"\n                          c8yIcon=\"{{ bulkActionControl.icon }}\"\n                        ></i>\n                        <span>{{ bulkActionControl.text | translate }}</span>\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Cancel' | translate }}\"\n                type=\"button\"\n                (click)=\"cancel()\"\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CANCEL\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"times\"></i>\n                <span>{{ 'Cancel' | translate }}</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('checkbox') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <div>\n                <label class=\"c8y-checkbox\">\n                  <input\n                    [attr.aria-label]=\"'Selected' | translate\"\n                    type=\"checkbox\"\n                    [checked]=\"currentPageSelectionState.allSelected\"\n                    [indeterminate]=\"\n                      !(\n                        currentPageSelectionState.allSelected ||\n                        currentPageSelectionState.allDeselected\n                      )\n                    \"\n                    (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                  />\n                  <span></span>\n                </label>\n              </div>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"setItemsSelected([row], $event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--checkbox\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('radio-button') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            ></th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              <label class=\"c8y-radio\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  name=\"select-row\"\n                  type=\"radio\"\n                  [checked]=\"isItemSelected(row)\"\n                  (change)=\"changeSelectedItem(row)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.SELECT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--radio\"\n                />\n                <span></span>\n              </label>\n            </td>\n          }\n\n          @case ('actions') {\n            <th\n              cdk-header-cell\n              *cdkHeaderCellDef\n              data-type=\"icon\"\n            >\n              <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n            </th>\n\n            <td\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              data-type=\"icon\"\n            >\n              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        data-cy=\"c8y-data-grid--edit-button-in-row\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                      </button>\n                    }\n                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btn btn-dot btn-dot--danger showOnHover\"\n                        [attr.aria-label]=\"'Delete' | translate\"\n                        tooltip=\"{{ 'Delete' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        data-cy=\"c8y-data-grid--remove-button-in-row\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                      </button>\n                    }\n                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                        [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                      >\n                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\n                  >\n                    <button\n                      class=\"dropdown-toggle c8y-dropdown\"\n                      title=\"{{ 'Actions' | translate }}\"\n                      aria-haspopup=\"true\"\n                      type=\"button\"\n                      data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"ellipsis-v\"></i>\n                    </button>\n                    <ul\n                      class=\"dropdown-menu dropdown-menu-right\"\n                      *dropdownMenu\n                    >\n                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EDIT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"pencil\"></i>\n                                {{ 'Edit' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.DELETE_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"delete\"></i>\n                                {{ 'Delete' | translate }}\n                              </button>\n                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.EXPORT_ITEM,\n                                  id: row.id\n                                }\"\n                                c8yProductExperience\n                                inherit\n                              >\n                                <i c8yIcon=\"data-export\"></i>\n                                {{ 'Export' | translate }}\n                              </button>\n                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\n                                (click)=\"actionControl.callback(row, reload.bind(this))\"\n                                c8yProductExperience\n                                inherit\n                                [actionData]=\"{\n                                  action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                                  customActionName: actionControl.text,\n                                  id: row.id\n                                }\"\n                              >\n                                <i\n                                  c8yIcon=\"{{ actionControl.icon }}\"\n                                  [ngClass]=\"actionControl.iconClasses\"\n                                ></i>\n                                {{ actionControl.text | translate }}\n                              </button>\n                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\n            <th\n              [class.sorted]=\"column.sortOrder\"\n              [class.filtered]=\"column | map: isColumnFilteringApplied\"\n              [class.hidden]=\"!column.visible\"\n              cdk-header-cell\n              *cdkHeaderCellDef\n              [ngClass]=\"column.headerCSSClassName\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n                  dropdown\n                  #gridHeaderDropdown=\"bs-dropdown\"\n                  [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n                  [insideClick]=\"true\"\n                >\n                  <button\n                    class=\"btn-header\"\n                    [title]=\"(column.header | translate) || column.name\"\n                    type=\"button\"\n                    [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                    dropdownToggle\n                  >\n                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\n                    <i\n                      c8yIcon=\"filter\"\n                      title=\"{{ 'Filter' | translate }}\"\n                    ></i>\n                  </button>\n\n                  <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n                  <ul\n                    class=\"dropdown-menu\"\n                    *dropdownMenu\n                    [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <li class=\"data-grid__dropdown\">\n                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\n                        <c8y-filtering-form-renderer\n                          class=\"bg-component\"\n                          [spec]=\"filteringFormRendererSpec\"\n                          data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                        ></c8y-filtering-form-renderer>\n                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\n            </th>\n\n            <td\n              [class.hidden]=\"!column.visible\"\n              [attr.data-cell-title]=\"column.header | translate\"\n              cdk-cell\n              *cdkCellDef=\"let row\"\n              [ngClass]=\"column.cellCSSClassName\"\n              [attr.data-cy]=\"'data-grid--' + column.header\"\n              [attr.data-type]=\"column.dataType\"\n            >\n              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\n      <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n        <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            emptyState?.templateRef;\n            context: { $implicit: emptyStateContext$ | async }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  }\n\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\n            data-cy=\"data-grid--counter\"\n          >\n            <span\n              class=\"text-muted\"\n              ngNonBindable\n              translate\n              [translateParams]=\"paginationLabelParams\"\n            >\n              {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n            </span>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\n            <label\n              class=\"m-r-4\"\n              for=\"filteredSize\"\n            >\n              {{ 'Items per page' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"filteredSize\"\n                data-cy=\"data-grid--pagesize-options\"\n                [ngModel]=\"pagination.pageSize\"\n                (ngModelChange)=\"\n                  updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n                \"\n              >\n                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\n            [ngModel]=\"pagination.currentPage\"\n            (pageChanged)=\"updatePagination($event)\"\n            [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n            [itemsPerPage]=\"pagination.pageSize\"\n            (numPages)=\"totalPagesCount$.next($event)\"\n            [maxSize]=\"5\"\n            [boundaryLinks]=\"false\"\n            [previousText]=\"'Previous' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -37892,7 +38152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: RealtimeSubjectService }] });
 
 /**
- * A service for handling bulk operation realtime notifications in RxJS fashion.
+ * A service for handling operation realtime notifications in RxJS fashion.
  */
 class OperationRealtimeService extends RealtimeService {
     constructor(realtimeSubject) {
@@ -39387,5 +39647,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatapointSyncService, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IconPanelComponent, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, SplitViewAlertsComponent, SplitViewComponent, SplitViewDetailsActionsComponent, SplitViewDetailsComponent, SplitViewExtraHeaderComponent, SplitViewFooterComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, SplitViewListItemDirective, SplitViewSelectionService, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, StripHtmlPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetActionWrapperComponent, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
+export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatapointSyncService, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DropdownFocusTrapDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IconPanelComponent, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, SplitViewAlertsComponent, SplitViewComponent, SplitViewDetailsActionsComponent, SplitViewDetailsComponent, SplitViewExtraHeaderComponent, SplitViewFooterComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, SplitViewListItemDirective, SplitViewSelectionService, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, StripHtmlPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetActionWrapperComponent, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
 //# sourceMappingURL=c8y-ngx-components.mjs.map