@c8y/ngx-components 1022.16.2 → 1022.26.1

package/fesm2022/c8y-ngx-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, Injectable, Injector, InjectionToken, NgModuleRef, createNgModule, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, createEnvironmentInjector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, ViewContainerRef, ElementRef, ContentChildren, ViewChildren, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, effect, Type, computed, input, output } from '@angular/core';
+import { Input, Directive, Injectable, Injector, InjectionToken, NgModuleRef, createNgModule, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, createEnvironmentInjector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, ViewContainerRef, ElementRef, ContentChildren, ViewChildren, viewChild, effect, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, Type, computed, input, output } from '@angular/core';
 import * as i1$3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
@@ -19106,1296 +19106,1320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-/**
- * Service to show a modal.
- */
-class ModalService {
-    constructor(modalService, gainsightService) {
-        this.modalService = modalService;
-        this.gainsightService = gainsightService;
+class PasswordConfirmModalComponent {
+    constructor(user, ui, client, alert) {
+        this.user = user;
+        this.ui = ui;
+        this.client = client;
+        this.alert = alert;
+        this.passwordConfirmedEmitter = new EventEmitter();
+        this.loading = false;
     }
-    /**
-     * Shows a quick confirm message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
-     * @param confirmOptions Selection options to display as checkbox list.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm'),
-            cancel: labels.cancel || gettext$1('Cancel')
+    async passwordConfirm() {
+        if (this.password) {
+            const supportUserName = this.ui.currentSupportUserName.value;
+            const userId = this.ui.currentUser.value.id;
+            const credentials = {
+                password: this.password,
+                user: `${supportUserName ? `${supportUserName}$` : ''}${userId}`,
+                tenant: this.client.tenant
+            };
+            try {
+                this.loading = true;
+                const auth = new BasicAuth(credentials);
+                const newClient = this.createNewClient(auth, this.client.baseUrl);
+                await newClient.user.current();
+                this.emitSuccessAndClose();
+            }
+            catch (e) {
+                if (e.res && e.res.status === 401 && e.data && /pin|totp/i.test(e.data.message)) {
+                    this.emitSuccessAndClose();
+                }
+                else {
+                    this.alert.danger(gettext$1("Provided password doesn't match your current one."));
+                }
+            }
+            finally {
+                this.loading = false;
+            }
+        }
+    }
+    cancel() {
+        this.passwordConfirmedEmitter.emit(false);
+        this.modal._dismiss();
+    }
+    createNewClient(auth, baseUrl) {
+        return new Client(auth, baseUrl);
+    }
+    emitSuccessAndClose() {
+        this.passwordConfirmedEmitter.emit(true);
+        this.modal._dismiss();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirmModalComponent, deps: [{ token: i1.UserService }, { token: AppStateService }, { token: i1.FetchClient }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordConfirmModalComponent, isStandalone: true, selector: "c8y-password-confirm-modal", outputs: { passwordConfirmedEmitter: "passwordConfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\r\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\r\n    <div class=\"d-block p-24 p-b-0\">\r\n      <c8y-form-group [hasWarning]=\"true\">\r\n        <label translate for=\"currentPassword\">Enter your password</label>\r\n        <input\r\n          id=\"currentPassword\"\r\n          [(ngModel)]=\"password\"\r\n          type=\"password\"\r\n          name=\"password\"\r\n          class=\"form-control\"\r\n          placeholder=\"{{ 'Enter your password' | translate }}\"\r\n          required\r\n        />\r\n        <c8y-messages>\r\n          <c8y-message translate>\r\n            Enter the password of the user that you are currently logged in with.\r\n          </c8y-message>\r\n        </c8y-messages>\r\n      </c8y-form-group>\r\n    </div>\r\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\r\n      <button\r\n        title=\"{{ 'Cancel' | translate }}\"\r\n        class=\"btn btn-default\"\r\n        type=\"button\"\r\n        (click)=\"cancel()\"\r\n      >\r\n        {{ 'Cancel' | translate }}\r\n      </button>\r\n      <button\r\n        title=\"{{ 'Confirm' | translate }}\"\r\n        class=\"btn btn-primary\"\r\n        type=\"submit\"\r\n        [disabled]=\"!confirmForm.form.valid || loading\"\r\n      >\r\n        {{ 'Confirm' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</c8y-modal>\r\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirmModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-password-confirm-modal', standalone: true, imports: [
+                        ModalComponent,
+                        FormsModule$1,
+                        FormGroupComponent,
+                        C8yTranslateDirective,
+                        RequiredInputPlaceholderDirective,
+                        MessagesComponent,
+                        MessageDirective,
+                        C8yTranslatePipe
+                    ], template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\r\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\r\n    <div class=\"d-block p-24 p-b-0\">\r\n      <c8y-form-group [hasWarning]=\"true\">\r\n        <label translate for=\"currentPassword\">Enter your password</label>\r\n        <input\r\n          id=\"currentPassword\"\r\n          [(ngModel)]=\"password\"\r\n          type=\"password\"\r\n          name=\"password\"\r\n          class=\"form-control\"\r\n          placeholder=\"{{ 'Enter your password' | translate }}\"\r\n          required\r\n        />\r\n        <c8y-messages>\r\n          <c8y-message translate>\r\n            Enter the password of the user that you are currently logged in with.\r\n          </c8y-message>\r\n        </c8y-messages>\r\n      </c8y-form-group>\r\n    </div>\r\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\r\n      <button\r\n        title=\"{{ 'Cancel' | translate }}\"\r\n        class=\"btn btn-default\"\r\n        type=\"button\"\r\n        (click)=\"cancel()\"\r\n      >\r\n        {{ 'Cancel' | translate }}\r\n      </button>\r\n      <button\r\n        title=\"{{ 'Confirm' | translate }}\"\r\n        class=\"btn btn-primary\"\r\n        type=\"submit\"\r\n        [disabled]=\"!confirmForm.form.valid || loading\"\r\n      >\r\n        {{ 'Confirm' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</c8y-modal>\r\n" }]
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AppStateService }, { type: i1.FetchClient }, { type: AlertService }], propDecorators: { passwordConfirmedEmitter: [{
+                type: Output
+            }], modal: [{
+                type: ViewChild,
+                args: ['modal', { static: false }]
+            }] } });
+
+class CurrentPasswordModalComponent {
+    constructor(modal) {
+        this.modal = modal;
+        this.currentPasswordEmitter = new EventEmitter();
+    }
+    passwordConfirm() {
+        this.currentPasswordEmitter.emit(this.password);
+        this.modal.hide();
+    }
+    cancel() {
+        this.currentPasswordEmitter.emit(null);
+        this.modal.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CurrentPasswordModalComponent, deps: [{ token: i1$7.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CurrentPasswordModalComponent, isStandalone: true, selector: "c8y-current-password-modal", outputs: { currentPasswordEmitter: "currentPasswordEmitter" }, ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\n    <div class=\"d-block p-24\">\n      <c8y-form-group [hasWarning]=\"true\">\n        <label translate for=\"currentPassword\">Enter your password</label>\n        <input\n          id=\"currentPassword\"\n          [(ngModel)]=\"password\"\n          type=\"password\"\n          name=\"password\"\n          class=\"form-control\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message translate>\n            The password of the user that you are currently logged in with.\n          </c8y-message>\n        </c8y-messages>\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=\"{{ 'Confirm' | translate }}\"\n        class=\"btn btn-primary\"\n        [attr.data-cy]=\"'confirm-current-password-confirm-button'\"\n        type=\"submit\"\n        [disabled]=\"!confirmForm.form.valid\"\n      >\n        {{ 'Confirm' | translate }}\n      </button>\n    </div>\n  </form>\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: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CurrentPasswordModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-current-password-modal', standalone: true, imports: [
+                        ModalComponent,
+                        FormsModule$1,
+                        FormGroupComponent,
+                        C8yTranslateDirective,
+                        RequiredInputPlaceholderDirective,
+                        MessagesComponent,
+                        MessageDirective,
+                        C8yTranslatePipe
+                    ], template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\n    <div class=\"d-block p-24\">\n      <c8y-form-group [hasWarning]=\"true\">\n        <label translate for=\"currentPassword\">Enter your password</label>\n        <input\n          id=\"currentPassword\"\n          [(ngModel)]=\"password\"\n          type=\"password\"\n          name=\"password\"\n          class=\"form-control\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message translate>\n            The password of the user that you are currently logged in with.\n          </c8y-message>\n        </c8y-messages>\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=\"{{ 'Confirm' | translate }}\"\n        class=\"btn btn-primary\"\n        [attr.data-cy]=\"'confirm-current-password-confirm-button'\"\n        type=\"submit\"\n        [disabled]=\"!confirmForm.form.valid\"\n      >\n        {{ 'Confirm' | translate }}\n      </button>\n    </div>\n  </form>\n</c8y-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalRef }], propDecorators: { currentPasswordEmitter: [{
+                type: Output
+            }] } });
+
+class PasswordService {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.DEFAULT_PASSWORD_MIN_LENGTH = 8;
+        this.GREEN = {
+            colorName: 'green',
+            color: 'rgb(0, 128, 0)',
+            description: gettext$1('strong'),
+            passwordStrength: PasswordStrength.GREEN
         };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels: modalLabels, status, confirmOptions },
+        this.YELLOW = {
+            colorName: 'yellow',
+            color: 'rgb(255, 204, 51)',
+            description: gettext$1('medium'),
+            passwordStrength: PasswordStrength.YELLOW
+        };
+        this.RED = {
+            colorName: 'red',
+            color: 'rgb(170, 0, 51)',
+            description: gettext$1('weak'),
+            passwordStrength: PasswordStrength.RED
+        };
+    }
+    confirmPassword() {
+        const modalInstance = this.modalService.show(PasswordConfirmModalComponent, {
             ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
+            ariaLabelledBy: 'modal-title'
         });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
-        return await modalRef.content.result;
+        const passwordConfirmedEmitter = modalInstance.content.passwordConfirmedEmitter;
+        return passwordConfirmedEmitter.pipe(take(1));
     }
     /**
-     * Shows a quick acknowledge message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param acknowledgeLabel The label to use.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     * Returns an observable with the password provided by user:
+     * - `string` when user provided a value
+     * - `null` when user cancelled the modal
      */
-    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
-        const labels = { ok: acknowledgeLabel, cancel: null };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels, status },
+    currentPassword() {
+        const modalInstance = this.modalService.show(CurrentPasswordModalComponent, {
+            class: 'modal-sm',
             ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
+            ariaLabelledBy: 'modal-title'
         });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
-        return await modalRef.content.result;
+        const currentPasswordEmitter = modalInstance.content.currentPasswordEmitter;
+        return currentPasswordEmitter.pipe(take(1));
     }
-    /**
-     * Shows a quick logout confirmation modal.
-     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
-     */
-    async confirmLogout(body, status = Status.WARNING, labels = {}) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm and log out'),
-            cancel: labels.cancel || gettext$1('Cancel')
-        };
-        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
-        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
+    hasLowerCase(password) {
+        return password.search(/[a-z]/) !== -1;
     }
-    triggerEvent(result, labels, productExperienceEvent) {
-        const data = { ...productExperienceEvent.data, url: window.location.href };
-        result
-            .then(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.ok
-            });
-        })
-            .catch(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.cancel
-            });
-        });
+    hasUpperCase(password) {
+        return password.search(/[A-Z]/) !== -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+    hasNumbers(password) {
+        return password.search(/[0-9]/) !== -1;
+    }
+    hasSpecialChars(password) {
+        return password.search(/[^0-9a-zA-Z]+/) !== -1;
+    }
+    getStrengthColor(password) {
+        const passwordStrength = filter$2([
+            this.hasLowerCase(password),
+            this.hasUpperCase(password),
+            this.hasNumbers(password),
+            this.hasSpecialChars(password)
+        ]).length;
+        if (passwordStrength > 3) {
+            return this.GREEN;
+        }
+        else if (passwordStrength >= 3) {
+            return this.YELLOW;
+        }
+        else {
+            return this.RED;
+        }
+    }
+    getDefaultPasswordMinLength() {
+        return this.DEFAULT_PASSWORD_MIN_LENGTH;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, deps: [{ token: i1$7.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalService }] });
 
-class ThemeSwitcherService {
-    constructor(options) {
-        this.options = options;
-        this.darkThemeClass = `c8y-dark-theme`;
-        this.themeOptions = [
-            {
-                label: gettext$1('Light'),
-                value: 'light',
-                icon: 'sun'
-            },
-            {
-                label: gettext$1('Dark'),
-                value: 'dark',
-                icon: 'moon'
-            },
-            {
-                label: gettext$1('System'),
-                value: 'system',
-                icon: 'imac-settings'
-            }
-        ];
-        this._userSelectedThemePreference$ = new BehaviorSubject(this.getCurrentThemePreference());
-        this._temporaryThemePreference$ = new BehaviorSubject('none');
-        this.userSelectedThemePreference$ = this._userSelectedThemePreference$.asObservable();
-        const userSelectedTheme$ = this.userSelectedThemePreference$.pipe(switchMap(preference => {
-            if (preference === 'system') {
-                return this.getUsersSystemPreferenceForTheme$();
-            }
-            return of(preference);
-        }));
-        this.disableThemeSelection$ = this._temporaryThemePreference$.pipe(map(preference => preference !== 'none'));
-        this.currentlyAppliedTheme$ = this._temporaryThemePreference$.pipe(switchMap(temporaryPreference => {
-            if (temporaryPreference !== 'none') {
-                return of(temporaryPreference);
-            }
-            return userSelectedTheme$;
-        }));
-        this.darkThemeAvailable$ = this.options.get$('darkThemeAvailable').pipe(map(value => !!value));
-    }
-    getCurrentThemePreference() {
-        const value = getThemePreference();
-        if (value === 'system' || value === 'dark') {
-            return value;
-        }
-        return 'light';
-    }
-    getUsersSystemPreferenceForTheme$() {
-        return fromEvent(window.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith(window.matchMedia('(prefers-color-scheme: dark)')), map((e) => (e.matches ? 'dark' : 'light')));
+class TotpSetupComponent {
+    get qrCodeImage() {
+        return this.totpSecret ? this.totpSecret.secretQrUrl : '';
     }
-    changeUserPreference(preference) {
-        setThemePreference(preference);
-        this._userSelectedThemePreference$.next(preference);
-        this.applyTheme(preference);
+    get secret() {
+        return this.totpSecret ? this.totpSecret.rawSecret : '';
     }
-    temporaryChangeTheme(preference) {
-        this._temporaryThemePreference$.next(preference);
-        this.applyTheme(preference);
+    get qrData() {
+        // TODO: waiting for BE:, now we need extract it from secretQrUrl
+        // https://cumulocity.atlassian.net/browse/MTM-36387
+        // return this.totpSecret ? this.totpSecret.qrData : '';
+        const url = new URL(this.qrCodeImage);
+        const otpAuth = url.searchParams.get('chl') || url.searchParams.get('data');
+        if (!otpAuth) {
+            this.alert.danger(gettext$1('Failed to generate a QR code.'));
+            return '';
+        }
+        return decodeURIComponent(otpAuth);
     }
-    resetTemporaryTheme() {
-        this._temporaryThemePreference$.next('none');
-        this.applyTheme(this.getCurrentThemePreference());
+    constructor(user, alert) {
+        this.user = user;
+        this.alert = alert;
     }
-    applyTheme(preference) {
-        applyTheme(preference);
+    async ngOnInit() {
+        try {
+            const { data } = await this.user.generateTotpSecret();
+            this.totpSecret = data;
+        }
+        catch (ex) {
+            this.alert.addServerFailure(ex);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeSwitcherService, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeSwitcherService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpSetupComponent, deps: [{ token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TotpSetupComponent, isStandalone: true, selector: "c8y-totp-setup", ngImport: i0, template: "<div class=\"text-center\">\n  <p\n    class=\"m-24 m-t-16 m-b-0\"\n    translate\n  >\n    Scan this QR code with your smartphone using the authenticator application.\n  </p>\n\n  <div class=\"d-flex j-c-center\">\n    <qrcode\n      [width]=\"180\"\n      *ngIf=\"totpSecret\"\n      [qrdata]=\"qrData\"\n      [errorCorrectionLevel]=\"'M'\"\n      [elementType]=\"'svg'\"\n    ></qrcode>\n  </div>\n  <p class=\"text-center text-muted\">\n    {{ secret }}\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeSwitcherService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: OptionsService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpSetupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-totp-setup', standalone: true, imports: [C8yTranslateDirective, NgIf, QRCodeComponent], template: "<div class=\"text-center\">\n  <p\n    class=\"m-24 m-t-16 m-b-0\"\n    translate\n  >\n    Scan this QR code with your smartphone using the authenticator application.\n  </p>\n\n  <div class=\"d-flex j-c-center\">\n    <qrcode\n      [width]=\"180\"\n      *ngIf=\"totpSecret\"\n      [qrdata]=\"qrData\"\n      [errorCorrectionLevel]=\"'M'\"\n      [elementType]=\"'svg'\"\n    ></qrcode>\n  </div>\n  <p class=\"text-center text-muted\">\n    {{ secret }}\n  </p>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AlertService }] });
 
-class UiSettingsComponent {
-    constructor(translate, state, ui, userPreferences, c8yModalService, headerService, themeSwitcher) {
-        this.translate = translate;
-        this.state = state;
-        this.ui = ui;
-        this.userPreferences = userPreferences;
-        this.c8yModalService = c8yModalService;
-        this.headerService = headerService;
-        this.themeSwitcher = themeSwitcher;
-        this.destroyed$ = new Subject();
-        this.currentLang = this.ui.state.lang;
-        this.ui.state$
-            .pipe(filter(({ lang }) => lang !== this.currentLang), takeUntil(this.destroyed$), first$1())
-            .subscribe(({ lang }) => (this.currentLang = lang));
-        this.open$ = this.headerService.rightDrawerOpen$;
-    }
-    ngOnInit() {
-        this.languages = this.state.state.langs.map(l => ({
-            lang: l,
-            nativeLanguage: this.translate.getNativeLanguage(l)
-        }));
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
+class TotpChallengeComponent {
+    constructor(users, alert) {
+        this.users = users;
+        this.alert = alert;
+        /**
+         * Calls the verify endpoint if set to true (default true)
+         */
+        this.verify = true;
+        /**
+         * Emits the token on success.
+         */
+        this.onSuccess = new EventEmitter();
+        /**
+         * Emits if set up two-factor authentication is canceled.
+         */
+        this.totpUnconfirmedEmitter = new EventEmitter();
+        this.loading = false;
+        this.hasError = false;
+        this.isModal = false;
+        this.model = {
+            token: ''
+        };
     }
-    async onLanguageChange(changedLang) {
-        if (!changedLang) {
-            return;
+    async verifyCode() {
+        try {
+            this.loading = true;
+            this.hasError = false;
+            if (this.verify) {
+                await this.users.verifyTotpCode(this.model.token);
+            }
+            this.onSuccess.emit(this.model.token);
         }
-        await this.translate.switchToLanguage(changedLang);
-        if (await this.persistLanguage(changedLang)) {
-            location.reload();
+        catch (e) {
+            this.hasError = true;
+            this.alert.removeLastDanger();
+            this.loading = false;
         }
     }
-    async persistLanguage(lang) {
-        let shouldReload = true;
+    cancel() {
+        this.totpUnconfirmedEmitter.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpChallengeComponent, deps: [{ token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TotpChallengeComponent, isStandalone: true, selector: "c8y-totp-challenge", inputs: { verify: "verify", loading: "loading", hasError: "hasError", isModal: "isModal" }, outputs: { onSuccess: "onSuccess", totpUnconfirmedEmitter: "totpUnconfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-b-0\" [ngClass]=\"isModal ? 'p-24' : 'p-t-24'\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"{ 'p-b-24': hasError }\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div [ngClass]=\"isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'\">\n    <button\n      class=\"btn btn-default\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verify' | translate }}\"\n      *ngIf=\"!loading\"\n      [disabled]=\"!totpForm.form.valid\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      class=\"btn btn-primary btn-pending\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      *ngIf=\"loading\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpChallengeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-totp-challenge', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
+                        FormsModule$1,
+                        NgClass,
+                        FormGroupComponent,
+                        C8yTranslateDirective,
+                        RequiredInputPlaceholderDirective,
+                        NgIf,
+                        C8yTranslatePipe
+                    ], template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-b-0\" [ngClass]=\"isModal ? 'p-24' : 'p-t-24'\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"{ 'p-b-24': hasError }\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div [ngClass]=\"isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'\">\n    <button\n      class=\"btn btn-default\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verify' | translate }}\"\n      *ngIf=\"!loading\"\n      [disabled]=\"!totpForm.form.valid\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      class=\"btn btn-primary btn-pending\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      *ngIf=\"loading\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AlertService }], propDecorators: { verify: [{
+                type: Input
+            }], onSuccess: [{
+                type: Output
+            }], totpUnconfirmedEmitter: [{
+                type: Output
+            }], loading: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], isModal: [{
+                type: Input
+            }], modal: [{
+                type: ViewChild,
+                args: ['modal', { static: false }]
+            }] } });
+
+class UserTotpSetupComponent {
+    constructor(user, modalService, modal, authService) {
+        this.user = user;
+        this.modalService = modalService;
+        this.modal = modal;
+        this.authService = authService;
+    }
+    async totpSetupVerified() {
+        await this.user.activateTotp();
+        this.modal.hide();
         try {
-            await this.c8yModalService.confirm(gettext$1('Reload recommended'), gettext$1('To change the language in the entire application, we recommend you to reload the page. If you have any unsaved changes, you can reload later. How would you like to proceed?'), Status.WARNING, {
-                ok: gettext$1('Reload now'),
-                cancel: gettext$1('Reload later')
-            });
+            await this.modalService.acknowledge(gettext$1('Logout required'), gettext$1('You must log out in order to apply your changes'), Status.WARNING, gettext$1('Log out'));
+            await this.authService.logout();
         }
         catch (ex) {
-            shouldReload = false;
-        }
-        finally {
-            this.translate.saveInLocalStorage(lang);
-            await this.userPreferences.set('language', lang);
-            this.currentLang = lang;
+            // intended empty
         }
-        return shouldReload;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsComponent, deps: [{ token: TranslateService }, { token: AppStateService }, { token: AppStateService }, { token: UserPreferencesService }, { token: ModalService }, { token: HeaderService }, { token: ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UiSettingsComponent, isStandalone: true, selector: "c8y-ui-settings", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    close() {
+        this.modal.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserTotpSetupComponent, deps: [{ token: i1.UserService }, { token: ModalService }, { token: i1$7.BsModalRef }, { token: SimplifiedAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserTotpSetupComponent, isStandalone: true, selector: "c8y-user-totp-setup", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Set up two-factor authentication' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-phonelink-lock\"></span>\n  </ng-container>\n\n  <c8y-totp-setup></c8y-totp-setup>\n  <c8y-totp-challenge [isModal]=\"true\" (onSuccess)=\"totpSetupVerified()\" (totpUnconfirmedEmitter)=\"close()\"></c8y-totp-challenge>\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: TotpSetupComponent, selector: "c8y-totp-setup" }, { kind: "component", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: ["verify", "loading", "hasError", "isModal"], outputs: ["onSuccess", "totpUnconfirmedEmitter"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserTotpSetupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ui-settings', standalone: true, imports: [
-                        IconDirective,
-                        NgIf,
-                        C8yTranslateDirective,
-                        NgFor,
-                        FormsModule$1,
-                        C8yTranslatePipe,
-                        AsyncPipe
-                    ], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: TranslateService }, { type: AppStateService }, { type: AppStateService }, { type: UserPreferencesService }, { type: ModalService }, { type: HeaderService }, { type: ThemeSwitcherService }] });
+            args: [{ selector: 'c8y-user-totp-setup', standalone: true, imports: [ModalComponent, TotpSetupComponent, TotpChallengeComponent, C8yTranslatePipe], template: "<c8y-modal\n  [title]=\"'Set up two-factor authentication' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-phonelink-lock\"></span>\n  </ng-container>\n\n  <c8y-totp-setup></c8y-totp-setup>\n  <c8y-totp-challenge [isModal]=\"true\" (onSuccess)=\"totpSetupVerified()\" (totpUnconfirmedEmitter)=\"close()\"></c8y-totp-challenge>\n</c8y-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: ModalService }, { type: i1$7.BsModalRef }, { type: SimplifiedAuthService }] });
 
-class UiSettingsModule {
-    static providers() {
-        return [
-            hookDrawer({
-                component: UiSettingsComponent,
-                position: 'right',
-                priority: 90,
-                id: 'uiSettings'
-            })
-        ];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent], exports: [UiSettingsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule$1, UiSettingsComponent],
-                    exports: [UiSettingsComponent]
-                }]
-        }] });
-
-class UserMenuItemComponent {
-    constructor(userService, headerService) {
-        this.userService = userService;
-        this.headerService = headerService;
-        this.priority = 0;
-        this.click = new EventEmitter();
-        this.open$ = this.headerService.rightDrawerOpen$;
+/**
+ * The component is used to display a password control that includes the functionality of hiding and showing the input value.
+ */
+class PasswordInputComponent {
+    constructor() {
+        /**
+         * Id of input
+         */
+        this.id = '';
+        /**
+         * Value for autocomplete attribute of input
+         */
+        this.autocomplete = 'off';
+        this.value = '';
+        this.disabled = false;
+        this.type = 'password';
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+        this.onChange = value => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
     }
-    ngAfterViewInit() {
-        this.viewInitTimeout = setTimeout(() => this.userService.add(this));
+    writeValue(value) {
+        this.value = value ? value : '';
     }
-    ngOnDestroy() {
-        clearTimeout(this.viewInitTimeout);
-        this.userService.remove(this);
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    onClick() {
-        this.click.emit(this);
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserMenuItemComponent, deps: [{ token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserMenuItemComponent, isStandalone: true, selector: "c8y-user-menu-item", inputs: { icon: "icon", label: "label", link: "link", target: "target", priority: "priority", dataCy: "dataCy" }, outputs: { click: "click" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInput($event) {
+        this.value = $event.currentTarget.value;
+        this.onChange(this.value);
+    }
+    onFocusOut() {
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordInputComponent, isStandalone: true, selector: "c8y-password-input", inputs: { id: "id", autocomplete: "autocomplete" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PasswordInputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"input-group input-group-lg input-group-password\">\n  <input\n    class=\"form-control input-lg\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [id]=\"id\"\n    (input)=\"onInput($event)\"\n    (focusout)=\"onFocusOut()\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      *ngIf=\"type === 'password'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Show password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'text'\"\n    >\n      <i class=\"dlt-c8y-icon-eye\"></i>\n    </button>\n    <button\n      *ngIf=\"type === 'text'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Hide password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'password'\"\n    >\n      <i class=\"dlt-c8y-icon-eye-slash\"></i>\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-user-menu-item', standalone: true, imports: [NgIf, C8yTranslatePipe, AsyncPipe], template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: UserMenuService }, { type: HeaderService }], propDecorators: { icon: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], link: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], priority: [{
+            args: [{ selector: 'c8y-password-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PasswordInputComponent),
+                            multi: true
+                        }
+                    ], standalone: true, imports: [NgIf, C8yTranslatePipe], template: "<div class=\"input-group input-group-lg input-group-password\">\n  <input\n    class=\"form-control input-lg\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [id]=\"id\"\n    (input)=\"onInput($event)\"\n    (focusout)=\"onFocusOut()\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      *ngIf=\"type === 'password'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Show password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'text'\"\n    >\n      <i class=\"dlt-c8y-icon-eye\"></i>\n    </button>\n    <button\n      *ngIf=\"type === 'text'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Hide password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'password'\"\n    >\n      <i class=\"dlt-c8y-icon-eye-slash\"></i>\n    </button>\n  </span>\n</div>\n" }]
+        }], propDecorators: { id: [{
                 type: Input
-            }], dataCy: [{
+            }], autocomplete: [{
                 type: Input
-            }], template: [{
-                type: ViewChild,
-                args: ['template', { static: false }]
-            }], click: [{
-                type: Output
             }] } });
 
-class PasswordConfirmModalComponent {
-    constructor(user, ui, client, alert) {
-        this.user = user;
-        this.ui = ui;
-        this.client = client;
-        this.alert = alert;
-        this.passwordConfirmedEmitter = new EventEmitter();
-        this.loading = false;
+class PasswordConfirm {
+    constructor(passwordConfirm) {
+        this.passwordConfirm = passwordConfirm;
     }
-    async passwordConfirm() {
-        if (this.password) {
-            const supportUserName = this.ui.currentSupportUserName.value;
-            const userId = this.ui.currentUser.value.id;
-            const credentials = {
-                password: this.password,
-                user: `${supportUserName ? `${supportUserName}$` : ''}${userId}`,
-                tenant: this.client.tenant
-            };
-            try {
-                this.loading = true;
-                const auth = new BasicAuth(credentials);
-                const newClient = this.createNewClient(auth, this.client.baseUrl);
-                await newClient.user.current();
-                this.emitSuccessAndClose();
-            }
-            catch (e) {
-                if (e.res && e.res.status === 401 && e.data && /pin|totp/i.test(e.data.message)) {
-                    this.emitSuccessAndClose();
-                }
-                else {
-                    this.alert.danger(gettext$1("Provided password doesn't match your current one."));
-                }
-            }
-            finally {
-                this.loading = false;
-            }
+    validate(abControl) {
+        const value = abControl.value;
+        const controlToCompareWith = abControl.root.get(this.passwordConfirm);
+        if (controlToCompareWith && value !== controlToCompareWith.value) {
+            return { passwordConfirm: true };
         }
+        return null;
     }
-    cancel() {
-        this.passwordConfirmedEmitter.emit(false);
-        this.modal._dismiss();
-    }
-    createNewClient(auth, baseUrl) {
-        return new Client(auth, baseUrl);
-    }
-    emitSuccessAndClose() {
-        this.passwordConfirmedEmitter.emit(true);
-        this.modal._dismiss();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirmModalComponent, deps: [{ token: i1.UserService }, { token: AppStateService }, { token: i1.FetchClient }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordConfirmModalComponent, isStandalone: true, selector: "c8y-password-confirm-modal", outputs: { passwordConfirmedEmitter: "passwordConfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\r\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\r\n    <div class=\"d-block p-24 p-b-0\">\r\n      <c8y-form-group [hasWarning]=\"true\">\r\n        <label translate for=\"currentPassword\">Enter your password</label>\r\n        <input\r\n          id=\"currentPassword\"\r\n          [(ngModel)]=\"password\"\r\n          type=\"password\"\r\n          name=\"password\"\r\n          class=\"form-control\"\r\n          placeholder=\"{{ 'Enter your password' | translate }}\"\r\n          required\r\n        />\r\n        <c8y-messages>\r\n          <c8y-message translate>\r\n            Enter the password of the user that you are currently logged in with.\r\n          </c8y-message>\r\n        </c8y-messages>\r\n      </c8y-form-group>\r\n    </div>\r\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\r\n      <button\r\n        title=\"{{ 'Cancel' | translate }}\"\r\n        class=\"btn btn-default\"\r\n        type=\"button\"\r\n        (click)=\"cancel()\"\r\n      >\r\n        {{ 'Cancel' | translate }}\r\n      </button>\r\n      <button\r\n        title=\"{{ 'Confirm' | translate }}\"\r\n        class=\"btn btn-primary\"\r\n        type=\"submit\"\r\n        [disabled]=\"!confirmForm.form.valid || loading\"\r\n      >\r\n        {{ 'Confirm' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</c8y-modal>\r\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirm, deps: [{ token: 'passwordConfirm', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: PasswordConfirm, isStandalone: true, selector: "[passwordConfirm]", providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: PasswordConfirm,
+                multi: true
+            }
+        ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirmModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-password-confirm-modal', standalone: true, imports: [
-                        ModalComponent,
-                        FormsModule$1,
-                        FormGroupComponent,
-                        C8yTranslateDirective,
-                        RequiredInputPlaceholderDirective,
-                        MessagesComponent,
-                        MessageDirective,
-                        C8yTranslatePipe
-                    ], template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\r\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\r\n    <div class=\"d-block p-24 p-b-0\">\r\n      <c8y-form-group [hasWarning]=\"true\">\r\n        <label translate for=\"currentPassword\">Enter your password</label>\r\n        <input\r\n          id=\"currentPassword\"\r\n          [(ngModel)]=\"password\"\r\n          type=\"password\"\r\n          name=\"password\"\r\n          class=\"form-control\"\r\n          placeholder=\"{{ 'Enter your password' | translate }}\"\r\n          required\r\n        />\r\n        <c8y-messages>\r\n          <c8y-message translate>\r\n            Enter the password of the user that you are currently logged in with.\r\n          </c8y-message>\r\n        </c8y-messages>\r\n      </c8y-form-group>\r\n    </div>\r\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\r\n      <button\r\n        title=\"{{ 'Cancel' | translate }}\"\r\n        class=\"btn btn-default\"\r\n        type=\"button\"\r\n        (click)=\"cancel()\"\r\n      >\r\n        {{ 'Cancel' | translate }}\r\n      </button>\r\n      <button\r\n        title=\"{{ 'Confirm' | translate }}\"\r\n        class=\"btn btn-primary\"\r\n        type=\"submit\"\r\n        [disabled]=\"!confirmForm.form.valid || loading\"\r\n      >\r\n        {{ 'Confirm' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</c8y-modal>\r\n" }]
-        }], ctorParameters: () => [{ type: i1.UserService }, { type: AppStateService }, { type: i1.FetchClient }, { type: AlertService }], propDecorators: { passwordConfirmedEmitter: [{
-                type: Output
-            }], modal: [{
-                type: ViewChild,
-                args: ['modal', { static: false }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[passwordConfirm]',
+                    providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: PasswordConfirm,
+                            multi: true
+                        }
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['passwordConfirm']
+                }] }] });
 
-class CurrentPasswordModalComponent {
-    constructor(modal) {
-        this.modal = modal;
-        this.currentPasswordEmitter = new EventEmitter();
+class PasswordStrengthService {
+    constructor(ui) {
+        this.ui = ui;
+        this.GREEN_MIN_LENGTH_DEFAULT = 8;
+        this.passwordStrengthSetting = {
+            enforcePasswordStrength: false,
+            greenMinLength: this.GREEN_MIN_LENGTH_DEFAULT,
+            passwordStrengthValidity: false
+        };
     }
-    passwordConfirm() {
-        this.currentPasswordEmitter.emit(this.password);
-        this.modal.hide();
+    /**
+     * Gets the minimal number of characters that a password should have to be considered a “green” strong one.
+     * @return The min length for password or default value.
+     */
+    async getGreenMinLength() {
+        const { greenMinLength } = (await this.getBasicAuthLoginOption()) || { greenMinLength: null };
+        this.passwordStrengthSetting.greenMinLength = greenMinLength || this.GREEN_MIN_LENGTH_DEFAULT;
+        return this.passwordStrengthSetting.greenMinLength;
     }
-    cancel() {
-        this.currentPasswordEmitter.emit(null);
-        this.modal.hide();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CurrentPasswordModalComponent, deps: [{ token: i1$7.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CurrentPasswordModalComponent, isStandalone: true, selector: "c8y-current-password-modal", outputs: { currentPasswordEmitter: "currentPasswordEmitter" }, ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\n    <div class=\"d-block p-24\">\n      <c8y-form-group [hasWarning]=\"true\">\n        <label translate for=\"currentPassword\">Enter your password</label>\n        <input\n          id=\"currentPassword\"\n          [(ngModel)]=\"password\"\n          type=\"password\"\n          name=\"password\"\n          class=\"form-control\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message translate>\n            The password of the user that you are currently logged in with.\n          </c8y-message>\n        </c8y-messages>\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=\"{{ 'Confirm' | translate }}\"\n        class=\"btn btn-primary\"\n        [attr.data-cy]=\"'confirm-current-password-confirm-button'\"\n        type=\"submit\"\n        [disabled]=\"!confirmForm.form.valid\"\n      >\n        {{ 'Confirm' | translate }}\n      </button>\n    </div>\n  </form>\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: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CurrentPasswordModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-current-password-modal', standalone: true, imports: [
-                        ModalComponent,
-                        FormsModule$1,
-                        FormGroupComponent,
-                        C8yTranslateDirective,
-                        RequiredInputPlaceholderDirective,
-                        MessagesComponent,
-                        MessageDirective,
-                        C8yTranslatePipe
-                    ], template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\n    <div class=\"d-block p-24\">\n      <c8y-form-group [hasWarning]=\"true\">\n        <label translate for=\"currentPassword\">Enter your password</label>\n        <input\n          id=\"currentPassword\"\n          [(ngModel)]=\"password\"\n          type=\"password\"\n          name=\"password\"\n          class=\"form-control\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message translate>\n            The password of the user that you are currently logged in with.\n          </c8y-message>\n        </c8y-messages>\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=\"{{ 'Confirm' | translate }}\"\n        class=\"btn btn-primary\"\n        [attr.data-cy]=\"'confirm-current-password-confirm-button'\"\n        type=\"submit\"\n        [disabled]=\"!confirmForm.form.valid\"\n      >\n        {{ 'Confirm' | translate }}\n      </button>\n    </div>\n  </form>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1$7.BsModalRef }], propDecorators: { currentPasswordEmitter: [{
-                type: Output
-            }] } });
-
-class PasswordService {
-    constructor(modalService) {
-        this.modalService = modalService;
-        this.DEFAULT_PASSWORD_MIN_LENGTH = 8;
-        this.GREEN = {
-            colorName: 'green',
-            color: 'rgb(0, 128, 0)',
-            description: gettext$1('strong'),
-            passwordStrength: PasswordStrength.GREEN
-        };
-        this.YELLOW = {
-            colorName: 'yellow',
-            color: 'rgb(255, 204, 51)',
-            description: gettext$1('medium'),
-            passwordStrength: PasswordStrength.YELLOW
-        };
-        this.RED = {
-            colorName: 'red',
-            color: 'rgb(170, 0, 51)',
-            description: gettext$1('weak'),
-            passwordStrength: PasswordStrength.RED
-        };
-    }
-    confirmPassword() {
-        const modalInstance = this.modalService.show(PasswordConfirmModalComponent, {
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title'
-        });
-        const passwordConfirmedEmitter = modalInstance.content.passwordConfirmedEmitter;
-        return passwordConfirmedEmitter.pipe(take(1));
+    /**
+     * Checks if password strength is enforced for system
+     * by retrieving value of `enforceStrength` property from loginOptions response
+     * @param refresh boolean used to refresh the app state where result of loginOptions response is stored.
+     * If false, it takes value from memory,
+     * if true, it refresh the app state value and then retrives data.
+     * @return boolean value, true if enforced, false otherwise.
+     */
+    async getEnforcePasswordStrength(refresh) {
+        const loginOption = await this.getBasicAuthLoginOption(refresh);
+        const enforcePasswordStrength = loginOption?.enforceStrength;
+        if (typeof enforcePasswordStrength === 'string') {
+            this.passwordStrengthSetting.enforcePasswordStrength =
+                enforcePasswordStrength === 'true' ? true : false;
+        }
+        else {
+            this.passwordStrengthSetting.enforcePasswordStrength = !!enforcePasswordStrength;
+        }
+        return this.passwordStrengthSetting.enforcePasswordStrength;
     }
     /**
-     * Returns an observable with the password provided by user:
-     * - `string` when user provided a value
-     * - `null` when user cancelled the modal
+     * Checks if password strength is enforced for particular tenant
+     * by retrieving value of `strengthValidity` property from loginOptions response
+     * @param refresh boolean used to refresh the app state where result of loginOptions response is stored.
+     * If false, it takes value from memory,
+     * if true, it refresh the app state value and then retrives data.
+     * @return boolean value, true if enforced, false otherwise.
      */
-    currentPassword() {
-        const modalInstance = this.modalService.show(CurrentPasswordModalComponent, {
-            class: 'modal-sm',
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title'
-        });
-        const currentPasswordEmitter = modalInstance.content.currentPasswordEmitter;
-        return currentPasswordEmitter.pipe(take(1));
-    }
-    hasLowerCase(password) {
-        return password.search(/[a-z]/) !== -1;
-    }
-    hasUpperCase(password) {
-        return password.search(/[A-Z]/) !== -1;
-    }
-    hasNumbers(password) {
-        return password.search(/[0-9]/) !== -1;
-    }
-    hasSpecialChars(password) {
-        return password.search(/[^0-9a-zA-Z]+/) !== -1;
-    }
-    getStrengthColor(password) {
-        const passwordStrength = filter$2([
-            this.hasLowerCase(password),
-            this.hasUpperCase(password),
-            this.hasNumbers(password),
-            this.hasSpecialChars(password)
-        ]).length;
-        if (passwordStrength > 3) {
-            return this.GREEN;
-        }
-        else if (passwordStrength >= 3) {
-            return this.YELLOW;
+    async getPasswordStrengthValidity(refresh = false) {
+        const loginOption = await this.getBasicAuthLoginOption(refresh);
+        const strengthValidity = loginOption?.strengthValidity;
+        if (typeof strengthValidity === 'string') {
+            this.passwordStrengthSetting.passwordStrengthValidity =
+                strengthValidity === 'true' ? true : false;
         }
         else {
-            return this.RED;
+            this.passwordStrengthSetting.passwordStrengthValidity = !!strengthValidity;
         }
+        return this.passwordStrengthSetting.passwordStrengthValidity;
     }
-    getDefaultPasswordMinLength() {
-        return this.DEFAULT_PASSWORD_MIN_LENGTH;
+    /**
+     * Function determines if enforced strength checks should be enabled for current tenant
+     * based on properties retrieved from loginOptions
+     * @param options object containing specific options:
+     *    - {refresh: true} - refreshes values of app state and returns fresh values as result of call
+     * @return boolean value, true if strength is enforced for tenant, false otherwise.
+     */
+    async getPasswordStrengthEnforced(options) {
+        const refresh = options && options.refresh;
+        return Promise.all([
+            this.getEnforcePasswordStrength(refresh),
+            this.getPasswordStrengthValidity(refresh)
+        ]).then(values => {
+            const [enforcePasswordStrength, passwordStrengthValidity] = values;
+            return enforcePasswordStrength || passwordStrengthValidity;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, deps: [{ token: i1$7.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, providedIn: 'root' }); }
+    async getBasicAuthLoginOption(refresh) {
+        if (refresh) {
+            await this.ui.refreshLoginOptions();
+        }
+        const loginOptions = this.ui.state.loginOptions || [];
+        const basicAuthLoginOption = loginOptions.find(({ type }) => type === 'BASIC');
+        return basicAuthLoginOption;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthService, deps: [{ token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$7.BsModalService }] });
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: AppStateService }] });
 
-class TotpSetupComponent {
-    get qrCodeImage() {
-        return this.totpSecret ? this.totpSecret.secretQrUrl : '';
-    }
-    get secret() {
-        return this.totpSecret ? this.totpSecret.rawSecret : '';
-    }
-    get qrData() {
-        // TODO: waiting for BE:, now we need extract it from secretQrUrl
-        // https://cumulocity.atlassian.net/browse/MTM-36387
-        // return this.totpSecret ? this.totpSecret.qrData : '';
-        const url = new URL(this.qrCodeImage);
-        const otpAuth = url.searchParams.get('chl') || url.searchParams.get('data');
-        if (!otpAuth) {
-            this.alert.danger(gettext$1('Failed to generate a QR code.'));
-            return '';
+class PasswordCheckListComponent {
+    set password(password) {
+        if (typeof password === 'string') {
+            this.onPasswordChange(password);
         }
-        return decodeURIComponent(otpAuth);
     }
-    constructor(user, alert) {
-        this.user = user;
-        this.alert = alert;
+    constructor(passwordStrength, passwordStrengthChecker, passwordService) {
+        this.passwordStrength = passwordStrength;
+        this.passwordStrengthChecker = passwordStrengthChecker;
+        this.passwordService = passwordService;
+        this.strengthEnforced = false;
+        this.onRequirementsFulfilled = new EventEmitter();
+        this.minGreenLength = 8;
+        this.enhancedStrengthCheckList = [
+            {
+                label: gettext$1('Include lowercase characters (for example, abcdef)'),
+                check: this.passwordStrengthChecker.hasLowerCase,
+                icon: '',
+                contextualColor: '',
+                textColor: ''
+            },
+            {
+                label: gettext$1('Include uppercase characters (for example, ABCDEF)'),
+                check: this.passwordStrengthChecker.hasUpperCase,
+                icon: '',
+                contextualColor: '',
+                textColor: ''
+            },
+            {
+                label: gettext$1('Include numbers (for example, 123456)'),
+                check: this.passwordStrengthChecker.hasNumbers,
+                icon: '',
+                contextualColor: '',
+                textColor: ''
+            },
+            {
+                label: gettext$1('Include symbols (for example, !@#$%^)'),
+                check: this.passwordStrengthChecker.hasSpecialChars,
+                icon: '',
+                contextualColor: '',
+                textColor: ''
+            }
+        ];
+        this.basicChecklist = [
+            {
+                label: gettext$1('Must have at least {{length}} characters'),
+                check: password => password.length >= this.minGreenLength,
+                icon: '',
+                contextualColor: '',
+                textColor: ''
+            }
+        ];
+        this.combinedChecklist = [];
     }
     async ngOnInit() {
-        try {
-            const { data } = await this.user.generateTotpSecret();
-            this.totpSecret = data;
-        }
-        catch (ex) {
-            this.alert.addServerFailure(ex);
+        this.minGreenLength = await this.passwordStrength.getGreenMinLength();
+        if (!this.minGreenLength) {
+            this.minGreenLength = this.passwordService.getDefaultPasswordMinLength();
         }
+        this.onPasswordChange('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpSetupComponent, deps: [{ token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TotpSetupComponent, isStandalone: true, selector: "c8y-totp-setup", ngImport: i0, template: "<div class=\"text-center\">\n  <p\n    class=\"m-24 m-t-16 m-b-0\"\n    translate\n  >\n    Scan this QR code with your smartphone using the authenticator application.\n  </p>\n\n  <div class=\"d-flex j-c-center\">\n    <qrcode\n      [width]=\"180\"\n      *ngIf=\"totpSecret\"\n      [qrdata]=\"qrData\"\n      [errorCorrectionLevel]=\"'M'\"\n      [elementType]=\"'svg'\"\n    ></qrcode>\n  </div>\n  <p class=\"text-center text-muted\">\n    {{ secret }}\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }] }); }
+    get translateParams() {
+        return {
+            length: this.minGreenLength
+        };
+    }
+    checkRequirement(requirement, password) {
+        const checked = requirement.check(password);
+        assign(requirement, {
+            icon: checked ? 'check-circle' : 'radio-button-unchecked',
+            contextualColor: checked ? 'text-success' : 'text-muted',
+            textColor: checked ? '' : 'text-muted'
+        });
+        return requirement;
+    }
+    onPasswordChange(password) {
+        this.basicChecklist.forEach(requirement => {
+            this.checkRequirement(requirement, password);
+        });
+        this.enhancedStrengthCheckList.forEach(requirement => {
+            this.checkRequirement(requirement, password);
+        });
+        this.combinedChecklist = [...this.basicChecklist, ...this.enhancedStrengthCheckList];
+        this.onRequirementsFulfilled.emit(this.isPasswordValid());
+    }
+    isPasswordValid() {
+        const checklist = this.strengthEnforced ? this.combinedChecklist : this.basicChecklist;
+        return checklist.every(requirement => requirement.icon !== 'radio-button-unchecked');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordCheckListComponent, deps: [{ token: PasswordStrengthService }, { token: PasswordService }, { token: PasswordService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordCheckListComponent, isStandalone: true, selector: "c8y-password-check-list", inputs: { strengthEnforced: "strengthEnforced", password: "password" }, outputs: { onRequirementsFulfilled: "onRequirementsFulfilled" }, ngImport: i0, template: "<div *ngIf=\"strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of combinedChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n\n<div *ngIf=\"!strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of basicChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n\n  <div class=\"m-b-8\">\n    {{ 'We recommend you to meet these conditions for a stronger password:' | translate }}\n  </div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of enhancedStrengthCheckList\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpSetupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordCheckListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-totp-setup', standalone: true, imports: [C8yTranslateDirective, NgIf, QRCodeComponent], template: "<div class=\"text-center\">\n  <p\n    class=\"m-24 m-t-16 m-b-0\"\n    translate\n  >\n    Scan this QR code with your smartphone using the authenticator application.\n  </p>\n\n  <div class=\"d-flex j-c-center\">\n    <qrcode\n      [width]=\"180\"\n      *ngIf=\"totpSecret\"\n      [qrdata]=\"qrData\"\n      [errorCorrectionLevel]=\"'M'\"\n      [elementType]=\"'svg'\"\n    ></qrcode>\n  </div>\n  <p class=\"text-center text-muted\">\n    {{ secret }}\n  </p>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.UserService }, { type: AlertService }] });
+            args: [{ selector: 'c8y-password-check-list', standalone: true, imports: [NgIf, NgFor, IconDirective, C8yTranslateDirective, C8yTranslatePipe], template: "<div *ngIf=\"strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of combinedChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n\n<div *ngIf=\"!strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of basicChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n\n  <div class=\"m-b-8\">\n    {{ 'We recommend you to meet these conditions for a stronger password:' | translate }}\n  </div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of enhancedStrengthCheckList\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PasswordStrengthService }, { type: PasswordService }, { type: PasswordService }], propDecorators: { strengthEnforced: [{
+                type: Input
+            }], password: [{
+                type: Input,
+                args: ['password']
+            }], onRequirementsFulfilled: [{
+                type: Output
+            }] } });
 
-class TotpChallengeComponent {
-    constructor(users, alert) {
-        this.users = users;
-        this.alert = alert;
-        /**
-         * Calls the verify endpoint if set to true (default true)
-         */
-        this.verify = true;
-        /**
-         * Emits the token on success.
-         */
-        this.onSuccess = new EventEmitter();
-        /**
-         * Emits if set up two-factor authentication is canceled.
-         */
-        this.totpUnconfirmedEmitter = new EventEmitter();
-        this.loading = false;
-        this.hasError = false;
-        this.isModal = false;
-        this.model = {
-            token: ''
-        };
+class NewPasswordComponent {
+    set _newPasswordModel(ngModel) {
+        if (ngModel) {
+            this.newPasswordModel = ngModel;
+            ngModel.control.addValidators(this.passwordChecklistValidator);
+        }
     }
-    async verifyCode() {
-        try {
-            this.loading = true;
-            this.hasError = false;
-            if (this.verify) {
-                await this.users.verifyTotpCode(this.model.token);
-            }
-            this.onSuccess.emit(this.model.token);
+    constructor(passwordStrength, cdRef, elementRef) {
+        this.passwordStrength = passwordStrength;
+        this.cdRef = cdRef;
+        this.elementRef = elementRef;
+        this.password = new EventEmitter();
+        this.showChangePasswordButton = true;
+        this.model = {};
+        this.changePassword = false;
+        this.passwordEnforced = false;
+        this.passwordChecklistValidator = () => this.requirementsFulfilled ? null : { passwordStrengthChecklist: true };
+    }
+    ngOnInit() {
+        this.loadPasswordStrengthSettings();
+        this.passwordStrength.getGreenMinLength().then(value => {
+            this.minlength = value;
+        });
+    }
+    async ngOnChanges(changes) {
+        if (changes.showChangePasswordButton) {
+            this.changePassword = !this.showChangePasswordButton;
         }
-        catch (e) {
-            this.hasError = true;
-            this.alert.removeLastDanger();
-            this.loading = false;
+        if (changes.requireStrongPassword?.previousValue !== changes.requireStrongPassword?.currentValue) {
+            await this.loadPasswordStrengthSettings();
         }
     }
-    cancel() {
-        this.totpUnconfirmedEmitter.emit();
+    newPasswordChanged() {
+        this.password.emit({
+            password: this.model.newPassword,
+            passwordStrength: this.model.strength
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpChallengeComponent, deps: [{ token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TotpChallengeComponent, isStandalone: true, selector: "c8y-totp-challenge", inputs: { verify: "verify", loading: "loading", hasError: "hasError", isModal: "isModal" }, outputs: { onSuccess: "onSuccess", totpUnconfirmedEmitter: "totpUnconfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-b-0\" [ngClass]=\"isModal ? 'p-24' : 'p-t-24'\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"{ 'p-b-24': hasError }\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div [ngClass]=\"isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'\">\n    <button\n      class=\"btn btn-default\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verify' | translate }}\"\n      *ngIf=\"!loading\"\n      [disabled]=\"!totpForm.form.valid\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      class=\"btn btn-primary btn-pending\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      *ngIf=\"loading\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    updateValidity(requirementsFulfilled) {
+        this.requirementsFulfilled = requirementsFulfilled;
+        this.cdRef.detectChanges();
+        this.newPasswordModel.control.updateValueAndValidity();
+        // There are two validators checking password validity, but we only want to show one of these errors at a time,
+        // where checklist validator takes priority.
+        if (!this.requirementsFulfilled) {
+            delete this.newPasswordModel.control.errors['password'];
+        }
+    }
+    async loadPasswordStrengthSettings() {
+        if (this.requireStrongPassword) {
+            this.passwordEnforced = this.requireStrongPassword;
+        }
+        else {
+            const passwordStrengthSettings = await this.passwordStrength.getPasswordStrengthEnforced({
+                refresh: true
+            });
+            this.passwordEnforced = passwordStrengthSettings;
+        }
+    }
+    toggleChangePassword() {
+        this.changePassword = !this.changePassword;
+        if (!this.changePassword) {
+            this.password.emit({});
+            this.model = {};
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NewPasswordComponent, deps: [{ token: PasswordStrengthService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NewPasswordComponent, isStandalone: true, selector: "c8y-new-password", inputs: { showChangePasswordButton: "showChangePasswordButton", requireStrongPassword: "requireStrongPassword" }, outputs: { password: "password" }, viewQueries: [{ propertyName: "_newPasswordModel", first: true, predicate: ["newPassword"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showChangePasswordButton\" class=\"form-group\">\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"toggleChangePassword()\"\n    data-cy=\"c8y-new-password--change-button\"\n  >\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div\n  class=\"row content-flex-50\"\n  *ngIf=\"changePassword\"\n>\n  <div class=\"col-6\">\n    <c8y-form-group>\n      <label\n        for=\"newPassword\"\n        translate\n      >\n        Password\n      </label>\n      <c8y-password-input\n        name=\"newPassword\"\n        required\n        [id]=\"'newPassword'\"\n        #newPassword=\"ngModel\"\n        [(ngModel)]=\"model.newPassword\"\n        (change)=\"newPasswordChanged()\"\n        (input)=\"newPasswordConfirm.control.updateValueAndValidity()\"\n        c8yDefaultValidation=\"password\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label\n        for=\"newConfirmPassword\"\n        translate\n      >\n        Confirm password\n      </label>\n      <c8y-password-input\n        name=\"newPasswordConfirm\"\n        required\n        [id]=\"'newConfirmPassword'\"\n        #newPasswordConfirm=\"ngModel\"\n        [(ngModel)]=\"model.newPasswordConfirm\"\n        passwordConfirm=\"newPassword\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-6\">\n    <c8y-password-check-list\n      [password]=\"model.newPassword\"\n      [strengthEnforced]=\"passwordEnforced\"\n      (onRequirementsFulfilled)=\"updateValidity($event)\"\n    ></c8y-password-check-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: PasswordConfirm, selector: "[passwordConfirm]" }, { kind: "component", type: PasswordCheckListComponent, selector: "c8y-password-check-list", inputs: ["strengthEnforced", "password"], outputs: ["onRequirementsFulfilled"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TotpChallengeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NewPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-totp-challenge', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
-                        FormsModule$1,
-                        NgClass,
+            args: [{ selector: 'c8y-new-password', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
+                        NgIf,
                         FormGroupComponent,
                         C8yTranslateDirective,
-                        RequiredInputPlaceholderDirective,
-                        NgIf,
+                        PasswordInputComponent,
+                        FormsModule$1,
+                        DefaultValidationDirective,
+                        PasswordConfirm,
+                        PasswordCheckListComponent,
                         C8yTranslatePipe
-                    ], template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-b-0\" [ngClass]=\"isModal ? 'p-24' : 'p-t-24'\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"{ 'p-b-24': hasError }\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div [ngClass]=\"isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'\">\n    <button\n      class=\"btn btn-default\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verify' | translate }}\"\n      *ngIf=\"!loading\"\n      [disabled]=\"!totpForm.form.valid\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      class=\"btn btn-primary btn-pending\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      *ngIf=\"loading\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.UserService }, { type: AlertService }], propDecorators: { verify: [{
-                type: Input
-            }], onSuccess: [{
-                type: Output
-            }], totpUnconfirmedEmitter: [{
+                    ], template: "<div *ngIf=\"showChangePasswordButton\" class=\"form-group\">\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"toggleChangePassword()\"\n    data-cy=\"c8y-new-password--change-button\"\n  >\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div\n  class=\"row content-flex-50\"\n  *ngIf=\"changePassword\"\n>\n  <div class=\"col-6\">\n    <c8y-form-group>\n      <label\n        for=\"newPassword\"\n        translate\n      >\n        Password\n      </label>\n      <c8y-password-input\n        name=\"newPassword\"\n        required\n        [id]=\"'newPassword'\"\n        #newPassword=\"ngModel\"\n        [(ngModel)]=\"model.newPassword\"\n        (change)=\"newPasswordChanged()\"\n        (input)=\"newPasswordConfirm.control.updateValueAndValidity()\"\n        c8yDefaultValidation=\"password\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label\n        for=\"newConfirmPassword\"\n        translate\n      >\n        Confirm password\n      </label>\n      <c8y-password-input\n        name=\"newPasswordConfirm\"\n        required\n        [id]=\"'newConfirmPassword'\"\n        #newPasswordConfirm=\"ngModel\"\n        [(ngModel)]=\"model.newPasswordConfirm\"\n        passwordConfirm=\"newPassword\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-6\">\n    <c8y-password-check-list\n      [password]=\"model.newPassword\"\n      [strengthEnforced]=\"passwordEnforced\"\n      (onRequirementsFulfilled)=\"updateValidity($event)\"\n    ></c8y-password-check-list>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PasswordStrengthService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { password: [{
                 type: Output
-            }], loading: [{
-                type: Input
-            }], hasError: [{
+            }], showChangePasswordButton: [{
                 type: Input
-            }], isModal: [{
+            }], requireStrongPassword: [{
                 type: Input
-            }], modal: [{
+            }], _newPasswordModel: [{
                 type: ViewChild,
-                args: ['modal', { static: false }]
+                args: ['newPassword']
             }] } });
 
-class UserTotpSetupComponent {
-    constructor(user, modalService, modal, authService) {
-        this.user = user;
-        this.modalService = modalService;
-        this.modal = modal;
-        this.authService = authService;
-    }
-    async totpSetupVerified() {
-        await this.user.activateTotp();
-        this.modal.hide();
-        try {
-            await this.modalService.acknowledge(gettext$1('Logout required'), gettext$1('You must log out in order to apply your changes'), Status.WARNING, gettext$1('Log out'));
-            await this.authService.logout();
-        }
-        catch (ex) {
-            // intended empty
+class UserEditComponent {
+    set user(u) {
+        if (u) {
+            this._user = clone(u);
+            this.userIsExternal = u.customProperties.userOrigin === 'OAUTH2';
+            this.isPhoneRequired = this.isPhoneRequired && u.twoFactorAuthenticationEnabled;
         }
     }
-    close() {
-        this.modal.hide();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserTotpSetupComponent, deps: [{ token: i1.UserService }, { token: ModalService }, { token: i1$7.BsModalRef }, { token: SimplifiedAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserTotpSetupComponent, isStandalone: true, selector: "c8y-user-totp-setup", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Set up two-factor authentication' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-phonelink-lock\"></span>\n  </ng-container>\n\n  <c8y-totp-setup></c8y-totp-setup>\n  <c8y-totp-challenge [isModal]=\"true\" (onSuccess)=\"totpSetupVerified()\" (totpUnconfirmedEmitter)=\"close()\"></c8y-totp-challenge>\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: TotpSetupComponent, selector: "c8y-totp-setup" }, { kind: "component", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: ["verify", "loading", "hasError", "isModal"], outputs: ["onSuccess", "totpUnconfirmedEmitter"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserTotpSetupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-user-totp-setup', standalone: true, imports: [ModalComponent, TotpSetupComponent, TotpChallengeComponent, C8yTranslatePipe], template: "<c8y-modal\n  [title]=\"'Set up two-factor authentication' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-phonelink-lock\"></span>\n  </ng-container>\n\n  <c8y-totp-setup></c8y-totp-setup>\n  <c8y-totp-challenge [isModal]=\"true\" (onSuccess)=\"totpSetupVerified()\" (totpUnconfirmedEmitter)=\"close()\"></c8y-totp-challenge>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1.UserService }, { type: ModalService }, { type: i1$7.BsModalRef }, { type: SimplifiedAuthService }] });
-
-/**
- * The component is used to display a password control that includes the functionality of hiding and showing the input value.
- */
-class PasswordInputComponent {
-    constructor() {
-        /**
-         * Id of input
-         */
-        this.id = '';
-        /**
-         * Value for autocomplete attribute of input
-         */
-        this.autocomplete = 'off';
-        this.value = '';
-        this.disabled = false;
-        this.type = 'password';
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-        this.onChange = value => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
+    get user() {
+        return this._user;
     }
-    writeValue(value) {
-        this.value = value ? value : '';
+    constructor(state, translate, bsModalService, alert, userService, tenantLoginOptionsService, tenantService) {
+        this.state = state;
+        this.translate = translate;
+        this.bsModalService = bsModalService;
+        this.alert = alert;
+        this.userService = userService;
+        this.tenantLoginOptionsService = tenantLoginOptionsService;
+        this.tenantService = tenantService;
+        this.loading = false;
+        this.showProductExperienceOptions = false;
+        this.isUsageTrackingEnabled = true;
+        this.isUserEngagementPreferenceEnabled = true;
+        this.focusOnNewPassword = false;
+        this.onUser = new EventEmitter();
+        this.onUsageTrackingChange = new EventEmitter();
+        this.onUserEngagementPreferenceChange = new EventEmitter();
+        this.onCancel = new EventEmitter();
+        this.newPasswordComponent = viewChild(NewPasswordComponent);
+        this.userHasActiveTotp = false;
+        this.userCanSetupTotp = false;
+        this.isPhoneRequired = false;
+        effect(() => {
+            if (this.focusOnNewPassword && this.newPasswordComponent()) {
+                this.newPasswordComponent().toggleChangePassword();
+                setTimeout(() => {
+                    this.newPasswordComponent().elementRef.nativeElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center'
+                    });
+                }, 100);
+            }
+        });
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    async ngOnInit() {
+        const currentTenant = (await this.tenantService.current()).data;
+        const { enabledOnSystemLevel, enabledOnTenantLevel } = await this.tenantService.getTfaSettings(currentTenant);
+        this.isTfaEnabled = enabledOnSystemLevel || enabledOnTenantLevel;
+        await this.initializeTotpSettings();
+        if (this.user.twoFactorAuthenticationEnabled && !this.userCanSetupTotp) {
+            this.isPhoneRequired = true;
+        }
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    setupTotp() {
+        this.bsModalService.show(UserTotpSetupComponent, {
+            class: 'modal-sm',
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title'
+        });
+        this.cancel(); // to close the user edit modal and prevent console errors on logout
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    cancel() {
+        this.onCancel.emit();
     }
-    onInput($event) {
-        this.value = $event.currentTarget.value;
-        this.onChange(this.value);
+    async save() {
+        if (this.loading) {
+            return;
+        }
+        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);
     }
-    onFocusOut() {
-        this.onTouched();
+    onNewPasswordChanged(newPassword) {
+        this._user.password = newPassword.password;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordInputComponent, isStandalone: true, selector: "c8y-password-input", inputs: { id: "id", autocomplete: "autocomplete" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => PasswordInputComponent),
-                multi: true
+    async initializeTotpSettings() {
+        try {
+            this.userCanSetupTotp = await this.canUserSetupTotp();
+            if (this.userCanSetupTotp) {
+                const { data: totpActivity } = await this.userService.getActivityTotp();
+                this.userHasActiveTotp = totpActivity.isActive;
             }
-        ], ngImport: i0, template: "<div class=\"input-group input-group-lg input-group-password\">\n  <input\n    class=\"form-control input-lg\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [id]=\"id\"\n    (input)=\"onInput($event)\"\n    (focusout)=\"onFocusOut()\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      *ngIf=\"type === 'password'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Show password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'text'\"\n    >\n      <i class=\"dlt-c8y-icon-eye\"></i>\n    </button>\n    <button\n      *ngIf=\"type === 'text'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Hide password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'password'\"\n    >\n      <i class=\"dlt-c8y-icon-eye-slash\"></i>\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        }
+        catch (ex) {
+            this.alert.removeLastDanger();
+        }
+    }
+    async canUserSetupTotp() {
+        // we don't check for tenant options here due to permission restrictions on that end-point
+        const loginOptions = (await this.tenantLoginOptionsService.listForCurrentTenant()).data;
+        return loginOptions.some(({ tfaStrategy = '' }) => tfaStrategy.toLowerCase() === 'totp');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditComponent, deps: [{ token: AppStateService }, { token: TranslateService }, { token: i1$7.BsModalService }, { token: AlertService }, { token: i1.UserService }, { token: i1.TenantLoginOptionsService }, { token: i1.TenantService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: UserEditComponent, isStandalone: true, selector: "c8y-user-edit", inputs: { loading: "loading", user: "user", showProductExperienceOptions: "showProductExperienceOptions", isUsageTrackingEnabled: "isUsageTrackingEnabled", isUserEngagementPreferenceEnabled: "isUserEngagementPreferenceEnabled", focusOnNewPassword: "focusOnNewPassword" }, outputs: { onUser: "onUser", onUsageTrackingChange: "onUsageTrackingChange", onUserEngagementPreferenceChange: "onUserEngagementPreferenceChange", onCancel: "onCancel" }, viewQueries: [{ propertyName: "newPasswordComponent", first: true, predicate: NewPasswordComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "component", type: NewPasswordComponent, selector: "c8y-new-password", inputs: ["showChangePasswordButton", "requireStrongPassword"], outputs: ["password"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-password-input', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => PasswordInputComponent),
-                            multi: true
-                        }
-                    ], standalone: true, imports: [NgIf, C8yTranslatePipe], template: "<div class=\"input-group input-group-lg input-group-password\">\n  <input\n    class=\"form-control input-lg\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [id]=\"id\"\n    (input)=\"onInput($event)\"\n    (focusout)=\"onFocusOut()\"\n    [disabled]=\"disabled\"\n    [autocomplete]=\"autocomplete\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      *ngIf=\"type === 'password'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Show password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'text'\"\n    >\n      <i class=\"dlt-c8y-icon-eye\"></i>\n    </button>\n    <button\n      *ngIf=\"type === 'text'\"\n      class=\"btn btn-clean\"\n      title=\"{{ 'Hide password' | translate }}\"\n      type=\"button\"\n      (click)=\"type = 'password'\"\n    >\n      <i class=\"dlt-c8y-icon-eye-slash\"></i>\n    </button>\n  </span>\n</div>\n" }]
-        }], propDecorators: { id: [{
+            args: [{ selector: 'c8y-user-edit', standalone: true, imports: [
+                        FormsModule$1,
+                        NgIf,
+                        C8yTranslateDirective,
+                        FormGroupComponent,
+                        RequiredInputPlaceholderDirective,
+                        DefaultValidationDirective,
+                        PhoneValidationDirective,
+                        NewPasswordComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: AppStateService }, { type: TranslateService }, { type: i1$7.BsModalService }, { type: AlertService }, { type: i1.UserService }, { type: i1.TenantLoginOptionsService }, { type: i1.TenantService }], propDecorators: { loading: [{
                 type: Input
-            }], autocomplete: [{
+            }], user: [{
+                type: Input
+            }], showProductExperienceOptions: [{
+                type: Input
+            }], isUsageTrackingEnabled: [{
+                type: Input
+            }], isUserEngagementPreferenceEnabled: [{
+                type: Input
+            }], focusOnNewPassword: [{
                 type: Input
+            }], onUser: [{
+                type: Output
+            }], onUsageTrackingChange: [{
+                type: Output
+            }], onUserEngagementPreferenceChange: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
             }] } });
 
-class PasswordConfirm {
-    constructor(passwordConfirm) {
-        this.passwordConfirm = passwordConfirm;
-    }
-    validate(abControl) {
-        const value = abControl.value;
-        const controlToCompareWith = abControl.root.get(this.passwordConfirm);
-        if (controlToCompareWith && value !== controlToCompareWith.value) {
-            return { passwordConfirm: true };
-        }
-        return null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirm, deps: [{ token: 'passwordConfirm', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: PasswordConfirm, isStandalone: true, selector: "[passwordConfirm]", providers: [
-            {
-                provide: NG_VALIDATORS,
-                useExisting: PasswordConfirm,
-                multi: true
-            }
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordConfirm, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[passwordConfirm]',
-                    providers: [
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: PasswordConfirm,
-                            multi: true
-                        }
-                    ],
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['passwordConfirm']
-                }] }] });
-
-class PasswordStrengthService {
-    constructor(ui) {
+class UserEditModalComponent {
+    constructor(modal, user, ui, auth, client, alert, userPreferences, c8yModalService, gainsightService, cookieBannerService, passwordService, userEngagementsService) {
+        this.modal = modal;
+        this.user = user;
         this.ui = ui;
-        this.GREEN_MIN_LENGTH_DEFAULT = 8;
-        this.passwordStrengthSetting = {
-            enforcePasswordStrength: false,
-            greenMinLength: this.GREEN_MIN_LENGTH_DEFAULT,
-            passwordStrengthValidity: false
-        };
+        this.auth = auth;
+        this.client = client;
+        this.alert = alert;
+        this.userPreferences = userPreferences;
+        this.c8yModalService = c8yModalService;
+        this.gainsightService = gainsightService;
+        this.cookieBannerService = cookieBannerService;
+        this.passwordService = passwordService;
+        this.userEngagementsService = userEngagementsService;
+        this.loading = false;
+        this.showProductExperienceOptions = false;
+        this.passwordChange = false;
     }
-    /**
-     * Gets the minimal number of characters that a password should have to be considered a “green” strong one.
-     * @return The min length for password or default value.
-     */
-    async getGreenMinLength() {
-        const { greenMinLength } = (await this.getBasicAuthLoginOption()) || { greenMinLength: null };
-        this.passwordStrengthSetting.greenMinLength = greenMinLength || this.GREEN_MIN_LENGTH_DEFAULT;
-        return this.passwordStrengthSetting.greenMinLength;
+    async ngOnInit() {
+        this.updateUserInAppState();
+        await this.setInitialProductExperienceOptions();
     }
     /**
-     * Checks if password strength is enforced for system
-     * by retrieving value of `enforceStrength` property from loginOptions response
-     * @param refresh boolean used to refresh the app state where result of loginOptions response is stored.
-     * If false, it takes value from memory,
-     * if true, it refresh the app state value and then retrives data.
-     * @return boolean value, true if enforced, false otherwise.
+     * Initializes product experience options for the user.
+     *
+     * This function performs the following operations:
+     * - Determines if the user has the permission to edit product experience options.
+     * - If the user has the permission and functional cookies are enabled:
+     *   - Checks whether personalized product experience tracking is active.
+     *   - Checks whether in-product information and communication is active.
      */
-    async getEnforcePasswordStrength(refresh) {
-        const loginOption = await this.getBasicAuthLoginOption(refresh);
-        const enforcePasswordStrength = loginOption?.enforceStrength;
-        if (typeof enforcePasswordStrength === 'string') {
-            this.passwordStrengthSetting.enforcePasswordStrength =
-                enforcePasswordStrength === 'true' ? true : false;
+    async setInitialProductExperienceOptions() {
+        this.showProductExperienceOptions =
+            await this.gainsightService.canEditProductExperienceSettings();
+        if (this.showProductExperienceOptions && this.cookieBannerService.isFunctionalCookieEnabled()) {
+            // Enable personalized product experience tracking option
+            this.currentUsageTrackingState =
+                !(await this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY));
+            // Enable in-product information & communication option
+            this.currentUserEngagementPreferenceInitialState =
+                this.userEngagementsService.userEngagementsEnabled$.value;
         }
-        else {
-            this.passwordStrengthSetting.enforcePasswordStrength = !!enforcePasswordStrength;
+    }
+    async onDismiss() {
+        this.modal.hide();
+    }
+    onUsageTrackingChange(isEnabled) {
+        this.usageTrackingState = isEnabled;
+    }
+    onUserEngagementPreferenceChange(isEnabled) {
+        this.userEngagementPreferenceNewState = isEnabled;
+    }
+    async updateAndClose(user) {
+        this.loading = true;
+        try {
+            const passwordChanged = Boolean(user.password);
+            const isExternalUser = user.customProperties.userOrigin === 'OAUTH2';
+            if (!isExternalUser && passwordChanged) {
+                const currentPassword = await this.passwordService.currentPassword().toPromise();
+                if (!currentPassword) {
+                    return;
+                }
+                await this.user.changeCurrentUserPassword(user.password, currentPassword);
+                this.updateCredentials(user.password);
+            }
+            if (user.customProperties.userOrigin !== 'OAUTH2') {
+                await this.user.updateCurrent(omit(user, 'password'));
+                await this.updateUserInAppState();
+            }
+            await this.updateProductExperienceOptions();
+            this.modal.hide();
+            this.alert.success(gettext$1('User saved.'));
+        }
+        catch (e) {
+            if (e) {
+                this.alert.addServerFailure(e);
+            }
+        }
+        finally {
+            this.loading = false;
         }
-        return this.passwordStrengthSetting.enforcePasswordStrength;
     }
-    /**
-     * Checks if password strength is enforced for particular tenant
-     * by retrieving value of `strengthValidity` property from loginOptions response
-     * @param refresh boolean used to refresh the app state where result of loginOptions response is stored.
-     * If false, it takes value from memory,
-     * if true, it refresh the app state value and then retrives data.
-     * @return boolean value, true if enforced, false otherwise.
-     */
-    async getPasswordStrengthValidity(refresh = false) {
-        const loginOption = await this.getBasicAuthLoginOption(refresh);
-        const strengthValidity = loginOption?.strengthValidity;
-        if (typeof strengthValidity === 'string') {
-            this.passwordStrengthSetting.passwordStrengthValidity =
-                strengthValidity === 'true' ? true : false;
+    async gainsightTrackingAppReload() {
+        try {
+            await this.c8yModalService.confirm(gettext$1('Reload required'), gettext$1('To change the tracking option in the entire application, you need to reload the page. If you have any unsaved changes, you can reload later. How would you like to proceed?'), Status.WARNING, {
+                ok: gettext$1('Reload now'),
+                cancel: gettext$1('Reload later')
+            });
+            location.reload();
         }
-        else {
-            this.passwordStrengthSetting.passwordStrengthValidity = !!strengthValidity;
+        catch (ex) {
+            // do nothing
         }
-        return this.passwordStrengthSetting.passwordStrengthValidity;
+    }
+    async updateProductExperienceOptions() {
+        this.updateUserEngagementsPreference();
+        await this.updateTrackingOption();
     }
     /**
-     * Function determines if enforced strength checks should be enabled for current tenant
-     * based on properties retrieved from loginOptions
-     * @param options object containing specific options:
-     *    - {refresh: true} - refreshes values of app state and returns fresh values as result of call
-     * @return boolean value, true if strength is enforced for tenant, false otherwise.
+     * 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.
      */
-    async getPasswordStrengthEnforced(options) {
-        const refresh = options && options.refresh;
-        return Promise.all([
-            this.getEnforcePasswordStrength(refresh),
-            this.getPasswordStrengthValidity(refresh)
-        ]).then(values => {
-            const [enforcePasswordStrength, passwordStrengthValidity] = values;
-            return enforcePasswordStrength || passwordStrengthValidity;
-        });
+    updateUserEngagementsPreference() {
+        if (this.currentUserEngagementPreferenceInitialState !== this.userEngagementPreferenceNewState) {
+            this.userEngagementsService.updateUserEngagementPreference(this.userEngagementPreferenceNewState);
+        }
     }
-    async getBasicAuthLoginOption(refresh) {
-        if (refresh) {
-            await this.ui.refreshLoginOptions();
-        }
-        const loginOptions = this.ui.state.loginOptions || [];
-        const basicAuthLoginOption = loginOptions.find(({ type }) => type === 'BASIC');
-        return basicAuthLoginOption;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthService, deps: [{ token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: AppStateService }] });
-
-class PasswordCheckListComponent {
-    set password(password) {
-        if (typeof password === 'string') {
-            this.onPasswordChange(password);
+    /**
+     * Asynchronously updates the tracking option for user preferences.
+     * If the current usage tracking state differs from the new state,
+     * it updates the Gainsight preferences and sets a functional cookie
+     * before triggering a reload of the application.
+     */
+    async updateTrackingOption() {
+        if (this.currentUsageTrackingState !== this.usageTrackingState) {
+            await this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY, this.usageTrackingState);
+            this.gainsightService.setFunctionalCookie(this.usageTrackingState);
+            await this.gainsightTrackingAppReload();
         }
     }
-    constructor(passwordStrength, passwordStrengthChecker, passwordService) {
-        this.passwordStrength = passwordStrength;
-        this.passwordStrengthChecker = passwordStrengthChecker;
-        this.passwordService = passwordService;
-        this.strengthEnforced = false;
-        this.onRequirementsFulfilled = new EventEmitter();
-        this.minGreenLength = 8;
-        this.enhancedStrengthCheckList = [
-            {
-                label: gettext$1('Include lowercase characters (for example, abcdef)'),
-                check: this.passwordStrengthChecker.hasLowerCase,
-                icon: '',
-                contextualColor: '',
-                textColor: ''
-            },
-            {
-                label: gettext$1('Include uppercase characters (for example, ABCDEF)'),
-                check: this.passwordStrengthChecker.hasUpperCase,
-                icon: '',
-                contextualColor: '',
-                textColor: ''
-            },
-            {
-                label: gettext$1('Include numbers (for example, 123456)'),
-                check: this.passwordStrengthChecker.hasNumbers,
-                icon: '',
-                contextualColor: '',
-                textColor: ''
-            },
-            {
-                label: gettext$1('Include symbols (for example, !@#$%^)'),
-                check: this.passwordStrengthChecker.hasSpecialChars,
-                icon: '',
-                contextualColor: '',
-                textColor: ''
-            }
-        ];
-        this.basicChecklist = [
-            {
-                label: gettext$1('Must have at least {{length}} characters'),
-                check: password => password.length >= this.minGreenLength,
-                icon: '',
-                contextualColor: '',
-                textColor: ''
-            }
-        ];
-        this.combinedChecklist = [];
-    }
-    async ngOnInit() {
-        this.minGreenLength = await this.passwordStrength.getGreenMinLength();
-        if (!this.minGreenLength) {
-            this.minGreenLength = this.passwordService.getDefaultPasswordMinLength();
-        }
-        this.onPasswordChange('');
+    async updateUserInAppState() {
+        const currentUserResult = await this.user.current();
+        this.ui.currentUser.next(currentUserResult.data);
     }
-    get translateParams() {
-        return {
-            length: this.minGreenLength
+    updateCredentials(password) {
+        const newCredentials = {
+            password,
+            user: this.ui.currentUser.value.id,
+            tenant: this.client.tenant
         };
+        this.auth.updateCredentials(newCredentials);
     }
-    checkRequirement(requirement, password) {
-        const checked = requirement.check(password);
-        assign(requirement, {
-            icon: checked ? 'check-circle' : 'radio-button-unchecked',
-            contextualColor: checked ? 'text-success' : 'text-muted',
-            textColor: checked ? '' : 'text-muted'
-        });
-        return requirement;
-    }
-    onPasswordChange(password) {
-        this.basicChecklist.forEach(requirement => {
-            this.checkRequirement(requirement, password);
-        });
-        this.enhancedStrengthCheckList.forEach(requirement => {
-            this.checkRequirement(requirement, password);
-        });
-        this.combinedChecklist = [...this.basicChecklist, ...this.enhancedStrengthCheckList];
-        this.onRequirementsFulfilled.emit(this.isPasswordValid());
-    }
-    isPasswordValid() {
-        const checklist = this.strengthEnforced ? this.combinedChecklist : this.basicChecklist;
-        return checklist.every(requirement => requirement.icon !== 'radio-button-unchecked');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordCheckListComponent, deps: [{ token: PasswordStrengthService }, { token: PasswordService }, { token: PasswordService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordCheckListComponent, isStandalone: true, selector: "c8y-password-check-list", inputs: { strengthEnforced: "strengthEnforced", password: "password" }, outputs: { onRequirementsFulfilled: "onRequirementsFulfilled" }, ngImport: i0, template: "<div *ngIf=\"strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of combinedChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n\n<div *ngIf=\"!strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of basicChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n\n  <div class=\"m-b-8\">\n    {{ 'We recommend you to meet these conditions for a stronger password:' | translate }}\n  </div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of enhancedStrengthCheckList\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditModalComponent, deps: [{ token: i1$7.BsModalRef }, { token: i1.UserService }, { token: AppStateService }, { token: i1.BasicAuth }, { token: i1.FetchClient }, { token: AlertService }, { token: UserPreferencesService }, { token: ModalService }, { token: GainsightService }, { token: CookieBannerService }, { token: PasswordService }, { token: UserEngagementsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserEditModalComponent, isStandalone: true, selector: "c8y-user-edit-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Edit user' | translate\"\n  [customFooter]=\"true\"\n  (onDismiss)=\"onDismiss()\"\n>\n  <c8y-user-edit\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isUserEngagementPreferenceEnabled]=\"currentUserEngagementPreferenceInitialState\"\n    [showProductExperienceOptions]=\"showProductExperienceOptions\"\n    [focusOnNewPassword]=\"passwordChange\"\n    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: UserEditComponent, selector: "c8y-user-edit", inputs: ["loading", "user", "showProductExperienceOptions", "isUsageTrackingEnabled", "isUserEngagementPreferenceEnabled", "focusOnNewPassword"], outputs: ["onUser", "onUsageTrackingChange", "onUserEngagementPreferenceChange", "onCancel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordCheckListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-password-check-list', standalone: true, imports: [NgIf, NgFor, IconDirective, C8yTranslateDirective, C8yTranslatePipe], template: "<div *ngIf=\"strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of combinedChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n\n<div *ngIf=\"!strengthEnforced\">\n  <div class=\"m-b-8\">{{ 'Password must meet the requirements below:' | translate }}</div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of basicChecklist\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n\n  <div class=\"m-b-8\">\n    {{ 'We recommend you to meet these conditions for a stronger password:' | translate }}\n  </div>\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"small d-flex\"\n      *ngFor=\"let requirement of enhancedStrengthCheckList\"\n    >\n      <i\n        class=\"{{ requirement.contextualColor }}\"\n        [c8yIcon]=\"requirement.icon\"\n      ></i>\n      <span\n        class=\"m-l-4 small {{ requirement.textColor }}\"\n        [translate]=\"requirement.label\"\n        [translateParams]=\"this.translateParams\"\n      ></span>\n    </li>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: PasswordStrengthService }, { type: PasswordService }, { type: PasswordService }], propDecorators: { strengthEnforced: [{
-                type: Input
-            }], password: [{
-                type: Input,
-                args: ['password']
-            }], onRequirementsFulfilled: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'c8y-user-edit-modal', standalone: true, imports: [ModalComponent, UserEditComponent, C8yTranslatePipe, AsyncPipe], template: "<c8y-modal\n  [title]=\"'Edit user' | translate\"\n  [customFooter]=\"true\"\n  (onDismiss)=\"onDismiss()\"\n>\n  <c8y-user-edit\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isUserEngagementPreferenceEnabled]=\"currentUserEngagementPreferenceInitialState\"\n    [showProductExperienceOptions]=\"showProductExperienceOptions\"\n    [focusOnNewPassword]=\"passwordChange\"\n    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalRef }, { type: i1.UserService }, { type: AppStateService }, { type: i1.BasicAuth }, { type: i1.FetchClient }, { type: AlertService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: PasswordService }, { type: UserEngagementsService }] });
 
-class NewPasswordComponent {
-    set _newPasswordModel(ngModel) {
-        if (ngModel) {
-            this.newPasswordModel = ngModel;
-            ngModel.control.addValidators(this.passwordChecklistValidator);
-        }
-    }
-    constructor(passwordStrength, cdRef) {
-        this.passwordStrength = passwordStrength;
-        this.cdRef = cdRef;
-        this.password = new EventEmitter();
-        this.showChangePasswordButton = true;
-        this.model = {};
-        this.changePassword = false;
-        this.passwordEnforced = false;
-        this.passwordChecklistValidator = () => this.requirementsFulfilled ? null : { passwordStrengthChecklist: true };
+/**
+ * Service to show a modal.
+ */
+class ModalService {
+    constructor(modalService, gainsightService) {
+        this.modalService = modalService;
+        this.gainsightService = gainsightService;
     }
-    ngOnInit() {
-        this.loadPasswordStrengthSettings();
-        this.passwordStrength.getGreenMinLength().then(value => {
-            this.minlength = value;
+    /**
+     * Shows a quick confirm message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
+     * @param confirmOptions Selection options to display as checkbox list.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels: modalLabels, status, confirmOptions },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
         });
-    }
-    async ngOnChanges(changes) {
-        if (changes.showChangePasswordButton) {
-            this.changePassword = !this.showChangePasswordButton;
-        }
-        if (changes.requireStrongPassword?.previousValue !== changes.requireStrongPassword?.currentValue) {
-            await this.loadPasswordStrengthSettings();
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
         }
+        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
+        return await modalRef.content.result;
     }
-    newPasswordChanged() {
-        this.password.emit({
-            password: this.model.newPassword,
-            passwordStrength: this.model.strength
+    /**
+     * Shows a quick acknowledge message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param acknowledgeLabel The label to use.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
+        const labels = { ok: acknowledgeLabel, cancel: null };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels, status },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
         });
-    }
-    updateValidity(requirementsFulfilled) {
-        this.requirementsFulfilled = requirementsFulfilled;
-        this.cdRef.detectChanges();
-        this.newPasswordModel.control.updateValueAndValidity();
-        // There are two validators checking password validity, but we only want to show one of these errors at a time,
-        // where checklist validator takes priority.
-        if (!this.requirementsFulfilled) {
-            delete this.newPasswordModel.control.errors['password'];
-        }
-    }
-    async loadPasswordStrengthSettings() {
-        if (this.requireStrongPassword) {
-            this.passwordEnforced = this.requireStrongPassword;
-        }
-        else {
-            const passwordStrengthSettings = await this.passwordStrength.getPasswordStrengthEnforced({
-                refresh: true
-            });
-            this.passwordEnforced = passwordStrengthSettings;
-        }
-    }
-    toggleChangePassword() {
-        this.changePassword = !this.changePassword;
-        if (!this.changePassword) {
-            this.password.emit({});
-            this.model = {};
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NewPasswordComponent, deps: [{ token: PasswordStrengthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NewPasswordComponent, isStandalone: true, selector: "c8y-new-password", inputs: { showChangePasswordButton: "showChangePasswordButton", requireStrongPassword: "requireStrongPassword" }, outputs: { password: "password" }, viewQueries: [{ propertyName: "_newPasswordModel", first: true, predicate: ["newPassword"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showChangePasswordButton\" class=\"form-group\">\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"toggleChangePassword()\"\n    data-cy=\"c8y-new-password--change-button\"\n  >\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div\n  class=\"row content-flex-50\"\n  *ngIf=\"changePassword\"\n>\n  <div class=\"col-6\">\n    <c8y-form-group>\n      <label\n        for=\"newPassword\"\n        translate\n      >\n        Password\n      </label>\n      <c8y-password-input\n        name=\"newPassword\"\n        required\n        [id]=\"'newPassword'\"\n        #newPassword=\"ngModel\"\n        [(ngModel)]=\"model.newPassword\"\n        (change)=\"newPasswordChanged()\"\n        (input)=\"newPasswordConfirm.control.updateValueAndValidity()\"\n        c8yDefaultValidation=\"password\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label\n        for=\"newConfirmPassword\"\n        translate\n      >\n        Confirm password\n      </label>\n      <c8y-password-input\n        name=\"newPasswordConfirm\"\n        required\n        [id]=\"'newConfirmPassword'\"\n        #newPasswordConfirm=\"ngModel\"\n        [(ngModel)]=\"model.newPasswordConfirm\"\n        passwordConfirm=\"newPassword\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-6\">\n    <c8y-password-check-list\n      [password]=\"model.newPassword\"\n      [strengthEnforced]=\"passwordEnforced\"\n      (onRequirementsFulfilled)=\"updateValidity($event)\"\n    ></c8y-password-check-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: PasswordConfirm, selector: "[passwordConfirm]" }, { kind: "component", type: PasswordCheckListComponent, selector: "c8y-password-check-list", inputs: ["strengthEnforced", "password"], outputs: ["onRequirementsFulfilled"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NewPasswordComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-new-password', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
-                        NgIf,
-                        FormGroupComponent,
-                        C8yTranslateDirective,
-                        PasswordInputComponent,
-                        FormsModule$1,
-                        DefaultValidationDirective,
-                        PasswordConfirm,
-                        PasswordCheckListComponent,
-                        C8yTranslatePipe
-                    ], template: "<div *ngIf=\"showChangePasswordButton\" class=\"form-group\">\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"toggleChangePassword()\"\n    data-cy=\"c8y-new-password--change-button\"\n  >\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div\n  class=\"row content-flex-50\"\n  *ngIf=\"changePassword\"\n>\n  <div class=\"col-6\">\n    <c8y-form-group>\n      <label\n        for=\"newPassword\"\n        translate\n      >\n        Password\n      </label>\n      <c8y-password-input\n        name=\"newPassword\"\n        required\n        [id]=\"'newPassword'\"\n        #newPassword=\"ngModel\"\n        [(ngModel)]=\"model.newPassword\"\n        (change)=\"newPasswordChanged()\"\n        (input)=\"newPasswordConfirm.control.updateValueAndValidity()\"\n        c8yDefaultValidation=\"password\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label\n        for=\"newConfirmPassword\"\n        translate\n      >\n        Confirm password\n      </label>\n      <c8y-password-input\n        name=\"newPasswordConfirm\"\n        required\n        [id]=\"'newConfirmPassword'\"\n        #newPasswordConfirm=\"ngModel\"\n        [(ngModel)]=\"model.newPasswordConfirm\"\n        passwordConfirm=\"newPassword\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-6\">\n    <c8y-password-check-list\n      [password]=\"model.newPassword\"\n      [strengthEnforced]=\"passwordEnforced\"\n      (onRequirementsFulfilled)=\"updateValidity($event)\"\n    ></c8y-password-check-list>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: PasswordStrengthService }, { type: i0.ChangeDetectorRef }], propDecorators: { password: [{
-                type: Output
-            }], showChangePasswordButton: [{
-                type: Input
-            }], requireStrongPassword: [{
-                type: Input
-            }], _newPasswordModel: [{
-                type: ViewChild,
-                args: ['newPassword']
-            }] } });
-
-class UserEditComponent {
-    set user(u) {
-        if (u) {
-            this._user = clone(u);
-            this.userIsExternal = u.customProperties.userOrigin === 'OAUTH2';
-            this.isPhoneRequired = this.isPhoneRequired && u.twoFactorAuthenticationEnabled;
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
         }
+        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
+        return await modalRef.content.result;
     }
-    get user() {
-        return this._user;
-    }
-    constructor(state, translate, bsModalService, alert, userService, tenantLoginOptionsService, tenantService) {
-        this.state = state;
-        this.translate = translate;
-        this.bsModalService = bsModalService;
-        this.alert = alert;
-        this.userService = userService;
-        this.tenantLoginOptionsService = tenantLoginOptionsService;
-        this.tenantService = tenantService;
-        this.loading = false;
-        this.showProductExperienceOptions = false;
-        this.isUsageTrackingEnabled = true;
-        this.isUserEngagementPreferenceEnabled = true;
-        this.onUser = new EventEmitter();
-        this.onUsageTrackingChange = new EventEmitter();
-        this.onUserEngagementPreferenceChange = new EventEmitter();
-        this.onCancel = new EventEmitter();
-        this.userHasActiveTotp = false;
-        this.userCanSetupTotp = false;
-        this.isPhoneRequired = false;
-    }
-    async ngOnInit() {
-        const currentTenant = (await this.tenantService.current()).data;
-        const { enabledOnSystemLevel, enabledOnTenantLevel } = await this.tenantService.getTfaSettings(currentTenant);
-        this.isTfaEnabled = enabledOnSystemLevel || enabledOnTenantLevel;
-        await this.initializeTotpSettings();
-        if (this.user.twoFactorAuthenticationEnabled && !this.userCanSetupTotp) {
-            this.isPhoneRequired = true;
-        }
+    /**
+     * Shows a quick logout confirmation modal.
+     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
+     */
+    async confirmLogout(body, status = Status.WARNING, labels = {}) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm and log out'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
+        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
     }
-    setupTotp() {
-        this.bsModalService.show(UserTotpSetupComponent, {
-            class: 'modal-sm',
+    async changeCurrentUserPassword() {
+        this.modalService.show(UserEditModalComponent, {
+            initialState: { passwordChange: true },
             ariaDescribedby: 'modal-body',
             ariaLabelledBy: 'modal-title'
         });
-        this.cancel(); // to close the user edit modal and prevent console errors on logout
-    }
-    cancel() {
-        this.onCancel.emit();
-    }
-    async save() {
-        if (this.loading) {
-            return;
-        }
-        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);
     }
-    onNewPasswordChanged(newPassword) {
-        this._user.password = newPassword.password;
+    triggerEvent(result, labels, productExperienceEvent) {
+        const data = { ...productExperienceEvent.data, url: window.location.href };
+        result
+            .then(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.ok
+            });
+        })
+            .catch(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.cancel
+            });
+        });
     }
-    async initializeTotpSettings() {
-        try {
-            this.userCanSetupTotp = await this.canUserSetupTotp();
-            if (this.userCanSetupTotp) {
-                const { data: totpActivity } = await this.userService.getActivityTotp();
-                this.userHasActiveTotp = totpActivity.isActive;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
+
+class ThemeSwitcherService {
+    constructor(options) {
+        this.options = options;
+        this.darkThemeClass = `c8y-dark-theme`;
+        this.themeOptions = [
+            {
+                label: gettext$1('Light'),
+                value: 'light',
+                icon: 'sun'
+            },
+            {
+                label: gettext$1('Dark'),
+                value: 'dark',
+                icon: 'moon'
+            },
+            {
+                label: gettext$1('System'),
+                value: 'system',
+                icon: 'imac-settings'
             }
-        }
-        catch (ex) {
-            this.alert.removeLastDanger();
-        }
-    }
-    async canUserSetupTotp() {
-        // we don't check for tenant options here due to permission restrictions on that end-point
-        const loginOptions = (await this.tenantLoginOptionsService.listForCurrentTenant()).data;
-        return loginOptions.some(({ tfaStrategy = '' }) => tfaStrategy.toLowerCase() === 'totp');
+        ];
+        this._userSelectedThemePreference$ = new BehaviorSubject(this.getCurrentThemePreference());
+        this._temporaryThemePreference$ = new BehaviorSubject('none');
+        this.userSelectedThemePreference$ = this._userSelectedThemePreference$.asObservable();
+        const userSelectedTheme$ = this.userSelectedThemePreference$.pipe(switchMap(preference => {
+            if (preference === 'system') {
+                return this.getUsersSystemPreferenceForTheme$();
+            }
+            return of(preference);
+        }));
+        this.disableThemeSelection$ = this._temporaryThemePreference$.pipe(map(preference => preference !== 'none'));
+        this.currentlyAppliedTheme$ = this._temporaryThemePreference$.pipe(switchMap(temporaryPreference => {
+            if (temporaryPreference !== 'none') {
+                return of(temporaryPreference);
+            }
+            return userSelectedTheme$;
+        }));
+        this.darkThemeAvailable$ = this.options.get$('darkThemeAvailable').pipe(map(value => !!value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditComponent, deps: [{ token: AppStateService }, { token: TranslateService }, { token: i1$7.BsModalService }, { token: AlertService }, { token: i1.UserService }, { token: i1.TenantLoginOptionsService }, { token: i1.TenantService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserEditComponent, isStandalone: true, selector: "c8y-user-edit", inputs: { loading: "loading", user: "user", showProductExperienceOptions: "showProductExperienceOptions", isUsageTrackingEnabled: "isUsageTrackingEnabled", isUserEngagementPreferenceEnabled: "isUserEngagementPreferenceEnabled" }, outputs: { onUser: "onUser", onUsageTrackingChange: "onUsageTrackingChange", onUserEngagementPreferenceChange: "onUserEngagementPreferenceChange", onCancel: "onCancel" }, ngImport: i0, template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "component", type: NewPasswordComponent, selector: "c8y-new-password", inputs: ["showChangePasswordButton", "requireStrongPassword"], outputs: ["password"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-user-edit', standalone: true, imports: [
-                        FormsModule$1,
-                        NgIf,
-                        C8yTranslateDirective,
-                        FormGroupComponent,
-                        RequiredInputPlaceholderDirective,
-                        DefaultValidationDirective,
-                        PhoneValidationDirective,
-                        NewPasswordComponent,
-                        C8yTranslatePipe,
-                        AsyncPipe
-                    ], template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: TranslateService }, { type: i1$7.BsModalService }, { type: AlertService }, { type: i1.UserService }, { type: i1.TenantLoginOptionsService }, { type: i1.TenantService }], propDecorators: { loading: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }], showProductExperienceOptions: [{
-                type: Input
-            }], isUsageTrackingEnabled: [{
-                type: Input
-            }], isUserEngagementPreferenceEnabled: [{
-                type: Input
-            }], onUser: [{
-                type: Output
-            }], onUsageTrackingChange: [{
-                type: Output
-            }], onUserEngagementPreferenceChange: [{
-                type: Output
-            }], onCancel: [{
-                type: Output
-            }] } });
+    getCurrentThemePreference() {
+        const value = getThemePreference();
+        if (value === 'system' || value === 'dark') {
+            return value;
+        }
+        return 'light';
+    }
+    getUsersSystemPreferenceForTheme$() {
+        return fromEvent(window.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith(window.matchMedia('(prefers-color-scheme: dark)')), map((e) => (e.matches ? 'dark' : 'light')));
+    }
+    changeUserPreference(preference) {
+        setThemePreference(preference);
+        this._userSelectedThemePreference$.next(preference);
+        this.applyTheme(preference);
+    }
+    temporaryChangeTheme(preference) {
+        this._temporaryThemePreference$.next(preference);
+        this.applyTheme(preference);
+    }
+    resetTemporaryTheme() {
+        this._temporaryThemePreference$.next('none');
+        this.applyTheme(this.getCurrentThemePreference());
+    }
+    applyTheme(preference) {
+        applyTheme(preference);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeSwitcherService, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeSwitcherService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeSwitcherService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: OptionsService }] });
 
-class UserEditModalComponent {
-    constructor(modal, user, ui, auth, client, alert, userPreferences, c8yModalService, gainsightService, cookieBannerService, passwordService, userEngagementsService) {
-        this.modal = modal;
-        this.user = user;
+class UiSettingsComponent {
+    constructor(translate, state, ui, userPreferences, c8yModalService, headerService, themeSwitcher) {
+        this.translate = translate;
+        this.state = state;
         this.ui = ui;
-        this.auth = auth;
-        this.client = client;
-        this.alert = alert;
         this.userPreferences = userPreferences;
         this.c8yModalService = c8yModalService;
-        this.gainsightService = gainsightService;
-        this.cookieBannerService = cookieBannerService;
-        this.passwordService = passwordService;
-        this.userEngagementsService = userEngagementsService;
-        this.loading = false;
-        this.showProductExperienceOptions = false;
-    }
-    async ngOnInit() {
-        this.updateUserInAppState();
-        await this.setInitialProductExperienceOptions();
-    }
-    /**
-     * Initializes product experience options for the user.
-     *
-     * This function performs the following operations:
-     * - Determines if the user has the permission to edit product experience options.
-     * - If the user has the permission and functional cookies are enabled:
-     *   - Checks whether personalized product experience tracking is active.
-     *   - Checks whether in-product information and communication is active.
-     */
-    async setInitialProductExperienceOptions() {
-        this.showProductExperienceOptions =
-            await this.gainsightService.canEditProductExperienceSettings();
-        if (this.showProductExperienceOptions && this.cookieBannerService.isFunctionalCookieEnabled()) {
-            // Enable personalized product experience tracking option
-            this.currentUsageTrackingState =
-                !(await this.gainsightService.isGainsightPreferenceDisabledInUserPreferences(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY));
-            // Enable in-product information & communication option
-            this.currentUserEngagementPreferenceInitialState =
-                this.userEngagementsService.userEngagementsEnabled$.value;
-        }
-    }
-    async onDismiss() {
-        this.modal.hide();
+        this.headerService = headerService;
+        this.themeSwitcher = themeSwitcher;
+        this.destroyed$ = new Subject();
+        this.currentLang = this.ui.state.lang;
+        this.ui.state$
+            .pipe(filter(({ lang }) => lang !== this.currentLang), takeUntil(this.destroyed$), first$1())
+            .subscribe(({ lang }) => (this.currentLang = lang));
+        this.open$ = this.headerService.rightDrawerOpen$;
     }
-    onUsageTrackingChange(isEnabled) {
-        this.usageTrackingState = isEnabled;
+    ngOnInit() {
+        this.languages = this.state.state.langs.map(l => ({
+            lang: l,
+            nativeLanguage: this.translate.getNativeLanguage(l)
+        }));
     }
-    onUserEngagementPreferenceChange(isEnabled) {
-        this.userEngagementPreferenceNewState = isEnabled;
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
     }
-    async updateAndClose(user) {
-        this.loading = true;
-        try {
-            const passwordChanged = Boolean(user.password);
-            const isExternalUser = user.customProperties.userOrigin === 'OAUTH2';
-            if (!isExternalUser && passwordChanged) {
-                const currentPassword = await this.passwordService.currentPassword().toPromise();
-                if (!currentPassword) {
-                    return;
-                }
-                await this.user.changeCurrentUserPassword(user.password, currentPassword);
-                this.updateCredentials(user.password);
-            }
-            await this.updateProductExperienceOptions();
-            if (user.customProperties.userOrigin !== 'OAUTH2') {
-                await this.user.updateCurrent(omit(user, 'password'));
-                await this.updateUserInAppState();
-            }
-            this.modal.hide();
-            this.alert.success(gettext$1('User saved.'));
-        }
-        catch (e) {
-            if (e) {
-                this.alert.addServerFailure(e);
-            }
+    async onLanguageChange(changedLang) {
+        if (!changedLang) {
+            return;
         }
-        finally {
-            this.loading = false;
+        await this.translate.switchToLanguage(changedLang);
+        if (await this.persistLanguage(changedLang)) {
+            location.reload();
         }
     }
-    async gainsightTrackingAppReload() {
+    async persistLanguage(lang) {
+        let shouldReload = true;
         try {
-            await this.c8yModalService.confirm(gettext$1('Reload required'), gettext$1('To change the tracking option in the entire application, you need to reload the page. If you have any unsaved changes, you can reload later. How would you like to proceed?'), Status.WARNING, {
+            await this.c8yModalService.confirm(gettext$1('Reload recommended'), gettext$1('To change the language in the entire application, we recommend you to reload the page. If you have any unsaved changes, you can reload later. How would you like to proceed?'), Status.WARNING, {
                 ok: gettext$1('Reload now'),
                 cancel: gettext$1('Reload later')
             });
-            location.reload();
         }
         catch (ex) {
-            // do nothing
+            shouldReload = false;
+        }
+        finally {
+            this.translate.saveInLocalStorage(lang);
+            await this.userPreferences.set('language', lang);
+            this.currentLang = lang;
         }
+        return shouldReload;
     }
-    async updateProductExperienceOptions() {
-        this.updateUserEngagementsPreference();
-        await this.updateTrackingOption();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsComponent, deps: [{ token: TranslateService }, { token: AppStateService }, { token: AppStateService }, { token: UserPreferencesService }, { token: ModalService }, { token: HeaderService }, { token: ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UiSettingsComponent, isStandalone: true, selector: "c8y-ui-settings", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-ui-settings', standalone: true, imports: [
+                        IconDirective,
+                        NgIf,
+                        C8yTranslateDirective,
+                        NgFor,
+                        FormsModule$1,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: TranslateService }, { type: AppStateService }, { type: AppStateService }, { type: UserPreferencesService }, { type: ModalService }, { type: HeaderService }, { type: ThemeSwitcherService }] });
+
+class UiSettingsModule {
+    static providers() {
+        return [
+            hookDrawer({
+                component: UiSettingsComponent,
+                position: 'right',
+                priority: 90,
+                id: 'uiSettings'
+            })
+        ];
     }
-    /**
-     * 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);
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent], exports: [UiSettingsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule$1, UiSettingsComponent],
+                    exports: [UiSettingsComponent]
+                }]
+        }] });
+
+class UserMenuItemComponent {
+    constructor(userService, headerService) {
+        this.userService = userService;
+        this.headerService = headerService;
+        this.priority = 0;
+        this.click = new EventEmitter();
+        this.open$ = this.headerService.rightDrawerOpen$;
     }
-    /**
-     * Asynchronously updates the tracking option for user preferences.
-     * If the current usage tracking state differs from the new state,
-     * it updates the Gainsight preferences and sets a functional cookie
-     * before triggering a reload of the application.
-     */
-    async updateTrackingOption() {
-        if (this.currentUsageTrackingState !== this.usageTrackingState) {
-            await this.userPreferences.set(this.gainsightService.USER_PREFERENCES_GAINSIGHT_KEY, this.usageTrackingState);
-            this.gainsightService.setFunctionalCookie(this.usageTrackingState);
-            await this.gainsightTrackingAppReload();
-        }
+    ngAfterViewInit() {
+        this.viewInitTimeout = setTimeout(() => this.userService.add(this));
     }
-    async updateUserInAppState() {
-        const currentUserResult = await this.user.current();
-        this.ui.currentUser.next(currentUserResult.data);
+    ngOnDestroy() {
+        clearTimeout(this.viewInitTimeout);
+        this.userService.remove(this);
     }
-    updateCredentials(password) {
-        const newCredentials = {
-            password,
-            user: this.ui.currentUser.value.id,
-            tenant: this.client.tenant
-        };
-        this.auth.updateCredentials(newCredentials);
+    onClick() {
+        this.click.emit(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditModalComponent, deps: [{ token: i1$7.BsModalRef }, { token: i1.UserService }, { token: AppStateService }, { token: i1.BasicAuth }, { token: i1.FetchClient }, { token: AlertService }, { token: UserPreferencesService }, { token: ModalService }, { token: GainsightService }, { token: CookieBannerService }, { token: PasswordService }, { token: UserEngagementsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserEditModalComponent, isStandalone: true, selector: "c8y-user-edit-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Edit user' | translate\"\n  [customFooter]=\"true\"\n  (onDismiss)=\"onDismiss()\"\n>\n  <c8y-user-edit\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isUserEngagementPreferenceEnabled]=\"currentUserEngagementPreferenceInitialState\"\n    [showProductExperienceOptions]=\"showProductExperienceOptions\"\n    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: UserEditComponent, selector: "c8y-user-edit", inputs: ["loading", "user", "showProductExperienceOptions", "isUsageTrackingEnabled", "isUserEngagementPreferenceEnabled"], outputs: ["onUser", "onUsageTrackingChange", "onUserEngagementPreferenceChange", "onCancel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserMenuItemComponent, deps: [{ token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserMenuItemComponent, isStandalone: true, selector: "c8y-user-menu-item", inputs: { icon: "icon", label: "label", link: "link", target: "target", priority: "priority", dataCy: "dataCy" }, outputs: { click: "click" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserEditModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-user-edit-modal', standalone: true, imports: [ModalComponent, UserEditComponent, C8yTranslatePipe, AsyncPipe], template: "<c8y-modal\n  [title]=\"'Edit user' | translate\"\n  [customFooter]=\"true\"\n  (onDismiss)=\"onDismiss()\"\n>\n  <c8y-user-edit\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isUserEngagementPreferenceEnabled]=\"currentUserEngagementPreferenceInitialState\"\n    [showProductExperienceOptions]=\"showProductExperienceOptions\"\n    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1$7.BsModalRef }, { type: i1.UserService }, { type: AppStateService }, { type: i1.BasicAuth }, { type: i1.FetchClient }, { type: AlertService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: PasswordService }, { type: UserEngagementsService }] });
+            args: [{ selector: 'c8y-user-menu-item', standalone: true, imports: [NgIf, C8yTranslatePipe, AsyncPipe], template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: UserMenuService }, { type: HeaderService }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], priority: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { static: false }]
+            }], click: [{
+                type: Output
+            }] } });
 
 class UserMenuOutletComponent {
     constructor(ui, bsModalService, authService, userMenu, headerService) {
@@ -22999,7 +23023,7 @@ class FilePickerComponent {
         this.onFilesPicked.emit(this.fileToSave);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilePickerComponent, isStandalone: true, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", allowedUploadChoices: "allowedUploadChoices", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Mark as provided' | translate }}\"\n    *ngIf=\"allowedUploadChoices.includes('provided')\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"provided\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"setProvidedOption()\"\n    />\n    <span></span>\n    <span>{{ 'Provided' | translate }}</span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ providedPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilePickerComponent, isStandalone: true, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", allowedUploadChoices: "allowedUploadChoices", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    [class.m-l-8]=\"allowedUploadChoices.includes('provided')\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Mark as provided' | translate }}\"\n    *ngIf=\"allowedUploadChoices.includes('provided')\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"provided\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"setProvidedOption()\"\n    />\n    <span></span>\n    <span>{{ 'Provided' | translate }}</span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ providedPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilePickerComponent, decorators: [{
             type: Component,
@@ -23012,7 +23036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         IconDirective,
                         RequiredInputPlaceholderDirective,
                         C8yTranslatePipe
-                    ], template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Mark as provided' | translate }}\"\n    *ngIf=\"allowedUploadChoices.includes('provided')\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"provided\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"setProvidedOption()\"\n    />\n    <span></span>\n    <span>{{ 'Provided' | translate }}</span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ providedPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
+                    ], template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    [class.m-l-8]=\"allowedUploadChoices.includes('provided')\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Mark as provided' | translate }}\"\n    *ngIf=\"allowedUploadChoices.includes('provided')\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"provided\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"setProvidedOption()\"\n    />\n    <span></span>\n    <span>{{ 'Provided' | translate }}</span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ providedPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
         }], propDecorators: { dropArea: [{
                 type: ViewChild,
                 args: [DropAreaComponent, { static: true }]