@c8y/ngx-components 1022.9.6 → 1022.13.0

package/fesm2022/c8y-ngx-components.mjs

@@ -70,6 +70,25 @@ import { PaginationModule } from 'ngx-bootstrap/pagination';
  * ```
  */
 class IconDirective {
+    /**
+     * Sets the icon to be displayed. This directive handles the correct CSS classes
+     * for Cumulocity IoT's dual-color icon sets.
+     *
+     * There are two main icon sets:
+     * 1. **Cumulocity Icons**: These are specific to the platform. To use them, provide the icon name prefixed with **c8y-**.
+     * 2. **Delight Icons**: This is the default icon set. To use them, provide just the icon name without any prefix.
+     *
+     * ```html
+     * <!-- To display a Cumulocity IoT icon (e.g., cockpit) -->
+     * <i [c8yIcon]="'c8y-cockpit'"></i>
+     *
+     * <!-- To display a default Delight icon (e.g., download) -->
+     * <i [c8yIcon]="'download'"></i>
+     *
+     * <!-- You can also use it without property binding for static icons -->
+     * <i c8yIcon="building"></i>
+     * ```
+     */
     set c8yIcon(icon) {
         this.updateIcon(icon);
     }
@@ -692,11 +711,11 @@ class OptionsService extends ApplicationOptions {
     }
     /**
      * Gets support URL from:
-     * - application option `supportUrl`,
-     * - or current tenant's option `configuration / system.support.url`,
-     * - or current tenant's inherited option `configuration / system.support.url`,
-     * - or system option `configuration / system.support.url`,
-     * - otherwise defaults to `false`.
+     * - application option: `supportUrl`
+     * - or current tenant's option: `configuration / system.support.url`
+     * - or current tenant's inherited option: `configuration / system.support.url`
+     * - or system option: `configuration / system.support.url`
+     * - otherwise defaults to: `false`
      *
      * @returns Returns support url or false.
      */
@@ -1097,7 +1116,7 @@ class RealtimeService {
     /**
      * Get an Observable of all realtime notifications.
      *
-     * @param {string | number | IIdentified} entityOrId Entity object or id
+     * @param entityOrId Entity object or id
      *
      * @returns An [[Observable]] of notifications wrapped as [[RealtimeMessage]]
      */
@@ -1124,7 +1143,7 @@ class RealtimeService {
     /**
      * Get an Observable of all CREATE realtime notifications.
      *
-     * @param {string | number | IIdentified} entityOrId Entity object or id
+     * @param entityOrId Entity object or id
      *
      * @returns An [[Observable]] of newly created entity objects.
      */
@@ -1134,7 +1153,7 @@ class RealtimeService {
     /**
      * Get an Observable of all UPDATE realtime notifications.
      *
-     * @param {string | number | IIdentified} entityOrId Entity object or id
+     * @param entityOrId Entity object or id
      *
      * @returns An [[Observable]] of updated entity objects.
      */
@@ -1144,7 +1163,7 @@ class RealtimeService {
     /**
      * Get an Observable of all DELETE realtime notifications.
      *
-     * @param {string | number | IIdentified} entityOrId Entity object or id
+     * @param entityOrId Entity object or id
      *
      * @returns An [[Observable]] of deleted entity objects.
      */
@@ -3876,9 +3895,9 @@ class C8yTranslateDirective extends TranslateDirective {
     /**
      * Overridden method from original directive.
      * For simple text nodes, it just invokes the base method.
-     * For complex nodes, it builds translation key from whole inner HTML
+     * For complex nodes, it builds translation key from whole `inner HTML`
      * and replaces it with its translation.
-     * This prevents splitting HTML into pieces and attempting to translate each one separately
+     * This prevents splitting `HTML` into pieces and attempting to translate each one separately
      * which doesn't work, because we extract strings in whole.
      */
     checkNodes(forceUpdate = false, translations) {
@@ -4565,7 +4584,7 @@ const ES_MAX_TIME_MILLISECONDS = 8640000000000000;
  * Extends Angular's DatePipe in a way so that date values exceeding the range supported by ECMAScript
  * are displayed as earliest/latest supported point in time printed in the desired format pre- or postfixed
  * by the word `before` or `after`, respectively.
- * In all other cases the pipe behaves as the standard [DatePipe]{@link https://angular.io/api/common/DatePipe}.
+ * In all other cases the pipe behaves as the standard [DatePipe](https://angular.io/api/common/DatePipe).
  *
  * ```html
  * <span class="highlight">{{ deadline | c8yDate }}</span> <!-- e.g. 7 May 2020, 17:45:19 (en-GB) or 07.05.2020, 17:45:19 (de) -->
@@ -5378,15 +5397,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 /**
- * A directive to iterate over IResultList<T> data from @c8y/client.
- * Depending on the [c8yForLoadMore] a load more button is:
- *  - auto: Tries to automatically load more data (default maximum 10 iterations; can be
+ * A directive to iterate over `IResultList<T>` data from `@c8y/client`.
+ * Depending on the `[c8yForLoadMore]` a load more button is:
+ *  - **auto**: Tries to automatically load more data (default maximum 10 iterations; can be
  *          change with maxIterations settings).
- *  - show: Shows a load more button for the user to decide
- *  - none: Doesn't perform any load more action.
- *  - hidden: Loads more data automatically but with no visible button for the user.
+ *  - **show**: Shows a load more button for the user to decide
+ *  - **none**: Doesn't perform any load more action.
+ *  - **hidden**: Loads more data automatically but with no visible button for the user.
  *
- * Additional, any rxjs operator pipe can be applied to the [c8yForPipe] input, e.g. to
+ * Additional, any rxjs operator pipe can be applied to the `[c8yForPipe]` input, e.g. to
  * filter the data displayed currently as well as the data loaded by subsequent requests.
  *
  * ```html
@@ -5398,8 +5417,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * ```typescript
  * this.devices = this.inventoryService.list({ pageSize: 10, fragmentType: 'c8y_IsDevice' })
  * ```
- * It will display the first 10 items, if there is more space left on the screen, and there are more
- * than 10 devices, it will automatically load up to 10 pages more. If it still can't fit the screen
+ * It will display the first `10` items, if there is more space left on the screen, and there are more
+ * than `10` devices, it will automatically load up to 10 pages more. If it still can't fit the screen
  * it will stop and switch to `show` mode.
  *
  * A pipe can be applied e.g. for filtering or grouping. This pipe is attached to every follow up
@@ -5501,11 +5520,11 @@ class ForOfDirective {
     }
     /**
      * The mode setter:
-     *  - auto: Tries to automatically load more data (default maximum 10 iterations; can be
+     *  - **auto**: Tries to automatically load more data (default maximum 10 iterations; can be
      *          change with maxIterations settings).
-     *  - show: Shows a load more button for the user to decide
-     *  - none: Doesn't perform any load more action.
-     *  - hidden: Loads more data automatically but with no visible button for the user.
+     *  - **show**: Shows a load more button for the user to decide
+     *  - **none**: Doesn't perform any load more action.
+     *  - **hidden**: Loads more data automatically but with no visible button for the user.
      */
     set c8yForLoadMore(type) {
         this.loadMoreMode = type;
@@ -5552,7 +5571,7 @@ class ForOfDirective {
         this.loadingLabel = loadingLabel;
     }
     /**
-     * A RealtimeService instance.
+     * A `RealtimeService` instance.
      */
     set c8yForRealtime(source) {
         this.realtime = source;
@@ -5577,7 +5596,9 @@ class ForOfDirective {
         this.cachedData = [];
         this.loadMoreMode = 'auto';
         this.dataPipe = pipe(tap());
-        this.itemDataPipe = pipe(map(item => [item]), src => this.dataPipe(src), map(([item]) => item));
+        this.itemDataPipe = pipe(map(item => [item]), src => this.dataPipe(src), map(([item]) => {
+            return item;
+        }));
         this.maxIterations = 10;
         this.realtimeOptions = {};
         this.unsubscribe$ = new Subject();
@@ -5594,7 +5615,7 @@ class ForOfDirective {
         /**
          * The number of items currently loaded in the list.
          *
-         * Note: This can only be used if the forOf isn't used with
+         * Note: This can only be used if the `forOf` isn't used with
          * the sugared asterisk (*) syntax. Instead you need to use an ng-template:
          * ```html
          * <ng-template
@@ -5610,7 +5631,7 @@ class ForOfDirective {
         /**
          * The items change event emitting the newly loaded items.
          *
-         * Note: This can only be used if the forOf isn't used with
+         * Note: This can only be used if the `forOf` isn't used with
          * the sugared asterisk (*) syntax. Instead you need to use an ng-template:
          * ```html
          * <ng-template
@@ -6424,10 +6445,12 @@ const internalApps = {
     streaminganalytics: gettext$1('Streaming Analytics')
 };
 
-/*
+/**
  * Humanize an application name and translates it.
- * Usage:
- *   appNameOrApp | humanizeAppName | async
+ *
+ * ```html
+ * <p>{{ appNameOrApp | humanizeAppName | async }}</p>
+ * ```
  */
 class HumanizeAppNamePipe {
     constructor(translateService) {
@@ -6476,10 +6499,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ name: 'humanizeAppName', standalone: true }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
-/*
- * Humanize any string
- * Usage:
- *   'something' | humanize
+/**
+ * Transforms a string into a human-readable format.
+ *
+ * ```html
+ * <p>{{ 'c8y_hello world' | humanize }}</p> <!-- e.g. Hello world -->
+ * ```
  */
 class HumanizePipe {
     static humanize(str = '') {
@@ -6610,9 +6635,9 @@ class Permissions {
      * }
      * ```
      *
-     * @param roleIds - The array of role ids to check if the current user have at least one of them.
-     * @param mo - The managed object for which we are checking whether the user has access.
-     * @param config - A configuration object that can take the following values: `skipRolesCheck`: `boolean` - skips roles check, `skipOwnerCheck`: `boolean` - skips ownership check, `skipRequestCheck`: `boolean` - skips checks with a query to the inventory API. UI will make a query to backend whether the user can edit the managed object. A rejection from BE indicates a lack of permission.
+     * @param roleIds The array of role ids to check if the current user have at least one of them.
+     * @param mo The managed object for which we are checking whether the user has access.
+     * @param config A configuration object that can take the following values: `skipRolesCheck`: `boolean` - skips roles check, `skipOwnerCheck`: `boolean` - skips ownership check, `skipRequestCheck`: `boolean` - skips checks with a query to the inventory API. UI will make a query to backend whether the user can edit the managed object. A rejection from BE indicates a lack of permission.
      *
      * @returns A Promise resolving to a boolean value. `true` if editing is permitted based on the given parameters and configuration; otherwise, `false`.
      *
@@ -6633,7 +6658,7 @@ class Permissions {
      * };
      * ```
      *
-     * @param roleId - The ID of the role to check against the current user's roles.
+     * @param roleId The ID of the role to check against the current user's roles.
      * @returns A boolean value indicating whether the current user has the specified role.
      * @throws Error if no user is currently logged in.
      *
@@ -6657,7 +6682,7 @@ class Permissions {
      * }
      * ```
      *
-     * @param roleIds - An array of strings representing the role IDs to check against the current user's roles.
+     * @param roleIds An array of strings representing the role IDs to check against the current user's roles.
      * @returns A boolean value indicating whether the current user has all the specified roles.
      * @throws Error if no user is currently logged in.
      *
@@ -6681,7 +6706,7 @@ class Permissions {
      * };
      * ```
      *
-     * @param roleIds - An array of strings representing the role IDs to check against the current user's roles.
+     * @param roleIds An array of strings representing the role IDs to check against the current user's roles.
      * @returns A boolean value indicating whether the current user has any of the specified roles.
      * @throws Error if no user is currently logged in.
      *
@@ -6703,7 +6728,7 @@ class Permissions {
      * }
      * ```
      *
-     * @param globalRolesIds - An array of numbers representing the global role IDs to check against the current user's roles.
+     * @param globalRolesIds An array of numbers representing the global role IDs to check against the current user's roles.
      * @returns A boolean value indicating whether the current user has any of the specified global roles.
      * @throws Error if no user is currently logged in.
      *
@@ -6727,7 +6752,7 @@ class Permissions {
      * });
      * ```
      *
-     * @param mo - The managed object to check ownership against.
+     * @param mo The managed object to check ownership against.
      * @returns A promise that resolves to `true` if the current user is the owner of the managed object, and `false` otherwise.
      *
      */
@@ -6753,7 +6778,7 @@ class Permissions {
      * });
      * ```
      *
-     * @param mo - The managed object to test edit permissions on.
+     * @param mo The managed object to test edit permissions on.
      * @returns A promise that resolves to `true` if the update request succeeds (indicating edit permissions), and `false` if it fails.
      *
      */
@@ -6777,9 +6802,9 @@ class Permissions {
      * ownership, and custom request-based checks. Each of these checks can be optionally skipped
      * based on the provided configuration.
      *
-     * @param roleIds - An array of role IDs to check against the current user's roles.
-     * @param mo - The managed object or an identified resource to check edit permissions for.
-     * @param config - Configuration options to customize the checks performed. This includes options to skip role checks, owner checks, or custom request checks.
+     * @param roleIds An array of role IDs to check against the current user's roles.
+     * @param mo The managed object or an identified resource to check edit permissions for.
+     * @param config Configuration options to customize the checks performed. This includes options to skip role checks, owner checks, or custom request checks.
      * @returns A promise that resolves to `true` if the current user can edit the managed object based on the given conditions, and `false` otherwise.
      *
      */
@@ -6946,6 +6971,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * A pipe that transforms a Markdown string into sanitized HTML.
+ *
+ *
+ * ```html
+ * <div [innerHTML]="'[Example markdown link](#)' | markdownToHtml | async"></div>
+ * ```
+ */
 class MarkdownToHtmlPipe {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
@@ -7132,11 +7165,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * <div *c8yOutlet="nodes"></div>
  * ```
  *
- * note: If template is instance of HTMLElement (for example, node compiled by angularJS) then there can be
- * only single instance rendered, as only one instance of HTMLElement can exist in DOM.
- * If there is need for displaying same element multiple times, please make sure to inject into
- * this element createCopy function, which should return another instance of given element.
- *
+ * Note: When passing a native `HTMLElement`, be aware that a single element instance can only exist in one
+ * place in the DOM. If you need to render the same element in multiple locations, the passed element
+ * should have a `createCopy` function that returns a new instance or a clone of the element.
  */
 class OutletDirective {
     constructor(viewContainer, injector, renderer, el) {
@@ -7147,7 +7178,7 @@ class OutletDirective {
         this.properties = {};
     }
     /**
-     * Directive to set a DOM node, a TemplateRef or any Component to a container or any node.
+     * Directive to set a `DOM node`, a `TemplateRef` or any `Component` to a container or any node.
      * ```html
      * <div *c8yOutlet="template"></div>
      * <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
@@ -7554,6 +7585,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [':blur']
             }] } });
 
+/**
+ * A pipe that transforms a user object into their initials.
+
+ * ```html
+ * {{ user | userNameInitials }}
+ * ```
+ */
 class UserNameInitialsPipe {
     transform(user) {
         if (!user) {
@@ -7648,12 +7686,16 @@ class AlertService extends StateService {
     }
     /**
      * Adds a new alert to the current state.
+     * @param alert The alert object to be added.
      */
     add(alert) {
         this.addAlert(alert);
     }
     /**
      * Adds a alert by text.
+     * @param type The type of the alert.
+     * @param txt The text to be displayed in the alert.
+     * @param detailedData Optional detailed data for the alert.
      */
     addByText(type, txt, detailedData) {
         this.addAlert({ text: txt, type, detailedData });
@@ -7667,12 +7709,15 @@ class AlertService extends StateService {
     }
     /**
      * Remove an alert from the current state.
+     * @param alert The alert object to be removed.
      */
     remove(alert) {
         this.changeAlerts(this.state.filter(item => !this.areSame(alert, item)));
     }
     /**
      * Updates matching alert with provided values.
+     * @param alert The alert to be updated.
+     * @param fieldsToUpdate An object with the fields to update in the alert.
      */
     update(alert, fieldsToUpdate) {
         this.changeAlerts(this.state.map(item => {
@@ -7700,7 +7745,7 @@ class AlertService extends StateService {
     }
     /**
      * Shorthand for a save successful alert.
-     * @param savedObject The object which was saved.
+     * @param savedObject The name of the object which was saved.
      * @return A function that can be executed to show the msg.
      */
     saveSuccess(savedObject) {
@@ -7711,7 +7756,7 @@ class AlertService extends StateService {
     }
     /**
      * Shorthand for a create successful alert.
-     * @param createdObject The object which was created.
+     * @param createdObject The name of the object which was created.
      * @return A function that can be executed to show the msg.
      */
     createSuccess(createdObject) {
@@ -7769,8 +7814,8 @@ class AlertService extends StateService {
     /**
      * Creates alert from standard api errors.
      * Should be used for errors generated by @c8y/client services.
-     * @param {IResult}  error The error from server.
-     * @param {alertType} type The type of alert.
+     * @param error The error from server.
+     * @param type The type of alert.
      */
     addServerFailure(error, type = 'danger') {
         const { data, res } = error;
@@ -7804,6 +7849,8 @@ class AlertService extends StateService {
     /**
      * Compares two alert objects. Alerts are same if text, type, detailed data and callbacks are same.
      * Callbacks are same if they refer to the same function.
+     * @param alert1 First alert to compare.
+     * @param alert2 Second alert to compare.
      */
     areSame(alert1, alert2) {
         return (alert1.text === alert2.text &&
@@ -7922,7 +7969,7 @@ class UserPreferencesService {
      * @param user The user for whom the search is done.
      * @returns An Observable with the value of preference.
      *
-     * @deprecated Uses depracted inventory approach. Use get instead.
+     * @deprecated Uses deprecated inventory approach. Use get instead.
      */
     getForUser(key, user) {
         const rawKey = this.getTransformedRawKey(key, user);
@@ -8659,13 +8706,13 @@ const SERVICE_HOOK_TOKENS = new Map();
  * hookService('layersServiceKey', TestService);
  * ```
  */
-function hookService(extensionKey, service) {
+function hookService(extensionKey, service, options) {
     let token = SERVICE_HOOK_TOKENS.get(extensionKey);
     if (!token) {
         token = new InjectionToken(extensionKey);
         SERVICE_HOOK_TOKENS.set(extensionKey, token);
     }
-    return hookGeneric(service, token);
+    return hookGeneric(service, token, options);
 }
 /**
  * Service for managing and retrieving dynamically registered services within the application.
@@ -12972,7 +13019,7 @@ class BreadcrumbOutletComponent {
         return path?.replace(/^#\/?/, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbOutletComponent, isStandalone: true, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbOutletComponent, isStandalone: true, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" [attr.role]=\"'navigation'\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n            [attr.aria-label]=\"'breadcrumb'\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbOutletComponent, decorators: [{
             type: Component,
@@ -12985,7 +13032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         OutletDirective,
                         RouterLink,
                         C8yTranslatePipe
-                    ], template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n" }]
+                    ], template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" [attr.role]=\"'navigation'\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n            [attr.aria-label]=\"'breadcrumb'\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n" }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }] } });
@@ -13294,6 +13341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class TitleComponent {
     constructor(headerService) {
         this.headerService = headerService;
+        /** Whether to update the browser's page title with the content of the title. */
         this.pageTitleUpdate = true;
     }
     ngAfterViewInit() {
@@ -14526,9 +14574,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 /**
  * The angular module definition for breadcrumbs.
- * @exports BreadcrumbComponent
- * @exports BreadcrumbItemComponent
- * @exports BreadcrumbOutletComponent
+ * @exports {@link BreadcrumbComponent}
+ * @exports {@link BreadcrumbItemComponent}
+ * @exports {@link BreadcrumbOutletComponent}
  */
 class BreadcrumbModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -16422,6 +16470,9 @@ class DeviceStatusComponent {
     }
     constructor(translateService) {
         this.translateService = translateService;
+        /**
+         * Max width of the svg icon in pixels.
+         */
         this.size = 20;
     }
     get() {
@@ -18930,7 +18981,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      *ngIf=\"true\"\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      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\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)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\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      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\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      <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\"\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    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\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      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault()\"\n      ></c8y-li-checkbox>\n      <c8y-li-body *ngIf=\"!item.template\">\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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" }] }); }
+        ], 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      *ngIf=\"true\"\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      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\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)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\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      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\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      <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    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\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      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault()\"\n      ></c8y-li-checkbox>\n      <c8y-li-body *ngIf=\"!item.template\">\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -18959,7 +19010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ListItemCheckboxComponent,
                         ListItemBodyComponent,
                         C8yTranslatePipe
-                    ], 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      *ngIf=\"true\"\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      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\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)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\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      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\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      <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\"\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    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\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      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault()\"\n      ></c8y-li-checkbox>\n      <c8y-li-body *ngIf=\"!item.template\">\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
+                    ], 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      *ngIf=\"true\"\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      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\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)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\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      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\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      <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    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\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      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault()\"\n      ></c8y-li-checkbox>\n      <c8y-li-body *ngIf=\"!item.template\">\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
         }], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
                 type: Input
             }], items: [{
@@ -22249,6 +22300,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class BottomDrawerComponent {
     constructor() {
+        /**
+         * When enabled, clicking outside the drawer will not close it.
+         */
         this.disableClickOutside = false;
         this.drawerOpenSubject$ = new BehaviorSubject(true);
         this.drawerOpenObs$ = this.drawerOpenSubject$.asObservable().pipe(delay(0), shareReplay());
@@ -25056,6 +25110,10 @@ class DateTimePickerComponent {
     constructor(cd, dateFormatService) {
         this.cd = cd;
         this.dateFormatService = dateFormatService;
+        /**
+         * If true, the datepicker will adapt its position based on available space.
+         * This is useful for responsive designs where the datepicker should not overflow the viewport.
+         */
         this.adaptivePosition = false;
         /**
          * Specifies the type of date input.
@@ -29396,10 +29454,17 @@ class CountdownIntervalComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    /**
+     * Starts the countdown timer.
+     */
     start() {
         this.countdownSubscription?.unsubscribe();
         this.start$.next(null);
     }
+    /**
+     * Stops the countdown timer.
+     * @param stopAtZero - If true, stops the timer when it reaches zero. Otherwise, stops it at the current countdown interval.
+     */
     stop(stopAtZero = false) {
         this.countdownSubscription?.unsubscribe();
         this.runSpinner$.next(false);
@@ -33654,12 +33719,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class ListDisplaySwitchComponent {
+    /**
+     * The length of the list to display.
+     */
     set listLength(val) {
         this._listLength = val;
         this.loadSelectedOption();
     }
     constructor(location) {
         this.location = location;
+        /**
+         * The pipe used to filter the list items. It should return an observable that emits the filtered items.
+         */
         this.filterPipe = pipe(tap());
         this.onListClassChange = new EventEmitter();
         this.DISPLAY_OPTIONS = [
@@ -33720,11 +33791,11 @@ class ListDisplaySwitchComponent {
         return this.listKey || this.location.path();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListDisplaySwitchComponent, deps: [{ token: i1$a.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListDisplaySwitchComponent, isStandalone: true, selector: "c8y-list-display-switch", inputs: { listKey: "listKey", listLength: "listLength", filterPipe: "filterPipe" }, outputs: { onListClassChange: "onListClassChange" }, ngImport: i0, template: "<div class=\"d-flex\">\n  <label class=\"m-r-8\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListDisplaySwitchComponent, isStandalone: true, selector: "c8y-list-display-switch", inputs: { listKey: "listKey", listLength: "listLength", filterPipe: "filterPipe" }, outputs: { onListClassChange: "onListClassChange" }, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <label class=\"m-r-8 m-b-0\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListDisplaySwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-list-display-switch', standalone: true, imports: [FormsModule$1, NgFor, C8yTranslatePipe], template: "<div class=\"d-flex\">\n  <label class=\"m-r-8\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-list-display-switch', standalone: true, imports: [FormsModule$1, NgFor, C8yTranslatePipe], template: "<div class=\"d-flex a-i-center\">\n  <label class=\"m-r-8 m-b-0\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$a.Location }], propDecorators: { listKey: [{
                 type: Input
             }], listLength: [{
@@ -33810,6 +33881,11 @@ class RangeDisplayComponent {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
+    /**
+     *
+     * @returns true if the target value is within the defined range, false otherwise.
+     * This method checks if the target value is defined and falls within the minimum and maximum range
+     */
     checkTarget() {
         return (this.config.target !== undefined &&
             this.config.target !== null &&
@@ -33834,6 +33910,12 @@ class RangeDisplayComponent {
         const { yellowRangeMin, yellowRangeMax } = this.config;
         return this.isRangeDisplayed(yellowRangeMin, yellowRangeMax);
     }
+    /**
+     * Checks if the given range is displayed.
+     * @param rangeMin - The minimum value of the range.
+     * @param rangeMax - The maximum value of the range.
+     * * @returns true if the range is displayed, false otherwise.
+     */
     isRangeDisplayed(rangeMin, rangeMax) {
         return rangeMin === 0 || rangeMax === 0 || (rangeMin && rangeMax);
     }
@@ -35040,20 +35122,13 @@ class PreviewService extends ExtensionPointForPlugins {
             if (!success) {
                 throw new Error(`Failed to toggle feature with key "${key}".`);
             }
+            this.checkIfReloadNeeded(feature, key);
             return;
         }
         const featureToUpdate = { key: feature.key, active: toggleValue };
         await this.featureService.updateFeature(featureToUpdate);
-        await this.featureCacheService.resetFeatureState();
-        if (feature.settings?.reload) {
-            if (this.toggledFeaturesWithReload.has(key)) {
-                this.toggledFeaturesWithReload.delete(key);
-            }
-            else {
-                this.toggledFeaturesWithReload.add(key);
-            }
-        }
-        this.reload$.next(this.toggledFeaturesWithReload.size > 0);
+        this.featureCacheService.resetFeatureState();
+        this.checkIfReloadNeeded(feature, key);
     }
     /**
      * Marks all unseen features as seen by the user and updates the local storage.
@@ -35081,6 +35156,17 @@ class PreviewService extends ExtensionPointForPlugins {
                 : of(feat))).pipe(map(features => features.filter(Boolean)));
         }));
     }
+    checkIfReloadNeeded(feature, key) {
+        if (feature.settings?.reload) {
+            if (this.toggledFeaturesWithReload.has(key)) {
+                this.toggledFeaturesWithReload.delete(key);
+            }
+            else {
+                this.toggledFeaturesWithReload.add(key);
+            }
+        }
+        this.reload$.next(this.toggledFeaturesWithReload.size > 0);
+    }
     /**
      *
      * @returns An array of feature names that have been seen by the user. This is retrieved from local storage.