@c8y/ngx-components 1018.0.176 → 1018.0.186

package/fesm2020/c8y-ngx-components.mjs

@@ -23,7 +23,7 @@ import * as i1$1 from '@c8y/client';
 import { OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, ApplicationAvailability, FetchClient, Client, PasswordStrength, QueriesUtil, InventoryService, UserService, ApplicationService, TenantService, Service } from '@c8y/client';
 import { satisfies, compare, coerce } from 'semver';
 import * as i6 from 'ngx-bootstrap/datepicker';
-import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
 import { defineLocale, enGbLocale, zhCnLocale, ruLocale, ptBrLocale, plLocale, nlLocale, koLocale, jaLocale, frLocale, esLocale, deLocale } from 'ngx-bootstrap/chronos';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$4 from '@angular/platform-browser';
@@ -7159,7 +7159,7 @@ class CookieBannerService {
         return JSON.parse(localStorage.getItem(this.STORAGE_KEY));
     }
     /**
-     * Verifies that cookie preferences configuration is defined.
+     * Verifies that cookie preferences configuration is defined in the application options.
      * @returns {boolean} Returns if the cookie preferences configuration is defined.
      */
     isConfigCookiePreferencesDefined() {
@@ -7227,8 +7227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
  * tag and
  */
 class GainsightService {
-    constructor(document, appState, options, cookieBannerService, userPreferencesService, translateService) {
-        this.document = document;
+    constructor(appState, options, cookieBannerService, userPreferencesService, translateService) {
         this.appState = appState;
         this.options = options;
         this.cookieBannerService = cookieBannerService;
@@ -7238,6 +7237,11 @@ class GainsightService {
          * A subject that emits the tag function as soon as a new tag is set.
          */
         this.tagFunction$ = new BehaviorSubject(null);
+        this.trackingLoaded$ = new Subject();
+        /**
+         * Gainsight is activated only when the cookie banner is present. If functional cookies are enabled, both personally identifiable information (PII) and required data are sent.
+         * Otherwise, only the required data is transmitted during the identity step execution.
+         */
         this.USER_PREFERENCES_GAINSIGHT_KEY = 'gainsightEnabled';
         /**
          * The name of the key remained unchanged, but applies to all engagements.
@@ -7249,13 +7253,21 @@ class GainsightService {
         this.SCRIPT_EXECUTION_WAIT_TIME = 500;
         this.OPTIONS_KEY_CATEGORY = 'gainsight';
         this.OPTIONS_KEY_NAME = 'api.key';
-        this.ENGAGEMENTS = 'engagements';
         this.isScriptLoaded = false;
     }
+    /**
+     * Checks if the specified Gainsight preference is disabled in user preferences.
+     * @param preferenceName - Name of the Gainsight preference.
+     * @returns A promise that resolves to `true` if the preference is disabled, otherwise `false`.
+     */
     async isGainsightPreferenceDisabledInUserPreferences(preferenceName) {
         const userGainsightPref = await this.userPreferencesService.get(preferenceName).toPromise();
         return userGainsightPref === false;
     }
+    /**
+     * Sets the state of the functional cookie.
+     * @param value - A boolean value to indicate whether the functional cookie should be enabled (`true`) or disabled (`false`).
+     */
     setFunctionalCookie(value) {
         const cookies = this.cookieBannerService.getUserCookiePreferences();
         if (cookies) {
@@ -7284,56 +7296,119 @@ class GainsightService {
     /**
      * Load the script tag and calls the identify function to start the tracking.
      * @param currentTenant The current tenant.
-     * @param identify If set to false, only the tag is loaded.
+     * @param sendPiiData Flag for sending personally identifiable information (PII) during identification in Gainsight.
      */
-    async loadTag(currentTenant, identify = true) {
+    async loadTag(currentTenant, sendPiiData) {
         const scriptTag = document.createElement('script');
         const key = await this.getGainsightKey();
         if (key && !this.isScriptLoaded) {
             this.loadScriptTag(scriptTag, key);
-            combineLatest(this.appState.currentUser, fromEvent(scriptTag, 'load'), this.appState.state$.pipe(filter(({ versions }) => versions.backend), map(({ versions }) => versions), take(1)))
+            const currentUserStream = this.appState.currentUser;
+            const scriptLoadStream = fromEvent(scriptTag, 'load');
+            const versionStream = this.appState.state$.pipe(filter(({ versions }) => versions.backend), map(({ versions }) => versions), take(1));
+            const sourceStreams = sendPiiData
+                ? [currentUserStream, scriptLoadStream, versionStream]
+                : [currentUserStream, scriptLoadStream];
+            combineLatest(sourceStreams)
                 .pipe(delay(this.SCRIPT_EXECUTION_WAIT_TIME), filter(([user, scriptEvent]) => !!(scriptEvent && user)))
-                .subscribe(([user, , versions]) => {
+                .subscribe(args => {
+                const [user, , versions] = args;
+                this.setGlobalContext();
                 const instanceId = this.getInstanceIdFromUrl();
-                if (identify) {
-                    this.setGlobalContext();
-                    this.identify(user, currentTenant, instanceId, versions.ui.ngx, versions.backend);
+                if (sendPiiData) {
+                    const versionUI = versions.ui.ngx;
+                    const versionBE = versions.backend;
+                    const extendedIdentifyData = {
+                        user,
+                        currentTenant,
+                        instanceId,
+                        versionUI,
+                        versionBE
+                    };
+                    this.identify(sendPiiData, extendedIdentifyData);
+                }
+                else {
+                    const requiredIdentifyData = { user, currentTenant, instanceId };
+                    this.identify(sendPiiData, requiredIdentifyData);
                 }
                 this.isScriptLoaded = true;
                 this.tagFunction$.next(this.tagFunction);
+                this.trackingLoaded$.next(true);
             });
         }
     }
     /**
      * Identifies the user/account at Gainsight.
-     * @param user The user which is given to Gainsight.
-     * @param tenant The tenant which is given to Gainsight.
-     * @param versionUI The UI version used.
-     * @param versionBE The BE version used.
+     * @param sendPiiData Flag for sending personally identifiable information.
+     * @param identifyData Object containing identification data.
      */
-    identify(user, tenant, instanceId, versionUI, versionBE) {
+    identify(sendPiiData, identifyData) {
         const windowRef = window;
-        const { id: userId, email, userName, firstName, lastName, roles } = user;
-        const { name, customProperties, domainName } = tenant;
-        const { externalReference } = customProperties || {};
-        windowRef[this.GAINSIGHT_GLOBAL_SCOPE]('identify', {
-            id: `${userId}_${name}_${instanceId}`,
-            email,
-            userName,
-            firstName,
-            lastName,
-            domainName,
-            versionUI,
-            versionBE,
-            userLanguage: this.translateService.currentLang,
-            instanceId,
-            externalReference,
-            userRoles: this.transformUserRolesToStr(roles?.references)
-        }, {
-            id: `${name}_${instanceId}`,
-            instanceId
-        });
+        const { id: userId, email } = identifyData.user;
+        const { name: tenantID } = identifyData.currentTenant;
+        const { instanceId } = identifyData;
+        /**
+         * Passing ID is a minimum required data to make an identify call to Gainsight.
+         * isUserCreatedAfterAnonymizationWasActivated parameter is passed to later distinguish between users created before and after data anonymization done by Gainsight.
+         * tenantID Used to distinguish between tenants when same email is used for different tenants.
+         *
+         * Due to GS limitations (GS does not allow clearing user attr/preferences via the GS tag!),
+         * we always need to initialize fields related to PII to prevent leaking this data to GS when the user has disabled functional cookies.
+         */
+        const requiredIdentify = {
+            /**
+             * Email was not mandatory form field until 10.14
+             */
+            id: email ? email : `${userId}_${tenantID}_${instanceId}`,
+            isUserCreatedAfterAnonymizationWasActivated: true,
+            tenantID: tenantID,
+            email: '--',
+            userName: '',
+            firstName: '',
+            lastName: '',
+            domainName: '',
+            versionUI: '',
+            versionBE: '',
+            userLanguage: '',
+            instanceId: '',
+            externalReference: '',
+            userRoles: '',
+            customBranding: this.isCustomBranding(),
+            fullTracking: sendPiiData
+        };
+        if (sendPiiData) {
+            const { userName, firstName, lastName, roles } = identifyData.user;
+            const { customProperties, domainName } = identifyData.currentTenant;
+            const { versionUI, versionBE } = identifyData;
+            const extendedIdentify = {
+                ...requiredIdentify,
+                email,
+                userName,
+                firstName,
+                lastName,
+                domainName,
+                versionUI,
+                versionBE,
+                userLanguage: this.translateService.currentLang,
+                instanceId,
+                externalReference: customProperties?.externalReference,
+                userRoles: this.transformUserRolesToStr(roles?.references)
+            };
+            windowRef[this.GAINSIGHT_GLOBAL_SCOPE]('identify', extendedIdentify, {
+                id: `${tenantID}_${instanceId}`,
+                instanceId
+            });
+            return;
+        }
+        windowRef[this.GAINSIGHT_GLOBAL_SCOPE]('identify', requiredIdentify);
     }
+    /**
+     * Triggers an event to be recorded by Gainsight PX.
+     * This method calls the Gainsight PX's tracking mechanism to log a specific event
+     * along with its associated properties.
+     * @param eventName - Name of the event to be triggered.
+     * @param props - Optional properties associated with the event.
+     */
     triggerEvent(eventName, props) {
         if (this.tagFunction && eventName) {
             eventName = this.prepareEventName(eventName);
@@ -7355,38 +7430,51 @@ class GainsightService {
         return this.getEnTranslation(textToTranslate, this.cachedRevertedTranslations);
     }
     /**
-     * Checks if the Gainsight's tag should be loaded.
-     * The decision to load Gainsight will depend on custom properties and functional cookies.
-     * @param customProperties Tenant's customProperties.
+     * Determines whether personally identifiable information (PII) should be sent while loading a tag.
+     * The decision to activate Gainsight and send PII relies on whether the cookiePreferences option is defined in the application settings,
+     * if the functional cookie is enabled, and if the user grants permission.
      */
-    shouldLoadGainsightTag(customProperties) {
+    async shouldSendPiiData() {
         return (this.cookieBannerService.isConfigCookiePreferencesDefined() &&
             this.cookieBannerService.isFunctionalCookieEnabled() &&
-            !this.isGainsightDisabled(customProperties) &&
-            !this.isCustomBranding());
+            !(await this.isGainsightPreferenceDisabledInUserPreferences(this.USER_PREFERENCES_GAINSIGHT_KEY)));
     }
+    /**
+     * Updates a specific user attribute in the Gainsight global scope.
+     * This method interfaces with the Gainsight global object to set a user's specific attribute with a provided value.
+     * @param name - Name of the user attribute to be updated.
+     * @param value - Value to set for the specified user attribute.
+     */
     updateUserAttribute(name, value) {
         window[this.GAINSIGHT_GLOBAL_SCOPE]?.('set', 'user', { [name]: value });
     }
+    /**
+     * Determines if the current user has the capability to modify Gainsight PX settings.
+     *
+     * This method checks multiple conditions:
+     * 1. Whether tracking has been disabled globally via application options.
+     * 2. Whether Gainsight is disabled at the tenant level through custom properties.
+     * 3. Whether a Gainsight key is available, either currently loaded or fetched asynchronously.
+     * 4. Whether cookie preferences are defined and available for the user.
+     *
+     * @returns Promise that resolves to a boolean. True indicates the user can edit product experience settings, and false otherwise.
+     */
     async canEditProductExperienceSettings() {
         const currentTenant = this.appState.currentTenant.value;
         const { customProperties } = currentTenant;
+        if (this.isTrackingDisabled() ||
+            this.isGainsightDisabledAtTenantCustomProperties(customProperties)) {
+            return false;
+        }
         const gainsightKey = !!this.gainsightKey || !!(await this.getGainsightKey());
         return (gainsightKey &&
             this.cookieBannerService.isConfigCookiePreferencesDefined() &&
-            !this.isGainsightDisabled(customProperties) &&
-            !!this.cookieBannerService.getUserCookiePreferences() &&
-            !this.isCustomBranding());
-    }
-    switchGainsightEngagementsVisibility(showGainsightEngagements) {
-        if (showGainsightEngagements) {
-            this.removeHidingStyle(this.HIDE_GAINSIGHT_BOT_STYLE_ID);
-            this.updateUserAttribute(this.ENGAGEMENTS, true);
-            return;
-        }
-        this.addHidingStyle(this.HIDE_GAINSIGHT_BOT_STYLE_ID, '#apt-widget { display:none }');
-        this.updateUserAttribute(this.ENGAGEMENTS, false);
+            !!this.cookieBannerService.getUserCookiePreferences());
     }
+    /**
+     * Sets the global context for Gainsight with the current application name.
+     * The global context can be utilized by Gainsight for various purposes, such as segmenting users.
+     */
     setGlobalContext() {
         const currentAppState = this.appState.state$.value;
         const currentAppName = currentAppState.app.name;
@@ -7398,18 +7486,31 @@ class GainsightService {
         }
         return flatMap(userRoles, (userRole) => userRole.role.name).join();
     }
-    addHidingStyle(styleId, textContent) {
-        if (this.document.getElementById(styleId)) {
-            return;
-        }
-        const style = this.document.createElement('style');
-        style.id = styleId;
-        style.textContent = textContent;
-        this.document.head.appendChild(style);
+    /**
+     * Checks if Gainsight is disabled based on tenant custom properties.
+     *
+     * @param customProperties - The custom properties of the tenant.
+     * @returns {boolean} - True if Gainsight is disabled, false otherwise.
+     */
+    isGainsightDisabledAtTenantCustomProperties(customProperties) {
+        const gainsightEnabled = customProperties && customProperties.gainsightEnabled;
+        return gainsightEnabled === false;
     }
-    removeHidingStyle(styleId) {
-        const style = this.document.getElementById(styleId);
-        style?.remove();
+    /**
+     * Determines if custom branding is enabled based on the presence of a brand logo.
+     *
+     * @returns {boolean} - True if custom branding is applied, false otherwise.
+     */
+    isCustomBranding() {
+        const brandingCssVars = this.options.get('brandingCssVars') || {};
+        return !!brandingCssVars['brand-logo-img'];
+    }
+    /**
+     * Determines if tracking is disabled based on the application options.
+     * @returns `true` if tracking is disabled, otherwise `false`.
+     */
+    isTrackingDisabled() {
+        return this.options.disableTracking === true;
     }
     prepareEventName(baseEventName) {
         return baseEventName
@@ -7420,14 +7521,6 @@ class GainsightService {
             return eventNamePart.replace(/`[\w\W]*`/g, '');
         }
     }
-    isGainsightDisabled(customProperties) {
-        const gainsightEnabled = customProperties && customProperties.gainsightEnabled;
-        return gainsightEnabled === false;
-    }
-    isCustomBranding() {
-        const brandingCssVars = this.options.get('brandingCssVars') || {};
-        return !!brandingCssVars['brand-logo-img'];
-    }
     loadScriptTag(scriptTag, key) {
         try {
             const windowRef = window;
@@ -7490,17 +7583,14 @@ class GainsightService {
         return enTranslation;
     }
 }
-GainsightService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GainsightService, deps: [{ token: DOCUMENT }, { token: AppStateService }, { token: OptionsService }, { token: CookieBannerService }, { token: UserPreferencesService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+GainsightService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GainsightService, deps: [{ token: AppStateService }, { token: OptionsService }, { token: CookieBannerService }, { token: UserPreferencesService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 GainsightService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GainsightService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GainsightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: DOCUMENT, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: AppStateService }, { type: OptionsService }, { type: CookieBannerService }, { type: UserPreferencesService }, { type: i1$2.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: AppStateService }, { type: OptionsService }, { type: CookieBannerService }, { type: UserPreferencesService }, { type: i1$2.TranslateService }]; } });
 
 /**
  * Use this token for components that can provide product experience events.
@@ -7733,53 +7823,236 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             args: [{ selector: 'c8y-app-switcher', template: "<div\n  class=\"app-switcher-dropdown\"\n  dropdown\n  #appSwitcherDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    type=\"button\"\n    title=\"{{ 'Application switcher' | translate }}\"\n    id=\"appSwitcherDropdown\"\n    dropdownToggle\n  >\n    <i c8yIcon=\"th\" class=\"icon-2x\"></i>\n  </button>\n  <div\n    *dropdownMenu\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n  >\n    <div\n      *ngIf=\"!(switcherService.finishedLoading$ | async)\"\n      class=\"d-flex a-i-center j-c-center p-4\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n    <ng-container *ngIf=\"switcherService.oneCloudApps$ | async as oneCloudApps\">\n      <div class=\"app-switcher-sagcloud\" *ngIf=\"oneCloudApps.length > 0\">\n        <a\n          title=\"{{ app.name | humanizeAppName | async }}\"\n          class=\"appLink\"\n          *ngFor=\"let app of oneCloudApps\"\n          [href]=\"app | appHref\"\n          c8yProductExperience\n          [actionName]=\"'appSwitched'\"\n          [actionData]=\"{ applicationName: app && app.name }\"\n        >\n          <c8y-app-icon\n            [app]=\"app\"\n            [name]=\"app.name\"\n            [contextPath]=\"app.contextPath\"\n          ></c8y-app-icon>\n          <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n        </a>\n      </div>\n    </ng-container>\n    <div class=\"app-switcher\" *ngIf=\"switcherService.apps$ | async as apps\">\n      <a\n        title=\"{{ app.name | humanizeAppName | async }}\"\n        class=\"appLink\"\n        [ngClass]=\"(app | isActiveApp | async) ? 'active' : ''\"\n        *ngFor=\"let app of apps\"\n        [href]=\"app | appHref\"\n        [rel]=\"app.type === 'EXTERNAL' ? 'noopener noreferrer' : ''\"\n        c8yProductExperience\n        [actionName]=\"'appSwitched'\"\n        [actionData]=\"{ applicationName: app && app.name }\"\n      >\n        <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n        <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AppSwitcherService }]; } });
 
+class UserEngagementsService {
+    constructor(document, userPreferencesService, gainsightService) {
+        this.document = document;
+        this.userPreferencesService = userPreferencesService;
+        this.gainsightService = gainsightService;
+        this.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY = 'gainsightBotEnabled';
+        this.userEngagementsEnabled$ = new BehaviorSubject(false);
+        this.HIDE_GAINSIGHT_BOT_STYLE_ID = 'hide-gs-bot';
+        this.ENGAGEMENTS = 'engagements';
+        this.handleUserEngagements();
+    }
+    /**
+     * Handles user engagement settings based on various conditions.
+     *
+     * - Waits for the Gainsight tracking to be loaded.
+     * - Retrieves the engagement settings.
+     * - Updates the engagement settings based on the combined observations.
+     * - Finally, toggles the Gainsight engagements based on the latest `userEngagementsEnabled$` value.
+     */
+    handleUserEngagements() {
+        this.gainsightService.trackingLoaded$
+            .pipe(take(1), switchMap(() => this.getEngagementSettingsObservable()), tap((settings) => this.updateUserEngagementSettings(...settings)), switchMap(() => this.userEngagementsEnabled$.pipe(take(1))))
+            .subscribe(isEnabled => this.toggleGainsightEngagements(isEnabled));
+    }
+    /**
+     * Updates the user's preference for Gainsight Engagements.
+     * @param {boolean} isEnabled - The new value for the user's engagement preference.
+     */
+    updateUserEngagementPreference(isEnabled) {
+        this.userEngagementsEnabled$.next(isEnabled);
+        this.userPreferencesService.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY, this.userEngagementsEnabled$.value);
+    }
+    /**
+     * Toggles the visibility of Gainsight Engagements based on the provided flag.
+     *
+     * @param isEnabled - A flag indicating whether Gainsight Engagements should be visible.
+     */
+    toggleGainsightEngagements(isEnabled) {
+        isEnabled ? this.showGainsightEngagements() : this.hideGainsightEngagements();
+    }
+    /**
+     * Constructs an observable that emits an array of boolean values representing
+     * the current engagement settings. The observable combines the latest values from:
+     *
+     * 1. User's preferences for Gainsight engagements.
+     * 2. A flag indicating if PII data should be sent.
+     * 3. A flag indicating if the platform uses custom branding.
+     *
+     * @returns An observable emitting an array of boolean values.
+     */
+    getEngagementSettingsObservable() {
+        return combineLatest([
+            this.userPreferencesService.observe(this.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY),
+            from(this.gainsightService.shouldSendPiiData()),
+            of(this.gainsightService.isCustomBranding())
+        ]);
+    }
+    /**
+     * Updates user engagement settings based on provided preferences and settings.
+     *
+     * Based on the received values, the method decides to:
+     * 1. Disable user engagements if PII data should not be shared or certain branding/settings conditions are met.
+     * 2. Update the user engagement preference if the user engagement bot setting is undefined.
+     *
+     * @param userEngagementBotSetting - The user's setting for the engagement bot.
+     * @param shouldSendPiiData - Indicates whether PII data should be shared.
+     * @param hasCustomBranding - Indicates if custom branding is applied.
+     */
+    updateUserEngagementSettings(userEngagementBotSetting, shouldSendPiiData, hasCustomBranding) {
+        if (this.shouldDisableUserEngagementsDueToPIIData(shouldSendPiiData)) {
+            this.userEngagementsEnabled$.next(false);
+        }
+        else if (this.isUserEngagementBotSettingUndefined(userEngagementBotSetting)) {
+            /**
+             * Case where the user is new (freshly created) and has not changed the user engagement settings in the user edit modal (untouched state).
+             * When custom branding is not set, we will set the user engagements in the user preferences to true by default.
+             */
+            this.updateUserEngagementPreference(!hasCustomBranding);
+        }
+        else {
+            this.userEngagementsEnabled$.next(userEngagementBotSetting);
+        }
+    }
+    /**
+     * Determines whether user engagements should be disabled due to PII data settings.
+     *
+     * If the `shouldSendPiiData` parameter is false, this indicates that the user engagements
+     * should be disabled to prevent sharing personally identifiable information.
+     *
+     * @param {boolean} shouldSendPiiData - Indicates whether PII data is allowed to be sent.
+     * @returns {boolean} Returns true if user engagements should be disabled, otherwise false.
+     */
+    shouldDisableUserEngagementsDueToPIIData(shouldSendPiiData) {
+        return !shouldSendPiiData;
+    }
+    /**
+     * Determines if the user engagement bot setting is undefined.
+     *
+     * @param {boolean | undefined} userEngagementBotSetting - The setting value to check.
+     * @returns {boolean} Returns `true` if the setting is undefined; otherwise, `false`.
+     *
+     * This scenario occurs when a user is new and hasn't modified the bot settings in the user details UI yet.
+     */
+    isUserEngagementBotSettingUndefined(userEngagementBotSetting) {
+        return userEngagementBotSetting === undefined;
+    }
+    /**
+     * Enables the visibility of Gainsight engagements.
+     *
+     * This method removes the CSS styles that hide the Gainsight engagements
+     * and updates the relevant user attribute to mark the engagements as visible.
+     */
+    showGainsightEngagements() {
+        this.removeHidingStyle(this.HIDE_GAINSIGHT_BOT_STYLE_ID);
+        this.gainsightService.updateUserAttribute(this.ENGAGEMENTS, true);
+    }
+    /**
+     * Hides the Gainsight engagements.
+     *
+     * This method applies CSS styles to hide the Gainsight engagements
+     * and updates the relevant user attribute to mark the engagements as hidden.
+     */
+    hideGainsightEngagements() {
+        this.addHidingStyle(this.HIDE_GAINSIGHT_BOT_STYLE_ID, '#apt-widget { display:none }');
+        this.gainsightService.updateUserAttribute(this.ENGAGEMENTS, false);
+    }
+    /**
+     * Removes the specified CSS style from the document.
+     *
+     * @param {string} styleId - The ID of the CSS style element to remove.
+     */
+    removeHidingStyle(styleId) {
+        const style = this.document.getElementById(styleId);
+        style?.remove();
+    }
+    /**
+     * Adds a new CSS style to the document.
+     *
+     * If the style with the specified ID already exists, the method will do nothing.
+     * Otherwise, it creates a new `<style>` element with the given ID and content,
+     * then appends it to the document head.
+     *
+     * @param {string} styleId - The ID to assign to the new style element.
+     * @param {string} textContent - The CSS rules to be included in the style.
+     */
+    addHidingStyle(styleId, textContent) {
+        if (this.document.getElementById(styleId)) {
+            return;
+        }
+        const style = this.document.createElement('style');
+        style.id = styleId;
+        style.textContent = textContent;
+        this.document.head.appendChild(style);
+    }
+}
+UserEngagementsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEngagementsService, deps: [{ token: DOCUMENT }, { token: UserPreferencesService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable });
+UserEngagementsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEngagementsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEngagementsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: DOCUMENT, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: UserPreferencesService }, { type: GainsightService }]; } });
+
 /**
  * This module enables an tenant to activate the product experience
  * software [Gainsight](https://www.gainsight.com/product-experience/) to help
- * and track user actions. Gainsight is only activated, if the tenant custom
- * property `gainsightEnabled` is set to true.
+ * and track user actions.
  */
 class ProductExperienceModule {
-    constructor(appState, gainsightService, cookieBannerService, userPreferencesService) {
+    constructor(appState, gainsightService, cookieBannerService, 
+    // Don't remove it, otherwise UserEngagementsService won't be initialized.
+    userEngagementsService) {
         this.appState = appState;
         this.gainsightService = gainsightService;
         this.cookieBannerService = cookieBannerService;
-        this.userPreferencesService = userPreferencesService;
+        this.userEngagementsService = userEngagementsService;
+        /**
+         * Check if the Gainsight tracking is disabled in the application apptions. If so, exit early without processing further.
+         */
+        if (this.gainsightService.isTrackingDisabled()) {
+            return;
+        }
+        this.toggleUserTrackingObservable();
+    }
+    /**
+     * Observes several factors to determine the state of user tracking and manages the visibility of Gainsight engagements.
+     * It watches for changes in the current tenant, the state of the cookie banner, and user's preferences for Gainsight engagements.
+     *
+     * 1. If the cookie banner is being displayed, it returns without making any changes.
+     * 2. If Gainsight is disabled at the tenant level via custom properties, it returns without making any changes.
+     * 3. If the conditions are met for loading the Gainsight tag, it loads the tag.
+     */
+    toggleUserTrackingObservable() {
         combineLatest([
             this.appState.currentTenant.pipe(filter(Boolean)),
-            this.cookieBannerService.isCookieBannerShowed$,
-            this.userPreferencesService.observe(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY)
-        ]).subscribe(async ([currentTenant, isCookieBannerShowed, showGainsightEngagements]) => {
+            this.cookieBannerService.isCookieBannerShowed$
+        ]).subscribe(async ([currentTenant, isCookieBannerShowed]) => {
             if (isCookieBannerShowed) {
                 return;
             }
             const { customProperties } = currentTenant;
-            if (this.gainsightService.shouldLoadGainsightTag(customProperties) &&
-                !(await this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY))) {
-                this.gainsightService.loadTag(currentTenant);
+            if (this.gainsightService.isGainsightDisabledAtTenantCustomProperties(customProperties)) {
+                return;
             }
-            /**
-             * In case the user preference for Gainsight bot does not exist the default value is set to true and saved in user preferences
-             */
-            if (showGainsightEngagements === undefined) {
-                showGainsightEngagements = true;
-                userPreferencesService.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY, showGainsightEngagements);
+            if (this.shouldLoadTag()) {
+                await this.gainsightService.loadTag(currentTenant, await this.gainsightService.shouldSendPiiData());
             }
-            this.gainsightService.switchGainsightEngagementsVisibility(showGainsightEngagements);
         });
     }
+    /**
+     * Determines if a tracking tag should be loaded based on cookie preferences.
+     * @returns `true` if user cookie preferences exist, otherwise `false`.
+     */
+    shouldLoadTag() {
+        return !!this.cookieBannerService.getUserCookiePreferences();
+    }
 }
-ProductExperienceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ProductExperienceModule, deps: [{ token: AppStateService }, { token: GainsightService }, { token: CookieBannerService }, { token: UserPreferencesService }], target: i0.ɵɵFactoryTarget.NgModule });
+ProductExperienceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ProductExperienceModule, deps: [{ token: AppStateService }, { token: GainsightService }, { token: CookieBannerService }, { token: UserEngagementsService }], target: i0.ɵɵFactoryTarget.NgModule });
 ProductExperienceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ProductExperienceModule, declarations: [ProductExperienceDirective], exports: [ProductExperienceDirective] });
-ProductExperienceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ProductExperienceModule, providers: [GainsightService] });
+ProductExperienceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ProductExperienceModule, providers: [GainsightService, UserEngagementsService] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ProductExperienceModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProductExperienceDirective],
                     exports: [ProductExperienceDirective],
-                    providers: [GainsightService]
+                    providers: [GainsightService, UserEngagementsService]
                 }]
-        }], ctorParameters: function () { return [{ type: AppStateService }, { type: GainsightService }, { type: CookieBannerService }, { type: UserPreferencesService }]; } });
+        }], ctorParameters: function () { return [{ type: AppStateService }, { type: GainsightService }, { type: CookieBannerService }, { type: UserEngagementsService }]; } });
 
 class ApplicationModule {
 }
@@ -17921,7 +18194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
         }], ctorParameters: function () { return [{ type: i1$1.UserService }, { type: ModalService }, { type: i1$8.BsModalRef }, { type: LoginService }]; } });
 
 class UserEditComponent {
-    constructor(state, translate, bsModalService, alert, userService, tenantLoginOptionsService, tenantService, userPreferencesService, gainsightService) {
+    constructor(state, translate, bsModalService, alert, userService, tenantLoginOptionsService, tenantService) {
         this.state = state;
         this.translate = translate;
         this.bsModalService = bsModalService;
@@ -17929,15 +18202,13 @@ class UserEditComponent {
         this.userService = userService;
         this.tenantLoginOptionsService = tenantLoginOptionsService;
         this.tenantService = tenantService;
-        this.userPreferencesService = userPreferencesService;
-        this.gainsightService = gainsightService;
         this.loading = false;
-        this.showProductUsageSetting = false;
+        this.showProductExperienceOptions = false;
         this.isUsageTrackingEnabled = true;
-        this.isGainsightEngagementsEnabled = true;
+        this.isUserEngagementPreferenceEnabled = true;
         this.onUser = new EventEmitter();
-        this.onProductExperience = new EventEmitter();
-        this.onGainsightEngagements = new EventEmitter();
+        this.onUsageTrackingChange = new EventEmitter();
+        this.onUserEngagementPreferenceChange = new EventEmitter();
         this.onCancel = new EventEmitter();
         this.userHasActiveTotp = false;
         this.userCanSetupTotp = false;
@@ -17962,13 +18233,6 @@ class UserEditComponent {
             this.isPhoneRequired = true;
         }
     }
-    async onEnablingProductUsageTracking(isUsageTrackingEnabled) {
-        if (isUsageTrackingEnabled && this.isGainsightEngagementsEnabled === undefined) {
-            this.isGainsightEngagementsEnabled = await this.userPreferencesService
-                .get(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY)
-                .toPromise();
-        }
-    }
     setupTotp() {
         this.bsModalService.show(UserTotpSetupComponent, {
             class: 'modal-sm',
@@ -17984,9 +18248,13 @@ class UserEditComponent {
         if (this.loading) {
             return;
         }
-        if (this.showProductUsageSetting) {
-            this.onProductExperience.emit(this.isUsageTrackingEnabled);
-            this.onGainsightEngagements.emit(this.isGainsightEngagementsEnabled);
+        if (this.showProductExperienceOptions) {
+            this.onUsageTrackingChange.emit(this.isUsageTrackingEnabled);
+            /**
+             * Emits a user engagement preference change event.
+             * If usage tracking is disabled, it emits `false`. Otherwise, it emits the current state of the user engagement preference.
+             */
+            this.onUserEngagementPreferenceChange.emit(this.isUsageTrackingEnabled === false ? false : this.isUserEngagementPreferenceEnabled);
         }
         this.onUser.emit(this._user);
     }
@@ -18011,33 +18279,33 @@ class UserEditComponent {
         return loginOptions.some(({ tfaStrategy = '' }) => tfaStrategy.toLowerCase() === 'totp');
     }
 }
-UserEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEditComponent, deps: [{ token: AppStateService }, { token: TranslateService }, { token: i1$8.BsModalService }, { token: AlertService }, { token: i1$1.UserService }, { token: i1$1.TenantLoginOptionsService }, { token: i1$1.TenantService }, { token: UserPreferencesService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-UserEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UserEditComponent, selector: "c8y-user-edit", inputs: { loading: "loading", user: "user", showProductUsageSetting: "showProductUsageSetting", isUsageTrackingEnabled: "isUsageTrackingEnabled", isGainsightEngagementsEnabled: "isGainsightEngagementsEnabled" }, outputs: { onUser: "onUser", onProductExperience: "onProductExperience", onGainsightEngagements: "onGainsightEngagements", onCancel: "onCancel" }, ngImport: i0, template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductUsageSetting\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          (change)=\"onEnablingProductUsageTracking(isUsageTrackingEnabled)\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable tracking to enhance the product experience' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"gainsightEngagements\">\n          <input\n            id=\"gainsightEngagements\"\n            name=\"gainsightEngagements\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isGainsightEngagementsEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NewPasswordComponent, selector: "c8y-new-password", outputs: ["password"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
+UserEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEditComponent, deps: [{ token: AppStateService }, { token: TranslateService }, { token: i1$8.BsModalService }, { token: AlertService }, { token: i1$1.UserService }, { token: i1$1.TenantLoginOptionsService }, { token: i1$1.TenantService }], target: i0.ɵɵFactoryTarget.Component });
+UserEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UserEditComponent, selector: "c8y-user-edit", inputs: { loading: "loading", user: "user", showProductExperienceOptions: "showProductExperienceOptions", isUsageTrackingEnabled: "isUsageTrackingEnabled", isUserEngagementPreferenceEnabled: "isUserEngagementPreferenceEnabled" }, outputs: { onUser: "onUser", onUsageTrackingChange: "onUsageTrackingChange", onUserEngagementPreferenceChange: "onUserEngagementPreferenceChange", onCancel: "onCancel" }, ngImport: i0, template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NewPasswordComponent, selector: "c8y-new-password", outputs: ["password"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-user-edit', template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductUsageSetting\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          (change)=\"onEnablingProductUsageTracking(isUsageTrackingEnabled)\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable tracking to enhance the product experience' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"gainsightEngagements\">\n          <input\n            id=\"gainsightEngagements\"\n            name=\"gainsightEngagements\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isGainsightEngagementsEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: function () { return [{ type: AppStateService }, { type: TranslateService }, { type: i1$8.BsModalService }, { type: AlertService }, { type: i1$1.UserService }, { type: i1$1.TenantLoginOptionsService }, { type: i1$1.TenantService }, { type: UserPreferencesService }, { type: GainsightService }]; }, propDecorators: { loading: [{
+            args: [{ selector: 'c8y-user-edit', template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: function () { return [{ type: AppStateService }, { type: TranslateService }, { type: i1$8.BsModalService }, { type: AlertService }, { type: i1$1.UserService }, { type: i1$1.TenantLoginOptionsService }, { type: i1$1.TenantService }]; }, propDecorators: { loading: [{
                 type: Input
             }], user: [{
                 type: Input
-            }], showProductUsageSetting: [{
+            }], showProductExperienceOptions: [{
                 type: Input
             }], isUsageTrackingEnabled: [{
                 type: Input
-            }], isGainsightEngagementsEnabled: [{
+            }], isUserEngagementPreferenceEnabled: [{
                 type: Input
             }], onUser: [{
                 type: Output
-            }], onProductExperience: [{
+            }], onUsageTrackingChange: [{
                 type: Output
-            }], onGainsightEngagements: [{
+            }], onUserEngagementPreferenceChange: [{
                 type: Output
             }], onCancel: [{
                 type: Output
             }] } });
 
 class UserEditModalComponent {
-    constructor(modal, user, ui, auth, client, alert, userPreferences, c8yModalService, gainsightService, cookieBannerService, loginService, passwordService) {
+    constructor(modal, user, ui, auth, client, alert, userPreferences, c8yModalService, gainsightService, cookieBannerService, loginService, passwordService, userEngagementsService) {
         this.modal = modal;
         this.user = user;
         this.ui = ui;
@@ -18050,29 +18318,43 @@ class UserEditModalComponent {
         this.cookieBannerService = cookieBannerService;
         this.loginService = loginService;
         this.passwordService = passwordService;
+        this.userEngagementsService = userEngagementsService;
         this.loading = false;
-        this.showProductUsageSetting = false;
+        this.showProductExperienceOptions = false;
     }
     async ngOnInit() {
         this.updateUserInAppState();
-        this.showProductUsageSetting = await this.gainsightService.canEditProductExperienceSettings();
-        if (this.showProductUsageSetting) {
-            if (this.cookieBannerService.isFunctionalCookieEnabled()) {
-                this.currentUsageTrackingState =
-                    !(await this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY));
-                this.currentGainsightEngagementsState =
-                    !(await this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY));
-            }
+        await this.setInitialProductExperienceOptions();
+    }
+    /**
+     * Initializes product experience options for the user.
+     *
+     * This function performs the following operations:
+     * - Determines if the user has the permission to edit product experience options.
+     * - If the user has the permission and functional cookies are enabled:
+     *   - Checks whether personalized product experience tracking is active.
+     *   - Checks whether in-product information and communication is active.
+     */
+    async setInitialProductExperienceOptions() {
+        this.showProductExperienceOptions =
+            await this.gainsightService.canEditProductExperienceSettings();
+        if (this.showProductExperienceOptions && this.cookieBannerService.isFunctionalCookieEnabled()) {
+            // Enable personalized product experience tracking option
+            this.currentUsageTrackingState =
+                !(await this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY));
+            // Enable in-product information & communication option
+            this.currentUserEngagementPreferenceInitialState =
+                this.userEngagementsService.userEngagementsEnabled$.value;
         }
     }
     async onDismiss() {
         this.modal.hide();
     }
-    onProductExperience(option) {
-        this.usageTrackingState = option;
+    onUsageTrackingChange(isEnabled) {
+        this.usageTrackingState = isEnabled;
     }
-    onGainsightEngagements(option) {
-        this.gainsightEngagementsState = option;
+    onUserEngagementPreferenceChange(isEnabled) {
+        this.userEngagementPreferenceNewState = isEnabled;
     }
     async updateAndClose(user) {
         this.loading = true;
@@ -18090,16 +18372,7 @@ class UserEditModalComponent {
                     this.updateCredentials(user.password);
                 }
             }
-            if (this.currentGainsightEngagementsState !== this.gainsightEngagementsState) {
-                await this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY, this.gainsightEngagementsState);
-            }
-            if (this.currentUsageTrackingState !== this.usageTrackingState) {
-                await this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY, this.usageTrackingState);
-                this.gainsightService.setFunctionalCookie(this.usageTrackingState);
-                this.usageTrackingState
-                    ? await this.gainsightService.loadTag(this.client.tenant)
-                    : await this.gainsightTrackingAppReload();
-            }
+            await this.updateProductExperienceOptions();
             if (user.customProperties.userOrigin !== 'OAUTH2') {
                 await this.user.updateCurrent(omit(user, 'password'));
                 await this.updateUserInAppState();
@@ -18128,6 +18401,34 @@ class UserEditModalComponent {
             // do nothing
         }
     }
+    async updateProductExperienceOptions() {
+        this.updateUserEngagementsPreference();
+        await this.updateTrackingOption();
+    }
+    /**
+     * Updates the user engagement preference if it has changed from the initial state.
+     * Calls the user engagements service to update the preference.
+     *
+     * The update only occurs if the current preference differs from the new state.
+     */
+    updateUserEngagementsPreference() {
+        if (this.currentUserEngagementPreferenceInitialState !== this.userEngagementPreferenceNewState) {
+            this.userEngagementsService.updateUserEngagementPreference(this.userEngagementPreferenceNewState);
+        }
+    }
+    /**
+     * Asynchronously updates the tracking option for user preferences.
+     * If the current usage tracking state differs from the new state,
+     * it updates the Gainsight preferences and sets a functional cookie
+     * before triggering a reload of the application.
+     */
+    async updateTrackingOption() {
+        if (this.currentUsageTrackingState !== this.usageTrackingState) {
+            await this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY, this.usageTrackingState);
+            this.gainsightService.setFunctionalCookie(this.usageTrackingState);
+            await this.gainsightTrackingAppReload();
+        }
+    }
     async updateUserInAppState() {
         const currentUserResult = await this.user.current();
         this.ui.currentUser.next(currentUserResult.data);
@@ -18141,12 +18442,12 @@ class UserEditModalComponent {
         this.auth.updateCredentials(newCredentials);
     }
 }
-UserEditModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEditModalComponent, deps: [{ token: i1$8.BsModalRef }, { token: i1$1.UserService }, { token: AppStateService }, { token: i1$1.BasicAuth }, { token: i1$1.FetchClient }, { token: AlertService }, { token: UserPreferencesService }, { token: ModalService }, { token: GainsightService }, { token: CookieBannerService }, { token: LoginService }, { token: PasswordService }], target: i0.ɵɵFactoryTarget.Component });
-UserEditModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UserEditModalComponent, selector: "c8y-user-edit-modal", ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Edit user' | translate\" (onDismiss)=\"onDismiss()\">\n  <c8y-user-edit\n  [user]=\"ui.currentUser | async\"\n  [loading]=\"loading\"\n  [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n  [isGainsightEngagementsEnabled]=\"currentGainsightEngagementsState\"\n  [showProductUsageSetting]=\"showProductUsageSetting\"\n  (onProductExperience)=\"onProductExperience($event)\"\n  (onGainsightEngagements)=\"onGainsightEngagements($event)\"\n  (onUser)=\"updateAndClose($event)\"\n  (onCancel)=\"onDismiss()\"\n  >\n</c8y-user-edit>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: UserEditComponent, selector: "c8y-user-edit", inputs: ["loading", "user", "showProductUsageSetting", "isUsageTrackingEnabled", "isGainsightEngagementsEnabled"], outputs: ["onUser", "onProductExperience", "onGainsightEngagements", "onCancel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
+UserEditModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEditModalComponent, deps: [{ token: i1$8.BsModalRef }, { token: i1$1.UserService }, { token: AppStateService }, { token: i1$1.BasicAuth }, { token: i1$1.FetchClient }, { token: AlertService }, { token: UserPreferencesService }, { token: ModalService }, { token: GainsightService }, { token: CookieBannerService }, { token: LoginService }, { token: PasswordService }, { token: UserEngagementsService }], target: i0.ɵɵFactoryTarget.Component });
+UserEditModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UserEditModalComponent, selector: "c8y-user-edit-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Edit user' | translate\"\n  [customFooter]=\"true\"\n  (onDismiss)=\"onDismiss()\"\n>\n  <c8y-user-edit\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isUserEngagementPreferenceEnabled]=\"currentUserEngagementPreferenceInitialState\"\n    [showProductExperienceOptions]=\"showProductExperienceOptions\"\n    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: UserEditComponent, selector: "c8y-user-edit", inputs: ["loading", "user", "showProductExperienceOptions", "isUsageTrackingEnabled", "isUserEngagementPreferenceEnabled"], outputs: ["onUser", "onUsageTrackingChange", "onUserEngagementPreferenceChange", "onCancel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UserEditModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-user-edit-modal', template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Edit user' | translate\" (onDismiss)=\"onDismiss()\">\n  <c8y-user-edit\n  [user]=\"ui.currentUser | async\"\n  [loading]=\"loading\"\n  [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n  [isGainsightEngagementsEnabled]=\"currentGainsightEngagementsState\"\n  [showProductUsageSetting]=\"showProductUsageSetting\"\n  (onProductExperience)=\"onProductExperience($event)\"\n  (onGainsightEngagements)=\"onGainsightEngagements($event)\"\n  (onUser)=\"updateAndClose($event)\"\n  (onCancel)=\"onDismiss()\"\n  >\n</c8y-user-edit>\n</c8y-modal>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$8.BsModalRef }, { type: i1$1.UserService }, { type: AppStateService }, { type: i1$1.BasicAuth }, { type: i1$1.FetchClient }, { type: AlertService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: LoginService }, { type: PasswordService }]; } });
+            args: [{ selector: 'c8y-user-edit-modal', template: "<c8y-modal\n  [title]=\"'Edit user' | translate\"\n  [customFooter]=\"true\"\n  (onDismiss)=\"onDismiss()\"\n>\n  <c8y-user-edit\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isUserEngagementPreferenceEnabled]=\"currentUserEngagementPreferenceInitialState\"\n    [showProductExperienceOptions]=\"showProductExperienceOptions\"\n    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$8.BsModalRef }, { type: i1$1.UserService }, { type: AppStateService }, { type: i1$1.BasicAuth }, { type: i1$1.FetchClient }, { type: AlertService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: LoginService }, { type: PasswordService }, { type: UserEngagementsService }]; } });
 
 class UserMenuOutletComponent {
     constructor(ui, bsModalService, modalService, loginService, translateService, tenantService, alertService, user, optionsService, userMenu, headerService) {
@@ -21885,8 +22186,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Output
             }] } });
 
+class CloseDatePickerDirective {
+    constructor(el) {
+        this.el = el;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        const element = this.el.nativeElement.closest('.dropdown-menu');
+        const clickEvent$ = element
+            ? merge(fromEvent(element, 'click'), fromEvent(document, 'click'))
+            : fromEvent(document, 'click');
+        clickEvent$
+            .pipe(map((event) => event.target), filter(target => !this.el.nativeElement.contains(target)), // i.e. anything which is not inside this `c8y-date-time-picker`
+        takeUntil(this.destroy$))
+            .subscribe(() => this.closeDatepicker.hide());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+CloseDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CloseDatePickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CloseDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: { closeDatepicker: "closeDatepicker" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CloseDatePickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[closeDatepicker]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { closeDatepicker: [{
+                type: Input
+            }] } });
+
 class DateTimePickerComponent {
-    constructor() {
+    constructor(cd) {
+        this.cd = cd;
         this.defaultPlaceholder = gettext('Select a date…');
         this.destroy$ = new Subject();
         this.form = new FormGroup({});
@@ -21913,6 +22246,9 @@ class DateTimePickerComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
     /**
      * Control Value Accessor - If form value changes by external factor, update date property and internal form with new value.
      */
@@ -21956,12 +22292,23 @@ class DateTimePickerComponent {
         }
     }
     previousDay() {
+        const isOpen = this.datepicker.isOpen;
         this.date.setDate(this.date.getDate() - 1);
         this.setDatetime({ date: this.date, time: this.form.get('time').value });
+        if (isOpen) {
+            this.datepicker.show();
+        }
     }
     nextDay() {
+        const isOpen = this.datepicker.isOpen;
         this.date.setDate(this.date.getDate() + 1);
         this.setDatetime({ date: this.date, time: this.form.get('time').value });
+        if (isOpen) {
+            this.datepicker.show();
+        }
+    }
+    hide() {
+        this.datepicker.hide();
     }
     /**
      * If internal form changes its value, then combine date and time into one Date and pass its ISO string value to onChange method
@@ -21989,7 +22336,7 @@ class DateTimePickerComponent {
         this.onChange(this.date.toISOString());
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: { _minDate: ["minDate", "_minDate"], _maxDate: ["maxDate", "_maxDate"], placeholder: "placeholder" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -22001,7 +22348,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useExisting: forwardRef(() => DateTimePickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"datetime-picker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n", dependencies: [{ kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: TimePickerComponent, selector: "c8y-time-picker", inputs: ["minDate", "maxDate", "placeholder"], outputs: ["dayForward", "dayBackward"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+    ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: BsDatepickerDirective, descendants: true }], ngImport: i0, template: "<div class=\"datetime-picker\" [closeDatepicker]=\"datepicker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [outsideClick]=\"false\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n", dependencies: [{ kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: TimePickerComponent, selector: "c8y-time-picker", inputs: ["minDate", "maxDate", "placeholder"], outputs: ["dayForward", "dayBackward"] }, { kind: "directive", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: ["closeDatepicker"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-date-time-picker', providers: [
@@ -22015,8 +22362,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             useExisting: forwardRef(() => DateTimePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"datetime-picker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _minDate: [{
+                    ], template: "<div class=\"datetime-picker\" [closeDatepicker]=\"datepicker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [outsideClick]=\"false\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _minDate: [{
                 type: Input,
                 args: ['minDate']
             }], _maxDate: [{
@@ -22024,6 +22371,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 args: ['maxDate']
             }], placeholder: [{
                 type: Input
+            }], datepicker: [{
+                type: ViewChild,
+                args: [BsDatepickerDirective]
             }] } });
 
 class FieldDateTime extends FieldType {
@@ -22083,7 +22433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 class DateTimePickerModule {
 }
 DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent], imports: [FormsModule,
+DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent, CloseDatePickerDirective], imports: [FormsModule,
         CommonModule$1,
         FormsModule$1,
         ReactiveFormsModule, i6.BsDatepickerModule, CommonModule,
@@ -22108,7 +22458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                         TimePickerModule
                     ],
                     exports: [DateTimePickerComponent],
-                    declarations: [DateTimePickerComponent]
+                    declarations: [DateTimePickerComponent, CloseDatePickerDirective]
                 }]
         }] });
 
@@ -24442,10 +24792,10 @@ class WidgetTimeContextComponent {
     }
 }
 WidgetTimeContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetTimeContextComponent, deps: [{ token: WidgetsDashboardEventService }, { token: DashboardChildComponent }, { token: i1$6.Router }, { token: i1$6.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-WidgetTimeContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n      aria-haspopup=\"true\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [attr.aria-label]=\"'Range' | translate\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action>\n  <button (click)=\"toggleDecoupling();\" type=\"button\">\n    <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </button>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
+WidgetTimeContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n      aria-haspopup=\"true\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [attr.aria-label]=\"'Range' | translate\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action>\n  <button (click)=\"toggleDecoupling();\" type=\"button\">\n    <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </button>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetTimeContextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n      aria-haspopup=\"true\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [attr.aria-label]=\"'Range' | translate\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action>\n  <button (click)=\"toggleDecoupling();\" type=\"button\">\n    <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </button>\n</c8y-dashboard-child-action>\n" }]
+            args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n      aria-haspopup=\"true\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [attr.aria-label]=\"'Range' | translate\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action>\n  <button (click)=\"toggleDecoupling();\" type=\"button\">\n    <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </button>\n</c8y-dashboard-child-action>\n" }]
         }], ctorParameters: function () { return [{ type: WidgetsDashboardEventService }, { type: DashboardChildComponent }, { type: i1$6.Router }, { type: i1$6.ActivatedRoute }]; }, propDecorators: { canDecouple: [{
                 type: Input
             }], dateContextChange: [{
@@ -28788,5 +29138,5 @@ class RealtimeMessage {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS, ARRAY_VALIDATION_PREFIX, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, ApplicationModule, ApplicationOptions, ApplicationPluginStatus, AssetTypesModule, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BootstrapComponent, BootstrapModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerModule, FilePickerNewComponent, FilePickerNewModule, FilesService, FilterInputComponent, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GenericFileIconPipe, GetGroupIconPipe, GridDataSource, GroupFragment, GroupService, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule$1 as I18nModule, ICONS, ICON_LIST, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, IsControlVisiblePipe, JsonValidationPrettifierDirective, LANGUAGES, LOCALE_PATH, LegacyGridConfigMapperService, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchModule, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent$1 as SelectComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringifyObjectPipe, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionDetailsModalComponent, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, WebSDKVersionFactory, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _, _virtualScrollWindowStrategyFactory, allEntriesAreEqual, asyncValidateArrayElements, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, hookDrawer, hookDynamicProviderConfig, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookStepper, hookTab, hookVersion, hookWizard, initializeServices, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements };
+export { ACTIONS, ARRAY_VALIDATION_PREFIX, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, ApplicationModule, ApplicationOptions, ApplicationPluginStatus, AssetTypesModule, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BootstrapComponent, BootstrapModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerModule, FilePickerNewComponent, FilePickerNewModule, FilesService, FilterInputComponent, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GenericFileIconPipe, GetGroupIconPipe, GridDataSource, GroupFragment, GroupService, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule$1 as I18nModule, ICONS, ICON_LIST, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, IsControlVisiblePipe, JsonValidationPrettifierDirective, LANGUAGES, LOCALE_PATH, LegacyGridConfigMapperService, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchModule, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent$1 as SelectComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringifyObjectPipe, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionDetailsModalComponent, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, WebSDKVersionFactory, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _, _virtualScrollWindowStrategyFactory, allEntriesAreEqual, asyncValidateArrayElements, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, hookDrawer, hookDynamicProviderConfig, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookStepper, hookTab, hookVersion, hookWizard, initializeServices, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements };
 //# sourceMappingURL=c8y-ngx-components.mjs.map