@c8y/ngx-components 1022.13.0 → 1022.21.3

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';
@@ -15122,102 +15122,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['document:keydown.enter', ['$event']]
             }] } });
 
-/**
- * Service to show a modal.
- */
-class ModalService {
-    constructor(modalService, gainsightService) {
-        this.modalService = modalService;
-        this.gainsightService = gainsightService;
-    }
-    /**
-     * Shows a quick confirm message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
-     * @param confirmOptions Selection options to display as checkbox list.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm'),
-            cancel: labels.cancel || gettext$1('Cancel')
-        };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels: modalLabels, status, confirmOptions },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick acknowledge message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param acknowledgeLabel The label to use.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
-        const labels = { ok: acknowledgeLabel, cancel: null };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels, status },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick logout confirmation modal.
-     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
-     */
-    async confirmLogout(body, status = Status.WARNING, labels = {}) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm and log out'),
-            cancel: labels.cancel || gettext$1('Cancel')
-        };
-        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
-        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
-    }
-    triggerEvent(result, labels, productExperienceEvent) {
-        const data = { ...productExperienceEvent.data, url: window.location.href };
-        result
-            .then(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.ok
-            });
-        })
-            .catch(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.cancel
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
-
 /**
  * The angular module definition for modal.
  * @exports ConfirmModalComponent
@@ -15229,7 +15133,7 @@ class ModalModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ModalModule, imports: [i1$7.ModalModule, CommonModule, i1$9.PopoverModule, ConfirmModalComponent,
             ModalComponent,
             PopoverConfirmComponent], exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalModule, providers: [ModalService], imports: [ModalModule$1.forRoot(),
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalModule, imports: [ModalModule$1.forRoot(),
             CommonModule,
             PopoverModule.forRoot(),
             PopoverConfirmComponent] }); }
@@ -15245,8 +15149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ModalComponent,
                         PopoverConfirmComponent
                     ],
-                    exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent],
-                    providers: [ModalService]
+                    exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent]
                 }]
         }] });
 
@@ -19203,299 +19106,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-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'
+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;
+    }
+    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();
             }
-        ];
-        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$();
+            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."));
+                }
             }
-            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);
+            finally {
+                this.loading = false;
             }
-            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')));
-    }
-    changeUserPreference(preference) {
-        setThemePreference(preference);
-        this._userSelectedThemePreference$.next(preference);
-        this.applyTheme(preference);
     }
-    temporaryChangeTheme(preference) {
-        this._temporaryThemePreference$.next(preference);
-        this.applyTheme(preference);
+    cancel() {
+        this.passwordConfirmedEmitter.emit(false);
+        this.modal._dismiss();
     }
-    resetTemporaryTheme() {
-        this._temporaryThemePreference$.next('none');
-        this.applyTheme(this.getCurrentThemePreference());
+    createNewClient(auth, baseUrl) {
+        return new Client(auth, baseUrl);
     }
-    applyTheme(preference) {
-        applyTheme(preference);
+    emitSuccessAndClose() {
+        this.passwordConfirmedEmitter.emit(true);
+        this.modal._dismiss();
     }
-    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: 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: ThemeSwitcherService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: OptionsService }] });
+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 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$;
+class CurrentPasswordModalComponent {
+    constructor(modal) {
+        this.modal = modal;
+        this.currentPasswordEmitter = new EventEmitter();
     }
-    ngOnInit() {
-        this.languages = this.state.state.langs.map(l => ({
-            lang: l,
-            nativeLanguage: this.translate.getNativeLanguage(l)
-        }));
+    passwordConfirm() {
+        this.currentPasswordEmitter.emit(this.password);
+        this.modal.hide();
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
-    }
-    async onLanguageChange(changedLang) {
-        if (!changedLang) {
-            return;
-        }
-        await this.translate.switchToLanguage(changedLang);
-        if (await this.persistLanguage(changedLang)) {
-            location.reload();
-        }
-    }
-    async persistLanguage(lang) {
-        let shouldReload = true;
-        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')
-            });
-        }
-        catch (ex) {
-            shouldReload = false;
-        }
-        finally {
-            this.translate.saveInLocalStorage(lang);
-            await this.userPreferences.set('language', lang);
-            this.currentLang = lang;
-        }
-        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" }] }); }
-}
-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'
-            })
-        ];
-    }
-    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$;
-    }
-    ngAfterViewInit() {
-        this.viewInitTimeout = setTimeout(() => this.userService.add(this));
-    }
-    ngOnDestroy() {
-        clearTimeout(this.viewInitTimeout);
-        this.userService.remove(this);
-    }
-    onClick() {
-        this.click.emit(this);
-    }
-    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: UserMenuItemComponent, 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: [{
-                type: Input
-            }], dataCy: [{
-                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;
-    }
-    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();
+    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" }] }); }
@@ -19594,10 +19287,11 @@ class PasswordService {
         return this.DEFAULT_PASSWORD_MIN_LENGTH;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, deps: [{ token: i1$7.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$7.BsModalService }] });
 
 class TotpSetupComponent {
@@ -20049,9 +19743,10 @@ class NewPasswordComponent {
             ngModel.control.addValidators(this.passwordChecklistValidator);
         }
     }
-    constructor(passwordStrength, cdRef) {
+    constructor(passwordStrength, cdRef, elementRef) {
         this.passwordStrength = passwordStrength;
         this.cdRef = cdRef;
+        this.elementRef = elementRef;
         this.password = new EventEmitter();
         this.showChangePasswordButton = true;
         this.model = {};
@@ -20107,7 +19802,7 @@ class NewPasswordComponent {
             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.ɵ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: NewPasswordComponent, decorators: [{
@@ -20123,7 +19818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         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: [{
+        }], ctorParameters: () => [{ type: PasswordStrengthService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { password: [{
                 type: Output
             }], showChangePasswordButton: [{
                 type: Input
@@ -20157,13 +19852,26 @@ class UserEditComponent {
         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);
+            }
+        });
     }
     async ngOnInit() {
         const currentTenant = (await this.tenantService.current()).data;
@@ -20220,7 +19928,7 @@ class UserEditComponent {
         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: "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" }] }); }
+    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: UserEditComponent, decorators: [{
             type: Component,
@@ -20246,6 +19954,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], isUserEngagementPreferenceEnabled: [{
                 type: Input
+            }], focusOnNewPassword: [{
+                type: Input
             }], onUser: [{
                 type: Output
             }], onUsageTrackingChange: [{
@@ -20272,6 +19982,7 @@ class UserEditModalComponent {
         this.userEngagementsService = userEngagementsService;
         this.loading = false;
         this.showProductExperienceOptions = false;
+        this.passwordChange = false;
     }
     async ngOnInit() {
         this.updateUserInAppState();
@@ -20390,127 +20101,383 @@ class UserEditModalComponent {
         this.auth.updateCredentials(newCredentials);
     }
     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.ɵ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: UserEditModalComponent, 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" }]
+            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 UserMenuOutletComponent {
-    constructor(ui, bsModalService, authService, userMenu, headerService) {
-        this.ui = ui;
-        this.bsModalService = bsModalService;
-        this.authService = authService;
-        this.userMenu = userMenu;
-        this.headerService = headerService;
-        this.items$ = this.userMenu.items$;
-        this.open$ = this.headerService.rightDrawerOpen$;
+/**
+ * Service to show a modal.
+ */
+class ModalService {
+    constructor(modalService, gainsightService) {
+        this.modalService = modalService;
+        this.gainsightService = gainsightService;
     }
-    async editUser() {
-        this.bsModalService.show(UserEditModalComponent, {
+    /**
+     * 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'
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
         });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
+        return await modalRef.content.result;
     }
-    async logout() {
-        await this.authService.logout();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserMenuOutletComponent, deps: [{ token: AppStateService }, { token: i1$7.BsModalService }, { token: SimplifiedAuthService }, { token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserMenuOutletComponent, isStandalone: true, selector: "c8y-user-menu-outlet", ngImport: i0, template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n", 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: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "component", type: UserMenuItemComponent, selector: "c8y-user-menu-item", inputs: ["icon", "label", "link", "target", "priority", "dataCy"], outputs: ["click"] }, { 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: UserMenuOutletComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-user-menu-outlet', standalone: true, imports: [NgIf, NgFor, OutletDirective, UserMenuItemComponent, C8yTranslatePipe, AsyncPipe], template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n" }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: i1$7.BsModalService }, { type: SimplifiedAuthService }, { type: UserMenuService }, { type: HeaderService }] });
-
-class PasswordStrengthCheckerService {
-    constructor() {
-        this.GREEN = {
-            colorName: 'green',
-            color: 'rgb(0, 128, 0)',
-            description: gettext$1('strong'),
-            passwordStrength: PasswordStrength.GREEN
-        };
-        this.YELLOW = {
-            colorName: 'yellow',
-            color: 'rgb(255, 204, 51)',
-            description: gettext$1('medium'),
-            passwordStrength: PasswordStrength.YELLOW
-        };
-        this.RED = {
-            colorName: 'red',
-            color: 'rgb(170, 0, 51)',
-            description: gettext$1('weak'),
-            passwordStrength: PasswordStrength.RED
-        };
+    /**
+     * Shows a quick acknowledge message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param acknowledgeLabel The label to use.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
+        const labels = { ok: acknowledgeLabel, cancel: null };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels, status },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
+        return await modalRef.content.result;
     }
-    hasLowerCase(password) {
-        return password.search(/[a-z]/) !== -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);
     }
-    hasUpperCase(password) {
-        return password.search(/[A-Z]/) !== -1;
+    async changeCurrentUserPassword() {
+        this.modalService.show(UserEditModalComponent, {
+            initialState: { passwordChange: true },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title'
+        });
     }
-    hasNumbers(password) {
-        return password.search(/[0-9]/) !== -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
+            });
+        });
     }
-    hasSpecialChars(password) {
-        return password.search(/[^0-9a-zA-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' }); }
+}
+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'
+            }
+        ];
+        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));
     }
-    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;
+    getCurrentThemePreference() {
+        const value = getThemePreference();
+        if (value === 'system' || value === 'dark') {
+            return value;
         }
+        return 'light';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService }); }
+    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: PasswordStrengthCheckerService, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeSwitcherService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: OptionsService }] });
 
-/**
- * @deprecated: [MTM-56403] Password strength indicator removed from UI in favor of the enhanced password strength check list.
- */
-class PasswordStrengthComponent {
-    set password(password) {
-        if (typeof password === 'string') {
-            this.model = this.passwordStrengthCheckerService.getStrengthColor(password);
-            this.strength.emit(this.model);
+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();
+    }
+    async onLanguageChange(changedLang) {
+        if (!changedLang) {
+            return;
+        }
+        await this.translate.switchToLanguage(changedLang);
+        if (await this.persistLanguage(changedLang)) {
+            location.reload();
         }
     }
-    constructor(passwordStrengthCheckerService) {
-        this.passwordStrengthCheckerService = passwordStrengthCheckerService;
-        this.strength = new EventEmitter();
-        this.password = '';
+    async persistLanguage(lang) {
+        let shouldReload = true;
+        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')
+            });
+        }
+        catch (ex) {
+            shouldReload = false;
+        }
+        finally {
+            this.translate.saveInLocalStorage(lang);
+            await this.userPreferences.set('language', lang);
+            this.currentLang = lang;
+        }
+        return shouldReload;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthComponent, deps: [{ token: PasswordService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordStrengthComponent, isStandalone: true, selector: "c8y-password-strength", inputs: { password: "password" }, outputs: { strength: "strength" }, ngImport: i0, template: "<div class=\"password-strength password-{{ model.colorName }}\">\r\n  <label class=\"password-strength-label small\" translate>\r\n    Password strength\r\n  </label>\r\n  <div>\r\n    <div class=\"password-bar\"></div>\r\n  </div>\r\n  <span class=\"small\">\r\n    {{ model.description | translate }}\r\n  </span>\r\n</div>\r\n", dependencies: [{ 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: 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: PasswordStrengthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-password-strength', standalone: true, imports: [C8yTranslateDirective, C8yTranslatePipe], template: "<div class=\"password-strength password-{{ model.colorName }}\">\r\n  <label class=\"password-strength-label small\" translate>\r\n    Password strength\r\n  </label>\r\n  <div>\r\n    <div class=\"password-bar\"></div>\r\n  </div>\r\n  <span class=\"small\">\r\n    {{ model.description | translate }}\r\n  </span>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: PasswordService }], propDecorators: { password: [{
-                type: Input,
-                args: ['password']
-            }], strength: [{
-                type: Output
-            }] } });
-
-/**
- * The angular module definition for new password.
+            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'
+            })
+        ];
+    }
+    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$;
+    }
+    ngAfterViewInit() {
+        this.viewInitTimeout = setTimeout(() => this.userService.add(this));
+    }
+    ngOnDestroy() {
+        clearTimeout(this.viewInitTimeout);
+        this.userService.remove(this);
+    }
+    onClick() {
+        this.click.emit(this);
+    }
+    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: UserMenuItemComponent, 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: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { static: false }]
+            }], click: [{
+                type: Output
+            }] } });
+
+class UserMenuOutletComponent {
+    constructor(ui, bsModalService, authService, userMenu, headerService) {
+        this.ui = ui;
+        this.bsModalService = bsModalService;
+        this.authService = authService;
+        this.userMenu = userMenu;
+        this.headerService = headerService;
+        this.items$ = this.userMenu.items$;
+        this.open$ = this.headerService.rightDrawerOpen$;
+    }
+    async editUser() {
+        this.bsModalService.show(UserEditModalComponent, {
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title'
+        });
+    }
+    async logout() {
+        await this.authService.logout();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserMenuOutletComponent, deps: [{ token: AppStateService }, { token: i1$7.BsModalService }, { token: SimplifiedAuthService }, { token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserMenuOutletComponent, isStandalone: true, selector: "c8y-user-menu-outlet", ngImport: i0, template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n", 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: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "component", type: UserMenuItemComponent, selector: "c8y-user-menu-item", inputs: ["icon", "label", "link", "target", "priority", "dataCy"], outputs: ["click"] }, { 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: UserMenuOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-user-menu-outlet', standalone: true, imports: [NgIf, NgFor, OutletDirective, UserMenuItemComponent, C8yTranslatePipe, AsyncPipe], template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n" }]
+        }], ctorParameters: () => [{ type: AppStateService }, { type: i1$7.BsModalService }, { type: SimplifiedAuthService }, { type: UserMenuService }, { type: HeaderService }] });
+
+/**
+ * @deprecated: [MTM-56403] Password strength indicator removed from UI in favor of the enhanced password strength check list.
+ */
+class PasswordStrengthComponent {
+    set password(password) {
+        if (typeof password === 'string') {
+            this.model = this.passwordStrengthCheckerService.getStrengthColor(password);
+            this.strength.emit(this.model);
+        }
+    }
+    constructor(passwordStrengthCheckerService) {
+        this.passwordStrengthCheckerService = passwordStrengthCheckerService;
+        this.strength = new EventEmitter();
+        this.password = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthComponent, deps: [{ token: PasswordService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PasswordStrengthComponent, isStandalone: true, selector: "c8y-password-strength", inputs: { password: "password" }, outputs: { strength: "strength" }, ngImport: i0, template: "<div class=\"password-strength password-{{ model.colorName }}\">\r\n  <label class=\"password-strength-label small\" translate>\r\n    Password strength\r\n  </label>\r\n  <div>\r\n    <div class=\"password-bar\"></div>\r\n  </div>\r\n  <span class=\"small\">\r\n    {{ model.description | translate }}\r\n  </span>\r\n</div>\r\n", dependencies: [{ 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: PasswordStrengthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-password-strength', standalone: true, imports: [C8yTranslateDirective, C8yTranslatePipe], template: "<div class=\"password-strength password-{{ model.colorName }}\">\r\n  <label class=\"password-strength-label small\" translate>\r\n    Password strength\r\n  </label>\r\n  <div>\r\n    <div class=\"password-bar\"></div>\r\n  </div>\r\n  <span class=\"small\">\r\n    {{ model.description | translate }}\r\n  </span>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: PasswordService }], propDecorators: { password: [{
+                type: Input,
+                args: ['password']
+            }], strength: [{
+                type: Output
+            }] } });
+
+/**
+ * The angular module definition for new password.
  * @exports PasswordStrengthComponent
  * @exports PasswordCheckListComponent
  * @exports PasswordConfirm
@@ -20541,7 +20508,7 @@ class AuthenticationModule {
             CurrentPasswordModalComponent,
             TotpSetupComponent,
             PasswordInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthenticationModule, providers: [PasswordStrengthCheckerService, PasswordService], imports: [FormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthenticationModule, imports: [FormsModule,
             TooltipModule,
             CommonModule,
             ModalModule,
@@ -20581,8 +20548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CurrentPasswordModalComponent,
                         TotpSetupComponent,
                         PasswordInputComponent
-                    ],
-                    providers: [PasswordStrengthCheckerService, PasswordService]
+                    ]
                 }]
         }] });
 
@@ -20827,769 +20793,770 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-var ApplicationPluginStatus;
-(function (ApplicationPluginStatus) {
-    ApplicationPluginStatus["ORPHANED"] = "ORPHANED";
-    ApplicationPluginStatus["LATEST"] = "LATEST";
-    ApplicationPluginStatus["OUTDATED"] = "OUTDATED";
-    ApplicationPluginStatus["REVOKED"] = "REVOKED";
-    ApplicationPluginStatus["AUTO"] = "AUTO";
-})(ApplicationPluginStatus || (ApplicationPluginStatus = {}));
-var PackageType;
-(function (PackageType) {
-    /**
-     * A package coming from the official Cumulocity github enterprise.
-     */
-    PackageType["OFFICIAL"] = "OFFICIAL";
-    /**
-     * A package coming from any connected partner repository.
-     */
-    PackageType["COMMUNITY"] = "COMMUNITY";
-    /**
-     * A package where the origin is unknown (e.g. uploaded to management with an unknown label)
-     */
-    PackageType["UNKNOWN"] = "UNKNOWN";
-    /**
-     * A custom package e.g. uploaded to the tenant by a user
-     */
-    PackageType["CUSTOM"] = "CUSTOM";
-    /**
-     * A package that was archived by the user
-     */
-    PackageType["ARCHIVED"] = "ARCHIVED";
-})(PackageType || (PackageType = {}));
+class PluginsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: []
+                }]
+        }] });
 
-class PluginsService {
-    static convertInstalledRemotesToIds(remotes) {
-        if (!remotes) {
+/**
+ * An extension HOOK can use either a pure value:
+ * ```typescript
+ *  { provide: HOOK_X, useValue: { ...hookValue }, multi: true }
+ * ```
+ *
+ * Or an array to directly register multiple:
+ * ```typescript
+ *  { provide: HOOK_X, useValue: [{ ...hookValues }], multi: true }
+ * ```
+ *
+ * Or an ExtensionFactory which allows to define a get() function. This function
+ * gets called on each navigation with the current route and can return values
+ * async (observable or promise).
+ * ```typescript
+ *  { provide: HOOK_X, useFactory: { get: (route) => doSomethingAsync(route) }, multi: true }
+ * ```
+ * @deprecated Consider using the `hookVersion` function instead.
+ */
+const HOOK_VERSION = new InjectionToken('HOOK_VERSION');
+const VERSION_MODULE_CONFIG = new InjectionToken('VERSION_MODULE_CONFIG');
+/**
+ * You can either provide a single `Version` as parameter:
+ * ```typescript
+ *  hookVersion(...)
+ * ```
+ *
+ * Or an array to directly register multiple:
+ * ```typescript
+ *  hookVersion([...])
+ * ```
+ *
+ * Or you provide an Service that implements `ExtensionFactory<Version>`
+ * ```typescript
+ *  export class MyVersionFactory implements ExtensionFactory<Version> {...}
+ *  ...
+ *  hookVersion(MyVersionFactory)
+ * ```
+ * A typed alternative to `HOOK_VERSION`.
+ * @param versions The `Version`'s or `ExtensionFactory` to be provided.
+ * @returns An `Provider` to be provided in your module.
+ */
+function hookVersion(versions, options) {
+    return hookGeneric(versions, HOOK_VERSION, options);
+}
+
+/**
+ * Will provide the backend versions of the tenant.
+ * The system option 'system' -> 'version' is used for this.
+ */
+class BackendVersionFactory {
+    constructor(config, appState) {
+        this.config = config;
+        this.appState = appState;
+        this.backendVersion$ = of([]);
+        if (this.config?.disableBackendVersionFactory) {
             return;
         }
-        const importContextPaths = Object.keys(remotes);
-        const plugins = [];
-        importContextPaths.forEach(contextPath => {
-            const moduleNames = remotes[contextPath] || [];
-            plugins.push(...moduleNames.map(module => PluginsService.createPluginId(contextPath, module, '', true)));
-        });
-        return plugins;
+        this.backendVersion$ = this.appState.state$.pipe(map(state => state?.versions?.backend), filter(backendVersion => !!backendVersion), distinctUntilChanged(), map(backendVersion => this.buildBackendVersion(backendVersion)), shareReplay(1));
     }
-    static createPluginId(contextPath, plugin, version, useLatest = false) {
-        const moduleName = typeof plugin === 'string' ? plugin : plugin.module;
-        if (useLatest) {
-            return `${contextPath}/${moduleName}`;
-        }
-        return `${contextPath}@${version}/${moduleName}`;
+    get() {
+        return this.backendVersion$;
     }
-    constructor(applicationService, appStateService, client) {
-        this.applicationService = applicationService;
-        this.appStateService = appStateService;
-        this.client = client;
+    buildBackendVersion(backendVersion) {
+        return {
+            label: gettext$1('Backend'),
+            version: backendVersion,
+            priority: 20,
+            type: 'SYSTEM',
+            hidden: true
+        };
     }
-    /**
-     * Fetches a list of available packages.
-     * @param params Additional query parameters.
-     * @returns Returns a list of packages.
-     */
-    async listPackages(params = {}) {
-        const apps = await this.listApplicationsByCurrentTenant(params);
-        const webApps = apps.filter(app => this.isPackage(app));
-        const uniqueWebApps = this.removeDuplicates(webApps, 'contextPath');
-        return uniqueWebApps.sort((a, b) => a.name.localeCompare(b.name));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, deps: [{ token: VERSION_MODULE_CONFIG, optional: true }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [VERSION_MODULE_CONFIG]
+                }] }, { type: AppStateService }] });
+
+class VersionService extends ExtensionPointForPlugins {
+    constructor(rootInjector, pluginService) {
+        super(rootInjector, pluginService);
+        this.items$ = this.setupItemsObservable();
+        this.nonHiddenItems$ = this.items$.pipe(map(versions => versions.filter(version => !version.hidden)));
     }
-    /**
-     * Checks if an application is a package.
-     * @param application Application managed object.
-     * @returns Returns true if the application is a package.
-     */
-    isPackage(application) {
-        return application.manifest?.isPackage === true;
+    get state() {
+        return this.state$.value;
     }
-    /**
-     * Updates the remotes field in the application configuration by adding new plugins.
-     * Important: if the remotes object is not set on the configuration object,
-     * remotes will not be added. Make sure that this object exists in the application configuration.
-     * @param application Application managed object.
-     * @param plugins List of remotes to be added.
-     * @returns Returns updated application remotes.
-     */
-    async addRemotes(application, plugins) {
-        const pluginsArray = Array.isArray(plugins) ? plugins : [plugins];
-        const manifestRemotes = application.manifest?.remotes || {};
-        const appConfig = application?.config;
-        const appConfigRemotes = appConfig?.remotes || manifestRemotes;
-        const appConfigExcludedRemotes = appConfig?.excludedRemotes || {};
-        // only normal and self optional scoped plugins should be added to remotes
-        // self scoped plugins will be automatically added
-        const allPluginsExceptSelfScoped = this.getAllPluginsExceptSelfScoped(pluginsArray, application.contextPath);
-        const newRemotes = this.addPluginToRemotesConfig(appConfigRemotes, allPluginsExceptSelfScoped);
-        // should be unproblematic to remove all categories of plugins from excluded remotes
-        const newExcludedRemotes = this.removePluginsFromRemotesConfig(appConfigExcludedRemotes, plugins);
-        return await this.updateRemotesInAppConfig(application, newRemotes, newExcludedRemotes);
+    add(version) {
+        this.state.add(version);
+        this.emitNewState();
     }
-    /**
-     * Updates the remotes field in the application configuration by removing plugins.
-     * @param application Application managed object.
-     * @param plugins List of remotes to be removed.
-     * @returns Returns updated application remotes.
-     */
-    async removeRemotes(application, plugins) {
-        const pluginsArray = Array.isArray(plugins) ? plugins : [plugins];
-        const manifestRemotes = application.manifest?.remotes || {};
-        const appConfig = application?.config;
-        const appConfigRemotes = appConfig?.remotes || manifestRemotes;
-        const appConfigExcludedRemotes = appConfig?.excludedRemotes || {};
-        // app plugins need to be removed from remotes
-        const newRemotes = this.removePluginsFromRemotesConfig(appConfigRemotes, plugins);
-        // self scoped plugins need to be added to excluded remotes
-        // as they would be otherwise automatically added to remotes
-        const selfScopedPlugins = this.getSelfScopedPlugins(pluginsArray, application.contextPath);
-        const newExcludedRemotes = this.addPluginToRemotesConfig(appConfigExcludedRemotes, selfScopedPlugins);
-        return await this.updateRemotesInAppConfig(application, newRemotes, newExcludedRemotes);
+    remove(version) {
+        this.state.delete(version);
+        this.emitNewState();
     }
-    /**
-     * Updates the remotes field in the application configuration.
-     * @param application Application managed object.
-     * @param plugins List of remotes to be added.
-     * @returns Returns updated application remotes.
-     */
-    async updateRemotesInAppConfig(application, plugins, excludedRemotes) {
-        const updatedAppWithConfig = await this.applicationService.updateApplicationConfig(application, {
-            remotes: plugins,
-            excludedRemotes: excludedRemotes || {}
-        });
-        return updatedAppWithConfig?.config || { remotes: {} };
+    cleanUpVersions(versions) {
+        return versions.map(version => pick(version, 'label', 'version', 'type', 'custom'));
     }
-    /**
-     * Fetches the application manifest.
-     * @param application Application managed object.
-     * @returns Returns the application manifest.
-     */
-    async getCumulocityJsonFile(application) {
-        const c8yJson = await this.applicationService.getAppManifest(application);
-        if (!c8yJson.remotes) {
-            c8yJson.remotes = {};
-        }
-        return c8yJson;
+    setupItemsObservable() {
+        return fromTriggerOnce(undefined, this.refresh$, [
+            getInjectedHooks(HOOK_VERSION, this.injectors),
+            () => this.factories,
+            stateToFactory(this.state$)
+        ]).pipe(distinctUntilChanged(), map(versions => sortByPriority(versions)), shareReplay(1));
     }
-    /**
-     * Sets the initial state of remotes in the configuration (when it's missing), based on the list of remotes being in the application manifest.
-     * @param application  Application managed object.
-     * @returns Returns a list of remotes that has been assigned to the configuration object.
-     */
-    async setInitialRemotes(application) {
-        try {
-            const manifest = await this.getCumulocityJsonFile(application);
-            const manifestRemotes = manifest.remotes;
-            return await this.updateRemotesInAppConfig(application, manifestRemotes || {}, {});
-        }
-        catch (er) {
-            return undefined;
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, deps: [{ token: i0.Injector }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }] });
+
+class PlatformDetailsService {
+    constructor(version, appState, apps) {
+        this.version = version;
+        this.appState = appState;
+        this.apps = apps;
     }
-    async resetRemotes(application) {
-        return await this.applicationService.updateApplicationConfig(application, {
-            remotes: undefined,
-            excludedRemotes: undefined
-        });
+    async getPlatformDetailsObject() {
+        const currentUser = this.appState.currentUser.value;
+        const userId = currentUser?.id;
+        const userPermissions = this.getUserPermissions(currentUser);
+        const [hookedVersions, microserviceVersions] = await Promise.all([
+            this.getVersions(),
+            this.getMicroserviceVersions(userId)
+        ]);
+        const versions = [...hookedVersions, ...microserviceVersions];
+        const groupedVersions = groupBy(versions, 'type');
+        const tenantId = this.appState.currentTenant.value?.name;
+        // useful as `domainName` might be pointing to a custom domain
+        // self link should still allow to identify the actual environment of the tenant
+        const tenantSelfLink = this.appState.currentTenant.value?.self;
+        const tenantDomainName = this.appState.currentTenant.value?.domainName;
+        const applicationKey = this.appState.currentApplication.value?.key;
+        const applicationId = this.appState.currentApplication.value?.id;
+        const time = new Date().toISOString();
+        const url = document.URL;
+        const obj = {
+            time,
+            tenantId,
+            tenantSelfLink,
+            tenantDomainName,
+            url,
+            userId,
+            userPermissions,
+            applicationId,
+            applicationKey,
+            versions: groupedVersions
+        };
+        return obj;
     }
-    sortVersions(source, order) {
-        const sourceCopy = cloneDeep(source);
-        if (source.list && source.path) {
-            const path = sourceCopy.path.join('.');
-            return sourceCopy.list.sort((a, b) => compare(coerce(get(a, path)), coerce(get(b, path))) * (order === 'asc' ? 1 : -1));
+    async getVersions() {
+        const versions = await this.version.items$
+            .pipe(take(1), map(versions => this.version.cleanUpVersions(versions)))
+            .toPromise();
+        return versions;
+    }
+    async getMicroserviceVersions(userId) {
+        try {
+            const { data: apps } = await this.apps.listByUser(userId, {
+                pageSize: 2000,
+                dropOverwrittenApps: true,
+                noPaging: true
+            });
+            return apps
+                .filter(app => !!app.manifest?.version && app.type === ApplicationType.MICROSERVICE)
+                .map(app => {
+                return {
+                    label: app.name,
+                    version: app.manifest.version,
+                    type: app.type,
+                    custom: {
+                        owner: app.owner?.tenant?.id,
+                        provider: app.manifest?.provider
+                    }
+                };
+            });
         }
-        else {
-            return sourceCopy.sort((a, b) => compare(coerce(a), coerce(b)) * (order === 'asc' ? 1 : -1));
+        catch (e) {
+            console.warn(e);
+            return [];
         }
     }
-    /**
-     * Extracts a list of exported plugins from the application object.
-     * @param application Application managed object.
-     * @param useLatest Set this to true, to not bind the plugin to any version.
-     * @returns Returns a list of exported plugins.
-     */
-    getMFExports(application, excludedScopes = [
-        PluginsExportScopes.SELF,
-        PluginsExportScopes.SELF_OPTIONAL,
-        PluginsExportScopes.GLOBAL
-    ], useLatest = false) {
-        const manifest = application.manifest;
-        if (!manifest || !manifest.exports) {
-            return [];
+    getUserPermissions(user) {
+        if (!user) {
+            return null;
         }
-        return this.extendPluginsDetails(application, {
-            version: manifest.version,
-            binaryId: undefined
-        }, useLatest).filter(plugin => !excludedScopes.includes(plugin.scope));
+        const userPermissions = this.getDirectPermissionsOfUser(user);
+        const groupPermissions = this.getPermissionsOfAssignedGroups(user);
+        return { user: userPermissions, groups: groupPermissions };
     }
-    /**
-     * Extracts a list of exports from each available package.
-     * @param allVersions If set to true, all and not only latest versions are included.
-     * @param excludedScopes Defines which scopes should not be loaded.
-     * @returns Returns a list of all exported plugins.
-     */
-    async getAllMFExports(allVersions = false, excludedScopes = [
-        PluginsExportScopes.SELF,
-        PluginsExportScopes.SELF_OPTIONAL,
-        PluginsExportScopes.GLOBAL
-    ]) {
-        const plugins = new Array();
-        const packages = await this.listPackages();
-        for (const pkg of packages) {
-            if (!pkg?.manifest?.exports) {
-                continue;
-            }
-            if (allVersions && Array.isArray(pkg.applicationVersions)) {
-                pkg.applicationVersions.forEach(version => {
-                    plugins.push(...this.extendPluginsDetails(pkg, version));
-                });
+    getDirectPermissionsOfUser(user) {
+        const userChangedType = user;
+        const userRoleReferences = userChangedType.roles?.references || [];
+        return userRoleReferences.map(ref => ref.role.id);
+    }
+    getPermissionsOfAssignedGroups(user) {
+        const groups = user.groups?.references || [];
+        return groups.map(ref => {
+            const roleReferences = ref.group?.roles?.references || [];
+            const permissions = roleReferences.map(ref => ref.role.id);
+            return {
+                id: ref.group.id,
+                name: ref.group.name,
+                permissions
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, deps: [{ token: VersionService }, { token: AppStateService }, { token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: i1.ApplicationService }] });
+
+class VersionListComponent {
+    constructor(version, appState, clipboardService, modalService, platformDetails, headerService) {
+        this.version = version;
+        this.appState = appState;
+        this.clipboardService = clipboardService;
+        this.modalService = modalService;
+        this.platformDetails = platformDetails;
+        this.headerService = headerService;
+        this.versionsToDirectlyDisplay$ = this.version.nonHiddenItems$;
+        this.currentTenantId$ = this.appState.currentTenant.pipe(map(tenant => tenant?.name), filter(tenantId => !!tenantId), distinctUntilChanged());
+        this.open$ = this.headerService.rightDrawerOpen$;
+    }
+    async downloadPlatformDetails() {
+        const obj = await this.platformDetails.getPlatformDetailsObject();
+        const json = JSON.stringify(obj, undefined, 2);
+        const blob = new Blob([json]);
+        saveAs$1(blob, 'platform-details.json');
+    }
+    copyIt(text) {
+        this.clipboardService.writeText(text);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, deps: [{ token: VersionService }, { token: AppStateService }, { token: ClipboardService }, { token: i1$7.BsModalService }, { token: PlatformDetailsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VersionListComponent, isStandalone: true, selector: "c8y-version-list", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-version-list', standalone: true, imports: [IconDirective, NgIf, C8yTranslateDirective, NgFor, C8yTranslatePipe, AsyncPipe], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$7.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
+
+class VersionDrawerFactory {
+    constructor(options) {
+        this.options = options;
+        this.drawerItem = {
+            component: VersionListComponent,
+            position: 'right',
+            priority: 80,
+            id: 'platformInformation'
+        };
+    }
+    get() {
+        return this.shouldShowPlatformInformation$().pipe(distinctUntilChanged(), map(shouldShowPlatformInformation => {
+            if (shouldShowPlatformInformation) {
+                return this.drawerItem;
             }
-            else {
-                plugins.push(...this.extendPluginsDetails(pkg, {
-                    version: pkg.manifest.version,
-                    binaryId: undefined
-                }));
+            return [];
+        }));
+    }
+    shouldShowPlatformInformation$() {
+        return combineLatest([
+            this.options.get$('hidePowered'),
+            this.options.get$('hidePlatformInformation')
+        ]).pipe(map(([hidePowered, hidePlatformInformation]) => {
+            if (hidePlatformInformation === undefined) {
+                return !hidePowered;
             }
-        }
-        return plugins.filter(plugin => !excludedScopes.includes(plugin.scope));
+            return !hidePlatformInformation;
+        }));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OptionsService }] });
+
+var ApplicationPluginStatus;
+(function (ApplicationPluginStatus) {
+    ApplicationPluginStatus["ORPHANED"] = "ORPHANED";
+    ApplicationPluginStatus["LATEST"] = "LATEST";
+    ApplicationPluginStatus["OUTDATED"] = "OUTDATED";
+    ApplicationPluginStatus["REVOKED"] = "REVOKED";
+    ApplicationPluginStatus["AUTO"] = "AUTO";
+})(ApplicationPluginStatus || (ApplicationPluginStatus = {}));
+var PackageType;
+(function (PackageType) {
     /**
-     * Extracts a list of remotes from the application object.
-     * @param application Application managed object.
-     * @returns Returns list of remotes.
+     * A package coming from the official Cumulocity github enterprise.
      */
-    getMFRemotes(application) {
-        const manifest = application.manifest || {};
-        const config = application?.config;
-        let remotes = config?.remotes || manifest.remotes || {};
-        const manifestExports = manifest.exports || manifest.manifest?.exports || [];
-        const selfRemotes = manifestExports
-            .filter(plugin => plugin.scope === PluginsExportScopes.SELF)
-            .map(plugin => plugin.module || plugin.name);
-        if (selfRemotes.length) {
-            remotes = mergeRemotes([{ [application.contextPath]: selfRemotes }, remotes]);
-        }
-        remotes = removeRemotes(remotes, config?.excludedRemotes);
-        return remotes;
-    }
+    PackageType["OFFICIAL"] = "OFFICIAL";
     /**
-     * Determines the type of a package.
-     * A package is OFFICIAL if it comes from management tenant and has a label attached called OFFICIAL.
-     * A package is COMMUNITY if it has a label called COMMUNITY.
-     * A package is CUSTOM if it does not have any label attached.
-     * A package is UNKNOWN if it has a label attached but it does not match COMMUNITY or OFFICIAL.
-     *
-     * Labels can be used to identify the status of a package. Community packages always need
-     * a license validation. The label will be shown on the application card to tell a user
-     * whether they are looking into an official or community package.
-     *
-     * @param packageApplication The package application object to check.
-     * @returns The package type.
+     * A package coming from any connected partner repository.
      */
-    getPackageType(packageApplication) {
-        const label = packageApplication.label || packageApplication.manifest?.label;
-        if (label === PackageType.ARCHIVED) {
-            return PackageType.ARCHIVED;
-        }
-        if (!label) {
-            return PackageType.CUSTOM;
-        }
-        if (label === PackageType.OFFICIAL && this.isOwnedByManagement(packageApplication)) {
-            return PackageType.OFFICIAL;
-        }
-        if (label === PackageType.COMMUNITY) {
-            return PackageType.COMMUNITY;
-        }
-        return PackageType.UNKNOWN;
-    }
+    PackageType["COMMUNITY"] = "COMMUNITY";
     /**
-     * Verifies if an application is owned by management tenant.
-     *
-     * @param app The application to verify.
-     * @returns True if owned by management tenant.
+     * A package where the origin is unknown (e.g. uploaded to management with an unknown label)
      */
-    isOwnedByManagement(app) {
-        const appOwner = get(app, 'owner.tenant.id');
-        return appOwner === 'management';
-    }
-    pluginsFromManifest(manifest) {
-        const plugins = manifest.exports;
-        const extendedPlugins = plugins
-            .filter(p => p.scope === PluginsExportScopes.SELF)
-            .map(p => ({
-            ...p,
-            id: PluginsService.createPluginId(manifest.contextPath, p, manifest.version),
-            contextPath: manifest.contextPath,
-            version: manifest.version,
-            versioningMatrix: manifest.versioningMatrix,
-            license: manifest.license,
-            type: PackageType.CUSTOM
-        }));
-        return extendedPlugins;
-    }
-    async getReadmeFileContent(baseUrl) {
-        return this.getFileContent(baseUrl, 'readme');
-    }
-    async getChangelogFileContent(baseUrl) {
-        return this.getFileContent(baseUrl, 'changelog');
-    }
-    async getFileContent(baseUrl, fileType) {
-        const file = await this.getFile(baseUrl, fileType);
-        if (file.status === 200) {
-            return await file.text();
+    PackageType["UNKNOWN"] = "UNKNOWN";
+    /**
+     * A custom package e.g. uploaded to the tenant by a user
+     */
+    PackageType["CUSTOM"] = "CUSTOM";
+    /**
+     * A package that was archived by the user
+     */
+    PackageType["ARCHIVED"] = "ARCHIVED";
+})(PackageType || (PackageType = {}));
+
+class PluginsService {
+    static convertInstalledRemotesToIds(remotes) {
+        if (!remotes) {
+            return;
         }
-        return '';
+        const importContextPaths = Object.keys(remotes);
+        const plugins = [];
+        importContextPaths.forEach(contextPath => {
+            const moduleNames = remotes[contextPath] || [];
+            plugins.push(...moduleNames.map(module => PluginsService.createPluginId(contextPath, module, '', true)));
+        });
+        return plugins;
     }
-    async getFile(baseUrl, fileType) {
-        const options = {
-            method: 'GET',
-            headers: { 'Content-Type': 'text/markdown' }
-        };
-        const uppercaseFilename = fileType === 'readme' ? 'README.md' : 'CHANGELOG.md';
-        let result = await this.client.fetch(`${baseUrl}${uppercaseFilename}`, options);
-        if (result && result.status === 404) {
-            result = await this.client.fetch(`${baseUrl}${uppercaseFilename.toLowerCase()}`, options);
+    static createPluginId(contextPath, plugin, version, useLatest = false) {
+        const moduleName = typeof plugin === 'string' ? plugin : plugin.module;
+        if (useLatest) {
+            return `${contextPath}/${moduleName}`;
         }
-        return result;
-    }
-    isSelfScopedPlugin(plugin, contextPath) {
-        return (plugin.scope === PluginsExportScopes.SELF &&
-            (!contextPath || plugin.contextPath === contextPath));
-    }
-    getSelfScopedPlugins(plugins, contextPath) {
-        return plugins.filter(plugin => this.isSelfScopedPlugin(plugin, contextPath));
+        return `${contextPath}@${version}/${moduleName}`;
     }
-    getAllPluginsExceptSelfScoped(plugins, contextPath) {
-        return plugins.filter(plugin => !this.isSelfScopedPlugin(plugin, contextPath));
+    constructor(applicationService, appStateService, client) {
+        this.applicationService = applicationService;
+        this.appStateService = appStateService;
+        this.client = client;
     }
-    removeDuplicates(apps, key) {
-        const uniqueList = [];
-        const groupedAppsByKey = groupBy(apps, key);
-        const groupedApps = Object.keys(groupedAppsByKey).map(key => groupedAppsByKey[key]);
-        for (const appsGroup of groupedApps) {
-            if (appsGroup.length < 2) {
-                uniqueList.push(...appsGroup);
-            }
-            else {
-                const appFromCurrentTenant = appsGroup.find(app => this.isFromCurrentTenant(app));
-                if (appFromCurrentTenant) {
-                    uniqueList.push(appFromCurrentTenant);
-                    continue;
-                }
-                const appNotOwnedByManagement = appsGroup.find(app => !this.isOwnedByManagement(app));
-                uniqueList.push(appNotOwnedByManagement);
-            }
-        }
-        return uniqueList;
+    /**
+     * Fetches a list of available packages.
+     * @param params Additional query parameters.
+     * @returns Returns a list of packages.
+     */
+    async listPackages(params = {}) {
+        const apps = await this.listApplicationsByCurrentTenant(params);
+        const webApps = apps.filter(app => this.isPackage(app));
+        const uniqueWebApps = this.removeDuplicates(webApps, 'contextPath');
+        return uniqueWebApps.sort((a, b) => a.name.localeCompare(b.name));
     }
-    isFromCurrentTenant(app) {
-        return app.owner.tenant.id === this.appStateService.currentTenant.value.name;
+    /**
+     * Checks if an application is a package.
+     * @param application Application managed object.
+     * @returns Returns true if the application is a package.
+     */
+    isPackage(application) {
+        return application.manifest?.isPackage === true;
     }
     /**
-     * Modifies the list of plugins to have additional information such as id.
-     * @ignore
+     * Updates the remotes field in the application configuration by adding new plugins.
+     * Important: if the remotes object is not set on the configuration object,
+     * remotes will not be added. Make sure that this object exists in the application configuration.
+     * @param application Application managed object.
+     * @param plugins List of remotes to be added.
+     * @returns Returns updated application remotes.
      */
-    extendPluginsDetails(application, version, useLatest = false) {
-        const plugins = application.manifest.exports;
-        const extendedPlugins = plugins.map(p => ({
-            ...p,
-            id: PluginsService.createPluginId(application.contextPath, p, version.version, useLatest),
-            idLatest: PluginsService.createPluginId(application.contextPath, p, version.version, true),
-            contextPath: application.contextPath,
-            version: version.version,
-            versioningMatrix: application.manifest.versioningMatrix,
-            tags: useLatest ? ['latest'] : version.tags || [],
-            license: application.manifest.license,
-            type: this.getPackageType(application),
-            originApp: application
-        }));
-        return extendedPlugins;
+    async addRemotes(application, plugins) {
+        const pluginsArray = Array.isArray(plugins) ? plugins : [plugins];
+        const manifestRemotes = application.manifest?.remotes || {};
+        const appConfig = application?.config;
+        const appConfigRemotes = appConfig?.remotes || manifestRemotes;
+        const appConfigExcludedRemotes = appConfig?.excludedRemotes || {};
+        // only normal and self optional scoped plugins should be added to remotes
+        // self scoped plugins will be automatically added
+        const allPluginsExceptSelfScoped = this.getAllPluginsExceptSelfScoped(pluginsArray, application.contextPath);
+        const newRemotes = this.addPluginToRemotesConfig(appConfigRemotes, allPluginsExceptSelfScoped);
+        // should be unproblematic to remove all categories of plugins from excluded remotes
+        const newExcludedRemotes = this.removePluginsFromRemotesConfig(appConfigExcludedRemotes, plugins);
+        return await this.updateRemotesInAppConfig(application, newRemotes, newExcludedRemotes);
     }
-    async listApplicationsByCurrentTenant(params = {}) {
-        const filter = Object.assign({
-            type: 'HOSTED',
-            pageSize: 2000,
-            withTotalPages: true
-        }, params);
-        const sharedFilter = Object.assign({
-            availability: ApplicationAvailability.SHARED,
-            type: 'HOSTED',
-            pageSize: 2000,
-            withTotalPages: true
-        }, params);
-        const tenantName = this.appStateService.currentTenant.value.name;
-        const [resultAppsOwnedByTenant, resultSharedApps] = await Promise.all([
-            this.applicationService.listByTenant(tenantName, filter),
-            this.applicationService.list(sharedFilter)
-        ]);
-        const { data: appsOwnedByTenant } = resultAppsOwnedByTenant;
-        const { data: sharedApps } = resultSharedApps;
-        const webApps = [...appsOwnedByTenant, ...sharedApps];
-        return uniqBy(webApps, (app) => app.id);
+    /**
+     * Updates the remotes field in the application configuration by removing plugins.
+     * @param application Application managed object.
+     * @param plugins List of remotes to be removed.
+     * @returns Returns updated application remotes.
+     */
+    async removeRemotes(application, plugins) {
+        const pluginsArray = Array.isArray(plugins) ? plugins : [plugins];
+        const manifestRemotes = application.manifest?.remotes || {};
+        const appConfig = application?.config;
+        const appConfigRemotes = appConfig?.remotes || manifestRemotes;
+        const appConfigExcludedRemotes = appConfig?.excludedRemotes || {};
+        // app plugins need to be removed from remotes
+        const newRemotes = this.removePluginsFromRemotesConfig(appConfigRemotes, plugins);
+        // self scoped plugins need to be added to excluded remotes
+        // as they would be otherwise automatically added to remotes
+        const selfScopedPlugins = this.getSelfScopedPlugins(pluginsArray, application.contextPath);
+        const newExcludedRemotes = this.addPluginToRemotesConfig(appConfigExcludedRemotes, selfScopedPlugins);
+        return await this.updateRemotesInAppConfig(application, newRemotes, newExcludedRemotes);
     }
-    addPluginToRemotesConfig(remotesConfig, plugins) {
-        if (!plugins) {
-            return;
-        }
-        const remotesCopy = cloneDeep(remotesConfig);
-        const temp = Array.isArray(plugins) ? plugins : [plugins];
-        temp.forEach(plugin => {
-            const { contextPath, moduleName } = this.parsePluginId(plugin.id);
-            if (!contextPath || !moduleName) {
-                return;
-            }
-            remotesCopy[contextPath]?.length >= 0
-                ? remotesCopy[contextPath].push(moduleName)
-                : (remotesCopy[contextPath] = []).push(moduleName);
-            remotesCopy[contextPath] = [...new Set(remotesCopy[contextPath])];
+    /**
+     * Updates the remotes field in the application configuration.
+     * @param application Application managed object.
+     * @param plugins List of remotes to be added.
+     * @returns Returns updated application remotes.
+     */
+    async updateRemotesInAppConfig(application, plugins, excludedRemotes) {
+        const updatedAppWithConfig = await this.applicationService.updateApplicationConfig(application, {
+            remotes: plugins,
+            excludedRemotes: excludedRemotes || {}
         });
-        return remotesCopy;
+        return updatedAppWithConfig?.config || { remotes: {} };
     }
-    removePluginsFromRemotesConfig(remotesConfig, plugins) {
-        const remotesCopy = cloneDeep(remotesConfig);
-        const temp = Array.isArray(plugins) ? plugins : [plugins];
-        temp.forEach(plugin => {
-            const { rawContextPath, moduleName } = this.parsePluginId(plugin.id);
-            if (!rawContextPath || !moduleName) {
-                return;
-            }
-            // Find all keys in remotesConfig that match the plugin context (regardless of version)
-            Object.keys(remotesCopy).forEach(key => {
-                if (key === rawContextPath || key.startsWith(`${rawContextPath}@`)) {
-                    remotesCopy[key] = remotesCopy[key].filter(p => p !== moduleName);
-                    remotesCopy[key] = [...new Set(remotesCopy[key])];
-                    if (remotesCopy[key].length === 0) {
-                        delete remotesCopy[key];
-                    }
-                }
-            });
+    /**
+     * Fetches the application manifest.
+     * @param application Application managed object.
+     * @returns Returns the application manifest.
+     */
+    async getCumulocityJsonFile(application) {
+        const c8yJson = await this.applicationService.getAppManifest(application);
+        if (!c8yJson.remotes) {
+            c8yJson.remotes = {};
+        }
+        return c8yJson;
+    }
+    /**
+     * Sets the initial state of remotes in the configuration (when it's missing), based on the list of remotes being in the application manifest.
+     * @param application  Application managed object.
+     * @returns Returns a list of remotes that has been assigned to the configuration object.
+     */
+    async setInitialRemotes(application) {
+        try {
+            const manifest = await this.getCumulocityJsonFile(application);
+            const manifestRemotes = manifest.remotes;
+            return await this.updateRemotesInAppConfig(application, manifestRemotes || {}, {});
+        }
+        catch (er) {
+            return undefined;
+        }
+    }
+    async resetRemotes(application) {
+        return await this.applicationService.updateApplicationConfig(application, {
+            remotes: undefined,
+            excludedRemotes: undefined
         });
-        return remotesCopy;
+    }
+    sortVersions(source, order) {
+        const sourceCopy = cloneDeep(source);
+        if (source.list && source.path) {
+            const path = sourceCopy.path.join('.');
+            return sourceCopy.list.sort((a, b) => compare(coerce(get(a, path)), coerce(get(b, path))) * (order === 'asc' ? 1 : -1));
+        }
+        else {
+            return sourceCopy.sort((a, b) => compare(coerce(a), coerce(b)) * (order === 'asc' ? 1 : -1));
+        }
     }
     /**
-     * Parses id of the plugin and returns object with context path, raw context path (without version) and module name.
-     * For example:
-     * ```ts
-     * const id = 'widget-plugin@1021.0.1/WidgetPluginModule'
-     * const parsed = parsePluginId(id); // { contextPath: 'widget-plugin@1021.0.1', moduleName: 'WidgetPluginModule', rawContextPath: 'widget-plugin' }
-     * @param id Plugin id in the format of `<contextPath>@<version>/<moduleName>`
-     * @returns Object with context path, module name and raw context path (without version).
+     * Extracts a list of exported plugins from the application object.
+     * @param application Application managed object.
+     * @param useLatest Set this to true, to not bind the plugin to any version.
+     * @returns Returns a list of exported plugins.
      */
-    parsePluginId(id) {
-        const [contextPath, moduleName] = id.split('/');
-        const [rawContextPath] = contextPath.split('@');
-        return { rawContextPath, contextPath, moduleName };
+    getMFExports(application, excludedScopes = [
+        PluginsExportScopes.SELF,
+        PluginsExportScopes.SELF_OPTIONAL,
+        PluginsExportScopes.GLOBAL
+    ], useLatest = false) {
+        const manifest = application.manifest;
+        if (!manifest || !manifest.exports) {
+            return [];
+        }
+        return this.extendPluginsDetails(application, {
+            version: manifest.version,
+            binaryId: undefined
+        }, useLatest).filter(plugin => !excludedScopes.includes(plugin.scope));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, deps: [{ token: i1.ApplicationService }, { token: AppStateService }, { token: i1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.ApplicationService }, { type: AppStateService }, { type: i1.FetchClient }] });
-
-class PluginsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, providers: [PluginsService] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: [PluginsService]
-                }]
-        }] });
-
-/**
- * An extension HOOK can use either a pure value:
- * ```typescript
- *  { provide: HOOK_X, useValue: { ...hookValue }, multi: true }
- * ```
- *
- * Or an array to directly register multiple:
- * ```typescript
- *  { provide: HOOK_X, useValue: [{ ...hookValues }], multi: true }
- * ```
- *
- * Or an ExtensionFactory which allows to define a get() function. This function
- * gets called on each navigation with the current route and can return values
- * async (observable or promise).
- * ```typescript
- *  { provide: HOOK_X, useFactory: { get: (route) => doSomethingAsync(route) }, multi: true }
- * ```
- * @deprecated Consider using the `hookVersion` function instead.
- */
-const HOOK_VERSION = new InjectionToken('HOOK_VERSION');
-const VERSION_MODULE_CONFIG = new InjectionToken('VERSION_MODULE_CONFIG');
-/**
- * You can either provide a single `Version` as parameter:
- * ```typescript
- *  hookVersion(...)
- * ```
- *
- * Or an array to directly register multiple:
- * ```typescript
- *  hookVersion([...])
- * ```
- *
- * Or you provide an Service that implements `ExtensionFactory<Version>`
- * ```typescript
- *  export class MyVersionFactory implements ExtensionFactory<Version> {...}
- *  ...
- *  hookVersion(MyVersionFactory)
- * ```
- * A typed alternative to `HOOK_VERSION`.
- * @param versions The `Version`'s or `ExtensionFactory` to be provided.
- * @returns An `Provider` to be provided in your module.
- */
-function hookVersion(versions, options) {
-    return hookGeneric(versions, HOOK_VERSION, options);
-}
-
-/**
- * Will provide the backend versions of the tenant.
- * The system option 'system' -> 'version' is used for this.
- */
-class BackendVersionFactory {
-    constructor(config, appState) {
-        this.config = config;
-        this.appState = appState;
-        this.backendVersion$ = of([]);
-        if (this.config?.disableBackendVersionFactory) {
-            return;
+    /**
+     * Extracts a list of exports from each available package.
+     * @param allVersions If set to true, all and not only latest versions are included.
+     * @param excludedScopes Defines which scopes should not be loaded.
+     * @returns Returns a list of all exported plugins.
+     */
+    async getAllMFExports(allVersions = false, excludedScopes = [
+        PluginsExportScopes.SELF,
+        PluginsExportScopes.SELF_OPTIONAL,
+        PluginsExportScopes.GLOBAL
+    ]) {
+        const plugins = new Array();
+        const packages = await this.listPackages();
+        for (const pkg of packages) {
+            if (!pkg?.manifest?.exports) {
+                continue;
+            }
+            if (allVersions && Array.isArray(pkg.applicationVersions)) {
+                pkg.applicationVersions.forEach(version => {
+                    plugins.push(...this.extendPluginsDetails(pkg, version));
+                });
+            }
+            else {
+                plugins.push(...this.extendPluginsDetails(pkg, {
+                    version: pkg.manifest.version,
+                    binaryId: undefined
+                }));
+            }
         }
-        this.backendVersion$ = this.appState.state$.pipe(map(state => state?.versions?.backend), filter(backendVersion => !!backendVersion), distinctUntilChanged(), map(backendVersion => this.buildBackendVersion(backendVersion)), shareReplay(1));
-    }
-    get() {
-        return this.backendVersion$;
-    }
-    buildBackendVersion(backendVersion) {
-        return {
-            label: gettext$1('Backend'),
-            version: backendVersion,
-            priority: 20,
-            type: 'SYSTEM',
-            hidden: true
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, deps: [{ token: VERSION_MODULE_CONFIG, optional: true }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BackendVersionFactory, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [VERSION_MODULE_CONFIG]
-                }] }, { type: AppStateService }] });
-
-class VersionService extends ExtensionPointForPlugins {
-    constructor(rootInjector, pluginService) {
-        super(rootInjector, pluginService);
-        this.items$ = this.setupItemsObservable();
-        this.nonHiddenItems$ = this.items$.pipe(map(versions => versions.filter(version => !version.hidden)));
-    }
-    get state() {
-        return this.state$.value;
-    }
-    add(version) {
-        this.state.add(version);
-        this.emitNewState();
-    }
-    remove(version) {
-        this.state.delete(version);
-        this.emitNewState();
-    }
-    cleanUpVersions(versions) {
-        return versions.map(version => pick(version, 'label', 'version', 'type', 'custom'));
-    }
-    setupItemsObservable() {
-        return fromTriggerOnce(undefined, this.refresh$, [
-            getInjectedHooks(HOOK_VERSION, this.injectors),
-            () => this.factories,
-            stateToFactory(this.state$)
-        ]).pipe(distinctUntilChanged(), map(versions => sortByPriority(versions)), shareReplay(1));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, deps: [{ token: i0.Injector }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }] });
-
-class PlatformDetailsService {
-    constructor(version, appState, apps) {
-        this.version = version;
-        this.appState = appState;
-        this.apps = apps;
-    }
-    async getPlatformDetailsObject() {
-        const currentUser = this.appState.currentUser.value;
-        const userId = currentUser?.id;
-        const userPermissions = this.getUserPermissions(currentUser);
-        const [hookedVersions, microserviceVersions] = await Promise.all([
-            this.getVersions(),
-            this.getMicroserviceVersions(userId)
-        ]);
-        const versions = [...hookedVersions, ...microserviceVersions];
-        const groupedVersions = groupBy(versions, 'type');
-        const tenantId = this.appState.currentTenant.value?.name;
-        // useful as `domainName` might be pointing to a custom domain
-        // self link should still allow to identify the actual environment of the tenant
-        const tenantSelfLink = this.appState.currentTenant.value?.self;
-        const tenantDomainName = this.appState.currentTenant.value?.domainName;
-        const applicationKey = this.appState.currentApplication.value?.key;
-        const applicationId = this.appState.currentApplication.value?.id;
-        const time = new Date().toISOString();
-        const url = document.URL;
-        const obj = {
-            time,
-            tenantId,
-            tenantSelfLink,
-            tenantDomainName,
-            url,
-            userId,
-            userPermissions,
-            applicationId,
-            applicationKey,
-            versions: groupedVersions
-        };
-        return obj;
+        return plugins.filter(plugin => !excludedScopes.includes(plugin.scope));
     }
-    async getVersions() {
-        const versions = await this.version.items$
-            .pipe(take(1), map(versions => this.version.cleanUpVersions(versions)))
-            .toPromise();
-        return versions;
+    /**
+     * Extracts a list of remotes from the application object.
+     * @param application Application managed object.
+     * @returns Returns list of remotes.
+     */
+    getMFRemotes(application) {
+        const manifest = application.manifest || {};
+        const config = application?.config;
+        let remotes = config?.remotes || manifest.remotes || {};
+        const manifestExports = manifest.exports || manifest.manifest?.exports || [];
+        const selfRemotes = manifestExports
+            .filter(plugin => plugin.scope === PluginsExportScopes.SELF)
+            .map(plugin => plugin.module || plugin.name);
+        if (selfRemotes.length) {
+            remotes = mergeRemotes([{ [application.contextPath]: selfRemotes }, remotes]);
+        }
+        remotes = removeRemotes(remotes, config?.excludedRemotes);
+        return remotes;
     }
-    async getMicroserviceVersions(userId) {
-        try {
-            const { data: apps } = await this.apps.listByUser(userId, {
-                pageSize: 2000,
-                dropOverwrittenApps: true,
-                noPaging: true
-            });
-            return apps
-                .filter(app => !!app.manifest?.version && app.type === ApplicationType.MICROSERVICE)
-                .map(app => {
-                return {
-                    label: app.name,
-                    version: app.manifest.version,
-                    type: app.type,
-                    custom: {
-                        owner: app.owner?.tenant?.id,
-                        provider: app.manifest?.provider
-                    }
-                };
-            });
+    /**
+     * Determines the type of a package.
+     * A package is OFFICIAL if it comes from management tenant and has a label attached called OFFICIAL.
+     * A package is COMMUNITY if it has a label called COMMUNITY.
+     * A package is CUSTOM if it does not have any label attached.
+     * A package is UNKNOWN if it has a label attached but it does not match COMMUNITY or OFFICIAL.
+     *
+     * Labels can be used to identify the status of a package. Community packages always need
+     * a license validation. The label will be shown on the application card to tell a user
+     * whether they are looking into an official or community package.
+     *
+     * @param packageApplication The package application object to check.
+     * @returns The package type.
+     */
+    getPackageType(packageApplication) {
+        const label = packageApplication.label || packageApplication.manifest?.label;
+        if (label === PackageType.ARCHIVED) {
+            return PackageType.ARCHIVED;
         }
-        catch (e) {
-            console.warn(e);
-            return [];
+        if (!label) {
+            return PackageType.CUSTOM;
         }
-    }
-    getUserPermissions(user) {
-        if (!user) {
-            return null;
+        if (label === PackageType.OFFICIAL && this.isOwnedByManagement(packageApplication)) {
+            return PackageType.OFFICIAL;
         }
-        const userPermissions = this.getDirectPermissionsOfUser(user);
-        const groupPermissions = this.getPermissionsOfAssignedGroups(user);
-        return { user: userPermissions, groups: groupPermissions };
-    }
-    getDirectPermissionsOfUser(user) {
-        const userChangedType = user;
-        const userRoleReferences = userChangedType.roles?.references || [];
-        return userRoleReferences.map(ref => ref.role.id);
+        if (label === PackageType.COMMUNITY) {
+            return PackageType.COMMUNITY;
+        }
+        return PackageType.UNKNOWN;
     }
-    getPermissionsOfAssignedGroups(user) {
-        const groups = user.groups?.references || [];
-        return groups.map(ref => {
-            const roleReferences = ref.group?.roles?.references || [];
-            const permissions = roleReferences.map(ref => ref.role.id);
-            return {
-                id: ref.group.id,
-                name: ref.group.name,
-                permissions
-            };
-        });
+    /**
+     * Verifies if an application is owned by management tenant.
+     *
+     * @param app The application to verify.
+     * @returns True if owned by management tenant.
+     */
+    isOwnedByManagement(app) {
+        const appOwner = get(app, 'owner.tenant.id');
+        return appOwner === 'management';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, deps: [{ token: VersionService }, { token: AppStateService }, { token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlatformDetailsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: i1.ApplicationService }] });
-
-class VersionListComponent {
-    constructor(version, appState, clipboardService, modalService, platformDetails, headerService) {
-        this.version = version;
-        this.appState = appState;
-        this.clipboardService = clipboardService;
-        this.modalService = modalService;
-        this.platformDetails = platformDetails;
-        this.headerService = headerService;
-        this.versionsToDirectlyDisplay$ = this.version.nonHiddenItems$;
-        this.currentTenantId$ = this.appState.currentTenant.pipe(map(tenant => tenant?.name), filter(tenantId => !!tenantId), distinctUntilChanged());
-        this.open$ = this.headerService.rightDrawerOpen$;
+    pluginsFromManifest(manifest) {
+        const plugins = manifest.exports;
+        const extendedPlugins = plugins
+            .filter(p => p.scope === PluginsExportScopes.SELF)
+            .map(p => ({
+            ...p,
+            id: PluginsService.createPluginId(manifest.contextPath, p, manifest.version),
+            contextPath: manifest.contextPath,
+            version: manifest.version,
+            versioningMatrix: manifest.versioningMatrix,
+            license: manifest.license,
+            type: PackageType.CUSTOM
+        }));
+        return extendedPlugins;
     }
-    async downloadPlatformDetails() {
-        const obj = await this.platformDetails.getPlatformDetailsObject();
-        const json = JSON.stringify(obj, undefined, 2);
-        const blob = new Blob([json]);
-        saveAs$1(blob, 'platform-details.json');
+    async getReadmeFileContent(baseUrl) {
+        return this.getFileContent(baseUrl, 'readme');
     }
-    copyIt(text) {
-        this.clipboardService.writeText(text);
+    async getChangelogFileContent(baseUrl) {
+        return this.getFileContent(baseUrl, 'changelog');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, deps: [{ token: VersionService }, { token: AppStateService }, { token: ClipboardService }, { token: i1$7.BsModalService }, { token: PlatformDetailsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VersionListComponent, isStandalone: true, selector: "c8y-version-list", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-version-list', standalone: true, imports: [IconDirective, NgIf, C8yTranslateDirective, NgFor, C8yTranslatePipe, AsyncPipe], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$7.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
-
-class VersionDrawerFactory {
-    constructor(options) {
-        this.options = options;
-        this.drawerItem = {
-            component: VersionListComponent,
-            position: 'right',
-            priority: 80,
-            id: 'platformInformation'
+    async getFileContent(baseUrl, fileType) {
+        const file = await this.getFile(baseUrl, fileType);
+        if (file.status === 200) {
+            return await file.text();
+        }
+        return '';
+    }
+    async getFile(baseUrl, fileType) {
+        const options = {
+            method: 'GET',
+            headers: { 'Content-Type': 'text/markdown' }
         };
+        const uppercaseFilename = fileType === 'readme' ? 'README.md' : 'CHANGELOG.md';
+        let result = await this.client.fetch(`${baseUrl}${uppercaseFilename}`, options);
+        if (result && result.status === 404) {
+            result = await this.client.fetch(`${baseUrl}${uppercaseFilename.toLowerCase()}`, options);
+        }
+        return result;
     }
-    get() {
-        return this.shouldShowPlatformInformation$().pipe(distinctUntilChanged(), map(shouldShowPlatformInformation => {
-            if (shouldShowPlatformInformation) {
-                return this.drawerItem;
+    isSelfScopedPlugin(plugin, contextPath) {
+        return (plugin.scope === PluginsExportScopes.SELF &&
+            (!contextPath || plugin.contextPath === contextPath));
+    }
+    getSelfScopedPlugins(plugins, contextPath) {
+        return plugins.filter(plugin => this.isSelfScopedPlugin(plugin, contextPath));
+    }
+    getAllPluginsExceptSelfScoped(plugins, contextPath) {
+        return plugins.filter(plugin => !this.isSelfScopedPlugin(plugin, contextPath));
+    }
+    removeDuplicates(apps, key) {
+        const uniqueList = [];
+        const groupedAppsByKey = groupBy(apps, key);
+        const groupedApps = Object.keys(groupedAppsByKey).map(key => groupedAppsByKey[key]);
+        for (const appsGroup of groupedApps) {
+            if (appsGroup.length < 2) {
+                uniqueList.push(...appsGroup);
             }
-            return [];
+            else {
+                const appFromCurrentTenant = appsGroup.find(app => this.isFromCurrentTenant(app));
+                if (appFromCurrentTenant) {
+                    uniqueList.push(appFromCurrentTenant);
+                    continue;
+                }
+                const appNotOwnedByManagement = appsGroup.find(app => !this.isOwnedByManagement(app));
+                uniqueList.push(appNotOwnedByManagement);
+            }
+        }
+        return uniqueList;
+    }
+    isFromCurrentTenant(app) {
+        return app.owner.tenant.id === this.appStateService.currentTenant.value.name;
+    }
+    /**
+     * Modifies the list of plugins to have additional information such as id.
+     * @ignore
+     */
+    extendPluginsDetails(application, version, useLatest = false) {
+        const plugins = application.manifest.exports;
+        const extendedPlugins = plugins.map(p => ({
+            ...p,
+            id: PluginsService.createPluginId(application.contextPath, p, version.version, useLatest),
+            idLatest: PluginsService.createPluginId(application.contextPath, p, version.version, true),
+            contextPath: application.contextPath,
+            version: version.version,
+            versioningMatrix: application.manifest.versioningMatrix,
+            tags: useLatest ? ['latest'] : version.tags || [],
+            license: application.manifest.license,
+            type: this.getPackageType(application),
+            originApp: application
         }));
+        return extendedPlugins;
     }
-    shouldShowPlatformInformation$() {
-        return combineLatest([
-            this.options.get$('hidePowered'),
-            this.options.get$('hidePlatformInformation')
-        ]).pipe(map(([hidePowered, hidePlatformInformation]) => {
-            if (hidePlatformInformation === undefined) {
-                return !hidePowered;
+    async listApplicationsByCurrentTenant(params = {}) {
+        const filter = Object.assign({
+            type: 'HOSTED',
+            pageSize: 2000,
+            withTotalPages: true
+        }, params);
+        const sharedFilter = Object.assign({
+            availability: ApplicationAvailability.SHARED,
+            type: 'HOSTED',
+            pageSize: 2000,
+            withTotalPages: true
+        }, params);
+        const tenantName = this.appStateService.currentTenant.value.name;
+        const [resultAppsOwnedByTenant, resultSharedApps] = await Promise.all([
+            this.applicationService.listByTenant(tenantName, filter),
+            this.applicationService.list(sharedFilter)
+        ]);
+        const { data: appsOwnedByTenant } = resultAppsOwnedByTenant;
+        const { data: sharedApps } = resultSharedApps;
+        const webApps = [...appsOwnedByTenant, ...sharedApps];
+        return uniqBy(webApps, (app) => app.id);
+    }
+    addPluginToRemotesConfig(remotesConfig, plugins) {
+        if (!plugins) {
+            return;
+        }
+        const remotesCopy = cloneDeep(remotesConfig);
+        const temp = Array.isArray(plugins) ? plugins : [plugins];
+        temp.forEach(plugin => {
+            const { contextPath, moduleName } = this.parsePluginId(plugin.id);
+            if (!contextPath || !moduleName) {
+                return;
             }
-            return !hidePlatformInformation;
-        }));
+            remotesCopy[contextPath]?.length >= 0
+                ? remotesCopy[contextPath].push(moduleName)
+                : (remotesCopy[contextPath] = []).push(moduleName);
+            remotesCopy[contextPath] = [...new Set(remotesCopy[contextPath])];
+        });
+        return remotesCopy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory }); }
+    removePluginsFromRemotesConfig(remotesConfig, plugins) {
+        const remotesCopy = cloneDeep(remotesConfig);
+        const temp = Array.isArray(plugins) ? plugins : [plugins];
+        temp.forEach(plugin => {
+            const { rawContextPath, moduleName } = this.parsePluginId(plugin.id);
+            if (!rawContextPath || !moduleName) {
+                return;
+            }
+            // Find all keys in remotesConfig that match the plugin context (regardless of version)
+            Object.keys(remotesCopy).forEach(key => {
+                if (key === rawContextPath || key.startsWith(`${rawContextPath}@`)) {
+                    remotesCopy[key] = remotesCopy[key].filter(p => p !== moduleName);
+                    remotesCopy[key] = [...new Set(remotesCopy[key])];
+                    if (remotesCopy[key].length === 0) {
+                        delete remotesCopy[key];
+                    }
+                }
+            });
+        });
+        return remotesCopy;
+    }
+    /**
+     * Parses id of the plugin and returns object with context path, raw context path (without version) and module name.
+     * For example:
+     * ```ts
+     * const id = 'widget-plugin@1021.0.1/WidgetPluginModule'
+     * const parsed = parsePluginId(id); // { contextPath: 'widget-plugin@1021.0.1', moduleName: 'WidgetPluginModule', rawContextPath: 'widget-plugin' }
+     * @param id Plugin id in the format of `<contextPath>@<version>/<moduleName>`
+     * @returns Object with context path, module name and raw context path (without version).
+     */
+    parsePluginId(id) {
+        const [contextPath, moduleName] = id.split('/');
+        const [rawContextPath] = contextPath.split('@');
+        return { rawContextPath, contextPath, moduleName };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, deps: [{ token: i1.ApplicationService }, { token: AppStateService }, { token: i1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: OptionsService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PluginsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.ApplicationService }, { type: AppStateService }, { type: i1.FetchClient }] });
 
 /**
  * Will provide the version of plugins installed to the current application.
@@ -22557,6 +22524,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{}]
         }] });
 
+class PasswordStrengthCheckerService {
+    constructor() {
+        this.GREEN = {
+            colorName: 'green',
+            color: 'rgb(0, 128, 0)',
+            description: gettext$1('strong'),
+            passwordStrength: PasswordStrength.GREEN
+        };
+        this.YELLOW = {
+            colorName: 'yellow',
+            color: 'rgb(255, 204, 51)',
+            description: gettext$1('medium'),
+            passwordStrength: PasswordStrength.YELLOW
+        };
+        this.RED = {
+            colorName: 'red',
+            color: 'rgb(170, 0, 51)',
+            description: gettext$1('weak'),
+            passwordStrength: PasswordStrength.RED
+        };
+    }
+    hasLowerCase(password) {
+        return password.search(/[a-z]/) !== -1;
+    }
+    hasUpperCase(password) {
+        return password.search(/[A-Z]/) !== -1;
+    }
+    hasNumbers(password) {
+        return password.search(/[0-9]/) !== -1;
+    }
+    hasSpecialChars(password) {
+        return password.search(/[^0-9a-zA-Z]+/) !== -1;
+    }
+    getStrengthColor(password) {
+        const passwordStrength = filter$2([
+            this.hasLowerCase(password),
+            this.hasUpperCase(password),
+            this.hasNumbers(password),
+            this.hasSpecialChars(password)
+        ]).length;
+        if (passwordStrength > 3) {
+            return this.GREEN;
+        }
+        else if (passwordStrength >= 3) {
+            return this.YELLOW;
+        }
+        else {
+            return this.RED;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * A drop-zone which is a file selector allowing users to select file(s) from their file system, either natively or by drag and drop.
  *
@@ -22594,6 +22619,7 @@ class DropAreaComponent {
         this.maxAllowedFiles = Infinity;
         this.isOver = false;
         this.errors = false;
+        this.disabled = false;
         this.onChange = _ => undefined;
         this.onTouched = () => undefined;
     }
@@ -22700,6 +22726,9 @@ class DropAreaComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     async onFilesSelected(files) {
         this.onTouched();
         const hasValidNameLength = this.filesService.checkMaxLength(files);
@@ -22839,11 +22868,11 @@ class DropAreaComponent {
         resolve(reader.result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FilesService }, { token: i1$1.TranslateService }, { token: BytesPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\" class=\"text-truncate\" title=\"{{ message | translate }}\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], standalone: true, imports: [CommonModule, C8yTranslatePipe, NgIf, NgClass, IconDirective], template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\" class=\"text-truncate\" title=\"{{ message | translate }}\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], standalone: true, imports: [CommonModule, C8yTranslatePipe, NgIf, NgClass, IconDirective], template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FilesService }, { type: i1$1.TranslateService }, { type: BytesPipe }, { type: i0.ElementRef }], propDecorators: { formControl: [{
                 type: Input
             }], title: [{
@@ -22994,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,
@@ -23007,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 }]