@c8y/ngx-components 1022.13.0 → 1022.16.2

package/fesm2022/c8y-ngx-components.mjs

@@ -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,6 +19106,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * Service to show a modal.
+ */
+class ModalService {
+    constructor(modalService, gainsightService) {
+        this.modalService = modalService;
+        this.gainsightService = gainsightService;
+    }
+    /**
+     * Shows a quick confirm message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
+     * @param confirmOptions Selection options to display as checkbox list.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels: modalLabels, status, confirmOptions },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick acknowledge message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param acknowledgeLabel The label to use.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
+        const labels = { ok: acknowledgeLabel, cancel: null };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels, status },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick logout confirmation modal.
+     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
+     */
+    async confirmLogout(body, status = Status.WARNING, labels = {}) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm and log out'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
+        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
+    }
+    triggerEvent(result, labels, productExperienceEvent) {
+        const data = { ...productExperienceEvent.data, url: window.location.href };
+        result
+            .then(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.ok
+            });
+        })
+            .catch(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.cancel
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
+
 class ThemeSwitcherService {
     constructor(options) {
         this.options = options;
@@ -19594,10 +19593,11 @@ class PasswordService {
         return this.DEFAULT_PASSWORD_MIN_LENGTH;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, deps: [{ token: i1$7.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$7.BsModalService }] });
 
 class TotpSetupComponent {
@@ -20424,63 +20424,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ selector: 'c8y-user-menu-outlet', standalone: true, imports: [NgIf, NgFor, OutletDirective, UserMenuItemComponent, C8yTranslatePipe, AsyncPipe], template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n" }]
         }], ctorParameters: () => [{ type: AppStateService }, { type: i1$7.BsModalService }, { type: SimplifiedAuthService }, { type: UserMenuService }, { type: HeaderService }] });
 
-class PasswordStrengthCheckerService {
-    constructor() {
-        this.GREEN = {
-            colorName: 'green',
-            color: 'rgb(0, 128, 0)',
-            description: gettext$1('strong'),
-            passwordStrength: PasswordStrength.GREEN
-        };
-        this.YELLOW = {
-            colorName: 'yellow',
-            color: 'rgb(255, 204, 51)',
-            description: gettext$1('medium'),
-            passwordStrength: PasswordStrength.YELLOW
-        };
-        this.RED = {
-            colorName: 'red',
-            color: 'rgb(170, 0, 51)',
-            description: gettext$1('weak'),
-            passwordStrength: PasswordStrength.RED
-        };
-    }
-    hasLowerCase(password) {
-        return password.search(/[a-z]/) !== -1;
-    }
-    hasUpperCase(password) {
-        return password.search(/[A-Z]/) !== -1;
-    }
-    hasNumbers(password) {
-        return password.search(/[0-9]/) !== -1;
-    }
-    hasSpecialChars(password) {
-        return password.search(/[^0-9a-zA-Z]+/) !== -1;
-    }
-    getStrengthColor(password) {
-        const passwordStrength = filter$2([
-            this.hasLowerCase(password),
-            this.hasUpperCase(password),
-            this.hasNumbers(password),
-            this.hasSpecialChars(password)
-        ]).length;
-        if (passwordStrength > 3) {
-            return this.GREEN;
-        }
-        else if (passwordStrength >= 3) {
-            return this.YELLOW;
-        }
-        else {
-            return this.RED;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * @deprecated: [MTM-56403] Password strength indicator removed from UI in favor of the enhanced password strength check list.
  */
@@ -20541,7 +20484,7 @@ class AuthenticationModule {
             CurrentPasswordModalComponent,
             TotpSetupComponent,
             PasswordInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthenticationModule, providers: [PasswordStrengthCheckerService, PasswordService], imports: [FormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthenticationModule, imports: [FormsModule,
             TooltipModule,
             CommonModule,
             ModalModule,
@@ -20581,8 +20524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CurrentPasswordModalComponent,
                         TotpSetupComponent,
                         PasswordInputComponent
-                    ],
-                    providers: [PasswordStrengthCheckerService, PasswordService]
+                    ]
                 }]
         }] });
 
@@ -20827,769 +20769,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;
-    }
-    static createPluginId(contextPath, plugin, version, useLatest = false) {
-        const moduleName = typeof plugin === 'string' ? plugin : plugin.module;
-        if (useLatest) {
-            return `${contextPath}/${moduleName}`;
-        }
-        return `${contextPath}@${version}/${moduleName}`;
+        this.backendVersion$ = this.appState.state$.pipe(map(state => state?.versions?.backend), filter(backendVersion => !!backendVersion), distinctUntilChanged(), map(backendVersion => this.buildBackendVersion(backendVersion)), shareReplay(1));
     }
-    constructor(applicationService, appStateService, client) {
-        this.applicationService = applicationService;
-        this.appStateService = appStateService;
-        this.client = client;
+    get() {
+        return this.backendVersion$;
     }
-    /**
-     * 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));
+    buildBackendVersion(backendVersion) {
+        return {
+            label: gettext$1('Backend'),
+            version: backendVersion,
+            priority: 20,
+            type: 'SYSTEM',
+            hidden: true
+        };
     }
-    /**
-     * 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;
+    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)));
     }
-    /**
-     * 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);
+    get state() {
+        return this.state$.value;
     }
-    /**
-     * 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);
+    add(version) {
+        this.state.add(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: {} };
+    remove(version) {
+        this.state.delete(version);
+        this.emitNewState();
     }
-    /**
-     * 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;
+    cleanUpVersions(versions) {
+        return versions.map(version => pick(version, 'label', 'version', 'type', 'custom'));
     }
-    /**
-     * 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;
-        }
+    setupItemsObservable() {
+        return fromTriggerOnce(undefined, this.refresh$, [
+            getInjectedHooks(HOOK_VERSION, this.injectors),
+            () => this.factories,
+            stateToFactory(this.state$)
+        ]).pipe(distinctUntilChanged(), map(versions => sortByPriority(versions)), shareReplay(1));
     }
-    async resetRemotes(application) {
-        return await this.applicationService.updateApplicationConfig(application, {
-            remotes: undefined,
-            excludedRemotes: 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;
     }
-    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));
-        }
+    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;
     }
-    /**
-     * 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 [];
-        }
-        return this.extendPluginsDetails(application, {
-            version: manifest.version,
-            binaryId: undefined
-        }, useLatest).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 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
-                }));
-            }
+    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
+                    }
+                };
+            });
         }
-        return plugins.filter(plugin => !excludedScopes.includes(plugin.scope));
-    }
-    /**
-     * 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]);
+        catch (e) {
+            console.warn(e);
+            return [];
         }
-        remotes = removeRemotes(remotes, config?.excludedRemotes);
-        return remotes;
     }
-    /**
-     * 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;
-        }
-        if (!label) {
-            return PackageType.CUSTOM;
-        }
-        if (label === PackageType.OFFICIAL && this.isOwnedByManagement(packageApplication)) {
-            return PackageType.OFFICIAL;
-        }
-        if (label === PackageType.COMMUNITY) {
-            return PackageType.COMMUNITY;
+    getUserPermissions(user) {
+        if (!user) {
+            return null;
         }
-        return PackageType.UNKNOWN;
+        const userPermissions = this.getDirectPermissionsOfUser(user);
+        const groupPermissions = this.getPermissionsOfAssignedGroups(user);
+        return { user: userPermissions, groups: groupPermissions };
     }
-    /**
-     * 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';
+    getDirectPermissionsOfUser(user) {
+        const userChangedType = user;
+        const userRoleReferences = userChangedType.roles?.references || [];
+        return userRoleReferences.map(ref => ref.role.id);
     }
-    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;
+    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
+            };
+        });
     }
-    async getReadmeFileContent(baseUrl) {
-        return this.getFileContent(baseUrl, 'readme');
+    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 getChangelogFileContent(baseUrl) {
-        return this.getFileContent(baseUrl, 'changelog');
+    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 getFileContent(baseUrl, fileType) {
-        const file = await this.getFile(baseUrl, fileType);
-        if (file.status === 200) {
-            return await file.text();
-        }
-        return '';
+    copyIt(text) {
+        this.clipboardService.writeText(text);
     }
-    async getFile(baseUrl, fileType) {
-        const options = {
-            method: 'GET',
-            headers: { 'Content-Type': 'text/markdown' }
+    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'
         };
-        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;
-    }
-    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);
-            }
-            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);
+    get() {
+        return this.shouldShowPlatformInformation$().pipe(distinctUntilChanged(), map(shouldShowPlatformInformation => {
+            if (shouldShowPlatformInformation) {
+                return this.drawerItem;
             }
-        }
-        return uniqueList;
+            return [];
+        }));
     }
-    isFromCurrentTenant(app) {
-        return app.owner.tenant.id === this.appStateService.currentTenant.value.name;
+    shouldShowPlatformInformation$() {
+        return combineLatest([
+            this.options.get$('hidePowered'),
+            this.options.get$('hidePlatformInformation')
+        ]).pipe(map(([hidePowered, hidePlatformInformation]) => {
+            if (hidePlatformInformation === undefined) {
+                return !hidePowered;
+            }
+            return !hidePlatformInformation;
+        }));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VersionDrawerFactory, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OptionsService }] });
+
+var ApplicationPluginStatus;
+(function (ApplicationPluginStatus) {
+    ApplicationPluginStatus["ORPHANED"] = "ORPHANED";
+    ApplicationPluginStatus["LATEST"] = "LATEST";
+    ApplicationPluginStatus["OUTDATED"] = "OUTDATED";
+    ApplicationPluginStatus["REVOKED"] = "REVOKED";
+    ApplicationPluginStatus["AUTO"] = "AUTO";
+})(ApplicationPluginStatus || (ApplicationPluginStatus = {}));
+var PackageType;
+(function (PackageType) {
     /**
-     * Modifies the list of plugins to have additional information such as id.
-     * @ignore
+     * A package coming from the official Cumulocity github enterprise.
      */
-    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 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) {
+    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 PluginsService {
+    static convertInstalledRemotesToIds(remotes) {
+        if (!remotes) {
             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])];
+        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 remotesCopy;
+        return plugins;
     }
-    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;
+    static createPluginId(contextPath, plugin, version, useLatest = false) {
+        const moduleName = typeof plugin === 'string' ? plugin : plugin.module;
+        if (useLatest) {
+            return `${contextPath}/${moduleName}`;
+        }
+        return `${contextPath}@${version}/${moduleName}`;
+    }
+    constructor(applicationService, appStateService, client) {
+        this.applicationService = applicationService;
+        this.appStateService = appStateService;
+        this.client = client;
     }
     /**
-     * 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).
+     * Fetches a list of available packages.
+     * @param params Additional query parameters.
+     * @returns Returns a list of packages.
      */
-    parsePluginId(id) {
-        const [contextPath, moduleName] = id.split('/');
-        const [rawContextPath] = contextPath.split('@');
-        return { rawContextPath, contextPath, moduleName };
+    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: 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;
-        }
-        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$;
+    /**
+     * 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;
     }
-    buildBackendVersion(backendVersion) {
-        return {
-            label: gettext$1('Backend'),
-            version: backendVersion,
-            priority: 20,
-            type: 'SYSTEM',
-            hidden: true
-        };
+    /**
+     * 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);
     }
-    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)));
+    /**
+     * 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);
     }
-    get state() {
-        return this.state$.value;
+    /**
+     * 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: {} };
     }
-    add(version) {
-        this.state.add(version);
-        this.emitNewState();
+    /**
+     * 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;
     }
-    remove(version) {
-        this.state.delete(version);
-        this.emitNewState();
+    /**
+     * 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;
+        }
     }
-    cleanUpVersions(versions) {
-        return versions.map(version => pick(version, 'label', 'version', 'type', 'custom'));
+    async resetRemotes(application) {
+        return await this.applicationService.updateApplicationConfig(application, {
+            remotes: undefined,
+            excludedRemotes: undefined
+        });
     }
-    setupItemsObservable() {
-        return fromTriggerOnce(undefined, this.refresh$, [
-            getInjectedHooks(HOOK_VERSION, this.injectors),
-            () => this.factories,
-            stateToFactory(this.state$)
-        ]).pipe(distinctUntilChanged(), map(versions => sortByPriority(versions)), shareReplay(1));
+    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));
+        }
     }
-    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;
+    /**
+     * 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 [];
+        }
+        return this.extendPluginsDetails(application, {
+            version: manifest.version,
+            binaryId: undefined
+        }, useLatest).filter(plugin => !excludedScopes.includes(plugin.scope));
     }
-    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;
+    /**
+     * 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
+                }));
+            }
+        }
+        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 +22500,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{}]
         }] });
 
+class PasswordStrengthCheckerService {
+    constructor() {
+        this.GREEN = {
+            colorName: 'green',
+            color: 'rgb(0, 128, 0)',
+            description: gettext$1('strong'),
+            passwordStrength: PasswordStrength.GREEN
+        };
+        this.YELLOW = {
+            colorName: 'yellow',
+            color: 'rgb(255, 204, 51)',
+            description: gettext$1('medium'),
+            passwordStrength: PasswordStrength.YELLOW
+        };
+        this.RED = {
+            colorName: 'red',
+            color: 'rgb(170, 0, 51)',
+            description: gettext$1('weak'),
+            passwordStrength: PasswordStrength.RED
+        };
+    }
+    hasLowerCase(password) {
+        return password.search(/[a-z]/) !== -1;
+    }
+    hasUpperCase(password) {
+        return password.search(/[A-Z]/) !== -1;
+    }
+    hasNumbers(password) {
+        return password.search(/[0-9]/) !== -1;
+    }
+    hasSpecialChars(password) {
+        return password.search(/[^0-9a-zA-Z]+/) !== -1;
+    }
+    getStrengthColor(password) {
+        const passwordStrength = filter$2([
+            this.hasLowerCase(password),
+            this.hasUpperCase(password),
+            this.hasNumbers(password),
+            this.hasSpecialChars(password)
+        ]).length;
+        if (passwordStrength > 3) {
+            return this.GREEN;
+        }
+        else if (passwordStrength >= 3) {
+            return this.YELLOW;
+        }
+        else {
+            return this.RED;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordStrengthCheckerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * A drop-zone which is a file selector allowing users to select file(s) from their file system, either natively or by drag and drop.
  *
@@ -22594,6 +22595,7 @@ class DropAreaComponent {
         this.maxAllowedFiles = Infinity;
         this.isOver = false;
         this.errors = false;
+        this.disabled = false;
         this.onChange = _ => undefined;
         this.onTouched = () => undefined;
     }
@@ -22700,6 +22702,9 @@ class DropAreaComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     async onFilesSelected(files) {
         this.onTouched();
         const hasValidNameLength = this.filesService.checkMaxLength(files);
@@ -22839,11 +22844,11 @@ class DropAreaComponent {
         resolve(reader.result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FilesService }, { token: i1$1.TranslateService }, { token: BytesPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\" class=\"text-truncate\" title=\"{{ message | translate }}\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], standalone: true, imports: [CommonModule, C8yTranslatePipe, NgIf, NgClass, IconDirective], template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\" class=\"text-truncate\" title=\"{{ message | translate }}\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], standalone: true, imports: [CommonModule, C8yTranslatePipe, NgIf, NgClass, IconDirective], template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FilesService }, { type: i1$1.TranslateService }, { type: BytesPipe }, { type: i0.ElementRef }], propDecorators: { formControl: [{
                 type: Input
             }], title: [{