@c8y/ngx-components 1021.63.2 → 1021.67.0

package/fesm2022/c8y-ngx-components-ecosystem.mjs

@@ -1,18 +1,21 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Pipe, EventEmitter, Output, ViewChild, Injectable, NgModule } from '@angular/core';
+import { Component, Input, Pipe, inject, Injectable, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
-import { gettext, Status, PackageType, PluginsService, PluginsExportScopes, Permissions, ViewContext, ApplicationPluginStatus, DataGridComponent, CoreModule, hookRoute, C8yStepper, FormsModule, hookTab, hookNavigator, hookWizard } from '@c8y/ngx-components';
+import { gettext, Status, GainsightService, PluginsService, AlertService, HumanizeAppNamePipe, PackageType, PluginsExportScopes, Permissions, ViewContext, ApplicationPluginStatus, BottomDrawerRef, DataGridComponent, CoreModule, hookRoute, C8yStepper, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, C8yTranslatePipe, FormsModule, hookTab, hookNavigator, hookWizard } from '@c8y/ngx-components';
 import * as i1 from '@c8y/ngx-components/ecosystem/shared';
-import { PRODUCT_EXPERIENCE_ECOSYSTEM, packageProperties, defaultPackageAvailabilities, EcosystemWizards, ListFiltersComponent, ApplicationPropertiesFormComponent, defaultPackageTypes, SharedEcosystemModule, ERROR_TYPE, APP_STATE, PACKAGE_TYPE_LABELS, defaultPackageContents } from '@c8y/ngx-components/ecosystem/shared';
+import { EcosystemService, PRODUCT_EXPERIENCE_ECOSYSTEM, packageProperties, defaultPackageAvailabilities, EcosystemWizards, ListFiltersComponent, ApplicationPropertiesFormComponent, defaultPackageTypes, SharedEcosystemModule, ERROR_TYPE, APP_STATE, PACKAGE_TYPE_LABELS, defaultPackageContents, PackageChangelogComponent } from '@c8y/ngx-components/ecosystem/shared';
 import * as i3 from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import * as i4 from '@c8y/client';
 import { ApplicationType, Isolation, BillingMode } from '@c8y/client';
-import * as i4$1 from '@ngx-translate/core';
+import * as i6 from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
 import * as i1$1 from 'ngx-bootstrap/modal';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { isEmpty } from 'lodash';
 import { Subject, BehaviorSubject, combineLatest, of, firstValueFrom, from, map as map$1 } from 'rxjs';
 import { map, takeUntil, tap, switchMap, shareReplay } from 'rxjs/operators';
@@ -24,7 +27,7 @@ import { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
 import { A11yModule } from '@angular/cdk/a11y';
 import { ArchivedConfirmModule } from '@c8y/ngx-components/ecosystem/archived-confirm';
 import { LicenseConfirmModule } from '@c8y/ngx-components/ecosystem/license-confirm';
-import * as i6 from 'ngx-bootstrap/dropdown';
+import * as i6$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 
@@ -303,71 +306,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class PluginListItemComponent {
-    constructor(pluginService) {
-        this.pluginService = pluginService;
-        this.hideSource = false;
-        this.isItemSelected = new EventEmitter();
-        this.packageType = PackageType.UNKNOWN;
-        this.PACKAGE_TYPE = PackageType;
-    }
-    ngOnInit() {
-        this.packageType = this.pluginService.getPackageType(this.plugin.originApp);
-    }
-    onChange(event) {
-        this.plugin.selected = !this.plugin.selected;
-        this.isItemSelected.next(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListItemComponent, deps: [{ token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: { plugin: "plugin", selectable: "selectable", hideSource: "hideSource" }, outputs: { isItemSelected: "isItemSelected" }, ngImport: i0, template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0 text-center\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div class=\"p-relative\">\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"tag tag--info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n\n  <span\n    class=\"tag a-s-start m-t-8 m-l-4\"\n    [ngClass]=\"{\n      'tag--default': packageType === PACKAGE_TYPE.COMMUNITY,\n      'tag--primary': packageType === PACKAGE_TYPE.OFFICIAL\n    }\"\n  >\n    {{ plugin.originApp?.label || plugin.originApp?.manifest?.label | translatePackageLabel }}\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i1.TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-plugin-list-item', template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0 text-center\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div class=\"p-relative\">\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"tag tag--info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n\n  <span\n    class=\"tag a-s-start m-t-8 m-l-4\"\n    [ngClass]=\"{\n      'tag--default': packageType === PACKAGE_TYPE.COMMUNITY,\n      'tag--primary': packageType === PACKAGE_TYPE.OFFICIAL\n    }\"\n  >\n    {{ plugin.originApp?.label || plugin.originApp?.manifest?.label | translatePackageLabel }}\n  </span>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i2.PluginsService }], propDecorators: { plugin: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], hideSource: [{
-                type: Input
-            }], isItemSelected: [{
-                type: Output
-            }] } });
-
-class PluginListComponent {
-    constructor(ecosystemService, bsModalService, pluginsService, alertService, translateService, gainsightService, humanizeAppNamePipe) {
-        this.ecosystemService = ecosystemService;
-        this.bsModalService = bsModalService;
-        this.pluginsService = pluginsService;
-        this.alertService = alertService;
-        this.translateService = translateService;
-        this.gainsightService = gainsightService;
-        this.humanizeAppNamePipe = humanizeAppNamePipe;
+class PluginListService {
+    constructor() {
         this.CURRENT_LOCATION = location.href;
-        this.emptyListText = '';
-        this.hideSource = false;
-        /**
-         * Shows the install button for each plugin separately. Currently used in package-details view.
-         */
-        this.installable = false;
-        this.selectedItems = new EventEmitter();
-        this.remotePlugins$ = new BehaviorSubject({});
-        this.selectedPlugins = {};
         this.updatingPluginId = { install: '', uninstall: '' };
         this.appsDisabled = new Set();
-    }
-    updateSelectedItems(selected, plugin) {
-        this.selectedPlugins[plugin.id] = selected ? plugin : undefined;
-        const onlyInstalledPlugins = Object.values(this.selectedPlugins).filter(Boolean);
-        this.selectedItems.emit(onlyInstalledPlugins);
-    }
-    async installPlugin(plugin) {
-        await this.updateAppRemotes(plugin, 'install');
-    }
-    async uninstallPlugin(plugin) {
-        await this.updateAppRemotes(plugin, 'uninstall');
-    }
-    async updateAppRemotes(plugin, updateType) {
+        this.gainsightService = inject(GainsightService);
+        this.pluginsService = inject(PluginsService);
+        this.alertService = inject(AlertService);
+        this.ecosystemService = inject(EcosystemService);
+        this.humanizeAppNamePipe = inject(HumanizeAppNamePipe);
+        this.translateService = inject(TranslateService);
+        this.bsModalService = inject(BsModalService);
+    }
+    async updateAppRemotes(plugin, updateType, pluginPackage) {
         this.updatingPluginId[updateType] = plugin?.id;
         let initialState;
         try {
@@ -415,7 +367,7 @@ class PluginListComponent {
                         continue;
                     }
                 }
-                await this.handleRemotesUpdate(app, plugin, updateType);
+                await this.handleRemotesUpdate(app, plugin, updateType, pluginPackage);
                 const humanizedAppName = await firstValueFrom(this.humanizeAppNamePipe.transform(app));
                 const successText = updateType === 'install'
                     ? this.translateService.instant(gettext('Plugin installed to application "{{ appName }}".'), {
@@ -431,6 +383,27 @@ class PluginListComponent {
         }
         this.updatingPluginId[updateType] = '';
     }
+    async getAppsForUpdate(plugin, updateType) {
+        let apps = (await this.ecosystemService.getWebApplications()).filter(app => this.ecosystemService.isOwner(app) && app.type !== ApplicationType.EXTERNAL);
+        if (updateType === 'install') {
+            this.appsDisabled.clear();
+            for (const app of apps) {
+                if (this.isPluginInstalledInApp(plugin, app)) {
+                    this.appsDisabled.add(app.id);
+                }
+            }
+        }
+        if (updateType === 'uninstall') {
+            const installedApps = [];
+            for (const app of apps) {
+                if (this.isPluginInstalledInApp(plugin, app)) {
+                    installedApps.push(app);
+                }
+            }
+            apps = installedApps;
+        }
+        return apps;
+    }
     onUpdateEventHandleGS(plugin, app, updateType, error) {
         const pluginCustomEventInfo = pick(plugin, [
             'name',
@@ -454,27 +427,6 @@ class PluginListComponent {
         };
         this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, eventData);
     }
-    async getAppsForUpdate(plugin, updateType) {
-        let apps = (await this.ecosystemService.getWebApplications()).filter(app => this.ecosystemService.isOwner(app) && app.type !== ApplicationType.EXTERNAL);
-        if (updateType === 'install') {
-            this.appsDisabled.clear();
-            for (const app of apps) {
-                if (this.isPluginInstalledInApp(plugin, app)) {
-                    this.appsDisabled.add(app.id);
-                }
-            }
-        }
-        if (updateType === 'uninstall') {
-            const installedApps = [];
-            for (const app of apps) {
-                if (this.isPluginInstalledInApp(plugin, app)) {
-                    installedApps.push(app);
-                }
-            }
-            apps = installedApps;
-        }
-        return apps;
-    }
     isPluginInstalledInApp(plugin, app) {
         const appRemotes = this.pluginsService.getMFRemotes(app) || {};
         for (const [remoteName, modules] of Object.entries(appRemotes)) {
@@ -489,20 +441,20 @@ class PluginListComponent {
     getPluginContextPathWithoutVersion(remote) {
         return remote.split('@')[0];
     }
-    async handleRemotesUpdate(application, plugin, updateType) {
+    async handleRemotesUpdate(application, plugin, updateType, pluginPackage) {
         try {
             // When remotes object is not set in the configuration object of an application.
             // Fallback to setInitialRemotes is triggered.
             const { remotes, excludedRemotes } = await (updateType === 'install'
                 ? this.pluginsService.addRemotes(application, plugin)
-                : this.pluginsService.removeRemotes(application, this.getAllPluginsToRemove(plugin)));
+                : this.pluginsService.removeRemotes(application, this.getAllPluginsToRemove(plugin, pluginPackage)));
             if (!application.config) {
                 application.config = {};
             }
             application.config.remotes = remotes;
             application.config.excludedRemotes = excludedRemotes;
             const actualRemotes = this.pluginsService.getMFRemotes(application);
-            return this.emitRemotes(actualRemotes);
+            return actualRemotes;
         }
         catch (er) {
             if (er) {
@@ -511,18 +463,14 @@ class PluginListComponent {
             throw er;
         }
     }
-    getAllPluginsToRemove(plugin) {
-        return this.package.applicationVersions.map(av => ({
+    getAllPluginsToRemove(plugin, pluginPackage) {
+        return pluginPackage.applicationVersions.map(av => ({
             id: `${plugin.contextPath}@${av.version}/${plugin.module}`,
             idLatest: `${plugin.contextPath}/${plugin.module}`,
             module: plugin.module,
             path: plugin.path
         }));
     }
-    emitRemotes(remotes) {
-        this.remotePlugins$.next(remotes);
-        return { ...this.remotePlugins$.value };
-    }
     async selectApps(initialState) {
         try {
             return await this.bsModalService.show(AppsToUpdateRemotesSelectComponent, {
@@ -538,13 +486,86 @@ class PluginListComponent {
             return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListComponent, deps: [{ token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i4$1.TranslateService }, { token: i2.GainsightService }, { token: i2.HumanizeAppNamePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PluginListComponent, selector: "c8y-plugin-list", inputs: { plugins$: "plugins$", emptyListText: "emptyListText", selectable: "selectable", hideSource: "hideSource", installable: "installable", package: "package" }, outputs: { selectedItems: "selectedItems" }, ngImport: i0, template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          [hideSource]=\"hideSource\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id !== updatingPluginId.uninstall\"\n            class=\"btn btn-danger btn-sm m-l-4\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id !== updatingPluginId.install\"\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: ["plugin", "selectable", "hideSource"], outputs: ["isItemSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PluginListItemComponent {
+    constructor(pluginService) {
+        this.pluginService = pluginService;
+        this.hideSource = false;
+        this.isItemSelected = new EventEmitter();
+        this.packageType = PackageType.UNKNOWN;
+        this.PACKAGE_TYPE = PackageType;
+    }
+    ngOnInit() {
+        this.packageType = this.pluginService.getPackageType(this.plugin.originApp);
+    }
+    onChange(event) {
+        this.plugin.selected = !this.plugin.selected;
+        this.isItemSelected.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListItemComponent, deps: [{ token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: { plugin: "plugin", selectable: "selectable", hideSource: "hideSource" }, outputs: { isItemSelected: "isItemSelected" }, ngImport: i0, template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0 text-center\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div class=\"p-relative flex-grow\">\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"tag tag--info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n\n  <span\n    class=\"tag a-s-start m-t-8 m-l-4\"\n    [ngClass]=\"{\n      'tag--default': packageType === PACKAGE_TYPE.COMMUNITY,\n      'tag--primary': packageType === PACKAGE_TYPE.OFFICIAL\n    }\"\n  >\n    {{ plugin.originApp?.label || plugin.originApp?.manifest?.label | translatePackageLabel }}\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i1.TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-plugin-list-item', template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0 text-center\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div class=\"p-relative flex-grow\">\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"tag tag--info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n\n  <span\n    class=\"tag a-s-start m-t-8 m-l-4\"\n    [ngClass]=\"{\n      'tag--default': packageType === PACKAGE_TYPE.COMMUNITY,\n      'tag--primary': packageType === PACKAGE_TYPE.OFFICIAL\n    }\"\n  >\n    {{ plugin.originApp?.label || plugin.originApp?.manifest?.label | translatePackageLabel }}\n  </span>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i2.PluginsService }], propDecorators: { plugin: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], hideSource: [{
+                type: Input
+            }], isItemSelected: [{
+                type: Output
+            }] } });
+
+class PluginListComponent {
+    constructor(pluginListService) {
+        this.pluginListService = pluginListService;
+        this.CURRENT_LOCATION = location.href;
+        this.emptyListText = '';
+        this.hideSource = false;
+        /**
+         * Shows the install button for each plugin separately. Currently used in package-details view.
+         */
+        this.installable = false;
+        this.selectedItems = new EventEmitter();
+        this.showOverview = new EventEmitter();
+        this.selectedPlugins = {};
+        this.updatingPluginId = this.pluginListService.updatingPluginId;
+    }
+    updateSelectedItems(selected, plugin) {
+        this.selectedPlugins[plugin.id] = selected ? plugin : undefined;
+        const onlyInstalledPlugins = Object.values(this.selectedPlugins).filter(Boolean);
+        this.selectedItems.emit(onlyInstalledPlugins);
+    }
+    showPluginOverview(plugin) {
+        if (plugin?.id === this.selectedPlugin?.id) {
+            return;
+        }
+        this.showOverview.emit(plugin);
+    }
+    async installPlugin(plugin) {
+        await this.pluginListService.updateAppRemotes(plugin, 'install', this.package);
+    }
+    async uninstallPlugin(plugin) {
+        await this.pluginListService.updateAppRemotes(plugin, 'uninstall', this.package);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListComponent, deps: [{ token: PluginListService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PluginListComponent, selector: "c8y-plugin-list", inputs: { plugins$: "plugins$", emptyListText: "emptyListText", selectable: "selectable", hideSource: "hideSource", installable: "installable", package: "package", selectedPlugin: "selectedPlugin" }, outputs: { selectedItems: "selectedItems", showOverview: "showOverview" }, ngImport: i0, template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li\n        [ngClass]=\"{\n          disabled: plugin.installed,\n          selected: selectedPlugin?.id === plugin?.id\n        }\"\n      >\n        <div class=\"d-flex fit-w\">\n          <ng-container *ngIf=\"plugin.readmePath\">\n            <button\n              class=\"c8y-list__item__btn d-flex fit-w gap-4\"\n              title=\"{{ 'Details' | translate }}\"\n              (click)=\"showPluginOverview(plugin)\"\n            >\n              <c8y-plugin-list-item\n                class=\"d-contents\"\n                (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n                [plugin]=\"plugin\"\n                [selectable]=\"selectable\"\n                [hideSource]=\"hideSource\"\n              ></c8y-plugin-list-item>\n              <i\n                class=\"icon-24 m-l-auto a-s-center\"\n                c8yIcon=\"forward\"\n              ></i>\n            </button>\n          </ng-container>\n          <ng-container *ngIf=\"!plugin.readmePath\">\n            <c8y-plugin-list-item\n              class=\"d-contents\"\n              (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n              [plugin]=\"plugin\"\n              [selectable]=\"selectable\"\n              [hideSource]=\"hideSource\"\n            ></c8y-plugin-list-item>\n          </ng-container>\n        </div>\n        <div class=\"p-l-40 m-t-4 d-flex flex-wrap gap-8\">\n          <button\n            class=\"btn btn-danger btn-sm\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id === updatingPluginId.uninstall\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            class=\"btn btn-default btn-sm m-0\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id === updatingPluginId.install\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'plugin'\"\n    [title]=\"emptyListText | translate\"\n    [horizontal]=\"true\"\n    *ngIf=\"emptyListText\"\n  ></c8y-ui-empty-state>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: ["plugin", "selectable", "hideSource"], outputs: ["isItemSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-plugin-list', template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          [hideSource]=\"hideSource\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id !== updatingPluginId.uninstall\"\n            class=\"btn btn-danger btn-sm m-l-4\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id !== updatingPluginId.install\"\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i4$1.TranslateService }, { type: i2.GainsightService }, { type: i2.HumanizeAppNamePipe }], propDecorators: { plugins$: [{
+            args: [{ selector: 'c8y-plugin-list', template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li\n        [ngClass]=\"{\n          disabled: plugin.installed,\n          selected: selectedPlugin?.id === plugin?.id\n        }\"\n      >\n        <div class=\"d-flex fit-w\">\n          <ng-container *ngIf=\"plugin.readmePath\">\n            <button\n              class=\"c8y-list__item__btn d-flex fit-w gap-4\"\n              title=\"{{ 'Details' | translate }}\"\n              (click)=\"showPluginOverview(plugin)\"\n            >\n              <c8y-plugin-list-item\n                class=\"d-contents\"\n                (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n                [plugin]=\"plugin\"\n                [selectable]=\"selectable\"\n                [hideSource]=\"hideSource\"\n              ></c8y-plugin-list-item>\n              <i\n                class=\"icon-24 m-l-auto a-s-center\"\n                c8yIcon=\"forward\"\n              ></i>\n            </button>\n          </ng-container>\n          <ng-container *ngIf=\"!plugin.readmePath\">\n            <c8y-plugin-list-item\n              class=\"d-contents\"\n              (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n              [plugin]=\"plugin\"\n              [selectable]=\"selectable\"\n              [hideSource]=\"hideSource\"\n            ></c8y-plugin-list-item>\n          </ng-container>\n        </div>\n        <div class=\"p-l-40 m-t-4 d-flex flex-wrap gap-8\">\n          <button\n            class=\"btn btn-danger btn-sm\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id === updatingPluginId.uninstall\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            class=\"btn btn-default btn-sm m-0\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id === updatingPluginId.install\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'plugin'\"\n    [title]=\"emptyListText | translate\"\n    [horizontal]=\"true\"\n    *ngIf=\"emptyListText\"\n  ></c8y-ui-empty-state>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: PluginListService }], propDecorators: { plugins$: [{
                 type: Input
             }], emptyListText: [{
                 type: Input
@@ -556,8 +577,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], package: [{
                 type: Input
+            }], selectedPlugin: [{
+                type: Input
             }], selectedItems: [{
                 type: Output
+            }], showOverview: [{
+                type: Output
             }] } });
 
 class UpdateApplicationModalComponent {
@@ -681,7 +706,7 @@ class UpdateApplicationModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdateApplicationModalComponent, deps: [{ token: i4.InventoryService }, { token: i1.EcosystemService }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdateApplicationModalComponent, selector: "c8y-update-application-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Update application' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n  #modal\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-installing-updates\"></span>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"\n      (orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0;\n      else updateProgress\n    \"\n  >\n    <p\n      class=\"text-center text-break-word p-24 text-14\"\n      translate\n    >\n      Updating this blueprint will change the default plugins. Review the plugin changes before\n      proceeding.\n    </p>\n    <c8y-list-group *ngIf=\"(orphanedPlugins$ | async).length > 0\">\n      <c8y-li [collapsed]=\"true\">\n        <c8y-li-icon>\n          <span class=\"badge badge-danger\">{{ (orphanedPlugins$ | async).length }}</span>\n        </c8y-li-icon>\n        <c8y-li-body>\n          <div translate>Orphaned plugins</div>\n        </c8y-li-body>\n        <c8y-li-footer translate>\n          Some plugins are not contained in the new version of this blueprint and will therefore get\n          removed.\n        </c8y-li-footer>\n        <c8y-li-collapse>\n          <c8y-plugin-list\n            class=\"m-t-16\"\n            [emptyListText]=\"'No plugins available' | translate\"\n            [plugins$]=\"orphanedPlugins$\"\n            [selectable]=\"false\"\n            [hideSource]=\"true\"\n          ></c8y-plugin-list>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n\n    <c8y-list-group *ngIf=\"(newPlugins$ | async).length > 0\">\n      <c8y-li [collapsed]=\"false\">\n        <c8y-li-icon>\n          <span class=\"badge badge-success\">{{ (newPlugins$ | async).length }}</span>\n        </c8y-li-icon>\n        <c8y-li-body>\n          <div translate>New plugins added</div>\n        </c8y-li-body>\n        <c8y-li-footer translate>\n          This blueprint will add new plugins. Please choose which you want to install.\n        </c8y-li-footer>\n        <c8y-li-collapse>\n          <c8y-plugin-list\n            class=\"m-t-16\"\n            [emptyListText]=\"'No plugins available' | translate\"\n            [plugins$]=\"newPlugins$\"\n            [selectable]=\"true\"\n            [hideSource]=\"false\"\n          ></c8y-plugin-list>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n  </ng-container>\n\n  <ng-container c8y-modal-footer-custom>\n    <div\n      class=\"modal-footer\"\n      *ngIf=\"\n        (orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0;\n        else updateProgressButtons\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Close' | translate }}\"\n        (click)=\"close()\"\n        [disabled]=\"isUpdateOngoing\"\n      >\n        {{ 'Close' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        title=\"{{ 'Continue' | translate }}\"\n        (click)=\"updateApplication()\"\n        *ngIf=\"(orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0\"\n        [disabled]=\"isUpdateOngoing\"\n      >\n        {{ 'Continue' | translate }}\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-template #updateProgressButtons>\n    <ng-container c8y-modal-footer-custom>\n      <div class=\"modal-footer\">\n        <button\n          class=\"btn btn-default\"\n          title=\"{{ 'Close' | translate }}\"\n          (click)=\"done()\"\n          [disabled]=\"isUpdateOngoing\"\n        >\n          {{ 'Close' | translate }}\n        </button>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #updateProgress>\n    <c8y-loading\n      class=\"text-center d-block p-t-56 p-b-56 m-t-4 m-b-4\"\n      style=\"min-height: 180px\"\n      layout=\"application\"\n      *ngIf=\"isUpdateOngoing\"\n      [message]=\"'Updating\u2026' | translate\"\n    ></c8y-loading>\n\n    <c8y-operation-result\n      type=\"success\"\n      *ngIf=\"!isUpdateOngoing && !updateFailure\"\n      text=\"{{ 'Update completed' | translate }}\"\n      [size]=\"120\"\n      [vertical]=\"true\"\n    ></c8y-operation-result>\n    <c8y-operation-result\n      type=\"error\"\n      *ngIf=\"!isUpdateOngoing && updateFailure\"\n      text=\"{{ 'Failed to update application.' | translate }}\"\n      [size]=\"120\"\n      [vertical]=\"true\"\n    ></c8y-operation-result>\n  </ng-template>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemFooterComponent, selector: "c8y-list-item-footer, c8y-li-footer", inputs: ["footer"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdateApplicationModalComponent, selector: "c8y-update-application-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Update application' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n  #modal\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-installing-updates\"></span>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"\n      (orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0;\n      else updateProgress\n    \"\n  >\n    <p\n      class=\"text-center text-break-word p-24 text-14\"\n      translate\n    >\n      Updating this blueprint will change the default plugins. Review the plugin changes before\n      proceeding.\n    </p>\n    <c8y-list-group *ngIf=\"(orphanedPlugins$ | async).length > 0\">\n      <c8y-li [collapsed]=\"true\">\n        <c8y-li-icon>\n          <span class=\"badge badge-danger\">{{ (orphanedPlugins$ | async).length }}</span>\n        </c8y-li-icon>\n        <c8y-li-body>\n          <div translate>Orphaned plugins</div>\n        </c8y-li-body>\n        <c8y-li-footer translate>\n          Some plugins are not contained in the new version of this blueprint and will therefore get\n          removed.\n        </c8y-li-footer>\n        <c8y-li-collapse>\n          <c8y-plugin-list\n            class=\"m-t-16\"\n            [emptyListText]=\"'No plugins available' | translate\"\n            [plugins$]=\"orphanedPlugins$\"\n            [selectable]=\"false\"\n            [hideSource]=\"true\"\n          ></c8y-plugin-list>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n\n    <c8y-list-group *ngIf=\"(newPlugins$ | async).length > 0\">\n      <c8y-li [collapsed]=\"false\">\n        <c8y-li-icon>\n          <span class=\"badge badge-success\">{{ (newPlugins$ | async).length }}</span>\n        </c8y-li-icon>\n        <c8y-li-body>\n          <div translate>New plugins added</div>\n        </c8y-li-body>\n        <c8y-li-footer translate>\n          This blueprint will add new plugins. Please choose which you want to install.\n        </c8y-li-footer>\n        <c8y-li-collapse>\n          <c8y-plugin-list\n            class=\"m-t-16\"\n            [emptyListText]=\"'No plugins available' | translate\"\n            [plugins$]=\"newPlugins$\"\n            [selectable]=\"true\"\n            [hideSource]=\"false\"\n          ></c8y-plugin-list>\n        </c8y-li-collapse>\n      </c8y-li>\n    </c8y-list-group>\n  </ng-container>\n\n  <ng-container c8y-modal-footer-custom>\n    <div\n      class=\"modal-footer\"\n      *ngIf=\"\n        (orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0;\n        else updateProgressButtons\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Close' | translate }}\"\n        (click)=\"close()\"\n        [disabled]=\"isUpdateOngoing\"\n      >\n        {{ 'Close' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        title=\"{{ 'Continue' | translate }}\"\n        (click)=\"updateApplication()\"\n        *ngIf=\"(orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0\"\n        [disabled]=\"isUpdateOngoing\"\n      >\n        {{ 'Continue' | translate }}\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-template #updateProgressButtons>\n    <ng-container c8y-modal-footer-custom>\n      <div class=\"modal-footer\">\n        <button\n          class=\"btn btn-default\"\n          title=\"{{ 'Close' | translate }}\"\n          (click)=\"done()\"\n          [disabled]=\"isUpdateOngoing\"\n        >\n          {{ 'Close' | translate }}\n        </button>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #updateProgress>\n    <c8y-loading\n      class=\"text-center d-block p-t-56 p-b-56 m-t-4 m-b-4\"\n      style=\"min-height: 180px\"\n      layout=\"application\"\n      *ngIf=\"isUpdateOngoing\"\n      [message]=\"'Updating\u2026' | translate\"\n    ></c8y-loading>\n\n    <c8y-operation-result\n      type=\"success\"\n      *ngIf=\"!isUpdateOngoing && !updateFailure\"\n      text=\"{{ 'Update completed' | translate }}\"\n      [size]=\"120\"\n      [vertical]=\"true\"\n    ></c8y-operation-result>\n    <c8y-operation-result\n      type=\"error\"\n      *ngIf=\"!isUpdateOngoing && updateFailure\"\n      text=\"{{ 'Failed to update application.' | translate }}\"\n      [size]=\"120\"\n      [vertical]=\"true\"\n    ></c8y-operation-result>\n  </ng-template>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemFooterComponent, selector: "c8y-list-item-footer, c8y-li-footer", inputs: ["footer"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package", "selectedPlugin"], outputs: ["selectedItems", "showOverview"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdateApplicationModalComponent, decorators: [{
             type: Component,
@@ -975,13 +1000,13 @@ class ApplicationPropertiesComponent {
             this.alertService.warning(gettext('Unable to resolve versions of source package.'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPropertiesComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$2.Router }, { token: i2$1.FormBuilder }, { token: i4.ApplicationService }, { token: i2.AlertService }, { token: i4.InventoryService }, { token: i2.Permissions }, { token: i2.ModalService }, { token: i4$1.TranslateService }, { token: i1$1.BsModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPropertiesComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$2.Router }, { token: i2$1.FormBuilder }, { token: i4.ApplicationService }, { token: i2.AlertService }, { token: i4.InventoryService }, { token: i2.Permissions }, { token: i2.ModalService }, { token: i6.TranslateService }, { token: i1$1.BsModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApplicationPropertiesComponent, selector: "c8y-application-properties", ngImport: i0, template: "<c8y-title>{{ application | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!isMicroservice\">\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumbConfig?.icon\"\n    *ngIf=\"isFeature\"\n    [label]=\"breadcrumbConfig?.label\"\n    [path]=\"breadcrumbConfig?.path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"application | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Properties' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-breadcrumb *ngIf=\"isMicroservice\">\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumbConfig?.icon\"\n    [label]=\"breadcrumbConfig?.label\"\n    [path]=\"breadcrumbConfig?.path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"application | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Properties' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"row\">\n  <div [ngClass]=\"{ 'col-md-8': !isActivityLogSupported, 'col-md-12': isActivityLogSupported }\">\n    <div\n      class=\"card content-fullpage\"\n      *ngIf=\"application\"\n      [ngClass]=\"{ 'd-grid grid__col--7-5--md': isActivityLogSupported }\"\n    >\n      <form\n        class=\"d-flex d-col content-fullpage\"\n        (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n        [formGroup]=\"formGroup\"\n        novalidate\n      >\n        <div\n          class=\"d-contents\"\n          *ngIf=\"!isLoading\"\n        >\n          <div class=\"card-block separator-bottom large-padding flex-no-shrink\">\n            <div class=\"d-flex-md a-i-start text-center text-left-md\">\n              <c8y-app-icon\n                class=\"icon-48\"\n                *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n                [app]=\"application\"\n                [contextPath]=\"application.contextPath\"\n                [name]=\"application.name\"\n              ></c8y-app-icon>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"big-parcel\"\n                *ngIf=\"isPackage\"\n              ></i>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"tab\"\n                *ngIf=\"isFeature\"\n              ></i>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"microchip\"\n                *ngIf=\"isMicroservice\"\n              ></i>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"globe1\"\n                *ngIf=\"isExternal\"\n              ></i>\n\n              <div class=\"p-t-md-16 p-l-md-16 p-r-md-32 flex-grow\">\n                <p class=\"h4 text-medium m-b-8\">{{ application | humanizeAppName | async }}</p>\n                <p *ngIf=\"!isOwner\">\n                  <em class=\"text-muted\">\n                    {{\n                      formGroup?.controls?.description?.value || (noDescriptionLabel | translate)\n                    }}\n                  </em>\n                </p>\n                <div\n                  class=\"form-group m-b-0\"\n                  *ngIf=\"isOwner\"\n                >\n                  <label\n                    class=\"editable\"\n                    [ngClass]=\"{ updated: formGroup?.controls?.description?.dirty }\"\n                  >\n                    <textarea\n                      class=\"form-control no-resize\"\n                      placeholder=\"{{ noDescriptionLabel | translate }}\"\n                      name=\"description\"\n                      c8y-textarea-autoresize\n                      formControlName=\"description\"\n                    ></textarea>\n                  </label>\n                </div>\n              </div>\n              <div class=\"text-right-md m-t-4\">\n                <span\n                  class=\"label\"\n                  [ngClass]=\"appState?.class\"\n                >\n                  {{ appState?.label | translate }}\n                </span>\n                <div\n                  class=\"fit-w m-t-2\"\n                  *ngIf=\"application.manifest?.version\"\n                  data-cy=\"application-detail--version\"\n                >\n                  <label\n                    class=\"text-label-small\"\n                    translate\n                  >\n                    Version:\n                  </label>\n                  <small class=\"p-l-4 text-bold\">{{ application.manifest?.version }}</small>\n                </div>\n                <div\n                  class=\"fit-w m-t-2\"\n                  *ngIf=\"!isUnpacked\"\n                >\n                  <label\n                    class=\"text-label-small\"\n                    translate\n                  >\n                    Creation time:\n                  </label>\n                  <small class=\"p-l-4 text-bold\">\n                    {{ (binaryMo?.creationTime | c8yDate) || '---' }}\n                  </small>\n                </div>\n                <div class=\"m-t-8\">\n                  <button\n                    class=\"btn btn-default btn-sm\"\n                    [attr.aria-label]=\"\n                      'There\\'s a newer version available, click to update' | translate\n                    \"\n                    tooltip=\"{{\n                      'There\\'s a newer version available, click to update' | translate\n                    }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    *ngIf=\"isUpdateAvailable\"\n                    (click)=\"updateToLatestVersion()\"\n                    [delay]=\"300\"\n                  >\n                    <i [c8yIcon]=\"'installing-updates'\"></i>\n                    {{ 'Update available' | translate }}\n                  </button>\n                  <button\n                    class=\"btn btn-default btn-sm\"\n                    title=\"{{ 'Open' | translate }}\"\n                    type=\"button\"\n                    (click)=\"openApp(application)\"\n                    [disabled]=\"disableOpenInBrowser\"\n                    *ngIf=\"canOpenInBrowser\"\n                  >\n                    <i [c8yIcon]=\"'external-link'\"></i>\n                    {{ 'Open' | translate }}\n                  </button>\n                  <div *ngIf=\"canOpenInBrowser && disableOpenInBrowser\">\n                    <small\n                      class=\"text-muted\"\n                      translate\n                    >\n                      The application is overwritten by a custom application sharing the same path\n                    </small>\n                  </div>\n                  <span *ngIf=\"isCustomMicroservice\">\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      title=\"{{ 'Subscribe' | translate }}\"\n                      type=\"button\"\n                      (click)=\"subscribe()\"\n                      *ngIf=\"!isSubscribed\"\n                    >\n                      <i [c8yIcon]=\"'check-circle-o'\"></i>\n                      {{ 'Subscribe' | translate }}\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      title=\"{{ 'Unsubscribe' | translate }}\"\n                      type=\"button\"\n                      (click)=\"unsubscribe()\"\n                      *ngIf=\"isSubscribed\"\n                    >\n                      <i [c8yIcon]=\"'minus-circle'\"></i>\n                      {{ 'Unsubscribe' | translate }}\n                    </button>\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"inner-scroll bg-level-0 flex-grow\">\n            <div class=\"card-block large-padding\">\n              <div\n                class=\"row p-16\"\n                *ngIf=\"isPackage\"\n              >\n                <c8y-properties-list\n                  icon=\"info\"\n                  [title]=\"'Package details' | translate\"\n                  [data]=\"application.manifest\"\n                  [properties]=\"packageProperties\"\n                  [emptyLabel]=\"'---'\"\n                ></c8y-properties-list>\n              </div>\n              <div\n                class=\"row p-16\"\n                *ngIf=\"sourcePackage\"\n              >\n                <c8y-properties-list\n                  icon=\"info\"\n                  [title]=\"'Source package information' | translate\"\n                  [data]=\"sourcePackage.manifest\"\n                  [properties]=\"packageProperties\"\n                  [emptyLabel]=\"'---'\"\n                ></c8y-properties-list>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-sm-5\">\n                  <c8y-form-group>\n                    <label for=\"appId\">ID</label>\n                    <input\n                      class=\"form-control\"\n                      id=\"appId\"\n                      name=\"id\"\n                      type=\"text\"\n                      autocomplete=\"off\"\n                      [readonly]=\"true\"\n                      formControlName=\"id\"\n                    />\n                  </c8y-form-group>\n                </div>\n                <div class=\"col-sm-7\">\n                  <c8y-form-group>\n                    <label>{{ 'Name' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g. My application' | translate }}\"\n                      name=\"name\"\n                      type=\"text\"\n                      required\n                      [readonly]=\"!isOwner\"\n                      formControlName=\"name\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div class=\"row\">\n                <div class=\"col-sm-5\">\n                  <c8y-form-group>\n                    <label>{{ 'Application key' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n                      name=\"key\"\n                      type=\"text\"\n                      required\n                      [readonly]=\"application.id || !isOwner\"\n                      formControlName=\"key\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-7\" data-cy=\"application-detail--type\">\n                  <c8y-form-group>\n                    <label>{{ 'Type' | translate }}</label>\n                    <div>\n                      <div *ngIf=\"application.id\">\n                        <p class=\"form-control-static\">\n                          <i [c8yIcon]=\"iconMap[application.type]\"></i>\n                          <span>\n                            {{ application.type | translate }}\n                          </span>\n                        </p>\n                      </div>\n                    </div>\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div [ngSwitch]=\"application.type\">\n                <div *ngSwitchCase=\"'HOSTED'\">\n                  <c8y-form-group>\n                    <label>{{ 'Path' | translate }}</label>\n                    <div class=\"input-group\">\n                      <span class=\"input-group-addon\">/apps/</span>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        name=\"contextPath\"\n                        type=\"text\"\n                        required\n                        [readOnly]=\"application.id || !isOwner\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                </div>\n\n                <div *ngSwitchCase=\"'MICROSERVICE'\">\n                  <c8y-form-group>\n                    <label>{{ 'Path' | translate }}</label>\n                    <div class=\"input-group\">\n                      <span class=\"input-group-addon\">/service/</span>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. my-microservice`used in URL`' | translate }}\"\n                        name=\"contextPath\"\n                        type=\"text\"\n                        required\n                        [readOnly]=\"application.id || !isOwner\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                  <div class=\"row\">\n                    <div\n                      class=\"col-sm-4 m-b-16 flex-auto\"\n                      *ngIf=\"application.manifest.version\"\n                      data-cy=\"application-detail--version\"\n                    >\n                      <label>{{ 'Version' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        {{ application.manifest.version }}\n                      </p>\n                    </div>\n                    <div\n                      class=\"col-sm-4 m-b-16 flex-auto\"\n                      *ngIf=\"application.manifest.isolation\"\n                      data-cy=\"application-detail--isolation\"\n                    >\n                      <label>{{ 'Isolation' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span *ngIf=\"singleTenant\">\n                          <i\n                            class=\"c8y-icon-duocolor h4\"\n                            [c8yIcon]=\"'c8y-enterprise'\"\n                          ></i>\n                          {{ 'Single tenant' | translate }}\n                        </span>\n                        <span *ngIf=\"!singleTenant\">\n                          <i\n                            class=\"c8y-icon-duocolor icon-32\"\n                            [c8yIcon]=\"'c8y-sub-tenants'\"\n                          ></i>\n                          {{ 'Multi tenant' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                    <div\n                      class=\"col-sm-4 m-b-16 flex-auto\"\n                      *ngIf=\"application.manifest.isolation\"\n                      data-cy=\"application-detail--billing-mode\"\n                    >\n                      <label>{{ 'Billing mode' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                          *ngIf=\"subscription\"\n                        >\n                          {{ 'Subscription' | translate }}\n                        </span>\n                        <span\n                          [tooltip]=\"'Resources usage assigned to: Subscriber | translate'\"\n                          *ngIf=\"!subscription && singleTenant\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                        <span\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                          *ngIf=\"!subscription && !singleTenant\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <div\n                    class=\"legend form-block m-t-40\"\n                    *ngIf=\"application.manifest.provider\"\n                  >\n                    {{ 'Provider' | translate }}\n                  </div>\n                  <div\n                    class=\"list-inline\"\n                    *ngIf=\"application.manifest.provider\"\n                    data-cy=\"application-detail--provider\"\n                  >\n                    <div *ngIf=\"application.manifest.provider.name\">\n                      <div class=\"col-sm-4 m-b-16\">\n                        <label>{{ 'Name' | translate }}</label>\n                        <p class=\"form-control-static\">\n                          {{ application.manifest.provider.name }}\n                        </p>\n                      </div>\n                    </div>\n                    <div *ngIf=\"application.manifest.provider.domain\">\n                      <div class=\"col-sm-4 m-b-16\">\n                        <label>{{ 'Domain' | translate }}</label>\n                        <p class=\"form-control-static\">\n                          {{ application.manifest.provider.domain }}\n                        </p>\n                      </div>\n                    </div>\n                    <div *ngIf=\"application.manifest.provider.support\">\n                      <div class=\"col-sm-4 m-b-16\">\n                        <label>{{ 'Support' | translate }}</label>\n                        <p class=\"form-control-static\">\n                          {{ application.manifest.provider.support }}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div *ngSwitchCase=\"'EXTERNAL'\">\n                  <c8y-form-group>\n                    <label>{{ 'External URL' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} http://www.example.com/\"\n                      name=\"externalUrl\"\n                      type=\"url\"\n                      required\n                      [pattern]=\"'^(?!javascript:).+'\"\n                      [readOnly]=\"!isOwner\"\n                      formControlName=\"externalUrl\"\n                    />\n                    <c8y-messages>\n                      <c8y-message\n                        [name]=\"'pattern'\"\n                        [text]=\"'Valid URL required.' | translate\"\n                      ></c8y-message>\n                    </c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div *ngIf=\"isOwner && !isCustomMicroservice\">\n                  <label>{{ 'Select icon' | translate }}</label>\n                  <c8y-icon-selector-wrapper\n                    name=\"icon\"\n                    formControlName=\"icon\"\n                  ></c8y-icon-selector-wrapper>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"isCustomMicroservice\">\n            <div\n              class=\"d-contents\"\n              *ngIf=\"!isLoading\"\n            >\n              <c8y-upload-archive\n                [(application)]=\"application\"\n                (refresh)=\"onNewArchive()\"\n              ></c8y-upload-archive>\n            </div>\n          </ng-container>\n          <div\n            class=\"card-footer separator\"\n            *ngIf=\"application && !!isOwner && hasAdminPermissions\"\n          >\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              title=\"{{ 'Delete' | translate }}\"\n              type=\"button\"\n              (click)=\"delete()\"\n              *ngIf=\"canDelete\"\n            >\n              {{ 'Delete' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-form\"\n              title=\"{{ 'Save' | translate }}\"\n              type=\"submit\"\n              [disabled]=\"!application.type || formGroup.invalid || formGroup.pristine\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n\n      <div\n        class=\"content-fullpage d-flex d-col bg-level-1\"\n        *ngIf=\"isActivityLogSupported\"\n      >\n        <div class=\"card-header separator\">\n          <div\n            class=\"card-title\"\n            translate\n          >\n            Activity log\n          </div>\n          <div class=\"m-l-auto\">\n            <button\n              class=\"btn btn-link btn-sm\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\n              (click)=\"load()\"\n            >\n              <i\n                c8yIcon=\"refresh\"\n                [ngClass]=\"{ 'icon-spin': isLoading }\"\n              ></i>\n              {{ 'Reload' | translate }}\n            </button>\n          </div>\n        </div>\n        <div\n          class=\"p-16 text-center\"\n          *ngIf=\"isLoading\"\n        >\n          <c8y-loading></c8y-loading>\n        </div>\n        <c8y-activity-log\n          class=\"d-contents\"\n          *ngIf=\"!isLoading\"\n          [hasAdminPermissions]=\"hasAdminPermissions\"\n          [application]=\"application\"\n        ></c8y-activity-log>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i2.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i1.UploadArchiveComponent, selector: "c8y-upload-archive", inputs: ["application", "uploadNewVersion", "preUploadCallback"], outputs: ["applicationChange", "refresh"] }, { kind: "component", type: i10.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: ActivityLogComponent, selector: "c8y-activity-log", inputs: ["application", "hasAdminPermissions"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPropertiesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-application-properties', template: "<c8y-title>{{ application | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!isMicroservice\">\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumbConfig?.icon\"\n    *ngIf=\"isFeature\"\n    [label]=\"breadcrumbConfig?.label\"\n    [path]=\"breadcrumbConfig?.path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"application | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Properties' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-breadcrumb *ngIf=\"isMicroservice\">\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumbConfig?.icon\"\n    [label]=\"breadcrumbConfig?.label\"\n    [path]=\"breadcrumbConfig?.path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"application | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Properties' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"row\">\n  <div [ngClass]=\"{ 'col-md-8': !isActivityLogSupported, 'col-md-12': isActivityLogSupported }\">\n    <div\n      class=\"card content-fullpage\"\n      *ngIf=\"application\"\n      [ngClass]=\"{ 'd-grid grid__col--7-5--md': isActivityLogSupported }\"\n    >\n      <form\n        class=\"d-flex d-col content-fullpage\"\n        (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n        [formGroup]=\"formGroup\"\n        novalidate\n      >\n        <div\n          class=\"d-contents\"\n          *ngIf=\"!isLoading\"\n        >\n          <div class=\"card-block separator-bottom large-padding flex-no-shrink\">\n            <div class=\"d-flex-md a-i-start text-center text-left-md\">\n              <c8y-app-icon\n                class=\"icon-48\"\n                *ngIf=\"!isPackage && !isFeature && !isMicroservice && !isExternal\"\n                [app]=\"application\"\n                [contextPath]=\"application.contextPath\"\n                [name]=\"application.name\"\n              ></c8y-app-icon>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"big-parcel\"\n                *ngIf=\"isPackage\"\n              ></i>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"tab\"\n                *ngIf=\"isFeature\"\n              ></i>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"microchip\"\n                *ngIf=\"isMicroservice\"\n              ></i>\n              <i\n                class=\"icon-48\"\n                c8yIcon=\"globe1\"\n                *ngIf=\"isExternal\"\n              ></i>\n\n              <div class=\"p-t-md-16 p-l-md-16 p-r-md-32 flex-grow\">\n                <p class=\"h4 text-medium m-b-8\">{{ application | humanizeAppName | async }}</p>\n                <p *ngIf=\"!isOwner\">\n                  <em class=\"text-muted\">\n                    {{\n                      formGroup?.controls?.description?.value || (noDescriptionLabel | translate)\n                    }}\n                  </em>\n                </p>\n                <div\n                  class=\"form-group m-b-0\"\n                  *ngIf=\"isOwner\"\n                >\n                  <label\n                    class=\"editable\"\n                    [ngClass]=\"{ updated: formGroup?.controls?.description?.dirty }\"\n                  >\n                    <textarea\n                      class=\"form-control no-resize\"\n                      placeholder=\"{{ noDescriptionLabel | translate }}\"\n                      name=\"description\"\n                      c8y-textarea-autoresize\n                      formControlName=\"description\"\n                    ></textarea>\n                  </label>\n                </div>\n              </div>\n              <div class=\"text-right-md m-t-4\">\n                <span\n                  class=\"label\"\n                  [ngClass]=\"appState?.class\"\n                >\n                  {{ appState?.label | translate }}\n                </span>\n                <div\n                  class=\"fit-w m-t-2\"\n                  *ngIf=\"application.manifest?.version\"\n                  data-cy=\"application-detail--version\"\n                >\n                  <label\n                    class=\"text-label-small\"\n                    translate\n                  >\n                    Version:\n                  </label>\n                  <small class=\"p-l-4 text-bold\">{{ application.manifest?.version }}</small>\n                </div>\n                <div\n                  class=\"fit-w m-t-2\"\n                  *ngIf=\"!isUnpacked\"\n                >\n                  <label\n                    class=\"text-label-small\"\n                    translate\n                  >\n                    Creation time:\n                  </label>\n                  <small class=\"p-l-4 text-bold\">\n                    {{ (binaryMo?.creationTime | c8yDate) || '---' }}\n                  </small>\n                </div>\n                <div class=\"m-t-8\">\n                  <button\n                    class=\"btn btn-default btn-sm\"\n                    [attr.aria-label]=\"\n                      'There\\'s a newer version available, click to update' | translate\n                    \"\n                    tooltip=\"{{\n                      'There\\'s a newer version available, click to update' | translate\n                    }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    *ngIf=\"isUpdateAvailable\"\n                    (click)=\"updateToLatestVersion()\"\n                    [delay]=\"300\"\n                  >\n                    <i [c8yIcon]=\"'installing-updates'\"></i>\n                    {{ 'Update available' | translate }}\n                  </button>\n                  <button\n                    class=\"btn btn-default btn-sm\"\n                    title=\"{{ 'Open' | translate }}\"\n                    type=\"button\"\n                    (click)=\"openApp(application)\"\n                    [disabled]=\"disableOpenInBrowser\"\n                    *ngIf=\"canOpenInBrowser\"\n                  >\n                    <i [c8yIcon]=\"'external-link'\"></i>\n                    {{ 'Open' | translate }}\n                  </button>\n                  <div *ngIf=\"canOpenInBrowser && disableOpenInBrowser\">\n                    <small\n                      class=\"text-muted\"\n                      translate\n                    >\n                      The application is overwritten by a custom application sharing the same path\n                    </small>\n                  </div>\n                  <span *ngIf=\"isCustomMicroservice\">\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      title=\"{{ 'Subscribe' | translate }}\"\n                      type=\"button\"\n                      (click)=\"subscribe()\"\n                      *ngIf=\"!isSubscribed\"\n                    >\n                      <i [c8yIcon]=\"'check-circle-o'\"></i>\n                      {{ 'Subscribe' | translate }}\n                    </button>\n                    <button\n                      class=\"btn btn-default btn-sm\"\n                      title=\"{{ 'Unsubscribe' | translate }}\"\n                      type=\"button\"\n                      (click)=\"unsubscribe()\"\n                      *ngIf=\"isSubscribed\"\n                    >\n                      <i [c8yIcon]=\"'minus-circle'\"></i>\n                      {{ 'Unsubscribe' | translate }}\n                    </button>\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"inner-scroll bg-level-0 flex-grow\">\n            <div class=\"card-block large-padding\">\n              <div\n                class=\"row p-16\"\n                *ngIf=\"isPackage\"\n              >\n                <c8y-properties-list\n                  icon=\"info\"\n                  [title]=\"'Package details' | translate\"\n                  [data]=\"application.manifest\"\n                  [properties]=\"packageProperties\"\n                  [emptyLabel]=\"'---'\"\n                ></c8y-properties-list>\n              </div>\n              <div\n                class=\"row p-16\"\n                *ngIf=\"sourcePackage\"\n              >\n                <c8y-properties-list\n                  icon=\"info\"\n                  [title]=\"'Source package information' | translate\"\n                  [data]=\"sourcePackage.manifest\"\n                  [properties]=\"packageProperties\"\n                  [emptyLabel]=\"'---'\"\n                ></c8y-properties-list>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-sm-5\">\n                  <c8y-form-group>\n                    <label for=\"appId\">ID</label>\n                    <input\n                      class=\"form-control\"\n                      id=\"appId\"\n                      name=\"id\"\n                      type=\"text\"\n                      autocomplete=\"off\"\n                      [readonly]=\"true\"\n                      formControlName=\"id\"\n                    />\n                  </c8y-form-group>\n                </div>\n                <div class=\"col-sm-7\">\n                  <c8y-form-group>\n                    <label>{{ 'Name' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g. My application' | translate }}\"\n                      name=\"name\"\n                      type=\"text\"\n                      required\n                      [readonly]=\"!isOwner\"\n                      formControlName=\"name\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div class=\"row\">\n                <div class=\"col-sm-5\">\n                  <c8y-form-group>\n                    <label>{{ 'Application key' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g. my-application-key' | translate }}\"\n                      name=\"key\"\n                      type=\"text\"\n                      required\n                      [readonly]=\"application.id || !isOwner\"\n                      formControlName=\"key\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-7\" data-cy=\"application-detail--type\">\n                  <c8y-form-group>\n                    <label>{{ 'Type' | translate }}</label>\n                    <div>\n                      <div *ngIf=\"application.id\">\n                        <p class=\"form-control-static\">\n                          <i [c8yIcon]=\"iconMap[application.type]\"></i>\n                          <span>\n                            {{ application.type | translate }}\n                          </span>\n                        </p>\n                      </div>\n                    </div>\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div [ngSwitch]=\"application.type\">\n                <div *ngSwitchCase=\"'HOSTED'\">\n                  <c8y-form-group>\n                    <label>{{ 'Path' | translate }}</label>\n                    <div class=\"input-group\">\n                      <span class=\"input-group-addon\">/apps/</span>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. my-application`used in URL`' | translate }}\"\n                        name=\"contextPath\"\n                        type=\"text\"\n                        required\n                        [readOnly]=\"application.id || !isOwner\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                </div>\n\n                <div *ngSwitchCase=\"'MICROSERVICE'\">\n                  <c8y-form-group>\n                    <label>{{ 'Path' | translate }}</label>\n                    <div class=\"input-group\">\n                      <span class=\"input-group-addon\">/service/</span>\n                      <input\n                        class=\"form-control\"\n                        placeholder=\"{{ 'e.g. my-microservice`used in URL`' | translate }}\"\n                        name=\"contextPath\"\n                        type=\"text\"\n                        required\n                        [readOnly]=\"application.id || !isOwner\"\n                        formControlName=\"contextPath\"\n                      />\n                    </div>\n                  </c8y-form-group>\n                  <div class=\"row\">\n                    <div\n                      class=\"col-sm-4 m-b-16 flex-auto\"\n                      *ngIf=\"application.manifest.version\"\n                      data-cy=\"application-detail--version\"\n                    >\n                      <label>{{ 'Version' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        {{ application.manifest.version }}\n                      </p>\n                    </div>\n                    <div\n                      class=\"col-sm-4 m-b-16 flex-auto\"\n                      *ngIf=\"application.manifest.isolation\"\n                      data-cy=\"application-detail--isolation\"\n                    >\n                      <label>{{ 'Isolation' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span *ngIf=\"singleTenant\">\n                          <i\n                            class=\"c8y-icon-duocolor h4\"\n                            [c8yIcon]=\"'c8y-enterprise'\"\n                          ></i>\n                          {{ 'Single tenant' | translate }}\n                        </span>\n                        <span *ngIf=\"!singleTenant\">\n                          <i\n                            class=\"c8y-icon-duocolor icon-32\"\n                            [c8yIcon]=\"'c8y-sub-tenants'\"\n                          ></i>\n                          {{ 'Multi tenant' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                    <div\n                      class=\"col-sm-4 m-b-16 flex-auto\"\n                      *ngIf=\"application.manifest.isolation\"\n                      data-cy=\"application-detail--billing-mode\"\n                    >\n                      <label>{{ 'Billing mode' | translate }}</label>\n                      <p class=\"form-control-static\">\n                        <span\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                          *ngIf=\"subscription\"\n                        >\n                          {{ 'Subscription' | translate }}\n                        </span>\n                        <span\n                          [tooltip]=\"'Resources usage assigned to: Subscriber | translate'\"\n                          *ngIf=\"!subscription && singleTenant\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                        <span\n                          [tooltip]=\"'Resources usage assigned to: Owner' | translate\"\n                          *ngIf=\"!subscription && !singleTenant\"\n                        >\n                          {{ 'Resources' | translate }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <div\n                    class=\"legend form-block m-t-40\"\n                    *ngIf=\"application.manifest.provider\"\n                  >\n                    {{ 'Provider' | translate }}\n                  </div>\n                  <div\n                    class=\"list-inline\"\n                    *ngIf=\"application.manifest.provider\"\n                    data-cy=\"application-detail--provider\"\n                  >\n                    <div *ngIf=\"application.manifest.provider.name\">\n                      <div class=\"col-sm-4 m-b-16\">\n                        <label>{{ 'Name' | translate }}</label>\n                        <p class=\"form-control-static\">\n                          {{ application.manifest.provider.name }}\n                        </p>\n                      </div>\n                    </div>\n                    <div *ngIf=\"application.manifest.provider.domain\">\n                      <div class=\"col-sm-4 m-b-16\">\n                        <label>{{ 'Domain' | translate }}</label>\n                        <p class=\"form-control-static\">\n                          {{ application.manifest.provider.domain }}\n                        </p>\n                      </div>\n                    </div>\n                    <div *ngIf=\"application.manifest.provider.support\">\n                      <div class=\"col-sm-4 m-b-16\">\n                        <label>{{ 'Support' | translate }}</label>\n                        <p class=\"form-control-static\">\n                          {{ application.manifest.provider.support }}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div *ngSwitchCase=\"'EXTERNAL'\">\n                  <c8y-form-group>\n                    <label>{{ 'External URL' | translate }}</label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} http://www.example.com/\"\n                      name=\"externalUrl\"\n                      type=\"url\"\n                      required\n                      [pattern]=\"'^(?!javascript:).+'\"\n                      [readOnly]=\"!isOwner\"\n                      formControlName=\"externalUrl\"\n                    />\n                    <c8y-messages>\n                      <c8y-message\n                        [name]=\"'pattern'\"\n                        [text]=\"'Valid URL required.' | translate\"\n                      ></c8y-message>\n                    </c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div *ngIf=\"isOwner && !isCustomMicroservice\">\n                  <label>{{ 'Select icon' | translate }}</label>\n                  <c8y-icon-selector-wrapper\n                    name=\"icon\"\n                    formControlName=\"icon\"\n                  ></c8y-icon-selector-wrapper>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container *ngIf=\"isCustomMicroservice\">\n            <div\n              class=\"d-contents\"\n              *ngIf=\"!isLoading\"\n            >\n              <c8y-upload-archive\n                [(application)]=\"application\"\n                (refresh)=\"onNewArchive()\"\n              ></c8y-upload-archive>\n            </div>\n          </ng-container>\n          <div\n            class=\"card-footer separator\"\n            *ngIf=\"application && !!isOwner && hasAdminPermissions\"\n          >\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Cancel' | translate }}\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              {{ 'Cancel' | translate }}\n            </button>\n            <button\n              class=\"btn btn-danger\"\n              title=\"{{ 'Delete' | translate }}\"\n              type=\"button\"\n              (click)=\"delete()\"\n              *ngIf=\"canDelete\"\n            >\n              {{ 'Delete' | translate }}\n            </button>\n            <button\n              class=\"btn btn-primary btn-form\"\n              title=\"{{ 'Save' | translate }}\"\n              type=\"submit\"\n              [disabled]=\"!application.type || formGroup.invalid || formGroup.pristine\"\n            >\n              {{ 'Save' | translate }}\n            </button>\n          </div>\n        </div>\n      </form>\n\n      <div\n        class=\"content-fullpage d-flex d-col bg-level-1\"\n        *ngIf=\"isActivityLogSupported\"\n      >\n        <div class=\"card-header separator\">\n          <div\n            class=\"card-title\"\n            translate\n          >\n            Activity log\n          </div>\n          <div class=\"m-l-auto\">\n            <button\n              class=\"btn btn-link btn-sm\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\n              (click)=\"load()\"\n            >\n              <i\n                c8yIcon=\"refresh\"\n                [ngClass]=\"{ 'icon-spin': isLoading }\"\n              ></i>\n              {{ 'Reload' | translate }}\n            </button>\n          </div>\n        </div>\n        <div\n          class=\"p-16 text-center\"\n          *ngIf=\"isLoading\"\n        >\n          <c8y-loading></c8y-loading>\n        </div>\n        <c8y-activity-log\n          class=\"d-contents\"\n          *ngIf=\"!isLoading\"\n          [hasAdminPermissions]=\"hasAdminPermissions\"\n          [application]=\"application\"\n        ></c8y-activity-log>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$2.Router }, { type: i2$1.FormBuilder }, { type: i4.ApplicationService }, { type: i2.AlertService }, { type: i4.InventoryService }, { type: i2.Permissions }, { type: i2.ModalService }, { type: i4$1.TranslateService }, { type: i1$1.BsModalService }, { type: i2.GainsightService }] });
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$2.Router }, { type: i2$1.FormBuilder }, { type: i4.ApplicationService }, { type: i2.AlertService }, { type: i4.InventoryService }, { type: i2.Permissions }, { type: i2.ModalService }, { type: i6.TranslateService }, { type: i1$1.BsModalService }, { type: i2.GainsightService }] });
 
 class ApplicationPropertiesGuard {
     constructor(ecosystemService) {
@@ -1386,9 +1411,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: i1.ListFiltersComponent }] });
 
 class InstallPluginComponent {
-    constructor(bsModalRef, ecosystemService) {
-        this.bsModalRef = bsModalRef;
+    constructor(bottomDrawerRef, ecosystemService, pluginsService) {
+        this.bottomDrawerRef = bottomDrawerRef;
         this.ecosystemService = ecosystemService;
+        this.pluginsService = pluginsService;
         this.filteredPlugins$ = new BehaviorSubject([]);
         this.selectedPlugins = [];
         this.packageTypes = defaultPackageTypes;
@@ -1405,20 +1431,26 @@ class InstallPluginComponent {
         })), src => filterPipe(src));
     }
     cancel() {
-        this.bsModalRef.hide();
+        this.bottomDrawerRef.close();
         this._cancel();
     }
     install() {
         this._install(this.selectedPlugins);
-        this.bsModalRef.hide();
+        this.bottomDrawerRef.close();
+    }
+    async showPluginOverview(plugin) {
+        this.selectedPlugin = plugin;
+        const baseUrl = `/apps/${plugin.id}/`;
+        this.pluginBaseUrl = baseUrl;
+        this.pluginMarkdown = await this.pluginsService.getReadmeFileContent(baseUrl);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InstallPluginComponent, deps: [{ token: i1$1.BsModalRef }, { token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InstallPluginComponent, selector: "c8y-install-plugin", inputs: { plugins$: "plugins$" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'plugin'\"></i>\n    <div\n      class=\"modal-title h4\"\n      id=\"modal-title\"\n      translate\n    >\n      Available plugins\n    </div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p\n      class=\"text-medium m-b-8\"\n      translate\n    >\n      Select the compatible plugins to install\n    </p>\n    <c8y-list-filters\n      (filterPipeChange)=\"setFilterPipe($event)\"\n      [packageTypes]=\"packageTypes\"\n    >\n      <c8y-archived-filter></c8y-archived-filter>\n      <c8y-only-latest-filter></c8y-only-latest-filter>\n    </c8y-list-filters>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <c8y-plugin-list\n      class=\"m-t-16\"\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$\"\n      [selectable]=\"true\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"install-plugin--cancel-button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      type=\"button\"\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      data-cy=\"install-plugin--install-button\"\n    >\n      {{ 'Install' | translate }}\n      <span\n        class=\"badge\"\n        *ngIf=\"selectedPlugins.length as length\"\n      >\n        {{ length }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { kind: "component", type: i1.ArchivedFilterComponent, selector: "c8y-archived-filter" }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package"], outputs: ["selectedItems"] }, { kind: "component", type: OnlyLatestFilterComponent, selector: "c8y-only-latest-filter" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InstallPluginComponent, deps: [{ token: i2.BottomDrawerRef }, { token: i1.EcosystemService }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InstallPluginComponent, selector: "c8y-install-plugin", inputs: { plugins$: "plugins$" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "  <div class=\"card-header gap-8 d-col p-l-24 p-r-24 separator-bottom flex-no-shrink\">\n    <div\n      class=\"card-title h4 text-center\"\n      translate\n    >\n      Available plugins\n    </div>\n    <c8y-list-filters\n      (filterPipeChange)=\"setFilterPipe($event)\"\n      [packageTypes]=\"packageTypes\"\n    >\n      <c8y-archived-filter></c8y-archived-filter>\n      <c8y-only-latest-filter></c8y-only-latest-filter>\n    </c8y-list-filters>\n  </div>\n  <div class=\"d-grid grid__col--5-7--md min-height-0 flex-grow\">\n    <c8y-plugin-list\n      class=\"inner-scroll bg-level-1\"\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No matching plugins' | translate\"\n      [plugins$]=\"filteredPlugins$\"\n      [selectable]=\"true\"\n      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n    ></c8y-plugin-list>\n    <div class=\"inner-scroll bg-component\">\n      <div class=\"card-header separator sticky-top bg-inherit\"\n        *ngIf=\"pluginMarkdown\">\n        <button\n          class=\"m-l-auto btn-clean\"\n          title=\"{{ 'Close' | translate }}\"\n          type=\"button\"\n          (click)=\"selectedPlugin = null; pluginMarkdown = null\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </div>\n      <div class=\"card-block p-l-24 p-r-24\">\n        <div\n          class=\"markdown-content\"\n          *ngIf=\"pluginMarkdown\"\n          [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n        ></div>\n        <c8y-ui-empty-state\n          [icon]=\"'user-manual'\"\n          [title]=\"'No plugin selected' | translate\"\n          [subtitle]=\"\n            'Select a plugin from the list to view its documentation.' | translate\"\n          *ngIf=\"!pluginMarkdown\"\n          [horizontal]=\"true\"\n        >\n          <p>\n            <small >\n              {{ 'Documentation availability varies by plugin.' | translate }}\n            </small>\n          </p>\n       </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"text-center card-footer p-24 separator\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"install-plugin--cancel-button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      type=\"button\"\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      data-cy=\"install-plugin--install-button\"\n    >\n      {{ 'Install' | translate }}\n      <span\n        class=\"badge\"\n        *ngIf=\"selectedPlugins.length as length\"\n      >\n        {{ length }}\n      </span>\n    </button>\n  </div>\n\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { kind: "component", type: i1.ArchivedFilterComponent, selector: "c8y-archived-filter" }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package", "selectedPlugin"], outputs: ["selectedItems", "showOverview"] }, { kind: "component", type: OnlyLatestFilterComponent, selector: "c8y-only-latest-filter" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InstallPluginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-install-plugin', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'plugin'\"></i>\n    <div\n      class=\"modal-title h4\"\n      id=\"modal-title\"\n      translate\n    >\n      Available plugins\n    </div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p\n      class=\"text-medium m-b-8\"\n      translate\n    >\n      Select the compatible plugins to install\n    </p>\n    <c8y-list-filters\n      (filterPipeChange)=\"setFilterPipe($event)\"\n      [packageTypes]=\"packageTypes\"\n    >\n      <c8y-archived-filter></c8y-archived-filter>\n      <c8y-only-latest-filter></c8y-only-latest-filter>\n    </c8y-list-filters>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <c8y-plugin-list\n      class=\"m-t-16\"\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$\"\n      [selectable]=\"true\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"install-plugin--cancel-button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      type=\"button\"\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      data-cy=\"install-plugin--install-button\"\n    >\n      {{ 'Install' | translate }}\n      <span\n        class=\"badge\"\n        *ngIf=\"selectedPlugins.length as length\"\n      >\n        {{ length }}\n      </span>\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i1.EcosystemService }], propDecorators: { plugins$: [{
+            args: [{ selector: 'c8y-install-plugin', host: { class: 'd-contents' }, template: "  <div class=\"card-header gap-8 d-col p-l-24 p-r-24 separator-bottom flex-no-shrink\">\n    <div\n      class=\"card-title h4 text-center\"\n      translate\n    >\n      Available plugins\n    </div>\n    <c8y-list-filters\n      (filterPipeChange)=\"setFilterPipe($event)\"\n      [packageTypes]=\"packageTypes\"\n    >\n      <c8y-archived-filter></c8y-archived-filter>\n      <c8y-only-latest-filter></c8y-only-latest-filter>\n    </c8y-list-filters>\n  </div>\n  <div class=\"d-grid grid__col--5-7--md min-height-0 flex-grow\">\n    <c8y-plugin-list\n      class=\"inner-scroll bg-level-1\"\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No matching plugins' | translate\"\n      [plugins$]=\"filteredPlugins$\"\n      [selectable]=\"true\"\n      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n    ></c8y-plugin-list>\n    <div class=\"inner-scroll bg-component\">\n      <div class=\"card-header separator sticky-top bg-inherit\"\n        *ngIf=\"pluginMarkdown\">\n        <button\n          class=\"m-l-auto btn-clean\"\n          title=\"{{ 'Close' | translate }}\"\n          type=\"button\"\n          (click)=\"selectedPlugin = null; pluginMarkdown = null\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </div>\n      <div class=\"card-block p-l-24 p-r-24\">\n        <div\n          class=\"markdown-content\"\n          *ngIf=\"pluginMarkdown\"\n          [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n        ></div>\n        <c8y-ui-empty-state\n          [icon]=\"'user-manual'\"\n          [title]=\"'No plugin selected' | translate\"\n          [subtitle]=\"\n            'Select a plugin from the list to view its documentation.' | translate\"\n          *ngIf=\"!pluginMarkdown\"\n          [horizontal]=\"true\"\n        >\n          <p>\n            <small >\n              {{ 'Documentation availability varies by plugin.' | translate }}\n            </small>\n          </p>\n       </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"text-center card-footer p-24 separator\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"install-plugin--cancel-button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      type=\"button\"\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      data-cy=\"install-plugin--install-button\"\n    >\n      {{ 'Install' | translate }}\n      <span\n        class=\"badge\"\n        *ngIf=\"selectedPlugins.length as length\"\n      >\n        {{ length }}\n      </span>\n    </button>\n  </div>\n\n" }]
+        }], ctorParameters: () => [{ type: i2.BottomDrawerRef }, { type: i1.EcosystemService }, { type: i2.PluginsService }], propDecorators: { plugins$: [{
                 type: Input
             }] } });
 
@@ -1576,21 +1608,43 @@ class UpdatePluginOfAppComponent {
         this._cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdatePluginOfAppComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i1.EcosystemService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdatePluginOfAppComponent, selector: "c8y-update-plugin-of-app", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdatePluginOfAppComponent, selector: "c8y-update-plugin-of-app", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'installing-updates'\"></i>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"!downgrade\"\n      translate\n    >\n      Update plugin\n    </h4>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"downgrade\"\n      translate\n    >\n      Downgrade plugin\n    </h4>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"card-block p-r-24 p-l-24 sticky-top bg-component separator-bottom\">\n      <c8y-package-version-select\n        [packageContextPath]=\"plugin?.contextPath\"\n        [(ngModel)]=\"applicationVersion\"\n      ></c8y-package-version-select>\n      <div\n        class=\"alert alert-info\"\n        role=\"alert\"\n        *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n      >\n        <span\n          translate\n          ngNonBindable\n          [translateParams]=\"applicationVersion\"\n        >\n          Select another version, as {{ version }} is currently used.\n        </span>\n      </div>\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"updateAll\"\n          />\n          <span></span>\n          <span\n            translate\n            ngNonBindable\n            [translateParams]=\"plugin\"\n          >\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n      <p class=\"legend form-block\">\n        {{ 'Change log' | translate }}\n      </p>\n    </div>\n    <div class=\"card-block p-l-24 p-r-24\">\n\n      <div\n        class=\"markdown-content markdown-content--to-h3\"\n      >\n        <c8y-contents-changelog\n          [package]=\"plugin.originApp\"\n          [selectedVersion]=\"applicationVersion?.version\"\n          [previousVersion]=\"plugin?.version\"\n        ></c8y-contents-changelog>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "component", type: i1.PackageChangelogComponent, selector: "c8y-contents-changelog", inputs: ["package", "selectedVersion", "previousVersion"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdatePluginOfAppComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-update-plugin-of-app', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-update-plugin-of-app', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'installing-updates'\"></i>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"!downgrade\"\n      translate\n    >\n      Update plugin\n    </h4>\n    <h4\n      id=\"modal-title\"\n      *ngIf=\"downgrade\"\n      translate\n    >\n      Downgrade plugin\n    </h4>\n  </div>\n  <div\n    class=\"inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"card-block p-r-24 p-l-24 sticky-top bg-component separator-bottom\">\n      <c8y-package-version-select\n        [packageContextPath]=\"plugin?.contextPath\"\n        [(ngModel)]=\"applicationVersion\"\n      ></c8y-package-version-select>\n      <div\n        class=\"alert alert-info\"\n        role=\"alert\"\n        *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n      >\n        <span\n          translate\n          ngNonBindable\n          [translateParams]=\"applicationVersion\"\n        >\n          Select another version, as {{ version }} is currently used.\n        </span>\n      </div>\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"updateAll\"\n          />\n          <span></span>\n          <span\n            translate\n            ngNonBindable\n            [translateParams]=\"plugin\"\n          >\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n      <p class=\"legend form-block\">\n        {{ 'Change log' | translate }}\n      </p>\n    </div>\n    <div class=\"card-block p-l-24 p-r-24\">\n\n      <div\n        class=\"markdown-content markdown-content--to-h3\"\n      >\n        <c8y-contents-changelog\n          [package]=\"plugin.originApp\"\n          [selectedVersion]=\"applicationVersion?.version\"\n          [previousVersion]=\"plugin?.version\"\n        ></c8y-contents-changelog>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i1.EcosystemService }, { type: i2.GainsightService }] });
 
+class ApplicationPluginReadmeComponent {
+    constructor() {
+        this.bottomDrawerRef = inject(BottomDrawerRef);
+        this.pluginsService = inject(PluginsService);
+    }
+    async ngOnInit() {
+        const baseUrl = `/apps/${this.plugin.id}/`;
+        this.pluginBaseUrl = baseUrl;
+        this.pluginMarkdown = await this.pluginsService.getReadmeFileContent(baseUrl);
+    }
+    close() {
+        this.bottomDrawerRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPluginReadmeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApplicationPluginReadmeComponent, selector: "c8y-application-plugin-readme", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header gap-8 d-col p-l-24 p-r-24 separator-bottom flex-no-shrink\">\n  <span class=\"card-title h4 text-center\">\n    {{ plugin.name }}\n  </span>\n</div>\n<div class=\"inner-scroll flex-grow\">\n  <div\n    class=\"markdown-content col-lg-8 p-24 m-l-auto m-r-auto\"\n    style=\"float: none\"\n    *ngIf=\"pluginMarkdown\"\n    [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n  ></div>\n  <div class=\"d-flex\">\n    <c8y-ui-empty-state\n      class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\"\n      [icon]=\"'user-manual'\"\n      [title]=\"'No README.md found for plugin' | translate\"\n      [subtitle]=\"\n        'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'\n          | translate\n      \"\n      *ngIf=\"!pluginMarkdown\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</div>\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPluginReadmeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-application-plugin-readme', host: { class: 'd-contents' }, template: "<div class=\"card-header gap-8 d-col p-l-24 p-r-24 separator-bottom flex-no-shrink\">\n  <span class=\"card-title h4 text-center\">\n    {{ plugin.name }}\n  </span>\n</div>\n<div class=\"inner-scroll flex-grow\">\n  <div\n    class=\"markdown-content col-lg-8 p-24 m-l-auto m-r-auto\"\n    style=\"float: none\"\n    *ngIf=\"pluginMarkdown\"\n    [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n  ></div>\n  <div class=\"d-flex\">\n    <c8y-ui-empty-state\n      class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\"\n      [icon]=\"'user-manual'\"\n      [title]=\"'No README.md found for plugin' | translate\"\n      [subtitle]=\"\n        'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'\n          | translate\n      \"\n      *ngIf=\"!pluginMarkdown\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</div>\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n" }]
+        }] });
+
 class ApplicationPluginsComponent {
-    constructor(activatedRoute, ecosystemService, bsModalService, pluginsService, alertService, gainsightService) {
+    constructor(activatedRoute, ecosystemService, bsModalService, pluginsService, alertService, gainsightService, bottomDrawerService) {
         this.activatedRoute = activatedRoute;
         this.ecosystemService = ecosystemService;
         this.bsModalService = bsModalService;
         this.pluginsService = pluginsService;
         this.alertService = alertService;
         this.gainsightService = gainsightService;
+        this.bottomDrawerService = bottomDrawerService;
         this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_ECOSYSTEM;
         this.CURRENT_LOCATION = location.href;
         this.remotePlugins$ = new BehaviorSubject({});
@@ -1721,13 +1775,11 @@ class ApplicationPluginsComponent {
                 targetApplicationName: this.app.name,
                 targetApplicationContextPath: this.app.contextPath
             });
-            const pluginsToAdd = await this.bsModalService.show(InstallPluginComponent, {
-                class: 'modal-md',
-                ariaDescribedby: 'modal-body',
-                ariaLabelledBy: 'modal-title',
+            const drawer = this.bottomDrawerService.openDrawer(InstallPluginComponent, {
                 initialState: this.getInstallModalInitState(),
-                ignoreBackdropClick: true
-            }).content.result;
+                closeOnNavigation: true
+            });
+            const pluginsToAdd = await drawer.instance.result;
             const isArchived = await this.ecosystemService.verifyArchived(pluginsToAdd);
             if (!isArchived) {
                 return;
@@ -1790,10 +1842,19 @@ class ApplicationPluginsComponent {
     }
     getActionControls() {
         return [
+            {
+                type: 'showReadme',
+                text: gettext('Show readme'),
+                icon: 'documents',
+                showIf: (plugin) => {
+                    return !!plugin.readmePath;
+                },
+                callback: plugin => this.showPluginReadme(plugin)
+            },
             {
                 type: 'customUpdate',
                 text: gettext('Update'),
-                icon: 'caret-square-o-up',
+                icon: 'installing-updates',
                 showIf: plugin => {
                     return (plugin.status === ApplicationPluginStatus.OUTDATED ||
                         plugin.status === ApplicationPluginStatus.REVOKED);
@@ -1803,7 +1864,7 @@ class ApplicationPluginsComponent {
             {
                 type: 'customDowngrade',
                 text: gettext('Downgrade'),
-                icon: 'caret-square-o-down',
+                icon: 'installing-updates',
                 showIf: (plugin) => {
                     if (plugin.scope === PluginsExportScopes.SELF ||
                         plugin.scope === PluginsExportScopes.SELF_OPTIONAL) {
@@ -1815,6 +1876,12 @@ class ApplicationPluginsComponent {
             }
         ];
     }
+    showPluginReadme(plugin) {
+        this.bottomDrawerService.openDrawer(ApplicationPluginReadmeComponent, {
+            initialState: { plugin },
+            closeOnNavigation: true
+        });
+    }
     getBulkActionControls() {
         return [
             {
@@ -1828,7 +1895,7 @@ class ApplicationPluginsComponent {
     async updatePlugin(app, plugin, downgrade = false) {
         try {
             await this.bsModalService.show(UpdatePluginOfAppComponent, {
-                class: 'modal-sm',
+                class: 'modal-md',
                 ariaDescribedby: 'modal-body',
                 ariaLabelledBy: 'modal-title',
                 initialState: {
@@ -2038,13 +2105,13 @@ class ApplicationPluginsComponent {
             targetApplicationContextPath: this.app.contextPath
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i2.GainsightService }, { token: i2.BottomDrawerService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApplicationPluginsComponent, selector: "c8y-app-plugins", inputs: { appId: "appId" }, viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DataGridComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!(isStandard$ | async)\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset to default plugins' | translate }}\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    (click)=\"resetToDefault()\"\n  >\n    <i c8yIcon=\"undo\"></i>\n    {{ 'Reset to default' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item\n    *ngIf=\"orphanedPlugins?.length\"\n    [placement]=\"'right'\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    class=\"d-contents\"\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'plugin'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          translate\n        >\n          Install plugins\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "hideReload"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApplicationPluginsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-app-plugins', template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!(isStandard$ | async)\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset to default plugins' | translate }}\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    (click)=\"resetToDefault()\"\n  >\n    <i c8yIcon=\"undo\"></i>\n    {{ 'Reset to default' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item\n    *ngIf=\"orphanedPlugins?.length\"\n    [placement]=\"'right'\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    class=\"d-contents\"\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'plugin'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          translate\n        >\n          Install plugins\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i2.GainsightService }], propDecorators: { appId: [{
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i2.GainsightService }, { type: i2.BottomDrawerService }], propDecorators: { appId: [{
                 type: Input
             }], dataGrid: [{
                 type: ViewChild,
@@ -2088,7 +2155,8 @@ class ApplicationPluginsModule {
             LabelCellRendererComponent,
             OrphanedStatusCellRendererComponent,
             UpdatePluginOfAppComponent,
-            OnlyLatestFilterComponent], imports: [CoreModule, SharedEcosystemModule], exports: [ApplicationPluginsComponent,
+            OnlyLatestFilterComponent,
+            ApplicationPluginReadmeComponent], imports: [CoreModule, SharedEcosystemModule], exports: [ApplicationPluginsComponent,
             PluginListItemComponent,
             InstallPluginComponent,
             PluginListComponent,
@@ -2127,7 +2195,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LabelCellRendererComponent,
                         OrphanedStatusCellRendererComponent,
                         UpdatePluginOfAppComponent,
-                        OnlyLatestFilterComponent
+                        OnlyLatestFilterComponent,
+                        ApplicationPluginReadmeComponent
                     ],
                     exports: [
                         ApplicationPluginsComponent,
@@ -2487,28 +2556,26 @@ class DeployApplicationComponent {
             packageName: this.package.name
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeployApplicationComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardComponent }, { token: i4$1.TranslateService }, { token: i2.PluginsService }, { token: i2.GainsightService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeployApplicationComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardComponent }, { token: i6.TranslateService }, { token: i2.PluginsService }, { token: i2.GainsightService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeployApplicationComponent, selector: "c8y-deploy-application", viewQueries: [{ propertyName: "applicationPropertiesForm", first: true, predicate: ApplicationPropertiesFormComponent, descendants: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"output\"></i>\n    <h4 id=\"modal-title\">{{ 'Deploy application' | translate }}</h4>\n  </div>\n</c8y-wizard-header>\n\n<c8y-wizard-body id=\"modal-body\">\n  <ng-container *ngIf=\"!isDeployed\">\n    <div class=\"fadeIn animated d-flex a-i-center j-c-center d-col\" style=\"min-height: 309px\">\n      <p\n        class=\"bg-level-0 fit-w p-16 text-center text-medium sticky-top bg-level-0 separator-bottom\"\n        *ngIf=\"!inProgress\"\n      >\n        {{ headerText | translate }}\n      </p>\n      <c8y-application-properties-form\n        *ngIf=\"!inProgress\"\n        [application]=\"newAppConfig\"\n        class=\"d-block fit-w bg-level-1\"\n      ></c8y-application-properties-form>\n\n      <ng-container *ngIf=\"!inProgress\">\n        <div [ngStyle]=\"{ padding: '0 16px' }\" class=\"d-block fit-w bg-gray-white\">\n          <c8y-package-version-select\n            [ngModel]=\"model.selected\"\n            (ngModelChange)=\"onAppVersionSelect($event)\"\n            [packageId]=\"package?.id\"\n            [label]=\"'Use extension package version' | translate\"\n          ></c8y-package-version-select>\n        </div>\n      </ng-container>\n\n      <c8y-loading\n        *ngIf=\"inProgress\"\n        [message]=\"'Deploying\u2026' | translate\"\n        class=\"text-center\"\n        layout=\"application\"\n      ></c8y-loading>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isDeployed\">\n    <div\n      *ngIf=\"deployedWithSuccess; else failedDeploy\"\n      class=\"modal-body fadeIn animated\"\n      style=\"min-height: 309px\"\n    >\n      <div class=\"d-flex a-i-center j-c-center d-col\">\n        <c8y-operation-result\n          type=\"success\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          [text]=\"successMessageTemplate | translate: { packageName: package.name }\"\n          class=\"lead d-block m-b-16\"\n        ></c8y-operation-result>\n      </div>\n    </div>\n    <ng-template #failedDeploy>\n      <div class=\"modal-body fadeIn animated text-center\" style=\"min-height: 257px\">\n        <c8y-operation-result\n          type=\"error\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          text=\"{{ 'Application creation failed' | translate }}\"\n          class=\"lead\"\n        ></c8y-operation-result>\n      </div>\n    </ng-template>\n  </ng-container>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    (click)=\"cancel()\"\n    type=\"button\"\n    class=\"btn btn-default\"\n    data-cy=\"c8y-deploy-application--cancel-blueprint-button\"\n    title=\"{{ (isDeployed && deployedWithSuccess ? doneLabel : cancelLabel) | translate }}\"\n  >\n    {{ (isDeployed && deployedWithSuccess ? doneLabel : cancelLabel) | translate }}\n  </button>\n\n  <button\n    (click)=\"deployApp()\"\n    *ngIf=\"!isDeployed\"\n    [disabled]=\"inProgress || !canDeploy\"\n    [ngClass]=\"{ 'btn-pending': inProgress }\"\n    class=\"btn btn-primary\"\n    type=\"button\"\n    data-cy=\"c8y-deploy-application--deploy-blueprint-button\"\n    title=\"{{ 'Deploy' | translate }}\"\n  >\n    {{ 'Deploy' | translate }}\n  </button>\n\n  <button\n    (click)=\"open()\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    *ngIf=\"isDeployed && deployedWithSuccess\"\n    title=\"{{ 'Open the application details' | translate }}\"\n    translate\n  >\n    Open\n  </button>\n</c8y-wizard-footer>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.WizardHeaderComponent, selector: "c8y-wizard-header" }, { kind: "component", type: i2.WizardBodyComponent, selector: "c8y-wizard-body" }, { kind: "component", type: i2.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "component", type: i1.ApplicationPropertiesFormComponent, selector: "c8y-application-properties-form", inputs: ["application", "disabled"] }, { kind: "component", type: i1.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeployApplicationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-deploy-application', template: "<c8y-wizard-header>\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"output\"></i>\n    <h4 id=\"modal-title\">{{ 'Deploy application' | translate }}</h4>\n  </div>\n</c8y-wizard-header>\n\n<c8y-wizard-body id=\"modal-body\">\n  <ng-container *ngIf=\"!isDeployed\">\n    <div class=\"fadeIn animated d-flex a-i-center j-c-center d-col\" style=\"min-height: 309px\">\n      <p\n        class=\"bg-level-0 fit-w p-16 text-center text-medium sticky-top bg-level-0 separator-bottom\"\n        *ngIf=\"!inProgress\"\n      >\n        {{ headerText | translate }}\n      </p>\n      <c8y-application-properties-form\n        *ngIf=\"!inProgress\"\n        [application]=\"newAppConfig\"\n        class=\"d-block fit-w bg-level-1\"\n      ></c8y-application-properties-form>\n\n      <ng-container *ngIf=\"!inProgress\">\n        <div [ngStyle]=\"{ padding: '0 16px' }\" class=\"d-block fit-w bg-gray-white\">\n          <c8y-package-version-select\n            [ngModel]=\"model.selected\"\n            (ngModelChange)=\"onAppVersionSelect($event)\"\n            [packageId]=\"package?.id\"\n            [label]=\"'Use extension package version' | translate\"\n          ></c8y-package-version-select>\n        </div>\n      </ng-container>\n\n      <c8y-loading\n        *ngIf=\"inProgress\"\n        [message]=\"'Deploying\u2026' | translate\"\n        class=\"text-center\"\n        layout=\"application\"\n      ></c8y-loading>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isDeployed\">\n    <div\n      *ngIf=\"deployedWithSuccess; else failedDeploy\"\n      class=\"modal-body fadeIn animated\"\n      style=\"min-height: 309px\"\n    >\n      <div class=\"d-flex a-i-center j-c-center d-col\">\n        <c8y-operation-result\n          type=\"success\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          [text]=\"successMessageTemplate | translate: { packageName: package.name }\"\n          class=\"lead d-block m-b-16\"\n        ></c8y-operation-result>\n      </div>\n    </div>\n    <ng-template #failedDeploy>\n      <div class=\"modal-body fadeIn animated text-center\" style=\"min-height: 257px\">\n        <c8y-operation-result\n          type=\"error\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n          text=\"{{ 'Application creation failed' | translate }}\"\n          class=\"lead\"\n        ></c8y-operation-result>\n      </div>\n    </ng-template>\n  </ng-container>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    (click)=\"cancel()\"\n    type=\"button\"\n    class=\"btn btn-default\"\n    data-cy=\"c8y-deploy-application--cancel-blueprint-button\"\n    title=\"{{ (isDeployed && deployedWithSuccess ? doneLabel : cancelLabel) | translate }}\"\n  >\n    {{ (isDeployed && deployedWithSuccess ? doneLabel : cancelLabel) | translate }}\n  </button>\n\n  <button\n    (click)=\"deployApp()\"\n    *ngIf=\"!isDeployed\"\n    [disabled]=\"inProgress || !canDeploy\"\n    [ngClass]=\"{ 'btn-pending': inProgress }\"\n    class=\"btn btn-primary\"\n    type=\"button\"\n    data-cy=\"c8y-deploy-application--deploy-blueprint-button\"\n    title=\"{{ 'Deploy' | translate }}\"\n  >\n    {{ 'Deploy' | translate }}\n  </button>\n\n  <button\n    (click)=\"open()\"\n    type=\"button\"\n    class=\"btn btn-primary\"\n    *ngIf=\"isDeployed && deployedWithSuccess\"\n    title=\"{{ 'Open the application details' | translate }}\"\n    translate\n  >\n    Open\n  </button>\n</c8y-wizard-footer>\n" }]
-        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.WizardComponent }, { type: i4$1.TranslateService }, { type: i2.PluginsService }, { type: i2.GainsightService }, { type: i1$2.Router }], propDecorators: { applicationPropertiesForm: [{
+        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.WizardComponent }, { type: i6.TranslateService }, { type: i2.PluginsService }, { type: i2.GainsightService }, { type: i1$2.Router }], propDecorators: { applicationPropertiesForm: [{
                 type: ViewChild,
                 args: [ApplicationPropertiesFormComponent]
             }] } });
 
 class PackageDetailsComponent {
-    constructor(activatedRoute, client, wizardModalService, ecosystemService, contextRouteService, pluginsService, packageAvailabilityService, ui, pluginService, gainsightService) {
+    constructor(activatedRoute, wizardModalService, ecosystemService, contextRouteService, pluginsService, packageAvailabilityService, ui, gainsightService) {
         this.activatedRoute = activatedRoute;
-        this.client = client;
         this.wizardModalService = wizardModalService;
         this.ecosystemService = ecosystemService;
         this.contextRouteService = contextRouteService;
         this.pluginsService = pluginsService;
         this.packageAvailabilityService = packageAvailabilityService;
         this.ui = ui;
-        this.pluginService = pluginService;
         this.gainsightService = gainsightService;
         this.package = {};
         this.exportedPlugins$ = new BehaviorSubject([]);
@@ -2518,8 +2585,6 @@ class PackageDetailsComponent {
         this.packageTypeLabels = PACKAGE_TYPE_LABELS;
         this.PACKAGE_TYPE = PackageType;
         this.packageProperties = packageProperties;
-        this.headers = { 'Content-Type': 'text/markdown', responseType: 'blob' };
-        this.NOT_FOUND_ERROR_CODE = 404;
     }
     async ngOnInit() {
         this.isAllowedToCreateSubtenants = !!this.ui.currentTenant.value?.allowCreateTenants;
@@ -2551,17 +2616,27 @@ class PackageDetailsComponent {
         }
         this.isChangingAvailability = false;
     }
+    async showPluginOverview(plugin) {
+        this.selectedPlugin = plugin;
+        const baseUrl = `/apps/${plugin.id}/`;
+        this.pluginBaseUrl = baseUrl;
+        this.pluginMarkdown = await this.pluginsService.getReadmeFileContent(baseUrl);
+    }
+    closeOverview() {
+        this.selectedPlugin = null;
+    }
     async loadData(pckg) {
         this.package = pckg
             ? pckg
             : this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
         this.packageAvailability = this.package.availability;
         this.packageContentState = this.ecosystemService.getPackageContentState(this.package);
-        this.packageType = this.pluginService.getPackageType(this.package);
+        this.packageType = this.pluginsService.getPackageType(this.package);
         this.name = this.package?.name;
         this.description = this.package?.manifest?.description;
-        this.markdown = await this.getReadmeFileContent();
-        this.baseUrl = this.getBaseUrl();
+        const baseUrl = `/apps/${this.package.contextPath}/`;
+        this.markdown = await this.pluginsService.getReadmeFileContent(baseUrl);
+        this.baseUrl = baseUrl;
         this.appState = this.ecosystemService.getAppState(this.package);
         this.isPackageBlueprint = this.ecosystemService.isPackageBlueprint(this.package);
         this.isOwnedByCurrentTenant =
@@ -2572,36 +2647,13 @@ class PackageDetailsComponent {
         const exports = this.pluginsService.getMFExports(this.package);
         this.exportedPlugins$.next(exports);
     }
-    async getReadmeFileContent() {
-        const readmeFile = await this.getReadmeFile();
-        if (readmeFile.status === 200) {
-            return await readmeFile.text();
-        }
-        return '';
-    }
-    async getReadmeFile() {
-        const baseUrl = this.getBaseUrl();
-        let result;
-        const options = {
-            method: 'GET',
-            headers: this.headers
-        };
-        result = await this.client.fetch(`${baseUrl}README.md`, options);
-        if (result && result.status === this.NOT_FOUND_ERROR_CODE) {
-            result = await this.client.fetch(`${baseUrl}readme.md`, options);
-        }
-        return result;
-    }
-    getBaseUrl() {
-        return `/apps/${this.package.contextPath}/`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageDetailsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i4.FetchClient }, { token: i2.WizardModalService }, { token: i1.EcosystemService }, { token: i2.ContextRouteService }, { token: i2.PluginsService }, { token: i1.PackageAvailabilityService }, { token: i2.AppStateService }, { token: i2.PluginsService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageDetailsComponent, selector: "c8y-package-details", ngImport: i0, template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability`of package based on app state`\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label || package.manifest.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,\n            'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED\n          }\"\n        >\n          {{ package.label || package.manifest.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <div\n        class=\"alert alert-warning m-b-16\"\n        style=\"margin: auto\"\n        *ngIf=\"packageType === PACKAGE_TYPE.ARCHIVED\"\n        translate\n      >\n        The package was archived by the owner marking it as out of maintenance. It is not\n        recommended to install the package.\n      </div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i2.MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: i1.TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageDetailsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.WizardModalService }, { token: i1.EcosystemService }, { token: i2.ContextRouteService }, { token: i2.PluginsService }, { token: i1.PackageAvailabilityService }, { token: i2.AppStateService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageDetailsComponent, selector: "c8y-package-details", ngImport: i0, template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8\"\n      for=\"availability\"\n      translate\n    >\n      Availability`of package based on app state`\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        class=\"form-control\"\n        id=\"availability\"\n        [(ngModel)]=\"packageAvailability\"\n        [disabled]=\"isChangingAvailability\"\n        (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n      >\n        <option\n          *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n          [ngValue]=\"availability.value\"\n        >\n          {{ availability.label | translate }}\n        </option>\n      </select>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div\n  class=\"card content-fullpage d-grid grid__row--fit-auto\"\n  [ngClass]=\"{ 'grid__col--8-4-0': !selectedPlugin, 'grid__col--0-4-8': !!selectedPlugin }\"\n>\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label || package.manifest.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,\n            'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED\n          }\"\n        >\n          {{ package.label || package.manifest.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-8\">\n              <div class=\"card-title h4 m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <div\n        class=\"alert alert-warning m-b-16\"\n        style=\"margin: auto\"\n        *ngIf=\"packageType === PACKAGE_TYPE.ARCHIVED\"\n        translate\n      >\n        The package was archived by the owner marking it as out of maintenance. It is not\n        recommended to install the package.\n      </div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div\n    class=\"inner-scroll d-flex d-col bg-level-1 split-view__list\"\n    [ngClass]=\"{ 'border-right': !!selectedPlugin }\"\n  >\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n        [selectedPlugin]=\"selectedPlugin\"\n        (showOverview)=\"showPluginOverview($event)\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n\n  <div class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedPlugin }\">\n    <div\n      class=\"card-header separator sticky-top\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <button\n        class=\"btn-clean\"\n        (click)=\"closeOverview()\"\n      >\n        <i c8yIcon=\"caret-back\"></i>\n        {{ 'Back to package overview ' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"card-block p-l-16 p-r-16 overflow-visible\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <div\n        class=\"markdown-content\"\n        *ngIf=\"pluginMarkdown\"\n        [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n      ></div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found for plugin' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'\n            | translate\n        \"\n        *ngIf=\"!pluginMarkdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package", "selectedPlugin"], outputs: ["selectedItems", "showOverview"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i2.MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: i1.TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-package-details', template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability`of package based on app state`\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label || package.manifest.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,\n            'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED\n          }\"\n        >\n          {{ package.label || package.manifest.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <div\n        class=\"alert alert-warning m-b-16\"\n        style=\"margin: auto\"\n        *ngIf=\"packageType === PACKAGE_TYPE.ARCHIVED\"\n        translate\n      >\n        The package was archived by the owner marking it as out of maintenance. It is not\n        recommended to install the package.\n      </div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i4.FetchClient }, { type: i2.WizardModalService }, { type: i1.EcosystemService }, { type: i2.ContextRouteService }, { type: i2.PluginsService }, { type: i1.PackageAvailabilityService }, { type: i2.AppStateService }, { type: i2.PluginsService }, { type: i2.GainsightService }] });
+            args: [{ selector: 'c8y-package-details', template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8\"\n      for=\"availability\"\n      translate\n    >\n      Availability`of package based on app state`\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        class=\"form-control\"\n        id=\"availability\"\n        [(ngModel)]=\"packageAvailability\"\n        [disabled]=\"isChangingAvailability\"\n        (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n      >\n        <option\n          *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n          [ngValue]=\"availability.value\"\n        >\n          {{ availability.label | translate }}\n        </option>\n      </select>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div\n  class=\"card content-fullpage d-grid grid__row--fit-auto\"\n  [ngClass]=\"{ 'grid__col--8-4-0': !selectedPlugin, 'grid__col--0-4-8': !!selectedPlugin }\"\n>\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label || package.manifest.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,\n            'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED\n          }\"\n        >\n          {{ package.label || package.manifest.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-8\">\n              <div class=\"card-title h4 m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <div\n        class=\"alert alert-warning m-b-16\"\n        style=\"margin: auto\"\n        *ngIf=\"packageType === PACKAGE_TYPE.ARCHIVED\"\n        translate\n      >\n        The package was archived by the owner marking it as out of maintenance. It is not\n        recommended to install the package.\n      </div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div\n    class=\"inner-scroll d-flex d-col bg-level-1 split-view__list\"\n    [ngClass]=\"{ 'border-right': !!selectedPlugin }\"\n  >\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n        [selectedPlugin]=\"selectedPlugin\"\n        (showOverview)=\"showPluginOverview($event)\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n\n  <div class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedPlugin }\">\n    <div\n      class=\"card-header separator sticky-top\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <button\n        class=\"btn-clean\"\n        (click)=\"closeOverview()\"\n      >\n        <i c8yIcon=\"caret-back\"></i>\n        {{ 'Back to package overview ' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"card-block p-l-16 p-r-16 overflow-visible\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <div\n        class=\"markdown-content\"\n        *ngIf=\"pluginMarkdown\"\n        [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n      ></div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found for plugin' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'\n            | translate\n        \"\n        *ngIf=\"!pluginMarkdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.WizardModalService }, { type: i1.EcosystemService }, { type: i2.ContextRouteService }, { type: i2.PluginsService }, { type: i1.PackageAvailabilityService }, { type: i2.AppStateService }, { type: i2.GainsightService }] });
 
 class PackagesListComponent {
     constructor(ecosystemService, wizardModalService, permissions) {
@@ -2690,12 +2742,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class PackageVersionsPluginsComponent {
     constructor(activatedRoute) {
         this.activatedRoute = activatedRoute;
+        this.showOverview = new EventEmitter();
         this.exportedPlugins$ = new BehaviorSubject([]);
         this.appParentData = this.activatedRoute.parent?.snapshot.data.contextData;
     }
     async ngOnChanges() {
         this.exportedPlugins$.next(this.getExportedPlugins());
     }
+    showPluginOverview(plugin) {
+        this.showOverview.emit(plugin);
+    }
     getExportedPlugins() {
         if (!this.selectedVersionManifest?.exports) {
             return [];
@@ -2706,18 +2762,23 @@ class PackageVersionsPluginsComponent {
         };
         return this.selectedVersionManifest.exports.map(plugin => ({
             ...plugin,
+            id: PluginsService.createPluginId(this.selectedVersionManifest.contextPath, plugin, this.selectedVersionManifest.version, false),
             originApp
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageVersionsPluginsComponent, selector: "c8y-contents-plugins", inputs: { selectedVersionManifest: "selectedVersionManifest" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"legend form-block\">\n  {{ 'Plugins' | translate }}\n</p>\n<!-- empty state -->\n<c8y-ui-empty-state\n  *ngIf=\"(exportedPlugins$ | async).length === 0\"\n  [icon]=\"'plugin'\"\n  [horizontal]=\"true\"\n  [title]=\"'No plugins to display.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n></c8y-ui-empty-state>\n\n<c8y-plugin-list [plugins$]=\"exportedPlugins$\" [selectable]=\"false\"></c8y-plugin-list>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageVersionsPluginsComponent, selector: "c8y-contents-plugins", inputs: { selectedVersionManifest: "selectedVersionManifest", selectedPlugin: "selectedPlugin" }, outputs: { showOverview: "showOverview" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"legend form-block\">\n  {{ 'Plugins' | translate }}\n</p>\n<!-- empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'plugin'\"\n  [title]=\"'No plugins to display.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n  *ngIf=\"(exportedPlugins$ | async).length === 0\"\n  [horizontal]=\"true\"\n></c8y-ui-empty-state>\n\n<c8y-plugin-list\n  [plugins$]=\"exportedPlugins$\"\n  [selectable]=\"false\"\n  [selectedPlugin]=\"selectedPlugin\"\n  (showOverview)=\"showPluginOverview($event)\"\n></c8y-plugin-list>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package", "selectedPlugin"], outputs: ["selectedItems", "showOverview"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsPluginsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-contents-plugins', template: "<p class=\"legend form-block\">\n  {{ 'Plugins' | translate }}\n</p>\n<!-- empty state -->\n<c8y-ui-empty-state\n  *ngIf=\"(exportedPlugins$ | async).length === 0\"\n  [icon]=\"'plugin'\"\n  [horizontal]=\"true\"\n  [title]=\"'No plugins to display.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n></c8y-ui-empty-state>\n\n<c8y-plugin-list [plugins$]=\"exportedPlugins$\" [selectable]=\"false\"></c8y-plugin-list>\n" }]
+            args: [{ selector: 'c8y-contents-plugins', template: "<p class=\"legend form-block\">\n  {{ 'Plugins' | translate }}\n</p>\n<!-- empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'plugin'\"\n  [title]=\"'No plugins to display.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n  *ngIf=\"(exportedPlugins$ | async).length === 0\"\n  [horizontal]=\"true\"\n></c8y-ui-empty-state>\n\n<c8y-plugin-list\n  [plugins$]=\"exportedPlugins$\"\n  [selectable]=\"false\"\n  [selectedPlugin]=\"selectedPlugin\"\n  (showOverview)=\"showPluginOverview($event)\"\n></c8y-plugin-list>\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }], propDecorators: { selectedVersionManifest: [{
                 type: Input,
                 args: ['selectedVersionManifest']
+            }], selectedPlugin: [{
+                type: Input
+            }], showOverview: [{
+                type: Output
             }] } });
 
 class PackageContentsComponent {
@@ -2726,15 +2787,19 @@ class PackageContentsComponent {
         this.applicationService = applicationService;
         this.alertService = alertService;
         this.contextRouteService = contextRouteService;
+        this.showOverview = new EventEmitter();
         this.package = {};
         this.isLoading = false;
         this.packageVersionProperties = packageProperties;
     }
+    showPluginOverview(plugin) {
+        this.showOverview.emit(plugin);
+    }
     async ngOnChanges(changes) {
-        if (changes.selectedVersion.currentValue) {
+        if (changes.selectedVersion?.currentValue) {
             this.loadManifest(this.selectedVersion);
+            this.previousVersion = this.getPreviousVersion();
         }
-        this.selectedVersionManifest = undefined;
     }
     async loadManifest(version) {
         this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
@@ -2751,14 +2816,28 @@ class PackageContentsComponent {
         }
         return undefined;
     }
+    getPreviousVersion() {
+        if (this.package.applicationVersions.length === 1) {
+            return null;
+        }
+        const selectedVersionIndex = this.package.applicationVersions.findIndex(version => version.version === this.selectedVersion);
+        if (selectedVersionIndex === 0) {
+            return null;
+        }
+        return this.package.applicationVersions[selectedVersionIndex - 1].version;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageContentsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i4.ApplicationService }, { token: i2.AlertService }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageContentsComponent, selector: "c8y-package-contents", inputs: { selectedVersion: "selectedVersion" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"inner-scroll\">\n  <ng-container *ngIf=\"!selectedVersionManifest && !isLoading\">\n    <div class=\"p-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'big-parcel'\"\n        [horizontal]=\"true\"\n        [title]=\"'No package selected' | translate\"\n        [subtitle]=\"'Select a package from the list to display the package contents.' | translate\"\n      ></c8y-ui-empty-state>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isLoading\">\n    <c8y-loading></c8y-loading>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedVersionManifest && !isLoading\">\n    <!-- DETAILS -->\n    <div class=\"card-block p-t-0\">\n      <c8y-properties-list\n        [data]=\"selectedVersionManifest\"\n        [emptyLabel]=\"'--'\"\n        [properties]=\"packageVersionProperties\"\n      >\n      </c8y-properties-list>\n      \n        <!-- APPS -->\n      <c8y-contents-apps\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      ></c8y-contents-apps>\n\n      <!-- PLUGINS -->\n      <c8y-contents-plugins\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      ></c8y-contents-plugins>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "component", type: PackageVersionsPluginsComponent, selector: "c8y-contents-plugins", inputs: ["selectedVersionManifest"] }, { kind: "component", type: PackageVersionsAppsComponent, selector: "c8y-contents-apps", inputs: ["selectedVersionManifest"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageContentsComponent, selector: "c8y-package-contents", inputs: { selectedVersion: "selectedVersion", selectedPlugin: "selectedPlugin" }, outputs: { showOverview: "showOverview" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!selectedVersionManifest && !isLoading\">\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'big-parcel'\"\n      [title]=\"'No package selected' | translate\"\n      [subtitle]=\"'Select a package from the list to display the package contents.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isLoading\">\n  <c8y-loading></c8y-loading>\n</ng-container>\n\n<ng-container *ngIf=\"selectedVersionManifest && !isLoading\">\n  <!-- DETAILS -->\n  <div class=\"card-block\">\n    <c8y-properties-list\n      [data]=\"selectedVersionManifest\"\n      [emptyLabel]=\"'--'\"\n      [properties]=\"packageVersionProperties\"\n    ></c8y-properties-list>\n\n    <!-- APPS -->\n    <c8y-contents-apps\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n    ></c8y-contents-apps>\n\n    <!-- PLUGINS -->\n    <c8y-contents-plugins\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n    ></c8y-contents-plugins>\n\n    <!-- CHANGELOG -->\n    <p class=\"legend form-block\">\n      {{ 'Change log' | translate }}\n    </p>\n\n    <c8y-contents-changelog\n      [package]=\"package\"\n      [selectedVersion]=\"selectedVersion\"\n      [previousVersion]=\"previousVersion\"\n    ></c8y-contents-changelog>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i2.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "component", type: i1.PackageChangelogComponent, selector: "c8y-contents-changelog", inputs: ["package", "selectedVersion", "previousVersion"] }, { kind: "component", type: PackageVersionsPluginsComponent, selector: "c8y-contents-plugins", inputs: ["selectedVersionManifest", "selectedPlugin"], outputs: ["showOverview"] }, { kind: "component", type: PackageVersionsAppsComponent, selector: "c8y-contents-apps", inputs: ["selectedVersionManifest"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageContentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-package-contents', template: "<div class=\"inner-scroll\">\n  <ng-container *ngIf=\"!selectedVersionManifest && !isLoading\">\n    <div class=\"p-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'big-parcel'\"\n        [horizontal]=\"true\"\n        [title]=\"'No package selected' | translate\"\n        [subtitle]=\"'Select a package from the list to display the package contents.' | translate\"\n      ></c8y-ui-empty-state>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isLoading\">\n    <c8y-loading></c8y-loading>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedVersionManifest && !isLoading\">\n    <!-- DETAILS -->\n    <div class=\"card-block p-t-0\">\n      <c8y-properties-list\n        [data]=\"selectedVersionManifest\"\n        [emptyLabel]=\"'--'\"\n        [properties]=\"packageVersionProperties\"\n      >\n      </c8y-properties-list>\n      \n        <!-- APPS -->\n      <c8y-contents-apps\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      ></c8y-contents-apps>\n\n      <!-- PLUGINS -->\n      <c8y-contents-plugins\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      ></c8y-contents-plugins>\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'c8y-package-contents', template: "<ng-container *ngIf=\"!selectedVersionManifest && !isLoading\">\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'big-parcel'\"\n      [title]=\"'No package selected' | translate\"\n      [subtitle]=\"'Select a package from the list to display the package contents.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isLoading\">\n  <c8y-loading></c8y-loading>\n</ng-container>\n\n<ng-container *ngIf=\"selectedVersionManifest && !isLoading\">\n  <!-- DETAILS -->\n  <div class=\"card-block\">\n    <c8y-properties-list\n      [data]=\"selectedVersionManifest\"\n      [emptyLabel]=\"'--'\"\n      [properties]=\"packageVersionProperties\"\n    ></c8y-properties-list>\n\n    <!-- APPS -->\n    <c8y-contents-apps\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n    ></c8y-contents-apps>\n\n    <!-- PLUGINS -->\n    <c8y-contents-plugins\n      class=\"p-t-16 d-block\"\n      [selectedVersionManifest]=\"selectedVersionManifest\"\n      [selectedPlugin]=\"selectedPlugin\"\n      (showOverview)=\"showPluginOverview($event)\"\n    ></c8y-contents-plugins>\n\n    <!-- CHANGELOG -->\n    <p class=\"legend form-block\">\n      {{ 'Change log' | translate }}\n    </p>\n\n    <c8y-contents-changelog\n      [package]=\"package\"\n      [selectedVersion]=\"selectedVersion\"\n      [previousVersion]=\"previousVersion\"\n    ></c8y-contents-changelog>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i4.ApplicationService }, { type: i2.AlertService }, { type: i2.ContextRouteService }], propDecorators: { selectedVersion: [{
                 type: Input
+            }], selectedPlugin: [{
+                type: Input
+            }], showOverview: [{
+                type: Output
             }] } });
 
 const DEFAULT_VERSIONS_LIMIT = 20;
@@ -2909,38 +2988,52 @@ class PackageVersionsListComponent {
                 ? null
                 : this.acknowledgeLimitReached.bind(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsListComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.PluginsService }, { token: i1.EcosystemService }, { token: i4$1.TranslateService }, { token: i2.ModalService }, { token: i2.AlertService }, { token: i2.OptionsService }, { token: i2.Permissions }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageVersionsListComponent, selector: "c8y-package-versions-list", outputs: { onVersionSelect: "onVersionSelect" }, ngImport: i0, template: "<div class=\"inner-scroll split-view__list\">\n  <div class=\"card-header separator sticky-top bg-component\">\n    <div class=\"card-title\" translate>Versions</div>\n  </div>\n\n  <div class=\"bg-level-1 flex-grow\">\n    <div class=\"p-16\" *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <ul class=\"nav c8y-nav-stacked\" *ngIf=\"!isLoading\">\n      <li\n        class=\"c8y-stacked-item p-t-0 p-b-0 p-r-4\"\n        [ngClass]=\"{ active: selectedVersion === applicationVersion.version }\"\n        *ngFor=\"let applicationVersion of sortedVersions\"\n      >\n        <div\n          class=\"flex-grow d-flex a-i-center gap-4 p-t-8 p-b-8\"\n          (click)=\"selectVersion(applicationVersion.version)\"\n        >\n          <i c8yIcon=\"big-parcel\" class=\"icon-20\"></i>\n          <span class=\"text-label-small\">\n            {{ 'Version' | translate }}\n          </span>\n          <span class=\"text-medium\">{{ applicationVersion.version }}</span>\n          <div class=\"text-truncate d-flex j-c-end flex-grow gap-4 flex-wrap m-l-auto\">\n            <span *ngFor=\"let tag of applicationVersion.tags\" class=\"label label-info\">\n              {{ tag }}\n            </span>\n          </div>\n        </div>\n        <div class=\"dropdown\" dropdown *ngIf=\"hasAdminPermissions && isPackageOwnedByCurrentTenant\">\n          <button\n            class=\"dropdown-toggle c8y-dropdown\"\n            type=\"button\"\n            title=\"{{ 'Settings' | translate }}\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"ellipsis-v\"></i>\n          </button>\n          <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Set as latest`version`' | translate }}\"\n                (click)=\"setVersionAsLatest(applicationVersion)\"\n                [disabled]=\"applicationVersion.tags?.includes('latest')\"\n              >\n                <i c8yIcon=\"collect\" class=\"m-r-4\"></i>\n                {{ 'Set as latest`version`' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Download' | translate }}\"\n                (click)=\"downloadArchive(applicationVersion)\"\n              >\n                <i c8yIcon=\"download\" class=\"m-r-4\"></i>\n                {{ 'Download' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Delete' | translate }}\"\n                (click)=\"removeVersionPackage(applicationVersion.version)\"\n                [disabled]=\"applicationVersion.tags?.includes('latest')\"\n              >\n                <i c8yIcon=\"trash\" class=\"m-r-4\"></i>\n                {{ 'Delete' | translate }}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </li>\n    </ul>\n  </div>\n\n  <div\n    class=\"card-footer separator sticky-bottom\"\n    *ngIf=\"!isLoading && isPackageOwnedByCurrentTenant\"\n  >\n    <div class=\"form-group m-b-0\">\n      <label translate>Upload a new version</label>\n      <c8y-upload-archive\n        [(application)]=\"package\"\n        [uploadNewVersion]=\"true\"\n        (refresh)=\"packageVersionUploaded()\"\n        [preUploadCallback]=\"preUploadCallback\"\n      ></c8y-upload-archive>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i1.UploadArchiveComponent, selector: "c8y-upload-archive", inputs: ["application", "uploadNewVersion", "preUploadCallback"], outputs: ["applicationChange", "refresh"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsListComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.PluginsService }, { token: i1.EcosystemService }, { token: i6.TranslateService }, { token: i2.ModalService }, { token: i2.AlertService }, { token: i2.OptionsService }, { token: i2.Permissions }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageVersionsListComponent, selector: "c8y-package-versions-list", outputs: { onVersionSelect: "onVersionSelect" }, ngImport: i0, template: "<div class=\"inner-scroll split-view__list\">\n  <div class=\"card-header separator sticky-top bg-component\">\n    <div class=\"card-title\" translate>Versions</div>\n  </div>\n\n  <div class=\"bg-level-1 flex-grow\">\n    <div class=\"p-16\" *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <ul class=\"nav c8y-nav-stacked\" *ngIf=\"!isLoading\">\n      <li\n        class=\"c8y-stacked-item p-t-0 p-b-0 p-r-4\"\n        [ngClass]=\"{ active: selectedVersion === applicationVersion.version }\"\n        *ngFor=\"let applicationVersion of sortedVersions\"\n      >\n        <div\n          class=\"flex-grow d-flex a-i-center gap-4 p-t-8 p-b-8\"\n          (click)=\"selectVersion(applicationVersion.version)\"\n        >\n          <i c8yIcon=\"big-parcel\" class=\"icon-20\"></i>\n          <span class=\"text-label-small\">\n            {{ 'Version' | translate }}\n          </span>\n          <span class=\"text-medium\">{{ applicationVersion.version }}</span>\n          <div class=\"text-truncate d-flex j-c-end flex-grow gap-4 flex-wrap m-l-auto\">\n            <span *ngFor=\"let tag of applicationVersion.tags\" class=\"label label-info\">\n              {{ tag }}\n            </span>\n          </div>\n        </div>\n        <div class=\"dropdown\" dropdown *ngIf=\"hasAdminPermissions && isPackageOwnedByCurrentTenant\">\n          <button\n            class=\"dropdown-toggle c8y-dropdown\"\n            type=\"button\"\n            title=\"{{ 'Settings' | translate }}\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"ellipsis-v\"></i>\n          </button>\n          <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Set as latest`version`' | translate }}\"\n                (click)=\"setVersionAsLatest(applicationVersion)\"\n                [disabled]=\"applicationVersion.tags?.includes('latest')\"\n              >\n                <i c8yIcon=\"collect\" class=\"m-r-4\"></i>\n                {{ 'Set as latest`version`' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Download' | translate }}\"\n                (click)=\"downloadArchive(applicationVersion)\"\n              >\n                <i c8yIcon=\"download\" class=\"m-r-4\"></i>\n                {{ 'Download' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Delete' | translate }}\"\n                (click)=\"removeVersionPackage(applicationVersion.version)\"\n                [disabled]=\"applicationVersion.tags?.includes('latest')\"\n              >\n                <i c8yIcon=\"trash\" class=\"m-r-4\"></i>\n                {{ 'Delete' | translate }}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </li>\n    </ul>\n  </div>\n\n  <div\n    class=\"card-footer separator sticky-bottom\"\n    *ngIf=\"!isLoading && isPackageOwnedByCurrentTenant\"\n  >\n    <div class=\"form-group m-b-0\">\n      <label translate>Upload a new version</label>\n      <c8y-upload-archive\n        [(application)]=\"package\"\n        [uploadNewVersion]=\"true\"\n        (refresh)=\"packageVersionUploaded()\"\n        [preUploadCallback]=\"preUploadCallback\"\n      ></c8y-upload-archive>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i6$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6$1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i1.UploadArchiveComponent, selector: "c8y-upload-archive", inputs: ["application", "uploadNewVersion", "preUploadCallback"], outputs: ["applicationChange", "refresh"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-package-versions-list', template: "<div class=\"inner-scroll split-view__list\">\n  <div class=\"card-header separator sticky-top bg-component\">\n    <div class=\"card-title\" translate>Versions</div>\n  </div>\n\n  <div class=\"bg-level-1 flex-grow\">\n    <div class=\"p-16\" *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <ul class=\"nav c8y-nav-stacked\" *ngIf=\"!isLoading\">\n      <li\n        class=\"c8y-stacked-item p-t-0 p-b-0 p-r-4\"\n        [ngClass]=\"{ active: selectedVersion === applicationVersion.version }\"\n        *ngFor=\"let applicationVersion of sortedVersions\"\n      >\n        <div\n          class=\"flex-grow d-flex a-i-center gap-4 p-t-8 p-b-8\"\n          (click)=\"selectVersion(applicationVersion.version)\"\n        >\n          <i c8yIcon=\"big-parcel\" class=\"icon-20\"></i>\n          <span class=\"text-label-small\">\n            {{ 'Version' | translate }}\n          </span>\n          <span class=\"text-medium\">{{ applicationVersion.version }}</span>\n          <div class=\"text-truncate d-flex j-c-end flex-grow gap-4 flex-wrap m-l-auto\">\n            <span *ngFor=\"let tag of applicationVersion.tags\" class=\"label label-info\">\n              {{ tag }}\n            </span>\n          </div>\n        </div>\n        <div class=\"dropdown\" dropdown *ngIf=\"hasAdminPermissions && isPackageOwnedByCurrentTenant\">\n          <button\n            class=\"dropdown-toggle c8y-dropdown\"\n            type=\"button\"\n            title=\"{{ 'Settings' | translate }}\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"ellipsis-v\"></i>\n          </button>\n          <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Set as latest`version`' | translate }}\"\n                (click)=\"setVersionAsLatest(applicationVersion)\"\n                [disabled]=\"applicationVersion.tags?.includes('latest')\"\n              >\n                <i c8yIcon=\"collect\" class=\"m-r-4\"></i>\n                {{ 'Set as latest`version`' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Download' | translate }}\"\n                (click)=\"downloadArchive(applicationVersion)\"\n              >\n                <i c8yIcon=\"download\" class=\"m-r-4\"></i>\n                {{ 'Download' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                type=\"button\"\n                title=\"{{ 'Delete' | translate }}\"\n                (click)=\"removeVersionPackage(applicationVersion.version)\"\n                [disabled]=\"applicationVersion.tags?.includes('latest')\"\n              >\n                <i c8yIcon=\"trash\" class=\"m-r-4\"></i>\n                {{ 'Delete' | translate }}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </li>\n    </ul>\n  </div>\n\n  <div\n    class=\"card-footer separator sticky-bottom\"\n    *ngIf=\"!isLoading && isPackageOwnedByCurrentTenant\"\n  >\n    <div class=\"form-group m-b-0\">\n      <label translate>Upload a new version</label>\n      <c8y-upload-archive\n        [(application)]=\"package\"\n        [uploadNewVersion]=\"true\"\n        (refresh)=\"packageVersionUploaded()\"\n        [preUploadCallback]=\"preUploadCallback\"\n      ></c8y-upload-archive>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.PluginsService }, { type: i1.EcosystemService }, { type: i4$1.TranslateService }, { type: i2.ModalService }, { type: i2.AlertService }, { type: i2.OptionsService }, { type: i2.Permissions }, { type: i2.GainsightService }], propDecorators: { onVersionSelect: [{
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.PluginsService }, { type: i1.EcosystemService }, { type: i6.TranslateService }, { type: i2.ModalService }, { type: i2.AlertService }, { type: i2.OptionsService }, { type: i2.Permissions }, { type: i2.GainsightService }], propDecorators: { onVersionSelect: [{
                 type: Output
             }] } });
 
 class PackageVersionsComponent {
-    constructor(activatedRoute, contextRouteService) {
+    constructor(activatedRoute, contextRouteService, pluginsService) {
         this.activatedRoute = activatedRoute;
         this.contextRouteService = contextRouteService;
+        this.pluginsService = pluginsService;
         this.package = {};
+        this.packageContentsTitle = gettext('Version {{ selectedVersion }} package contents');
     }
     async ngOnInit() {
         this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
     }
+    async showPluginOverview(plugin) {
+        this.selectedPlugin = plugin;
+        const baseUrl = `/apps/${plugin.id}/`;
+        this.pluginBaseUrl = baseUrl;
+        this.pluginMarkdown = await this.pluginsService.getReadmeFileContent(baseUrl);
+    }
+    closeOverview() {
+        this.selectedPlugin = null;
+    }
     clearSelectedVersion() {
         this.selectedVersion = null;
     }
     selectVersion(version) {
-        this.selectedVersion = version;
+        if (this.selectedVersion !== version) {
+            this.selectedVersion = version;
+            this.closeOverview();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageVersionsComponent, selector: "c8y-package-versions", ngImport: i0, template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Versions' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-package-versions-list\n    class=\"d-contents\"\n    (onVersionSelect)=\"selectVersion($event)\"\n  ></c8y-package-versions-list>\n\n  <div\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedVersion }\"\n  >\n    <div class=\"large-padding card-header separator visible-sm visible-xs fit-w sticky-top\">\n      <div class=\"d-flex a-i-center\">\n        <button\n          title=\"{{ 'Back' | translate }}\"\n          class=\"btn btn-clean text-primary m-r-8\"\n          (click)=\"clearSelectedVersion()\"\n        >\n          <i c8yIcon=\"chevron-left\"></i>\n          <span translate>Back</span>\n        </button>\n        <div class=\"card-title\" translate>Package contents</div>\n      </div>\n    </div>\n    <div class=\"card-header large-padding separator sticky-top visible-md visible-lg\">\n      <div class=\"card-title\" translate>Package contents</div>\n    </div>\n    <div class=\"inner-scroll split-view__list\">\n      <c8y-package-contents [selectedVersion]=\"selectedVersion\"></c8y-package-contents>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: PackageContentsComponent, selector: "c8y-package-contents", inputs: ["selectedVersion"] }, { kind: "component", type: PackageVersionsListComponent, selector: "c8y-package-versions-list", outputs: ["onVersionSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.ContextRouteService }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageVersionsComponent, selector: "c8y-package-versions", ngImport: i0, template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Versions' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div\n  class=\"card content-fullpage d-grid\"\n  [ngClass]=\"{ 'grid__col--6-6-0': !selectedPlugin, 'grid__col--0-6-6': !!selectedPlugin }\"\n>\n  <c8y-package-versions-list\n    class=\"d-contents\"\n    (onVersionSelect)=\"selectVersion($event)\"\n  ></c8y-package-versions-list>\n\n  <!-- Package contents -->\n  <div\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedVersion }\"\n  >\n    <div class=\"large-padding card-header separator visible-sm visible-xs fit-w sticky-top\">\n      <div class=\"d-flex a-i-center\">\n        <button\n          class=\"btn-clean text-primary m-r-8\"\n          title=\"{{ 'Back' | translate }}\"\n          (click)=\"clearSelectedVersion()\"\n        >\n          <i c8yIcon=\"chevron-left\"></i>\n          <span translate>Back</span>\n        </button>\n        <div\n          class=\"card-title\"\n          translate\n        >\n          {{ packageContentsTitle | translate: { selectedVersion } }}\n        </div>\n      </div>\n    </div>\n    <div class=\"card-header large-padding separator sticky-top visible-md visible-lg\">\n      <div class=\"card-title\">\n        <ng-container *ngIf=\"selectedVersion\">\n          {{ packageContentsTitle | translate: { selectedVersion } }}\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"inner-scroll split-view__list\">\n      <c8y-package-contents\n        [selectedVersion]=\"selectedVersion\"\n        [selectedPlugin]=\"selectedPlugin\"\n        (showOverview)=\"showPluginOverview($event)\"\n      ></c8y-package-contents>\n    </div>\n  </div>\n\n  <!-- Plugin readme -->\n  <div\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedPlugin }\"\n  >\n    <div\n      class=\"card-header separator sticky-top\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <button\n        class=\"btn-clean\"\n        (click)=\"closeOverview()\"\n      >\n        <i c8yIcon=\"caret-back\"></i>\n        {{ 'Back to package versions overview ' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"card-block p-l-16 p-r-16 overflow-visible\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <div\n        class=\"markdown-content\"\n        *ngIf=\"pluginMarkdown\"\n        [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n      ></div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found for plugin' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'\n            | translate\n        \"\n        *ngIf=\"!pluginMarkdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: PackageContentsComponent, selector: "c8y-package-contents", inputs: ["selectedVersion", "selectedPlugin"], outputs: ["showOverview"] }, { kind: "component", type: PackageVersionsListComponent, selector: "c8y-package-versions-list", outputs: ["onVersionSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i2.MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageVersionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-package-versions', template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Versions' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-package-versions-list\n    class=\"d-contents\"\n    (onVersionSelect)=\"selectVersion($event)\"\n  ></c8y-package-versions-list>\n\n  <div\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedVersion }\"\n  >\n    <div class=\"large-padding card-header separator visible-sm visible-xs fit-w sticky-top\">\n      <div class=\"d-flex a-i-center\">\n        <button\n          title=\"{{ 'Back' | translate }}\"\n          class=\"btn btn-clean text-primary m-r-8\"\n          (click)=\"clearSelectedVersion()\"\n        >\n          <i c8yIcon=\"chevron-left\"></i>\n          <span translate>Back</span>\n        </button>\n        <div class=\"card-title\" translate>Package contents</div>\n      </div>\n    </div>\n    <div class=\"card-header large-padding separator sticky-top visible-md visible-lg\">\n      <div class=\"card-title\" translate>Package contents</div>\n    </div>\n    <div class=\"inner-scroll split-view__list\">\n      <c8y-package-contents [selectedVersion]=\"selectedVersion\"></c8y-package-contents>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.ContextRouteService }] });
+            args: [{ selector: 'c8y-package-versions', template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Versions' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div\n  class=\"card content-fullpage d-grid\"\n  [ngClass]=\"{ 'grid__col--6-6-0': !selectedPlugin, 'grid__col--0-6-6': !!selectedPlugin }\"\n>\n  <c8y-package-versions-list\n    class=\"d-contents\"\n    (onVersionSelect)=\"selectVersion($event)\"\n  ></c8y-package-versions-list>\n\n  <!-- Package contents -->\n  <div\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedVersion }\"\n  >\n    <div class=\"large-padding card-header separator visible-sm visible-xs fit-w sticky-top\">\n      <div class=\"d-flex a-i-center\">\n        <button\n          class=\"btn-clean text-primary m-r-8\"\n          title=\"{{ 'Back' | translate }}\"\n          (click)=\"clearSelectedVersion()\"\n        >\n          <i c8yIcon=\"chevron-left\"></i>\n          <span translate>Back</span>\n        </button>\n        <div\n          class=\"card-title\"\n          translate\n        >\n          {{ packageContentsTitle | translate: { selectedVersion } }}\n        </div>\n      </div>\n    </div>\n    <div class=\"card-header large-padding separator sticky-top visible-md visible-lg\">\n      <div class=\"card-title\">\n        <ng-container *ngIf=\"selectedVersion\">\n          {{ packageContentsTitle | translate: { selectedVersion } }}\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"inner-scroll split-view__list\">\n      <c8y-package-contents\n        [selectedVersion]=\"selectedVersion\"\n        [selectedPlugin]=\"selectedPlugin\"\n        (showOverview)=\"showPluginOverview($event)\"\n      ></c8y-package-contents>\n    </div>\n  </div>\n\n  <!-- Plugin readme -->\n  <div\n    class=\"inner-scroll split-view__detail\"\n    [ngClass]=\"{ 'split-view__detail--selected': selectedPlugin }\"\n  >\n    <div\n      class=\"card-header separator sticky-top\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <button\n        class=\"btn-clean\"\n        (click)=\"closeOverview()\"\n      >\n        <i c8yIcon=\"caret-back\"></i>\n        {{ 'Back to package versions overview ' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"card-block p-l-16 p-r-16 overflow-visible\"\n      *ngIf=\"selectedPlugin\"\n    >\n      <div\n        class=\"markdown-content\"\n        *ngIf=\"pluginMarkdown\"\n        [innerHTML]=\"pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async\"\n      ></div>\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found for plugin' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'\n            | translate\n        \"\n        *ngIf=\"!pluginMarkdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.ContextRouteService }, { type: i2.PluginsService }] });
 
 class PackageGuard {
     constructor(ecosystemService) {
@@ -2960,6 +3053,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1.EcosystemService }] });
 
+class PackageChangelogTabComponent {
+    constructor(activatedRoute, contextRouteService) {
+        this.activatedRoute = activatedRoute;
+        this.contextRouteService = contextRouteService;
+        this.package = {};
+    }
+    async ngOnInit() {
+        this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogTabComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PackageChangelogTabComponent, isStandalone: true, selector: "c8y-package-changelog-tab", ngImport: i0, template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Change logs' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-contents-changelog [package]=\"package\"></c8y-contents-changelog>\n", dependencies: [{ kind: "component", type: PackageChangelogComponent, selector: "c8y-contents-changelog", inputs: ["package", "selectedVersion", "previousVersion"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-package-changelog-tab', standalone: true, imports: [
+                        PackageChangelogComponent,
+                        TitleComponent,
+                        HumanizeAppNamePipe,
+                        BreadcrumbComponent,
+                        BreadcrumbItemComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"package?.name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Change logs' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-contents-changelog [package]=\"package\"></c8y-contents-changelog>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2.ContextRouteService }] });
+
+class PackageChangelogGuard {
+    constructor() {
+        this.pluginsService = inject(PluginsService);
+        this.router = inject(Router);
+    }
+    async canActivate(route) {
+        const app = route.data.contextData || route.parent.data.contextData;
+        const packageChangelogUrl = `/apps/${app.contextPath}/`;
+        const changelog = await this.pluginsService.getChangelogFileContent(packageChangelogUrl);
+        return !!changelog;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogGuard }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PackageChangelogGuard, decorators: [{
+            type: Injectable
+        }] });
+
 const ecosystemMainRoutes = [
     {
         path: 'ecosystem/application',
@@ -3032,9 +3168,18 @@ const applicationDetailsRoutes = [
         icon: 'c8y-modules',
         label: gettext('Versions'),
         context: ViewContext.Extension,
-        priority: 1,
+        priority: 5,
         canActivate: [PackageGuard, PackageVersionsGuard]
     },
+    {
+        path: 'package-changelog',
+        component: PackageChangelogTabComponent,
+        icon: 'list',
+        label: gettext('Change log'),
+        context: ViewContext.Extension,
+        priority: 1,
+        canActivate: [PackageGuard, PackageChangelogGuard]
+    },
     {
         path: 'properties',
         component: ApplicationPropertiesComponent,
@@ -3076,13 +3221,15 @@ class EcosystemModule {
             LicenseConfirmModule,
             IconSelectorModule,
             A11yModule,
-            ArchivedConfirmModule], exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent] }); }
+            ArchivedConfirmModule,
+            PackageChangelogTabComponent], exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EcosystemModule, providers: [
             hookTab(EcosystemTabs),
             hookNavigator(EcosystemNavigationFactory),
             hookRoute(applicationDetailsRoutes),
             PackageGuard,
             PackageVersionsGuard,
+            PackageChangelogGuard,
             ApplicationPropertiesGuard,
             hookWizard({
                 wizardId: EcosystemWizards.APPLICATION_UPLOAD,
@@ -3130,7 +3277,8 @@ class EcosystemModule {
             LicenseConfirmModule,
             IconSelectorModule,
             A11yModule,
-            ArchivedConfirmModule] }); }
+            ArchivedConfirmModule,
+            PackageChangelogTabComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EcosystemModule, decorators: [{
             type: NgModule,
@@ -3170,7 +3318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LicenseConfirmModule,
                         IconSelectorModule,
                         A11yModule,
-                        ArchivedConfirmModule
+                        ArchivedConfirmModule,
+                        PackageChangelogTabComponent
                     ],
                     exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent],
                     providers: [
@@ -3179,6 +3328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         hookRoute(applicationDetailsRoutes),
                         PackageGuard,
                         PackageVersionsGuard,
+                        PackageChangelogGuard,
                         ApplicationPropertiesGuard,
                         hookWizard({
                             wizardId: EcosystemWizards.APPLICATION_UPLOAD,