@c8y/ngx-components 1023.48.2 → 1023.48.3

package/fesm2022/c8y-ngx-components.mjs

@@ -15,7 +15,7 @@ import * as i4 from '@c8y/ngx-components/api';
 import { provideClientLibServices } from '@c8y/ngx-components/api';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateDirective, TranslatePipe, TranslateStore, TranslateService as TranslateService$1, provideTranslateService, provideTranslateLoader, provideMissingTranslationHandler, TranslateParser } from '@ngx-translate/core';
-import * as i1$a from '@angular/common';
+import * as i2$3 from '@angular/common';
 import { formatDate, registerLocaleData, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, NgSwitch, NgSwitchCase, AsyncPipe, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, NgComponentOutlet, NgSwitchDefault, KeyValuePipe, LocationStrategy, UpperCasePipe, NgPlural, NgPluralCase, SlicePipe, NgForOf } from '@angular/common';
 import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
@@ -47,7 +47,7 @@ import { parsePhoneNumberFromString } from 'libphonenumber-js/max';
 import { QRCodeComponent } from 'angularx-qrcode';
 import { compare, coerce } from 'semver';
 import * as mimeDB from 'mime-db';
-import * as i2$3 from '@ngx-formly/core';
+import * as i2$4 from '@ngx-formly/core';
 import { FormlyModule, FieldWrapper, FieldArrayType, FieldType, FORMLY_CONFIG, ɵdefineHiddenProp as _defineHiddenProp } from '@ngx-formly/core';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i3 from '@ngx-formly/core/select';
@@ -23254,51 +23254,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-/**
- * Bottom drawer component that slides up from the bottom of the viewport.
- * Typically managed by BottomDrawerService.
- */
-class BottomDrawerComponent {
-    constructor() {
-        /**
-         * When enabled, clicking outside the drawer will not close it.
-         */
-        this.disableClickOutside = false;
-        this.drawerOpenSubject$ = new BehaviorSubject(true);
-        this.drawerOpenObs$ = this.drawerOpenSubject$.asObservable().pipe(delay(0), shareReplay());
-    }
-    get drawerOpen$() {
-        return this.drawerOpenObs$;
-    }
-    /**
-     * Handles Escape key press to close the drawer.
-     */
-    onEscapeKey(event) {
-        event.preventDefault();
-        this.hide();
-    }
-    /**
-     * Hides the drawer with animation.
-     */
-    hide() {
-        this.disableClickOutside = false;
-        this.drawerOpenSubject$.next(false);
-        this.drawerOpenSubject$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BottomDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BottomDrawerComponent, isStandalone: true, selector: "c8y-bottom-drawer", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "drawerHost", first: true, predicate: ["drawerHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [cdkTrapFocus]=\"drawerOpen$ | async\"\n    role=\"dialog\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i1$a.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BottomDrawerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'c8y-bottom-drawer', imports: [CommonModule$1, CdkTrapFocus], template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [cdkTrapFocus]=\"drawerOpen$ | async\"\n    role=\"dialog\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { drawerHost: [{
-                type: ViewChild,
-                args: ['drawerHost', { read: ViewContainerRef }]
-            }], onEscapeKey: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
-            }] } });
-
 const DRAWER_ANIMATION_TIME = 400;
 class BottomDrawerRef {
     /**
@@ -23307,18 +23262,28 @@ class BottomDrawerRef {
     get onClosed$() {
         return this.closedObs$;
     }
-    constructor(component, applicationRef, router, options) {
+    constructor(component, drawerComponent, applicationRef, router, options, removeCallback, isTopCallback) {
+        this.drawerComponent = drawerComponent;
         this.applicationRef = applicationRef;
         this.router = router;
         this.options = options;
+        this.removeCallback = removeCallback;
+        this.isTopCallback = isTopCallback;
         this.closedSubject$ = new Subject();
         this.closedObs$ = this.closedSubject$.asObservable().pipe(shareReplay());
         this.instance = this.attachDrawerToView(component);
     }
+    /**
+     * Checks if this drawer is the topmost open drawer.
+     */
+    isTop() {
+        return this.isTopCallback?.(this) ?? false;
+    }
     /**
      * Closes the bottom drawer behind the reference.
      */
     async close() {
+        this.removeCallback?.(this);
         this.closedSubject$.next();
         this.closedSubject$.complete();
         await this.detachDrawerFromView();
@@ -23327,7 +23292,7 @@ class BottomDrawerRef {
         const elementInjector = Injector.create({
             providers: [{ provide: BottomDrawerRef, useValue: this }]
         });
-        this.drawerComponentRef = createComponent(BottomDrawerComponent, {
+        this.drawerComponentRef = createComponent(this.drawerComponent, {
             environmentInjector: this.applicationRef.injector,
             elementInjector
         });
@@ -23341,6 +23306,9 @@ class BottomDrawerRef {
         if (this.options?.disableClickOutside) {
             this.drawerComponentRef.instance.disableClickOutside = this.options.disableClickOutside;
         }
+        if (this.options?.closeOnEscape !== undefined) {
+            this.drawerComponentRef.instance.closeOnEscape = this.options.closeOnEscape;
+        }
         this.drawerComponentRef.changeDetectorRef.detectChanges();
         // Listen for user-initiated closes (e.g., Escape key)
         this.drawerComponentRef.instance.drawerOpen$
@@ -23376,6 +23344,55 @@ class BottomDrawerRef {
     }
 }
 
+/**
+ * Bottom drawer component that slides up from the bottom of the viewport.
+ * Typically managed by BottomDrawerService.
+ */
+class BottomDrawerComponent {
+    constructor(bottomDrawerRef) {
+        this.bottomDrawerRef = bottomDrawerRef;
+        /**
+         * When enabled, clicking outside the drawer will not close it.
+         */
+        this.disableClickOutside = false;
+        this.closeOnEscape = true;
+        this.drawerOpenSubject$ = new BehaviorSubject(true);
+        this.drawerOpenObs$ = this.drawerOpenSubject$.asObservable().pipe(delay(0), shareReplay());
+    }
+    get drawerOpen$() {
+        return this.drawerOpenObs$;
+    }
+    /**
+     * Handles Escape key press to close the drawer.
+     */
+    onEscapeKey(event) {
+        if (this.closeOnEscape && this.bottomDrawerRef.isTop()) {
+            event.preventDefault();
+            this.hide();
+        }
+    }
+    /**
+     * Hides the drawer with animation.
+     */
+    hide() {
+        this.disableClickOutside = false;
+        this.drawerOpenSubject$.next(false);
+        this.drawerOpenSubject$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BottomDrawerComponent, deps: [{ token: BottomDrawerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BottomDrawerComponent, isStandalone: true, selector: "c8y-bottom-drawer", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "drawerHost", first: true, predicate: ["drawerHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [cdkTrapFocus]=\"drawerOpen$ | async\"\n    role=\"dialog\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BottomDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'c8y-bottom-drawer', imports: [CommonModule$1, CdkTrapFocus], template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [cdkTrapFocus]=\"drawerOpen$ | async\"\n    role=\"dialog\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: BottomDrawerRef }], propDecorators: { drawerHost: [{
+                type: ViewChild,
+                args: ['drawerHost', { read: ViewContainerRef }]
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
 /**
  * Service for opening components in a bottom drawer.
  *
@@ -23391,6 +23408,7 @@ class BottomDrawerService {
     constructor(applicationRef, router) {
         this.applicationRef = applicationRef;
         this.router = router;
+        this.openDrawers = [];
     }
     /**
      * Opens a component in a bottom drawer.
@@ -23400,7 +23418,15 @@ class BottomDrawerService {
      * @returns A reference to the bottom drawer instance
      */
     openDrawer(component, options) {
-        return new BottomDrawerRef(component, this.applicationRef, this.router, options);
+        const drawerRef = new BottomDrawerRef(component, BottomDrawerComponent, this.applicationRef, this.router, options, (ref) => this.remove(ref), (ref) => this.isTop(ref));
+        this.openDrawers.push(drawerRef);
+        return drawerRef;
+    }
+    isTop(drawerRef) {
+        return (this.openDrawers.length > 0 && this.openDrawers[this.openDrawers.length - 1] === drawerRef);
+    }
+    remove(drawerRef) {
+        this.openDrawers = this.openDrawers.filter(d => d !== drawerRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BottomDrawerService, deps: [{ token: i0.ApplicationRef }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BottomDrawerService, providedIn: 'root' }); }
@@ -23888,7 +23914,7 @@ class DropAreaComponent {
         resolve(reader.result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FilesService }, { token: i1$1.TranslateService }, { token: BytesPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
@@ -26797,7 +26823,7 @@ class ArrayTypeComponent extends FieldArrayType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ArrayTypeComponent, isStandalone: true, selector: "c8y-array-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <div id=\"{{ id + '-fieldset' }}\" class=\"legend form-block\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </div>\n\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n\n  <div *ngFor=\"let ifield of field.fieldGroup; let i = index\" class=\"input-group-array\">\n    <formly-field [field]=\"ifield | c8yArrayTypeInjectTemplate: customTemplate\"></formly-field>\n    <ng-container\n      *ngIf=\"ifield.type === 'formly-group' || ifield.type === 'object' || ifield.type === 'array'\"\n      [ngTemplateOutlet]=\"customTemplate\"\n    ></ng-container>\n    <ng-template #customTemplate>\n      <div class=\"input-group-btn delete-row\">\n        <button\n          class=\"btn btn-dot btn-dot--danger flex-item-right\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          [delay]=\"500\"\n          placement=\"right\"\n          [disabled]=\"to.disabled || (field.fieldGroup.length === 1 && to.required)\"\n          [attr.data-cy]=\"'array-type-component--remove-array-item-' + i\"\n          (click)=\"remove(i)\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"p-t-8\">\n    <button\n      class=\"btn btn-sm btn-default\"\n      type=\"button\"\n      title=\"{{\n        (field.templateOptions?.addText | translate) || 'Add \\{\\{ label \\}\\}'\n          | translate: fieldArrayProps\n      }}\"\n      [disabled]=\"to.disabled\"\n      (click)=\"add()\"\n      [attr.data-cy]=\"field.templateOptions?.addTextDataCy || 'add-array-item'\"\n    >\n      <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n      <span\n        *ngIf=\"!field.templateOptions?.addText\"\n        ngNonBindable\n        translate\n        [translateParams]=\"fieldArrayProps\"\n      >\n        Add {{ label }}\n      </span>\n      <span *ngIf=\"field.templateOptions?.addText\">\n        {{ field.templateOptions?.addText | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: C8yArrayTypeInjectTemplatePipe, name: "c8yArrayTypeInjectTemplate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ArrayTypeComponent, isStandalone: true, selector: "c8y-array-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <div id=\"{{ id + '-fieldset' }}\" class=\"legend form-block\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </div>\n\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n\n  <div *ngFor=\"let ifield of field.fieldGroup; let i = index\" class=\"input-group-array\">\n    <formly-field [field]=\"ifield | c8yArrayTypeInjectTemplate: customTemplate\"></formly-field>\n    <ng-container\n      *ngIf=\"ifield.type === 'formly-group' || ifield.type === 'object' || ifield.type === 'array'\"\n      [ngTemplateOutlet]=\"customTemplate\"\n    ></ng-container>\n    <ng-template #customTemplate>\n      <div class=\"input-group-btn delete-row\">\n        <button\n          class=\"btn btn-dot btn-dot--danger flex-item-right\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          [delay]=\"500\"\n          placement=\"right\"\n          [disabled]=\"to.disabled || (field.fieldGroup.length === 1 && to.required)\"\n          [attr.data-cy]=\"'array-type-component--remove-array-item-' + i\"\n          (click)=\"remove(i)\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"p-t-8\">\n    <button\n      class=\"btn btn-sm btn-default\"\n      type=\"button\"\n      title=\"{{\n        (field.templateOptions?.addText | translate) || 'Add \\{\\{ label \\}\\}'\n          | translate: fieldArrayProps\n      }}\"\n      [disabled]=\"to.disabled\"\n      (click)=\"add()\"\n      [attr.data-cy]=\"field.templateOptions?.addTextDataCy || 'add-array-item'\"\n    >\n      <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n      <span\n        *ngIf=\"!field.templateOptions?.addText\"\n        ngNonBindable\n        translate\n        [translateParams]=\"fieldArrayProps\"\n      >\n        Add {{ label }}\n      </span>\n      <span *ngIf=\"field.templateOptions?.addText\">\n        {{ field.templateOptions?.addText | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: C8yArrayTypeInjectTemplatePipe, name: "c8yArrayTypeInjectTemplate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArrayTypeComponent, decorators: [{
             type: Component,
@@ -26849,7 +26875,7 @@ class FieldCheckbox extends FieldType {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldCheckbox, isStandalone: true, selector: "c8y-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <label\n    [class.c8y-checkbox]=\"!to.switchMode\"\n    [class.c8y-switch]=\"to.switchMode\"\n    [class.has-error]=\"showError\"\n  >\n    <input\n      [class.is-invalid]=\"showError\"\n      [class.form-check-input]=\"to.formCheck.indexOf('custom') === -1\"\n      [class.position-static]=\"to.formCheck === 'nolabel'\"\n      [class.custom-control-input]=\"to.formCheck.indexOf('custom') === 0\"\n      type=\"checkbox\"\n      [indeterminate]=\"to.indeterminate && formControl.value == null\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [attr.data-cy]=\"'c8y-field-checkbox--' + (field.templateOptions?.optionDataCy || to.label)\"\n    />\n    <span></span>\n    <i\n      *ngIf=\"to.icon\"\n      c8yIcon=\"{{to.icon}}\"\n      class=\"icon-flex icon-20 m-r-4\"\n    ></i>\n    <span\n      class=\"text-truncate\"\n      title=\"{{ to.label | humanize }}\"\n    >\n      {{ to.label | humanize }}\n    </span>\n    <span *ngIf=\"to.required && to.hideRequiredMarker !== true\">\n      <em\n        class=\"m-l-4\"\n        translate\n      >\n        (required)\n      </em>\n    </span>\n  </label>\n  <button\n    class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"to.description\"\n    placement=\"right\"\n    triggers=\"focus\"\n    type=\"button\"\n    *ngIf=\"!!to.description\"\n  ></button>\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldCheckbox, isStandalone: true, selector: "c8y-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <label\n    [class.c8y-checkbox]=\"!to.switchMode\"\n    [class.c8y-switch]=\"to.switchMode\"\n    [class.has-error]=\"showError\"\n  >\n    <input\n      [class.is-invalid]=\"showError\"\n      [class.form-check-input]=\"to.formCheck.indexOf('custom') === -1\"\n      [class.position-static]=\"to.formCheck === 'nolabel'\"\n      [class.custom-control-input]=\"to.formCheck.indexOf('custom') === 0\"\n      type=\"checkbox\"\n      [indeterminate]=\"to.indeterminate && formControl.value == null\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [attr.data-cy]=\"'c8y-field-checkbox--' + (field.templateOptions?.optionDataCy || to.label)\"\n    />\n    <span></span>\n    <i\n      *ngIf=\"to.icon\"\n      c8yIcon=\"{{to.icon}}\"\n      class=\"icon-flex icon-20 m-r-4\"\n    ></i>\n    <span\n      class=\"text-truncate\"\n      title=\"{{ to.label | humanize }}\"\n    >\n      {{ to.label | humanize }}\n    </span>\n    <span *ngIf=\"to.required && to.hideRequiredMarker !== true\">\n      <em\n        class=\"m-l-4\"\n        translate\n      >\n        (required)\n      </em>\n    </span>\n  </label>\n  <button\n    class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"to.description\"\n    placement=\"right\"\n    triggers=\"focus\"\n    type=\"button\"\n    *ngIf=\"!!to.description\"\n  ></button>\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldCheckbox, decorators: [{
             type: Component,
@@ -26901,7 +26927,7 @@ class FieldDate extends FieldType {
         this.dateInputFormat = this.dateFormatService.getDateFormat();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldDate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldDate, isStandalone: true, selector: "c8y-field-date", usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <label id=\"{{ id + '-fieldset' }}\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </label>\n  <div class=\"form-group datepicker\">\n    <input\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      class=\"form-control\"\n      placeholder=\"Date\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: dateInputFormat }\"\n      [placeholder]=\"'Select a date\u2026' | translate\"\n      placement=\"top\"\n      bsDatepicker\n      [required]=\"to.required\"\n    />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i2.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i2.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldDate, isStandalone: true, selector: "c8y-field-date", usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <label id=\"{{ id + '-fieldset' }}\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </label>\n  <div class=\"form-group datepicker\">\n    <input\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      class=\"form-control\"\n      placeholder=\"Date\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: dateInputFormat }\"\n      [placeholder]=\"'Select a date\u2026' | translate\"\n      placement=\"top\"\n      bsDatepicker\n      [required]=\"to.required\"\n    />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i2.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i2.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldDate, decorators: [{
             type: Component,
@@ -26994,7 +27020,7 @@ class WrapperFormField extends FieldWrapper {
         this.smallFormGroup = this.props?.smallFormGroup || false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WrapperFormField, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WrapperFormField, isStandalone: true, selector: "c8y-wrapper-form-field", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"form-group\"\n  [class.has-error]=\"showError\"\n  [class.form-group-sm]=\"smallFormGroup\"\n>\n  <label\n    class=\"text-pre-wrap\"\n    *ngIf=\"to.label && to.hideLabel !== true\"\n    [attr.for]=\"id\"\n  >\n    {{ to.humanizeLabel === false ? to.label : (to.label | humanize) }}\n    <i\n      class=\"text-info\"\n      c8yIcon=\"info-circle\"\n      title=\"{{ to.tooltip | translate }}\"\n      *ngIf=\"to.tooltip\"\n    ></i>\n    <ng-template #description><div [innerHTML]=\"to.description | translate\"></div></ng-template>\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"description\"\n      placement=\"right\"\n      type=\"button\"\n      [outsideClick]=\"true\"\n      *ngIf=\"to.description && showDescriptionAsPopup\"\n    ></button>\n  </label>\n  <div class=\"d-flex\">\n    <div class=\"flex-grow\">\n      <ng-template #fieldComponent></ng-template>\n    </div>\n    <ng-container *ngIf=\"to.customTemplateRef\">\n      <ng-container *ngTemplateOutlet=\"to.customTemplateRef\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"c8y-messages\"\n    *ngIf=\"showError\"\n  >\n    <formly-validation-message\n      class=\"form-control-feedback-message\"\n      [field]=\"field\"\n    ></formly-validation-message>\n  </div>\n\n  <div\n    class=\"help-block has-info text-muted\"\n    *ngIf=\"!showError && to.description && !showDescriptionAsPopup\"\n    [innerHTML]=\"to.description | translate\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WrapperFormField, isStandalone: true, selector: "c8y-wrapper-form-field", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"form-group\"\n  [class.has-error]=\"showError\"\n  [class.form-group-sm]=\"smallFormGroup\"\n>\n  <label\n    class=\"text-pre-wrap\"\n    *ngIf=\"to.label && to.hideLabel !== true\"\n    [attr.for]=\"id\"\n  >\n    {{ to.humanizeLabel === false ? to.label : (to.label | humanize) }}\n    <i\n      class=\"text-info\"\n      c8yIcon=\"info-circle\"\n      title=\"{{ to.tooltip | translate }}\"\n      *ngIf=\"to.tooltip\"\n    ></i>\n    <ng-template #description><div [innerHTML]=\"to.description | translate\"></div></ng-template>\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"description\"\n      placement=\"right\"\n      type=\"button\"\n      [outsideClick]=\"true\"\n      *ngIf=\"to.description && showDescriptionAsPopup\"\n    ></button>\n  </label>\n  <div class=\"d-flex\">\n    <div class=\"flex-grow\">\n      <ng-template #fieldComponent></ng-template>\n    </div>\n    <ng-container *ngIf=\"to.customTemplateRef\">\n      <ng-container *ngTemplateOutlet=\"to.customTemplateRef\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"c8y-messages\"\n    *ngIf=\"showError\"\n  >\n    <formly-validation-message\n      class=\"form-control-feedback-message\"\n      [field]=\"field\"\n    ></formly-validation-message>\n  </div>\n\n  <div\n    class=\"help-block has-info text-muted\"\n    *ngIf=\"!showError && to.description && !showDescriptionAsPopup\"\n    [innerHTML]=\"to.description | translate\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WrapperFormField, decorators: [{
             type: Component,
@@ -27052,7 +27078,7 @@ class FieldInput extends FieldType {
         return this.to.type || 'text';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldInput, isStandalone: true, selector: "c8y-field-input", usesInheritance: true, ngImport: i0, template: "@switch (type) {\n  @case ('number') {\n    <input\n      class=\"form-control\"\n      [class.is-invalid]=\"showError\"\n      type=\"number\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [required]=\"to.required\"\n      [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n    />\n  }\n  @case ('password') {\n    <c8y-password-input\n      [class.is-invalid]=\"showError\"\n      [formlyAttributes]=\"field\"\n      [formControl]=\"formControl\"\n      [required]=\"to.required\"\n      [large]=\"false\"\n    ></c8y-password-input>\n  }\n  @default {\n    <input\n      class=\"form-control\"\n      [class.is-invalid]=\"showError\"\n      [type]=\"type\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [required]=\"to.required\"\n      [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n    />\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete", "large"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldInput, isStandalone: true, selector: "c8y-field-input", usesInheritance: true, ngImport: i0, template: "@switch (type) {\n  @case ('number') {\n    <input\n      class=\"form-control\"\n      [class.is-invalid]=\"showError\"\n      type=\"number\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [required]=\"to.required\"\n      [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n    />\n  }\n  @case ('password') {\n    <c8y-password-input\n      [class.is-invalid]=\"showError\"\n      [formlyAttributes]=\"field\"\n      [formControl]=\"formControl\"\n      [required]=\"to.required\"\n      [large]=\"false\"\n    ></c8y-password-input>\n  }\n  @default {\n    <input\n      class=\"form-control\"\n      [class.is-invalid]=\"showError\"\n      [type]=\"type\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [required]=\"to.required\"\n      [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n    />\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete", "large"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
@@ -27082,7 +27108,7 @@ const objectTypeConfig = () => importProvidersFrom(FormlyModule.forChild({
 }));
 class ObjectTypeComponent extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ObjectTypeComponent, isStandalone: true, selector: "c8y-object-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <p *ngIf=\"to.label\" class=\"text-medium\" id=\"{{ id + '-fieldset' }}\">\n    {{ to.label | humanize }}\n  </p>\n  <p *ngIf=\"to.description\" class=\"m-b-8 small\">\n    {{ to.description }}\n  </p>\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n  <formly-field *ngFor=\"let f of field.fieldGroup\" [field]=\"f\"></formly-field>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ObjectTypeComponent, isStandalone: true, selector: "c8y-object-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <p *ngIf=\"to.label\" class=\"text-medium\" id=\"{{ id + '-fieldset' }}\">\n    {{ to.label | humanize }}\n  </p>\n  <p *ngIf=\"to.description\" class=\"m-b-8 small\">\n    {{ to.description }}\n  </p>\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n  <formly-field *ngFor=\"let f of field.fieldGroup\" [field]=\"f\"></formly-field>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectTypeComponent, decorators: [{
             type: Component,
@@ -27109,7 +27135,7 @@ class FieldRadio extends FieldType {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldRadio, isStandalone: true, selector: "c8y-field-radio", usesInheritance: true, ngImport: i0, template: "<label\n  *ngFor=\"let option of to.options | formlySelectOptions: field | async; let i = index\"\n  [title]=\"option.label\"\n  class=\"c8y-radio\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"id + '_' + i\"\n    [name]=\"field.name || id\"\n    [attr.value]=\"option.value\"\n    [value]=\"option.value\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [attr.disabled]=\"option.disabled || formControl.disabled ? true : null\"\n  />\n  <span></span>\n  <span>{{ field.props.humanizeLabel === false ? option.label : (option.label | humanize) }}</span>\n</label>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: i3.FormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldRadio, isStandalone: true, selector: "c8y-field-radio", usesInheritance: true, ngImport: i0, template: "<label\n  *ngFor=\"let option of to.options | formlySelectOptions: field | async; let i = index\"\n  [title]=\"option.label\"\n  class=\"c8y-radio\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"id + '_' + i\"\n    [name]=\"field.name || id\"\n    [attr.value]=\"option.value\"\n    [value]=\"option.value\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [attr.disabled]=\"option.disabled || formControl.disabled ? true : null\"\n  />\n  <span></span>\n  <span>{{ field.props.humanizeLabel === false ? option.label : (option.label | humanize) }}</span>\n</label>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: i3.FormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRadio, decorators: [{
             type: Component,
@@ -27152,7 +27178,7 @@ class SelectTypeComponent extends FieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectTypeComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SelectTypeComponent, isStandalone: true, selector: "c8y-select-type", usesInheritance: true, ngImport: i0, template: "<div class=\"c8y-select-wrapper\">\n  <select\n    class=\"form-control\"\n    [class.is-invalid]=\"showError\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [required]=\"properties.required\"\n  >\n    <option\n      [disabled]=\"\n        properties.required ||\n        (properties.acceptUndefined != null ? !properties.acceptUndefined : true)\n      \"\n      [ngValue]=\"undefined\"\n      selected\n    >\n      {{ placeholder$ | async | translate }}\n    </option>\n    <ng-container *ngFor=\"let opt of options$ | async\">\n      <option\n        [ngValue]=\"opt[valueProp]\"\n        [disabled]=\"opt.disabled || false\"\n      >\n        {{ opt[labelProp] | translate }}\n      </option>\n    </ng-container>\n  </select>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SelectTypeComponent, isStandalone: true, selector: "c8y-select-type", usesInheritance: true, ngImport: i0, template: "<div class=\"c8y-select-wrapper\">\n  <select\n    class=\"form-control\"\n    [class.is-invalid]=\"showError\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [required]=\"properties.required\"\n  >\n    <option\n      [disabled]=\"\n        properties.required ||\n        (properties.acceptUndefined != null ? !properties.acceptUndefined : true)\n      \"\n      [ngValue]=\"undefined\"\n      selected\n    >\n      {{ placeholder$ | async | translate }}\n    </option>\n    <ng-container *ngFor=\"let opt of options$ | async\">\n      <option\n        [ngValue]=\"opt[valueProp]\"\n        [disabled]=\"opt.disabled || false\"\n      >\n        {{ opt[labelProp] | translate }}\n      </option>\n    </ng-container>\n  </select>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectTypeComponent, decorators: [{
             type: Component,
@@ -27198,7 +27224,7 @@ class FieldTextArea extends FieldType {
       [formlyAttributes]="field"
       [placeholder]="props.placeholder"
     ></textarea>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldTextArea, decorators: [{
             type: Component,
@@ -27277,7 +27303,7 @@ class TypeaheadTypeComponent extends FieldType {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TypeaheadTypeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TypeaheadTypeComponent, isStandalone: true, selector: "c8y-typeahead-type", usesInheritance: true, ngImport: i0, template: "<c8y-typeahead\n  [required]=\"to?.required || false\"\n  [placeholder]=\"placeholder$ | async\"\n  [displayProperty]=\"to?.displayProperty\"\n  [selected]=\"selected\"\n  [allowFreeEntries]=\"to?.allowFreeEntries || false\"\n  [container]=\"to?.container || ''\"\n  [disabled]=\"to?.disabled\"\n  (onSearch)=\"setPipe($event)\"\n  [formControl]=\"formControl\"\n  [class.is-invalid]=\"showError\"\n  [formlyAttributes]=\"field\">\n    <c8y-li *c8yFor=\"let opt of to?.c8yForOptions; loadMore: to?.loadMore || 'auto'; pipe: filterPipe; notFound: notFoundTemplate; loadingTemplate: loading;\"\n          (click)=\"selectOption(opt); setPipe('')\"\n          class=\"p-l-8 p-r-8 c8y-list__item--link\"\n          [attr.role]=\"'menuitem'\">\n    <c8y-highlight [text]=\"opt[labelProp]\" [pattern]=\"pattern\"></c8y-highlight>\n  </c8y-li>\n  <ng-template #notFoundTemplate>\n    <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0 && !match\">\n      <p><strong translate>No match found.</strong></p>\n    </c8y-li>\n  </ng-template>\n  <ng-template #loading>\n    <c8y-li class=\"text-center p-t-8 p-relative\">\n      <c8y-loading></c8y-loading>\n    </c8y-li>\n  </ng-template>\n</c8y-typeahead>\n", dependencies: [{ kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TypeaheadTypeComponent, isStandalone: true, selector: "c8y-typeahead-type", usesInheritance: true, ngImport: i0, template: "<c8y-typeahead\n  [required]=\"to?.required || false\"\n  [placeholder]=\"placeholder$ | async\"\n  [displayProperty]=\"to?.displayProperty\"\n  [selected]=\"selected\"\n  [allowFreeEntries]=\"to?.allowFreeEntries || false\"\n  [container]=\"to?.container || ''\"\n  [disabled]=\"to?.disabled\"\n  (onSearch)=\"setPipe($event)\"\n  [formControl]=\"formControl\"\n  [class.is-invalid]=\"showError\"\n  [formlyAttributes]=\"field\">\n    <c8y-li *c8yFor=\"let opt of to?.c8yForOptions; loadMore: to?.loadMore || 'auto'; pipe: filterPipe; notFound: notFoundTemplate; loadingTemplate: loading;\"\n          (click)=\"selectOption(opt); setPipe('')\"\n          class=\"p-l-8 p-r-8 c8y-list__item--link\"\n          [attr.role]=\"'menuitem'\">\n    <c8y-highlight [text]=\"opt[labelProp]\" [pattern]=\"pattern\"></c8y-highlight>\n  </c8y-li>\n  <ng-template #notFoundTemplate>\n    <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0 && !match\">\n      <p><strong translate>No match found.</strong></p>\n    </c8y-li>\n  </ng-template>\n  <ng-template #loading>\n    <c8y-li class=\"text-center p-t-8 p-relative\">\n      <c8y-loading></c8y-loading>\n    </c8y-li>\n  </ng-template>\n</c8y-typeahead>\n", dependencies: [{ kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TypeaheadTypeComponent, decorators: [{
             type: Component,
@@ -31977,7 +32003,7 @@ class BaseFilteringFormRendererComponent {
         this.context.resetFilter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseFilteringFormRendererComponent, deps: [{ token: FilteringFormRendererContext }, { token: C8yJSONSchema }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BaseFilteringFormRendererComponent, isStandalone: true, selector: "c8y-base-filtering-form-renderer", host: { listeners: { "keyup.enter": "onEnterKeyUp($event)", "keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<formly-form\n  [form]=\"form\"\n  [fields]=\"fields\"\n  [model]=\"model\"\n></formly-form>\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    title=\"{{ 'Reset' | translate }}\"\n    (click)=\"resetFilter()\"\n    translate\n  >\n    Reset\n  </button>\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    title=\"{{ 'Apply' | translate }}\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"form.pristine || form.invalid\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BaseFilteringFormRendererComponent, isStandalone: true, selector: "c8y-base-filtering-form-renderer", host: { listeners: { "keyup.enter": "onEnterKeyUp($event)", "keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<formly-form\n  [form]=\"form\"\n  [fields]=\"fields\"\n  [model]=\"model\"\n></formly-form>\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    title=\"{{ 'Reset' | translate }}\"\n    (click)=\"resetFilter()\"\n    translate\n  >\n    Reset\n  </button>\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    title=\"{{ 'Apply' | translate }}\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"form.pristine || form.invalid\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseFilteringFormRendererComponent, decorators: [{
             type: Component,
@@ -34955,13 +34981,13 @@ class ListDisplaySwitchComponent {
     getListKey() {
         return this.listKey || this.location.path();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListDisplaySwitchComponent, deps: [{ token: i1$a.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListDisplaySwitchComponent, deps: [{ token: i2$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ListDisplaySwitchComponent, isStandalone: true, selector: "c8y-list-display-switch", inputs: { listKey: "listKey", listLength: "listLength", filterPipe: "filterPipe" }, outputs: { onListClassChange: "onListClassChange" }, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <label class=\"m-r-8 m-b-0\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListDisplaySwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-list-display-switch', standalone: true, imports: [FormsModule$1, NgFor, C8yTranslatePipe], template: "<div class=\"d-flex a-i-center\">\n  <label class=\"m-r-8 m-b-0\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$a.Location }], propDecorators: { listKey: [{
+        }], ctorParameters: () => [{ type: i2$3.Location }], propDecorators: { listKey: [{
                 type: Input
             }], listLength: [{
                 type: Input,
@@ -36842,7 +36868,7 @@ class PreviewFeatureComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewFeatureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PreviewFeatureComponent, isStandalone: true, selector: "c8y-preview-feature", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, classAttribute: "d-contents" }, providers: [MarkdownToHtmlPipe], ngImport: i0, template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        @for (feature of features$ | async; track feature) {\n          <div\n            [class.active]=\"feature === selectedFeature\"\n            class=\"d-flex fit-w a-i-center\"\n          >\n            <button\n              class=\"d-flex gap-4 text-truncate flex-grow min-width-0\"\n              title=\"{{ feature.label }}\"\n              [ngClass]=\"{\n                'bg-component': feature === selectedFeature,\n                'bg-level-1': feature !== selectedFeature\n              }\"\n              (click)=\"updateSelectedFeature(feature)\"\n            >\n              <i\n                class=\"m-l-0\"\n                [c8yIcon]=\"'science'\"\n              ></i>\n              <span class=\"text-truncate\">\n                {{ feature.label }}\n              </span>\n            </button>\n            <div\n              class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n              [ngClass]=\"{\n                'bg-component': feature === selectedFeature,\n                'bg-level-1': feature !== selectedFeature\n              }\"\n            >\n              <label\n                class=\"c8y-switch c8y-switch--inline m-l-auto\"\n                title=\"{{ 'Enable or disable' | translate }}\"\n              >\n                <input\n                  [attr.aria-label]=\"feature.label\"\n                  type=\"checkbox\"\n                  [checked]=\"feature.key | featureState | async\"\n                  (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n                />\n                <span class=\"slider round\"></span>\n              </label>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (selectedFeature) {\n      <div class=\"col-md-8 col-lg-9 p-24 inner-scroll markdown-content\">\n        <span class=\"tag tag--primary h4\">\n          {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n        </span>\n        @if (isComponent(description$.value)) {\n          <div>\n            <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n            @if (selectedFeature.key) {\n              <c8y-feedback-form\n                [featureKey]=\"selectedFeature.key\"\n                [featurePreviewName]=\"selectedFeature.label\"\n              ></c8y-feedback-form>\n            }\n          </div>\n        } @else {\n          <p [innerHTML]=\"description$.value\"></p>\n          @if (selectedFeature.key) {\n            <c8y-feedback-form\n              [featureKey]=\"selectedFeature.key\"\n              [featurePreviewName]=\"selectedFeature.label\"\n            ></c8y-feedback-form>\n          }\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: FeedbackFormComponent, selector: "c8y-feedback-form", inputs: ["featureKey", "featurePreviewName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: FeatureStatePipe, name: "featureState" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PreviewFeatureComponent, isStandalone: true, selector: "c8y-preview-feature", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, classAttribute: "d-contents" }, providers: [MarkdownToHtmlPipe], ngImport: i0, template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        @for (feature of features$ | async; track feature) {\n          <div\n            [class.active]=\"feature === selectedFeature\"\n            class=\"d-flex fit-w a-i-center\"\n          >\n            <button\n              class=\"d-flex gap-4 text-truncate flex-grow min-width-0\"\n              title=\"{{ feature.label }}\"\n              [ngClass]=\"{\n                'bg-component': feature === selectedFeature,\n                'bg-level-1': feature !== selectedFeature\n              }\"\n              (click)=\"updateSelectedFeature(feature)\"\n            >\n              <i\n                class=\"m-l-0\"\n                [c8yIcon]=\"'science'\"\n              ></i>\n              <span class=\"text-truncate\">\n                {{ feature.label }}\n              </span>\n            </button>\n            <div\n              class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n              [ngClass]=\"{\n                'bg-component': feature === selectedFeature,\n                'bg-level-1': feature !== selectedFeature\n              }\"\n            >\n              <label\n                class=\"c8y-switch c8y-switch--inline m-l-auto\"\n                title=\"{{ 'Enable or disable' | translate }}\"\n              >\n                <input\n                  [attr.aria-label]=\"feature.label\"\n                  type=\"checkbox\"\n                  [checked]=\"feature.key | featureState | async\"\n                  (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n                />\n                <span class=\"slider round\"></span>\n              </label>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (selectedFeature) {\n      <div class=\"col-md-8 col-lg-9 p-24 inner-scroll markdown-content\">\n        <span class=\"tag tag--primary h4\">\n          {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n        </span>\n        @if (isComponent(description$.value)) {\n          <div>\n            <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n            @if (selectedFeature.key) {\n              <c8y-feedback-form\n                [featureKey]=\"selectedFeature.key\"\n                [featurePreviewName]=\"selectedFeature.label\"\n              ></c8y-feedback-form>\n            }\n          </div>\n        } @else {\n          <p [innerHTML]=\"description$.value\"></p>\n          @if (selectedFeature.key) {\n            <c8y-feedback-form\n              [featureKey]=\"selectedFeature.key\"\n              [featurePreviewName]=\"selectedFeature.label\"\n            ></c8y-feedback-form>\n          }\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: FeedbackFormComponent, selector: "c8y-feedback-form", inputs: ["featureKey", "featurePreviewName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: FeatureStatePipe, name: "featureState" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewFeatureComponent, decorators: [{
             type: Component,
@@ -37399,7 +37425,7 @@ class ProviderConfigurationComponent {
         return mapValues(configuration, value => (value === '<<Encrypted>>' ? undefined : value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProviderConfigurationComponent, deps: [{ token: Permissions }, { token: i1$4.ActivatedRoute }, { token: ModalService }, { token: AlertService }, { token: ProviderDefinitionsService }, { token: ProviderConfigurationService }, { token: C8yJSONSchema }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProviderConfigurationComponent, isStandalone: true, selector: "c8y-sms-gateway", providers: [ProviderConfigurationService, ProviderDefinitionsService], ngImport: i0, template: "<c8y-title>\n  {{ (layout$ | async)?.pageTitle | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [label]=\"'Settings' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle !='Connectivity'\"\n    [label]=\"'SMS provider' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [label]=\"'Connectivity' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [icon]=\"'cog'\"\n    [label]=\"'SIM provider settings' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"row\">\n  <div class=\"col-md-8 col-xs-12\">\n    <form class=\"card card--fullpage\" (ngSubmit)=\"saveProviderConfiguration()\">\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">\n          {{ (layout$ | async)?.cardTitle | translate }}\n        </div>\n      </div>\n      <div class=\"inner-scroll\">\n        <div class=\"card-block\">\n          <p *ngIf=\"!!(layout$ | async)?.description\" class=\"m-b-8\">\n            {{ (layout$ | async)?.description | translate }}\n          </p>\n          <c8y-form-group>\n            <label for=\"providerName\">{{ (layout$ | async)?.providerName | translate }}</label>\n            <c8y-typeahead\n              [disabled]=\"!permissions.hasAllRoles((layout$ | async)?.saveRoles || [])\"\n              [ngModel]=\"selectedProvider$ | async\"\n              [displayProperty]=\"'displayName'\"\n              name=\"providerName\"\n              placeholder=\"{{ (layout$ | async)?.providerNamePlaceholder | translate }}\"\n              (onSearch)=\"providerInput$.next($event)\"\n              [allowFreeEntries]=\"false\"\n              [required]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                *ngFor=\"let provider of providers$ | async\"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"changeProvider$.next(provider); providerInput$.next('')\"\n                [active]=\"(selectedProvider$ | async) === provider\"\n                [attr.role]=\"'menuitem'\"\n              >\n                <c8y-highlight\n                  [text]=\"provider.displayName || '--'\"\n                  [pattern]=\"providerInput$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <c8y-messages>\n              <c8y-message\n                name=\"notExisting\"\n                [text]=\"(layout$ | async)?.providerNameNoMatchesHint | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n          <formly-form\n            *ngIf=\"selectedProvider$ | async\"\n            [form]=\"form\"\n            [fields]=\"fields\"\n            [model]=\"model\"\n            [options]=\"options\"\n          ></formly-form>\n        </div>\n      </div>\n      <div class=\"card-footer separator\" *c8yIfAllowed=\"allRoles$ | async; allowAny\">\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.deleteRoles\"\n          class=\"btn btn-default\"\n          type=\"button\"\n          (click)=\"deleteProviderConfiguration()\"\n          [disabled]=\"\n            !(configuration$ | async)?.provider && !(configuration$ | async)?.providerName\n          \"\n          title=\"{{ (layout$ | async)?.deleteBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.deleteBtnLabel | translate }}\n        </button>\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.saveRoles\"\n          class=\"btn btn-primary\"\n          type=\"submit\"\n          [disabled]=\"form.invalid || form.pristine\"\n          title=\"{{ (layout$ | async)?.saveBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.saveBtnLabel | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProviderConfigurationComponent, isStandalone: true, selector: "c8y-sms-gateway", providers: [ProviderConfigurationService, ProviderDefinitionsService], ngImport: i0, template: "<c8y-title>\n  {{ (layout$ | async)?.pageTitle | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [label]=\"'Settings' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle !='Connectivity'\"\n    [label]=\"'SMS provider' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [label]=\"'Connectivity' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [icon]=\"'cog'\"\n    [label]=\"'SIM provider settings' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"row\">\n  <div class=\"col-md-8 col-xs-12\">\n    <form class=\"card card--fullpage\" (ngSubmit)=\"saveProviderConfiguration()\">\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">\n          {{ (layout$ | async)?.cardTitle | translate }}\n        </div>\n      </div>\n      <div class=\"inner-scroll\">\n        <div class=\"card-block\">\n          <p *ngIf=\"!!(layout$ | async)?.description\" class=\"m-b-8\">\n            {{ (layout$ | async)?.description | translate }}\n          </p>\n          <c8y-form-group>\n            <label for=\"providerName\">{{ (layout$ | async)?.providerName | translate }}</label>\n            <c8y-typeahead\n              [disabled]=\"!permissions.hasAllRoles((layout$ | async)?.saveRoles || [])\"\n              [ngModel]=\"selectedProvider$ | async\"\n              [displayProperty]=\"'displayName'\"\n              name=\"providerName\"\n              placeholder=\"{{ (layout$ | async)?.providerNamePlaceholder | translate }}\"\n              (onSearch)=\"providerInput$.next($event)\"\n              [allowFreeEntries]=\"false\"\n              [required]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                *ngFor=\"let provider of providers$ | async\"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"changeProvider$.next(provider); providerInput$.next('')\"\n                [active]=\"(selectedProvider$ | async) === provider\"\n                [attr.role]=\"'menuitem'\"\n              >\n                <c8y-highlight\n                  [text]=\"provider.displayName || '--'\"\n                  [pattern]=\"providerInput$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <c8y-messages>\n              <c8y-message\n                name=\"notExisting\"\n                [text]=\"(layout$ | async)?.providerNameNoMatchesHint | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n          <formly-form\n            *ngIf=\"selectedProvider$ | async\"\n            [form]=\"form\"\n            [fields]=\"fields\"\n            [model]=\"model\"\n            [options]=\"options\"\n          ></formly-form>\n        </div>\n      </div>\n      <div class=\"card-footer separator\" *c8yIfAllowed=\"allRoles$ | async; allowAny\">\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.deleteRoles\"\n          class=\"btn btn-default\"\n          type=\"button\"\n          (click)=\"deleteProviderConfiguration()\"\n          [disabled]=\"\n            !(configuration$ | async)?.provider && !(configuration$ | async)?.providerName\n          \"\n          title=\"{{ (layout$ | async)?.deleteBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.deleteBtnLabel | translate }}\n        </button>\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.saveRoles\"\n          class=\"btn btn-primary\"\n          type=\"submit\"\n          [disabled]=\"form.invalid || form.pristine\"\n          title=\"{{ (layout$ | async)?.saveBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.saveBtnLabel | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProviderConfigurationComponent, decorators: [{
             type: Component,
@@ -38766,7 +38792,7 @@ class SplitViewDetailsComponent {
             this.selectionService?.clearSelection();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SplitViewDetailsComponent, deps: [{ token: SplitViewSelectionService, optional: true }, { token: i1$a.Location, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SplitViewDetailsComponent, deps: [{ token: SplitViewSelectionService, optional: true }, { token: i2$3.Location, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SplitViewDetailsComponent, isStandalone: true, selector: "c8y-sv-details", inputs: { title: "title", ariaLabel: "ariaLabel", cssClass: "cssClass", emptyStateIcon: "emptyStateIcon", emptyStateTitle: "emptyStateTitle", emptyStateSubtitle: "emptyStateSubtitle" }, outputs: { backClick: "backClick" }, host: { classAttribute: "d-contents" }, queries: [{ propertyName: "extraHeaderComponent", first: true, predicate: SplitViewExtraHeaderComponent, descendants: true }, { propertyName: "actionsComponent", first: true, predicate: SplitViewDetailsActionsComponent, descendants: true }, { propertyName: "footerComponent", first: true, predicate: SplitViewFooterComponent, descendants: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true }], ngImport: i0, template: "<div\n  class=\"inner-scroll fit-h d-col fit-w split-view__detail\"\n  [class.split-view__detail--selected]=\"hasSelection\"\n  [attr.aria-label]=\"ariaLabel | translate\"\n  role=\"region\"\n  [ngClass]=\"cssClass\"\n  data-cy=\"c8y-sv-details\"\n>\n  <!-- Back button for mobile/tablet -->\n  @if (hasSelection) {\n    <div class=\"card-header separator sticky-top visible-sm visible-xs\">\n      <button\n        class=\"btn btn-clean text-primary\"\n        [title]=\"'Back' | translate\"\n        [attr.aria-label]=\"'Back' | translate\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (title || hasExtraHeader) {\n    <div\n      class=\"p-l-24 p-r-24 card-header flex-no-shrink sticky-top bg-component separator\"\n      [ngClass]=\"{ 'flex-wrap': hasExtraHeader, 'gap-8': hasExtraHeader && title }\"\n    >\n      <h4 class=\"card-title\">{{ title | translate }}</h4>\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasExtraHeader) {\n        <div class=\"details-info fit-w\">\n          <ng-content select=\"c8y-sv-extra-header\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n  <!-- Empty state when nothing is selected -->\n  @if (!hasSelection) {\n    <div class=\"d-flex a-i-center j-c-center flex-grow p-24\">\n      <c8y-ui-empty-state\n        [icon]=\"emptyStateIcon\"\n        [title]=\"emptyStateTitle\"\n        [subtitle]=\"emptyStateSubtitle\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (hasSelection) {\n    <div\n      class=\"p-24\"\n      [ngClass]=\"{ 'p-t-0': !title && !hasExtraHeader }\"\n    >\n      <div class=\"details-content\">\n        <ng-content\n          select=\":not(c8y-sv-extra-header):not(c8y-sv-details-actions):not(c8y-sv-footer):not(c8y-sv-header-actions)\"\n        ></ng-content>\n      </div>\n\n      @if (hasActions) {\n        <div class=\"details-actions\">\n          <ng-content select=\"c8y-sv-details-actions\"></ng-content>\n        </div>\n      }\n    </div>\n    @if (hasFooter) {\n      <ng-content select=\"c8y-sv-footer\"></ng-content>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SplitViewDetailsComponent, decorators: [{
@@ -38774,7 +38800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'c8y-sv-details', host: { class: 'd-contents' }, standalone: true, imports: [NgClass, C8yTranslatePipe, EmptyStateComponent, IconDirective], template: "<div\n  class=\"inner-scroll fit-h d-col fit-w split-view__detail\"\n  [class.split-view__detail--selected]=\"hasSelection\"\n  [attr.aria-label]=\"ariaLabel | translate\"\n  role=\"region\"\n  [ngClass]=\"cssClass\"\n  data-cy=\"c8y-sv-details\"\n>\n  <!-- Back button for mobile/tablet -->\n  @if (hasSelection) {\n    <div class=\"card-header separator sticky-top visible-sm visible-xs\">\n      <button\n        class=\"btn btn-clean text-primary\"\n        [title]=\"'Back' | translate\"\n        [attr.aria-label]=\"'Back' | translate\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (title || hasExtraHeader) {\n    <div\n      class=\"p-l-24 p-r-24 card-header flex-no-shrink sticky-top bg-component separator\"\n      [ngClass]=\"{ 'flex-wrap': hasExtraHeader, 'gap-8': hasExtraHeader && title }\"\n    >\n      <h4 class=\"card-title\">{{ title | translate }}</h4>\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasExtraHeader) {\n        <div class=\"details-info fit-w\">\n          <ng-content select=\"c8y-sv-extra-header\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n  <!-- Empty state when nothing is selected -->\n  @if (!hasSelection) {\n    <div class=\"d-flex a-i-center j-c-center flex-grow p-24\">\n      <c8y-ui-empty-state\n        [icon]=\"emptyStateIcon\"\n        [title]=\"emptyStateTitle\"\n        [subtitle]=\"emptyStateSubtitle\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (hasSelection) {\n    <div\n      class=\"p-24\"\n      [ngClass]=\"{ 'p-t-0': !title && !hasExtraHeader }\"\n    >\n      <div class=\"details-content\">\n        <ng-content\n          select=\":not(c8y-sv-extra-header):not(c8y-sv-details-actions):not(c8y-sv-footer):not(c8y-sv-header-actions)\"\n        ></ng-content>\n      </div>\n\n      @if (hasActions) {\n        <div class=\"details-actions\">\n          <ng-content select=\"c8y-sv-details-actions\"></ng-content>\n        </div>\n      }\n    </div>\n    @if (hasFooter) {\n      <ng-content select=\"c8y-sv-footer\"></ng-content>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: SplitViewSelectionService, decorators: [{
                     type: Optional
-                }] }, { type: i1$a.Location, decorators: [{
+                }] }, { type: i2$3.Location, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
@@ -39085,7 +39111,7 @@ class SplitViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SplitViewComponent, deps: [{ token: SplitViewSelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SplitViewComponent, isStandalone: true, selector: "c8y-sv", inputs: { showDefaultRouterOutlet: "showDefaultRouterOutlet", isResizable: "isResizable", initialSelection: "initialSelection", resizableBreakpoint: "resizableBreakpoint", resizableConfig: "resizableConfig" }, outputs: { selectionChange: "selectionChange" }, providers: [SplitViewSelectionService], queries: [{ propertyName: "_detailsComp", first: true, predicate: SplitViewDetailsComponent, descendants: true }], ngImport: i0, template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SplitViewComponent, isStandalone: true, selector: "c8y-sv", inputs: { showDefaultRouterOutlet: "showDefaultRouterOutlet", isResizable: "isResizable", initialSelection: "initialSelection", resizableBreakpoint: "resizableBreakpoint", resizableConfig: "resizableConfig" }, outputs: { selectionChange: "selectionChange" }, providers: [SplitViewSelectionService], queries: [{ propertyName: "_detailsComp", first: true, predicate: SplitViewDetailsComponent, descendants: true }], ngImport: i0, template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SplitViewComponent, decorators: [{
             type: Component,