@c8y/ngx-components 1017.0.511 → 1017.0.514

package/fesm2015/c8y-ngx-components.mjs

@@ -6964,7 +6964,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() {
@@ -7031,8 +7031,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;
@@ -7042,6 +7041,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.
@@ -7053,15 +7057,23 @@ 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`.
+     */
     isGainsightPreferenceDisabledInUserPreferences(preferenceName) {
         return __awaiter(this, void 0, void 0, function* () {
             const userGainsightPref = yield 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) {
@@ -7092,58 +7104,110 @@ 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.
      */
-    loadTag(currentTenant, identify = true) {
+    loadTag(currentTenant, sendPiiData) {
         return __awaiter(this, void 0, void 0, function* () {
             const scriptTag = document.createElement('script');
             const key = yield 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,
+        const { id: userId, email, roles } = identifyData.user;
+        const { name: tenantID, customProperties, domainName } = identifyData.currentTenant;
+        const { instanceId, versionUI, versionBE } = 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: this.translateService.currentLang,
+            browserLanguage: this.translateService.getBrowserLang(),
             instanceId,
-            externalReference,
-            userRoles: this.transformUserRolesToStr(roles === null || roles === void 0 ? void 0 : roles.references)
-        }, {
-            id: `${name}_${instanceId}`,
-            instanceId
-        });
+            externalReference: customProperties === null || customProperties === void 0 ? void 0 : customProperties.externalReference,
+            userRoles: this.transformUserRolesToStr(roles === null || roles === void 0 ? void 0 : roles.references),
+            customBranding: this.isCustomBranding(),
+            fullTracking: sendPiiData
+        };
+        if (sendPiiData) {
+            const { userName, firstName, lastName } = identifyData.user;
+            const extendedIdentify = Object.assign(Object.assign({}, requiredIdentify), { email,
+                userName,
+                firstName,
+                lastName });
+            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);
@@ -7165,41 +7229,56 @@ 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) {
-        return (this.cookieBannerService.isConfigCookiePreferencesDefined() &&
-            this.cookieBannerService.isFunctionalCookieEnabled() &&
-            !this.isGainsightDisabled(customProperties) &&
-            !this.isCustomBranding());
+    shouldSendPiiData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (this.cookieBannerService.isConfigCookiePreferencesDefined() &&
+                this.cookieBannerService.isFunctionalCookieEnabled() &&
+                !(yield 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) {
         var _a;
         (_a = window[this.GAINSIGHT_GLOBAL_SCOPE]) === null || _a === void 0 ? void 0 : _a.call(window, '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.
+     */
     canEditProductExperienceSettings() {
         return __awaiter(this, void 0, void 0, function* () {
             const currentTenant = this.appState.currentTenant.value;
             const { customProperties } = currentTenant;
+            if (this.isTrackingDisabled() ||
+                this.isGainsightDisabledAtTenantCustomProperties(customProperties)) {
+                return false;
+            }
             const gainsightKey = !!this.gainsightKey || !!(yield this.getGainsightKey());
             return (gainsightKey &&
                 this.cookieBannerService.isConfigCookiePreferencesDefined() &&
-                !this.isGainsightDisabled(customProperties) &&
-                !!this.cookieBannerService.getUserCookiePreferences() &&
-                !this.isCustomBranding());
+                !!this.cookieBannerService.getUserCookiePreferences());
         });
     }
-    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);
-    }
+    /**
+     * 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() {
         var _a;
         const currentAppState = this.appState.state$.value;
@@ -7212,18 +7291,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 === null || style === void 0 ? void 0 : 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
@@ -7234,14 +7326,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;
@@ -7304,19 +7388,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$3.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$3.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$3.TranslateService }];
-    } });
+        }], ctorParameters: function () { return [{ type: AppStateService }, { type: OptionsService }, { type: CookieBannerService }, { type: UserPreferencesService }, { type: i1$3.TranslateService }]; } });
 
 /**
  * This component is used as the outlet to show the action bars.
@@ -12350,6 +12429,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$8.BsModalService }]; } });
 
+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 === null || style === void 0 ? void 0 : 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 }];
+    } });
+
 class TotpChallengeComponent {
     constructor(loginService, users, alert) {
         this.loginService = loginService;
@@ -12748,7 +12994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             }] } });
 
 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;
@@ -12756,17 +13002,15 @@ 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.onLanguage = new EventEmitter();
-        this.onProductExperience = new EventEmitter();
-        this.onGainsightEngagements = new EventEmitter();
+        this.onUsageTrackingChange = new EventEmitter();
+        this.onUserEngagementPreferenceChange = new EventEmitter();
         this.onCancel = new EventEmitter();
+        this.onLanguage = new EventEmitter();
         this.userHasActiveTotp = false;
         this.userCanSetupTotp = false;
         this.isPhoneRequired = false;
@@ -12792,18 +13036,6 @@ class UserEditComponent {
             }
         });
     }
-    onEnablingProductUsageTracking(isUsageTrackingEnabled) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (isUsageTrackingEnabled && this.isGainsightEngagementsEnabled === undefined) {
-                this.isGainsightEngagementsEnabled = yield this.userPreferencesService
-                    .get(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY)
-                    .toPromise();
-            }
-        });
-    }
-    get langs() {
-        return this.state.state.langs;
-    }
     setupTotp() {
         this.bsModalService.show(UserTotpSetupComponent, {
             class: 'modal-sm',
@@ -12820,9 +13052,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);
         });
@@ -12830,6 +13066,9 @@ class UserEditComponent {
     onNewPasswordChanged(newPassword) {
         this._user.password = newPassword.password;
     }
+    get langs() {
+        return this.state.state.langs;
+    }
     initializeTotpSettings() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
@@ -12852,37 +13091,37 @@ class UserEditComponent {
         });
     }
 }
-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$2.UserService }, { token: i1$2.TenantLoginOptionsService }, { token: i1$2.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: { lang: "lang", loading: "loading", user: "user", showProductUsageSetting: "showProductUsageSetting", isUsageTrackingEnabled: "isUsageTrackingEnabled", isGainsightEngagementsEnabled: "isGainsightEngagementsEnabled" }, outputs: { onUser: "onUser", onLanguage: "onLanguage", 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 (for example, email)</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            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            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>\n      <label translate for=\"userLang\">Language</label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          id=\"userLang\"\n          class=\"form-control\"\n          #selectLang\n          name=\"lang\"\n          [(ngModel)]=\"lang\"\n          (change)=\"onLanguage.emit(selectLang.value)\"\n        >\n          <option *ngFor=\"let lang of langs\" [value]=\"lang\">\n            {{ translate.getNativeLanguage(lang) }}\n          </option>\n        </select>\n        <span></span>\n      </div>\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        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\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      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\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: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$2.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.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$2.UserService }, { token: i1$2.TenantLoginOptionsService }, { token: i1$2.TenantService }], target: i0.ɵɵFactoryTarget.Component });
+UserEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UserEditComponent, selector: "c8y-user-edit", inputs: { lang: "lang", loading: "loading", user: "user", showProductExperienceOptions: "showProductExperienceOptions", isUsageTrackingEnabled: "isUsageTrackingEnabled", isUserEngagementPreferenceEnabled: "isUserEngagementPreferenceEnabled" }, outputs: { onUser: "onUser", onUsageTrackingChange: "onUsageTrackingChange", onUserEngagementPreferenceChange: "onUserEngagementPreferenceChange", onCancel: "onCancel", onLanguage: "onLanguage" }, 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 (for example, email)</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            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            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>\n      <label translate for=\"userLang\">Language</label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          id=\"userLang\"\n          class=\"form-control\"\n          #selectLang\n          name=\"lang\"\n          [(ngModel)]=\"lang\"\n          (change)=\"onLanguage.emit(selectLang.value)\"\n        >\n          <option *ngFor=\"let lang of langs\" [value]=\"lang\">\n            {{ translate.getNativeLanguage(lang) }}\n          </option>\n        </select>\n        <span></span>\n      </div>\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        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\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      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\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: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$2.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.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 (for example, email)</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            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            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>\n      <label translate for=\"userLang\">Language</label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          id=\"userLang\"\n          class=\"form-control\"\n          #selectLang\n          name=\"lang\"\n          [(ngModel)]=\"lang\"\n          (change)=\"onLanguage.emit(selectLang.value)\"\n        >\n          <option *ngFor=\"let lang of langs\" [value]=\"lang\">\n            {{ translate.getNativeLanguage(lang) }}\n          </option>\n        </select>\n        <span></span>\n      </div>\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        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\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      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\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$2.UserService }, { type: i1$2.TenantLoginOptionsService }, { type: i1$2.TenantService }, { type: UserPreferencesService }, { type: GainsightService }]; }, propDecorators: { lang: [{
+            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 (for example, email)</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            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            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>\n      <label translate for=\"userLang\">Language</label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          id=\"userLang\"\n          class=\"form-control\"\n          #selectLang\n          name=\"lang\"\n          [(ngModel)]=\"lang\"\n          (change)=\"onLanguage.emit(selectLang.value)\"\n        >\n          <option *ngFor=\"let lang of langs\" [value]=\"lang\">\n            {{ translate.getNativeLanguage(lang) }}\n          </option>\n        </select>\n        <span></span>\n      </div>\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        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\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      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\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$2.UserService }, { type: i1$2.TenantLoginOptionsService }, { type: i1$2.TenantService }]; }, propDecorators: { lang: [{
                 type: Input
             }], loading: [{
                 type: Input
             }], user: [{
                 type: Input
-            }], showProductUsageSetting: [{
+            }], showProductExperienceOptions: [{
                 type: Input
             }], isUsageTrackingEnabled: [{
                 type: Input
-            }], isGainsightEngagementsEnabled: [{
+            }], isUserEngagementPreferenceEnabled: [{
                 type: Input
             }], onUser: [{
                 type: Output
-            }], onLanguage: [{
-                type: Output
-            }], onProductExperience: [{
+            }], onUsageTrackingChange: [{
                 type: Output
-            }], onGainsightEngagements: [{
+            }], onUserEngagementPreferenceChange: [{
                 type: Output
             }], onCancel: [{
                 type: Output
+            }], onLanguage: [{
+                type: Output
             }] } });
 
 class UserEditModalComponent {
-    constructor(modal, user, ui, auth, client, alert, translate, userPreferences, c8yModalService, gainsightService, cookieBannerService, loginService, passwordService) {
+    constructor(modal, user, ui, auth, client, alert, translate, userPreferences, c8yModalService, gainsightService, cookieBannerService, loginService, passwordService, userEngagementsService) {
         this.modal = modal;
         this.user = user;
         this.ui = ui;
@@ -12896,21 +13135,37 @@ class UserEditModalComponent {
         this.cookieBannerService = cookieBannerService;
         this.loginService = loginService;
         this.passwordService = passwordService;
+        this.userEngagementsService = userEngagementsService;
         this.loading = false;
-        this.showProductUsageSetting = false;
+        this.showProductExperienceOptions = false;
         this.lang = this.ui.state.lang;
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
             this.updateUserInAppState();
-            this.showProductUsageSetting = yield this.gainsightService.canEditProductExperienceSettings();
-            if (this.showProductUsageSetting) {
-                if (this.cookieBannerService.isFunctionalCookieEnabled()) {
-                    this.currentUsageTrackingState =
-                        !(yield this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY));
-                    this.currentGainsightEngagementsState =
-                        !(yield this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY));
-                }
+            yield 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.
+     */
+    setInitialProductExperienceOptions() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showProductExperienceOptions =
+                yield this.gainsightService.canEditProductExperienceSettings();
+            if (this.showProductExperienceOptions && this.cookieBannerService.isFunctionalCookieEnabled()) {
+                // Enable personalized product experience tracking option
+                this.currentUsageTrackingState =
+                    !(yield this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY));
+                // Enable in-product information & communication option
+                this.currentUserEngagementPreferenceInitialState =
+                    this.userEngagementsService.userEngagementsEnabled$.value;
             }
         });
     }
@@ -12928,11 +13183,11 @@ class UserEditModalComponent {
             yield this.translate.switchToLanguage(this.changedLang);
         });
     }
-    onProductExperience(option) {
-        this.usageTrackingState = option;
+    onUsageTrackingChange(isEnabled) {
+        this.usageTrackingState = isEnabled;
     }
-    onGainsightEngagements(option) {
-        this.gainsightEngagementsState = option;
+    onUserEngagementPreferenceChange(isEnabled) {
+        this.userEngagementPreferenceNewState = isEnabled;
     }
     updateAndClose(user) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -12955,16 +13210,7 @@ class UserEditModalComponent {
                 if (this.changedLang && this.changedLang !== this.lang) {
                     reloadRequired = yield this.persistLanguage(this.changedLang);
                 }
-                if (this.currentGainsightEngagementsState !== this.gainsightEngagementsState) {
-                    yield this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_ENGAGEMENTS_KEY, this.gainsightEngagementsState);
-                }
-                if (this.currentUsageTrackingState !== this.usageTrackingState) {
-                    yield this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY, this.usageTrackingState);
-                    this.gainsightService.setFunctionalCookie(this.usageTrackingState);
-                    this.usageTrackingState
-                        ? yield this.gainsightService.loadTag(this.client.tenant)
-                        : yield this.gainsightTrackingAppReload();
-                }
+                yield this.updateProductExperienceOptions();
                 if (user.customProperties.userOrigin !== 'OAUTH2') {
                     yield this.user.updateCurrent(omit(user, 'password'));
                     yield this.updateUserInAppState();
@@ -13021,6 +13267,38 @@ class UserEditModalComponent {
             }
         });
     }
+    updateProductExperienceOptions() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.updateUserEngagementsPreference();
+            yield 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.
+     */
+    updateTrackingOption() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.currentUsageTrackingState !== this.usageTrackingState) {
+                yield this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY, this.usageTrackingState);
+                this.gainsightService.setFunctionalCookie(this.usageTrackingState);
+                yield this.gainsightTrackingAppReload();
+            }
+        });
+    }
     updateUserInAppState() {
         return __awaiter(this, void 0, void 0, function* () {
             const currentUserResult = yield this.user.current();
@@ -13036,12 +13314,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$2.UserService }, { token: AppStateService }, { token: i1$2.BasicAuth }, { token: i1$2.FetchClient }, { token: AlertService }, { token: TranslateService }, { 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    [lang]=\"lang\"\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isGainsightEngagementsEnabled]=\"currentGainsightEngagementsState\"\n    [showProductUsageSetting]=\"showProductUsageSetting\"\n    (onLanguage)=\"onLanguage($event)\"\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: ["lang", "loading", "user", "showProductUsageSetting", "isUsageTrackingEnabled", "isGainsightEngagementsEnabled"], outputs: ["onUser", "onLanguage", "onProductExperience", "onGainsightEngagements", "onCancel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.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$2.UserService }, { token: AppStateService }, { token: i1$2.BasicAuth }, { token: i1$2.FetchClient }, { token: AlertService }, { token: TranslateService }, { 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    [lang]=\"lang\"\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    (onLanguage)=\"onLanguage($event)\"\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: ["lang", "loading", "user", "showProductExperienceOptions", "isUsageTrackingEnabled", "isUserEngagementPreferenceEnabled"], outputs: ["onUser", "onUsageTrackingChange", "onUserEngagementPreferenceChange", "onCancel", "onLanguage"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.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    [lang]=\"lang\"\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isGainsightEngagementsEnabled]=\"currentGainsightEngagementsState\"\n    [showProductUsageSetting]=\"showProductUsageSetting\"\n    (onLanguage)=\"onLanguage($event)\"\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$2.UserService }, { type: AppStateService }, { type: i1$2.BasicAuth }, { type: i1$2.FetchClient }, { type: AlertService }, { type: TranslateService }, { 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    [lang]=\"lang\"\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    (onLanguage)=\"onLanguage($event)\"\n  ></c8y-user-edit>\n</c8y-modal>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$8.BsModalRef }, { type: i1$2.UserService }, { type: AppStateService }, { type: i1$2.BasicAuth }, { type: i1$2.FetchClient }, { type: AlertService }, { type: TranslateService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: LoginService }, { type: PasswordService }, { type: UserEngagementsService }]; } });
 
 class UserMenuItemComponent {
     constructor(userService) {
@@ -16754,50 +17032,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 /**
  * 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(([currentTenant, isCookieBannerShowed, showGainsightEngagements]) => __awaiter(this, void 0, void 0, function* () {
+            this.cookieBannerService.isCookieBannerShowed$
+        ]).subscribe(([currentTenant, isCookieBannerShowed]) => __awaiter(this, void 0, void 0, function* () {
             if (isCookieBannerShowed) {
                 return;
             }
             const { customProperties } = currentTenant;
-            if (this.gainsightService.shouldLoadGainsightTag(customProperties) &&
-                !(yield 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()) {
+                yield this.gainsightService.loadTag(currentTenant, yield 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 SearchComponent {
     constructor(searchService) {
@@ -25901,7 +26197,7 @@ class RangeDisplayComponent {
         if (!this.config.min) {
             this.config.min = 0;
         }
-        if (!this.config.max) {
+        if (!this.config.max && this.config.max !== 0) {
             this.config.max = 100;
         }
         if (this.config.fractionSize !== undefined) {
@@ -26022,10 +26318,10 @@ class RangeDisplayComponent {
     }
 }
 RangeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RangeDisplayComponent, deps: [{ token: i1$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-RangeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RangeDisplayComponent, selector: "c8y-range-display", inputs: { config: "config", display: "display" }, host: { properties: { "attr.style": "this.inlineStyle" } }, viewQueries: [{ propertyName: "rangeDisplay", first: true, predicate: ["rangeDisplay"], descendants: true }, { propertyName: "currentRangeElement", first: true, predicate: ["currentRangeElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max || 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
+RangeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RangeDisplayComponent, selector: "c8y-range-display", inputs: { config: "config", display: "display" }, host: { properties: { "attr.style": "this.inlineStyle" } }, viewQueries: [{ propertyName: "rangeDisplay", first: true, predicate: ["rangeDisplay"], descendants: true }, { propertyName: "currentRangeElement", first: true, predicate: ["currentRangeElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max ?? 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RangeDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-range-display', template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max || 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-range-display', template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max ?? 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$5.DomSanitizer }]; }, propDecorators: { config: [{
                 type: Input
             }], display: [{
@@ -27716,5 +28012,5 @@ class RealtimeMessage {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, 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, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, FilePickerComponent, FilePickerModule, FilesService, FilterInputComponent, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, 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, 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, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, 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, RightDrawerComponent, 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, 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, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, 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, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator };
+export { ACTIONS, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, 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, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, FilePickerComponent, FilePickerModule, FilesService, FilterInputComponent, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, 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, 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, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, 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, RightDrawerComponent, 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, 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, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, 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, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator };
 //# sourceMappingURL=c8y-ngx-components.mjs.map