@c8y/ngx-components 1022.10.1 → 1022.16.2

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 }); }
@@ -15074,102 +15122,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['document:keydown.enter', ['$event']]
             }] } });
 
-/**
- * Service to show a modal.
- */
-class ModalService {
-    constructor(modalService, gainsightService) {
-        this.modalService = modalService;
-        this.gainsightService = gainsightService;
-    }
-    /**
-     * Shows a quick confirm message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
-     * @param confirmOptions Selection options to display as checkbox list.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm'),
-            cancel: labels.cancel || gettext$1('Cancel')
-        };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels: modalLabels, status, confirmOptions },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick acknowledge message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param acknowledgeLabel The label to use.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
-        const labels = { ok: acknowledgeLabel, cancel: null };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels, status },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick logout confirmation modal.
-     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
-     */
-    async confirmLogout(body, status = Status.WARNING, labels = {}) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm and log out'),
-            cancel: labels.cancel || gettext$1('Cancel')
-        };
-        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
-        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
-    }
-    triggerEvent(result, labels, productExperienceEvent) {
-        const data = { ...productExperienceEvent.data, url: window.location.href };
-        result
-            .then(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.ok
-            });
-        })
-            .catch(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.cancel
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
-
 /**
  * The angular module definition for modal.
  * @exports ConfirmModalComponent
@@ -15181,7 +15133,7 @@ class ModalModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ModalModule, imports: [i1$7.ModalModule, CommonModule, i1$9.PopoverModule, ConfirmModalComponent,
             ModalComponent,
             PopoverConfirmComponent], exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalModule, providers: [ModalService], imports: [ModalModule$1.forRoot(),
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalModule, imports: [ModalModule$1.forRoot(),
             CommonModule,
             PopoverModule.forRoot(),
             PopoverConfirmComponent] }); }
@@ -15197,8 +15149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ModalComponent,
                         PopoverConfirmComponent
                     ],
-                    exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent],
-                    providers: [ModalService]
+                    exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent]
                 }]
         }] });
 
@@ -16422,6 +16373,9 @@ class DeviceStatusComponent {
     }
     constructor(translateService) {
         this.translateService = translateService;
+        /**
+         * Max width of the svg icon in pixels.
+         */
         this.size = 20;
     }
     get() {
@@ -18930,7 +18884,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 +18913,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: [{
@@ -19152,6 +19106,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * Service to show a modal.
+ */
+class ModalService {
+    constructor(modalService, gainsightService) {
+        this.modalService = modalService;
+        this.gainsightService = gainsightService;
+    }
+    /**
+     * Shows a quick confirm message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
+     * @param confirmOptions Selection options to display as checkbox list.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels: modalLabels, status, confirmOptions },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick acknowledge message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param acknowledgeLabel The label to use.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
+        const labels = { ok: acknowledgeLabel, cancel: null };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels, status },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick logout confirmation modal.
+     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
+     */
+    async confirmLogout(body, status = Status.WARNING, labels = {}) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm and log out'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
+        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
+    }
+    triggerEvent(result, labels, productExperienceEvent) {
+        const data = { ...productExperienceEvent.data, url: window.location.href };
+        result
+            .then(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.ok
+            });
+        })
+            .catch(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.cancel
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
+
 class ThemeSwitcherService {
     constructor(options) {
         this.options = options;
@@ -19543,10 +19593,11 @@ class PasswordService {
         return this.DEFAULT_PASSWORD_MIN_LENGTH;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, deps: [{ token: i1$7.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$7.BsModalService }] });
 
 class TotpSetupComponent {
@@ -20373,63 +20424,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ selector: 'c8y-user-menu-outlet', standalone: true, imports: [NgIf, NgFor, OutletDirective, UserMenuItemComponent, C8yTranslatePipe, AsyncPipe], template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n" }]
         }], ctorParameters: () => [{ type: AppStateService }, { type: i1$7.BsModalService }, { type: SimplifiedAuthService }, { type: UserMenuService }, { type: HeaderService }] });
 
-class PasswordStrengthCheckerService {
-    constructor() {
-        this.GREEN = {
-            colorName: 'green',
-            color: 'rgb(0, 128, 0)',
-            description: gettext$1('strong'),
-            passwordStrength: PasswordStrength.GREEN
-        };
-        this.YELLOW = {
-            colorName: 'yellow',
-            color: 'rgb(255, 204, 51)',
-            description: gettext$1('medium'),
-            passwordStrength: PasswordStrength.YELLOW
-        };
-        this.RED = {
-            colorName: 'red',
-            color: 'rgb(170, 0, 51)',
-            description: gettext$1('weak'),
-            passwordStrength: PasswordStrength.RED
-        };
-    }
-    hasLowerCase(password) {
-        return password.search(/[a-z]/) !== -1;
-    }
-    hasUpperCase(password) {
-        return password.search(/[A-Z]/) !== -1;
-    }
-    hasNumbers(password) {
-        return password.search(/[0-9]/) !== -1;
-    }
-    hasSpecialChars(password) {
-        return password.search(/[^0-9a-zA-Z]+/) !== -1;
-    }
-    getStrengthColor(password) {
-        const passwordStrength = filter$2([
-            this.hasLowerCase(password),
-            this.hasUpperCase(password),
-            this.hasNumbers(password),
-            this.hasSpecialChars(password)
-        ]).length;
-        if (passwordStrength > 3) {
-            return this.GREEN;
-        }
-        else if (passwordStrength >= 3) {
-            return this.YELLOW;
-        }
-        else {
-            return this.RED;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * @deprecated: [MTM-56403] Password strength indicator removed from UI in favor of the enhanced password strength check list.
  */
@@ -20490,7 +20484,7 @@ class AuthenticationModule {
             CurrentPasswordModalComponent,
             TotpSetupComponent,
             PasswordInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthenticationModule, providers: [PasswordStrengthCheckerService, PasswordService], imports: [FormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthenticationModule, imports: [FormsModule,
             TooltipModule,
             CommonModule,
             ModalModule,
@@ -20530,8 +20524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CurrentPasswordModalComponent,
                         TotpSetupComponent,
                         PasswordInputComponent
-                    ],
-                    providers: [PasswordStrengthCheckerService, PasswordService]
+                    ]
                 }]
         }] });
 
@@ -20776,6 +20769,311 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+class PluginsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: []
+                }]
+        }] });
+
+/**
+ * An extension HOOK can use either a pure value:
+ * ```typescript
+ *  { provide: HOOK_X, useValue: { ...hookValue }, multi: true }
+ * ```
+ *
+ * Or an array to directly register multiple:
+ * ```typescript
+ *  { provide: HOOK_X, useValue: [{ ...hookValues }], multi: true }
+ * ```
+ *
+ * Or an ExtensionFactory which allows to define a get() function. This function
+ * gets called on each navigation with the current route and can return values
+ * async (observable or promise).
+ * ```typescript
+ *  { provide: HOOK_X, useFactory: { get: (route) => doSomethingAsync(route) }, multi: true }
+ * ```
+ * @deprecated Consider using the `hookVersion` function instead.
+ */
+const HOOK_VERSION = new InjectionToken('HOOK_VERSION');
+const VERSION_MODULE_CONFIG = new InjectionToken('VERSION_MODULE_CONFIG');
+/**
+ * You can either provide a single `Version` as parameter:
+ * ```typescript
+ *  hookVersion(...)
+ * ```
+ *
+ * Or an array to directly register multiple:
+ * ```typescript
+ *  hookVersion([...])
+ * ```
+ *
+ * Or you provide an Service that implements `ExtensionFactory<Version>`
+ * ```typescript
+ *  export class MyVersionFactory implements ExtensionFactory<Version> {...}
+ *  ...
+ *  hookVersion(MyVersionFactory)
+ * ```
+ * A typed alternative to `HOOK_VERSION`.
+ * @param versions The `Version`'s or `ExtensionFactory` to be provided.
+ * @returns An `Provider` to be provided in your module.
+ */
+function hookVersion(versions, options) {
+    return hookGeneric(versions, HOOK_VERSION, options);
+}
+
+/**
+ * Will provide the backend versions of the tenant.
+ * The system option 'system' -> 'version' is used for this.
+ */
+class BackendVersionFactory {
+    constructor(config, appState) {
+        this.config = config;
+        this.appState = appState;
+        this.backendVersion$ = of([]);
+        if (this.config?.disableBackendVersionFactory) {
+            return;
+        }
+        this.backendVersion$ = this.appState.state$.pipe(map(state => state?.versions?.backend), filter(backendVersion => !!backendVersion), distinctUntilChanged(), map(backendVersion => this.buildBackendVersion(backendVersion)), shareReplay(1));
+    }
+    get() {
+        return this.backendVersion$;
+    }
+    buildBackendVersion(backendVersion) {
+        return {
+            label: gettext$1('Backend'),
+            version: backendVersion,
+            priority: 20,
+            type: 'SYSTEM',
+            hidden: true
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, deps: [{ token: VERSION_MODULE_CONFIG, optional: true }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [VERSION_MODULE_CONFIG]
+                }] }, { type: AppStateService }] });
+
+class VersionService extends ExtensionPointForPlugins {
+    constructor(rootInjector, pluginService) {
+        super(rootInjector, pluginService);
+        this.items$ = this.setupItemsObservable();
+        this.nonHiddenItems$ = this.items$.pipe(map(versions => versions.filter(version => !version.hidden)));
+    }
+    get state() {
+        return this.state$.value;
+    }
+    add(version) {
+        this.state.add(version);
+        this.emitNewState();
+    }
+    remove(version) {
+        this.state.delete(version);
+        this.emitNewState();
+    }
+    cleanUpVersions(versions) {
+        return versions.map(version => pick(version, 'label', 'version', 'type', 'custom'));
+    }
+    setupItemsObservable() {
+        return fromTriggerOnce(undefined, this.refresh$, [
+            getInjectedHooks(HOOK_VERSION, this.injectors),
+            () => this.factories,
+            stateToFactory(this.state$)
+        ]).pipe(distinctUntilChanged(), map(versions => sortByPriority(versions)), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, deps: [{ token: i0.Injector }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }] });
+
+class PlatformDetailsService {
+    constructor(version, appState, apps) {
+        this.version = version;
+        this.appState = appState;
+        this.apps = apps;
+    }
+    async getPlatformDetailsObject() {
+        const currentUser = this.appState.currentUser.value;
+        const userId = currentUser?.id;
+        const userPermissions = this.getUserPermissions(currentUser);
+        const [hookedVersions, microserviceVersions] = await Promise.all([
+            this.getVersions(),
+            this.getMicroserviceVersions(userId)
+        ]);
+        const versions = [...hookedVersions, ...microserviceVersions];
+        const groupedVersions = groupBy(versions, 'type');
+        const tenantId = this.appState.currentTenant.value?.name;
+        // useful as `domainName` might be pointing to a custom domain
+        // self link should still allow to identify the actual environment of the tenant
+        const tenantSelfLink = this.appState.currentTenant.value?.self;
+        const tenantDomainName = this.appState.currentTenant.value?.domainName;
+        const applicationKey = this.appState.currentApplication.value?.key;
+        const applicationId = this.appState.currentApplication.value?.id;
+        const time = new Date().toISOString();
+        const url = document.URL;
+        const obj = {
+            time,
+            tenantId,
+            tenantSelfLink,
+            tenantDomainName,
+            url,
+            userId,
+            userPermissions,
+            applicationId,
+            applicationKey,
+            versions: groupedVersions
+        };
+        return obj;
+    }
+    async getVersions() {
+        const versions = await this.version.items$
+            .pipe(take(1), map(versions => this.version.cleanUpVersions(versions)))
+            .toPromise();
+        return versions;
+    }
+    async getMicroserviceVersions(userId) {
+        try {
+            const { data: apps } = await this.apps.listByUser(userId, {
+                pageSize: 2000,
+                dropOverwrittenApps: true,
+                noPaging: true
+            });
+            return apps
+                .filter(app => !!app.manifest?.version && app.type === ApplicationType.MICROSERVICE)
+                .map(app => {
+                return {
+                    label: app.name,
+                    version: app.manifest.version,
+                    type: app.type,
+                    custom: {
+                        owner: app.owner?.tenant?.id,
+                        provider: app.manifest?.provider
+                    }
+                };
+            });
+        }
+        catch (e) {
+            console.warn(e);
+            return [];
+        }
+    }
+    getUserPermissions(user) {
+        if (!user) {
+            return null;
+        }
+        const userPermissions = this.getDirectPermissionsOfUser(user);
+        const groupPermissions = this.getPermissionsOfAssignedGroups(user);
+        return { user: userPermissions, groups: groupPermissions };
+    }
+    getDirectPermissionsOfUser(user) {
+        const userChangedType = user;
+        const userRoleReferences = userChangedType.roles?.references || [];
+        return userRoleReferences.map(ref => ref.role.id);
+    }
+    getPermissionsOfAssignedGroups(user) {
+        const groups = user.groups?.references || [];
+        return groups.map(ref => {
+            const roleReferences = ref.group?.roles?.references || [];
+            const permissions = roleReferences.map(ref => ref.role.id);
+            return {
+                id: ref.group.id,
+                name: ref.group.name,
+                permissions
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, deps: [{ token: VersionService }, { token: AppStateService }, { token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: i1.ApplicationService }] });
+
+class VersionListComponent {
+    constructor(version, appState, clipboardService, modalService, platformDetails, headerService) {
+        this.version = version;
+        this.appState = appState;
+        this.clipboardService = clipboardService;
+        this.modalService = modalService;
+        this.platformDetails = platformDetails;
+        this.headerService = headerService;
+        this.versionsToDirectlyDisplay$ = this.version.nonHiddenItems$;
+        this.currentTenantId$ = this.appState.currentTenant.pipe(map(tenant => tenant?.name), filter(tenantId => !!tenantId), distinctUntilChanged());
+        this.open$ = this.headerService.rightDrawerOpen$;
+    }
+    async downloadPlatformDetails() {
+        const obj = await this.platformDetails.getPlatformDetailsObject();
+        const json = JSON.stringify(obj, undefined, 2);
+        const blob = new Blob([json]);
+        saveAs$1(blob, 'platform-details.json');
+    }
+    copyIt(text) {
+        this.clipboardService.writeText(text);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, deps: [{ token: VersionService }, { token: AppStateService }, { token: ClipboardService }, { token: i1$7.BsModalService }, { token: PlatformDetailsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VersionListComponent, isStandalone: true, selector: "c8y-version-list", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-version-list', standalone: true, imports: [IconDirective, NgIf, C8yTranslateDirective, NgFor, C8yTranslatePipe, AsyncPipe], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$7.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
+
+class VersionDrawerFactory {
+    constructor(options) {
+        this.options = options;
+        this.drawerItem = {
+            component: VersionListComponent,
+            position: 'right',
+            priority: 80,
+            id: 'platformInformation'
+        };
+    }
+    get() {
+        return this.shouldShowPlatformInformation$().pipe(distinctUntilChanged(), map(shouldShowPlatformInformation => {
+            if (shouldShowPlatformInformation) {
+                return this.drawerItem;
+            }
+            return [];
+        }));
+    }
+    shouldShowPlatformInformation$() {
+        return combineLatest([
+            this.options.get$('hidePowered'),
+            this.options.get$('hidePlatformInformation')
+        ]).pipe(map(([hidePowered, hidePlatformInformation]) => {
+            if (hidePlatformInformation === undefined) {
+                return !hidePowered;
+            }
+            return !hidePlatformInformation;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OptionsService }] });
+
 var ApplicationPluginStatus;
 (function (ApplicationPluginStatus) {
     ApplicationPluginStatus["ORPHANED"] = "ORPHANED";
@@ -21229,316 +21527,12 @@ class PluginsService {
         return { rawContextPath, contextPath, moduleName };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, deps: [{ token: i1.ApplicationService }, { token: AppStateService }, { token: i1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.ApplicationService }, { type: AppStateService }, { type: i1.FetchClient }] });
-
-class PluginsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, providers: [PluginsService] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: [PluginsService]
-                }]
-        }] });
-
-/**
- * An extension HOOK can use either a pure value:
- * ```typescript
- *  { provide: HOOK_X, useValue: { ...hookValue }, multi: true }
- * ```
- *
- * Or an array to directly register multiple:
- * ```typescript
- *  { provide: HOOK_X, useValue: [{ ...hookValues }], multi: true }
- * ```
- *
- * Or an ExtensionFactory which allows to define a get() function. This function
- * gets called on each navigation with the current route and can return values
- * async (observable or promise).
- * ```typescript
- *  { provide: HOOK_X, useFactory: { get: (route) => doSomethingAsync(route) }, multi: true }
- * ```
- * @deprecated Consider using the `hookVersion` function instead.
- */
-const HOOK_VERSION = new InjectionToken('HOOK_VERSION');
-const VERSION_MODULE_CONFIG = new InjectionToken('VERSION_MODULE_CONFIG');
-/**
- * You can either provide a single `Version` as parameter:
- * ```typescript
- *  hookVersion(...)
- * ```
- *
- * Or an array to directly register multiple:
- * ```typescript
- *  hookVersion([...])
- * ```
- *
- * Or you provide an Service that implements `ExtensionFactory<Version>`
- * ```typescript
- *  export class MyVersionFactory implements ExtensionFactory<Version> {...}
- *  ...
- *  hookVersion(MyVersionFactory)
- * ```
- * A typed alternative to `HOOK_VERSION`.
- * @param versions The `Version`'s or `ExtensionFactory` to be provided.
- * @returns An `Provider` to be provided in your module.
- */
-function hookVersion(versions, options) {
-    return hookGeneric(versions, HOOK_VERSION, options);
-}
-
-/**
- * Will provide the backend versions of the tenant.
- * The system option 'system' -> 'version' is used for this.
- */
-class BackendVersionFactory {
-    constructor(config, appState) {
-        this.config = config;
-        this.appState = appState;
-        this.backendVersion$ = of([]);
-        if (this.config?.disableBackendVersionFactory) {
-            return;
-        }
-        this.backendVersion$ = this.appState.state$.pipe(map(state => state?.versions?.backend), filter(backendVersion => !!backendVersion), distinctUntilChanged(), map(backendVersion => this.buildBackendVersion(backendVersion)), shareReplay(1));
-    }
-    get() {
-        return this.backendVersion$;
-    }
-    buildBackendVersion(backendVersion) {
-        return {
-            label: gettext$1('Backend'),
-            version: backendVersion,
-            priority: 20,
-            type: 'SYSTEM',
-            hidden: true
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, deps: [{ token: VERSION_MODULE_CONFIG, optional: true }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [VERSION_MODULE_CONFIG]
-                }] }, { type: AppStateService }] });
-
-class VersionService extends ExtensionPointForPlugins {
-    constructor(rootInjector, pluginService) {
-        super(rootInjector, pluginService);
-        this.items$ = this.setupItemsObservable();
-        this.nonHiddenItems$ = this.items$.pipe(map(versions => versions.filter(version => !version.hidden)));
-    }
-    get state() {
-        return this.state$.value;
-    }
-    add(version) {
-        this.state.add(version);
-        this.emitNewState();
-    }
-    remove(version) {
-        this.state.delete(version);
-        this.emitNewState();
-    }
-    cleanUpVersions(versions) {
-        return versions.map(version => pick(version, 'label', 'version', 'type', 'custom'));
-    }
-    setupItemsObservable() {
-        return fromTriggerOnce(undefined, this.refresh$, [
-            getInjectedHooks(HOOK_VERSION, this.injectors),
-            () => this.factories,
-            stateToFactory(this.state$)
-        ]).pipe(distinctUntilChanged(), map(versions => sortByPriority(versions)), shareReplay(1));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, deps: [{ token: i0.Injector }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }] });
-
-class PlatformDetailsService {
-    constructor(version, appState, apps) {
-        this.version = version;
-        this.appState = appState;
-        this.apps = apps;
-    }
-    async getPlatformDetailsObject() {
-        const currentUser = this.appState.currentUser.value;
-        const userId = currentUser?.id;
-        const userPermissions = this.getUserPermissions(currentUser);
-        const [hookedVersions, microserviceVersions] = await Promise.all([
-            this.getVersions(),
-            this.getMicroserviceVersions(userId)
-        ]);
-        const versions = [...hookedVersions, ...microserviceVersions];
-        const groupedVersions = groupBy(versions, 'type');
-        const tenantId = this.appState.currentTenant.value?.name;
-        // useful as `domainName` might be pointing to a custom domain
-        // self link should still allow to identify the actual environment of the tenant
-        const tenantSelfLink = this.appState.currentTenant.value?.self;
-        const tenantDomainName = this.appState.currentTenant.value?.domainName;
-        const applicationKey = this.appState.currentApplication.value?.key;
-        const applicationId = this.appState.currentApplication.value?.id;
-        const time = new Date().toISOString();
-        const url = document.URL;
-        const obj = {
-            time,
-            tenantId,
-            tenantSelfLink,
-            tenantDomainName,
-            url,
-            userId,
-            userPermissions,
-            applicationId,
-            applicationKey,
-            versions: groupedVersions
-        };
-        return obj;
-    }
-    async getVersions() {
-        const versions = await this.version.items$
-            .pipe(take(1), map(versions => this.version.cleanUpVersions(versions)))
-            .toPromise();
-        return versions;
-    }
-    async getMicroserviceVersions(userId) {
-        try {
-            const { data: apps } = await this.apps.listByUser(userId, {
-                pageSize: 2000,
-                dropOverwrittenApps: true,
-                noPaging: true
-            });
-            return apps
-                .filter(app => !!app.manifest?.version && app.type === ApplicationType.MICROSERVICE)
-                .map(app => {
-                return {
-                    label: app.name,
-                    version: app.manifest.version,
-                    type: app.type,
-                    custom: {
-                        owner: app.owner?.tenant?.id,
-                        provider: app.manifest?.provider
-                    }
-                };
-            });
-        }
-        catch (e) {
-            console.warn(e);
-            return [];
-        }
-    }
-    getUserPermissions(user) {
-        if (!user) {
-            return null;
-        }
-        const userPermissions = this.getDirectPermissionsOfUser(user);
-        const groupPermissions = this.getPermissionsOfAssignedGroups(user);
-        return { user: userPermissions, groups: groupPermissions };
-    }
-    getDirectPermissionsOfUser(user) {
-        const userChangedType = user;
-        const userRoleReferences = userChangedType.roles?.references || [];
-        return userRoleReferences.map(ref => ref.role.id);
-    }
-    getPermissionsOfAssignedGroups(user) {
-        const groups = user.groups?.references || [];
-        return groups.map(ref => {
-            const roleReferences = ref.group?.roles?.references || [];
-            const permissions = roleReferences.map(ref => ref.role.id);
-            return {
-                id: ref.group.id,
-                name: ref.group.name,
-                permissions
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, deps: [{ token: VersionService }, { token: AppStateService }, { token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: i1.ApplicationService }] });
-
-class VersionListComponent {
-    constructor(version, appState, clipboardService, modalService, platformDetails, headerService) {
-        this.version = version;
-        this.appState = appState;
-        this.clipboardService = clipboardService;
-        this.modalService = modalService;
-        this.platformDetails = platformDetails;
-        this.headerService = headerService;
-        this.versionsToDirectlyDisplay$ = this.version.nonHiddenItems$;
-        this.currentTenantId$ = this.appState.currentTenant.pipe(map(tenant => tenant?.name), filter(tenantId => !!tenantId), distinctUntilChanged());
-        this.open$ = this.headerService.rightDrawerOpen$;
-    }
-    async downloadPlatformDetails() {
-        const obj = await this.platformDetails.getPlatformDetailsObject();
-        const json = JSON.stringify(obj, undefined, 2);
-        const blob = new Blob([json]);
-        saveAs$1(blob, 'platform-details.json');
-    }
-    copyIt(text) {
-        this.clipboardService.writeText(text);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, deps: [{ token: VersionService }, { token: AppStateService }, { token: ClipboardService }, { token: i1$7.BsModalService }, { token: PlatformDetailsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VersionListComponent, isStandalone: true, selector: "c8y-version-list", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-version-list', standalone: true, imports: [IconDirective, NgIf, C8yTranslateDirective, NgFor, C8yTranslatePipe, AsyncPipe], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$7.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
-
-class VersionDrawerFactory {
-    constructor(options) {
-        this.options = options;
-        this.drawerItem = {
-            component: VersionListComponent,
-            position: 'right',
-            priority: 80,
-            id: 'platformInformation'
-        };
-    }
-    get() {
-        return this.shouldShowPlatformInformation$().pipe(distinctUntilChanged(), map(shouldShowPlatformInformation => {
-            if (shouldShowPlatformInformation) {
-                return this.drawerItem;
-            }
-            return [];
-        }));
-    }
-    shouldShowPlatformInformation$() {
-        return combineLatest([
-            this.options.get$('hidePowered'),
-            this.options.get$('hidePlatformInformation')
-        ]).pipe(map(([hidePowered, hidePlatformInformation]) => {
-            if (hidePlatformInformation === undefined) {
-                return !hidePowered;
-            }
-            return !hidePlatformInformation;
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: OptionsService }] });
+        }], ctorParameters: () => [{ type: i1.ApplicationService }, { type: AppStateService }, { type: i1.FetchClient }] });
 
 /**
  * Will provide the version of plugins installed to the current application.
@@ -22249,6 +22243,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());
@@ -22503,6 +22500,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{}]
         }] });
 
+class PasswordStrengthCheckerService {
+    constructor() {
+        this.GREEN = {
+            colorName: 'green',
+            color: 'rgb(0, 128, 0)',
+            description: gettext$1('strong'),
+            passwordStrength: PasswordStrength.GREEN
+        };
+        this.YELLOW = {
+            colorName: 'yellow',
+            color: 'rgb(255, 204, 51)',
+            description: gettext$1('medium'),
+            passwordStrength: PasswordStrength.YELLOW
+        };
+        this.RED = {
+            colorName: 'red',
+            color: 'rgb(170, 0, 51)',
+            description: gettext$1('weak'),
+            passwordStrength: PasswordStrength.RED
+        };
+    }
+    hasLowerCase(password) {
+        return password.search(/[a-z]/) !== -1;
+    }
+    hasUpperCase(password) {
+        return password.search(/[A-Z]/) !== -1;
+    }
+    hasNumbers(password) {
+        return password.search(/[0-9]/) !== -1;
+    }
+    hasSpecialChars(password) {
+        return password.search(/[^0-9a-zA-Z]+/) !== -1;
+    }
+    getStrengthColor(password) {
+        const passwordStrength = filter$2([
+            this.hasLowerCase(password),
+            this.hasUpperCase(password),
+            this.hasNumbers(password),
+            this.hasSpecialChars(password)
+        ]).length;
+        if (passwordStrength > 3) {
+            return this.GREEN;
+        }
+        else if (passwordStrength >= 3) {
+            return this.YELLOW;
+        }
+        else {
+            return this.RED;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * A drop-zone which is a file selector allowing users to select file(s) from their file system, either natively or by drag and drop.
  *
@@ -22540,6 +22595,7 @@ class DropAreaComponent {
         this.maxAllowedFiles = Infinity;
         this.isOver = false;
         this.errors = false;
+        this.disabled = false;
         this.onChange = _ => undefined;
         this.onTouched = () => undefined;
     }
@@ -22646,6 +22702,9 @@ class DropAreaComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     async onFilesSelected(files) {
         this.onTouched();
         const hasValidNameLength = this.filesService.checkMaxLength(files);
@@ -22785,11 +22844,11 @@ class DropAreaComponent {
         resolve(reader.result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FilesService }, { token: i1$1.TranslateService }, { token: BytesPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\" class=\"text-truncate\" title=\"{{ message | translate }}\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], standalone: true, imports: [CommonModule, C8yTranslatePipe, NgIf, NgClass, IconDirective], template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\" class=\"text-truncate\" title=\"{{ message | translate }}\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], standalone: true, imports: [CommonModule, C8yTranslatePipe, NgIf, NgClass, IconDirective], template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FilesService }, { type: i1$1.TranslateService }, { type: BytesPipe }, { type: i0.ElementRef }], propDecorators: { formControl: [{
                 type: Input
             }], title: [{
@@ -25056,6 +25115,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 +29459,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 +33724,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 +33796,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 +33886,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 +33915,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 +35127,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 +35161,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.