@c8y/ngx-components 1024.20.1 → 1024.20.8

package/fesm2022/c8y-ngx-components.mjs

@@ -17903,7 +17903,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 +17943,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 +17968,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 +18020,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 +18040,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 +18082,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 +18169,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 +18181,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 +18205,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 +18244,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 +18753,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"], 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,
@@ -20913,6 +20979,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 +21116,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 +21132,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 +21274,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 +21330,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 +21361,7 @@ class SelectComponent {
      * @ignore
      */
     onShown() {
+        this.restoreFocusOnHide = false;
         this.searchControl.nativeElement.focus();
     }
     /**
@@ -21262,6 +21371,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 +21396,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 +21408,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"], 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 +21436,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 +21461,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 +29238,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"], 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 +33177,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 +33275,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 +33283,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 +33576,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 +33627,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 +33661,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
@@ -39671,7 +39849,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"], 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 +41924,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, 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