@c8y/ngx-components 1024.20.1 → 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 }]
             }] } });
 
 /**
@@ -17903,7 +18122,7 @@ class SelectKeyboardService {
             return this.handleArrowKeySelection(event, input, items, dropdown);
         }
         if (event.code === this.KEYCODE_ESC) {
-            return this.handleCancel(event, dropdown, input);
+            return this.handleCancel(event, dropdown);
         }
         if (this.options.keyboardSearch) {
             return this.handleInputBoxSearch(items, input);
@@ -17943,13 +18162,18 @@ class SelectKeyboardService {
         if (this.options.emptyInput) {
             input.value = '';
         }
+        // Enter and Tab pick the highlighted item and close the menu. Focus stays on
+        // the input, like a native select: Enter keeps it there, Tab moves it on to
+        // the next control because its default is not prevented.
         if (keyCode === this.KEYCODE_ENTER || keyCode === this.KEYCODE_TAB) {
-            if (index > -1) {
-                event.preventDefault();
+            // Only an open menu offers a choice; a stale highlight must not be picked from a closed one.
+            if (index > -1 && dropdown.isOpen) {
+                if (keyCode === this.KEYCODE_ENTER) {
+                    event.preventDefault();
+                }
                 items[index].element.nativeElement.click();
             }
             dropdown.hide();
-            input.blur();
             return index;
         }
         if (keyCode === this.KEYCODE_SPACE) {
@@ -17963,18 +18187,30 @@ class SelectKeyboardService {
             return index;
         }
         const upOrDown = keyCode === this.KEYCODE_DOWN ? 1 : -1;
+        // The arrow keys are the expected way to open a closed dropdown from its input.
+        if (!dropdown.isOpen) {
+            event.preventDefault();
+            dropdown.show();
+        }
         if (index > -1) {
             items[index].highlighted = false;
         }
         return this.selectNextItemOnKeyboardMove(items, index, upOrDown);
     }
-    handleCancel(event, dropdown, input) {
+    /**
+     * Escape closes the menu and keeps focus on the input. Propagation stops so
+     * a modal hosting the dropdown does not close with it.
+     */
+    handleCancel(event, dropdown) {
         event.stopPropagation();
         dropdown.hide();
-        input.blur();
         return -1;
     }
     selectNextItemOnKeyboardMove(items, index, upOrDown) {
+        // Opening with an arrow key happens before the menu items exist; nothing to highlight yet.
+        if (items.length === 0) {
+            return -1;
+        }
         if (items[index + upOrDown]) {
             if (!items[index + upOrDown].selectable) {
                 return this.selectNextItemOnKeyboardMove(items, index + upOrDown, upOrDown);
@@ -18003,6 +18239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }] });
 
+let nextUniqueId$1 = 0;
 class TypeaheadComponent {
     constructor(selectKeyboardService) {
         this.selectKeyboardService = selectKeyboardService;
@@ -18022,6 +18259,17 @@ class TypeaheadComponent {
         this.highlightFirstItem = true;
         this.onSearch = new EventEmitter();
         this.onIconClick = new EventEmitter();
+        /**
+         * Id of the dropdown popup. The toggle button references it via `aria-controls`.
+         * @ignore
+         */
+        this.popupId = `c8y-typeahead-popup-${nextUniqueId$1++}`;
+        /**
+         * Set by a click inside the menu. Clicking a list item drops focus to the
+         * body (or to a hosting modal) because the item is not focusable and the menu
+         * is removed on close, so `onHidden` brings focus back to the input.
+         */
+        this.restoreFocusOnHide = false;
         this.destroyed$ = new Subject();
     }
     writeValue(value) {
@@ -18053,8 +18301,41 @@ class TypeaheadComponent {
         return get(this.selected, this.displayProperty, '');
     }
     onShown() {
+        this.restoreFocusOnHide = false;
+        this.focus();
+    }
+    onHidden() {
+        if (this.restoreFocusOnHide) {
+            this.restoreFocusOnHide = false;
+            this.focus();
+        }
+    }
+    /**
+     * Remembers that the menu was clicked, so focus can be restored once the
+     * click has closed the dropdown.
+     * @ignore
+     */
+    onMenuClick() {
+        this.restoreFocusOnHide = true;
+    }
+    /**
+     * Moves focus to the search input. Focusing does not open the dropdown; use `open()` for that.
+     */
+    focus() {
         this.searchControl.nativeElement.focus();
     }
+    /**
+     * Opens the dropdown.
+     */
+    open() {
+        this.dropdown.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    close() {
+        this.dropdown.hide();
+    }
     /**
      * Resets the input field - clear value and clean field to be pristine and untouched.
      */
@@ -18107,7 +18388,7 @@ class TypeaheadComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TypeaheadComponent, deps: [{ token: SelectKeyboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TypeaheadComponent, isStandalone: true, selector: "c8y-typeahead", inputs: { required: "required", maxlength: "maxlength", disabled: "disabled", allowFreeEntries: "allowFreeEntries", placeholder: "placeholder", displayProperty: "displayProperty", icon: "icon", name: "name", autoClose: "autoClose", hideNew: "hideNew", container: "container", selected: "selected", title: "title", highlightFirstItem: "highlightFirstItem" }, outputs: { onSearch: "onSearch", onIconClick: "onIconClick" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TypeaheadComponent, isStandalone: true, selector: "c8y-typeahead", inputs: { required: "required", maxlength: "maxlength", disabled: "disabled", allowFreeEntries: "allowFreeEntries", placeholder: "placeholder", displayProperty: "displayProperty", icon: "icon", name: "name", autoClose: "autoClose", hideNew: "hideNew", container: "container", selected: "selected", title: "title", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", highlightFirstItem: "highlightFirstItem" }, outputs: { onSearch: "onSearch", onIconClick: "onIconClick" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -18119,7 +18400,7 @@ class TypeaheadComponent {
                 multi: true
             },
             SelectKeyboardService
-        ], queries: [{ propertyName: "list", predicate: ListItemComponent }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "searchControlModel", first: true, predicate: ["searchControlModel"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    @if (\n      !hideNew &&\n      selected &&\n      selected.id === null &&\n      getDisplayProperty()?.length > 0 &&\n      allowFreeEntries\n    ) {\n      <span\n        class=\"label label-info p-absolute\"\n        style=\"top: 10px; right: 40px; z-index: 10\"\n      >\n        {{ 'New' | translate }}\n      </span>\n    }\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"typeahead--dropdown-menu\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: "directive", type: i1$7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], queries: [{ propertyName: "list", predicate: ListItemComponent }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "searchControlModel", first: true, predicate: ["searchControlModel"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "@let placeholderText = placeholder ? (placeholder | translate) : null;\n@let fallbackLabel = placeholderText ? placeholderText : (title | translate);\n@let inputLabel = ariaLabelledby ? null : ariaLabel ? ariaLabel : fallbackLabel;\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  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div class=\"input-group input-group-dropdown\">\n    <input\n      class=\"form-control text-truncate\"\n      [attr.aria-label]=\"inputLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [attr.placeholder]=\"placeholderText\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    @if (\n      !hideNew &&\n      selected &&\n      selected.id === null &&\n      getDisplayProperty()?.length > 0 &&\n      allowFreeEntries\n    ) {\n      <span\n        class=\"label label-info p-absolute\"\n        style=\"top: 10px; right: 40px; z-index: 10\"\n      >\n        {{ 'New' | translate }}\n      </span>\n    }\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\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=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    [id]=\"popupId\"\n    data-cy=\"typeahead--dropdown-menu\"\n    (click)=\"onMenuClick()\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: "directive", type: i1$7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TypeaheadComponent, decorators: [{
             type: Component,
@@ -18143,7 +18424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         IconDirective,
                         ListGroupComponent,
                         C8yTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    @if (\n      !hideNew &&\n      selected &&\n      selected.id === null &&\n      getDisplayProperty()?.length > 0 &&\n      allowFreeEntries\n    ) {\n      <span\n        class=\"label label-info p-absolute\"\n        style=\"top: 10px; right: 40px; z-index: 10\"\n      >\n        {{ 'New' | translate }}\n      </span>\n    }\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"typeahead--dropdown-menu\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "@let placeholderText = placeholder ? (placeholder | translate) : null;\n@let fallbackLabel = placeholderText ? placeholderText : (title | translate);\n@let inputLabel = ariaLabelledby ? null : ariaLabel ? ariaLabel : fallbackLabel;\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  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div class=\"input-group input-group-dropdown\">\n    <input\n      class=\"form-control text-truncate\"\n      [attr.aria-label]=\"inputLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [attr.placeholder]=\"placeholderText\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    @if (\n      !hideNew &&\n      selected &&\n      selected.id === null &&\n      getDisplayProperty()?.length > 0 &&\n      allowFreeEntries\n    ) {\n      <span\n        class=\"label label-info p-absolute\"\n        style=\"top: 10px; right: 40px; z-index: 10\"\n      >\n        {{ 'New' | translate }}\n      </span>\n    }\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\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=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    [id]=\"popupId\"\n    data-cy=\"typeahead--dropdown-menu\"\n    (click)=\"onMenuClick()\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
         }], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { searchControl: [{
                 type: ViewChild,
                 args: ['searchControl', { static: false }]
@@ -18182,6 +18463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledby: [{
+                type: Input
             }], highlightFirstItem: [{
                 type: Input
             }], onSearch: [{
@@ -18687,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", "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,
@@ -18978,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.
@@ -18991,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.
          */
@@ -19009,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
@@ -19042,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,
@@ -19054,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
@@ -19097,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.
          */
@@ -19109,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.
@@ -19163,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,
@@ -19175,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 }]
@@ -20913,6 +21263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }]
         }] });
 
+let nextUniqueId = 0;
 class SelectComponent {
     /**
      * Items to be displayed in the select.
@@ -21049,6 +21400,11 @@ class SelectComponent {
          * Indicates if the search input has focus.
          */
         this.searchHasFocus = false;
+        /**
+         * Id of the dropdown popup. The toggle button references it via `aria-controls`.
+         * @ignore
+         */
+        this.popupId = `c8y-select-popup-${nextUniqueId++}`;
         /**
          * The internal select element.
          * @ignore
@@ -21060,6 +21416,17 @@ class SelectComponent {
          */
         this._items = [];
         this.destroy$ = new Subject();
+        /**
+         * Set while focus is moved back to the input programmatically, so that the
+         * focus handler does not reopen the dropdown that just closed.
+         */
+        this.suppressOpenOnFocus = false;
+        /**
+         * Set by a click inside the menu. Clicking a list item drops focus to the
+         * body (or to a hosting modal) because the item is not focusable and the menu
+         * is removed on close, so `onHidden` brings focus back to the input.
+         */
+        this.restoreFocusOnHide = false;
         this.selectKeyboardService.options = {
             emptyInput: !this.filterItems,
             keyboardSearch: true,
@@ -21191,6 +21558,19 @@ class SelectComponent {
     open() {
         this.dropdown.show();
     }
+    /**
+     * Moves focus to the search input without opening the dropdown, for example
+     * to focus the first control of a modal. Use `open()` to show the items.
+     */
+    focus() {
+        this.suppressOpenOnFocus = true;
+        try {
+            this.searchControl.nativeElement.focus();
+        }
+        finally {
+            this.suppressOpenOnFocus = false;
+        }
+    }
     /**
      * @ignore
      * @param value The value to write.
@@ -21234,11 +21614,23 @@ class SelectComponent {
      * @ignore
      */
     doFocus() {
-        this.open();
+        if (!this.suppressOpenOnFocus) {
+            this.open();
+        }
         queueMicrotask(() => {
             this.searchHasFocus = true;
         });
     }
+    /**
+     * Remembers that the menu was clicked, so focus can be restored once the
+     * click has closed the dropdown. Skipped when clicks keep the menu open.
+     * @ignore
+     */
+    onMenuClick() {
+        if (!this.insideClick) {
+            this.restoreFocusOnHide = true;
+        }
+    }
     /**
      * @ignore
      */
@@ -21253,6 +21645,7 @@ class SelectComponent {
      * @ignore
      */
     onShown() {
+        this.restoreFocusOnHide = false;
         this.searchControl.nativeElement.focus();
     }
     /**
@@ -21262,6 +21655,10 @@ class SelectComponent {
     onHidden() {
         this.searchControl.nativeElement.value = '';
         this._preselectedItem = null;
+        if (this.restoreFocusOnHide) {
+            this.restoreFocusOnHide = false;
+            this.focus();
+        }
     }
     emitChangeEvent() {
         if (typeof this.onChange === 'function') {
@@ -21283,7 +21680,7 @@ class SelectComponent {
             : requiredText;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectComponent, deps: [{ token: SelectKeyboardService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SelectComponent, isStandalone: true, selector: "c8y-select", inputs: { placeholder: "placeholder", items: "items", selected: "selected", container: "container", multi: "multi", canSelectWithSpace: "canSelectWithSpace", disabled: "disabled", autoClose: "autoClose", insideClick: "insideClick", required: "required", canDeselect: "canDeselect", name: "name", icon: "icon", filterItems: "filterItems" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SelectComponent, isStandalone: true, selector: "c8y-select", inputs: { placeholder: "placeholder", items: "items", selected: "selected", container: "container", multi: "multi", canSelectWithSpace: "canSelectWithSpace", disabled: "disabled", autoClose: "autoClose", insideClick: "insideClick", required: "required", canDeselect: "canDeselect", name: "name", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", icon: "icon", filterItems: "filterItems" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -21295,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: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\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\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\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 && !searchHasFocus && 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            <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span [hidden]=\"searchHasFocus || selected.length !== 1\">\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      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        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    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\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,
@@ -21323,7 +21720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         ListItemBodyComponent,
                         C8yTranslatePipe,
                         FilterByPipe
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\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\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\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 && !searchHasFocus && 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            <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span [hidden]=\"searchHasFocus || selected.length !== 1\">\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      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        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    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }], ctorParameters: () => [{ type: SelectKeyboardService }, { type: i1$1.TranslateService }], propDecorators: { placeholder: [{
                 type: Input
             }], items: [{
@@ -21348,6 +21745,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], name: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledby: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], filterItems: [{
@@ -29121,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", "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,
@@ -33060,6 +33461,63 @@ function globalAutoRefreshLoading(globalRefreshService) {
         : globalRefreshService.decrementLoading()));
 }
 
+/**
+ * Binds widget configurations to the context object currently being viewed.
+ *
+ * A device type dashboard is a single template shared by all devices of the type, so every asset
+ * reference a widget stores has to be re-pointed at the device being viewed before the widget
+ * renders. Widgets that keep those references in a shape the dashboard cannot know about implement
+ * the `applyContext` hook of their definition to do it themselves.
+ */
+class WidgetContextBindingService {
+    constructor() {
+        this.dynamic = inject(DynamicComponentService);
+    }
+    /**
+     * Binds the configuration of each widget to the given context.
+     *
+     * Widgets whose definition implements the `applyContext` hook rebind themselves.
+     * Falls back to the `fallback` context replacement function if:
+     * - the `applyContext` hook is not defined or throws an error
+     * - the widget's definition fails to load
+     *
+     * @param widgets The widgets to rebind, modified in place
+     * @param context The managed object of the context currently being viewed
+     * @param fallback Default context replacement, applied per widget when the hook does not run
+     */
+    async applyContextToWidgets(widgets, context, fallback) {
+        await Promise.all(widgets.map(async (widget) => {
+            const widgetId = widget.componentId || widget.name;
+            let definition;
+            try {
+                definition = await this.dynamic.getById(widgetId);
+            }
+            catch (error) {
+                console.error(`The definition of widget "${widgetId}" could not be loaded, so the widget cannot be rendered. Applying the default context replacement anyway to keep its configuration consistent.`, error);
+            }
+            const applyContext = definition?.data?.applyContext;
+            if (typeof applyContext === 'function') {
+                try {
+                    // A hook that returns nothing is treated as "config left as is", so that a missing
+                    // return value cannot wipe the widget's configuration.
+                    widget.config = (await applyContext(widget.config, context)) ?? widget.config;
+                    return;
+                }
+                catch (error) {
+                    console.error(`The applyContext hook of widget "${widgetId}" failed. Falling back to the default context replacement.`, error);
+                }
+            }
+            fallback(widget);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WidgetContextBindingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WidgetContextBindingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WidgetContextBindingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class WidgetsDashboardComponent {
     set widgets(value) {
         this._widgets.next(value);
@@ -33101,7 +33559,7 @@ class WidgetsDashboardComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    constructor(dynamic, translateService, route, modal, widgetGlobalAutoRefresh, router, elementRef) {
+    constructor(dynamic, translateService, route, modal, widgetGlobalAutoRefresh, router, elementRef, widgetContextBinding) {
         this.dynamic = dynamic;
         this.translateService = translateService;
         this.route = route;
@@ -33109,6 +33567,7 @@ class WidgetsDashboardComponent {
         this.widgetGlobalAutoRefresh = widgetGlobalAutoRefresh;
         this.router = router;
         this.elementRef = elementRef;
+        this.widgetContextBinding = widgetContextBinding;
         /**
          * Indicates if device info in config should be overridden with values from context property.
          */
@@ -33401,8 +33860,11 @@ class WidgetsDashboardComponent {
             return widgets;
         }
         if (this.isDeviceTypeDashboard) {
+            // MTM-64730: this has to stay above executeResolvers, otherwise the resolvers check access to
+            // the device originally configured in the widget and fail for users without permission to
+            // read it.
             const keysToOverride = ['device', '__target'];
-            widgets.forEach(widget => (widget.config = this.replaceKeysWithContext(widget.config, keysToOverride)));
+            await this.widgetContextBinding.applyContextToWidgets(widgets, this.context, widget => (widget.config = this.replaceKeysWithContext(widget.config, keysToOverride)));
         }
         const tuple = widgets.map(widget => ({
             componentId: widget.componentId || widget.name,
@@ -33449,7 +33911,7 @@ class WidgetsDashboardComponent {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$3.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$3.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$3.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$3.Router }, { token: i0.ElementRef }, { token: WidgetContextBindingService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: WidgetsDashboardComponent, isStandalone: true, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons", isSaveDisabled: "isSaveDisabled", clearWidgetContentOnLeave: "clearWidgetContentOnLeave" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], viewQueries: [{ propertyName: "dashboardChildren", predicate: DashboardChildComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete`dashboard`' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete`dashboard`</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete`dashboard`</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\n            <p c8y-guide-docs>\n              <small\n                translate\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      [layout]=\"settings.layout\"\n      [rows]=\"settings.rows\"\n      [alignViewHeight]=\"settings.alignViewHeight\"\n      [float]=\"settings.float\"\n      [gap]=\"settings.widgetMargin\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || scaledDefaultWidth\"\n          [height]=\"widget._height || scaledDefaultHeight\"\n          [minW]=\"widget._minW || scaledDefaultMinWidth\"\n          [minH]=\"widget._minH || scaledDefaultMinHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\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: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "layout", "alignViewHeight", "float", "gap", "minH", "minW", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "minH", "minW", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { 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: WidgetsDashboardComponent, decorators: [{
@@ -33483,7 +33945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         C8yTranslatePipe,
                         AsyncPipe
                     ], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete`dashboard`' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete`dashboard`</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete`dashboard`</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\n            <p c8y-guide-docs>\n              <small\n                translate\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      [layout]=\"settings.layout\"\n      [rows]=\"settings.rows\"\n      [alignViewHeight]=\"settings.alignViewHeight\"\n      [float]=\"settings.float\"\n      [gap]=\"settings.widgetMargin\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || scaledDefaultWidth\"\n          [height]=\"widget._height || scaledDefaultHeight\"\n          [minW]=\"widget._minW || scaledDefaultMinWidth\"\n          [minH]=\"widget._minH || scaledDefaultMinHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n" }]
-        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$3.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }, { type: i1$3.Router }, { type: i0.ElementRef }], propDecorators: { widgets: [{
+        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$3.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }, { type: i1$3.Router }, { type: i0.ElementRef }, { type: WidgetContextBindingService }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{
                 type: Input
@@ -37613,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,
@@ -39671,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", "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,
@@ -41746,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, 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