@c8y/ngx-components 1021.38.1 → 1021.49.4

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { Component, Input, Pipe, EventEmitter, Output, ViewChild, Injectable, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
-import { gettext, Status, PluginsService, PluginsExportScopes, Permissions, ViewContext, C8yStepper, PackageType, ApplicationPluginStatus, DataGridComponent, CoreModule, hookRoute, FormsModule, hookTab, hookNavigator, hookWizard } 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 * as i1 from '@c8y/ngx-components/ecosystem/shared';
-import { PRODUCT_EXPERIENCE_ECOSYSTEM, packageProperties, defaultPackageAvailabilities, EcosystemWizards, ListFiltersComponent, ApplicationPropertiesFormComponent, ERROR_TYPE, APP_STATE, PACKAGE_TYPE_LABELS, defaultPackageTypes, defaultPackageContents, SharedEcosystemModule } 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 * as i3 from '@angular/common';
-import * as i3$1 from '@angular/forms';
-import { Validators, ReactiveFormsModule } from '@angular/forms';
+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 * as i4 from '@c8y/client';
@@ -14,18 +14,19 @@ import { ApplicationType, Isolation, BillingMode } from '@c8y/client';
 import * as i4$1 from '@ngx-translate/core';
 import * as i1$1 from 'ngx-bootstrap/modal';
 import { isEmpty } from 'lodash';
-import { Subject, BehaviorSubject, combineLatest, of, firstValueFrom, from } from 'rxjs';
+import { Subject, BehaviorSubject, combineLatest, of, firstValueFrom, from, map as map$1 } from 'rxjs';
 import { map, takeUntil, tap, switchMap, shareReplay } from 'rxjs/operators';
 import { pick, uniq } from 'lodash-es';
 import * as i9 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i10 from '@c8y/ngx-components/icon-selector';
 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 { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import { LicenseConfirmModule } from '@c8y/ngx-components/ecosystem/license-confirm';
-import { A11yModule } from '@angular/cdk/a11y';
 
 class ActivityLogComponent {
     constructor(ecosystemService, alertService) {
@@ -287,7 +288,7 @@ class AppsToUpdateRemotesSelectComponent {
         return (await this.ecosystemService.getWebApplications()).filter(app => this.ecosystemService.isOwner(app) && app.type !== ApplicationType.EXTERNAL);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppsToUpdateRemotesSelectComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.WizardModalService }, { token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppsToUpdateRemotesSelectComponent, selector: "c8y-apps-to-update-remotes-select", inputs: { apps: "apps", updateType: "updateType", pluginName: "pluginName", appsDisabled: "appsDisabled" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <div class=\"modal-title h4\" id=\"modal-title\" translate>Custom applications</div>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium\">\n        {{ textConfig.header | translate }}\n      </p>\n      <c8y-filter (onSearch)=\"filterTerm$.next($event)\"></c8y-filter>\n    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li\n        [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\"\n        *ngFor=\"let app of filteredApps$ | async\"\n        data-cy=\"apps-to-update-remotes-select--applications-list\"\n      >\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\" data-cy=\"apps-to-update-remotes-select--app-checkbox\"></c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            class=\"list-group-icon\"\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p class=\"text-medium\" [innerText]=\"app | humanizeAppName | async\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span class=\"label m-l-auto a-s-start\" [ngClass]=\"app | appState: 'class'\">\n            {{ app | appState: 'label' | translate }}\n          </span>\n        </div>\n      </c8y-li>\n    </c8y-list-group>\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=\"{{ textConfig.applyButton | translate }}\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      (click)=\"apply()\"\n    >\n      {{ textConfig.applyButton | translate }}\n    </button>\n  </div>\n</div>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-modules'\"\n    [title]=\"'No custom applications available.' | translate\"\n    *ngIf=\"updateType !== 'install'\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n  <ng-container *ngIf=\"updateType === 'install'\">\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-modules'\"\n      [title]=\"'No custom applications available.' | translate\"\n      [subtitle]=\"'Create a custom application by duplicating an existing one.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <button\n        class=\"btn btn-sm btn-default m-t-8\"\n        title=\"{{ 'Duplicate' | translate }}\"\n        (click)=\"duplicateApp()\"\n      >\n        {{ 'Duplicate' | translate }}\n      </button>\n    </c8y-ui-empty-state>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { 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.FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { 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.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AppStatePipe, name: "appState" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppsToUpdateRemotesSelectComponent, selector: "c8y-apps-to-update-remotes-select", inputs: { apps: "apps", updateType: "updateType", pluginName: "pluginName", appsDisabled: "appsDisabled" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <div class=\"modal-title h4\" id=\"modal-title\" translate>Custom applications</div>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium\">\n        {{ textConfig.header | translate }}\n      </p>\n      <c8y-filter (onSearch)=\"filterTerm$.next($event)\"></c8y-filter>\n    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li\n        [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\"\n        *ngFor=\"let app of filteredApps$ | async\"\n        data-cy=\"apps-to-update-remotes-select--applications-list\"\n      >\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\" data-cy=\"apps-to-update-remotes-select--app-checkbox\"></c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            class=\"list-group-icon\"\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p class=\"text-medium\" [innerText]=\"app | humanizeAppName | async\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span class=\"label m-l-auto a-s-start\" [ngClass]=\"app | appState: 'class'\">\n            {{ app | appState: 'label' | translate }}\n          </span>\n        </div>\n      </c8y-li>\n    </c8y-list-group>\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=\"{{ textConfig.applyButton | translate }}\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      (click)=\"apply()\"\n    >\n      {{ textConfig.applyButton | translate }}\n    </button>\n  </div>\n</div>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-modules'\"\n    [title]=\"'No custom applications available.' | translate\"\n    *ngIf=\"updateType !== 'install'\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n  <ng-container *ngIf=\"updateType === 'install'\">\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-modules'\"\n      [title]=\"'No custom applications available.' | translate\"\n      [subtitle]=\"'Create a custom application by duplicating an existing one.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <button\n        class=\"btn btn-sm btn-default m-t-8\"\n        title=\"{{ 'Duplicate' | translate }}\"\n        (click)=\"duplicateApp()\"\n      >\n        {{ 'Duplicate' | translate }}\n      </button>\n    </c8y-ui-empty-state>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { 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.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { 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.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AppStatePipe, name: "appState" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppsToUpdateRemotesSelectComponent, decorators: [{
             type: Component,
@@ -303,21 +304,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class PluginListItemComponent {
-    constructor() {
+    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.9", ngImport: i0, type: PluginListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div>\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=\"label label-info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginListItemComponent, deps: [{ token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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.9", 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\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div>\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=\"label label-info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n</div>\n" }]
-        }], propDecorators: { plugin: [{
+            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
@@ -389,6 +396,11 @@ class PluginListComponent {
             // unreached
         }
         if (updateType === 'install') {
+            const isArchived = await this.ecosystemService.verifyArchived([plugin]);
+            if (!isArchived) {
+                this.updatingPluginId[updateType] = '';
+                return;
+            }
             const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses([plugin]);
             if (!licensesVerifiedByUser) {
                 this.updatingPluginId[updateType] = '';
@@ -414,17 +426,12 @@ class PluginListComponent {
                 this.onUpdateEventHandleGS(plugin, app, updateType);
             }
             catch (error) {
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                    url: this.CURRENT_LOCATION,
-                    error
-                });
+                this.onUpdateEventHandleGS(plugin, app, updateType, error);
             }
         }
         this.updatingPluginId[updateType] = '';
     }
-    onUpdateEventHandleGS(plugin, app, updateType) {
+    onUpdateEventHandleGS(plugin, app, updateType, error) {
         const pluginCustomEventInfo = pick(plugin, [
             'name',
             'contextPath',
@@ -436,14 +443,16 @@ class PluginListComponent {
         const gsEventResult = updateType === 'install'
             ? PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_INSTALLED
             : PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_REMOVED;
-        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
+        const eventData = {
             component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
-            result: gsEventResult,
+            result: error || gsEventResult,
             url: this.CURRENT_LOCATION,
             ...pluginCustomEventInfo,
             targetApplicationName: app.name,
-            targetApplicationContextPath: app.contextPath
-        });
+            targetApplicationContextPath: app.contextPath,
+            ...(error && { error })
+        };
+        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);
@@ -966,13 +975,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.9", ngImport: i0, type: ApplicationPropertiesComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$2.Router }, { token: i3$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$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: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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.9", 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: i3$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: i4$1.TranslateService }, { type: i1$1.BsModalService }, { type: i2.GainsightService }] });
 
 class ApplicationPropertiesGuard {
     constructor(ecosystemService) {
@@ -1033,13 +1042,13 @@ class AddExternalApplicationComponent {
             externalUrl: ['', Validators.required]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddExternalApplicationComponent, deps: [{ token: i4.ApplicationService }, { token: i3$1.FormBuilder }, { token: i2.AlertService }, { token: i2.WizardComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddExternalApplicationComponent, selector: "c8y-add-external-application", ngImport: i0, template: "<form *ngIf=\"!createdApp; else appCreated\" [formGroup]=\"formGroup\" novalidate>\n  <c8y-wizard-header>\n    <i [c8yIcon]=\"'cloud-link'\"></i>\n    <h4 translate id=\"modal-title\">Add external application</h4>\n  </c8y-wizard-header>\n\n  <c8y-wizard-body>\n    <p class=\"p-16 text-medium text-center bg-level-0 separator-bottom sticky-top\">\n      {{ 'Provide external application details' | translate }}\n    </p>\n    <div class=\"modal-body p-t-8\" id=\"modal-body\">\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Name' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"name\"\n          name=\"name\"\n          placeholder=\"{{ 'e.g. My application' | translate }}\"\n          required\n          type=\"text\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Application key' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"key\"\n          name=\"key\"\n          placeholder=\"{{ 'e.g. my-external-application-key' | translate }}\"\n          required\n          type=\"text\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'External URL' | translate }}</label>\n        <input\n          [pattern]=\"'^(?!javascript:).+'\"\n          class=\"form-control\"\n          formControlName=\"externalUrl\"\n          name=\"externalUrl\"\n          placeholder=\"{{ 'e.g.' | translate }} https://www.example.com\"\n          required\n          type=\"url\"\n        />\n      </c8y-form-group>\n    </div>\n  </c8y-wizard-body>\n\n  <c8y-wizard-footer>\n    <button\n      (click)=\"back()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Back' | translate }}\"\n      translate\n      type=\"button\"\n    >\n      Back\n    </button>\n    <button (click)=\"cancel()\" class=\"btn btn-default\" title=\"{{ 'Cancel' | translate }}\" translate>\n      Cancel\n    </button>\n    <button\n      (click)=\"save(formGroup.value)\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Add application' | translate }}\"\n      type=\"button\"\n    >\n      {{ 'Add application' | translate }}\n    </button>\n  </c8y-wizard-footer>\n</form>\n<ng-template #appCreated>\n  <c8y-wizard-body>\n    <div class=\"d-flex d-col j-c-center a-i-center\" style=\"min-height: 324px\">\n      <c8y-operation-result\n        text=\"{{ 'Application created' | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"success\"\n        class=\"lead\"\n      ></c8y-operation-result>\n    </div>\n  </c8y-wizard-body>\n  <c8y-wizard-footer>\n    <button (click)=\"done()\" class=\"btn btn-default\" title=\"{{ 'Done' | translate }}\" translate>\n      Done\n    </button>\n    <a\n      (click)=\"$event.stopPropagation()\"\n      [href]=\"formGroup.value.externalUrl\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Open' | translate }}\"\n    >\n      <i c8yIcon=\"external-link\" class=\"m-r-4\"></i>\n      {{ 'Open' | translate }}\n    </a>\n  </c8y-wizard-footer>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$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.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddExternalApplicationComponent, deps: [{ token: i4.ApplicationService }, { token: i2$1.FormBuilder }, { token: i2.AlertService }, { token: i2.WizardComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddExternalApplicationComponent, selector: "c8y-add-external-application", ngImport: i0, template: "<form *ngIf=\"!createdApp; else appCreated\" [formGroup]=\"formGroup\" novalidate>\n  <c8y-wizard-header>\n    <i [c8yIcon]=\"'cloud-link'\"></i>\n    <h4 translate id=\"modal-title\">Add external application</h4>\n  </c8y-wizard-header>\n\n  <c8y-wizard-body>\n    <p class=\"p-16 text-medium text-center bg-level-0 separator-bottom sticky-top\">\n      {{ 'Provide external application details' | translate }}\n    </p>\n    <div class=\"modal-body p-t-8\" id=\"modal-body\">\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Name' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"name\"\n          name=\"name\"\n          placeholder=\"{{ 'e.g. My application' | translate }}\"\n          required\n          type=\"text\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Application key' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"key\"\n          name=\"key\"\n          placeholder=\"{{ 'e.g. my-external-application-key' | translate }}\"\n          required\n          type=\"text\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'External URL' | translate }}</label>\n        <input\n          [pattern]=\"'^(?!javascript:).+'\"\n          class=\"form-control\"\n          formControlName=\"externalUrl\"\n          name=\"externalUrl\"\n          placeholder=\"{{ 'e.g.' | translate }} https://www.example.com\"\n          required\n          type=\"url\"\n        />\n      </c8y-form-group>\n    </div>\n  </c8y-wizard-body>\n\n  <c8y-wizard-footer>\n    <button\n      (click)=\"back()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Back' | translate }}\"\n      translate\n      type=\"button\"\n    >\n      Back\n    </button>\n    <button (click)=\"cancel()\" class=\"btn btn-default\" title=\"{{ 'Cancel' | translate }}\" translate>\n      Cancel\n    </button>\n    <button\n      (click)=\"save(formGroup.value)\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Add application' | translate }}\"\n      type=\"button\"\n    >\n      {{ 'Add application' | translate }}\n    </button>\n  </c8y-wizard-footer>\n</form>\n<ng-template #appCreated>\n  <c8y-wizard-body>\n    <div class=\"d-flex d-col j-c-center a-i-center\" style=\"min-height: 324px\">\n      <c8y-operation-result\n        text=\"{{ 'Application created' | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"success\"\n        class=\"lead\"\n      ></c8y-operation-result>\n    </div>\n  </c8y-wizard-body>\n  <c8y-wizard-footer>\n    <button (click)=\"done()\" class=\"btn btn-default\" title=\"{{ 'Done' | translate }}\" translate>\n      Done\n    </button>\n    <a\n      (click)=\"$event.stopPropagation()\"\n      [href]=\"formGroup.value.externalUrl\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Open' | translate }}\"\n    >\n      <i c8yIcon=\"external-link\" class=\"m-r-4\"></i>\n      {{ 'Open' | translate }}\n    </a>\n  </c8y-wizard-footer>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { 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.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: "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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddExternalApplicationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-add-external-application', template: "<form *ngIf=\"!createdApp; else appCreated\" [formGroup]=\"formGroup\" novalidate>\n  <c8y-wizard-header>\n    <i [c8yIcon]=\"'cloud-link'\"></i>\n    <h4 translate id=\"modal-title\">Add external application</h4>\n  </c8y-wizard-header>\n\n  <c8y-wizard-body>\n    <p class=\"p-16 text-medium text-center bg-level-0 separator-bottom sticky-top\">\n      {{ 'Provide external application details' | translate }}\n    </p>\n    <div class=\"modal-body p-t-8\" id=\"modal-body\">\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Name' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"name\"\n          name=\"name\"\n          placeholder=\"{{ 'e.g. My application' | translate }}\"\n          required\n          type=\"text\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Application key' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"key\"\n          name=\"key\"\n          placeholder=\"{{ 'e.g. my-external-application-key' | translate }}\"\n          required\n          type=\"text\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'External URL' | translate }}</label>\n        <input\n          [pattern]=\"'^(?!javascript:).+'\"\n          class=\"form-control\"\n          formControlName=\"externalUrl\"\n          name=\"externalUrl\"\n          placeholder=\"{{ 'e.g.' | translate }} https://www.example.com\"\n          required\n          type=\"url\"\n        />\n      </c8y-form-group>\n    </div>\n  </c8y-wizard-body>\n\n  <c8y-wizard-footer>\n    <button\n      (click)=\"back()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Back' | translate }}\"\n      translate\n      type=\"button\"\n    >\n      Back\n    </button>\n    <button (click)=\"cancel()\" class=\"btn btn-default\" title=\"{{ 'Cancel' | translate }}\" translate>\n      Cancel\n    </button>\n    <button\n      (click)=\"save(formGroup.value)\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Add application' | translate }}\"\n      type=\"button\"\n    >\n      {{ 'Add application' | translate }}\n    </button>\n  </c8y-wizard-footer>\n</form>\n<ng-template #appCreated>\n  <c8y-wizard-body>\n    <div class=\"d-flex d-col j-c-center a-i-center\" style=\"min-height: 324px\">\n      <c8y-operation-result\n        text=\"{{ 'Application created' | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"success\"\n        class=\"lead\"\n      ></c8y-operation-result>\n    </div>\n  </c8y-wizard-body>\n  <c8y-wizard-footer>\n    <button (click)=\"done()\" class=\"btn btn-default\" title=\"{{ 'Done' | translate }}\" translate>\n      Done\n    </button>\n    <a\n      (click)=\"$event.stopPropagation()\"\n      [href]=\"formGroup.value.externalUrl\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Open' | translate }}\"\n    >\n      <i c8yIcon=\"external-link\" class=\"m-r-4\"></i>\n      {{ 'Open' | translate }}\n    </a>\n  </c8y-wizard-footer>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i4.ApplicationService }, { type: i3$1.FormBuilder }, { type: i2.AlertService }, { type: i2.WizardComponent }] });
+        }], ctorParameters: () => [{ type: i4.ApplicationService }, { type: i2$1.FormBuilder }, { type: i2.AlertService }, { type: i2.WizardComponent }] });
 
 class AddWebApplicationComponent {
     constructor(ecosystemService) {
@@ -1185,6 +1194,11 @@ class InstallFromPackageComponent {
             type,
             version: this.model.selected.version
         };
+        const isArchived = await this.ecosystemService.verifyArchived([licensedApp]);
+        if (!isArchived) {
+            this.cancel();
+            return;
+        }
         const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses([licensedApp]);
         if (!licensesVerifiedByUser) {
             this.cancel();
@@ -1262,7 +1276,7 @@ class InstallFromPackageComponent {
         this.packages = applications.filter(app => this.ecosystemService.isPackageBlueprint(app));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InstallFromPackageComponent, deps: [{ token: i1.EcosystemService }, { token: i4.ApplicationService }, { token: i2.WizardComponent }, { token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InstallFromPackageComponent, selector: "c8y-install-from-package", viewQueries: [{ propertyName: "applicationPropertiesForm", first: true, predicate: ApplicationPropertiesFormComponent, descendants: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"'big-parcel'\"></i>\n  <h4\n    id=\"modal-title\"\n    translate\n  >\n    Install from extension package\n  </h4>\n</c8y-wizard-header>\n<c8y-wizard-body>\n  <ng-container *ngIf=\"!selectedPackage\">\n    <div\n      class=\"modal-inner-scroll\"\n      id=\"modal-body\"\n    >\n      <p class=\"p-16 text-medium text-center separator-bottom sticky-top bg-level-0\">\n        {{ 'Select from available extension packages' | translate }}\n      </p>\n\n      <c8y-ui-empty-state\n        [icon]=\"'big-parcel'\"\n        [title]=\"'No extension packages to display.' | translate\"\n        *ngIf=\"!packages?.length\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n\n      <div\n        class=\"c8y-wizard-list-nav\"\n        style=\"min-height: 257px\"\n        *ngIf=\"packages?.length\"\n      >\n        <button\n          class=\"list-group-item text-truncate\"\n          title=\"{{ package.name }}\"\n          type=\"button\"\n          *ngFor=\"let package of packages\"\n          (click)=\"selectPackage(package)\"\n        >\n          <i\n            class=\"list-group-icon\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <span [innerText]=\"package.name\"></span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!isDeployed && selectedPackage\">\n    <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-level-0\">\n      {{ 'Provide application details' | translate }}\n    </p>\n    <div\n      class=\"d-flex d-col a-i-center j-c-center\"\n      style=\"min-height: 257px\"\n    >\n      <c8y-application-properties-form\n        class=\"d-block fit-w\"\n        *ngIf=\"!inProgress\"\n        [application]=\"newAppConfig\"\n      ></c8y-application-properties-form>\n\n      <ng-container *ngIf=\"!inProgress\">\n        <div\n          class=\"d-block fit-w bg-gray-white\"\n          [ngStyle]=\"{ padding: '0 16px' }\"\n        >\n          <label\n            for=\"packageVersion\"\n            translate\n          >\n            Use extension package version\n          </label>\n          <c8y-form-group>\n            <c8y-typeahead\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              name=\"packageVersion\"\n              [(ngModel)]=\"model.selected\"\n              (onSearch)=\"onInput.next($event)\"\n              [displayProperty]=\"'version'\"\n              [required]=\"true\"\n              [hideNew]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *c8yFor=\"let version of versions$; loadMore: 'auto'; notFound: notFoundTemplate\"\n                (click)=\"onAppVersionSelect(version)\"\n                [active]=\"model.selected === version\"\n              >\n                <c8y-li-icon icon=\"big-parcel\"></c8y-li-icon>\n                <span\n                  [ngStyle]=\"{\n                    display: 'flex',\n                    'flex-direction': 'row',\n                    'align-content': 'center',\n                    'justify-content': 'space-between',\n                    'align-items': 'center'\n                  }\"\n                >\n                  <c8y-highlight\n                    [text]=\"version.version || '--'\"\n                    [pattern]=\"onInput | async\"\n                  ></c8y-highlight>\n\n                  <span>\n                    <span\n                      class=\"label label-info m-l-4\"\n                      *ngFor=\"let tag of version.tags\"\n                    >\n                      {{ tag }}\n                    </span>\n                  </span>\n                </span>\n              </c8y-li>\n              <ng-template #notFoundTemplate>\n                <c8y-li\n                  class=\"bg-gray-lighter p-8\"\n                  *ngIf=\"(onInput | async)?.length > 0 && (versions$ | async)?.data?.length === 0\"\n                >\n                  <span translate>No match found.</span>\n                </c8y-li>\n              </ng-template>\n            </c8y-typeahead>\n          </c8y-form-group>\n        </div>\n      </ng-container>\n\n      <c8y-loading\n        class=\"text-center d-block\"\n        [message]=\"'Installing\u2026' | translate\"\n        *ngIf=\"inProgress\"\n        layout=\"application\"\n      ></c8y-loading>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isDeployed\">\n    <div\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 257px\"\n      *ngIf=\"deployedWithSuccess; else failedDeploy\"\n    >\n      <c8y-operation-result\n        class=\"lead\"\n        type=\"success\"\n        text=\"{{ 'Application created' | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n      ></c8y-operation-result>\n    </div>\n    <ng-template #failedDeploy>\n      <div\n        class=\"d-flex a-i-center j-c-center\"\n        style=\"min-height: 257px\"\n      >\n        <c8y-operation-result\n          class=\"lead\"\n          type=\"error\"\n          text=\"{{ 'Application creation failed' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n        ></c8y-operation-result>\n      </div>\n    </ng-template>\n  </ng-container>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    type=\"button\"\n    *ngIf=\"!isDeployed\"\n    (click)=\"selectedPackage ? clean() : back()\"\n    [disabled]=\"inProgress\"\n  >\n    {{ 'Back' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\"\n    type=\"button\"\n    (click)=\"cancel()\"\n  >\n    {{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\n  </button>\n\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Install' | translate }}\"\n    type=\"button\"\n    (click)=\"deployApp()\"\n    [disabled]=\"inProgress || !packages?.length\"\n    *ngIf=\"!isDeployed\"\n  >\n    {{ 'Install' | translate }}\n  </button>\n</c8y-wizard-footer>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { 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.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { 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.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: "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.9", type: InstallFromPackageComponent, selector: "c8y-install-from-package", viewQueries: [{ propertyName: "applicationPropertiesForm", first: true, predicate: ApplicationPropertiesFormComponent, descendants: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"'big-parcel'\"></i>\n  <h4\n    id=\"modal-title\"\n    translate\n  >\n    Install from extension package\n  </h4>\n</c8y-wizard-header>\n<c8y-wizard-body>\n  <ng-container *ngIf=\"!selectedPackage\">\n    <div\n      class=\"modal-inner-scroll\"\n      id=\"modal-body\"\n    >\n      <p class=\"p-16 text-medium text-center separator-bottom sticky-top bg-level-0\">\n        {{ 'Select from available extension packages' | translate }}\n      </p>\n\n      <c8y-ui-empty-state\n        [icon]=\"'big-parcel'\"\n        [title]=\"'No extension packages to display.' | translate\"\n        *ngIf=\"!packages?.length\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n\n      <div\n        class=\"c8y-wizard-list-nav\"\n        style=\"min-height: 257px\"\n        *ngIf=\"packages?.length\"\n      >\n        <button\n          class=\"list-group-item text-truncate\"\n          title=\"{{ package.name }}\"\n          type=\"button\"\n          *ngFor=\"let package of packages\"\n          (click)=\"selectPackage(package)\"\n        >\n          <i\n            class=\"list-group-icon\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <span [innerText]=\"package.name\"></span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!isDeployed && selectedPackage\">\n    <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-level-0\">\n      {{ 'Provide application details' | translate }}\n    </p>\n    <div\n      class=\"d-flex d-col a-i-center j-c-center\"\n      style=\"min-height: 257px\"\n    >\n      <c8y-application-properties-form\n        class=\"d-block fit-w\"\n        *ngIf=\"!inProgress\"\n        [application]=\"newAppConfig\"\n      ></c8y-application-properties-form>\n\n      <ng-container *ngIf=\"!inProgress\">\n        <div\n          class=\"d-block fit-w bg-gray-white\"\n          [ngStyle]=\"{ padding: '0 16px' }\"\n        >\n          <label\n            for=\"packageVersion\"\n            translate\n          >\n            Use extension package version\n          </label>\n          <c8y-form-group>\n            <c8y-typeahead\n              placeholder=\"{{ 'Select or enter' | translate }}\"\n              name=\"packageVersion\"\n              [(ngModel)]=\"model.selected\"\n              (onSearch)=\"onInput.next($event)\"\n              [displayProperty]=\"'version'\"\n              [required]=\"true\"\n              [hideNew]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *c8yFor=\"let version of versions$; loadMore: 'auto'; notFound: notFoundTemplate\"\n                (click)=\"onAppVersionSelect(version)\"\n                [active]=\"model.selected === version\"\n              >\n                <c8y-li-icon icon=\"big-parcel\"></c8y-li-icon>\n                <span\n                  [ngStyle]=\"{\n                    display: 'flex',\n                    'flex-direction': 'row',\n                    'align-content': 'center',\n                    'justify-content': 'space-between',\n                    'align-items': 'center'\n                  }\"\n                >\n                  <c8y-highlight\n                    [text]=\"version.version || '--'\"\n                    [pattern]=\"onInput | async\"\n                  ></c8y-highlight>\n\n                  <span>\n                    <span\n                      class=\"label label-info m-l-4\"\n                      *ngFor=\"let tag of version.tags\"\n                    >\n                      {{ tag }}\n                    </span>\n                  </span>\n                </span>\n              </c8y-li>\n              <ng-template #notFoundTemplate>\n                <c8y-li\n                  class=\"bg-gray-lighter p-8\"\n                  *ngIf=\"(onInput | async)?.length > 0 && (versions$ | async)?.data?.length === 0\"\n                >\n                  <span translate>No match found.</span>\n                </c8y-li>\n              </ng-template>\n            </c8y-typeahead>\n          </c8y-form-group>\n        </div>\n      </ng-container>\n\n      <c8y-loading\n        class=\"text-center d-block\"\n        [message]=\"'Installing\u2026' | translate\"\n        *ngIf=\"inProgress\"\n        layout=\"application\"\n      ></c8y-loading>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isDeployed\">\n    <div\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 257px\"\n      *ngIf=\"deployedWithSuccess; else failedDeploy\"\n    >\n      <c8y-operation-result\n        class=\"lead\"\n        type=\"success\"\n        text=\"{{ 'Application created' | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n      ></c8y-operation-result>\n    </div>\n    <ng-template #failedDeploy>\n      <div\n        class=\"d-flex a-i-center j-c-center\"\n        style=\"min-height: 257px\"\n      >\n        <c8y-operation-result\n          class=\"lead\"\n          type=\"error\"\n          text=\"{{ 'Application creation failed' | translate }}\"\n          [size]=\"84\"\n          [vertical]=\"true\"\n        ></c8y-operation-result>\n      </div>\n    </ng-template>\n  </ng-container>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    type=\"button\"\n    *ngIf=\"!isDeployed\"\n    (click)=\"selectedPackage ? clean() : back()\"\n    [disabled]=\"inProgress\"\n  >\n    {{ 'Back' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\"\n    type=\"button\"\n    (click)=\"cancel()\"\n  >\n    {{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}\n  </button>\n\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Install' | translate }}\"\n    type=\"button\"\n    (click)=\"deployApp()\"\n    [disabled]=\"inProgress || !packages?.length\"\n    *ngIf=\"!isDeployed\"\n  >\n    {{ 'Install' | translate }}\n  </button>\n</c8y-wizard-footer>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { 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.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { 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.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InstallFromPackageComponent, decorators: [{
             type: Component,
@@ -1353,757 +1367,691 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Router }] });
 
-class FeatureListComponent {
-    constructor(ecosystemService) {
-        this.ecosystemService = ecosystemService;
-        this.reloading = false;
-        this.reload$ = new BehaviorSubject(null);
-        this.features$ = this.reload$.pipe(tap(() => (this.reloading = true)), switchMap(() => this.ecosystemService.getFeatureApplications()), tap(() => (this.reloading = false)), shareReplay());
-    }
-    ngOnInit() {
-        this.loadFeatures();
-    }
-    loadFeatures() {
-        this.reload$.next();
-    }
-    setFilterPipe(pipe) {
-        this.filteredFeatures$ = this.features$.pipe(src => pipe(src));
-    }
-    resetFilters() {
-        this.filtersComponent?.resetAllFilters();
+class OnlyLatestFilterComponent {
+    constructor(filterComponent) {
+        this.filterComponent = filterComponent;
+        this.filterLabel = gettext('Only latest versions');
+        this.onlyLatestFormControl = new FormControl(true);
+        this.filterComponent.formGroup.controls.custom.addControl(this.filterLabel, this.onlyLatestFormControl);
+        filterComponent.customFilters.set(this.filterLabel, (plugin, enabled) => {
+            return !enabled || !!plugin.tags?.includes('latest');
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FeatureListComponent, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FeatureListComponent, selector: "c8y-feature-list", viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: ListFiltersComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Features' | translate }}</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]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [icon]=\"'tab'\" [label]=\"'Features' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button (click)=\"reload$.next()\" class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\">\n    <i [ngClass]=\"{ 'icon-spin': reloading }\" c8yIcon=\"refresh\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"features$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(features$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div *ngIf=\"(features$ | async)?.length === 0\" class=\"c8y-empty-state text-center\">\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No features to display.</h3>\n  <p translate>No additional features are subscribed to the tenant.</p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(features$ | async)?.length > 0\">\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Feature' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n    </div>\n  </div>\n  <div *ngFor=\"let feature of filteredFeatures$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      [app]=\"feature\"\n      [canEdit]=\"false\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  *ngIf=\"(features$ | async)?.length > 0 && (filteredFeatures$ | async)?.length === 0\"\n  [icon]=\"'search'\"\n  [title]=\"'No matching features.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n>\n  <button\n    class=\"btn btn-primary\"\n    type=\"button\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\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: "component", type: i2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: i1.ApplicationCardComponent, selector: "c8y-application-card", inputs: ["app", "canEdit"], outputs: ["onAppDeleted", "onAppCloned"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { 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.9", ngImport: i0, type: OnlyLatestFilterComponent, deps: [{ token: i1.ListFiltersComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: OnlyLatestFilterComponent, selector: "c8y-only-latest-filter", ngImport: i0, template: "<label class=\"c8y-switch\">\n  <input\n    type=\"checkbox\"\n    checked=\"checked\"\n    [formControl]=\"onlyLatestFormControl\"\n  />\n  <span></span>\n  {{ 'Show only latest version of plugins' | translate }}\n</label>\n", dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FeatureListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-feature-list', template: "<c8y-title>{{ 'Features' | translate }}</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]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [icon]=\"'tab'\" [label]=\"'Features' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button (click)=\"reload$.next()\" class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\">\n    <i [ngClass]=\"{ 'icon-spin': reloading }\" c8yIcon=\"refresh\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"features$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(features$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div *ngIf=\"(features$ | async)?.length === 0\" class=\"c8y-empty-state text-center\">\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No features to display.</h3>\n  <p translate>No additional features are subscribed to the tenant.</p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(features$ | async)?.length > 0\">\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Feature' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n    </div>\n  </div>\n  <div *ngFor=\"let feature of filteredFeatures$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      [app]=\"feature\"\n      [canEdit]=\"false\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  *ngIf=\"(features$ | async)?.length > 0 && (filteredFeatures$ | async)?.length === 0\"\n  [icon]=\"'search'\"\n  [title]=\"'No matching features.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n>\n  <button\n    class=\"btn btn-primary\"\n    type=\"button\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\n" }]
-        }], ctorParameters: () => [{ type: i1.EcosystemService }], propDecorators: { filtersComponent: [{
-                type: ViewChild,
-                args: [ListFiltersComponent]
-            }] } });
+            args: [{ selector: 'c8y-only-latest-filter', template: "<label class=\"c8y-switch\">\n  <input\n    type=\"checkbox\"\n    checked=\"checked\"\n    [formControl]=\"onlyLatestFormControl\"\n  />\n  <span></span>\n  {{ 'Show only latest version of plugins' | translate }}\n</label>\n" }]
+        }], ctorParameters: () => [{ type: i1.ListFiltersComponent }] });
 
-class AddMicroserviceComponent {
-    constructor(ecosystemService, modal, tenantService, docs) {
+class InstallPluginComponent {
+    constructor(bsModalRef, ecosystemService) {
+        this.bsModalRef = bsModalRef;
         this.ecosystemService = ecosystemService;
-        this.modal = modal;
-        this.tenantService = tenantService;
-        this.docs = docs;
-        this.slaHref = this.docs.getUserGuideLink('docs/microservice-sdk/microservices-sla');
-        this.headerText = gettext('Add microservice');
-        this.successText = gettext('Microservice created');
-        this.createMicroserviceApplicationHandler = (f) => this.createMicroserviceApplication(f);
-        this.uploadMicroserviceHandler = (f, app) => this.uploadMicroservice(f, app);
-    }
-    async createMicroserviceApplication(file) {
-        await this.ecosystemService.isValidAppType(file, ApplicationType.MICROSERVICE);
-        return this.ecosystemService.createAppForArchive(file);
+        this.filteredPlugins$ = new BehaviorSubject([]);
+        this.selectedPlugins = [];
+        this.packageTypes = defaultPackageTypes;
+        this.result = new Promise((resolve, reject) => {
+            this._install = resolve;
+            this._cancel = reject;
+        });
+        this.onlyLatestPluginVersion = true;
     }
-    async uploadMicroservice(file, microservice) {
-        const subscribeToCurrentTenant = await this.askIfActivationAfterUploadNeeded();
-        await this.ecosystemService.uploadArchiveToApp(file, microservice);
-        await this.subscribeMicroservice(microservice, subscribeToCurrentTenant);
+    setFilterPipe(filterPipe) {
+        this.filteredPlugins$ = this.plugins$.pipe(map$1(plugins => plugins.map(plugin => {
+            plugin.filterProps = this.ecosystemService.getAppFilterProps(plugin.originApp);
+            return plugin;
+        })), src => filterPipe(src));
     }
-    async askIfActivationAfterUploadNeeded() {
-        try {
-            await this.modal.confirm(gettext('Subscribe to microservice'), gettext('You are about to subscribe to the microservice after upload. Do you want to subscribe to it?'), Status.INFO, { ok: gettext('Subscribe'), cancel: gettext("Don't subscribe") });
-            return true;
-        }
-        catch (ex) {
-            return false;
-        }
+    cancel() {
+        this.bsModalRef.hide();
+        this._cancel();
     }
-    async subscribeMicroservice(app, subscribeToCurrentTenant) {
-        const tenant = (await this.tenantService.current()).data;
-        const applications = tenant.applications.references;
-        const isSubscribed = applications.some(({ application }) => application.id === app.id);
-        if (!isSubscribed && subscribeToCurrentTenant) {
-            try {
-                return await this.tenantService.subscribeApplication(tenant, app);
-            }
-            catch (res) {
-                if (res.status === 409) {
-                    throw Error(ERROR_TYPE.ALREADY_SUBSCRIBED);
-                }
-            }
-        }
-        else if (isSubscribed && !subscribeToCurrentTenant) {
-            return this.tenantService.unsubscribeApplication(tenant, app);
-        }
+    install() {
+        this._install(this.selectedPlugins);
+        this.bsModalRef.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddMicroserviceComponent, deps: [{ token: i1.EcosystemService }, { token: i2.ModalService }, { token: i4.TenantService }, { token: i2.DocsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddMicroserviceComponent, selector: "c8y-add-microservice", ngImport: i0, template: `<div class="p-16" translate [translateParams]="{ slaHref: slaHref }" ngNonBindable>
-      By uploading a microservice, you agree to the
-      <a href="{{ slaHref }}" target="_blank" rel="noopener noreferrer"
-        >Microservice Deployment SLA</a
-      >
-      which outlines our microservices hosting terms, conditions, and performance standards.
-    </div>
-    <c8y-add-application
-      [headerIcon]="'microchip'"
-      [headerText]="headerText"
-      [successText]="successText"
-      [createApplicationHandler]="createMicroserviceApplicationHandler"
-      [uploadApplicationHandler]="uploadMicroserviceHandler"
-    ></c8y-add-application>`, isInline: true, dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.AddApplicationComponent, selector: "c8y-add-application", inputs: ["headerText", "headerIcon", "successText", "createApplicationHandler", "uploadApplicationHandler", "canGoBack", "applicationType"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddMicroserviceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InstallPluginComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'c8y-add-microservice',
-                    template: `<div class="p-16" translate [translateParams]="{ slaHref: slaHref }" ngNonBindable>
-      By uploading a microservice, you agree to the
-      <a href="{{ slaHref }}" target="_blank" rel="noopener noreferrer"
-        >Microservice Deployment SLA</a
-      >
-      which outlines our microservices hosting terms, conditions, and performance standards.
-    </div>
-    <c8y-add-application
-      [headerIcon]="'microchip'"
-      [headerText]="headerText"
-      [successText]="successText"
-      [createApplicationHandler]="createMicroserviceApplicationHandler"
-      [uploadApplicationHandler]="uploadMicroserviceHandler"
-    ></c8y-add-application>`
-                }]
-        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.ModalService }, { type: i4.TenantService }, { type: i2.DocsService }] });
+            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$: [{
+                type: Input
+            }] } });
 
-class MicroserviceListComponent {
-    constructor(ecosystemService, wizardModalService, cd) {
-        this.ecosystemService = ecosystemService;
-        this.wizardModalService = wizardModalService;
-        this.cd = cd;
-        this.reloading = false;
-        this.reload$ = new BehaviorSubject(null);
-        this.microservices$ = this.reload$.pipe(tap(() => (this.reloading = true)), switchMap(() => this.ecosystemService.getMicroservices()), tap(microservices => {
-            microservices.forEach(microservice => {
-                microservice.filterProps = this.ecosystemService.getAppFilterProps(microservice);
-            });
-        }), tap(() => (this.reloading = false)), shareReplay());
-        this.isMicroserviceHostingAllowed$ = this.reload$.pipe(switchMap(() => this.ecosystemService.isMicroserviceHostingAllowed()), shareReplay());
-        this.packageAvailabilities = [
-            APP_STATE.SUBSCRIBED.label,
-            APP_STATE.CUSTOM.label
-        ];
-    }
-    ngOnInit() {
-        this.loadMicroservices();
-        // manually trigger detection to not have ExpressionChangedAfterItHasBeenChecked error in spec file
-        this.cd.detectChanges();
-    }
-    loadMicroservices() {
-        this.reload$.next();
-    }
-    addMicroservice() {
-        const initialState = {
-            id: EcosystemWizards.MICROSERVICE_UPLOAD
-        };
-        const modalOptions = { initialState };
-        const modalRef = this.wizardModalService.show(modalOptions);
-        modalRef.content.onClose.subscribe(() => {
-            this.loadMicroservices();
-        });
+class LabelCellRendererComponent {
+    constructor(context) {
+        this.context = context;
     }
-    setFilterPipe(pipe) {
-        this.filteredMicroservices$ = this.microservices$.pipe(src => pipe(src));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelCellRendererComponent, deps: [{ token: i2.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: LabelCellRendererComponent, selector: "c8y-label-cell-renderer", ngImport: i0, template: "<span class=\"label label-info\">{{ context.value }}</span>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-label-cell-renderer', template: "<span class=\"label label-info\">{{ context.value }}</span>\n" }]
+        }], ctorParameters: () => [{ type: i2.CellRendererContext }] });
+
+class OrphanedStatusCellRendererComponent {
+    constructor(context) {
+        this.context = context;
+        this.label = this.getLabel(context.value);
     }
-    resetFilters() {
-        this.filtersComponent?.resetAllFilters();
+    getLabel(statusValue) {
+        switch (statusValue) {
+            case ApplicationPluginStatus.OUTDATED:
+                return {
+                    value: statusValue,
+                    text: gettext('OUTDATED`plugin status`'),
+                    class: 'label-warning'
+                };
+            case ApplicationPluginStatus.ORPHANED:
+                return {
+                    value: statusValue,
+                    text: gettext('ORPHANED`plugin status`'),
+                    class: 'label-danger'
+                };
+            case ApplicationPluginStatus.REVOKED:
+                return {
+                    value: statusValue,
+                    text: gettext('REVOKED`plugin status`'),
+                    class: 'label-danger'
+                };
+            case ApplicationPluginStatus.LATEST:
+                return {
+                    value: statusValue,
+                    text: gettext('LATEST`plugin status`'),
+                    class: 'label-success'
+                };
+            case ApplicationPluginStatus.AUTO:
+                return {
+                    value: statusValue,
+                    text: gettext('AUTO`plugin status`'),
+                    class: 'label-success'
+                };
+            default:
+                return null;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MicroserviceListComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: MicroserviceListComponent, selector: "c8y-microservice-list", viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: ListFiltersComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Microservices' | translate }}</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]=\"'microchip'\"\n    [label]=\"'Microservices' | translate\"\n    [path]=\"'ecosystem/microservice/microservices'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"100\"\n    *ngIf=\"isMicroserviceHostingAllowed$ | async\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add microservice' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#managing-microservices\"></c8y-help>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"microservices$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(microservices$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div\n  class=\"c8y-empty-state text-center\"\n  *ngIf=\"(microservices$ | async)?.length === 0\"\n>\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No microservices to display.</h3>\n  <p translate>Add your first microservice by clicking below.</p>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      {{ 'Add microservice' | translate }}\n    </button>\n  </p>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex\"\n    *ngIf=\"(microservices$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Microservice' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let microservice of filteredMicroservices$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadMicroservices()\"\n      [app]=\"microservice\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching microservices.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(microservices$ | async)?.length > 0 && (filteredMicroservices$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\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: "directive", type: i2.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: i1.ApplicationCardComponent, selector: "c8y-application-card", inputs: ["app", "canEdit"], outputs: ["onAppDeleted", "onAppCloned"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { 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.9", ngImport: i0, type: OrphanedStatusCellRendererComponent, deps: [{ token: i2.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: OrphanedStatusCellRendererComponent, selector: "c8y-orphaned-status-cell-renderer", ngImport: i0, template: "<span\n  *ngIf=\"label\"\n  class=\"label\"\n  [ngClass]=\"label.class\"\n  [title]=\"label.text | translate\"\n>\n  {{ label.text | translate }}\n</span>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MicroserviceListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OrphanedStatusCellRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-microservice-list', template: "<c8y-title>{{ 'Microservices' | translate }}</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]=\"'microchip'\"\n    [label]=\"'Microservices' | translate\"\n    [path]=\"'ecosystem/microservice/microservices'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"100\"\n    *ngIf=\"isMicroserviceHostingAllowed$ | async\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add microservice' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#managing-microservices\"></c8y-help>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"microservices$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(microservices$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div\n  class=\"c8y-empty-state text-center\"\n  *ngIf=\"(microservices$ | async)?.length === 0\"\n>\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No microservices to display.</h3>\n  <p translate>Add your first microservice by clicking below.</p>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      {{ 'Add microservice' | translate }}\n    </button>\n  </p>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex\"\n    *ngIf=\"(microservices$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Microservice' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let microservice of filteredMicroservices$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadMicroservices()\"\n      [app]=\"microservice\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching microservices.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(microservices$ | async)?.length > 0 && (filteredMicroservices$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\n" }]
-        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.WizardModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { filtersComponent: [{
-                type: ViewChild,
-                args: [ListFiltersComponent]
-            }] } });
+            args: [{ selector: 'c8y-orphaned-status-cell-renderer', template: "<span\n  *ngIf=\"label\"\n  class=\"label\"\n  [ngClass]=\"label.class\"\n  [title]=\"label.text | translate\"\n>\n  {{ label.text | translate }}\n</span>\n" }]
+        }], ctorParameters: () => [{ type: i2.CellRendererContext }] });
 
-class AddPackageComponent {
-    constructor(ecosystemService) {
+class UpdatePluginOfAppComponent {
+    constructor(bsModalRef, pluginsService, alert, ecosystemService, gainsightService) {
+        this.bsModalRef = bsModalRef;
+        this.pluginsService = pluginsService;
+        this.alert = alert;
         this.ecosystemService = ecosystemService;
-        this.headerText = gettext('Add extension package');
-        this.successText = gettext('Extension package created');
-        this.createPackageAppHandler = (f) => this.createPackageApp(f);
-        this.uploadPackageHandler = (f, app) => this.uploadPackage(f, app);
-    }
-    async createPackageApp(file) {
-        await this.ecosystemService.isValidAppType(file, ApplicationType.HOSTED);
-        return await this.ecosystemService.createAppForArchive(file, true);
-    }
-    uploadPackage(file, pckg) {
-        return this.ecosystemService.uploadArchiveToApp(file, pckg, true);
-    }
-    next() {
-        this.stepper.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddPackageComponent, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddPackageComponent, selector: "c8y-add-package", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: `<c8y-add-application
-    [headerIcon]="'big-parcel'"
-    [headerText]="headerText"
-    [successText]="successText"
-    [createApplicationHandler]="createPackageAppHandler"
-    [uploadApplicationHandler]="uploadPackageHandler"
-    [applicationType]="'package'"
-  ></c8y-add-application>`, isInline: true, dependencies: [{ kind: "component", type: i1.AddApplicationComponent, selector: "c8y-add-application", inputs: ["headerText", "headerIcon", "successText", "createApplicationHandler", "uploadApplicationHandler", "canGoBack", "applicationType"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddPackageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'c8y-add-package',
-                    template: `<c8y-add-application
-    [headerIcon]="'big-parcel'"
-    [headerText]="headerText"
-    [successText]="successText"
-    [createApplicationHandler]="createPackageAppHandler"
-    [uploadApplicationHandler]="uploadPackageHandler"
-    [applicationType]="'package'"
-  ></c8y-add-application>`
-                }]
-        }], ctorParameters: () => [{ type: i1.EcosystemService }], propDecorators: { stepper: [{
-                type: ViewChild,
-                args: [C8yStepper, { static: true }]
-            }] } });
-
-class DeployApplicationComponent {
-    constructor(ecosystemService, wizardComponent, translate, pluginService, gainsightService, router) {
-        this.ecosystemService = ecosystemService;
-        this.wizardComponent = wizardComponent;
-        this.translate = translate;
-        this.pluginService = pluginService;
         this.gainsightService = gainsightService;
-        this.router = router;
         this.CURRENT_LOCATION = location.href;
-        this.inProgress = true;
-        this.isDeployed = false;
-        this.deployedWithSuccess = false;
-        this.model = {
-            selected: undefined,
-            binary: {
-                id: undefined
-            }
-        };
-        this.canDeploy = false;
-        this.descriptionTemplate = gettext('Deploy application using "{{ packageName }}" package');
-        this.successMessageTemplate = gettext('Application "{{ packageName }}" created');
-        this.doneLabel = gettext('Done');
-        this.cancelLabel = gettext('Cancel');
-        this.package = this.wizardComponent.package;
-    }
-    async ngOnInit() {
-        const apps = await this.ecosystemService.getHostedAndPackageApplications();
-        this.newAppConfig = this.ecosystemService.getUniqueAppConfig(this.package, apps);
-        this.headerText = this.getHeaderText();
-        this.inProgress = false;
+        this.result = new Promise((resolve, reject) => {
+            this._install = resolve;
+            this._cancel = reject;
+        });
+        this.updateAll = true;
     }
-    async deployApp() {
-        this.inProgress = true;
-        const formGroupValue = this.applicationPropertiesForm.formGroup.getRawValue();
-        // Verify if selected package version is compatible with current platform versions.
-        this.package.manifest.version = this.model.selected.version;
-        const verifyVersionCompatibility = await this.ecosystemService.verifyBlueprintVersionsCompatibility(this.package.manifest);
-        if (!verifyVersionCompatibility) {
+    async update() {
+        const remotes = this.pluginsService.getMFRemotes(this.app);
+        const oldRemotePath = `${this.plugin.contextPath}@${this.plugin.version}`;
+        const newRemotePath = `${this.plugin.contextPath}@${this.applicationVersion.version}`;
+        let oldRemoteModules = [...(remotes[oldRemotePath] || [])];
+        if (!oldRemoteModules.length) {
+            this.alert.warning(gettext('Could not change the version of plugin.'));
             this.cancel();
             return;
         }
-        const { contextPath, license, name, manifest } = this.package;
-        const type = this.pluginService.getPackageType(this.package);
-        const licensedApp = {
-            contextPath,
-            license: license || manifest.license,
-            name,
-            type,
-            version: this.model.selected.version
-        };
-        const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses([licensedApp]);
-        if (!licensesVerifiedByUser) {
+        const isArchived = await this.ecosystemService.verifyArchived([this.plugin]);
+        if (!isArchived) {
+            this.alert.warning(gettext('Plugin update aborted by user.'));
+            this.cancel();
+            return;
+        }
+        const result = await this.ecosystemService.verifyLicenses([this.plugin]);
+        if (!result) {
+            this.alert.warning(gettext('Plugin update aborted by user.'));
             this.cancel();
             return;
         }
+        let remoteModulesOfNewVersion = [...(remotes[newRemotePath] || [])];
+        let olderVersions = {};
+        if (this.updateAll) {
+            olderVersions = Object.keys(remotes)
+                .filter(key => key.startsWith(`${this.plugin.contextPath}@`))
+                .reduceRight((prev, curr) => {
+                prev[curr] = undefined;
+                return prev;
+            }, {});
+            oldRemoteModules = Object.keys(olderVersions)
+                .map(version => remotes[version])
+                .reduceRight((prev, curr) => {
+                prev.push(...curr);
+                return prev;
+            }, []);
+            remoteModulesOfNewVersion.push(...oldRemoteModules);
+        }
+        else {
+            remoteModulesOfNewVersion.push(this.plugin.module);
+            olderVersions[oldRemotePath] = oldRemoteModules.filter(module => module !== this.plugin.module);
+            if (!olderVersions[oldRemotePath].length) {
+                olderVersions[oldRemotePath] = undefined;
+            }
+        }
+        remoteModulesOfNewVersion = uniq(remoteModulesOfNewVersion);
+        const newRemotes = {
+            ...remotes,
+            ...olderVersions,
+            [newRemotePath]: remoteModulesOfNewVersion
+        };
         try {
-            this.deployedApp = await this.ecosystemService.deployApp(this.package, formGroupValue, this.model);
-            const applicationCustomEventInfo = pick(this.package, [
-                'id',
-                'name',
-                'contextPath',
-                'label',
-                'key'
-            ]);
-            this.deployedWithSuccess = true;
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.DEPLOYED,
-                url: this.CURRENT_LOCATION,
-                ...applicationCustomEventInfo,
-                package: this.deployedApp?.manifest?.package ?? null
+            await this.pluginsService.updateRemotesInAppConfig(this.app, newRemotes);
+            this.alert.success(gettext(`Switched the version of plugin.`));
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.UPDATE_PLUGIN_OF_APP,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.CHANGE_PLUGIN_VERSION,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_VERSION_CHANGED,
+                url: this.CURRENT_LOCATION
             });
         }
-        catch (error) {
-            this.ecosystemService.alertError(error);
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
+        catch (e) {
+            this.alert.addServerFailure(e);
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.UPDATE_PLUGIN_OF_APP,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.CHANGE_PLUGIN_VERSION,
                 result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                url: this.CURRENT_LOCATION,
-                error
+                url: this.CURRENT_LOCATION
             });
         }
-        finally {
-            this.markAsDeployed();
-        }
+        this.bsModalRef.hide();
+        this._install();
     }
     cancel() {
-        this.wizardComponent.close();
-    }
-    onAppVersionSelect(appVersion) {
-        Object.assign(this.model, {
-            selected: appVersion
-        });
-        this.canDeploy = true;
-    }
-    open() {
-        this.router.navigateByUrl(ViewContext.Application.replace(':id', `${this.deployedApp.id}`));
-        this.cancel();
-    }
-    markAsDeployed() {
-        this.isDeployed = true;
-        this.inProgress = false;
-    }
-    getHeaderText() {
-        return this.translate.instant(this.descriptionTemplate, {
-            packageName: this.package.name
-        });
+        this.bsModalRef.hide();
+        this._cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeployApplicationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UpdatePluginOfAppComponent, 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: [{
-                type: ViewChild,
-                args: [ApplicationPropertiesFormComponent]
-            }] } });
+            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" }]
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i1.EcosystemService }, { type: i2.GainsightService }] });
 
-class PackageDetailsComponent {
-    constructor(activatedRoute, client, wizardModalService, ecosystemService, contextRouteService, pluginsService, packageAvailabilityService, ui, pluginService) {
+class ApplicationPluginsComponent {
+    constructor(activatedRoute, ecosystemService, bsModalService, pluginsService, alertService, gainsightService) {
         this.activatedRoute = activatedRoute;
-        this.client = client;
-        this.wizardModalService = wizardModalService;
         this.ecosystemService = ecosystemService;
-        this.contextRouteService = contextRouteService;
+        this.bsModalService = bsModalService;
         this.pluginsService = pluginsService;
-        this.packageAvailabilityService = packageAvailabilityService;
-        this.ui = ui;
-        this.pluginService = pluginService;
-        this.package = {};
-        this.exportedPlugins$ = new BehaviorSubject([]);
-        this.isChangingAvailability = false;
-        this.isOwnedByCurrentTenant = false;
-        this.isAllowedToCreateSubtenants = false;
-        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;
-        await this.loadData();
-    }
-    deploy() {
-        const initialState = {
-            wizardConfig: {},
-            id: EcosystemWizards.BLUEPRINT_DEPLOYMENT,
-            package: this.package
-        };
-        const modalOptions = { initialState };
-        this.wizardModalService.show(modalOptions);
-    }
-    async togglePackageAvailability(pckg, newAvailability) {
-        this.isChangingAvailability = true;
-        pckg = await this.packageAvailabilityService.askIfAvailabilityShouldBeSetTo(pckg, newAvailability);
-        const availabilityHasChanged = pckg.availability === newAvailability;
-        if (availabilityHasChanged) {
-            await this.loadData(pckg);
-            this.contextRouteService.setContext(this.activatedRoute, pckg);
-        }
-        else {
-            this.packageAvailability = this.package.availability;
-        }
-        this.isChangingAvailability = false;
-    }
-    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.name = this.package?.name;
-        this.description = this.package?.manifest?.description;
-        this.markdown = await this.getReadmeFileContent();
-        this.baseUrl = this.getBaseUrl();
-        this.appState = this.ecosystemService.getAppState(this.package);
-        this.isPackageBlueprint = this.ecosystemService.isPackageBlueprint(this.package);
-        this.isOwnedByCurrentTenant =
-            this.package?.owner?.tenant?.id === this.ui.currentTenant.value?.name;
-        this.extractPackageMFExports();
-    }
-    extractPackageMFExports() {
-        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
+        this.alertService = alertService;
+        this.gainsightService = gainsightService;
+        this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_ECOSYSTEM;
+        this.CURRENT_LOCATION = location.href;
+        this.remotePlugins$ = new BehaviorSubject({});
+        this.allAvailablePlugins$ = new BehaviorSubject([]);
+        this.selfPlugins$ = new BehaviorSubject([]);
+        this.installedPlugins$ = combineLatest([
+            this.remotePlugins$.pipe(map(remotes => PluginsService.convertInstalledRemotesToIds(remotes))),
+            this.allAvailablePlugins$
+        ]).pipe(map(([remotePlugins, allPlugins]) => this.getInstalledPlugins(allPlugins, remotePlugins)), shareReplay(1));
+        this.orphanedPlugins$ = this.installedPlugins$.pipe(map(plugins => plugins.filter(p => p.status === ApplicationPluginStatus.ORPHANED)));
+        this.isStandard$ = combineLatest([this.installedPlugins$, this.selfPlugins$]).pipe(map(([installedPlugins, selfPlugins]) => {
+            const manifestRemotes = this.app?.manifest?.remotes || {};
+            // ensure that every installed plugin is a self plugin or a plugin from the manifest
+            const allInstalledPluginsAreSelf = installedPlugins.every(p => selfPlugins.some(selfPlugin => selfPlugin.id === p.id) ||
+                (Array.isArray(manifestRemotes[p.contextPath]) &&
+                    manifestRemotes[p.contextPath].includes(p.module)));
+            // ensure that every self plugin is installed
+            const allSelfPluginsAreInstalled = selfPlugins.every(selfPlugin => installedPlugins.some(p => p.id === selfPlugin.id));
+            const configRemotes = this.app?.config?.remotes || {};
+            // ensure that every remote from the manifest is in the config
+            // if no config exists we are also all good
+            const everyRemoteFromManifestIsInConfig = !this.app?.config?.remotes ||
+                Object.keys(manifestRemotes).every(contextPath => Array.isArray(configRemotes[contextPath]) &&
+                    Array.isArray(manifestRemotes[contextPath]) &&
+                    manifestRemotes[contextPath].every(module => configRemotes[contextPath].includes(module)));
+            return (allInstalledPluginsAreSelf &&
+                allSelfPluginsAreInstalled &&
+                everyRemoteFromManifestIsInConfig);
+        }));
+        this.title = gettext('Installed plugins');
+        this.loadMoreItemsLabel = gettext('Load more packages');
+        this.loadingItemsLabel = gettext('Loading packages…');
+        this.actionControls = this.getActionControls();
+        this.bulkActionControls = this.getBulkActionControls();
+        this.headerActionControls = [];
+        this.noResultsMessage = gettext('No plugins to display.');
+        this.noDataMessage = gettext('No plugins installed.');
+        this.noResultsSubtitle = gettext('Refine your search terms or check your spelling.');
+        this.noDataSubtitle = gettext("This application doesn't have any plugin. Click below to install.");
+        this.pagination = {
+            pageSize: 10,
+            currentPage: 1
         };
-        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.9", 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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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          }\"\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      <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: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$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" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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          }\"\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      <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 }] });
-
-class PackagesListComponent {
-    constructor(ecosystemService, wizardModalService, permissions) {
-        this.ecosystemService = ecosystemService;
-        this.wizardModalService = wizardModalService;
-        this.permissions = permissions;
-        this.reloading = false;
-        this.reload$ = new BehaviorSubject(null);
-        this.hasAdminPermissions = false;
-        this.emptyStateSubtitle = gettext('Add your first package by clicking below.');
-        this.packageTypes = defaultPackageTypes;
-        this.packageAvailabilities = [
-            APP_STATE.SUBSCRIBED.label,
-            APP_STATE.CUSTOM.label
+        this.displayOptions = {
+            bordered: false,
+            striped: true,
+            filter: true,
+            gridHeader: true,
+            hover: true
+        };
+        this.columns = [
+            {
+                name: 'name',
+                header: gettext('Plugin name'),
+                path: 'name',
+                filterable: true
+            },
+            {
+                name: 'Version',
+                header: gettext('Version'),
+                path: 'version',
+                filterable: false
+            },
+            {
+                name: 'Tag',
+                header: gettext('Tag`noun`'),
+                path: 'installedViaTag',
+                filterable: false,
+                cellRendererComponent: LabelCellRendererComponent
+            },
+            {
+                name: 'description',
+                header: gettext('Description'),
+                path: 'description',
+                filterable: false,
+                cellCSSClassName: 'small'
+            },
+            {
+                name: 'contextPath',
+                header: gettext('Source'),
+                path: 'contextPath',
+                filterable: false,
+                cellRendererComponent: LabelCellRendererComponent
+            },
+            {
+                name: 'scope',
+                header: gettext('Scope'),
+                path: 'scope',
+                filterable: false,
+                visible: false,
+                cellRendererComponent: LabelCellRendererComponent
+            },
+            {
+                name: 'status',
+                header: gettext('Status'),
+                path: 'status',
+                filterable: false,
+                cellRendererComponent: OrphanedStatusCellRendererComponent
+            }
         ];
-        this.packageContents = defaultPackageContents;
         this.destroy$ = new Subject();
-        this.packages$ = this.reload$.pipe(takeUntil(this.destroy$), tap(() => (this.reloading = true)), switchMap(() => this.ecosystemService.getPackageApplications()), tap(packages => {
-            packages.forEach(pckg => {
-                pckg.filterProps = this.ecosystemService.getAppFilterProps(pckg);
-            });
-        }), tap(() => (this.reloading = false)), shareReplay(1));
     }
     ngOnInit() {
-        this.hasAdminPermissions = this.permissions.hasRole(Permissions.ROLE_APPLICATION_MANAGEMENT_ADMIN);
-        this.loadPackages();
-    }
-    loadPackages() {
-        this.reload$.next();
-    }
-    addPackage() {
-        const initialState = {
-            id: EcosystemWizards.PACKAGE_UPLOAD
-        };
-        const modalOptions = { initialState };
-        const modalRef = this.wizardModalService.show(modalOptions);
-        modalRef.content.onClose.subscribe(() => {
-            this.loadPackages();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.complete();
-    }
-    setFilterPipe(pipe) {
-        this.filteredPackages$ = this.packages$.pipe(src => pipe(src));
+        this.addInstallButtonToHeaderActionControls();
+        this.loadData();
     }
-    resetFilters() {
-        this.filtersComponent?.resetAllFilters();
+    async loadData() {
+        this.isLoading = true;
+        await this.getApplicationMO();
+        await this.getApplicationMFRemotes(this.app);
+        await this.getAllApplicationsMFExports(this.app);
+        await this.getAllSelfMFExports(this.app);
+        this.isLoading = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackagesListComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardModalService }, { token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PackagesListComponent, selector: "c8y-packages-list", viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: ListFiltersComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Extensions' | translate }}</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    [path]=\"'ecosystem/extension/extensions'\"\n    [label]=\"'Extensions' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"hasAdminPermissions\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add extension package' | translate }}\"\n    type=\"button\"\n    data-cy=\"packages-list--add-extension-package\"\n    (click)=\"addPackage()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add extension package' | 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=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"loadPackages()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"p-r-8 p-l-8\"\n>\n  <c8y-list-filters\n    *ngIf=\"packages$ | async\"\n    [packageTypes]=\"packageTypes\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n    [packageContents]=\"packageContents\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(packages$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#extensions\"></c8y-help>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex m-b-8\"\n    *ngIf=\"(filteredPackages$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Package' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let app of filteredPackages$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadPackages()\"\n      (onAppCloned)=\"loadPackages()\"\n      [app]=\"app\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [title]=\"'No extensions to display.' | translate\"\n  [subtitle]=\"hasAdminPermissions ? (emptyStateSubtitle | translate) : ''\"\n  *ngIf=\"(packages$ | async)?.length === 0\"\n>\n  <div *ngIf=\"hasAdminPermissions\">\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add extension package' | translate }}\"\n      type=\"button\"\n      (click)=\"addPackage()\"\n    >\n      {{ 'Add extension package' | translate }}\n    </button>\n  </div>\n</c8y-ui-empty-state>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching extensions.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(packages$ | async)?.length > 0 && (filteredPackages$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\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: 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: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: i1.ApplicationCardComponent, selector: "c8y-application-card", inputs: ["app", "canEdit"], outputs: ["onAppDeleted", "onAppCloned"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackagesListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-packages-list', template: "<c8y-title>{{ 'Extensions' | translate }}</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    [path]=\"'ecosystem/extension/extensions'\"\n    [label]=\"'Extensions' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"hasAdminPermissions\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add extension package' | translate }}\"\n    type=\"button\"\n    data-cy=\"packages-list--add-extension-package\"\n    (click)=\"addPackage()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add extension package' | 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=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"loadPackages()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"p-r-8 p-l-8\"\n>\n  <c8y-list-filters\n    *ngIf=\"packages$ | async\"\n    [packageTypes]=\"packageTypes\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n    [packageContents]=\"packageContents\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(packages$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#extensions\"></c8y-help>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex m-b-8\"\n    *ngIf=\"(filteredPackages$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Package' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let app of filteredPackages$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadPackages()\"\n      (onAppCloned)=\"loadPackages()\"\n      [app]=\"app\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [title]=\"'No extensions to display.' | translate\"\n  [subtitle]=\"hasAdminPermissions ? (emptyStateSubtitle | translate) : ''\"\n  *ngIf=\"(packages$ | async)?.length === 0\"\n>\n  <div *ngIf=\"hasAdminPermissions\">\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add extension package' | translate }}\"\n      type=\"button\"\n      (click)=\"addPackage()\"\n    >\n      {{ 'Add extension package' | translate }}\n    </button>\n  </div>\n</c8y-ui-empty-state>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching extensions.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(packages$ | async)?.length > 0 && (filteredPackages$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\n" }]
-        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.WizardModalService }, { type: i2.Permissions }], propDecorators: { filtersComponent: [{
-                type: ViewChild,
-                args: [ListFiltersComponent]
-            }] } });
-
-class PackageVersionsPluginsComponent {
-    constructor() {
-        this.exportedPlugins$ = new BehaviorSubject([]);
+    async resetToDefault() {
+        this.isLoading = true;
+        await this.pluginsService.resetRemotes(this.app);
+        await this.loadData();
+        this.alertService.success(gettext('The application was reset to its default plugins.'));
     }
-    async ngOnChanges() {
-        this.exportedPlugins$.next(this.getExportedPlugins());
+    async installPlugins() {
+        let currentPlugin = null;
+        try {
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.INSTALL_PLUGINS_INITIATED,
+                url: this.CURRENT_LOCATION,
+                targetApplicationName: this.app.name,
+                targetApplicationContextPath: this.app.contextPath
+            });
+            const pluginsToAdd = await this.bsModalService.show(InstallPluginComponent, {
+                class: 'modal-md',
+                ariaDescribedby: 'modal-body',
+                ariaLabelledBy: 'modal-title',
+                initialState: this.getInstallModalInitState(),
+                ignoreBackdropClick: true
+            }).content.result;
+            const isArchived = await this.ecosystemService.verifyArchived(pluginsToAdd);
+            if (!isArchived) {
+                return;
+            }
+            const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses(pluginsToAdd);
+            if (!licensesVerifiedByUser) {
+                return;
+            }
+            const verifyVersionCompatibility = await this.ecosystemService.verifyPluginVersionsCompatibility(pluginsToAdd, this.app);
+            if (!verifyVersionCompatibility) {
+                return;
+            }
+            this.isLoading = true;
+            await this.handleRemotesInstallation(pluginsToAdd);
+            this.alertService.success(gettext('Plugins installed.'));
+            pluginsToAdd.forEach(plugin => {
+                currentPlugin = plugin;
+                this.triggerPluginEvent(plugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_INSTALLED);
+            });
+        }
+        catch (ex) {
+            if (ex) {
+                this.alertService.addServerFailure(ex);
+                this.triggerPluginEvent(currentPlugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE);
+            }
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-    getExportedPlugins() {
-        return this.selectedVersionManifest?.exports || [];
+    async removePlugins(plugins) {
+        let currentPlugin = null;
+        try {
+            this.isLoading = true;
+            const installedPlugins = await firstValueFrom(this.installedPlugins$);
+            const pluginsToRemove = installedPlugins.filter(p => plugins.includes(p.id));
+            const updatedRemotes = await this.pluginsService.removeRemotes(this.app, plugins.map(id => installedPlugins.find(p => p.id === id)));
+            this.emitRemotes(updatedRemotes);
+            this.isLoading = false;
+            this.dataGrid.cancel();
+            this.alertService.success(gettext('Plugins removed.'));
+            pluginsToRemove.forEach(plugin => {
+                currentPlugin = plugin;
+                this.triggerPluginEvent(plugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_REMOVED);
+            });
+        }
+        catch (ex) {
+            if (ex) {
+                this.alertService.addServerFailure(ex);
+                this.triggerPluginEvent(currentPlugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE);
+            }
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsPluginsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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" }]
-        }], propDecorators: { selectedVersionManifest: [{
-                type: Input,
-                args: ['selectedVersionManifest']
-            }] } });
-
-class PackageVersionsAppsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsAppsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PackageVersionsAppsComponent, selector: "c8y-contents-apps", inputs: { selectedVersionManifest: "selectedVersionManifest" }, ngImport: i0, template: "<p class=\"legend form-block\">\n  {{ 'Application' | translate }}\n</p>\n\n<div  *ngIf=\"selectedVersionManifest?.name; else emptyApp\">\n  <c8y-li>\n    <c8y-li-icon icon=\"big-parcel\"></c8y-li-icon>\n    <h5 class=\"text-medium text-16 p-b-8\">\n      {{ selectedVersionManifest?.name | humanizeAppName | async }}\n      <small class=\"m-l-8\" *ngIf=\"selectedVersionManifest?.requiredPlatformVersion\">\n        <em>{{ selectedVersionManifest?.requiredPlatformVersion }}</em>\n      </small>\n    </h5>\n    <p *ngIf=\"selectedVersionManifest?.description; else notAvailable\">\n      {{ selectedVersionManifest?.description }}\n    </p>\n  </c8y-li>\n</div>\n\n<ng-template #notAvailable>\n  <p class=\"text-muted\">\n    <em>{{ 'No description available.' | translate }}</em>\n  </p>\n</ng-template>\n\n<ng-template #emptyApp>\n  <c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [horizontal]=\"true\"\n  [title]=\"'No application.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain an application.' | translate\"\n  ></c8y-ui-empty-state>\n</ng-template>", 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.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: "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.9", ngImport: i0, type: PackageVersionsAppsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-contents-apps', template: "<p class=\"legend form-block\">\n  {{ 'Application' | translate }}\n</p>\n\n<div  *ngIf=\"selectedVersionManifest?.name; else emptyApp\">\n  <c8y-li>\n    <c8y-li-icon icon=\"big-parcel\"></c8y-li-icon>\n    <h5 class=\"text-medium text-16 p-b-8\">\n      {{ selectedVersionManifest?.name | humanizeAppName | async }}\n      <small class=\"m-l-8\" *ngIf=\"selectedVersionManifest?.requiredPlatformVersion\">\n        <em>{{ selectedVersionManifest?.requiredPlatformVersion }}</em>\n      </small>\n    </h5>\n    <p *ngIf=\"selectedVersionManifest?.description; else notAvailable\">\n      {{ selectedVersionManifest?.description }}\n    </p>\n  </c8y-li>\n</div>\n\n<ng-template #notAvailable>\n  <p class=\"text-muted\">\n    <em>{{ 'No description available.' | translate }}</em>\n  </p>\n</ng-template>\n\n<ng-template #emptyApp>\n  <c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [horizontal]=\"true\"\n  [title]=\"'No application.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain an application.' | translate\"\n  ></c8y-ui-empty-state>\n</ng-template>" }]
-        }], propDecorators: { selectedVersionManifest: [{
-                type: Input,
-                args: ['selectedVersionManifest']
-            }] } });
-
-class PackageContentsComponent {
-    constructor(activatedRoute, applicationService, alertService, contextRouteService) {
-        this.activatedRoute = activatedRoute;
-        this.applicationService = applicationService;
-        this.alertService = alertService;
-        this.contextRouteService = contextRouteService;
-        this.package = {};
-        this.isLoading = false;
-        this.packageVersionProperties = packageProperties;
+    async cleanupOrphanedPlugins(plugins) {
+        const pluginIds = plugins.map(p => p.id);
+        await this.removePlugins(pluginIds);
     }
-    async ngOnChanges(changes) {
-        if (changes.selectedVersion.currentValue) {
-            this.loadManifest(this.selectedVersion);
-        }
-        this.selectedVersionManifest = undefined;
+    getActionControls() {
+        return [
+            {
+                type: 'customUpdate',
+                text: gettext('Update'),
+                icon: 'caret-square-o-up',
+                showIf: plugin => {
+                    return (plugin.status === ApplicationPluginStatus.OUTDATED ||
+                        plugin.status === ApplicationPluginStatus.REVOKED);
+                },
+                callback: plugin => this.updatePlugin(this.app, plugin)
+            },
+            {
+                type: 'customDowngrade',
+                text: gettext('Downgrade'),
+                icon: 'caret-square-o-down',
+                showIf: (plugin) => {
+                    if (plugin.scope === PluginsExportScopes.SELF ||
+                        plugin.scope === PluginsExportScopes.SELF_OPTIONAL) {
+                        return false;
+                    }
+                    return plugin.status === ApplicationPluginStatus.LATEST;
+                },
+                callback: plugin => this.updatePlugin(this.app, plugin, true)
+            }
+        ];
     }
-    async loadManifest(version) {
-        this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
-        this.isLoading = true;
-        this.selectedVersionManifest = await this.getManifest(version);
-        this.isLoading = false;
+    getBulkActionControls() {
+        return [
+            {
+                type: 'customDelete',
+                text: gettext('Remove'),
+                icon: 'trash',
+                callback: plugins => this.removePlugins(plugins)
+            }
+        ];
     }
-    async getManifest(version) {
+    async updatePlugin(app, plugin, downgrade = false) {
         try {
-            return await this.applicationService.getAppManifest(this.package, version);
+            await this.bsModalService.show(UpdatePluginOfAppComponent, {
+                class: 'modal-sm',
+                ariaDescribedby: 'modal-body',
+                ariaLabelledBy: 'modal-title',
+                initialState: {
+                    app,
+                    plugin,
+                    downgrade
+                },
+                ignoreBackdropClick: true
+            }).content.result;
+            this.refresh();
         }
-        catch (error) {
-            this.alertService.addServerFailure(error);
+        catch (er) {
+            return;
         }
-        return undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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" }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i4.ApplicationService }, { type: i2.AlertService }, { type: i2.ContextRouteService }], propDecorators: { selectedVersion: [{
-                type: Input
-            }] } });
-
-const DEFAULT_VERSIONS_LIMIT = 20;
-class PackageVersionsListComponent {
-    constructor(activatedRoute, pluginsService, ecosystemService, translateService, modal, alertService, optionsService, permissions, gainsightService) {
-        this.activatedRoute = activatedRoute;
-        this.pluginsService = pluginsService;
-        this.ecosystemService = ecosystemService;
-        this.translateService = translateService;
-        this.modal = modal;
-        this.alertService = alertService;
-        this.optionsService = optionsService;
-        this.permissions = permissions;
-        this.gainsightService = gainsightService;
-        this.CURRENT_LOCATION = location.href;
-        this.isLoading = false;
-        this.hasAdminPermissions = false;
-        this.isPackageOwnedByCurrentTenant = false;
-        this.onVersionSelect = new EventEmitter();
     }
-    async ngOnInit() {
-        this.isLoading = true;
-        this.hasAdminPermissions = this.permissions.hasRole(Permissions.ROLE_APPLICATION_MANAGEMENT_ADMIN);
-        this.package = this.activatedRoute?.snapshot?.parent?.data?.contextData;
-        this.isPackageOwnedByCurrentTenant = this.ecosystemService.isOwner(this.package);
-        this.versionsLimit = (await this.optionsService.getSystemOption('application', 'versions.limit', DEFAULT_VERSIONS_LIMIT));
-        this.sortVersions();
-        this.isLoading = false;
+    refresh() {
+        this.loadData();
     }
-    async downloadArchive(appVersion) {
-        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
-            component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
-            action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DOWNLOAD,
-            url: this.CURRENT_LOCATION
-        });
-        const archiveMO = await this.ecosystemService.getArchiveManagedObject(appVersion.binaryId);
-        await this.ecosystemService.downloadArchive(this.package, {
-            id: appVersion.binaryId,
-            name: archiveMO.name
-        });
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    packageVersionUploaded() {
-        this.activatedRoute.snapshot.parent.data.contextData = this.package;
-        this.sortVersions();
-        this.setUploadedVersionAsLatest();
+    addInstallButtonToHeaderActionControls() {
+        if (this.appId) {
+            this.headerActionControls = [
+                {
+                    text: gettext('Install plugins'),
+                    callback: () => {
+                        this.installPlugins();
+                    },
+                    icon: 'plus-circle',
+                    type: 'custom'
+                }
+            ];
+        }
     }
-    selectVersion(version) {
-        this.selectedVersion = version;
-        this.onVersionSelect.emit(version);
+    async handleRemotesInstallation(plugins) {
+        const updatedRemotes = await this.pluginsService.addRemotes(this.app, plugins);
+        return this.emitRemotes(updatedRemotes);
     }
-    async removeVersionPackage(version) {
-        try {
-            await this.ecosystemService.deletePackageVersion(this.package, { version });
-            this.alertService.success(this.translateService.instant(gettext('Package version {{version}} has been removed'), {
-                version
-            }));
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DELETE,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SUCCESS,
-                url: this.CURRENT_LOCATION
-            });
-        }
-        catch (e) {
-            this.alertService.addServerFailure(e);
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DELETE,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                url: this.CURRENT_LOCATION
-            });
-        }
-        if (version === this.selectedVersion) {
-            this.selectVersion(null);
+    emitRemotes(pluginsConfig) {
+        const { remotes, excludedRemotes } = pluginsConfig;
+        // needed for first time adding/removing a plugin
+        if (!this.app.config) {
+            this.app.config = {};
         }
-        await this.refreshPackage();
+        this.app.config.remotes = remotes;
+        this.app.config.excludedRemotes = excludedRemotes;
+        const actualRemotes = this.pluginsService.getMFRemotes(this.app);
+        this.remotePlugins$.next(actualRemotes);
+        return { ...this.remotePlugins$.value };
     }
-    async setVersionAsLatest(appVersion) {
+    async getApplicationMO() {
+        let id = this.appId;
+        if (!id) {
+            const { id: routeId } = this.activatedRoute.snapshot.parent.data.contextData;
+            id = routeId;
+        }
         try {
-            await this.ecosystemService.setPackageVersionTag(this.package, appVersion.version, [
-                ...appVersion.tags,
-                'latest'
-            ]);
-            // TODO added it due to: https://cumulocity.atlassian.net/browse/MTM-48553
-            // Remove it when BE fixes issues with activeVersion.
-            await this.ecosystemService.setAppActiveVersion(this.package, appVersion.binaryId);
-            this.alertService.success(gettext('Tag has been set.'));
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.SET_AS_LATEST,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SUCCESS,
-                url: this.CURRENT_LOCATION
-            });
+            this.app = await this.ecosystemService.getApplication(id);
         }
-        catch (e) {
-            this.alertService.addServerFailure(e);
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.SET_AS_LATEST,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                url: this.CURRENT_LOCATION
-            });
-            return;
+        catch (er) {
+            if (er) {
+                this.alertService.addServerFailure(er);
+            }
         }
-        await this.refreshPackage();
+        return this.app;
     }
-    async acknowledgeLimitReached() {
-        await this.modal.acknowledge(gettext('Package limit exceeded'), this.translateService.instant(gettext('You have reached the maximum number of {{ versionsLimit }} package versions. To add another version, first delete one from the list.'), { versionsLimit: this.versionsLimit }), Status.INFO, gettext('Close'));
-        throw undefined;
+    async getApplicationMFExports(app) {
+        const exports = this.pluginsService.getMFExports(app, [], true);
+        return exports;
     }
-    async refreshPackage() {
-        this.isLoading = true;
-        this.package = await this.ecosystemService.getApplication(this.package.id);
-        this.activatedRoute.snapshot.parent.data.contextData = this.package;
-        this.sortVersions();
-        this.isLoading = false;
+    async getApplicationMFRemotes(app) {
+        const appConfigRemotes = this.pluginsService.getMFRemotes(app);
+        this.remotePlugins$.next(appConfigRemotes || {});
     }
-    sortVersions() {
-        this.sortedVersions = this.pluginsService.sortVersions({
-            list: this.package.applicationVersions,
-            path: ['version']
-        }, 'desc');
-        this.toggleUploadPossibility();
+    async getAllApplicationsMFExports(app) {
+        const exportedByCurrentApp = await this.getApplicationMFExports(app);
+        const allAppsMFExports = await this.pluginsService.getAllMFExports(true);
+        this.allAvailablePlugins$.next([...allAppsMFExports, ...exportedByCurrentApp]);
     }
-    async setUploadedVersionAsLatest() {
-        const uploadedVersion = this.package.applicationVersions[this.package.applicationVersions.length - 1];
-        try {
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.UPLOAD,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SUCCESS,
-                url: this.CURRENT_LOCATION
-            });
-            await this.modal.confirm(gettext('Upload successful'), this.translateService.instant(gettext('Do you want to set version {{version}} as the latest? Deploying a new application will always use this version.'), { version: uploadedVersion.version }), Status.SUCCESS, {
-                ok: gettext('Set as latest`version`'),
-                cancel: gettext('Keep unchanged`version`')
-            });
-        }
-        catch (e) {
-            await this.refreshPackage();
-            return;
+    async getAllSelfMFExports(app) {
+        const exportedByCurrentApp = await this.getApplicationMFExports(app);
+        this.selfPlugins$.next(exportedByCurrentApp.filter(({ scope }) => scope === 'self'));
+    }
+    getInstallModalInitState() {
+        return {
+            plugins$: combineLatest([this.allAvailablePlugins$, this.installedPlugins$]).pipe(map(([allPlugins, installedPlugins]) => {
+                // to not mutate the original array and objects contained in it
+                const allPluginsAsNewObjects = allPlugins.map(p => ({ ...p }));
+                for (const plugin of installedPlugins) {
+                    let installedPlugin = allPluginsAsNewObjects.find(p => p.id === plugin.id);
+                    if (!installedPlugin && plugin.installedViaTag) {
+                        installedPlugin = allPluginsAsNewObjects.find(p => p.contextPath === plugin.contextPath &&
+                            p.module === plugin.module &&
+                            p.tags?.includes(plugin.installedViaTag));
+                    }
+                    if (installedPlugin) {
+                        installedPlugin.installed = true;
+                        continue;
+                    }
+                }
+                return allPluginsAsNewObjects.map(p => ({ ...p, installed: !!p.installed }));
+            }), shareReplay(1))
+        };
+    }
+    getOrphanedPlugins(orphanedPluginIds, allPlugins) {
+        const orphanedPlugins = orphanedPluginIds.map(p => this.extractDetails(p));
+        const orphanedPluginsUpdated = orphanedPlugins.map(p => {
+            const pluginWithMatchingTag = allPlugins.find(tmp => tmp.contextPath === p.contextPath &&
+                tmp.module === p.module &&
+                tmp.tags?.includes(p.version || 'latest'));
+            if (pluginWithMatchingTag) {
+                return {
+                    ...pluginWithMatchingTag,
+                    id: p.id,
+                    status: ApplicationPluginStatus.AUTO,
+                    installedViaTag: p.version || 'latest'
+                };
+            }
+            const pluginInDifferentVersion = allPlugins.find(tmp => tmp.contextPath === p.contextPath && tmp.module === p.module);
+            if (pluginInDifferentVersion) {
+                return {
+                    ...pluginInDifferentVersion,
+                    version: p.version,
+                    id: p.id,
+                    status: ApplicationPluginStatus.OUTDATED
+                };
+            }
+            return p;
+        });
+        return orphanedPluginsUpdated;
+    }
+    splitOrphanedPluginsIntoOrphanedAndRevokedPlugins(allPlugins, orphanedPlugins) {
+        const revokedPlugins = new Array();
+        const actuallyOrphanedPlugins = new Array();
+        for (const plugin of orphanedPlugins) {
+            const foundFamiliarPlugin = allPlugins.find(plugin1 => plugin.contextPath === plugin1.contextPath && plugin.module === plugin1.module);
+            if (foundFamiliarPlugin) {
+                revokedPlugins.push(Object.assign({}, foundFamiliarPlugin, plugin, {
+                    status: ApplicationPluginStatus.REVOKED
+                }));
+            }
+            else {
+                actuallyOrphanedPlugins.push(plugin);
+            }
         }
-        await this.setVersionAsLatest(uploadedVersion);
-    }
-    toggleUploadPossibility() {
-        this.preUploadCallback =
-            this.sortedVersions.length < this.versionsLimit
-                ? null
-                : this.acknowledgeLimitReached.bind(this);
+        return { revokedPlugins, actuallyOrphanedPlugins };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: [{
-                type: Output
-            }] } });
-
-class PackageVersionsComponent {
-    constructor(activatedRoute, contextRouteService) {
-        this.activatedRoute = activatedRoute;
-        this.contextRouteService = contextRouteService;
-        this.package = {};
+    getInstalledPlugins(allPlugins, remotePlugins) {
+        const availablePlugins = allPlugins
+            .filter(plugin => remotePlugins.includes(plugin.id))
+            .map(plugin => Object.assign(plugin, {
+            status: plugin.tags?.includes('latest')
+                ? ApplicationPluginStatus.LATEST
+                : ApplicationPluginStatus.OUTDATED
+        }));
+        const orphanedPluginIds = remotePlugins.filter(r => !availablePlugins.find(plugin => plugin.id === r));
+        const orphanedPlugins = this.getOrphanedPlugins(orphanedPluginIds, allPlugins);
+        const notActuallyOrphanedPlugins = orphanedPlugins.filter(p => p.status === ApplicationPluginStatus.AUTO);
+        const orphanedOrRevokedPlugins = orphanedPlugins.filter(p => p.status !== ApplicationPluginStatus.AUTO);
+        const { actuallyOrphanedPlugins, revokedPlugins } = this.splitOrphanedPluginsIntoOrphanedAndRevokedPlugins(allPlugins, orphanedOrRevokedPlugins);
+        return [
+            ...availablePlugins,
+            ...notActuallyOrphanedPlugins,
+            ...revokedPlugins,
+            ...actuallyOrphanedPlugins
+        ];
     }
-    async ngOnInit() {
-        this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
+    extractDetails(pluginId) {
+        const contextPath = this.getStringMatchingRegex(pluginId, /^[^@]*(@|\/)/);
+        const version = this.getStringMatchingRegex(pluginId, /@.*\//);
+        const module = this.getStringMatchingRegex(pluginId, /\/.*$/);
+        const unavailable = gettext('unavailable`plugin`');
+        return {
+            id: pluginId,
+            idLatest: `${contextPath}/${module}`,
+            path: '',
+            module,
+            name: module,
+            status: ApplicationPluginStatus.ORPHANED,
+            contextPath: contextPath,
+            description: unavailable,
+            version: version
+        };
     }
-    clearSelectedVersion() {
-        this.selectedVersion = null;
+    getStringMatchingRegex(str, regex) {
+        const matches = str.match(regex);
+        const value = matches ? matches[0] : '';
+        return value.replace(/(@|\/)/g, '');
     }
-    selectVersion(version) {
-        this.selectedVersion = version;
+    triggerPluginEvent(plugin, result) {
+        const pluginInfo = pick(plugin, [
+            'name',
+            'contextPath',
+            'module',
+            'version',
+            'type',
+            'id'
+        ]);
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+            component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+            result,
+            url: this.CURRENT_LOCATION,
+            ...pluginInfo,
+            targetApplicationName: this.app.name,
+            targetApplicationContextPath: this.app.contextPath
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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"], 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.9", ngImport: i0, type: PackageVersionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsComponent, 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-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: [{
+                type: Input
+            }], dataGrid: [{
+                type: ViewChild,
+                args: [DataGridComponent, { static: false }]
+            }] } });
 
-class PackageGuard {
+class ApplicationPluginsGuard {
     constructor(ecosystemService) {
         this.ecosystemService = ecosystemService;
     }
@@ -2112,703 +2060,877 @@ class PackageGuard {
         if (!app) {
             return false;
         }
-        return this.ecosystemService.isPackage(app);
+        const manifest = app.manifest;
+        if (!manifest) {
+            return false;
+        }
+        return (app.type === ApplicationType.HOSTED &&
+            this.ecosystemService.isOwner(app) &&
+            !this.ecosystemService.isPackage(app) &&
+            // apps like e.g. the public-options should not have the plugins tab
+            !manifest.noAppSwitcher);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageGuard, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageGuard }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.EcosystemService }] });
 
-class PackageVersionsGuard {
-    canActivate(route) {
-        const app = route.data.contextData || route.parent.data.contextData;
-        return !!app?.applicationVersions?.length;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsGuard }); }
+class ApplicationPluginsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, declarations: [ApplicationPluginsComponent,
+            PluginListItemComponent,
+            InstallPluginComponent,
+            PluginListComponent,
+            AppsToUpdateRemotesSelectComponent,
+            AppStatePipe,
+            LabelCellRendererComponent,
+            OrphanedStatusCellRendererComponent,
+            UpdatePluginOfAppComponent,
+            OnlyLatestFilterComponent], imports: [CoreModule, SharedEcosystemModule], exports: [ApplicationPluginsComponent,
+            PluginListItemComponent,
+            InstallPluginComponent,
+            PluginListComponent,
+            AppsToUpdateRemotesSelectComponent,
+            AppStatePipe,
+            LabelCellRendererComponent,
+            OrphanedStatusCellRendererComponent,
+            UpdatePluginOfAppComponent,
+            OnlyLatestFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, providers: [
+            ApplicationPluginsGuard,
+            hookRoute([
+                {
+                    path: 'plugins',
+                    component: ApplicationPluginsComponent,
+                    icon: 'plugin',
+                    label: gettext('Plugins'),
+                    context: ViewContext.Application,
+                    priority: 3,
+                    canActivate: [ApplicationPluginsGuard]
+                }
+            ])
+        ], imports: [CoreModule, SharedEcosystemModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsGuard, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CoreModule, SharedEcosystemModule],
+                    declarations: [
+                        ApplicationPluginsComponent,
+                        PluginListItemComponent,
+                        InstallPluginComponent,
+                        PluginListComponent,
+                        AppsToUpdateRemotesSelectComponent,
+                        AppStatePipe,
+                        LabelCellRendererComponent,
+                        OrphanedStatusCellRendererComponent,
+                        UpdatePluginOfAppComponent,
+                        OnlyLatestFilterComponent
+                    ],
+                    exports: [
+                        ApplicationPluginsComponent,
+                        PluginListItemComponent,
+                        InstallPluginComponent,
+                        PluginListComponent,
+                        AppsToUpdateRemotesSelectComponent,
+                        AppStatePipe,
+                        LabelCellRendererComponent,
+                        OrphanedStatusCellRendererComponent,
+                        UpdatePluginOfAppComponent,
+                        OnlyLatestFilterComponent
+                    ],
+                    providers: [
+                        ApplicationPluginsGuard,
+                        hookRoute([
+                            {
+                                path: 'plugins',
+                                component: ApplicationPluginsComponent,
+                                icon: 'plugin',
+                                label: gettext('Plugins'),
+                                context: ViewContext.Application,
+                                priority: 3,
+                                canActivate: [ApplicationPluginsGuard]
+                            }
+                        ])
+                    ]
+                }]
         }] });
 
-class OnlyLatestPluginVersionPipe {
-    transform(value, disabled) {
-        if (disabled) {
-            return value;
+class FeatureListComponent {
+    constructor(ecosystemService) {
+        this.ecosystemService = ecosystemService;
+        this.reloading = false;
+        this.reload$ = new BehaviorSubject(null);
+        this.features$ = this.reload$.pipe(tap(() => (this.reloading = true)), switchMap(() => this.ecosystemService.getFeatureApplications()), tap(() => (this.reloading = false)), shareReplay());
+    }
+    ngOnInit() {
+        this.loadFeatures();
+    }
+    loadFeatures() {
+        this.reload$.next();
+    }
+    setFilterPipe(pipe) {
+        this.filteredFeatures$ = this.features$.pipe(src => pipe(src));
+    }
+    resetFilters() {
+        this.filtersComponent?.resetAllFilters();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FeatureListComponent, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FeatureListComponent, selector: "c8y-feature-list", viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: ListFiltersComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Features' | translate }}</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]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [icon]=\"'tab'\" [label]=\"'Features' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button (click)=\"reload$.next()\" class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\">\n    <i [ngClass]=\"{ 'icon-spin': reloading }\" c8yIcon=\"refresh\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"features$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(features$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div *ngIf=\"(features$ | async)?.length === 0\" class=\"c8y-empty-state text-center\">\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No features to display.</h3>\n  <p translate>No additional features are subscribed to the tenant.</p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(features$ | async)?.length > 0\">\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Feature' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n    </div>\n  </div>\n  <div *ngFor=\"let feature of filteredFeatures$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      [app]=\"feature\"\n      [canEdit]=\"false\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  *ngIf=\"(features$ | async)?.length > 0 && (filteredFeatures$ | async)?.length === 0\"\n  [icon]=\"'search'\"\n  [title]=\"'No matching features.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n>\n  <button\n    class=\"btn btn-primary\"\n    type=\"button\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\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: "component", type: i2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: i1.ApplicationCardComponent, selector: "c8y-application-card", inputs: ["app", "canEdit"], outputs: ["onAppDeleted", "onAppCloned"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FeatureListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-feature-list', template: "<c8y-title>{{ 'Features' | translate }}</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]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [icon]=\"'tab'\" [label]=\"'Features' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button (click)=\"reload$.next()\" class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\">\n    <i [ngClass]=\"{ 'icon-spin': reloading }\" c8yIcon=\"refresh\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"features$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(features$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div *ngIf=\"(features$ | async)?.length === 0\" class=\"c8y-empty-state text-center\">\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No features to display.</h3>\n  <p translate>No additional features are subscribed to the tenant.</p>\n</div>\n\n<div [ngClass]=\"listClass\" class=\"card-group\">\n  <div class=\"page-sticky-header hidden-xs d-flex\" *ngIf=\"(features$ | async)?.length > 0\">\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Feature' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n    </div>\n  </div>\n  <div *ngFor=\"let feature of filteredFeatures$ | async\" class=\"col-xs-12 col-sm-4 col-md-3\">\n    <c8y-application-card\n      [app]=\"feature\"\n      [canEdit]=\"false\"\n      class=\"d-contents\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  *ngIf=\"(features$ | async)?.length > 0 && (filteredFeatures$ | async)?.length === 0\"\n  [icon]=\"'search'\"\n  [title]=\"'No matching features.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n>\n  <button\n    class=\"btn btn-primary\"\n    type=\"button\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\n" }]
+        }], ctorParameters: () => [{ type: i1.EcosystemService }], propDecorators: { filtersComponent: [{
+                type: ViewChild,
+                args: [ListFiltersComponent]
+            }] } });
+
+class AddMicroserviceComponent {
+    constructor(ecosystemService, modal, tenantService, docs) {
+        this.ecosystemService = ecosystemService;
+        this.modal = modal;
+        this.tenantService = tenantService;
+        this.docs = docs;
+        this.slaHref = this.docs.getUserGuideLink('docs/microservice-sdk/microservices-sla');
+        this.headerText = gettext('Add microservice');
+        this.successText = gettext('Microservice created');
+        this.createMicroserviceApplicationHandler = (f) => this.createMicroserviceApplication(f);
+        this.uploadMicroserviceHandler = (f, app) => this.uploadMicroservice(f, app);
+    }
+    async createMicroserviceApplication(file) {
+        await this.ecosystemService.isValidAppType(file, ApplicationType.MICROSERVICE);
+        return this.ecosystemService.createAppForArchive(file);
+    }
+    async uploadMicroservice(file, microservice) {
+        const subscribeToCurrentTenant = await this.askIfActivationAfterUploadNeeded();
+        await this.ecosystemService.uploadArchiveToApp(file, microservice);
+        await this.subscribeMicroservice(microservice, subscribeToCurrentTenant);
+    }
+    async askIfActivationAfterUploadNeeded() {
+        try {
+            await this.modal.confirm(gettext('Subscribe to microservice'), gettext('You are about to subscribe to the microservice after upload. Do you want to subscribe to it?'), Status.INFO, { ok: gettext('Subscribe'), cancel: gettext("Don't subscribe") });
+            return true;
+        }
+        catch (ex) {
+            return false;
+        }
+    }
+    async subscribeMicroservice(app, subscribeToCurrentTenant) {
+        const tenant = (await this.tenantService.current()).data;
+        const applications = tenant.applications.references;
+        const isSubscribed = applications.some(({ application }) => application.id === app.id);
+        if (!isSubscribed && subscribeToCurrentTenant) {
+            try {
+                return await this.tenantService.subscribeApplication(tenant, app);
+            }
+            catch (res) {
+                if (res.status === 409) {
+                    throw Error(ERROR_TYPE.ALREADY_SUBSCRIBED);
+                }
+            }
+        }
+        else if (isSubscribed && !subscribeToCurrentTenant) {
+            return this.tenantService.unsubscribeApplication(tenant, app);
         }
-        return value.pipe(map(list => list.filter(plugin => !!plugin.tags?.includes('latest'))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestPluginVersionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestPluginVersionPipe, name: "onlyLatestPluginVersion" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddMicroserviceComponent, deps: [{ token: i1.EcosystemService }, { token: i2.ModalService }, { token: i4.TenantService }, { token: i2.DocsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddMicroserviceComponent, selector: "c8y-add-microservice", ngImport: i0, template: `<div class="p-16" translate [translateParams]="{ slaHref: slaHref }" ngNonBindable>
+      By uploading a microservice, you agree to the
+      <a href="{{ slaHref }}" target="_blank" rel="noopener noreferrer"
+        >Microservice Deployment SLA</a
+      >
+      which outlines our microservices hosting terms, conditions, and performance standards.
+    </div>
+    <c8y-add-application
+      [headerIcon]="'microchip'"
+      [headerText]="headerText"
+      [successText]="successText"
+      [createApplicationHandler]="createMicroserviceApplicationHandler"
+      [uploadApplicationHandler]="uploadMicroserviceHandler"
+    ></c8y-add-application>`, isInline: true, dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.AddApplicationComponent, selector: "c8y-add-application", inputs: ["headerText", "headerIcon", "successText", "createApplicationHandler", "uploadApplicationHandler", "canGoBack", "applicationType"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestPluginVersionPipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddMicroserviceComponent, decorators: [{
+            type: Component,
             args: [{
-                    name: 'onlyLatestPluginVersion'
+                    selector: 'c8y-add-microservice',
+                    template: `<div class="p-16" translate [translateParams]="{ slaHref: slaHref }" ngNonBindable>
+      By uploading a microservice, you agree to the
+      <a href="{{ slaHref }}" target="_blank" rel="noopener noreferrer"
+        >Microservice Deployment SLA</a
+      >
+      which outlines our microservices hosting terms, conditions, and performance standards.
+    </div>
+    <c8y-add-application
+      [headerIcon]="'microchip'"
+      [headerText]="headerText"
+      [successText]="successText"
+      [createApplicationHandler]="createMicroserviceApplicationHandler"
+      [uploadApplicationHandler]="uploadMicroserviceHandler"
+    ></c8y-add-application>`
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.ModalService }, { type: i4.TenantService }, { type: i2.DocsService }] });
 
-class InstallPluginComponent {
-    constructor(bsModalRef, modal, ecosystemService) {
-        this.bsModalRef = bsModalRef;
-        this.modal = modal;
+class MicroserviceListComponent {
+    constructor(ecosystemService, wizardModalService, cd) {
         this.ecosystemService = ecosystemService;
-        this.filterTerm$ = new BehaviorSubject('');
-        this.filteredPlugins$ = new BehaviorSubject([]);
-        this.selectedPlugins = [];
-        this.result = new Promise((resolve, reject) => {
-            this._install = resolve;
-            this._cancel = reject;
-        });
-        this.onlyLatestPluginVersion = true;
+        this.wizardModalService = wizardModalService;
+        this.cd = cd;
+        this.reloading = false;
+        this.reload$ = new BehaviorSubject(null);
+        this.microservices$ = this.reload$.pipe(tap(() => (this.reloading = true)), switchMap(() => this.ecosystemService.getMicroservices()), tap(microservices => {
+            microservices.forEach(microservice => {
+                microservice.filterProps = this.ecosystemService.getAppFilterProps(microservice);
+            });
+        }), tap(() => (this.reloading = false)), shareReplay());
+        this.isMicroserviceHostingAllowed$ = this.reload$.pipe(switchMap(() => this.ecosystemService.isMicroserviceHostingAllowed()), shareReplay());
+        this.packageAvailabilities = [
+            APP_STATE.SUBSCRIBED.label,
+            APP_STATE.CUSTOM.label
+        ];
     }
     ngOnInit() {
-        this.filteredPlugins$ = combineLatest([this.plugins$, this.filterTerm$]).pipe(map(([plugins, filterTerm]) => filterTerm.trim().length === 0
-            ? plugins
-            : plugins.filter((plugin) => this.ecosystemService.filterContainString(plugin.name, filterTerm))));
-    }
-    cancel() {
-        this.bsModalRef.hide();
-        this._cancel();
+        this.loadMicroservices();
+        // manually trigger detection to not have ExpressionChangedAfterItHasBeenChecked error in spec file
+        this.cd.detectChanges();
     }
-    install() {
-        this._install(this.selectedPlugins);
-        this.bsModalRef.hide();
+    loadMicroservices() {
+        this.reload$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InstallPluginComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.ModalService }, { token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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 id=\"modal-title\" class=\"modal-title h4\" translate>Available plugins</div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p class=\"text-medium m-b-8\" translate>Select the compatible plugins to install</p>\n    <label class=\"c8y-switch\">\n      <input type=\"checkbox\" [(ngModel)]=\"onlyLatestPluginVersion\" />\n      <span></span>\n      <span translate>Only latest version of plugins</span>\n    </label>\n    <c8y-filter (onSearch)=\"this.filterTerm$.next($event)\"></c8y-filter>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <c8y-plugin-list\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$ | onlyLatestPluginVersion: !onlyLatestPluginVersion\"\n      [selectable]=\"true\"\n      class=\"m-t-16\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      (click)=\"cancel()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      data-cy=\"install-plugin--cancel-button\"\n      type=\"button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      data-cy=\"install-plugin--install-button\"\n      type=\"button\"\n    >\n      {{ 'Install' | translate }}\n      <span class=\"badge\" *ngIf=\"selectedPlugins.length as length\">{{ length }}</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: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { 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: OnlyLatestPluginVersionPipe, name: "onlyLatestPluginVersion" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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 id=\"modal-title\" class=\"modal-title h4\" translate>Available plugins</div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p class=\"text-medium m-b-8\" translate>Select the compatible plugins to install</p>\n    <label class=\"c8y-switch\">\n      <input type=\"checkbox\" [(ngModel)]=\"onlyLatestPluginVersion\" />\n      <span></span>\n      <span translate>Only latest version of plugins</span>\n    </label>\n    <c8y-filter (onSearch)=\"this.filterTerm$.next($event)\"></c8y-filter>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <c8y-plugin-list\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$ | onlyLatestPluginVersion: !onlyLatestPluginVersion\"\n      [selectable]=\"true\"\n      class=\"m-t-16\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      (click)=\"cancel()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      data-cy=\"install-plugin--cancel-button\"\n      type=\"button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      data-cy=\"install-plugin--install-button\"\n      type=\"button\"\n    >\n      {{ 'Install' | translate }}\n      <span class=\"badge\" *ngIf=\"selectedPlugins.length as length\">{{ length }}</span>\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.ModalService }, { type: i1.EcosystemService }], propDecorators: { plugins$: [{
-                type: Input
-            }] } });
-
-class LabelCellRendererComponent {
-    constructor(context) {
-        this.context = context;
+    addMicroservice() {
+        const initialState = {
+            id: EcosystemWizards.MICROSERVICE_UPLOAD
+        };
+        const modalOptions = { initialState };
+        const modalRef = this.wizardModalService.show(modalOptions);
+        modalRef.content.onClose.subscribe(() => {
+            this.loadMicroservices();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelCellRendererComponent, deps: [{ token: i2.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: LabelCellRendererComponent, selector: "c8y-label-cell-renderer", ngImport: i0, template: "<span class=\"label label-info\">{{ context.value }}</span>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-label-cell-renderer', template: "<span class=\"label label-info\">{{ context.value }}</span>\n" }]
-        }], ctorParameters: () => [{ type: i2.CellRendererContext }] });
-
-class OrphanedStatusCellRendererComponent {
-    constructor(context) {
-        this.context = context;
-        this.label = this.getLabel(context.value);
+    setFilterPipe(pipe) {
+        this.filteredMicroservices$ = this.microservices$.pipe(src => pipe(src));
     }
-    getLabel(statusValue) {
-        switch (statusValue) {
-            case ApplicationPluginStatus.OUTDATED:
-                return {
-                    value: statusValue,
-                    text: gettext('OUTDATED`plugin status`'),
-                    class: 'label-warning'
-                };
-            case ApplicationPluginStatus.ORPHANED:
-                return {
-                    value: statusValue,
-                    text: gettext('ORPHANED`plugin status`'),
-                    class: 'label-danger'
-                };
-            case ApplicationPluginStatus.REVOKED:
-                return {
-                    value: statusValue,
-                    text: gettext('REVOKED`plugin status`'),
-                    class: 'label-danger'
-                };
-            case ApplicationPluginStatus.LATEST:
-                return {
-                    value: statusValue,
-                    text: gettext('LATEST`plugin status`'),
-                    class: 'label-success'
-                };
-            case ApplicationPluginStatus.AUTO:
-                return {
-                    value: statusValue,
-                    text: gettext('AUTO`plugin status`'),
-                    class: 'label-success'
-                };
-            default:
-                return null;
-        }
+    resetFilters() {
+        this.filtersComponent?.resetAllFilters();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OrphanedStatusCellRendererComponent, deps: [{ token: i2.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: OrphanedStatusCellRendererComponent, selector: "c8y-orphaned-status-cell-renderer", ngImport: i0, template: "<span\n  *ngIf=\"label\"\n  class=\"label\"\n  [ngClass]=\"label.class\"\n  [title]=\"label.text | translate\"\n>\n  {{ label.text | translate }}\n</span>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MicroserviceListComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: MicroserviceListComponent, selector: "c8y-microservice-list", viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: ListFiltersComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Microservices' | translate }}</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]=\"'microchip'\"\n    [label]=\"'Microservices' | translate\"\n    [path]=\"'ecosystem/microservice/microservices'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"100\"\n    *ngIf=\"isMicroserviceHostingAllowed$ | async\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add microservice' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#managing-microservices\"></c8y-help>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"microservices$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(microservices$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div\n  class=\"c8y-empty-state text-center\"\n  *ngIf=\"(microservices$ | async)?.length === 0\"\n>\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No microservices to display.</h3>\n  <p translate>Add your first microservice by clicking below.</p>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      {{ 'Add microservice' | translate }}\n    </button>\n  </p>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex\"\n    *ngIf=\"(microservices$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Microservice' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let microservice of filteredMicroservices$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadMicroservices()\"\n      [app]=\"microservice\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching microservices.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(microservices$ | async)?.length > 0 && (filteredMicroservices$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\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: "directive", type: i2.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: i1.ApplicationCardComponent, selector: "c8y-application-card", inputs: ["app", "canEdit"], outputs: ["onAppDeleted", "onAppCloned"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OrphanedStatusCellRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MicroserviceListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-orphaned-status-cell-renderer', template: "<span\n  *ngIf=\"label\"\n  class=\"label\"\n  [ngClass]=\"label.class\"\n  [title]=\"label.text | translate\"\n>\n  {{ label.text | translate }}\n</span>\n" }]
-        }], ctorParameters: () => [{ type: i2.CellRendererContext }] });
+            args: [{ selector: 'c8y-microservice-list', template: "<c8y-title>{{ 'Microservices' | translate }}</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]=\"'microchip'\"\n    [label]=\"'Microservices' | translate\"\n    [path]=\"'ecosystem/microservice/microservices'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<ng-container *c8yIfAllowed=\"['ROLE_APPLICATION_MANAGEMENT_ADMIN']\">\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"100\"\n    *ngIf=\"isMicroserviceHostingAllowed$ | async\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add microservice' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#managing-microservices\"></c8y-help>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-list-filters\n    *ngIf=\"microservices$ | async\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n  ></c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(microservices$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<div\n  class=\"c8y-empty-state text-center\"\n  *ngIf=\"(microservices$ | async)?.length === 0\"\n>\n  <h1 class=\"c8y-icon c8y-icon-modules c8y-icon-duocolor\"></h1>\n  <h3 translate>No microservices to display.</h3>\n  <p translate>Add your first microservice by clicking below.</p>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add microservice' | translate }}\"\n      (click)=\"addMicroservice()\"\n    >\n      {{ 'Add microservice' | translate }}\n    </button>\n  </p>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex\"\n    *ngIf=\"(microservices$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Microservice' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let microservice of filteredMicroservices$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadMicroservices()\"\n      [app]=\"microservice\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching microservices.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(microservices$ | async)?.length > 0 && (filteredMicroservices$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\n" }]
+        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.WizardModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { filtersComponent: [{
+                type: ViewChild,
+                args: [ListFiltersComponent]
+            }] } });
 
-class UpdatePluginOfAppComponent {
-    constructor(bsModalRef, pluginsService, alert, ecosystemService, gainsightService) {
-        this.bsModalRef = bsModalRef;
-        this.pluginsService = pluginsService;
-        this.alert = alert;
-        this.ecosystemService = ecosystemService;
-        this.gainsightService = gainsightService;
-        this.CURRENT_LOCATION = location.href;
-        this.result = new Promise((resolve, reject) => {
-            this._install = resolve;
-            this._cancel = reject;
-        });
-        this.updateAll = true;
-    }
-    async update() {
-        const remotes = this.pluginsService.getMFRemotes(this.app);
-        const oldRemotePath = `${this.plugin.contextPath}@${this.plugin.version}`;
-        const newRemotePath = `${this.plugin.contextPath}@${this.applicationVersion.version}`;
-        let oldRemoteModules = [...(remotes[oldRemotePath] || [])];
-        if (!oldRemoteModules.length) {
-            this.alert.warning(gettext('Could not change the version of plugin.'));
-            this.cancel();
-            return;
-        }
-        const result = await this.ecosystemService.verifyLicenses([this.plugin]);
-        if (!result) {
-            this.alert.warning(gettext('Plugin update aborted by user.'));
-            this.cancel();
-            return;
-        }
-        let remoteModulesOfNewVersion = [...(remotes[newRemotePath] || [])];
-        let olderVersions = {};
-        if (this.updateAll) {
-            olderVersions = Object.keys(remotes)
-                .filter(key => key.startsWith(`${this.plugin.contextPath}@`))
-                .reduceRight((prev, curr) => {
-                prev[curr] = undefined;
-                return prev;
-            }, {});
-            oldRemoteModules = Object.keys(olderVersions)
-                .map(version => remotes[version])
-                .reduceRight((prev, curr) => {
-                prev.push(...curr);
-                return prev;
-            }, []);
-            remoteModulesOfNewVersion.push(...oldRemoteModules);
-        }
-        else {
-            remoteModulesOfNewVersion.push(this.plugin.module);
-            olderVersions[oldRemotePath] = oldRemoteModules.filter(module => module !== this.plugin.module);
-            if (!olderVersions[oldRemotePath].length) {
-                olderVersions[oldRemotePath] = undefined;
-            }
-        }
-        remoteModulesOfNewVersion = uniq(remoteModulesOfNewVersion);
-        const newRemotes = {
-            ...remotes,
-            ...olderVersions,
-            [newRemotePath]: remoteModulesOfNewVersion
-        };
-        try {
-            await this.pluginsService.updateRemotesInAppConfig(this.app, newRemotes);
-            this.alert.success(gettext(`Switched the version of plugin.`));
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.UPDATE_PLUGIN_OF_APP,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.CHANGE_PLUGIN_VERSION,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_VERSION_CHANGED,
-                url: this.CURRENT_LOCATION
-            });
-        }
-        catch (e) {
-            this.alert.addServerFailure(e);
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.UPDATE_PLUGIN_OF_APP,
-                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.CHANGE_PLUGIN_VERSION,
-                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                url: this.CURRENT_LOCATION
-            });
-        }
-        this.bsModalRef.hide();
-        this._install();
+class AddPackageComponent {
+    constructor(ecosystemService) {
+        this.ecosystemService = ecosystemService;
+        this.headerText = gettext('Add extension package');
+        this.successText = gettext('Extension package created');
+        this.createPackageAppHandler = (f) => this.createPackageApp(f);
+        this.uploadPackageHandler = (f, app) => this.uploadPackage(f, app);
     }
-    cancel() {
-        this.bsModalRef.hide();
-        this._cancel();
+    async createPackageApp(file) {
+        await this.ecosystemService.isValidAppType(file, ApplicationType.HOSTED);
+        return await this.ecosystemService.createAppForArchive(file, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$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" }] }); }
+    uploadPackage(file, pckg) {
+        return this.ecosystemService.uploadArchiveToApp(file, pckg, true);
+    }
+    next() {
+        this.stepper.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddPackageComponent, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddPackageComponent, selector: "c8y-add-package", viewQueries: [{ propertyName: "stepper", first: true, predicate: C8yStepper, descendants: true, static: true }], ngImport: i0, template: `<c8y-add-application
+    [headerIcon]="'big-parcel'"
+    [headerText]="headerText"
+    [successText]="successText"
+    [createApplicationHandler]="createPackageAppHandler"
+    [uploadApplicationHandler]="uploadPackageHandler"
+    [applicationType]="'package'"
+  ></c8y-add-application>`, isInline: true, dependencies: [{ kind: "component", type: i1.AddApplicationComponent, selector: "c8y-add-application", inputs: ["headerText", "headerIcon", "successText", "createApplicationHandler", "uploadApplicationHandler", "canGoBack", "applicationType"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UpdatePluginOfAppComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddPackageComponent, 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" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i1.EcosystemService }, { type: i2.GainsightService }] });
+            args: [{
+                    selector: 'c8y-add-package',
+                    template: `<c8y-add-application
+    [headerIcon]="'big-parcel'"
+    [headerText]="headerText"
+    [successText]="successText"
+    [createApplicationHandler]="createPackageAppHandler"
+    [uploadApplicationHandler]="uploadPackageHandler"
+    [applicationType]="'package'"
+  ></c8y-add-application>`
+                }]
+        }], ctorParameters: () => [{ type: i1.EcosystemService }], propDecorators: { stepper: [{
+                type: ViewChild,
+                args: [C8yStepper, { static: true }]
+            }] } });
 
-class ApplicationPluginsComponent {
-    constructor(activatedRoute, ecosystemService, bsModalService, pluginsService, alertService, gainsightService) {
-        this.activatedRoute = activatedRoute;
+class DeployApplicationComponent {
+    constructor(ecosystemService, wizardComponent, translate, pluginService, gainsightService, router) {
         this.ecosystemService = ecosystemService;
-        this.bsModalService = bsModalService;
-        this.pluginsService = pluginsService;
-        this.alertService = alertService;
+        this.wizardComponent = wizardComponent;
+        this.translate = translate;
+        this.pluginService = pluginService;
         this.gainsightService = gainsightService;
-        this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_ECOSYSTEM;
+        this.router = router;
         this.CURRENT_LOCATION = location.href;
-        this.remotePlugins$ = new BehaviorSubject({});
-        this.allAvailablePlugins$ = new BehaviorSubject([]);
-        this.selfPlugins$ = new BehaviorSubject([]);
-        this.installedPlugins$ = combineLatest([
-            this.remotePlugins$.pipe(map(remotes => PluginsService.convertInstalledRemotesToIds(remotes))),
-            this.allAvailablePlugins$
-        ]).pipe(map(([remotePlugins, allPlugins]) => this.getInstalledPlugins(allPlugins, remotePlugins)), shareReplay(1));
-        this.orphanedPlugins$ = this.installedPlugins$.pipe(map(plugins => plugins.filter(p => p.status === ApplicationPluginStatus.ORPHANED)));
-        this.isStandard$ = combineLatest([this.installedPlugins$, this.selfPlugins$]).pipe(map(([installedPlugins, selfPlugins]) => {
-            const manifestRemotes = this.app?.manifest?.remotes || {};
-            // ensure that every installed plugin is a self plugin or a plugin from the manifest
-            const allInstalledPluginsAreSelf = installedPlugins.every(p => selfPlugins.some(selfPlugin => selfPlugin.id === p.id) ||
-                (Array.isArray(manifestRemotes[p.contextPath]) &&
-                    manifestRemotes[p.contextPath].includes(p.module)));
-            // ensure that every self plugin is installed
-            const allSelfPluginsAreInstalled = selfPlugins.every(selfPlugin => installedPlugins.some(p => p.id === selfPlugin.id));
-            const configRemotes = this.app?.config?.remotes || {};
-            // ensure that every remote from the manifest is in the config
-            // if no config exists we are also all good
-            const everyRemoteFromManifestIsInConfig = !this.app?.config?.remotes ||
-                Object.keys(manifestRemotes).every(contextPath => Array.isArray(configRemotes[contextPath]) &&
-                    Array.isArray(manifestRemotes[contextPath]) &&
-                    manifestRemotes[contextPath].every(module => configRemotes[contextPath].includes(module)));
-            return (allInstalledPluginsAreSelf &&
-                allSelfPluginsAreInstalled &&
-                everyRemoteFromManifestIsInConfig);
-        }));
-        this.title = gettext('Installed plugins');
-        this.loadMoreItemsLabel = gettext('Load more packages');
-        this.loadingItemsLabel = gettext('Loading packages…');
-        this.actionControls = this.getActionControls();
-        this.bulkActionControls = this.getBulkActionControls();
-        this.headerActionControls = [];
-        this.noResultsMessage = gettext('No plugins to display.');
-        this.noDataMessage = gettext('No plugins installed.');
-        this.noResultsSubtitle = gettext('Refine your search terms or check your spelling.');
-        this.noDataSubtitle = gettext("This application doesn't have any plugin. Click below to install.");
-        this.pagination = {
-            pageSize: 10,
-            currentPage: 1
-        };
-        this.displayOptions = {
-            bordered: false,
-            striped: true,
-            filter: true,
-            gridHeader: true,
-            hover: true
-        };
-        this.columns = [
-            {
-                name: 'name',
-                header: gettext('Plugin name'),
-                path: 'name',
-                filterable: true
-            },
-            {
-                name: 'Version',
-                header: gettext('Version'),
-                path: 'version',
-                filterable: false
-            },
-            {
-                name: 'Tag',
-                header: gettext('Tag`noun`'),
-                path: 'installedViaTag',
-                filterable: false,
-                cellRendererComponent: LabelCellRendererComponent
-            },
-            {
-                name: 'description',
-                header: gettext('Description'),
-                path: 'description',
-                filterable: false,
-                cellCSSClassName: 'small'
-            },
-            {
-                name: 'contextPath',
-                header: gettext('Source'),
-                path: 'contextPath',
-                filterable: false,
-                cellRendererComponent: LabelCellRendererComponent
-            },
-            {
-                name: 'scope',
-                header: gettext('Scope'),
-                path: 'scope',
-                filterable: false,
-                visible: false,
-                cellRendererComponent: LabelCellRendererComponent
-            },
-            {
-                name: 'status',
-                header: gettext('Status'),
-                path: 'status',
-                filterable: false,
-                cellRendererComponent: OrphanedStatusCellRendererComponent
+        this.inProgress = true;
+        this.isDeployed = false;
+        this.deployedWithSuccess = false;
+        this.model = {
+            selected: undefined,
+            binary: {
+                id: undefined
             }
-        ];
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.addInstallButtonToHeaderActionControls();
-        this.loadData();
-    }
-    async loadData() {
-        this.isLoading = true;
-        await this.getApplicationMO();
-        await this.getApplicationMFRemotes(this.app);
-        await this.getAllApplicationsMFExports(this.app);
-        await this.getAllSelfMFExports(this.app);
-        this.isLoading = false;
+        };
+        this.canDeploy = false;
+        this.descriptionTemplate = gettext('Deploy application using "{{ packageName }}" package');
+        this.successMessageTemplate = gettext('Application "{{ packageName }}" created');
+        this.doneLabel = gettext('Done');
+        this.cancelLabel = gettext('Cancel');
+        this.package = this.wizardComponent.package;
     }
-    async resetToDefault() {
-        this.isLoading = true;
-        await this.pluginsService.resetRemotes(this.app);
-        await this.loadData();
-        this.alertService.success(gettext('The application was reset to its default plugins.'));
+    async ngOnInit() {
+        const apps = await this.ecosystemService.getHostedAndPackageApplications();
+        this.newAppConfig = this.ecosystemService.getUniqueAppConfig(this.package, apps);
+        this.headerText = this.getHeaderText();
+        this.inProgress = false;
     }
-    async installPlugins() {
+    async deployApp() {
+        this.inProgress = true;
+        const formGroupValue = this.applicationPropertiesForm.formGroup.getRawValue();
+        // Verify if selected package version is compatible with current platform versions.
+        this.package.manifest.version = this.model.selected.version;
+        const verifyVersionCompatibility = await this.ecosystemService.verifyBlueprintVersionsCompatibility(this.package.manifest);
+        if (!verifyVersionCompatibility) {
+            this.cancel();
+            return;
+        }
+        const { contextPath, license, name, manifest } = this.package;
+        const type = this.pluginService.getPackageType(this.package);
+        const licensedApp = {
+            contextPath,
+            license: license || manifest.license,
+            name,
+            type,
+            version: this.model.selected.version
+        };
+        const isArchived = await this.ecosystemService.verifyArchived([licensedApp]);
+        if (!isArchived) {
+            this.cancel();
+            return;
+        }
+        const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses([licensedApp]);
+        if (!licensesVerifiedByUser) {
+            this.cancel();
+            return;
+        }
         try {
-            const pluginsToAdd = await this.bsModalService.show(InstallPluginComponent, {
-                class: 'modal-sm',
-                ariaDescribedby: 'modal-body',
-                ariaLabelledBy: 'modal-title',
-                initialState: this.getInstallModalInitState(),
-                ignoreBackdropClick: true
-            }).content.result;
-            const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses(pluginsToAdd);
-            if (!licensesVerifiedByUser) {
-                return;
-            }
-            const verifyVersionCompatibility = await this.ecosystemService.verifyPluginVersionsCompatibility(pluginsToAdd, this.app);
-            if (!verifyVersionCompatibility) {
-                return;
-            }
-            this.isLoading = true;
-            await this.handleRemotesInstallation(pluginsToAdd);
-            this.alertService.success(gettext('Plugins installed.'));
-            pluginsToAdd.forEach(plugin => {
-                const pluginCustomEventInfo = pick(plugin, [
-                    'name',
-                    'contextPath',
-                    'module',
-                    'version',
-                    'type',
-                    'id'
-                ]);
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_INSTALLED,
-                    url: this.CURRENT_LOCATION,
-                    ...pluginCustomEventInfo,
-                    targetApplicationName: this.app.name,
-                    targetApplicationContextPath: this.app.contextPath
-                });
+            this.deployedApp = await this.ecosystemService.deployApp(this.package, formGroupValue, this.model);
+            const applicationCustomEventInfo = pick(this.package, [
+                'id',
+                'name',
+                'contextPath',
+                'label',
+                'key'
+            ]);
+            this.deployedWithSuccess = true;
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.DEPLOYED,
+                url: this.CURRENT_LOCATION,
+                ...applicationCustomEventInfo,
+                package: this.deployedApp?.manifest?.package ?? null
             });
         }
-        catch (ex) {
-            if (ex) {
-                this.alertService.addServerFailure(ex);
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                    url: this.CURRENT_LOCATION,
-                    error: ex
-                });
-            }
+        catch (error) {
+            this.ecosystemService.alertError(error);
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                url: this.CURRENT_LOCATION,
+                error
+            });
         }
         finally {
-            this.isLoading = false;
+            this.markAsDeployed();
         }
     }
-    async removePlugins(plugins) {
-        try {
-            this.isLoading = true;
-            const installedPlugins = await firstValueFrom(this.installedPlugins$);
-            const updatedRemotes = await this.pluginsService.removeRemotes(this.app, plugins.map(id => installedPlugins.find(p => p.id === id)));
-            this.emitRemotes(updatedRemotes);
-            this.isLoading = false;
-            this.dataGrid.cancel();
-            this.alertService.success(gettext('Plugins removed.'));
-            plugins.forEach(plugin => {
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_REMOVED,
-                    url: this.CURRENT_LOCATION,
-                    id: plugin,
-                    targetApplicationName: this.app.name,
-                    targetApplicationContextPath: this.app.contextPath
-                });
-            });
+    cancel() {
+        this.wizardComponent.close();
+    }
+    onAppVersionSelect(appVersion) {
+        Object.assign(this.model, {
+            selected: appVersion
+        });
+        this.canDeploy = true;
+    }
+    open() {
+        this.router.navigateByUrl(ViewContext.Application.replace(':id', `${this.deployedApp.id}`));
+        this.cancel();
+    }
+    markAsDeployed() {
+        this.isDeployed = true;
+        this.inProgress = false;
+    }
+    getHeaderText() {
+        return this.translate.instant(this.descriptionTemplate, {
+            packageName: this.package.name
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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.9", 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: [{
+                type: ViewChild,
+                args: [ApplicationPropertiesFormComponent]
+            }] } });
+
+class PackageDetailsComponent {
+    constructor(activatedRoute, client, wizardModalService, ecosystemService, contextRouteService, pluginsService, packageAvailabilityService, ui, pluginService, 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([]);
+        this.isChangingAvailability = false;
+        this.isOwnedByCurrentTenant = false;
+        this.isAllowedToCreateSubtenants = false;
+        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;
+        await this.loadData();
+    }
+    deploy() {
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
+            component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_DETAILS,
+            action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION_INITIATED
+        });
+        const initialState = {
+            wizardConfig: {},
+            id: EcosystemWizards.BLUEPRINT_DEPLOYMENT,
+            package: this.package
+        };
+        const modalOptions = { initialState };
+        this.wizardModalService.show(modalOptions);
+    }
+    async togglePackageAvailability(pckg, newAvailability) {
+        this.isChangingAvailability = true;
+        pckg = await this.packageAvailabilityService.askIfAvailabilityShouldBeSetTo(pckg, newAvailability);
+        const availabilityHasChanged = pckg.availability === newAvailability;
+        if (availabilityHasChanged) {
+            await this.loadData(pckg);
+            this.contextRouteService.setContext(this.activatedRoute, pckg);
         }
-        catch (ex) {
-            if (ex) {
-                this.alertService.addServerFailure(ex);
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                    url: this.CURRENT_LOCATION,
-                    error: ex
-                });
-            }
+        else {
+            this.packageAvailability = this.package.availability;
         }
-        finally {
-            this.isLoading = false;
+        this.isChangingAvailability = false;
+    }
+    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.name = this.package?.name;
+        this.description = this.package?.manifest?.description;
+        this.markdown = await this.getReadmeFileContent();
+        this.baseUrl = this.getBaseUrl();
+        this.appState = this.ecosystemService.getAppState(this.package);
+        this.isPackageBlueprint = this.ecosystemService.isPackageBlueprint(this.package);
+        this.isOwnedByCurrentTenant =
+            this.package?.owner?.tenant?.id === this.ui.currentTenant.value?.name;
+        this.extractPackageMFExports();
+    }
+    extractPackageMFExports() {
+        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 cleanupOrphanedPlugins(plugins) {
-        const pluginIds = plugins.map(p => p.id);
-        await this.removePlugins(pluginIds);
+    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;
     }
-    getActionControls() {
-        return [
-            {
-                type: 'customUpdate',
-                text: gettext('Update'),
-                icon: 'caret-square-o-up',
-                showIf: plugin => {
-                    return (plugin.status === ApplicationPluginStatus.OUTDATED ||
-                        plugin.status === ApplicationPluginStatus.REVOKED);
-                },
-                callback: plugin => this.updatePlugin(this.app, plugin)
-            },
-            {
-                type: 'customDowngrade',
-                text: gettext('Downgrade'),
-                icon: 'caret-square-o-down',
-                showIf: (plugin) => {
-                    if (plugin.scope === PluginsExportScopes.SELF ||
-                        plugin.scope === PluginsExportScopes.SELF_OPTIONAL) {
-                        return false;
-                    }
-                    return plugin.status === ApplicationPluginStatus.LATEST;
-                },
-                callback: plugin => this.updatePlugin(this.app, plugin, true)
-            }
-        ];
+    getBaseUrl() {
+        return `/apps/${this.package.contextPath}/`;
     }
-    getBulkActionControls() {
-        return [
-            {
-                type: 'customDelete',
-                text: gettext('Remove'),
-                icon: 'trash',
-                callback: plugins => this.removePlugins(plugins)
-            }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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 }] });
+
+class PackagesListComponent {
+    constructor(ecosystemService, wizardModalService, permissions) {
+        this.ecosystemService = ecosystemService;
+        this.wizardModalService = wizardModalService;
+        this.permissions = permissions;
+        this.reloading = false;
+        this.reload$ = new BehaviorSubject(null);
+        this.hasAdminPermissions = false;
+        this.emptyStateSubtitle = gettext('Add your first package by clicking below.');
+        this.packageTypes = defaultPackageTypes;
+        this.packageAvailabilities = [
+            APP_STATE.SUBSCRIBED.label,
+            APP_STATE.CUSTOM.label
         ];
+        this.packageContents = defaultPackageContents;
+        this.destroy$ = new Subject();
+        this.packages$ = this.reload$.pipe(takeUntil(this.destroy$), tap(() => (this.reloading = true)), switchMap(() => this.ecosystemService.getPackageApplications()), tap(packages => {
+            packages.forEach(pckg => {
+                pckg.filterProps = this.ecosystemService.getAppFilterProps(pckg);
+            });
+        }), tap(() => (this.reloading = false)), shareReplay(1));
     }
-    async updatePlugin(app, plugin, downgrade = false) {
-        try {
-            await this.bsModalService.show(UpdatePluginOfAppComponent, {
-                class: 'modal-sm',
-                ariaDescribedby: 'modal-body',
-                ariaLabelledBy: 'modal-title',
-                initialState: {
-                    app,
-                    plugin,
-                    downgrade
-                },
-                ignoreBackdropClick: true
-            }).content.result;
-            this.refresh();
-        }
-        catch (er) {
-            return;
-        }
+    ngOnInit() {
+        this.hasAdminPermissions = this.permissions.hasRole(Permissions.ROLE_APPLICATION_MANAGEMENT_ADMIN);
+        this.loadPackages();
+    }
+    loadPackages() {
+        this.reload$.next();
+    }
+    addPackage() {
+        const initialState = {
+            id: EcosystemWizards.PACKAGE_UPLOAD
+        };
+        const modalOptions = { initialState };
+        const modalRef = this.wizardModalService.show(modalOptions);
+        modalRef.content.onClose.subscribe(() => {
+            this.loadPackages();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    setFilterPipe(pipe) {
+        this.filteredPackages$ = this.packages$.pipe(src => pipe(src));
     }
-    refresh() {
-        this.loadData();
+    resetFilters() {
+        this.filtersComponent?.resetAllFilters();
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackagesListComponent, deps: [{ token: i1.EcosystemService }, { token: i2.WizardModalService }, { token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PackagesListComponent, selector: "c8y-packages-list", viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: ListFiltersComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Extensions' | translate }}</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    [path]=\"'ecosystem/extension/extensions'\"\n    [label]=\"'Extensions' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"hasAdminPermissions\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add extension package' | translate }}\"\n    type=\"button\"\n    data-cy=\"packages-list--add-extension-package\"\n    (click)=\"addPackage()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add extension package' | 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=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"loadPackages()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"p-r-8 p-l-8\"\n>\n  <c8y-list-filters\n    *ngIf=\"packages$ | async\"\n    [packageTypes]=\"packageTypes\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n    [packageContents]=\"packageContents\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  >\n    <c8y-archived-filter></c8y-archived-filter>\n  </c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(packages$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#extensions\"></c8y-help>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex m-b-8\"\n    *ngIf=\"(filteredPackages$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Package' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let app of filteredPackages$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadPackages()\"\n      (onAppCloned)=\"loadPackages()\"\n      [app]=\"app\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [title]=\"'No extensions to display.' | translate\"\n  [subtitle]=\"hasAdminPermissions ? (emptyStateSubtitle | translate) : ''\"\n  *ngIf=\"(packages$ | async)?.length === 0\"\n>\n  <div *ngIf=\"hasAdminPermissions\">\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add extension package' | translate }}\"\n      type=\"button\"\n      (click)=\"addPackage()\"\n    >\n      {{ 'Add extension package' | translate }}\n    </button>\n  </div>\n</c8y-ui-empty-state>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching extensions.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(packages$ | async)?.length > 0 && (filteredPackages$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\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: 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: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i2.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "component", type: i1.ApplicationCardComponent, selector: "c8y-application-card", inputs: ["app", "canEdit"], outputs: ["onAppDeleted", "onAppCloned"] }, { 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackagesListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-packages-list', template: "<c8y-title>{{ 'Extensions' | translate }}</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    [path]=\"'ecosystem/extension/extensions'\"\n    [label]=\"'Extensions' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"hasAdminPermissions\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add extension package' | translate }}\"\n    type=\"button\"\n    data-cy=\"packages-list--add-extension-package\"\n    (click)=\"addPackage()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add extension package' | 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=\"{{ 'Reload' | translate }}\"\n    type=\"button\"\n    (click)=\"loadPackages()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"p-r-8 p-l-8\"\n>\n  <c8y-list-filters\n    *ngIf=\"packages$ | async\"\n    [packageTypes]=\"packageTypes\"\n    [packageAvailabilities]=\"packageAvailabilities\"\n    [packageContents]=\"packageContents\"\n    (filterPipeChange)=\"setFilterPipe($event)\"\n  >\n    <c8y-archived-filter></c8y-archived-filter>\n  </c8y-list-filters>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(packages$ | async)?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/ecosystem/#extensions\"></c8y-help>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs d-flex m-b-8\"\n    *ngIf=\"(filteredPackages$ | async)?.length > 0\"\n  >\n    <div class=\"card-block card-column-40\">\n      <div class=\"card-appicon p-l-32 p-r-16 m-r-0 m-l-4\"></div>\n      {{ 'Package' | translate }}\n    </div>\n    <div class=\"card-block p-0 card-column-80 m-r-40\">\n      <div class=\"card-block card-column-80\">{{ 'Description' | translate }}</div>\n      <div class=\"card-block card-column-20\">{{ 'Type' | translate }}</div>\n      <div class=\"card-block card-column-20\"></div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-sm-4 col-md-3\"\n    *ngFor=\"let app of filteredPackages$ | async\"\n  >\n    <c8y-application-card\n      class=\"d-contents\"\n      (onAppDeleted)=\"loadPackages()\"\n      (onAppCloned)=\"loadPackages()\"\n      [app]=\"app\"\n    ></c8y-application-card>\n  </div>\n</div>\n\n<c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [title]=\"'No extensions to display.' | translate\"\n  [subtitle]=\"hasAdminPermissions ? (emptyStateSubtitle | translate) : ''\"\n  *ngIf=\"(packages$ | async)?.length === 0\"\n>\n  <div *ngIf=\"hasAdminPermissions\">\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Add extension package' | translate }}\"\n      type=\"button\"\n      (click)=\"addPackage()\"\n    >\n      {{ 'Add extension package' | translate }}\n    </button>\n  </div>\n</c8y-ui-empty-state>\n\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No matching extensions.' | translate\"\n  [subtitle]=\"'Refine your search terms and/or the filters' | translate\"\n  *ngIf=\"(packages$ | async)?.length > 0 && (filteredPackages$ | async)?.length === 0\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filters' | translate }}\"\n    type=\"button\"\n    (click)=\"resetFilters()\"\n  >\n    {{ 'Reset filters' | translate }}\n  </button>\n</c8y-ui-empty-state>\n" }]
+        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.WizardModalService }, { type: i2.Permissions }], propDecorators: { filtersComponent: [{
+                type: ViewChild,
+                args: [ListFiltersComponent]
+            }] } });
+
+class PackageVersionsGuard {
+    canActivate(route) {
+        const app = route.data.contextData || route.parent.data.contextData;
+        return !!app?.applicationVersions?.length;
     }
-    addInstallButtonToHeaderActionControls() {
-        if (this.appId) {
-            this.headerActionControls = [
-                {
-                    text: gettext('Install plugins'),
-                    callback: () => {
-                        this.installPlugins();
-                    },
-                    icon: 'plus-circle',
-                    type: 'custom'
-                }
-            ];
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsGuard }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsGuard, decorators: [{
+            type: Injectable
+        }] });
+
+class PackageVersionsAppsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsAppsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PackageVersionsAppsComponent, selector: "c8y-contents-apps", inputs: { selectedVersionManifest: "selectedVersionManifest" }, ngImport: i0, template: "<p class=\"legend form-block\">\n  {{ 'Application' | translate }}\n</p>\n\n<div  *ngIf=\"selectedVersionManifest?.name; else emptyApp\">\n  <c8y-li>\n    <c8y-li-icon icon=\"big-parcel\"></c8y-li-icon>\n    <h5 class=\"text-medium text-16 p-b-8\">\n      {{ selectedVersionManifest?.name | humanizeAppName | async }}\n      <small class=\"m-l-8\" *ngIf=\"selectedVersionManifest?.requiredPlatformVersion\">\n        <em>{{ selectedVersionManifest?.requiredPlatformVersion }}</em>\n      </small>\n    </h5>\n    <p *ngIf=\"selectedVersionManifest?.description; else notAvailable\">\n      {{ selectedVersionManifest?.description }}\n    </p>\n  </c8y-li>\n</div>\n\n<ng-template #notAvailable>\n  <p class=\"text-muted\">\n    <em>{{ 'No description available.' | translate }}</em>\n  </p>\n</ng-template>\n\n<ng-template #emptyApp>\n  <c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [horizontal]=\"true\"\n  [title]=\"'No application.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain an application.' | translate\"\n  ></c8y-ui-empty-state>\n</ng-template>", 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.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: "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.9", ngImport: i0, type: PackageVersionsAppsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-contents-apps', template: "<p class=\"legend form-block\">\n  {{ 'Application' | translate }}\n</p>\n\n<div  *ngIf=\"selectedVersionManifest?.name; else emptyApp\">\n  <c8y-li>\n    <c8y-li-icon icon=\"big-parcel\"></c8y-li-icon>\n    <h5 class=\"text-medium text-16 p-b-8\">\n      {{ selectedVersionManifest?.name | humanizeAppName | async }}\n      <small class=\"m-l-8\" *ngIf=\"selectedVersionManifest?.requiredPlatformVersion\">\n        <em>{{ selectedVersionManifest?.requiredPlatformVersion }}</em>\n      </small>\n    </h5>\n    <p *ngIf=\"selectedVersionManifest?.description; else notAvailable\">\n      {{ selectedVersionManifest?.description }}\n    </p>\n  </c8y-li>\n</div>\n\n<ng-template #notAvailable>\n  <p class=\"text-muted\">\n    <em>{{ 'No description available.' | translate }}</em>\n  </p>\n</ng-template>\n\n<ng-template #emptyApp>\n  <c8y-ui-empty-state\n  [icon]=\"'big-parcel'\"\n  [horizontal]=\"true\"\n  [title]=\"'No application.' | translate\"\n  [subtitle]=\"'This package doesn\\'t contain an application.' | translate\"\n  ></c8y-ui-empty-state>\n</ng-template>" }]
+        }], propDecorators: { selectedVersionManifest: [{
+                type: Input,
+                args: ['selectedVersionManifest']
+            }] } });
+
+class PackageVersionsPluginsComponent {
+    constructor() {
+        this.exportedPlugins$ = new BehaviorSubject([]);
     }
-    async handleRemotesInstallation(plugins) {
-        const updatedRemotes = await this.pluginsService.addRemotes(this.app, plugins);
-        return this.emitRemotes(updatedRemotes);
+    async ngOnChanges() {
+        this.exportedPlugins$.next(this.getExportedPlugins());
     }
-    emitRemotes(pluginsConfig) {
-        const { remotes, excludedRemotes } = pluginsConfig;
-        // needed for first time adding/removing a plugin
-        if (!this.app.config) {
-            this.app.config = {};
-        }
-        this.app.config.remotes = remotes;
-        this.app.config.excludedRemotes = excludedRemotes;
-        const actualRemotes = this.pluginsService.getMFRemotes(this.app);
-        this.remotePlugins$.next(actualRemotes);
-        return { ...this.remotePlugins$.value };
+    getExportedPlugins() {
+        return this.selectedVersionManifest?.exports || [];
     }
-    async getApplicationMO() {
-        let id = this.appId;
-        if (!id) {
-            const { id: routeId } = this.activatedRoute.snapshot.parent.data.contextData;
-            id = routeId;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsPluginsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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" }]
+        }], propDecorators: { selectedVersionManifest: [{
+                type: Input,
+                args: ['selectedVersionManifest']
+            }] } });
+
+class PackageContentsComponent {
+    constructor(activatedRoute, applicationService, alertService, contextRouteService) {
+        this.activatedRoute = activatedRoute;
+        this.applicationService = applicationService;
+        this.alertService = alertService;
+        this.contextRouteService = contextRouteService;
+        this.package = {};
+        this.isLoading = false;
+        this.packageVersionProperties = packageProperties;
+    }
+    async ngOnChanges(changes) {
+        if (changes.selectedVersion.currentValue) {
+            this.loadManifest(this.selectedVersion);
         }
+        this.selectedVersionManifest = undefined;
+    }
+    async loadManifest(version) {
+        this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
+        this.isLoading = true;
+        this.selectedVersionManifest = await this.getManifest(version);
+        this.isLoading = false;
+    }
+    async getManifest(version) {
         try {
-            this.app = await this.ecosystemService.getApplication(id);
+            return await this.applicationService.getAppManifest(this.package, version);
         }
-        catch (er) {
-            if (er) {
-                this.alertService.addServerFailure(er);
-            }
+        catch (error) {
+            this.alertService.addServerFailure(error);
         }
-        return this.app;
+        return undefined;
     }
-    async getApplicationMFExports(app) {
-        const exports = this.pluginsService.getMFExports(app, [], true);
-        return exports;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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" }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i4.ApplicationService }, { type: i2.AlertService }, { type: i2.ContextRouteService }], propDecorators: { selectedVersion: [{
+                type: Input
+            }] } });
+
+const DEFAULT_VERSIONS_LIMIT = 20;
+class PackageVersionsListComponent {
+    constructor(activatedRoute, pluginsService, ecosystemService, translateService, modal, alertService, optionsService, permissions, gainsightService) {
+        this.activatedRoute = activatedRoute;
+        this.pluginsService = pluginsService;
+        this.ecosystemService = ecosystemService;
+        this.translateService = translateService;
+        this.modal = modal;
+        this.alertService = alertService;
+        this.optionsService = optionsService;
+        this.permissions = permissions;
+        this.gainsightService = gainsightService;
+        this.CURRENT_LOCATION = location.href;
+        this.isLoading = false;
+        this.hasAdminPermissions = false;
+        this.isPackageOwnedByCurrentTenant = false;
+        this.onVersionSelect = new EventEmitter();
     }
-    async getApplicationMFRemotes(app) {
-        const appConfigRemotes = this.pluginsService.getMFRemotes(app);
-        this.remotePlugins$.next(appConfigRemotes || {});
+    async ngOnInit() {
+        this.isLoading = true;
+        this.hasAdminPermissions = this.permissions.hasRole(Permissions.ROLE_APPLICATION_MANAGEMENT_ADMIN);
+        this.package = this.activatedRoute?.snapshot?.parent?.data?.contextData;
+        this.isPackageOwnedByCurrentTenant = this.ecosystemService.isOwner(this.package);
+        this.versionsLimit = (await this.optionsService.getSystemOption('application', 'versions.limit', DEFAULT_VERSIONS_LIMIT));
+        this.sortVersions();
+        this.isLoading = false;
     }
-    async getAllApplicationsMFExports(app) {
-        const exportedByCurrentApp = await this.getApplicationMFExports(app);
-        const allAppsMFExports = await this.pluginsService.getAllMFExports(true);
-        this.allAvailablePlugins$.next([...allAppsMFExports, ...exportedByCurrentApp]);
+    async downloadArchive(appVersion) {
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
+            component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
+            action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DOWNLOAD,
+            url: this.CURRENT_LOCATION
+        });
+        const archiveMO = await this.ecosystemService.getArchiveManagedObject(appVersion.binaryId);
+        await this.ecosystemService.downloadArchive(this.package, {
+            id: appVersion.binaryId,
+            name: archiveMO.name
+        });
     }
-    async getAllSelfMFExports(app) {
-        const exportedByCurrentApp = await this.getApplicationMFExports(app);
-        this.selfPlugins$.next(exportedByCurrentApp.filter(({ scope }) => scope === 'self'));
+    packageVersionUploaded() {
+        this.activatedRoute.snapshot.parent.data.contextData = this.package;
+        this.sortVersions();
+        this.setUploadedVersionAsLatest();
     }
-    getInstallModalInitState() {
-        return {
-            plugins$: combineLatest([this.allAvailablePlugins$, this.installedPlugins$]).pipe(map(([allPlugins, installedPlugins]) => {
-                // to not mutate the original array and objects contained in it
-                const allPluginsAsNewObjects = allPlugins.map(p => ({ ...p }));
-                for (const plugin of installedPlugins) {
-                    let installedPlugin = allPluginsAsNewObjects.find(p => p.id === plugin.id);
-                    if (!installedPlugin && plugin.installedViaTag) {
-                        installedPlugin = allPluginsAsNewObjects.find(p => p.contextPath === plugin.contextPath &&
-                            p.module === plugin.module &&
-                            p.tags?.includes(plugin.installedViaTag));
-                    }
-                    if (installedPlugin) {
-                        installedPlugin.installed = true;
-                        continue;
-                    }
-                }
-                return allPluginsAsNewObjects.map(p => ({ ...p, installed: !!p.installed }));
-            }), shareReplay(1))
-        };
+    selectVersion(version) {
+        this.selectedVersion = version;
+        this.onVersionSelect.emit(version);
     }
-    getOrphanedPlugins(orphanedPluginIds, allPlugins) {
-        const orphanedPlugins = orphanedPluginIds.map(p => this.extractDetails(p));
-        const orphanedPluginsUpdated = orphanedPlugins.map(p => {
-            const pluginWithMatchingTag = allPlugins.find(tmp => tmp.contextPath === p.contextPath &&
-                tmp.module === p.module &&
-                tmp.tags?.includes(p.version || 'latest'));
-            if (pluginWithMatchingTag) {
-                return {
-                    ...pluginWithMatchingTag,
-                    id: p.id,
-                    status: ApplicationPluginStatus.AUTO,
-                    installedViaTag: p.version || 'latest'
-                };
-            }
-            const pluginInDifferentVersion = allPlugins.find(tmp => tmp.contextPath === p.contextPath && tmp.module === p.module);
-            if (pluginInDifferentVersion) {
-                return {
-                    ...pluginInDifferentVersion,
-                    version: p.version,
-                    id: p.id,
-                    status: ApplicationPluginStatus.OUTDATED
-                };
-            }
-            return p;
-        });
-        return orphanedPluginsUpdated;
+    async removeVersionPackage(version) {
+        try {
+            await this.ecosystemService.deletePackageVersion(this.package, { version });
+            this.alertService.success(this.translateService.instant(gettext('Package version {{version}} has been removed'), {
+                version
+            }));
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DELETE,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SUCCESS,
+                url: this.CURRENT_LOCATION
+            });
+        }
+        catch (e) {
+            this.alertService.addServerFailure(e);
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DELETE,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                url: this.CURRENT_LOCATION
+            });
+        }
+        if (version === this.selectedVersion) {
+            this.selectVersion(null);
+        }
+        await this.refreshPackage();
     }
-    splitOrphanedPluginsIntoOrphanedAndRevokedPlugins(allPlugins, orphanedPlugins) {
-        const revokedPlugins = new Array();
-        const actuallyOrphanedPlugins = new Array();
-        for (const plugin of orphanedPlugins) {
-            const foundFamiliarPlugin = allPlugins.find(plugin1 => plugin.contextPath === plugin1.contextPath && plugin.module === plugin1.module);
-            if (foundFamiliarPlugin) {
-                revokedPlugins.push(Object.assign({}, foundFamiliarPlugin, plugin, {
-                    status: ApplicationPluginStatus.REVOKED
-                }));
-            }
-            else {
-                actuallyOrphanedPlugins.push(plugin);
-            }
+    async setVersionAsLatest(appVersion) {
+        try {
+            await this.ecosystemService.setPackageVersionTag(this.package, appVersion.version, [
+                ...appVersion.tags,
+                'latest'
+            ]);
+            // TODO added it due to: https://cumulocity.atlassian.net/browse/MTM-48553
+            // Remove it when BE fixes issues with activeVersion.
+            await this.ecosystemService.setAppActiveVersion(this.package, appVersion.binaryId);
+            this.alertService.success(gettext('Tag has been set.'));
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.SET_AS_LATEST,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SUCCESS,
+                url: this.CURRENT_LOCATION
+            });
         }
-        return { revokedPlugins, actuallyOrphanedPlugins };
+        catch (e) {
+            this.alertService.addServerFailure(e);
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.SET_AS_LATEST,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                url: this.CURRENT_LOCATION
+            });
+            return;
+        }
+        await this.refreshPackage();
     }
-    getInstalledPlugins(allPlugins, remotePlugins) {
-        const availablePlugins = allPlugins
-            .filter(plugin => remotePlugins.includes(plugin.id))
-            .map(plugin => Object.assign(plugin, {
-            status: plugin.tags?.includes('latest')
-                ? ApplicationPluginStatus.LATEST
-                : ApplicationPluginStatus.OUTDATED
-        }));
-        const orphanedPluginIds = remotePlugins.filter(r => !availablePlugins.find(plugin => plugin.id === r));
-        const orphanedPlugins = this.getOrphanedPlugins(orphanedPluginIds, allPlugins);
-        const notActuallyOrphanedPlugins = orphanedPlugins.filter(p => p.status === ApplicationPluginStatus.AUTO);
-        const orphanedOrRevokedPlugins = orphanedPlugins.filter(p => p.status !== ApplicationPluginStatus.AUTO);
-        const { actuallyOrphanedPlugins, revokedPlugins } = this.splitOrphanedPluginsIntoOrphanedAndRevokedPlugins(allPlugins, orphanedOrRevokedPlugins);
-        return [
-            ...availablePlugins,
-            ...notActuallyOrphanedPlugins,
-            ...revokedPlugins,
-            ...actuallyOrphanedPlugins
-        ];
+    async acknowledgeLimitReached() {
+        await this.modal.acknowledge(gettext('Package limit exceeded'), this.translateService.instant(gettext('You have reached the maximum number of {{ versionsLimit }} package versions. To add another version, first delete one from the list.'), { versionsLimit: this.versionsLimit }), Status.INFO, gettext('Close'));
+        throw undefined;
     }
-    extractDetails(pluginId) {
-        const contextPath = this.getStringMatchingRegex(pluginId, /^[^@]*(@|\/)/);
-        const version = this.getStringMatchingRegex(pluginId, /@.*\//);
-        const module = this.getStringMatchingRegex(pluginId, /\/.*$/);
-        const unavailable = gettext('unavailable`plugin`');
-        return {
-            id: pluginId,
-            idLatest: `${contextPath}/${module}`,
-            path: '',
-            module,
-            name: module,
-            status: ApplicationPluginStatus.ORPHANED,
-            contextPath: contextPath,
-            description: unavailable,
-            version: version
-        };
+    async refreshPackage() {
+        this.isLoading = true;
+        this.package = await this.ecosystemService.getApplication(this.package.id);
+        this.activatedRoute.snapshot.parent.data.contextData = this.package;
+        this.sortVersions();
+        this.isLoading = false;
     }
-    getStringMatchingRegex(str, regex) {
-        const matches = str.match(regex);
-        const value = matches ? matches[0] : '';
-        return value.replace(/(@|\/)/g, '');
+    sortVersions() {
+        this.sortedVersions = this.pluginsService.sortVersions({
+            list: this.package.applicationVersions,
+            path: ['version']
+        }, 'desc');
+        this.toggleUploadPossibility();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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"], 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" }] }); }
+    async setUploadedVersionAsLatest() {
+        const uploadedVersion = this.package.applicationVersions[this.package.applicationVersions.length - 1];
+        try {
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_VERSIONS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_VERSIONS,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.UPLOAD,
+                result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SUCCESS,
+                url: this.CURRENT_LOCATION
+            });
+            await this.modal.confirm(gettext('Upload successful'), this.translateService.instant(gettext('Do you want to set version {{version}} as the latest? Deploying a new application will always use this version.'), { version: uploadedVersion.version }), Status.SUCCESS, {
+                ok: gettext('Set as latest`version`'),
+                cancel: gettext('Keep unchanged`version`')
+            });
+        }
+        catch (e) {
+            await this.refreshPackage();
+            return;
+        }
+        await this.setVersionAsLatest(uploadedVersion);
+    }
+    toggleUploadPossibility() {
+        this.preUploadCallback =
+            this.sortedVersions.length < this.versionsLimit
+                ? null
+                : this.acknowledgeLimitReached.bind(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageVersionsListComponent, 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: [{
-                type: Input
-            }], dataGrid: [{
-                type: ViewChild,
-                args: [DataGridComponent, { static: false }]
+            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: [{
+                type: Output
             }] } });
 
-class ApplicationPluginsGuard {
+class PackageVersionsComponent {
+    constructor(activatedRoute, contextRouteService) {
+        this.activatedRoute = activatedRoute;
+        this.contextRouteService = contextRouteService;
+        this.package = {};
+    }
+    async ngOnInit() {
+        this.package = this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
+    }
+    clearSelectedVersion() {
+        this.selectedVersion = null;
+    }
+    selectVersion(version) {
+        this.selectedVersion = version;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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.9", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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 }] });
+
+class PackageGuard {
     constructor(ecosystemService) {
         this.ecosystemService = ecosystemService;
     }
@@ -2817,102 +2939,15 @@ class ApplicationPluginsGuard {
         if (!app) {
             return false;
         }
-        const manifest = app.manifest;
-        if (!manifest) {
-            return false;
-        }
-        return (app.type === ApplicationType.HOSTED &&
-            this.ecosystemService.isOwner(app) &&
-            !this.ecosystemService.isPackage(app) &&
-            // apps like e.g. the public-options should not have the plugins tab
-            !manifest.noAppSwitcher);
+        return this.ecosystemService.isPackage(app);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageGuard, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageGuard }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageGuard, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.EcosystemService }] });
 
-class ApplicationPluginsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, declarations: [ApplicationPluginsComponent,
-            PluginListItemComponent,
-            InstallPluginComponent,
-            PluginListComponent,
-            AppsToUpdateRemotesSelectComponent,
-            AppStatePipe,
-            LabelCellRendererComponent,
-            OrphanedStatusCellRendererComponent,
-            UpdatePluginOfAppComponent,
-            OnlyLatestPluginVersionPipe], imports: [CoreModule, SharedEcosystemModule], exports: [ApplicationPluginsComponent,
-            PluginListItemComponent,
-            InstallPluginComponent,
-            PluginListComponent,
-            AppsToUpdateRemotesSelectComponent,
-            AppStatePipe,
-            LabelCellRendererComponent,
-            OrphanedStatusCellRendererComponent,
-            UpdatePluginOfAppComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, providers: [
-            ApplicationPluginsGuard,
-            hookRoute([
-                {
-                    path: 'plugins',
-                    component: ApplicationPluginsComponent,
-                    icon: 'plugin',
-                    label: gettext('Plugins'),
-                    context: ViewContext.Application,
-                    priority: 3,
-                    canActivate: [ApplicationPluginsGuard]
-                }
-            ])
-        ], imports: [CoreModule, SharedEcosystemModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CoreModule, SharedEcosystemModule],
-                    declarations: [
-                        ApplicationPluginsComponent,
-                        PluginListItemComponent,
-                        InstallPluginComponent,
-                        PluginListComponent,
-                        AppsToUpdateRemotesSelectComponent,
-                        AppStatePipe,
-                        LabelCellRendererComponent,
-                        OrphanedStatusCellRendererComponent,
-                        UpdatePluginOfAppComponent,
-                        OnlyLatestPluginVersionPipe
-                    ],
-                    exports: [
-                        ApplicationPluginsComponent,
-                        PluginListItemComponent,
-                        InstallPluginComponent,
-                        PluginListComponent,
-                        AppsToUpdateRemotesSelectComponent,
-                        AppStatePipe,
-                        LabelCellRendererComponent,
-                        OrphanedStatusCellRendererComponent,
-                        UpdatePluginOfAppComponent
-                    ],
-                    providers: [
-                        ApplicationPluginsGuard,
-                        hookRoute([
-                            {
-                                path: 'plugins',
-                                component: ApplicationPluginsComponent,
-                                icon: 'plugin',
-                                label: gettext('Plugins'),
-                                context: ViewContext.Application,
-                                priority: 3,
-                                canActivate: [ApplicationPluginsGuard]
-                            }
-                        ])
-                    ]
-                }]
-        }] });
-
 const ecosystemMainRoutes = [
     {
         path: 'ecosystem/application',
@@ -3028,7 +3063,8 @@ class EcosystemModule {
             SharedEcosystemModule,
             LicenseConfirmModule,
             IconSelectorModule,
-            A11yModule], exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent] }); }
+            A11yModule,
+            ArchivedConfirmModule], exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EcosystemModule, providers: [
             hookTab(EcosystemTabs),
             hookNavigator(EcosystemNavigationFactory),
@@ -3081,7 +3117,8 @@ class EcosystemModule {
             SharedEcosystemModule,
             LicenseConfirmModule,
             IconSelectorModule,
-            A11yModule] }); }
+            A11yModule,
+            ArchivedConfirmModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EcosystemModule, decorators: [{
             type: NgModule,
@@ -3120,7 +3157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         SharedEcosystemModule,
                         LicenseConfirmModule,
                         IconSelectorModule,
-                        A11yModule
+                        A11yModule,
+                        ArchivedConfirmModule
                     ],
                     exports: [ApplicationPropertiesComponent, UpdateApplicationModalComponent],
                     providers: [