@c8y/ngx-components 1022.44.3 → 1022.44.7

package/fesm2022/c8y-ngx-components-editor.mjs

@@ -6,7 +6,30 @@ import { LoadingComponent } from '@c8y/ngx-components';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgIf } from '@angular/common';
 
+function initializeMonacoEnvironment() {
+    if (typeof window.MonacoEnvironment === 'undefined') {
+        window.MonacoEnvironment = {
+            getWorkerUrl: function (moduleId, label) {
+                const base = MONACO_WORKERS_BASE;
+                switch (label) {
+                    case 'json':
+                        return `${base}json.worker.bundle.js`;
+                    case 'css':
+                        return `${base}css.worker.bundle.js`;
+                    case 'html':
+                        return `${base}html.worker.bundle.js`;
+                    case 'typescript':
+                    case 'javascript':
+                        return `${base}ts.worker.bundle.js`;
+                    default:
+                        return `${base}editor.worker.bundle.js`;
+                }
+            }
+        };
+    }
+}
 async function loadMonacoEditor() {
+    initializeMonacoEnvironment();
     const monaco = await import('monaco-editor');
     return monaco.default || monaco;
 }
@@ -209,5 +232,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EditorComponent, MonacoEditorMarkerValidatorDirective, loadMonacoEditor };
+export { EditorComponent, MonacoEditorMarkerValidatorDirective, initializeMonacoEnvironment, loadMonacoEditor };
 //# sourceMappingURL=c8y-ngx-components-editor.mjs.map

package/fesm2022/c8y-ngx-components-editor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-editor.mjs","sources":["../../editor/editor.component.ts","../../editor/editor.component.html","../../editor/monaco-editor-marker.directive.ts","../../editor/c8y-ngx-components-editor.ts"],"sourcesContent":["import {\n  Component,\n  AfterViewInit,\n  OnDestroy,\n  NgZone,\n  ViewChild,\n  ElementRef,\n  forwardRef,\n  Input,\n  Output,\n  EventEmitter,\n  SimpleChanges,\n  OnChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport type * as Monaco from 'monaco-editor';\nimport { LoadingComponent, ThemeOptions, ThemeSwitcherService } from '@c8y/ngx-components';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Observable } from 'rxjs';\nimport { NgIf } from '@angular/common';\n\nexport async function loadMonacoEditor() {\n  const monaco = await import('monaco-editor');\n  return monaco.default || monaco;\n}\n\n/**\n * Editor component for displaying and editing code\n *\n * Based on the monaco editor (the same editor as in VS Code)\n * Supports syntax highlighting for various languages (default: JSON)\n * and can be extended with additional features like JSON schema validation\n */\n@Component({\n  selector: 'c8y-editor',\n  templateUrl: './editor.component.html',\n  standalone: true,\n  imports: [LoadingComponent, NgIf],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => EditorComponent),\n      multi: true\n    }\n  ]\n})\nexport class EditorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor, OnChanges {\n  /**\n   * Options to pass to the monaco editor instance\n   * Allows to e.g. set a different language.\n   */\n  @Input() editorOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {};\n  /**\n   * Overrides application theme. If not set, the theme will be taken from the theme switcher service.\n   */\n  @Input() theme: ThemeOptions | null;\n  /**\n   * Emits the editor instance once it is initialized\n   * Can be used to e.g. access the monaco instance and add a JSON schema for validation\n   */\n  @Output() editorInit = new EventEmitter<Monaco.editor.IStandaloneCodeEditor>();\n  monaco: typeof Monaco;\n  editor: Monaco.editor.IStandaloneCodeEditor;\n\n  private _readOnly = false;\n  private _currentValue = '';\n  private _onChanges: (value: string) => void;\n  private _onTouched: () => void;\n  @ViewChild('editorContainer', { static: true }) _editorContainer: ElementRef;\n  private themeChanges$: Observable<ThemeOptions>;\n\n  constructor(\n    private zone: NgZone,\n    private themeSwitcher: ThemeSwitcherService\n  ) {\n    this.themeChanges$ = this.themeSwitcher.currentlyAppliedTheme$.pipe(takeUntilDestroyed());\n  }\n\n  writeValue(obj: string | object): void {\n    if (typeof obj === 'string') {\n      this._currentValue = obj;\n    } else {\n      this._currentValue = JSON.stringify(obj, null, 2);\n    }\n\n    if (this.editor) {\n      this.editor.setValue(this._currentValue);\n    }\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this._onChanges = fn;\n    this.register();\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n    this.register();\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this._readOnly = isDisabled;\n  }\n\n  async ngAfterViewInit(): Promise<void> {\n    this.monaco = await loadMonacoEditor();\n    this.editor = this.monaco.editor.create(\n      this._editorContainer.nativeElement,\n      Object.assign(\n        {\n          value: this._currentValue || '',\n          language: 'json',\n          automaticLayout: true,\n          readOnly: this._readOnly\n        },\n        this.editorOptions\n      )\n    );\n    (<any>window).monacoEditor = this.editor;\n    this.editorInit.emit(this.editor);\n    this.register();\n    if (this.theme) {\n      this.setTheme(this.theme);\n    } else {\n      this.themeChanges$.subscribe(theme => {\n        this.setTheme(theme);\n      });\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.editorOptions && this.editor) {\n      this.updateOptionsAndLanguage(changes);\n    }\n  }\n\n  register() {\n    if (!this.editor) {\n      return;\n    }\n    if (this._onChanges) {\n      const onChanges = this._onChanges;\n      this.editor.onDidChangeModelContent(() => {\n        this.zone.run(() => {\n          const value = this.editor.getValue();\n          this._currentValue = value;\n          onChanges(value);\n        });\n      });\n      this._onChanges = undefined;\n    }\n\n    if (this._onTouched) {\n      const onTouched = this._onTouched;\n      this.editor.onDidChangeModelContent(() => {\n        this.zone.run(() => {\n          onTouched();\n        });\n      });\n      this._onTouched = undefined;\n    }\n  }\n\n  ngOnDestroy() {\n    this.editor?.getModel().dispose();\n    this.editor?.dispose();\n  }\n\n  private setTheme(theme: ThemeOptions) {\n    const themeToSet = theme === 'dark' ? `vs-dark` : 'vs';\n    this.monaco.editor.setTheme(themeToSet);\n  }\n\n  private updateOptionsAndLanguage(changes: SimpleChanges) {\n    this.editor.updateOptions(this.editorOptions);\n    if (this.editorOptions.language !== changes.editorOptions.previousValue.language) {\n      const model = this.editor.getModel();\n      if (model) {\n        this.monaco.editor.setModelLanguage(model, this.editorOptions.language);\n      }\n    }\n  }\n}\n","<c8y-loading *ngIf=\"!monaco\"></c8y-loading>\n<div class=\"editor-container\" style=\"height: 100%\" #editorContainer></div>\n","import { Directive, NgZone, OnDestroy, forwardRef } from '@angular/core';\nimport { EditorComponent } from './editor.component';\nimport { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\n@Directive({\n  selector: 'c8y-editor [monacoEditorMarkerValidator]',\n  standalone: true,\n  providers: [\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => MonacoEditorMarkerValidatorDirective),\n      multi: true\n    }\n  ]\n})\nexport class MonacoEditorMarkerValidatorDirective implements Validator, OnDestroy {\n  private editorInitSubscription: Subscription;\n\n  constructor(\n    private editorComponent: EditorComponent,\n    private zone: NgZone\n  ) {}\n\n  ngOnDestroy(): void {\n    this.editorInitSubscription?.unsubscribe();\n  }\n\n  validate(_control: AbstractControl<any, any>): ValidationErrors {\n    if (!this.editorComponent.monaco || !this.editorComponent.editor) {\n      return null;\n    }\n    const uri = this.editorComponent.editor.getModel().uri;\n    const markers = this.editorComponent.monaco.editor.getModelMarkers({ resource: uri });\n    if (markers.length) {\n      return markers;\n    }\n\n    return null;\n  }\n\n  registerOnValidatorChange(fn: () => void): void {\n    this.editorInitSubscription = this.editorComponent.editorInit.subscribe(editor => {\n      editor.onDidChangeModelDecorations(() => {\n        this.zone.run(() => {\n          fn();\n        });\n      });\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.EditorComponent"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-editor.mjs","sources":["../../editor/editor.component.ts","../../editor/editor.component.html","../../editor/monaco-editor-marker.directive.ts","../../editor/c8y-ngx-components-editor.ts"],"sourcesContent":["import {\n  Component,\n  AfterViewInit,\n  OnDestroy,\n  NgZone,\n  ViewChild,\n  ElementRef,\n  forwardRef,\n  Input,\n  Output,\n  EventEmitter,\n  SimpleChanges,\n  OnChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport type * as Monaco from 'monaco-editor';\nimport { LoadingComponent, ThemeOptions, ThemeSwitcherService } from '@c8y/ngx-components';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Observable } from 'rxjs';\nimport { NgIf } from '@angular/common';\n\ndeclare const MONACO_WORKERS_BASE: string;\n\nexport function initializeMonacoEnvironment() {\n  if (typeof (window as any).MonacoEnvironment === 'undefined') {\n    (window as any).MonacoEnvironment = {\n      getWorkerUrl: function (moduleId: string, label: string) {\n        const base = MONACO_WORKERS_BASE;\n\n        switch (label) {\n          case 'json':\n            return `${base}json.worker.bundle.js`;\n          case 'css':\n            return `${base}css.worker.bundle.js`;\n          case 'html':\n            return `${base}html.worker.bundle.js`;\n          case 'typescript':\n          case 'javascript':\n            return `${base}ts.worker.bundle.js`;\n          default:\n            return `${base}editor.worker.bundle.js`;\n        }\n      }\n    };\n  }\n}\n\nexport async function loadMonacoEditor() {\n  initializeMonacoEnvironment();\n  const monaco = await import('monaco-editor');\n  return monaco.default || monaco;\n}\n\n/**\n * Editor component for displaying and editing code\n *\n * Based on the monaco editor (the same editor as in VS Code)\n * Supports syntax highlighting for various languages (default: JSON)\n * and can be extended with additional features like JSON schema validation\n */\n@Component({\n  selector: 'c8y-editor',\n  templateUrl: './editor.component.html',\n  standalone: true,\n  imports: [LoadingComponent, NgIf],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => EditorComponent),\n      multi: true\n    }\n  ]\n})\nexport class EditorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor, OnChanges {\n  /**\n   * Options to pass to the monaco editor instance\n   * Allows to e.g. set a different language.\n   */\n  @Input() editorOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {};\n  /**\n   * Overrides application theme. If not set, the theme will be taken from the theme switcher service.\n   */\n  @Input() theme: ThemeOptions | null;\n  /**\n   * Emits the editor instance once it is initialized\n   * Can be used to e.g. access the monaco instance and add a JSON schema for validation\n   */\n  @Output() editorInit = new EventEmitter<Monaco.editor.IStandaloneCodeEditor>();\n  monaco: typeof Monaco;\n  editor: Monaco.editor.IStandaloneCodeEditor;\n\n  private _readOnly = false;\n  private _currentValue = '';\n  private _onChanges: (value: string) => void;\n  private _onTouched: () => void;\n  @ViewChild('editorContainer', { static: true }) _editorContainer: ElementRef;\n  private themeChanges$: Observable<ThemeOptions>;\n\n  constructor(\n    private zone: NgZone,\n    private themeSwitcher: ThemeSwitcherService\n  ) {\n    this.themeChanges$ = this.themeSwitcher.currentlyAppliedTheme$.pipe(takeUntilDestroyed());\n  }\n\n  writeValue(obj: string | object): void {\n    if (typeof obj === 'string') {\n      this._currentValue = obj;\n    } else {\n      this._currentValue = JSON.stringify(obj, null, 2);\n    }\n\n    if (this.editor) {\n      this.editor.setValue(this._currentValue);\n    }\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this._onChanges = fn;\n    this.register();\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n    this.register();\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this._readOnly = isDisabled;\n  }\n\n  async ngAfterViewInit(): Promise<void> {\n    this.monaco = await loadMonacoEditor();\n    this.editor = this.monaco.editor.create(\n      this._editorContainer.nativeElement,\n      Object.assign(\n        {\n          value: this._currentValue || '',\n          language: 'json',\n          automaticLayout: true,\n          readOnly: this._readOnly\n        },\n        this.editorOptions\n      )\n    );\n    (<any>window).monacoEditor = this.editor;\n    this.editorInit.emit(this.editor);\n    this.register();\n    if (this.theme) {\n      this.setTheme(this.theme);\n    } else {\n      this.themeChanges$.subscribe(theme => {\n        this.setTheme(theme);\n      });\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.editorOptions && this.editor) {\n      this.updateOptionsAndLanguage(changes);\n    }\n  }\n\n  register() {\n    if (!this.editor) {\n      return;\n    }\n    if (this._onChanges) {\n      const onChanges = this._onChanges;\n      this.editor.onDidChangeModelContent(() => {\n        this.zone.run(() => {\n          const value = this.editor.getValue();\n          this._currentValue = value;\n          onChanges(value);\n        });\n      });\n      this._onChanges = undefined;\n    }\n\n    if (this._onTouched) {\n      const onTouched = this._onTouched;\n      this.editor.onDidChangeModelContent(() => {\n        this.zone.run(() => {\n          onTouched();\n        });\n      });\n      this._onTouched = undefined;\n    }\n  }\n\n  ngOnDestroy() {\n    this.editor?.getModel().dispose();\n    this.editor?.dispose();\n  }\n\n  private setTheme(theme: ThemeOptions) {\n    const themeToSet = theme === 'dark' ? `vs-dark` : 'vs';\n    this.monaco.editor.setTheme(themeToSet);\n  }\n\n  private updateOptionsAndLanguage(changes: SimpleChanges) {\n    this.editor.updateOptions(this.editorOptions);\n    if (this.editorOptions.language !== changes.editorOptions.previousValue.language) {\n      const model = this.editor.getModel();\n      if (model) {\n        this.monaco.editor.setModelLanguage(model, this.editorOptions.language);\n      }\n    }\n  }\n}\n","<c8y-loading *ngIf=\"!monaco\"></c8y-loading>\n<div class=\"editor-container\" style=\"height: 100%\" #editorContainer></div>\n","import { Directive, NgZone, OnDestroy, forwardRef } from '@angular/core';\nimport { EditorComponent } from './editor.component';\nimport { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\n@Directive({\n  selector: 'c8y-editor [monacoEditorMarkerValidator]',\n  standalone: true,\n  providers: [\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => MonacoEditorMarkerValidatorDirective),\n      multi: true\n    }\n  ]\n})\nexport class MonacoEditorMarkerValidatorDirective implements Validator, OnDestroy {\n  private editorInitSubscription: Subscription;\n\n  constructor(\n    private editorComponent: EditorComponent,\n    private zone: NgZone\n  ) {}\n\n  ngOnDestroy(): void {\n    this.editorInitSubscription?.unsubscribe();\n  }\n\n  validate(_control: AbstractControl<any, any>): ValidationErrors {\n    if (!this.editorComponent.monaco || !this.editorComponent.editor) {\n      return null;\n    }\n    const uri = this.editorComponent.editor.getModel().uri;\n    const markers = this.editorComponent.monaco.editor.getModelMarkers({ resource: uri });\n    if (markers.length) {\n      return markers;\n    }\n\n    return null;\n  }\n\n  registerOnValidatorChange(fn: () => void): void {\n    this.editorInitSubscription = this.editorComponent.editorInit.subscribe(editor => {\n      editor.onDidChangeModelDecorations(() => {\n        this.zone.run(() => {\n          fn();\n        });\n      });\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.EditorComponent"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-sub-assets.mjs

@@ -12,6 +12,7 @@ import { AssetTypeGridColumn, AssetTypeCellRendererComponent } from '@c8y/ngx-co
 import * as i1 from '@ngx-translate/core';
 import { firstValueFrom, catchError, of, Subject, delay, takeUntil as takeUntil$1, tap } from 'rxjs';
 import { NgIf, NgFor, NgClass, NgTemplateOutlet, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, AsyncPipe } from '@angular/common';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkStep } from '@angular/cdk/stepper';
 import * as i4$1 from '@c8y/ngx-components/device-list';
 import * as i2$1 from 'ngx-bootstrap/modal';
@@ -960,11 +961,11 @@ class AssignChildDevicesComponent {
         this.selected = selectedDevicesIDs;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssignChildDevicesComponent, deps: [{ token: i3.AlertService }, { token: SubAssetsService }, { token: i2.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AssignChildDevicesComponent, isStandalone: true, selector: "c8y-assign-child-devices", inputs: { currentGroupId: "currentGroupId", parentDevice: "parentDevice", refresh: "refresh", onlySelect: "onlySelect" }, outputs: { onCancel: "onCancel", onSelectedDevices: "onSelectedDevices" }, host: { listeners: { "document:keydown.enter": "onEnterKeyDown($event)", "document:keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <h4 class=\"text-center text-medium\">\n        {{ 'Assign child devices' | translate }}\n      </h4>\n    </div>\n  </div>\n</div>\n\n<c8y-sub-assets-grid\n  [title]=\"''\"\n  [emptyStateText]=\"'All child devices are already assigned' | translate\"\n  [refresh]=\"refresh\"\n  [actionControls]=\"[]\"\n  [columnsConfigKey]=\"'assign-child-devices'\"\n  [selectable]=\"true\"\n  [parent-group]=\"parentDevice\"\n  [baseQuery]=\"baseQuery\"\n  (itemsSelect)=\"onSelected($event)\"\n  class=\"d-contents\"\n></c8y-sub-assets-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    (click)=\"onCancel.emit()\"\n    type=\"button\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    (click)=\"assignDevices()\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    title=\"{{ 'Assign' | translate }}\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: SubAssetsGridComponent, selector: "c8y-sub-assets-grid", inputs: ["parent-group", "refresh", "title", "emptyStateText", "loadingItemsLabel", "columnsConfigKey", "columns", "pagination", "actionControls", "selectable", "baseQuery", "bulkActionControls", "filterable", "sortable", "displayOptions"], outputs: ["onColumnsChange", "itemsSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AssignChildDevicesComponent, isStandalone: true, selector: "c8y-assign-child-devices", inputs: { currentGroupId: "currentGroupId", parentDevice: "parentDevice", refresh: "refresh", onlySelect: "onlySelect" }, outputs: { onCancel: "onCancel", onSelectedDevices: "onSelectedDevices" }, host: { listeners: { "document:keydown.enter": "onEnterKeyDown($event)", "document:keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <h4 class=\"text-center text-medium\" id=\"childDevicesDrawerTitle\">\n        {{ 'Assign child devices' | translate }}\n      </h4>\n    </div>\n  </div>\n</div>\n\n<c8y-sub-assets-grid\n  [title]=\"''\"\n  [emptyStateText]=\"'All child devices are already assigned' | translate\"\n  [refresh]=\"refresh\"\n  [actionControls]=\"[]\"\n  [columnsConfigKey]=\"'assign-child-devices'\"\n  [selectable]=\"true\"\n  [parent-group]=\"parentDevice\"\n  [baseQuery]=\"baseQuery\"\n  (itemsSelect)=\"onSelected($event)\"\n  class=\"d-contents\"\n></c8y-sub-assets-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    (click)=\"onCancel.emit()\"\n    type=\"button\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    (click)=\"assignDevices()\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    title=\"{{ 'Assign' | translate }}\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: SubAssetsGridComponent, selector: "c8y-sub-assets-grid", inputs: ["parent-group", "refresh", "title", "emptyStateText", "loadingItemsLabel", "columnsConfigKey", "columns", "pagination", "actionControls", "selectable", "baseQuery", "bulkActionControls", "filterable", "sortable", "displayOptions"], outputs: ["onColumnsChange", "itemsSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssignChildDevicesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-assign-child-devices', imports: [SubAssetsGridComponent, NgClass, C8yTranslatePipe], template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <h4 class=\"text-center text-medium\">\n        {{ 'Assign child devices' | translate }}\n      </h4>\n    </div>\n  </div>\n</div>\n\n<c8y-sub-assets-grid\n  [title]=\"''\"\n  [emptyStateText]=\"'All child devices are already assigned' | translate\"\n  [refresh]=\"refresh\"\n  [actionControls]=\"[]\"\n  [columnsConfigKey]=\"'assign-child-devices'\"\n  [selectable]=\"true\"\n  [parent-group]=\"parentDevice\"\n  [baseQuery]=\"baseQuery\"\n  (itemsSelect)=\"onSelected($event)\"\n  class=\"d-contents\"\n></c8y-sub-assets-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    (click)=\"onCancel.emit()\"\n    type=\"button\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    (click)=\"assignDevices()\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    title=\"{{ 'Assign' | translate }}\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n" }]
+            args: [{ selector: 'c8y-assign-child-devices', imports: [SubAssetsGridComponent, NgClass, C8yTranslatePipe], template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <h4 class=\"text-center text-medium\" id=\"childDevicesDrawerTitle\">\n        {{ 'Assign child devices' | translate }}\n      </h4>\n    </div>\n  </div>\n</div>\n\n<c8y-sub-assets-grid\n  [title]=\"''\"\n  [emptyStateText]=\"'All child devices are already assigned' | translate\"\n  [refresh]=\"refresh\"\n  [actionControls]=\"[]\"\n  [columnsConfigKey]=\"'assign-child-devices'\"\n  [selectable]=\"true\"\n  [parent-group]=\"parentDevice\"\n  [baseQuery]=\"baseQuery\"\n  (itemsSelect)=\"onSelected($event)\"\n  class=\"d-contents\"\n></c8y-sub-assets-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    (click)=\"onCancel.emit()\"\n    type=\"button\"\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    (click)=\"assignDevices()\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    title=\"{{ 'Assign' | translate }}\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i3.AlertService }, { type: SubAssetsService }, { type: i2.InventoryService }], propDecorators: { currentGroupId: [{
                 type: Input
             }], parentDevice: [{
@@ -1110,7 +1111,7 @@ class AddGroupComponent {
         this.showChildrenForDevice = asset;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddGroupComponent, deps: [{ token: i1$1.FormBuilder }, { token: AddGroupService }, { token: i3.AlertService }, { token: SubAssetsService }, { token: i3.GainsightService }, { token: i3.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AddGroupComponent, isStandalone: true, selector: "c8y-add-group", inputs: { currentGroupId: "currentGroupId", refresh: "refresh" }, outputs: { onDeviceQueryStringChange: "onDeviceQueryStringChange", onCancel: "onCancel" }, host: { listeners: { "document:keydown.enter": "onEnterKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true }, { propertyName: "nameInputRef", first: true, predicate: ["nameRef"], descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{ drawerOpen: true }\"\n  *ngIf=\"!currentGroupId; else stepper\"\n>\n  <div class=\"bottom-drawer\">\n    <div class=\"d-contents\">\n      <ng-container [ngTemplateOutlet]=\"stepper\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #stepper>\n  <c8y-stepper\n    class=\"d-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns\"\n    [disableDefaultIcons]=\"{ edit: true, done: false }\"\n    [customClasses]=\"['col-md-6', 'col-md-offset-3', 'm-t-24', 'm-b-40', 'p-0', 'flex-no-shrink']\"\n    linear\n    c8yProductExperience\n    inherit\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n  >\n    <cdk-step\n      [stepControl]=\"formGroupStepOne\"\n      [label]=\"'New group' | translate\"\n    >\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\">\n              {{ 'New group' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 flex-grow no-gutter\">\n        <div class=\"card-inner-scroll fit-h\">\n          <div class=\"card-block p-b-0\">\n            <div class=\"row\">\n              <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n                <c8y-form-group [novalidation]=\"true\">\n                  <div [formGroup]=\"formGroupStepOne\">\n                    <c8y-form-group>\n                      <label translate>Name</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. First floor' | translate }} \"\n                        type=\"text\"\n                        required\n                        formControlName=\"name\"\n                        maxlength=\"254\"\n                        #nameRef\n                      />\n                    </c8y-form-group>\n\n                    <c8y-form-group>\n                      <label translate>Description</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. first floor devices' | translate }}\"\n                        type=\"text\"\n                        formControlName=\"description\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <div [formGroup]=\"formGroupStepOne\"></div>\n                </c8y-form-group>\n                <div\n                  class=\"alert alert-info max-width-100\"\n                  translate\n                  *ngIf=\"!canAssignDevice\"\n                >\n                  You don't have permission to assign devices.\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [disabled]=\"!canCreateGroup\"\n        [labels]=\"\n          canAssignDevice\n            ? { next: btnLabels.next, cancel: btnLabels.cancel }\n            : { custom: btnLabels.create, cancel: btnLabels.cancel }\n        \"\n        [showButtons]=\"\n          canAssignDevice ? { next: true, cancel: true } : { custom: true, cancel: true }\n        \"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"'Assign devices' | translate\">\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\">\n              {{ 'Assign devices' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 no-gutter flex-grow\">\n        <c8y-device-grid\n          [title]=\"'Select target devices' | translate\"\n          [actionControls]=\"actionControls\"\n          [infiniteScroll]=\"'auto'\"\n          [selectable]=\"true\"\n          [withChildren]=\"true\"\n          [pagination]=\"pagination\"\n          (itemsSelect)=\"onSelected($event)\"\n          [refresh]=\"refresh\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n        ></c8y-device-grid>\n      </div>\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [labels]=\"{ custom: btnLabels.create }\"\n        [disabled]=\"!canAssignDevice\"\n        [pending]=\"pendingStatus\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</ng-template>\n\n<div\n  *ngIf=\"showAssignChildDevices\"\n  [ngClass]=\"{ drawerOpen: showAssignChildDevices }\"\n>\n  <div\n    class=\"m-t-40 bottom-drawer\"\n    [ngStyle]=\"!!currentGroupId && { right: '0px'  }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n        [onlySelect]=\"true\"\n        (onSelectedDevices)=\"onSelectedChildDevices($event)\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: DeviceGridComponent, selector: "c8y-device-grid", inputs: ["dataCallback", "refresh", "title", "loadMoreItemsLabel", "loadingItemsLabel", "legacyConfigKey", "legacyFilterKey", "columns", "pagination", "infiniteScroll", "actionControls", "selectable", "singleSelection", "baseQuery", "bulkActionControls", "headerActionControls", "childDeviceGrid", "parentDeviceId", "withChildren", "showSearch", "activeClassName"], outputs: ["onColumnsChange", "onFilterChange", "onDeviceQueryStringChange", "itemsSelect"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AssignChildDevicesComponent, selector: "c8y-assign-child-devices", inputs: ["currentGroupId", "parentDevice", "refresh", "onlySelect"], outputs: ["onCancel", "onSelectedDevices"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AddGroupComponent, isStandalone: true, selector: "c8y-add-group", inputs: { currentGroupId: "currentGroupId", refresh: "refresh" }, outputs: { onDeviceQueryStringChange: "onDeviceQueryStringChange", onCancel: "onCancel" }, host: { listeners: { "document:keydown.enter": "onEnterKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true }, { propertyName: "nameInputRef", first: true, predicate: ["nameRef"], descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{ drawerOpen: true }\"\n  *ngIf=\"!currentGroupId; else stepper\"\n>\n  <div class=\"bottom-drawer has-backdrop\"\n    role=\"dialog\" \n    [cdkTrapFocus]=\"!currentGroupId\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\">\n    <div class=\"d-contents\">\n      <ng-container [ngTemplateOutlet]=\"stepper\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #stepper>\n  <c8y-stepper\n    class=\"d-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns\"\n    [disableDefaultIcons]=\"{ edit: true, done: false }\"\n    [disableProgressButtons]=\"true\"\n    [customClasses]=\"['col-md-6', 'col-md-offset-3', 'm-t-24', 'm-b-40', 'p-0', 'flex-no-shrink']\"\n    linear\n    c8yProductExperience\n    inherit\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n  >\n    <cdk-step\n      [stepControl]=\"formGroupStepOne\"\n      [label]=\"'New group' | translate\"\n    >\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\" id=\"drawerTitle\">\n              {{ 'New group' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 flex-grow no-gutter\">\n        <div class=\"card-inner-scroll fit-h\">\n          <div class=\"card-block p-b-0\">\n            <div class=\"row\">\n              <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n                <c8y-form-group [novalidation]=\"true\">\n                  <div [formGroup]=\"formGroupStepOne\">\n                    <c8y-form-group>\n                      <label translate>Name</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. First floor' | translate }} \"\n                        type=\"text\"\n                        required\n                        formControlName=\"name\"\n                        maxlength=\"254\"\n                        #nameRef\n                      />\n                    </c8y-form-group>\n\n                    <c8y-form-group>\n                      <label translate>Description</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. first floor devices' | translate }}\"\n                        type=\"text\"\n                        formControlName=\"description\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <div [formGroup]=\"formGroupStepOne\"></div>\n                </c8y-form-group>\n                <div\n                  class=\"alert alert-info max-width-100\"\n                  translate\n                  *ngIf=\"!canAssignDevice\"\n                >\n                  You don't have permission to assign devices.\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [disabled]=\"!canCreateGroup\"\n        [labels]=\"\n          canAssignDevice\n            ? { next: btnLabels.next, cancel: btnLabels.cancel }\n            : { custom: btnLabels.create, cancel: btnLabels.cancel }\n        \"\n        [showButtons]=\"\n          canAssignDevice ? { next: true, cancel: true } : { custom: true, cancel: true }\n        \"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"'Assign devices' | translate\">\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\">\n              {{ 'Assign devices' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 no-gutter flex-grow\">\n        <c8y-device-grid\n          [title]=\"'Select target devices' | translate\"\n          [actionControls]=\"actionControls\"\n          [infiniteScroll]=\"'auto'\"\n          [selectable]=\"true\"\n          [withChildren]=\"true\"\n          [pagination]=\"pagination\"\n          (itemsSelect)=\"onSelected($event)\"\n          [refresh]=\"refresh\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n        ></c8y-device-grid>\n      </div>\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [labels]=\"{ custom: btnLabels.create }\"\n        [disabled]=\"!canAssignDevice\"\n        [pending]=\"pendingStatus\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</ng-template>\n\n<div\n  *ngIf=\"showAssignChildDevices\"\n  [ngClass]=\"{ drawerOpen: showAssignChildDevices }\"\n>\n  <div\n    class=\"m-t-40 bottom-drawer has-backdrop\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"childDevicesDrawerTitle\"\n    [ngStyle]=\"!!currentGroupId && { right: '0px'  }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n        [onlySelect]=\"true\"\n        (onSelectedDevices)=\"onSelectedChildDevices($event)\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }, { kind: "component", type: DeviceGridComponent, selector: "c8y-device-grid", inputs: ["dataCallback", "refresh", "title", "loadMoreItemsLabel", "loadingItemsLabel", "legacyConfigKey", "legacyFilterKey", "columns", "pagination", "infiniteScroll", "actionControls", "selectable", "singleSelection", "baseQuery", "bulkActionControls", "headerActionControls", "childDeviceGrid", "parentDeviceId", "withChildren", "showSearch", "activeClassName"], outputs: ["onColumnsChange", "onFilterChange", "onDeviceQueryStringChange", "itemsSelect"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AssignChildDevicesComponent, selector: "c8y-assign-child-devices", inputs: ["currentGroupId", "parentDevice", "refresh", "onlySelect"], outputs: ["onCancel", "onSelectedDevices"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddGroupComponent, decorators: [{
             type: Component,
@@ -1121,6 +1122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         C8yStepper,
                         ProductExperienceDirective,
                         CdkStep,
+                        CdkTrapFocus,
                         FormGroupComponent,
                         FormsModule,
                         ReactiveFormsModule,
@@ -1131,7 +1133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         NgStyle,
                         AssignChildDevicesComponent,
                         C8yTranslatePipe
-                    ], template: "<div\n  [ngClass]=\"{ drawerOpen: true }\"\n  *ngIf=\"!currentGroupId; else stepper\"\n>\n  <div class=\"bottom-drawer\">\n    <div class=\"d-contents\">\n      <ng-container [ngTemplateOutlet]=\"stepper\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #stepper>\n  <c8y-stepper\n    class=\"d-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns\"\n    [disableDefaultIcons]=\"{ edit: true, done: false }\"\n    [customClasses]=\"['col-md-6', 'col-md-offset-3', 'm-t-24', 'm-b-40', 'p-0', 'flex-no-shrink']\"\n    linear\n    c8yProductExperience\n    inherit\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n  >\n    <cdk-step\n      [stepControl]=\"formGroupStepOne\"\n      [label]=\"'New group' | translate\"\n    >\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\">\n              {{ 'New group' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 flex-grow no-gutter\">\n        <div class=\"card-inner-scroll fit-h\">\n          <div class=\"card-block p-b-0\">\n            <div class=\"row\">\n              <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n                <c8y-form-group [novalidation]=\"true\">\n                  <div [formGroup]=\"formGroupStepOne\">\n                    <c8y-form-group>\n                      <label translate>Name</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. First floor' | translate }} \"\n                        type=\"text\"\n                        required\n                        formControlName=\"name\"\n                        maxlength=\"254\"\n                        #nameRef\n                      />\n                    </c8y-form-group>\n\n                    <c8y-form-group>\n                      <label translate>Description</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. first floor devices' | translate }}\"\n                        type=\"text\"\n                        formControlName=\"description\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <div [formGroup]=\"formGroupStepOne\"></div>\n                </c8y-form-group>\n                <div\n                  class=\"alert alert-info max-width-100\"\n                  translate\n                  *ngIf=\"!canAssignDevice\"\n                >\n                  You don't have permission to assign devices.\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [disabled]=\"!canCreateGroup\"\n        [labels]=\"\n          canAssignDevice\n            ? { next: btnLabels.next, cancel: btnLabels.cancel }\n            : { custom: btnLabels.create, cancel: btnLabels.cancel }\n        \"\n        [showButtons]=\"\n          canAssignDevice ? { next: true, cancel: true } : { custom: true, cancel: true }\n        \"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"'Assign devices' | translate\">\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\">\n              {{ 'Assign devices' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 no-gutter flex-grow\">\n        <c8y-device-grid\n          [title]=\"'Select target devices' | translate\"\n          [actionControls]=\"actionControls\"\n          [infiniteScroll]=\"'auto'\"\n          [selectable]=\"true\"\n          [withChildren]=\"true\"\n          [pagination]=\"pagination\"\n          (itemsSelect)=\"onSelected($event)\"\n          [refresh]=\"refresh\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n        ></c8y-device-grid>\n      </div>\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [labels]=\"{ custom: btnLabels.create }\"\n        [disabled]=\"!canAssignDevice\"\n        [pending]=\"pendingStatus\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</ng-template>\n\n<div\n  *ngIf=\"showAssignChildDevices\"\n  [ngClass]=\"{ drawerOpen: showAssignChildDevices }\"\n>\n  <div\n    class=\"m-t-40 bottom-drawer\"\n    [ngStyle]=\"!!currentGroupId && { right: '0px'  }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n        [onlySelect]=\"true\"\n        (onSelectedDevices)=\"onSelectedChildDevices($event)\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  [ngClass]=\"{ drawerOpen: true }\"\n  *ngIf=\"!currentGroupId; else stepper\"\n>\n  <div class=\"bottom-drawer has-backdrop\"\n    role=\"dialog\" \n    [cdkTrapFocus]=\"!currentGroupId\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\">\n    <div class=\"d-contents\">\n      <ng-container [ngTemplateOutlet]=\"stepper\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #stepper>\n  <c8y-stepper\n    class=\"d-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns\"\n    [disableDefaultIcons]=\"{ edit: true, done: false }\"\n    [disableProgressButtons]=\"true\"\n    [customClasses]=\"['col-md-6', 'col-md-offset-3', 'm-t-24', 'm-b-40', 'p-0', 'flex-no-shrink']\"\n    linear\n    c8yProductExperience\n    inherit\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n  >\n    <cdk-step\n      [stepControl]=\"formGroupStepOne\"\n      [label]=\"'New group' | translate\"\n    >\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\" id=\"drawerTitle\">\n              {{ 'New group' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 flex-grow no-gutter\">\n        <div class=\"card-inner-scroll fit-h\">\n          <div class=\"card-block p-b-0\">\n            <div class=\"row\">\n              <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n                <c8y-form-group [novalidation]=\"true\">\n                  <div [formGroup]=\"formGroupStepOne\">\n                    <c8y-form-group>\n                      <label translate>Name</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. First floor' | translate }} \"\n                        type=\"text\"\n                        required\n                        formControlName=\"name\"\n                        maxlength=\"254\"\n                        #nameRef\n                      />\n                    </c8y-form-group>\n\n                    <c8y-form-group>\n                      <label translate>Description</label>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. first floor devices' | translate }}\"\n                        type=\"text\"\n                        formControlName=\"description\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group>\n                  <div [formGroup]=\"formGroupStepOne\"></div>\n                </c8y-form-group>\n                <div\n                  class=\"alert alert-info max-width-100\"\n                  translate\n                  *ngIf=\"!canAssignDevice\"\n                >\n                  You don't have permission to assign devices.\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [disabled]=\"!canCreateGroup\"\n        [labels]=\"\n          canAssignDevice\n            ? { next: btnLabels.next, cancel: btnLabels.cancel }\n            : { custom: btnLabels.create, cancel: btnLabels.cancel }\n        \"\n        [showButtons]=\"\n          canAssignDevice ? { next: true, cancel: true } : { custom: true, cancel: true }\n        \"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n    <cdk-step [label]=\"'Assign devices' | translate\">\n      <div class=\"p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12\">\n        <div class=\"row\">\n          <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n            <div class=\"h4 text-center text-medium\">\n              {{ 'Assign devices' | translate }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xs-12 no-gutter flex-grow\">\n        <c8y-device-grid\n          [title]=\"'Select target devices' | translate\"\n          [actionControls]=\"actionControls\"\n          [infiniteScroll]=\"'auto'\"\n          [selectable]=\"true\"\n          [withChildren]=\"true\"\n          [pagination]=\"pagination\"\n          (itemsSelect)=\"onSelected($event)\"\n          [refresh]=\"refresh\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }\"\n        ></c8y-device-grid>\n      </div>\n      <c8y-stepper-buttons\n        class=\"d-block card-footer p-24 separator\"\n        (onCancel)=\"onCancel.emit()\"\n        (onCustom)=\"createGroup()\"\n        [labels]=\"{ custom: btnLabels.create }\"\n        [disabled]=\"!canAssignDevice\"\n        [pending]=\"pendingStatus\"\n      ></c8y-stepper-buttons>\n    </cdk-step>\n  </c8y-stepper>\n</ng-template>\n\n<div\n  *ngIf=\"showAssignChildDevices\"\n  [ngClass]=\"{ drawerOpen: showAssignChildDevices }\"\n>\n  <div\n    class=\"m-t-40 bottom-drawer has-backdrop\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"childDevicesDrawerTitle\"\n    [ngStyle]=\"!!currentGroupId && { right: '0px'  }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n        [onlySelect]=\"true\"\n        (onSelectedDevices)=\"onSelectedChildDevices($event)\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: AddGroupService }, { type: i3.AlertService }, { type: SubAssetsService }, { type: i3.GainsightService }, { type: i3.Permissions }], propDecorators: { currentGroupId: [{
                 type: Input
             }], refresh: [{
@@ -1262,7 +1264,7 @@ class AssignDevicesComponent {
                 provide: DATA_GRID_CONFIGURATION_CONTEXT,
                 useValue: AssignDevicesComponent.GRID_CONFIG_CONTEXT
             }
-        ], viewQueries: [{ propertyName: "showDevicesToggle", first: true, predicate: ["showDevicesToggle"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <div class=\"h4 text-center text-medium\">\n        {{ 'Assign devices' | translate }}\n      </div>\n    </div>\n  </div>\n</div>\n<c8y-device-grid\n  class=\"flex-grow col-xs-12 no-gutter\"\n  [title]=\"''\"\n  [actionControls]=\"actionControls\"\n  [infiniteScroll]=\"'auto'\"\n  [selectable]=\"isSelectable\"\n  [pagination]=\"pagination\"\n  (itemsSelect)=\"onSelected($event)\"\n  [refresh]=\"refresh\"\n  [baseQuery]=\"baseQuery\"\n  [headerActionControls]=\"headerActionControls\"\n  [withChildren]=\"true\"\n  c8yProductExperience\n  [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n  [actionData]=\"{ component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES }\"\n></c8y-device-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel.emit()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.CANCEL\n    }\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Assign' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    (click)=\"assignDevices()\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.ASSIGN\n    }\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n\n<ng-template\n  #showDevicesToggle\n  let-control=\"headerActionControl\"\n>\n  <label\n    class=\"c8y-switch a-s-center\"\n    title=\"{{ control.text | translate }}\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"showChildren\"\n      (click)=\"control.callback()\"\n    />\n    <span></span>\n    <span>{{ control.text | translate }}</span>\n  </label>\n  <button\n    class=\"btn-help m-r-16 a-s-center\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"childDevicesPop\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    type=\"button\"\n  ></button>\n  <ng-template #childDevicesPop>\n    <span translate>\n      Displays the button\n      <span\n        class=\"btn btn-dot btn-icon no-pointer\"\n        title=\"Child devices icon\"\n      >\n        <i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i>\n      </span>\n      next to target devices with children. Clicking it displays a list with all child devices of\n      the selected target device.\n    </span>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "component", type: DeviceGridComponent, selector: "c8y-device-grid", inputs: ["dataCallback", "refresh", "title", "loadMoreItemsLabel", "loadingItemsLabel", "legacyConfigKey", "legacyFilterKey", "columns", "pagination", "infiniteScroll", "actionControls", "selectable", "singleSelection", "baseQuery", "bulkActionControls", "headerActionControls", "childDeviceGrid", "parentDeviceId", "withChildren", "showSearch", "activeClassName"], outputs: ["onColumnsChange", "onFilterChange", "onDeviceQueryStringChange", "itemsSelect"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "showDevicesToggle", first: true, predicate: ["showDevicesToggle"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <div class=\"h4 text-center text-medium\" id=\"drawerTitle\">\n        {{ 'Assign devices' | translate }}\n      </div>\n    </div>\n  </div>\n</div>\n<c8y-device-grid\n  class=\"flex-grow col-xs-12 no-gutter\"\n  [title]=\"''\"\n  [actionControls]=\"actionControls\"\n  [infiniteScroll]=\"'auto'\"\n  [selectable]=\"isSelectable\"\n  [pagination]=\"pagination\"\n  (itemsSelect)=\"onSelected($event)\"\n  [refresh]=\"refresh\"\n  [baseQuery]=\"baseQuery\"\n  [headerActionControls]=\"headerActionControls\"\n  [withChildren]=\"true\"\n  c8yProductExperience\n  [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n  [actionData]=\"{ component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES }\"\n></c8y-device-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel.emit()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.CANCEL\n    }\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Assign' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    (click)=\"assignDevices()\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.ASSIGN\n    }\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n\n<ng-template\n  #showDevicesToggle\n  let-control=\"headerActionControl\"\n>\n  <label\n    class=\"c8y-switch a-s-center\"\n    title=\"{{ control.text | translate }}\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"showChildren\"\n      (click)=\"control.callback()\"\n    />\n    <span></span>\n    <span>{{ control.text | translate }}</span>\n  </label>\n  <button\n    class=\"btn-help m-r-16 a-s-center\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"childDevicesPop\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    type=\"button\"\n  ></button>\n  <ng-template #childDevicesPop>\n    <span translate>\n      Displays the button\n      <span\n        class=\"btn btn-dot btn-icon no-pointer\"\n        title=\"Child devices icon\"\n      >\n        <i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i>\n      </span>\n      next to target devices with children. Clicking it displays a list with all child devices of\n      the selected target device.\n    </span>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "component", type: DeviceGridComponent, selector: "c8y-device-grid", inputs: ["dataCallback", "refresh", "title", "loadMoreItemsLabel", "loadingItemsLabel", "legacyConfigKey", "legacyFilterKey", "columns", "pagination", "infiniteScroll", "actionControls", "selectable", "singleSelection", "baseQuery", "bulkActionControls", "headerActionControls", "childDeviceGrid", "parentDeviceId", "withChildren", "showSearch", "activeClassName"], outputs: ["onColumnsChange", "onFilterChange", "onDeviceQueryStringChange", "itemsSelect"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AssignDevicesComponent, decorators: [{
             type: Component,
@@ -1283,7 +1285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         PopoverDirective,
                         C8yTranslateDirective,
                         C8yTranslatePipe
-                    ], template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <div class=\"h4 text-center text-medium\">\n        {{ 'Assign devices' | translate }}\n      </div>\n    </div>\n  </div>\n</div>\n<c8y-device-grid\n  class=\"flex-grow col-xs-12 no-gutter\"\n  [title]=\"''\"\n  [actionControls]=\"actionControls\"\n  [infiniteScroll]=\"'auto'\"\n  [selectable]=\"isSelectable\"\n  [pagination]=\"pagination\"\n  (itemsSelect)=\"onSelected($event)\"\n  [refresh]=\"refresh\"\n  [baseQuery]=\"baseQuery\"\n  [headerActionControls]=\"headerActionControls\"\n  [withChildren]=\"true\"\n  c8yProductExperience\n  [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n  [actionData]=\"{ component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES }\"\n></c8y-device-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel.emit()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.CANCEL\n    }\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Assign' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    (click)=\"assignDevices()\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.ASSIGN\n    }\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n\n<ng-template\n  #showDevicesToggle\n  let-control=\"headerActionControl\"\n>\n  <label\n    class=\"c8y-switch a-s-center\"\n    title=\"{{ control.text | translate }}\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"showChildren\"\n      (click)=\"control.callback()\"\n    />\n    <span></span>\n    <span>{{ control.text | translate }}</span>\n  </label>\n  <button\n    class=\"btn-help m-r-16 a-s-center\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"childDevicesPop\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    type=\"button\"\n  ></button>\n  <ng-template #childDevicesPop>\n    <span translate>\n      Displays the button\n      <span\n        class=\"btn btn-dot btn-icon no-pointer\"\n        title=\"Child devices icon\"\n      >\n        <i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i>\n      </span>\n      next to target devices with children. Clicking it displays a list with all child devices of\n      the selected target device.\n    </span>\n  </ng-template>\n</ng-template>\n" }]
+                    ], template: "<div class=\"card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24\">\n  <div class=\"row\">\n    <div class=\"col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4\">\n      <div class=\"h4 text-center text-medium\" id=\"drawerTitle\">\n        {{ 'Assign devices' | translate }}\n      </div>\n    </div>\n  </div>\n</div>\n<c8y-device-grid\n  class=\"flex-grow col-xs-12 no-gutter\"\n  [title]=\"''\"\n  [actionControls]=\"actionControls\"\n  [infiniteScroll]=\"'auto'\"\n  [selectable]=\"isSelectable\"\n  [pagination]=\"pagination\"\n  (itemsSelect)=\"onSelected($event)\"\n  [refresh]=\"refresh\"\n  [baseQuery]=\"baseQuery\"\n  [headerActionControls]=\"headerActionControls\"\n  [withChildren]=\"true\"\n  c8yProductExperience\n  [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n  [actionData]=\"{ component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES }\"\n></c8y-device-grid>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"onCancel.emit()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.CANCEL\n    }\"\n  >\n    <span>{{ 'Cancel' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Assign' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn-pending': pendingStatus }\"\n    (click)=\"assignDevices()\"\n    [disabled]=\"selected.length === 0 || !canAssignDevice\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.COMPONENTS.ASSIGN_DEVICES,\n      action: PRODUCT_EXPERIENCE.ASSIGN_DEVICES.ACTIONS.ASSIGN\n    }\"\n  >\n    <span>{{ 'Assign' | translate }}</span>\n  </button>\n</div>\n\n<ng-template\n  #showDevicesToggle\n  let-control=\"headerActionControl\"\n>\n  <label\n    class=\"c8y-switch a-s-center\"\n    title=\"{{ control.text | translate }}\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"showChildren\"\n      (click)=\"control.callback()\"\n    />\n    <span></span>\n    <span>{{ control.text | translate }}</span>\n  </label>\n  <button\n    class=\"btn-help m-r-16 a-s-center\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"childDevicesPop\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    type=\"button\"\n  ></button>\n  <ng-template #childDevicesPop>\n    <span translate>\n      Displays the button\n      <span\n        class=\"btn btn-dot btn-icon no-pointer\"\n        title=\"Child devices icon\"\n      >\n        <i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i>\n      </span>\n      next to target devices with children. Clicking it displays a list with all child devices of\n      the selected target device.\n    </span>\n  </ng-template>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i3.AlertService }, { type: SubAssetsService }, { type: i2.InventoryService }, { type: i3.GainsightService }], propDecorators: { currentGroupId: [{
                 type: Input
             }], refresh: [{
@@ -2251,7 +2253,7 @@ class SubAssetsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SubAssetsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: SubAssetsService }, { token: i3.ContextRouteService }, { token: i3.Permissions }, { token: SUB_ASSETS_CONFIG }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SubAssetsComponent, isStandalone: true, selector: "c8y-sub-assets", ngImport: i0, template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAddGroupBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add group' | translate }}\"\n    (click)=\"onAddGroupClick()\"\n    [disabled]=\"shouldDisableAddGroup\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Add group</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAssignDeviceBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Assign devices' | translate }}\"\n    (click)=\"showAssignDevices = !showAssignDevices\"\n    [disabled]=\"shouldDisableAssignDevices\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Assign devices</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  *ngIf=\"isSmartGroup; else assetsHelp\"\n  src=\"/docs/device-management-application/grouping-devices/#using-smart-groups\"\n></c8y-help>\n\n<ng-template #assetsHelp>\n  <c8y-help src=\"/docs/cockpit/managing-assets/#managing-assets\"></c8y-help>\n</ng-template>\n\n<div\n  class=\"card content-fullpage\"\n  [ngClass]=\"{\n    'card--grid grid__col--8-4--md grid__row--fit-auto': shouldShowAssetsProperties,\n    'd-flex d-col': !shouldShowAssetsProperties\n  }\"\n>\n  <c8y-group-info\n    class=\"grid__col--fullspan\"\n    *ngIf=\"moduleConfig.showDetails\"\n    [group]=\"group\"\n    (groupChange)=\"groupChange($event)\"\n  ></c8y-group-info>\n  <c8y-sub-assets-grid\n    class=\"d-contents\"\n    [refresh]=\"refresh\"\n    [parent-group]=\"group\"\n    [filterable]=\"filterable\"\n    [displayOptions]=\"displayOptions\"\n    [columnsConfigKey]=\"'sub-assets-grid'\"\n    [baseQuery]=\"moduleConfig.baseQuery\"\n  ></c8y-sub-assets-grid>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    *ngIf=\"shouldShowAssetsProperties\"\n  >\n    <c8y-asset-properties\n      class=\"d-contents\"\n      [properties]=\"customProperties\"\n      [asset]=\"group\"\n      (assetChange)=\"groupChange($event)\"\n    ></c8y-asset-properties>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAddGroup() }\">\n  <div class=\"bottom-drawer\">\n    <c8y-add-group\n      [currentGroupId]=\"currentGroupId\"\n      [refresh]=\"refresh\"\n      (onCancel)=\"onAddGroupClick()\"\n      *ngIf=\"showAddGroup()\"\n    ></c8y-add-group>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignDevices }\">\n  <div class=\"bottom-drawer\">\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        (onShowChildDevices)=\"showAssignChildDevices = $event\"\n        (selectedDevice)=\"showChildrenForDevice = $event\"\n        *ngIf=\"showAssignDevices\"\n      ></c8y-assign-devices>\n    </div>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignChildDevices }\">\n  <div class=\"bottom-drawer m-t-40\">\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        *ngIf=\"showAssignChildDevices\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GroupInfoComponent, selector: "c8y-group-info", inputs: ["group"], outputs: ["groupChange"] }, { kind: "component", type: SubAssetsGridComponent, selector: "c8y-sub-assets-grid", inputs: ["parent-group", "refresh", "title", "emptyStateText", "loadingItemsLabel", "columnsConfigKey", "columns", "pagination", "actionControls", "selectable", "baseQuery", "bulkActionControls", "filterable", "sortable", "displayOptions"], outputs: ["onColumnsChange", "itemsSelect"] }, { kind: "component", type: AssetPropertiesComponent, selector: "c8y-asset-properties", inputs: ["asset", "properties"], outputs: ["assetChange"] }, { kind: "component", type: AddGroupComponent, selector: "c8y-add-group", inputs: ["currentGroupId", "refresh"], outputs: ["onDeviceQueryStringChange", "onCancel"] }, { kind: "component", type: AssignDevicesComponent, selector: "c8y-assign-devices", inputs: ["currentGroupId", "refresh"], outputs: ["onCancel", "onShowChildDevices", "selectedDevice"] }, { kind: "component", type: AssignChildDevicesComponent, selector: "c8y-assign-child-devices", inputs: ["currentGroupId", "parentDevice", "refresh", "onlySelect"], outputs: ["onCancel", "onSelectedDevices"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SubAssetsComponent, isStandalone: true, selector: "c8y-sub-assets", ngImport: i0, template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAddGroupBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add group' | translate }}\"\n    (click)=\"onAddGroupClick()\"\n    [disabled]=\"shouldDisableAddGroup\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Add group</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAssignDeviceBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Assign devices' | translate }}\"\n    (click)=\"showAssignDevices = !showAssignDevices\"\n    [disabled]=\"shouldDisableAssignDevices\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Assign devices</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/grouping-devices/#using-smart-groups\"\n  *ngIf=\"isSmartGroup; else assetsHelp\"\n></c8y-help>\n\n<ng-template #assetsHelp>\n  <c8y-help src=\"/docs/cockpit/managing-assets/#managing-assets\"></c8y-help>\n</ng-template>\n\n<div\n  class=\"card content-fullpage\"\n  [ngClass]=\"{\n    'card--grid grid__col--8-4--md grid__row--fit-auto': shouldShowAssetsProperties,\n    'd-flex d-col': !shouldShowAssetsProperties\n  }\"\n>\n  <c8y-group-info\n    class=\"grid__col--fullspan\"\n    *ngIf=\"moduleConfig.showDetails\"\n    [group]=\"group\"\n    (groupChange)=\"groupChange($event)\"\n  ></c8y-group-info>\n  <c8y-sub-assets-grid\n    class=\"d-contents\"\n    [refresh]=\"refresh\"\n    [parent-group]=\"group\"\n    [filterable]=\"filterable\"\n    [displayOptions]=\"displayOptions\"\n    [columnsConfigKey]=\"'sub-assets-grid'\"\n    [baseQuery]=\"moduleConfig.baseQuery\"\n  ></c8y-sub-assets-grid>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    *ngIf=\"shouldShowAssetsProperties\"\n  >\n    <c8y-asset-properties\n      class=\"d-contents\"\n      [properties]=\"customProperties\"\n      [asset]=\"group\"\n      (assetChange)=\"groupChange($event)\"\n    ></c8y-asset-properties>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAddGroup() }\">\n  <div\n    class=\"bottom-drawer has-backdrop\"\n    aria-labelledby=\"drawerTitle\"\n    aria-modal=\"true\"\n    role=\"dialog\"\n    [cdkTrapFocus]=\"showAddGroup()\"\n  >\n    <c8y-add-group\n      [currentGroupId]=\"currentGroupId\"\n      [refresh]=\"refresh\"\n      (onCancel)=\"onAddGroupClick()\"\n      *ngIf=\"showAddGroup()\"\n    ></c8y-add-group>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignDevices }\">\n  <div\n    class=\"bottom-drawer has-backdrop\"\n    aria-labelledby=\"drawerTitle\"\n    aria-modal=\"true\"\n    role=\"dialog\"\n    [cdkTrapFocus]=\"showAssignDevices\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        (onShowChildDevices)=\"showAssignChildDevices = $event\"\n        (selectedDevice)=\"showChildrenForDevice = $event\"\n        *ngIf=\"showAssignDevices\"\n      ></c8y-assign-devices>\n    </div>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignChildDevices }\">\n  <div\n    class=\"bottom-drawer has-backdrop m-t-40\"\n    aria-labelledby=\"childDevicesDrawerTitle\"\n    aria-modal=\"true\"\n    role=\"dialog\"\n    [cdkTrapFocus]=\"showAssignChildDevices\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        *ngIf=\"showAssignChildDevices\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: GroupInfoComponent, selector: "c8y-group-info", inputs: ["group"], outputs: ["groupChange"] }, { kind: "component", type: SubAssetsGridComponent, selector: "c8y-sub-assets-grid", inputs: ["parent-group", "refresh", "title", "emptyStateText", "loadingItemsLabel", "columnsConfigKey", "columns", "pagination", "actionControls", "selectable", "baseQuery", "bulkActionControls", "filterable", "sortable", "displayOptions"], outputs: ["onColumnsChange", "itemsSelect"] }, { kind: "component", type: AssetPropertiesComponent, selector: "c8y-asset-properties", inputs: ["asset", "properties"], outputs: ["assetChange"] }, { kind: "component", type: AddGroupComponent, selector: "c8y-add-group", inputs: ["currentGroupId", "refresh"], outputs: ["onDeviceQueryStringChange", "onCancel"] }, { kind: "component", type: AssignDevicesComponent, selector: "c8y-assign-devices", inputs: ["currentGroupId", "refresh"], outputs: ["onCancel", "onShowChildDevices", "selectedDevice"] }, { kind: "component", type: AssignChildDevicesComponent, selector: "c8y-assign-child-devices", inputs: ["currentGroupId", "parentDevice", "refresh", "onlySelect"], outputs: ["onCancel", "onSelectedDevices"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SubAssetsComponent, decorators: [{
             type: Component,
@@ -2263,6 +2265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         C8yTranslateDirective,
                         HelpComponent,
                         NgClass,
+                        CdkTrapFocus,
                         GroupInfoComponent,
                         SubAssetsGridComponent,
                         AssetPropertiesComponent,
@@ -2270,7 +2273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         AssignDevicesComponent,
                         AssignChildDevicesComponent,
                         C8yTranslatePipe
-                    ], template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAddGroupBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add group' | translate }}\"\n    (click)=\"onAddGroupClick()\"\n    [disabled]=\"shouldDisableAddGroup\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Add group</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAssignDeviceBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Assign devices' | translate }}\"\n    (click)=\"showAssignDevices = !showAssignDevices\"\n    [disabled]=\"shouldDisableAssignDevices\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Assign devices</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  *ngIf=\"isSmartGroup; else assetsHelp\"\n  src=\"/docs/device-management-application/grouping-devices/#using-smart-groups\"\n></c8y-help>\n\n<ng-template #assetsHelp>\n  <c8y-help src=\"/docs/cockpit/managing-assets/#managing-assets\"></c8y-help>\n</ng-template>\n\n<div\n  class=\"card content-fullpage\"\n  [ngClass]=\"{\n    'card--grid grid__col--8-4--md grid__row--fit-auto': shouldShowAssetsProperties,\n    'd-flex d-col': !shouldShowAssetsProperties\n  }\"\n>\n  <c8y-group-info\n    class=\"grid__col--fullspan\"\n    *ngIf=\"moduleConfig.showDetails\"\n    [group]=\"group\"\n    (groupChange)=\"groupChange($event)\"\n  ></c8y-group-info>\n  <c8y-sub-assets-grid\n    class=\"d-contents\"\n    [refresh]=\"refresh\"\n    [parent-group]=\"group\"\n    [filterable]=\"filterable\"\n    [displayOptions]=\"displayOptions\"\n    [columnsConfigKey]=\"'sub-assets-grid'\"\n    [baseQuery]=\"moduleConfig.baseQuery\"\n  ></c8y-sub-assets-grid>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    *ngIf=\"shouldShowAssetsProperties\"\n  >\n    <c8y-asset-properties\n      class=\"d-contents\"\n      [properties]=\"customProperties\"\n      [asset]=\"group\"\n      (assetChange)=\"groupChange($event)\"\n    ></c8y-asset-properties>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAddGroup() }\">\n  <div class=\"bottom-drawer\">\n    <c8y-add-group\n      [currentGroupId]=\"currentGroupId\"\n      [refresh]=\"refresh\"\n      (onCancel)=\"onAddGroupClick()\"\n      *ngIf=\"showAddGroup()\"\n    ></c8y-add-group>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignDevices }\">\n  <div class=\"bottom-drawer\">\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        (onShowChildDevices)=\"showAssignChildDevices = $event\"\n        (selectedDevice)=\"showChildrenForDevice = $event\"\n        *ngIf=\"showAssignDevices\"\n      ></c8y-assign-devices>\n    </div>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignChildDevices }\">\n  <div class=\"bottom-drawer m-t-40\">\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        *ngIf=\"showAssignChildDevices\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAddGroupBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add group' | translate }}\"\n    (click)=\"onAddGroupClick()\"\n    [disabled]=\"shouldDisableAddGroup\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Add group</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!isSmartGroup && moduleConfig.showAssignDeviceBtn\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Assign devices' | translate }}\"\n    (click)=\"showAssignDevices = !showAssignDevices\"\n    [disabled]=\"shouldDisableAssignDevices\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"plus-circle\"\n    ></i>\n    <span translate>Assign devices</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/grouping-devices/#using-smart-groups\"\n  *ngIf=\"isSmartGroup; else assetsHelp\"\n></c8y-help>\n\n<ng-template #assetsHelp>\n  <c8y-help src=\"/docs/cockpit/managing-assets/#managing-assets\"></c8y-help>\n</ng-template>\n\n<div\n  class=\"card content-fullpage\"\n  [ngClass]=\"{\n    'card--grid grid__col--8-4--md grid__row--fit-auto': shouldShowAssetsProperties,\n    'd-flex d-col': !shouldShowAssetsProperties\n  }\"\n>\n  <c8y-group-info\n    class=\"grid__col--fullspan\"\n    *ngIf=\"moduleConfig.showDetails\"\n    [group]=\"group\"\n    (groupChange)=\"groupChange($event)\"\n  ></c8y-group-info>\n  <c8y-sub-assets-grid\n    class=\"d-contents\"\n    [refresh]=\"refresh\"\n    [parent-group]=\"group\"\n    [filterable]=\"filterable\"\n    [displayOptions]=\"displayOptions\"\n    [columnsConfigKey]=\"'sub-assets-grid'\"\n    [baseQuery]=\"moduleConfig.baseQuery\"\n  ></c8y-sub-assets-grid>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    *ngIf=\"shouldShowAssetsProperties\"\n  >\n    <c8y-asset-properties\n      class=\"d-contents\"\n      [properties]=\"customProperties\"\n      [asset]=\"group\"\n      (assetChange)=\"groupChange($event)\"\n    ></c8y-asset-properties>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAddGroup() }\">\n  <div\n    class=\"bottom-drawer has-backdrop\"\n    aria-labelledby=\"drawerTitle\"\n    aria-modal=\"true\"\n    role=\"dialog\"\n    [cdkTrapFocus]=\"showAddGroup()\"\n  >\n    <c8y-add-group\n      [currentGroupId]=\"currentGroupId\"\n      [refresh]=\"refresh\"\n      (onCancel)=\"onAddGroupClick()\"\n      *ngIf=\"showAddGroup()\"\n    ></c8y-add-group>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignDevices }\">\n  <div\n    class=\"bottom-drawer has-backdrop\"\n    aria-labelledby=\"drawerTitle\"\n    aria-modal=\"true\"\n    role=\"dialog\"\n    [cdkTrapFocus]=\"showAssignDevices\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-devices\n        class=\"d-contents\"\n        (onCancel)=\"showAssignDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        (onShowChildDevices)=\"showAssignChildDevices = $event\"\n        (selectedDevice)=\"showChildrenForDevice = $event\"\n        *ngIf=\"showAssignDevices\"\n      ></c8y-assign-devices>\n    </div>\n  </div>\n</div>\n\n<div [ngClass]=\"{ drawerOpen: showAssignChildDevices }\">\n  <div\n    class=\"bottom-drawer has-backdrop m-t-40\"\n    aria-labelledby=\"childDevicesDrawerTitle\"\n    aria-modal=\"true\"\n    role=\"dialog\"\n    [cdkTrapFocus]=\"showAssignChildDevices\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <c8y-assign-child-devices\n        class=\"d-contents\"\n        *ngIf=\"showAssignChildDevices\"\n        (onCancel)=\"showAssignChildDevices = false\"\n        [refresh]=\"refresh\"\n        [currentGroupId]=\"currentGroupId\"\n        [parentDevice]=\"showChildrenForDevice\"\n      ></c8y-assign-child-devices>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: SubAssetsService }, { type: i3.ContextRouteService }, { type: i3.Permissions }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SUB_ASSETS_CONFIG]