@c8y/ngx-components 1024.20.8 → 1024.21.3

package/fesm2022/c8y-ngx-components.mjs

@@ -9573,6 +9573,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * - Traps Tab/Shift+Tab navigation within the dropdown menu
  * - Automatically closes dropdown and restores focus to toggle button when user selects an item with Enter/Space
  * - Prevents ESC key from propagating to parent elements (e.g., modals, drawers) and restores focus on close
+ * - Keeps the dropdown open for items with `aria-haspopup="dialog"` (e.g. a delete button with a
+ *   `c8y-popover-confirm`), and suspends the trap so focus can move into that dialog
+ * - Keeps the dropdown open for controls marked `data-dropdown-keep-open`, which act within the
+ *   menu instead of selecting something (e.g. "Load more" or clearing a search)
  * - Cleans up all listeners when the dropdown closes
  *
  * ## Usage
@@ -9613,7 +9617,13 @@ class DropdownFocusTrapDirective {
                 return;
             }
             const target = event.target;
-            if (!this.dropdownMenuElement?.contains(target) || target.matches('input, textarea, select')) {
+            if (!this.dropdownMenuElement?.contains(target) ||
+                target.matches('input, textarea, select') ||
+                target.closest('[data-dropdown-keep-open]')) {
+                return;
+            }
+            if (this.opensDialog(target)) {
+                this.suspendFocusTrap();
                 return;
             }
             this.shouldRestoreFocus = true;
@@ -9623,11 +9633,27 @@ class DropdownFocusTrapDirective {
             if (event.key !== 'Escape') {
                 return;
             }
+            // While a dialog opened from the menu has focus, Escape belongs to that dialog.
+            if (this.isFocusTrapSuspended() && !this.dropdownMenuElement?.contains(event.target)) {
+                return;
+            }
             event.preventDefault();
             event.stopImmediatePropagation();
             this.shouldRestoreFocus = true;
             this.dropdown.hide();
         };
+        /** Mouse counterpart of the Enter/Space check in `handleSelection` for dialog triggers. */
+        this.handleDialogTrigger = (event) => {
+            if (this.opensDialog(event.target)) {
+                this.suspendFocusTrap();
+            }
+        };
+        /** Re-enables the trap once focus is back in the menu, for example after the dialog closed. */
+        this.resumeFocusTrap = () => {
+            if (this.focusTrap) {
+                this.focusTrap.enabled = true;
+            }
+        };
         this.dropdown.onShown.pipe(takeUntilDestroyed()).subscribe(() => this.setupFocusTrap());
         this.dropdown.onHidden.pipe(takeUntilDestroyed()).subscribe(() => this.onDropdownHidden());
     }
@@ -9656,6 +9682,8 @@ class DropdownFocusTrapDirective {
             this.fitMenuToViewport();
             this.document.addEventListener('keydown', this.handleSelection, true);
             this.document.addEventListener('keydown', this.handleEscape, true);
+            this.dropdownMenuElement.addEventListener('click', this.handleDialogTrigger, true);
+            this.dropdownMenuElement.addEventListener('focusin', this.resumeFocusTrap);
         }, 0);
     }
     /**
@@ -9680,6 +9708,18 @@ class DropdownFocusTrapDirective {
             setTimeout(() => buttonToFocus.focus(), 0);
         }
     }
+    opensDialog(target) {
+        return !!target.closest('[aria-haspopup="dialog"]');
+    }
+    /** Lets focus leave the menu, as the dialog is appended outside of it. */
+    suspendFocusTrap() {
+        if (this.focusTrap) {
+            this.focusTrap.enabled = false;
+        }
+    }
+    isFocusTrapSuspended() {
+        return !!this.focusTrap && !this.focusTrap.enabled;
+    }
     /**
      * Cleans up the focus trap when the dropdown closes.
      * @private
@@ -9687,6 +9727,8 @@ class DropdownFocusTrapDirective {
     cleanupFocusTrap() {
         this.document.removeEventListener('keydown', this.handleSelection, true);
         this.document.removeEventListener('keydown', this.handleEscape, true);
+        this.dropdownMenuElement?.removeEventListener('click', this.handleDialogTrigger, true);
+        this.dropdownMenuElement?.removeEventListener('focusin', this.resumeFocusTrap);
         this.shouldRestoreFocus = false;
         if (this.focusTrap) {
             this.focusTrap.destroy();
@@ -16614,12 +16656,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }] } });
 
+let nextId = 0;
+/** How many frames to wait for the popover content to render before giving up on focusing it. */
+const MAX_FOCUS_FRAMES = 10;
 /**
  * A component to show a popover right next to the
  * user action. Add this component where the confirm modal
  * should be shown and toggle isOpen to display it. You
  * can use `await isShow()` to wait for a result on the
  * click action.
+ *
+ * When it opens, focus moves to its first button and Tab cycles through its buttons, Escape
+ * cancels only the popover (not a modal or drawer around it), and focus returns to the element
+ * that had it before (usually the trigger), so it can be used with the keyboard.
  */
 class PopoverConfirmComponent {
     constructor() {
@@ -16632,12 +16681,18 @@ class PopoverConfirmComponent {
         this.outsideClick = false;
         this.adaptivePosition = false;
         this.container = 'body';
+        /**
+         * Identifies the popover's footer in the DOM. ngx-bootstrap renders the popover outside this
+         * component's view, so view queries cannot reach its buttons.
+         */
+        this.footerId = `c8y-popover-confirm-${nextId++}`;
     }
     /**
      * Show the popover. Wait until an action is performed on it.
      */
     async show(buttons) {
         this.buttons = buttons || this.buttons;
+        const trigger = document.activeElement;
         this.isOpen = true;
         let result;
         try {
@@ -16651,24 +16706,62 @@ class PopoverConfirmComponent {
         }
         finally {
             this.isOpen = false;
+            this.restoreFocus(trigger);
         }
         return result;
     }
+    /** Moves focus into the popover once it is rendered. */
+    focusFirstButton(framesLeft = MAX_FOCUS_FRAMES) {
+        // `onShown` fires before ngx-bootstrap renders and positions the popover, and focus() is
+        // ignored until it is visible, so retry frame by frame until focus lands.
+        requestAnimationFrame(() => {
+            const button = document.getElementById(this.footerId)?.querySelector('button');
+            button?.focus();
+            if (document.activeElement !== button && framesLeft > 1) {
+                this.focusFirstButton(framesLeft - 1);
+            }
+        });
+    }
     buttonStatus(status) {
         if (status) {
             return `btn-${status}`;
         }
         return 'btn-default';
     }
+    /** Keeps Tab and Shift+Tab within the popover's buttons while it is open, as in a dialog. */
+    cycleFocus(event) {
+        const buttons = Array.from(document.getElementById(this.footerId)?.querySelectorAll('button') ?? []);
+        const edge = event.shiftKey ? buttons[0] : buttons[buttons.length - 1];
+        if (buttons.length && event.target === edge) {
+            event.preventDefault();
+            (event.shiftKey ? buttons[buttons.length - 1] : buttons[0]).focus();
+        }
+    }
     handleOutsideClick() {
         this.click(() => Promise.reject());
     }
+    /**
+     * Returns focus to the element that had it when the popover opened. Skipped when the user
+     * already moved focus elsewhere, or when that element is gone (e.g. its list item was deleted).
+     */
+    restoreFocus(trigger) {
+        setTimeout(() => {
+            const active = document.activeElement;
+            const focusIsLost = !active || active === document.body;
+            if (trigger?.isConnected && (focusIsLost || this.isInPopover(active))) {
+                trigger.focus();
+            }
+        });
+    }
+    isInPopover(element) {
+        return !!document.getElementById(this.footerId)?.contains(element);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PopoverConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: PopoverConfirmComponent, isStandalone: true, selector: "c8y-popover-confirm", inputs: { buttons: "buttons", message: "message", title: "title", isOpen: "isOpen", containerClass: "containerClass", placement: "placement", outsideClick: "outsideClick", adaptivePosition: "adaptivePosition", container: "container" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverDirective, descendants: true }], ngImport: i0, template: "<div\n  [class]=\"containerClass\"\n  [popoverTitle]=\"title | translate\"\n  [popover]=\"popover\"\n  [isOpen]=\"isOpen\"\n  [container]=\"container\"\n  [placement]=\"placement\"\n  [outsideClick]=\"outsideClick\"\n  (onHidden)=\"handleOutsideClick()\"\n  triggers=\"\"\n  [adaptivePosition]=\"adaptivePosition\"\n>\n  <ng-content></ng-content>\n</div>\n<ng-template #popover>\n  <p>\n    {{ message | translate }}\n  </p>\n  <div class=\"popover-footer d-flex gap-16 flex-wrap a-i-center\">\n    <ng-container *ngFor=\"let button of buttons\">\n      <button\n        class=\"btn btn-sm m-l-0\"\n        title=\"{{ button.label | translate }}\"\n        [attr.data-cy]=\"'popover-confirm--' + (button.label | translate)\"\n        [ngClass]=\"buttonStatus(button.status)\"\n        (click)=\"click(button.action)\"\n      >\n        {{ button.label | translate }}\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$8.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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PopoverConfirmComponent, isStandalone: true, selector: "c8y-popover-confirm", inputs: { buttons: "buttons", message: "message", title: "title", isOpen: "isOpen", containerClass: "containerClass", placement: "placement", outsideClick: "outsideClick", adaptivePosition: "adaptivePosition", container: "container" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverDirective, descendants: true }], ngImport: i0, template: "<div\n  [class]=\"containerClass\"\n  [popoverTitle]=\"title | translate\"\n  [popover]=\"popover\"\n  triggers=\"\"\n  [isOpen]=\"isOpen\"\n  [container]=\"container\"\n  [placement]=\"placement\"\n  [outsideClick]=\"outsideClick\"\n  (onHidden)=\"handleOutsideClick()\"\n  (onShown)=\"focusFirstButton()\"\n  [adaptivePosition]=\"adaptivePosition\"\n>\n  <ng-content></ng-content>\n</div>\n<ng-template #popover>\n  <!-- The popover is rendered outside its trigger (often in the body), so keep its clicks from\n   reaching document listeners such as a dropdown's outside-click handler, which would close the\n   menu that opened it. The buttons stop them too: a click on one closes the popover, removing this\n   wrapper's listener before the event bubbles up to it. -->\n  <div (click)=\"$event.stopPropagation()\">\n    <p>\n      {{ message | translate }}\n    </p>\n    <div\n      class=\"popover-footer d-flex gap-16 flex-wrap a-i-center\"\n      [id]=\"footerId\"\n      (keydown.escape)=\"$event.stopPropagation(); handleOutsideClick()\"\n      (keydown.tab)=\"cycleFocus($any($event))\"\n      (keydown.shift.tab)=\"cycleFocus($any($event))\"\n    >\n      @for (button of buttons; track button) {\n        <button\n          class=\"btn btn-sm m-l-0\"\n          title=\"{{ button.label | translate }}\"\n          [attr.data-cy]=\"'popover-confirm--' + (button.label | translate)\"\n          [ngClass]=\"buttonStatus(button.status)\"\n          (click)=\"$event.stopPropagation(); click(button.action)\"\n        >\n          {{ button.label | translate }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$8.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PopoverConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-popover-confirm', standalone: true, imports: [PopoverModule, NgFor, NgClass, C8yTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  [class]=\"containerClass\"\n  [popoverTitle]=\"title | translate\"\n  [popover]=\"popover\"\n  [isOpen]=\"isOpen\"\n  [container]=\"container\"\n  [placement]=\"placement\"\n  [outsideClick]=\"outsideClick\"\n  (onHidden)=\"handleOutsideClick()\"\n  triggers=\"\"\n  [adaptivePosition]=\"adaptivePosition\"\n>\n  <ng-content></ng-content>\n</div>\n<ng-template #popover>\n  <p>\n    {{ message | translate }}\n  </p>\n  <div class=\"popover-footer d-flex gap-16 flex-wrap a-i-center\">\n    <ng-container *ngFor=\"let button of buttons\">\n      <button\n        class=\"btn btn-sm m-l-0\"\n        title=\"{{ button.label | translate }}\"\n        [attr.data-cy]=\"'popover-confirm--' + (button.label | translate)\"\n        [ngClass]=\"buttonStatus(button.status)\"\n        (click)=\"click(button.action)\"\n      >\n        {{ button.label | translate }}\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-popover-confirm', standalone: true, imports: [PopoverModule, NgClass, C8yTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  [class]=\"containerClass\"\n  [popoverTitle]=\"title | translate\"\n  [popover]=\"popover\"\n  triggers=\"\"\n  [isOpen]=\"isOpen\"\n  [container]=\"container\"\n  [placement]=\"placement\"\n  [outsideClick]=\"outsideClick\"\n  (onHidden)=\"handleOutsideClick()\"\n  (onShown)=\"focusFirstButton()\"\n  [adaptivePosition]=\"adaptivePosition\"\n>\n  <ng-content></ng-content>\n</div>\n<ng-template #popover>\n  <!-- The popover is rendered outside its trigger (often in the body), so keep its clicks from\n   reaching document listeners such as a dropdown's outside-click handler, which would close the\n   menu that opened it. The buttons stop them too: a click on one closes the popover, removing this\n   wrapper's listener before the event bubbles up to it. -->\n  <div (click)=\"$event.stopPropagation()\">\n    <p>\n      {{ message | translate }}\n    </p>\n    <div\n      class=\"popover-footer d-flex gap-16 flex-wrap a-i-center\"\n      [id]=\"footerId\"\n      (keydown.escape)=\"$event.stopPropagation(); handleOutsideClick()\"\n      (keydown.tab)=\"cycleFocus($any($event))\"\n      (keydown.shift.tab)=\"cycleFocus($any($event))\"\n    >\n      @for (button of buttons; track button) {\n        <button\n          class=\"btn btn-sm m-l-0\"\n          title=\"{{ button.label | translate }}\"\n          [attr.data-cy]=\"'popover-confirm--' + (button.label | translate)\"\n          [ngClass]=\"buttonStatus(button.status)\"\n          (click)=\"$event.stopPropagation(); click(button.action)\"\n        >\n          {{ button.label | translate }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { popover: [{
                 type: ViewChild,
                 args: [PopoverDirective, { static: false }]
@@ -17481,6 +17574,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A radio or checkbox that a list item can name and select on behalf of the row.
+ *
+ * The two find each other by injection rather than by `@ContentChild`: a control rendered from
+ * another component's template is not content of the row, so a content query cannot see it, while
+ * its element injector still resolves to the `c8y-li` that component sits in. Injection follows
+ * the template in which an element is declared, so a control inside an `ng-template` created
+ * elsewhere and inserted into the row would resolve to where that template was declared instead.
+ */
+class ListItemSelectionControl {
+}
+/**
+ * The part of a list item its projected radio or checkbox talks to. Provided by `c8y-li`.
+ */
+class ListItemSelectionHost {
+}
+
 /**
  * The footer can be used with either content projection
  * or a simple string as an input.
@@ -17503,6 +17613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Content that handles a click itself. A row that selects on click leaves such content alone, the
+ * way a native `<label>` does not forward clicks on the interactive content inside it.
+ */
+const INTERACTIVE_CONTENT = 'a[href], button, input, select, textarea, label, details, [contenteditable], [role="button"], [role="link"]';
 /**
  * A list item is a representation of an item inside a list and
  * can be used to compose different styles in a list (mainly in a
@@ -17541,6 +17656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * ```
  */
 class ListItemComponent {
+    static { this.instanceCount = 0; }
     /**
      * @ignore
      */
@@ -17583,6 +17699,13 @@ class ListItemComponent {
          * Indicates if the current list item is selectable.
          */
         this.selectable = true;
+        /**
+         * Lets a click anywhere on the item select its projected radio or checkbox, instead of only the
+         * control itself. Off by default, as an item can carry its own click handling. A row click then no
+         * longer toggles a `c8y-li-collapse` with `collapseWay="row"`; the item shows the collapse button
+         * instead. Clicks on a button, link or other control inside the row are left to that element.
+         */
+        this.selectOnClick = false;
         /**
          * An event emitter which is triggered when the user collapses the content
          * via the chevron on the right.
@@ -17600,6 +17723,21 @@ class ListItemComponent {
          * @ignore
          */
         this.showCollapse = false;
+        /**
+         * Whether the item renders its own collapse button: when `collapseWay` is `button`, and when a
+         * row click selects the control instead of toggling the collapse.
+         * @ignore
+         */
+        this.showCollapseButton = false;
+        /**
+         * Whether a click on the row does something on its own: it toggles a `collapseWay="row"` collapse
+         * or selects the control. The row then shows a pointer cursor. A click handler the author attaches
+         * to the host is not visible here; add the `interact` class for that case.
+         * @ignore
+         */
+        this.rowReactsToClick = false;
+        /** In registration order; a row click selects the first. */
+        this.selectionControls = [];
         this.pulse$ = new Subject();
         this.destroy$ = new Subject();
         this.ACTION_ITEM_HEIGHT = 40;
@@ -17612,6 +17750,26 @@ class ListItemComponent {
             .pipe(filter(apply => !!apply), tap(() => this.element.nativeElement.classList.remove('c8y-list--pulse')), delay(100), tap(() => this.element.nativeElement.classList.add('c8y-list--pulse')), takeUntil(this.destroy$))
             .subscribe();
     }
+    /**
+     * A radio or checkbox in this item carries no visible label of its own, so unless the author named
+     * it, the row content names it. Called by the control, which may sit in another component's
+     * template and therefore cannot be found with a content query.
+     * @ignore
+     */
+    registerSelectionControl(control) {
+        if (!this.selectionControls.includes(control)) {
+            this.selectionControls.push(control);
+        }
+        if (!control.ariaLabel && !control.ariaLabelledBy) {
+            control.ariaLabelledBy = this.ensureBodyId();
+        }
+    }
+    /**
+     * @ignore
+     */
+    unregisterSelectionControl(control) {
+        this.selectionControls = this.selectionControls.filter(known => known !== control);
+    }
     /**
      * @ignore
      */
@@ -17620,6 +17778,10 @@ class ListItemComponent {
         this.showFooter = this.itemFooter != null;
         this.showActions = this.itemActions.length > 0;
         this.showCollapse = this.itemCollapse != null;
+        this.showCollapseButton =
+            this.showCollapse && (this.itemCollapse.collapseWay === 'button' || this.selectOnClick);
+        this.rowReactsToClick =
+            this.selectOnClick || (this.showCollapse && this.itemCollapse.collapseWay === 'row');
     }
     /**
      * @ignore
@@ -17640,6 +17802,20 @@ class ListItemComponent {
         this.collapsed = !this.collapsed;
         this.collapsedChange.emit(this.collapsed);
     }
+    /**
+     * Handles a click on the item body. With `selectOnClick` set, the row acts as the label of its
+     * radio or checkbox, so that selecting does not require hitting the control itself. Like a native
+     * label, it leaves clicks on interactive content alone, and it leaves the collapse to its button.
+     */
+    rowClick(event) {
+        if (!this.selectOnClick) {
+            this.rowToggleCollapsed();
+            return;
+        }
+        if (!this.clickedInteractiveContent(event)) {
+            this.selectProjectedControl();
+        }
+    }
     /**
      * Toggles the collapse state in case the `collapseWay` is set to `row` and emits this state as
      * collapsedChange output as boolean.
@@ -17657,8 +17833,40 @@ class ListItemComponent {
     pulse() {
         this.pulse$.next(true);
     }
+    /**
+     * Whether the click landed on content that handles clicks itself: a button or link in the row, or
+     * the control and its label, which the browser has already toggled, so that clicking it again
+     * would undo the selection.
+     */
+    clickedInteractiveContent(event) {
+        const target = event?.target;
+        return target instanceof Element && target.closest(INTERACTIVE_CONTENT) !== null;
+    }
+    /** Clicks the first registered radio or checkbox, so that it selects and emits as it always does. */
+    selectProjectedControl() {
+        const control = this.selectionControls[0]?.input?.nativeElement;
+        if (control && !control.disabled) {
+            control.click();
+        }
+    }
+    /**
+     * Gives the item body an id the first time a control needs one. Set on the element rather than
+     * bound in the template, so that items without a control keep their markup unchanged.
+     */
+    ensureBodyId() {
+        if (!this.bodyId) {
+            this.bodyId = `c8y-li-body-${ListItemComponent.instanceCount++}`;
+            this.itemBody.nativeElement.id = this.bodyId;
+        }
+        return this.bodyId;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ListItemComponent, isStandalone: true, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], ngImport: i0, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if ((showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapse && itemCollapse.collapseWay === 'button') {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            placement=\"bottom right\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$3.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ListItemComponent, isStandalone: true, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable", selectOnClick: ["selectOnClick", "selectOnClick", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, providers: [
+            {
+                provide: ListItemSelectionHost,
+                useExisting: forwardRef(() => ListItemComponent)
+            }
+        ], queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], viewQueries: [{ propertyName: "itemBody", first: true, predicate: ["itemBody"], descendants: true, static: true }], ngImport: i0, template: "<div [ngClass]=\"{ expanded: !collapsed, interact: rowReactsToClick }\">\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      #itemBody\n      (click)=\"rowClick($event)\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if (showCollapseButton || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapseButton) {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            placement=\"bottom right\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$3.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
@@ -17674,7 +17882,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         NgTemplateOutlet,
                         CollapseModule,
                         C8yTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if ((showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapse && itemCollapse.collapseWay === 'button') {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            placement=\"bottom right\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n" }]
+                    ], providers: [
+                        {
+                            provide: ListItemSelectionHost,
+                            useExisting: forwardRef(() => ListItemComponent)
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngClass]=\"{ expanded: !collapsed, interact: rowReactsToClick }\">\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      #itemBody\n      (click)=\"rowClick($event)\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if (showCollapseButton || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapseButton) {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            placement=\"bottom right\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -17702,6 +17915,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.selectable']
+            }], selectOnClick: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], collapsedChange: [{
                 type: Output
             }], itemFooter: [{
@@ -17713,6 +17929,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }], itemCollapse: [{
                 type: ContentChild,
                 args: [ListItemCollapseComponent, { static: false }]
+            }], itemBody: [{
+                type: ViewChild,
+                args: ['itemBody', { static: true }]
             }] } });
 
 /**
@@ -18753,7 +18972,7 @@ class SearchInputComponent {
         this.isLoading = term.length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1$3.Router }, { token: i1.InventoryService }, { token: InventorySearchService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SearchInputComponent, isStandalone: true, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", customPlaceholder: "customPlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick", onOpenToggle: "onOpenToggle" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "@if (mode === 'search' || mode === 'wildcardsearch') {\n  <div\n    class=\"dropdown\"\n    #searchDropdown=\"bs-dropdown\"\n    [insideClick]=\"true\"\n    (isOpenChange)=\"onOpenChange($event)\"\n    [cdkTrapFocus]=\"searchDropdown.isOpen\"\n    dropdown\n  >\n    <button\n      class=\"main-header-button dropdown-toggle c8y-dropdown\"\n      [title]=\"'Search' | translate\"\n      type=\"button\"\n      dropdownToggle\n      data-cy=\"search-input--search-btn\"\n    >\n      <i\n        class=\"icon-2x\"\n        c8yIcon=\"search\"\n      ></i>\n    </button>\n\n    <div\n      class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n      id=\"searchDropdown\"\n      *dropdownMenu\n    >\n      <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n    </div>\n  </div>\n}\n\n@if (mode === 'select') {\n  <div class=\"search-header-inline\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n}\n<ng-template #form>\n  <form\n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' || mode === 'wildcardsearch' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [title]=\"(term ? RESET_TEXT : SEARCH_TEXT) | translate\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"false\"\n      [ngClass]=\"{ 'input-group-search input-group-lg': mode !== 'select' }\"\n    >\n      @if (enableCustomTemplatePlaceholder) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n\n      <!-- filter buttons -->\n      @if (term.length !== 0 && mode === 'search') {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"d-flex\">\n            <p class=\"m-r-4 text-muted\">\n              <em translate>Searching by exact match. Click for other search options:</em>\n            </p>\n            <div class=\"btn-group btn-group-sm\">\n              <button\n                class=\"btn btn-default\"\n                title=\"{{ 'Starts with' | translate }}\"\n                type=\"button\"\n                data-cy=\"search-input--search-starts-with\"\n                (click)=\"onFilter(term + '*')\"\n              >\n                {{ 'Starts with' | translate }}\n              </button>\n              <button\n                class=\"btn btn-default\"\n                title=\"{{ 'Contains' | translate }}\"\n                type=\"button\"\n                data-cy=\"search-input--search-contains\"\n                (click)=\"onFilter('*' + term + '*')\"\n              >\n                {{ 'Contains' | translate }}\n              </button>\n              <button\n                class=\"btn btn-default\"\n                title=\"{{ 'Ends with' | translate }}\"\n                type=\"button\"\n                data-cy=\"search-input--search-ends-with\"\n                (click)=\"onFilter('*' + term)\"\n              >\n                {{ 'Ends with' | translate }}\n              </button>\n            </div>\n          </div>\n        </c8y-li>\n      }\n\n      <!-- Recent search -->\n      @if (term.length === 0 && recentSearchResults.length > 0) {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"legend\">\n            <span\n              class=\"text-bold text-muted\"\n              translate\n            >\n              Recent search views\n            </span>\n          </div>\n        </c8y-li>\n      }\n      @for (result of term.length === 0 ? recentSearchResults : []; track result.id) {\n        <c8y-li\n          class=\"c8y-list__item--link m-l-32 m-r-32\"\n          (click)=\"open($event, result, result.name)\"\n        >\n          <c8y-li-icon>\n            @if (result | shouldShowMo: deviceType.DEVICE) {\n              <device-status [mo]=\"result\"></device-status>\n            } @else {\n              <i\n                class=\"c8y-icon-duocolor\"\n                [c8yIcon]=\"result | getGroupIcon | async\"\n              ></i>\n            }\n          </c8y-li-icon>\n          {{ result.name || '--' }}\n        </c8y-li>\n      }\n\n      <!-- Recently registered devices -->\n      @if (\n        term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n      ) {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"legend\">\n            <span\n              class=\"text-bold text-muted\"\n              translate\n            >\n              Recently registered devices\n            </span>\n          </div>\n        </c8y-li>\n      }\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *c8yFor=\"\n          let result of term.length === 0 && !groupsOnly\n            ? recentlyRegisteredResults$\n            : { data: [] };\n          loadMore: 'none'\n        \"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          @if (result | shouldShowMo: deviceType.DEVICE) {\n            <device-status [mo]=\"result\"></device-status>\n          } @else {\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          }\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      @if (term.length !== 0) {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"legend\">\n            <span\n              class=\"text-bold text-muted\"\n              translate\n            >\n              Search results\n            </span>\n          </div>\n        </c8y-li>\n      }\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        [title]=\"result.name\"\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        (click)=\"open($event, result, result.name)\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          @if (result | shouldShowMo: deviceType.DEVICE) {\n            <device-status [mo]=\"result\"></device-status>\n          } @else {\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          }\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        @if (noMatch) {\n          <c8y-ui-empty-state\n            [icon]=\"'search'\"\n            [title]=\"'No match found.' | translate\"\n            data-cy=\"search-input--empty-state\"\n            [ngClass]=\"{ 'p-4': mode === 'search' || mode === 'wildcardsearch' }\"\n            [horizontal]=\"true\"\n          >\n            @if (mode === 'search') {\n              <small translate>\n                Try to filter or open the asset grid to show all devices and groups.\n              </small>\n            }\n            @if (mode === 'select' || mode === 'wildcardsearch') {\n              <small translate>Try to rephrase your search word.</small>\n            }\n          </c8y-ui-empty-state>\n        }\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      @if (isLoading) {\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      }\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      @if (mode === 'search' || mode === 'wildcardsearch') {\n        <c8y-li\n          class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n          [selectable]=\"false\"\n        >\n          <div class=\"d-flex a-i-center\">\n            <i\n              class=\"text-info m-r-4\"\n              c8yIcon=\"info-circle\"\n            ></i>\n            <p\n              class=\"m-r-8\"\n              translate\n            >\n              Need more filter possibilities?\n            </p>\n            <button\n              class=\"m-l-16 btn btn-default btn-sm\"\n              title=\"{{ 'Go to the asset data table' | translate }}\"\n              type=\"button\"\n              (mousedown)=\"onOpenAssetTable()\"\n              data-cy=\"search-input--asset-table-btn\"\n            >\n              {{ 'Go to the asset data table' | translate }}\n            </button>\n          </div>\n        </c8y-li>\n      }\n    </c8y-typeahead>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "ariaLabel", "ariaLabelledby", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { 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: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SearchInputComponent, isStandalone: true, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", customPlaceholder: "customPlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick", onOpenToggle: "onOpenToggle" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "@if (mode === 'search' || mode === 'wildcardsearch') {\n  <div\n    class=\"dropdown\"\n    #searchDropdown=\"bs-dropdown\"\n    [insideClick]=\"true\"\n    (isOpenChange)=\"onOpenChange($event)\"\n    [cdkTrapFocus]=\"searchDropdown.isOpen\"\n    dropdown\n  >\n    <button\n      class=\"main-header-button dropdown-toggle c8y-dropdown\"\n      [title]=\"'Search' | translate\"\n      type=\"button\"\n      dropdownToggle\n      data-cy=\"search-input--search-btn\"\n    >\n      <i\n        class=\"icon-2x\"\n        c8yIcon=\"search\"\n      ></i>\n    </button>\n\n    <div\n      class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n      id=\"searchDropdown\"\n      *dropdownMenu\n    >\n      <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n    </div>\n  </div>\n}\n\n@if (mode === 'select') {\n  <div class=\"search-header-inline\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n}\n<ng-template #form>\n  <form\n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' || mode === 'wildcardsearch' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [title]=\"(term ? RESET_TEXT : SEARCH_TEXT) | translate\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"false\"\n      [ngClass]=\"{ 'input-group-search input-group-lg': mode !== 'select' }\"\n    >\n      @if (enableCustomTemplatePlaceholder) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n\n      <!-- filter buttons -->\n      @if (term.length !== 0 && mode === 'search') {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"d-flex\">\n            <p class=\"m-r-4 text-muted\">\n              <em translate>Searching by exact match. Click for other search options:</em>\n            </p>\n            <div class=\"btn-group btn-group-sm\">\n              <button\n                class=\"btn btn-default\"\n                title=\"{{ 'Starts with' | translate }}\"\n                type=\"button\"\n                data-cy=\"search-input--search-starts-with\"\n                (click)=\"onFilter(term + '*')\"\n              >\n                {{ 'Starts with' | translate }}\n              </button>\n              <button\n                class=\"btn btn-default\"\n                title=\"{{ 'Contains' | translate }}\"\n                type=\"button\"\n                data-cy=\"search-input--search-contains\"\n                (click)=\"onFilter('*' + term + '*')\"\n              >\n                {{ 'Contains' | translate }}\n              </button>\n              <button\n                class=\"btn btn-default\"\n                title=\"{{ 'Ends with' | translate }}\"\n                type=\"button\"\n                data-cy=\"search-input--search-ends-with\"\n                (click)=\"onFilter('*' + term)\"\n              >\n                {{ 'Ends with' | translate }}\n              </button>\n            </div>\n          </div>\n        </c8y-li>\n      }\n\n      <!-- Recent search -->\n      @if (term.length === 0 && recentSearchResults.length > 0) {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"legend\">\n            <span\n              class=\"text-bold text-muted\"\n              translate\n            >\n              Recent search views\n            </span>\n          </div>\n        </c8y-li>\n      }\n      @for (result of term.length === 0 ? recentSearchResults : []; track result.id) {\n        <c8y-li\n          class=\"c8y-list__item--link m-l-32 m-r-32\"\n          (click)=\"open($event, result, result.name)\"\n        >\n          <c8y-li-icon>\n            @if (result | shouldShowMo: deviceType.DEVICE) {\n              <device-status [mo]=\"result\"></device-status>\n            } @else {\n              <i\n                class=\"c8y-icon-duocolor\"\n                [c8yIcon]=\"result | getGroupIcon | async\"\n              ></i>\n            }\n          </c8y-li-icon>\n          {{ result.name || '--' }}\n        </c8y-li>\n      }\n\n      <!-- Recently registered devices -->\n      @if (\n        term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n      ) {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"legend\">\n            <span\n              class=\"text-bold text-muted\"\n              translate\n            >\n              Recently registered devices\n            </span>\n          </div>\n        </c8y-li>\n      }\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *c8yFor=\"\n          let result of term.length === 0 && !groupsOnly\n            ? recentlyRegisteredResults$\n            : { data: [] };\n          loadMore: 'none'\n        \"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          @if (result | shouldShowMo: deviceType.DEVICE) {\n            <device-status [mo]=\"result\"></device-status>\n          } @else {\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          }\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      @if (term.length !== 0) {\n        <c8y-li\n          class=\"m-l-32 m-r-32\"\n          [selectable]=\"false\"\n        >\n          <div class=\"legend\">\n            <span\n              class=\"text-bold text-muted\"\n              translate\n            >\n              Search results\n            </span>\n          </div>\n        </c8y-li>\n      }\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        [title]=\"result.name\"\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        (click)=\"open($event, result, result.name)\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          @if (result | shouldShowMo: deviceType.DEVICE) {\n            <device-status [mo]=\"result\"></device-status>\n          } @else {\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          }\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        @if (noMatch) {\n          <c8y-ui-empty-state\n            [icon]=\"'search'\"\n            [title]=\"'No match found.' | translate\"\n            data-cy=\"search-input--empty-state\"\n            [ngClass]=\"{ 'p-4': mode === 'search' || mode === 'wildcardsearch' }\"\n            [horizontal]=\"true\"\n          >\n            @if (mode === 'search') {\n              <small translate>\n                Try to filter or open the asset grid to show all devices and groups.\n              </small>\n            }\n            @if (mode === 'select' || mode === 'wildcardsearch') {\n              <small translate>Try to rephrase your search word.</small>\n            }\n          </c8y-ui-empty-state>\n        }\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      @if (isLoading) {\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      }\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      @if (mode === 'search' || mode === 'wildcardsearch') {\n        <c8y-li\n          class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n          [selectable]=\"false\"\n        >\n          <div class=\"d-flex a-i-center\">\n            <i\n              class=\"text-info m-r-4\"\n              c8yIcon=\"info-circle\"\n            ></i>\n            <p\n              class=\"m-r-8\"\n              translate\n            >\n              Need more filter possibilities?\n            </p>\n            <button\n              class=\"m-l-16 btn btn-default btn-sm\"\n              title=\"{{ 'Go to the asset data table' | translate }}\"\n              type=\"button\"\n              (mousedown)=\"onOpenAssetTable()\"\n              data-cy=\"search-input--asset-table-btn\"\n            >\n              {{ 'Go to the asset data table' | translate }}\n            </button>\n          </div>\n        </c8y-li>\n      }\n    </c8y-typeahead>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "ariaLabel", "ariaLabelledby", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { 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: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
@@ -19044,6 +19263,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }] } });
 
+/**
+ * What `c8y-li-radio` and `c8y-li-checkbox` share, applied to both as a host directive: the
+ * accessible name of the control, and the connection to the `c8y-li` it renders in, which names an
+ * unnamed control after the row content and selects the control on a row click.
+ */
+class ListItemSelectionControlDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.listItem = inject(ListItemSelectionHost, { optional: true });
+    }
+    /**
+     * The native input the control renders, so that its list item can select it on the user's behalf.
+     */
+    get input() {
+        return new ElementRef(this.host.nativeElement.querySelector('input'));
+    }
+    ngOnInit() {
+        this.listItem?.registerSelectionControl(this);
+    }
+    ngOnDestroy() {
+        this.listItem?.unregisterSelectionControl(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ListItemSelectionControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: ListItemSelectionControlDirective, isStandalone: true, inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"] }, host: { properties: { "attr.aria-label": "null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ListItemSelectionControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    host: {
+                        // the name belongs on the input; on the host element it is a prohibited attribute, whether the
+                        // author sets it statically or binds it
+                        '[attr.aria-label]': 'null'
+                    }
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledBy: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }] } });
+
 /**
  * A component to display checkboxes in a c8y-li. Use it with content projection. It
  * can be used standalone or with an ngModel.
@@ -19057,8 +19319,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 class ListItemCheckboxComponent extends CheckboxControlValueAccessor {
     constructor(renderer, elementRef) {
         super(renderer, elementRef);
-        this.renderer = renderer;
-        this.elementRef = elementRef;
         /**
          * Indicates if the checkbox is selected.
          */
@@ -19075,6 +19335,11 @@ class ListItemCheckboxComponent extends CheckboxControlValueAccessor {
          * Allows to display the chceckbox as a switch
          */
         this.displayAsSwitch = false;
+        /**
+         * Names the checkbox and connects it to its list item.
+         * @ignore
+         */
+        this.naming = inject(ListItemSelectionControlDirective);
     }
     /**
      * @ignore
@@ -19108,7 +19373,7 @@ class ListItemCheckboxComponent extends CheckboxControlValueAccessor {
                 multi: true,
                 useExisting: forwardRef(() => ListItemCheckboxComponent)
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label [ngClass]=\"displayAsSwitch ? 'c8y-switch c8y-switch--inline' : 'c8y-checkbox'\">\n  <input\n    type=\"checkbox\"\n    class=\"form-control\"\n    [disabled]=\"disabled\"\n    [checked]=\"selected\"\n    (change)=\"select($event.target.checked); (false)\"\n    [indeterminate]=\"indeterminate\"\n  />\n  <span></span>\n  <span class=\"sr-only\">event</span>\n</label>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ListItemSelectionControlDirective, inputs: ["aria-label", "aria-label", "aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "<label [ngClass]=\"displayAsSwitch ? 'c8y-switch c8y-switch--inline' : 'c8y-checkbox'\">\n  <input\n    class=\"form-control\"\n    [attr.aria-label]=\"naming.ariaLabel\"\n    [attr.aria-labelledby]=\"naming.ariaLabel ? null : naming.ariaLabelledBy\"\n    type=\"checkbox\"\n    #checkbox\n    [disabled]=\"disabled\"\n    [checked]=\"selected\"\n    (change)=\"select($event.target.checked); (false)\"\n    [indeterminate]=\"indeterminate\"\n  />\n  <span></span>\n</label>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ListItemCheckboxComponent, decorators: [{
             type: Component,
@@ -19120,8 +19385,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => ListItemCheckboxComponent)
                         }
-                    ], standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.Eager, template: "<label [ngClass]=\"displayAsSwitch ? 'c8y-switch c8y-switch--inline' : 'c8y-checkbox'\">\n  <input\n    type=\"checkbox\"\n    class=\"form-control\"\n    [disabled]=\"disabled\"\n    [checked]=\"selected\"\n    (change)=\"select($event.target.checked); (false)\"\n    [indeterminate]=\"indeterminate\"\n  />\n  <span></span>\n  <span class=\"sr-only\">event</span>\n</label>\n<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { selected: [{
+                    ], hostDirectives: [
+                        { directive: ListItemSelectionControlDirective, inputs: ['aria-label', 'aria-labelledby'] }
+                    ], standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.Eager, template: "<label [ngClass]=\"displayAsSwitch ? 'c8y-switch c8y-switch--inline' : 'c8y-checkbox'\">\n  <input\n    class=\"form-control\"\n    [attr.aria-label]=\"naming.ariaLabel\"\n    [attr.aria-labelledby]=\"naming.ariaLabel ? null : naming.ariaLabelledBy\"\n    type=\"checkbox\"\n    #checkbox\n    [disabled]=\"disabled\"\n    [checked]=\"selected\"\n    (change)=\"select($event.target.checked); (false)\"\n    [indeterminate]=\"indeterminate\"\n  />\n  <span></span>\n</label>\n<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { checkbox: [{
+                type: ViewChild,
+                args: ['checkbox', { static: true }]
+            }], selected: [{
                 type: Input
             }], indeterminate: [{
                 type: Input
@@ -19163,10 +19433,6 @@ class ListItemRadioComponent {
          * Indicates if the radio is selected.
          */
         this.selected = false;
-        /**
-         * The name of the radio (use different names for different radio groups).
-         */
-        this.name = 'list_item_radio';
         /**
          * Indicates if the radio is disabled.
          */
@@ -19175,6 +19441,22 @@ class ListItemRadioComponent {
          * An event emitted as soon as the radio is selected.
          */
         this.onSelect = new EventEmitter();
+        this._name = 'list_item_radio';
+        /**
+         * Names the radio and connects it to its list item.
+         * @ignore
+         */
+        this.naming = inject(ListItemSelectionControlDirective);
+    }
+    /**
+     * The name of the radio (use different names for different radio groups). Radios sharing a name
+     * form one group: the group is a single tab stop and the arrow keys move between its options.
+     */
+    set name(name) {
+        this._name = name || 'list_item_radio';
+    }
+    get name() {
+        return this._name;
     }
     /**
      * Resets the native radio element.
@@ -19229,7 +19511,7 @@ class ListItemRadioComponent {
                 multi: true,
                 useExisting: forwardRef(() => ListItemRadioComponent)
             }
-        ], viewQueries: [{ propertyName: "radio", first: true, predicate: ["radio"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"c8y-radio\">\n  <input\n    #radio\n    id=\"event\"\n    type=\"radio\"\n    [name]=\"name\"\n    [checked]=\"selected\"\n    (change)=\"change($event.target.checked); (false)\"\n    [disabled]=\"disabled\"\n  />\n  <span></span>\n  <span for=\"event\" class=\"sr-only\" translate>event</span>\n</label>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], viewQueries: [{ propertyName: "radio", first: true, predicate: ["radio"], descendants: true, static: true }], usesOnChanges: true, hostDirectives: [{ directive: ListItemSelectionControlDirective, inputs: ["aria-label", "aria-label", "aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "<label class=\"c8y-radio\">\n  <input\n    [attr.aria-label]=\"naming.ariaLabel\"\n    [attr.aria-labelledby]=\"naming.ariaLabel ? null : naming.ariaLabelledBy\"\n    type=\"radio\"\n    #radio\n    [name]=\"name\"\n    [checked]=\"selected\"\n    (change)=\"change($event.target.checked); (false)\"\n    [disabled]=\"disabled\"\n  />\n  <span></span>\n</label>\n<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ListItemRadioComponent, decorators: [{
             type: Component,
@@ -19241,7 +19523,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => ListItemRadioComponent)
                         }
-                    ], standalone: true, imports: [C8yTranslateDirective], changeDetection: ChangeDetectionStrategy.Eager, template: "<label class=\"c8y-radio\">\n  <input\n    #radio\n    id=\"event\"\n    type=\"radio\"\n    [name]=\"name\"\n    [checked]=\"selected\"\n    (change)=\"change($event.target.checked); (false)\"\n    [disabled]=\"disabled\"\n  />\n  <span></span>\n  <span for=\"event\" class=\"sr-only\" translate>event</span>\n</label>\n<ng-content></ng-content>\n" }]
+                    ], hostDirectives: [
+                        { directive: ListItemSelectionControlDirective, inputs: ['aria-label', 'aria-labelledby'] }
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.Eager, template: "<label class=\"c8y-radio\">\n  <input\n    [attr.aria-label]=\"naming.ariaLabel\"\n    [attr.aria-labelledby]=\"naming.ariaLabel ? null : naming.ariaLabelledBy\"\n    type=\"radio\"\n    #radio\n    [name]=\"name\"\n    [checked]=\"selected\"\n    (change)=\"change($event.target.checked); (false)\"\n    [disabled]=\"disabled\"\n  />\n  <span></span>\n</label>\n<ng-content></ng-content>\n" }]
         }], propDecorators: { radio: [{
                 type: ViewChild,
                 args: ['radio', { static: true }]
@@ -21408,7 +21692,7 @@ class SelectComponent {
                 multi: true
             },
             SelectKeyboardService
-        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@let inputLabel = ariaLabelledby ? null : ariaLabel ? ariaLabel : displayPlaceholder;\n\n<!-- role=\"group\" legalizes the aria dropdownToggle sets here; the button below carries the state. -->\n<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  role=\"group\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div class=\"input-group input-group-dropdown\">\n    <div\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      @if (projectedSelectedItems) {\n        <div class=\"selected-items\">\n          @for (selectedItem of selected; track selectedItem) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                projectedSelectedItems.templateRef;\n                context: { $implicit: selectedItem }\n              \"\n            ></ng-container>\n          }\n        </div>\n        @if (selected.length === 0 && !dropdown.isOpen && searchControl.value.length === 0) {\n          <i class=\"text-muted\">\n            {{ displayPlaceholder }}\n          </i>\n        }\n      } @else {\n        <div class=\"selected-items\">\n          @if (!multi) {\n            <!-- hidden is needed, otherwise the propagation does not work correctly -->\n            <!-- keyed on the open state, not on focus: the input keeps focus after the menu closes -->\n            <span [hidden]=\"!dropdown.isOpen || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span\n              data-cy=\"select--selected-label\"\n              [hidden]=\"dropdown.isOpen || selected.length !== 1\"\n            >\n              {{ selected[0]?.label | translate }}\n            </span>\n          }\n          @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n            <i class=\"text-muted\">\n              {{ displayPlaceholder }}\n            </i>\n          }\n          @if (multi) {\n            <span class=\"m-r-4\">{{ searchControl.value }}</span>\n            @for (selectedItem of selected; track selectedItem) {\n              <span class=\"tag tag--info chip\">\n                <button\n                  class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                  title=\"{{ selectedItem.label | translate }}\"\n                  type=\"button\"\n                  [disabled]=\"disabled\"\n                  (click)=\"\n                    $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n                  \"\n                >\n                  <i c8yIcon=\"times\"></i>\n                </button>\n                {{ selectedItem.label | translate }}\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      [attr.aria-label]=\"inputLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      @if (canDeselect && selected.length > 0) {\n        <button\n          class=\"btn btn-dot\"\n          title=\"{{ 'Deselect' | translate }}\"\n          type=\"button\"\n          [disabled]=\"disabled\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n          data-cy=\"deselect-all-button\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      }\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        [attr.aria-expanded]=\"dropdown.isOpen\"\n        [attr.aria-controls]=\"popupId\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal dropdown-menu--select\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    [id]=\"popupId\"\n    data-cy=\"select--dropdown-menu\"\n    (click)=\"onMenuClick()\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n      <c8y-li\n        style=\"cursor: pointer\"\n        [selectable]=\"true\"\n        [dense]=\"true\"\n        [active]=\"!multi && item.value === selected[0]?.value\"\n        (click)=\"select(item)\"\n      >\n        <span [attr.data-search-label]=\"item.label | translate\"></span>\n        @if (multi) {\n          <c8y-li-checkbox\n            [selected]=\"selected.indexOf(item) > -1\"\n            (click)=\"$event.preventDefault()\"\n          ></c8y-li-checkbox>\n        }\n        @if (!item.template) {\n          <c8y-li-body>\n            {{ item.label | translate }}\n          </c8y-li-body>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"item?.template\"\n          ngProjectAs=\"c8y-li-body\"\n        ></ng-container>\n      </c8y-li>\n    }\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@let inputLabel = ariaLabelledby ? null : ariaLabel ? ariaLabel : displayPlaceholder;\n\n<!-- role=\"group\" legalizes the aria dropdownToggle sets here; the button below carries the state. -->\n<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  role=\"group\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div class=\"input-group input-group-dropdown\">\n    <div\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      @if (projectedSelectedItems) {\n        <div class=\"selected-items\">\n          @for (selectedItem of selected; track selectedItem) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                projectedSelectedItems.templateRef;\n                context: { $implicit: selectedItem }\n              \"\n            ></ng-container>\n          }\n        </div>\n        @if (selected.length === 0 && !dropdown.isOpen && searchControl.value.length === 0) {\n          <i class=\"text-muted\">\n            {{ displayPlaceholder }}\n          </i>\n        }\n      } @else {\n        <div class=\"selected-items\">\n          @if (!multi) {\n            <!-- hidden is needed, otherwise the propagation does not work correctly -->\n            <!-- keyed on the open state, not on focus: the input keeps focus after the menu closes -->\n            <span [hidden]=\"!dropdown.isOpen || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span\n              data-cy=\"select--selected-label\"\n              [hidden]=\"dropdown.isOpen || selected.length !== 1\"\n            >\n              {{ selected[0]?.label | translate }}\n            </span>\n          }\n          @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n            <i class=\"text-muted\">\n              {{ displayPlaceholder }}\n            </i>\n          }\n          @if (multi) {\n            <span class=\"m-r-4\">{{ searchControl.value }}</span>\n            @for (selectedItem of selected; track selectedItem) {\n              <span class=\"tag tag--info chip\">\n                <button\n                  class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                  title=\"{{ selectedItem.label | translate }}\"\n                  type=\"button\"\n                  [disabled]=\"disabled\"\n                  (click)=\"\n                    $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n                  \"\n                >\n                  <i c8yIcon=\"times\"></i>\n                </button>\n                {{ selectedItem.label | translate }}\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      [attr.aria-label]=\"inputLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      @if (canDeselect && selected.length > 0) {\n        <button\n          class=\"btn btn-dot\"\n          title=\"{{ 'Deselect' | translate }}\"\n          type=\"button\"\n          [disabled]=\"disabled\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n          data-cy=\"deselect-all-button\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      }\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        [attr.aria-expanded]=\"dropdown.isOpen\"\n        [attr.aria-controls]=\"popupId\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal dropdown-menu--select\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    [id]=\"popupId\"\n    data-cy=\"select--dropdown-menu\"\n    (click)=\"onMenuClick()\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n      <c8y-li\n        style=\"cursor: pointer\"\n        [selectable]=\"true\"\n        [dense]=\"true\"\n        [active]=\"!multi && item.value === selected[0]?.value\"\n        (click)=\"select(item)\"\n      >\n        <span [attr.data-search-label]=\"item.label | translate\"></span>\n        @if (multi) {\n          <c8y-li-checkbox\n            [selected]=\"selected.indexOf(item) > -1\"\n            (click)=\"$event.preventDefault()\"\n          ></c8y-li-checkbox>\n        }\n        @if (!item.template) {\n          <c8y-li-body>\n            {{ item.label | translate }}\n          </c8y-li-body>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"item?.template\"\n          ngProjectAs=\"c8y-li-body\"\n        ></ng-container>\n      </c8y-li>\n    }\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -29238,7 +29522,7 @@ class TypeaheadTypeComponent extends FieldType {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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: "21.2.19", 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", "ariaLabel", "ariaLabelledby", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$5.ɵ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", "progressLabel", "message"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", 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", "ariaLabel", "ariaLabelledby", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$5.ɵ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", "selectOnClick"], 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", "progressLabel", "message"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TypeaheadTypeComponent, decorators: [{
             type: Component,
@@ -37791,7 +38075,7 @@ class SelectModalComponent {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => SelectModalComponent)
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"icon\"></i>\n    <h1\n      class=\"h3\"\n      id=\"modal-title\"\n    >\n      {{ title | translate }}\n    </h1>\n  </div>\n  <div class=\"p-16 text-center separator-bottom min-height-fit\">\n    <p class=\"m-b-8\">{{ subTitle | translate }}</p>\n    <div class=\"row\">\n      <div\n        *ngIf=\"showFilter\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <c8y-filter\n          [icon]=\"'search'\"\n          (onSearch)=\"updatePipe($event)\"\n        ></c8y-filter>\n      </div>\n      <div\n        *ngIf=\"additionalFilterTemplate\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"additionalFilterTemplate\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-16 p-r-16\">\n      <div\n        class=\"panel m-t-8 m-b-8\"\n        *ngIf=\"!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)\"\n      >\n        <div class=\"c8y-empty-state text-left\">\n          <h1\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"{{ icon }} \"\n          ></h1>\n          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>\n        </div>\n      </div>\n    </div>\n    <c8y-list-group>\n      <ng-container *ngFor=\"let item of listItems | selectModalFilterPipe : filterTerm\">\n        <c8y-li *ngIf=\"item.options?.length > 0 || !hideEmptyItems\">\n          <c8y-li-icon>\n            <i c8yIcon=\"{{ icon }}\"></i>\n          </c8y-li-icon>\n\n          <c8y-li-body class=\"content-flex-30\">\n            <div class=\"col-9\">\n              <div\n                *ngFor=\"let bodyPart of item.body\"\n                [ngClass]=\"bodyPart.class\"\n              >\n                <c8y-highlight\n                  [title]=\"bodyPart.value\"\n                  [pattern]=\"filterTerm\"\n                  [text]=\"bodyPart.value\"\n                ></c8y-highlight>\n              </div>\n            </div>\n\n            <div\n              class=\"col-3 text-right\"\n              *ngIf=\"item.additionalInformation\"\n            >\n              <div [ngClass]=\"item.additionalInformation.class\">\n                {{ item.additionalInformation.value }}\n              </div>\n            </div>\n          </c8y-li-body>\n\n          <c8y-li-collapse *ngIf=\"item.options?.length > 0\">\n            <c8y-list-group>\n              <c8y-li *ngFor=\"let option of item.options\">\n                <c8y-li-radio\n                  [name]=\"mode === 'single' ? 'single' : item.groupId\"\n                  (onSelect)=\"updateChoice({ item: item, id: option.obj.id })\"\n                  [disabled]=\"option.disabled\"\n                  [selected]=\"option.selected\"\n                ></c8y-li-radio>\n                <c8y-li-body class=\"content-flex-20\">\n                  <div\n                    *ngFor=\"let optionPart of option.body; let i = index\"\n                    [ngClass]=\"optionPart.class\"\n                  >\n                    <c8y-highlight\n                      [pattern]=\"filterTerm\"\n                      [text]=\"optionPart.value\"\n                    ></c8y-highlight>\n                  </div>\n                  <ng-container\n                    *ngIf=\"option.template\"\n                    [ngTemplateOutlet]=\"option.template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, option: option }\"\n                  ></ng-container>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          </c8y-li-collapse>\n        </c8y-li>\n      </ng-container>\n      <div *ngIf=\"areMoreEntries\">\n        <div\n          class=\"alert alert-info m-t-16 m-r-8 m-l-8\"\n          translate\n        >\n          Some entries might not be shown. Try narrowing search criteria.\n        </div>\n      </div>\n    </c8y-list-group>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Cancel-button\"\n      *ngIf=\"labels.cancel\"\n      (click)=\"dismiss()\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.cancel }\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Save-button\"\n      (click)=\"select()\"\n      [disabled]=\"!selected\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.ok }\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { 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: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: SelectModalFilterPipe, name: "selectModalFilterPipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"icon\"></i>\n    <h1\n      class=\"h3\"\n      id=\"modal-title\"\n    >\n      {{ title | translate }}\n    </h1>\n  </div>\n  <div class=\"p-16 text-center separator-bottom min-height-fit\">\n    <p class=\"m-b-8\">{{ subTitle | translate }}</p>\n    <div class=\"row\">\n      <div\n        *ngIf=\"showFilter\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <c8y-filter\n          [icon]=\"'search'\"\n          (onSearch)=\"updatePipe($event)\"\n        ></c8y-filter>\n      </div>\n      <div\n        *ngIf=\"additionalFilterTemplate\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"additionalFilterTemplate\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-16 p-r-16\">\n      <div\n        class=\"panel m-t-8 m-b-8\"\n        *ngIf=\"!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)\"\n      >\n        <div class=\"c8y-empty-state text-left\">\n          <h1\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"{{ icon }} \"\n          ></h1>\n          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>\n        </div>\n      </div>\n    </div>\n    <c8y-list-group>\n      <ng-container *ngFor=\"let item of listItems | selectModalFilterPipe : filterTerm\">\n        <c8y-li *ngIf=\"item.options?.length > 0 || !hideEmptyItems\">\n          <c8y-li-icon>\n            <i c8yIcon=\"{{ icon }}\"></i>\n          </c8y-li-icon>\n\n          <c8y-li-body class=\"content-flex-30\">\n            <div class=\"col-9\">\n              <div\n                *ngFor=\"let bodyPart of item.body\"\n                [ngClass]=\"bodyPart.class\"\n              >\n                <c8y-highlight\n                  [title]=\"bodyPart.value\"\n                  [pattern]=\"filterTerm\"\n                  [text]=\"bodyPart.value\"\n                ></c8y-highlight>\n              </div>\n            </div>\n\n            <div\n              class=\"col-3 text-right\"\n              *ngIf=\"item.additionalInformation\"\n            >\n              <div [ngClass]=\"item.additionalInformation.class\">\n                {{ item.additionalInformation.value }}\n              </div>\n            </div>\n          </c8y-li-body>\n\n          <c8y-li-collapse *ngIf=\"item.options?.length > 0\">\n            <c8y-list-group>\n              <c8y-li *ngFor=\"let option of item.options\">\n                <c8y-li-radio\n                  [name]=\"mode === 'single' ? 'single' : item.groupId\"\n                  (onSelect)=\"updateChoice({ item: item, id: option.obj.id })\"\n                  [disabled]=\"option.disabled\"\n                  [selected]=\"option.selected\"\n                ></c8y-li-radio>\n                <c8y-li-body class=\"content-flex-20\">\n                  <div\n                    *ngFor=\"let optionPart of option.body; let i = index\"\n                    [ngClass]=\"optionPart.class\"\n                  >\n                    <c8y-highlight\n                      [pattern]=\"filterTerm\"\n                      [text]=\"optionPart.value\"\n                    ></c8y-highlight>\n                  </div>\n                  <ng-container\n                    *ngIf=\"option.template\"\n                    [ngTemplateOutlet]=\"option.template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, option: option }\"\n                  ></ng-container>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          </c8y-li-collapse>\n        </c8y-li>\n      </ng-container>\n      <div *ngIf=\"areMoreEntries\">\n        <div\n          class=\"alert alert-info m-t-16 m-r-8 m-l-8\"\n          translate\n        >\n          Some entries might not be shown. Try narrowing search criteria.\n        </div>\n      </div>\n    </c8y-list-group>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Cancel-button\"\n      *ngIf=\"labels.cancel\"\n      (click)=\"dismiss()\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.cancel }\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Save-button\"\n      (click)=\"select()\"\n      [disabled]=\"!selected\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.ok }\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { 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", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: SelectModalFilterPipe, name: "selectModalFilterPipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectModalComponent, decorators: [{
             type: Component,
@@ -39849,7 +40133,7 @@ class ProviderConfigurationComponent {
         return mapValues(configuration, value => (value === '<<Encrypted>>' ? undefined : value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ProviderConfigurationComponent, deps: [{ token: Permissions }, { token: i1$3.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: "21.2.19", 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$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),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", "ariaLabel", "ariaLabelledby", "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", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$5.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", 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$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),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", "ariaLabel", "ariaLabelledby", "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", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$5.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ProviderConfigurationComponent, decorators: [{
             type: Component,
@@ -41924,5 +42208,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AUTO_AGGREGATION_ICON, AUTO_POINTS_TOOLTIP, AUTO_POINTS_TOOLTIP_KEPT, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, ApplyRangeClassPipe, AssetDefinitionsService, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BASELINE_COLUMNS, BASELINE_ROWS, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointDescriptionPipe, DatapointLabelPipe, DatapointLibraryValidationErrors, DatapointSyncService, DatapointUnitPipe, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DropdownFocusTrapDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_SKIP_APP_KEY_HEADER, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IconPanelComponent, IfAllowedDirective, InjectionType, InputGroupEditableComponent, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntersectionObserverService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoadingMessageComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PasswordValidationDirective, PasswordValidationService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RELOAD_QUERY_PARAM, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, SplitViewAlertsComponent, SplitViewComponent, SplitViewDetailsActionsComponent, SplitViewDetailsComponent, SplitViewExtraHeaderComponent, SplitViewFooterComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, SplitViewListItemDirective, SplitViewSelectionService, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, StripHtmlPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollListenerDirective, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetActionWrapperComponent, WidgetContextBindingService, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, buildDatapointLabel, buildDatapointTranslationKey, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isBinaryFile, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideSkipAppKeyHeader, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, runGuardsOnParamsOrReloadChange, scaleWidgetDimensions, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateDatapointDescription, translateDatapointLabel, translateDatapointText, translateDatapointUnit, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
+export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AUTO_AGGREGATION_ICON, AUTO_POINTS_TOOLTIP, AUTO_POINTS_TOOLTIP_KEPT, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, ApplyRangeClassPipe, AssetDefinitionsService, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BASELINE_COLUMNS, BASELINE_ROWS, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointDescriptionPipe, DatapointLabelPipe, DatapointLibraryValidationErrors, DatapointSyncService, DatapointUnitPipe, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DropdownFocusTrapDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_SKIP_APP_KEY_HEADER, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IconPanelComponent, IfAllowedDirective, InjectionType, InputGroupEditableComponent, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntersectionObserverService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemSelectionControl, ListItemSelectionControlDirective, ListItemSelectionHost, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoadingMessageComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PasswordValidationDirective, PasswordValidationService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RELOAD_QUERY_PARAM, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, SplitViewAlertsComponent, SplitViewComponent, SplitViewDetailsActionsComponent, SplitViewDetailsComponent, SplitViewExtraHeaderComponent, SplitViewFooterComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, SplitViewListItemDirective, SplitViewSelectionService, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, StripHtmlPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollListenerDirective, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetActionWrapperComponent, WidgetContextBindingService, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, buildDatapointLabel, buildDatapointTranslationKey, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isBinaryFile, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideSkipAppKeyHeader, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, runGuardsOnParamsOrReloadChange, scaleWidgetDimensions, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateDatapointDescription, translateDatapointLabel, translateDatapointText, translateDatapointUnit, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
 //# sourceMappingURL=c8y-ngx-components.mjs.map